726 files changed, 114941 insertions, 0 deletions

diff --git a/files/uk/web/accessibility/index.html b/files/uk/web/accessibility/index.html
new file mode 100644
index 0000000000..604d8762ac
--- /dev/null
+++ b/files/uk/web/accessibility/index.html
@@ -0,0 +1,74 @@
+---
+title: Accessibility
+slug: Web/Accessibility
+tags:
+  - Accessibility
+  - Guide
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/Accessibility
+---
+<p><span class="seoSummary"><strong>Accessibility</strong> (often abbreviated to <strong>A11y</strong>—as in "a" then 11 characters then "y") in Web development means enabling as many people as possible to use Web sites, even when those people's abilities are limited in some way. </span></p>
+
+<p>For many people, technology makes things easier. For people with disabilities, technology makes things possible. Accessibility means developing content to be as accessible as possible no matter an individual's physical and cognitive abilities and no matter how they access the web.</p>
+
+<p>"<strong>The Web is fundamentally designed to work for all people</strong>, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability."<a href="http://www.w3.org/standards/webdesign/accessibility" title="http://www.w3.org/standards/webdesign/accessibility">W3C - Accessibility</a></p>
+
+<div class="cleared topicpage-table">
+<div class="section">
+<h2 class="Key_accessibility_tutorials" id="Key_accessibility_tutorials" name="Key_accessibility_tutorials">Key tutorials</h2>
+
+<p>The MDN <a href="/en-US/docs/Learn/Accessibility">Accessibility Learning Area</a> contains modern, up-to-date tutorials covering accessibility essentials:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></dt>
+ <dd>This article starts off the module with a good look at what accessibility actually is — this includes what groups of people we need to consider and why, what tools different people use to interact with the Web, and how we can make accessibility part of our web development workflow.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></dt>
+ <dd>A great deal of web content can be made accessible just by making sure the correct HTML elements are used for the correct purpose at all times. This article looks in detail at how HTML can be used to ensure maximum accessibility.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></dt>
+ <dd>CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences ... or they can significantly harm accessibility if misused. This article outlines some CSS and JavaScript best practices that should be considered to ensure even complex content is as accessible as possible.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></dt>
+ <dd>Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. Here we'll show how to use it at a basic level to improve accessibility.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></dt>
+ <dd>Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users. This article shows how.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></dt>
+ <dd>With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Other_documentation" id="Other_documentation" name="Other_documentation">Other documentation</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG">Understanding the Web Content Accessibility Guidelines</a></dt>
+ <dd>
+ <p>This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 (WCAG 2.0 or just WCAG, for the purposes of this writing).</p>
+ </dd>
+ <dt><a href="/en/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en/Accessibility/Keyboard-navigable JavaScript widgets">Keyboard-navigable JavaScript widgets</a></dt>
+ <dd>Until now, web developers who want to make their styled &lt;div&gt; and &lt;span&gt; based widgets have lacked the proper techniques. <strong>Keyboard accessibility</strong> is part of the minimum accessibility requirements which a developer should be aware of.</dd>
+ <dt><a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a></dt>
+ <dd>A collection of articles to learn how to use ARIA to make your HTML documents more accessible.</dd>
+ <dt><a href="/en-US/docs/Accessibility/AT_Development" title="AT Development">Assistive technology (AT) development</a></dt>
+ <dd>A collection of articles intended for AT developers</dd>
+ <dt><a href="/en-US/docs/Web/Accessibility/Mobile_accessibility_checklist">Mobile accessibility checklist</a></dt>
+ <dd>This document provides a concise checklist of accessibility requirements for mobile app developers.</dd>
+ <dt><a href="/en-US/docs/Web/Accessibility/Cognitive_accessibility">Cognitive accessibility</a></dt>
+ <dd>When creating web content, be aware of how you can ensure that it is accessible to people cognitive impairments.</dd>
+ <dt><a href="/en-US/docs/Web/Accessibility/Seizure_disorders">Accessibility for seizure disorders</a></dt>
+ <dd>Some types of visual web content can induce seizures in people with certain brain disorders. Understand the types of content that can be problematic, and find tools and strategies to help you avoid them.</dd>
+ <dt></dt>
+</dl>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/Accessibility" title="/en-US/docs/tag/Accessibility">View all articles about Accessibility...</a></span></p>
+</div>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://lists.mozilla.org/listinfo/accessibility">Mozilla mailing list about accessibility</a></li>
+ <li><a href="http://www.w3.org/WAI/IG/">WAI Interest Group</a></li>
+ <li><a href="https://mozillians.org/en-US/group/1-accessibility">Mozillians group about accessibility</a></li>
+ <li><a href="/en-US/docs/Web/Guide" title="REDIRECT Web">Developer guides</a></li>
+ <li><a href="/en-US/docs/Mozilla/Accessibility" title="Accessibility is the idea that software (among other things) should be designed to be usable and, as much as possible, convenient to use for people with disabilities. Mozilla strives to make its software accessible; the documents below cover the ways in which we do so.">Accessibility and Mozilla</a></li>
+</ul>
diff --git a/files/uk/web/accessibility/understanding_wcag/index.html b/files/uk/web/accessibility/understanding_wcag/index.html
new file mode 100644
index 0000000000..fe71b20ebc
--- /dev/null
+++ b/files/uk/web/accessibility/understanding_wcag/index.html
@@ -0,0 +1,59 @@
+---
+title: Understanding the Web Content Accessibility Guidelines
+slug: Web/Accessibility/Understanding_WCAG
+tags:
+  - NeedsTranslation
+  - TopicStub
+  - WCAG
+  - Web Content Accessibility Guidelines
+translation_of: Web/Accessibility/Understanding_WCAG
+---
+<p class="summary">This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 or 2.1 (or just WCAG, for the purposes of this writing).</p>
+
+<p>The WCAG 2.0 and 2.1 provide a detailed set of guidelines for making web content more accessible to people with a wide variety of disabilities. It is comprehensive but incredibly detailed, and quite difficult to gain a rapid understanding of. For this reason, we have summarised the practical steps you need to take to satisfy the different recommendations, with further links to more details where required.</p>
+
+<h2 id="The_four_principles">The four principles</h2>
+
+<p>WCAG is broadly broken down into four principles — major things that web content <strong>must be</strong> to be considered accessible (see <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head">Understanding the Four Principles of Accessibility </a>for the WCAG definitions).</p>
+
+<p>Each of the links below will take you to pages that further expand on these areas, giving you practical advice on how to write your web content so it conforms to the success criteria outlined in each of the WCAG 2.0 and 2.1 guidelines that further sub-divides each principle.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Perceivable">Perceivable:</a> Users must be able to perceive it in some way, using one or more of their senses.</li>
+ <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Operable">Operable</a>: Users must be able to control UI elements (e.g. buttons must be clickable in some way — mouse, keyboard, voice command, etc.).</li>
+ <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Understandable">Understandable</a>: The content must be understandable to its users.</li>
+ <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Robust">Robust</a>: The content must be developed using well-adopted web standards that will work across different browsers, now and in the future.</li>
+</ul>
+
+<h2 id="Should_I_use_WCAG_2.0_or_2.1">Should I use WCAG 2.0 or 2.1?</h2>
+
+<p>WCAG 2.1 is the most recent and relevant accessibility standard. Use WCAG 2.1 to help more people with disabilities and reduce the future legal risk for web site owners. Target WCAG 2.0 first when allocating resources. Then step up to WCAG 2.1. </p>
+
+<h3 id="What_is_WCAG_2.1">What is WCAG 2.1?</h3>
+
+<p>WCAG 2.1 was published as an official recommendation on 05 June 2018. The European Union (EU) adopted WCAG 2.1 as the digital accessibility standard in September 2018. W3C published a press release <a href="https://www.w3.org/blog/2018/09/wcag-2-1-adoption-in-europe/">WCAG 2.1 Adoption in Europe</a>. </p>
+
+<p>WCAG 2.1 includes:</p>
+
+<ul>
+ <li>all of WCAG 2.0 (verbatim, word-for-word)</li>
+ <li>17 new Success Criteria at the A / AA / AAA levels primarily addressing user needs in these areas:
+  <ul>
+   <li>Mobile Accessibility </li>
+   <li>Low Vision</li>
+   <li>Cognitive</li>
+  </ul>
+ </li>
+ <li>Read more about WCAG 2.1:
+  <ul>
+   <li>Deque: <a href="https://www.deque.com/blog/wcag-2-1-what-is-next-for-accessibility-guidelines/">WCAG 2.1:  What is Next for Accessibility Guidelines</a></li>
+   <li>TPG:  <a href="https://developer.paciellogroup.com/blog/2018/06/web-content-accessibility-guidelines-wcag-2-1/">Web Content Accessibility Guidelines (WCAG) 2.1</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Legal_standing">Legal standing</h2>
+
+<p>This guide is intended to provide practical information to help you build better, more accessible websites. However, we are not lawyers, and none of this constitutes legal advice. If you are worried about the legal implications of web accessibility, we'd recommend that you check the specific legislation governing accessibility for the web/public resources in your country or locale, and seek the advice of a qualified lawyer.</p>
+
+<p><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a> and particularity the <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_guidelines_and_the_law">Accessibility guidelines and the law</a> section provide more related information.</p>
diff --git a/files/uk/web/accessibility/understanding_wcag/keyboard/index.html b/files/uk/web/accessibility/understanding_wcag/keyboard/index.html
new file mode 100644
index 0000000000..1383c66354
--- /dev/null
+++ b/files/uk/web/accessibility/understanding_wcag/keyboard/index.html
@@ -0,0 +1,94 @@
+---
+title: Клавіатура (Keyboard)
+slug: Web/Accessibility/Understanding_WCAG/Keyboard
+tags:
+  - tabIndex
+  - клікабельні елементи
+  - фокус клавіатури
+  - інтерактивні елементи
+translation_of: Web/Accessibility/Understanding_WCAG/Keyboard
+---
+<div></div>
+
+<div>Щоб бути у повній мірі доступною, веб-сторінка повинна бути керованою за допомогою однієї лише клавіатури для доступу до неї і управління нею. Це відноситься до користувачів скрінрідерів (екранні зчитувачі), але може також включати і користувачів, у яких виникають проблеми з управлінням вказівним пристроєм, наприклад, мишею або трекболом, або чия миша не працює в даний момент, або які просто вважають за краще використовувати клавіатуру для введення, коли це можливо.</div>
+
+<h2 id="Елементи_у_фокусі_повинні_мати_інтерактивну_семантику">Елементи у фокусі повинні мати інтерактивну семантику</h2>
+
+<p>Якщо елемент можна сфокусувати за допомогою клавіатури, то він повинен бути інтерактивним; тобто користувач повинен мати можливість щось робити з цим елементом, якусь зміну (наприклад, активізувати посилання або змінити параметр).</p>
+
+<div class="blockIndicator note">
+<p><strong>Примітка: </strong>один важливий виняток для цього правила, якщо елемент має<strong> </strong><code>role="document" </code>застосовану до нього, <strong>всередині </strong>інтерактивний контекст (наприклад, <code>role="application"</code>). У такому випадку фокусування вкладеного документа є єдиним способом повернення допоміжних технологій до неінтерактивного стану (часто званого "browse mode (режим перегляду)").</p>
+</div>
+
+<p>Більшість інтерактивних елементів фокусуються за замовчуванням; ви можете зробити елемент фокусним, додавши йому значення атрибуту <code>tabindex=0</code>. Однак, ви повинні додавати <code>tabindex</code> тільки в тому випадку, якщо Ви зробили елемент інтерактивним, наприклад, визначили відповідні обробники подій клавіатури.</p>
+
+<h3 id="Дивіться_також">Дивіться також</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> глобальний HTML атрибут</li>
+ <li>Обробники глобальних подій: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li>
+ <li>Обробники глобальних подій: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li>
+</ul>
+
+<h2 id="Уникайте_використання_tabindex_атрибута_який_більше_нуля">Уникайте використання <code>tabindex</code> атрибута який більше нуля</h2>
+
+<p><code>tabindex</code> атрибут вказує на те, що елемент фокусується за допомогою клавіатури. Значення нуля вказує на те, що елемент є частиною встановленого за замовчуванням порядку фокусування, який ґрунтується на порядку розташування елементів в HTML-документі. Позитивне значення ставить елемент попереду тих, які знаходяться в порядку за замовчуванням; елементи з позитивними значеннями фокусуються в порядку їх <code>tabindex</code> значення (1, а потім 2, потім 3 і т.д.).</p>
+
+<p>Це створює плутанину для користувачів лише клавіатури, коли порядок фокусування відрізняється від логічного ладу сторінки. Найкраща стратегія - структурувати HTML-документ так, щоб елементи фокусування перебували в логічному порядку, без потреби змінювати порядок їх <code>tabindex</code> значень.</p>
+
+<h3 id="Дивіться_також_2">Дивіться також</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> глобальний HTML атрибут</li>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html">Розуміння порядку фокусування</a></li>
+ <li><a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html">Не використовуйте tabindex більше 0</a></li>
+</ul>
+
+<h2 id="Клікабельні_елементи_повинні_бути_такими_що_фокусуються_і_мають_інтерактивну_семантику">Клікабельні елементи повинні бути такими що фокусуються і мають інтерактивну семантику</h2>
+
+<p>Якщо елемент можна натиснути вказівним пристроєм, наприклад, мишкою, то він також повинен бути таким що фокусується за допомогою клавіатури, і користувач повинен мати можливість щось робити, взаємодіючи з ним.</p>
+
+<p>Елемент є клікабельним, якщо має <code>onclick</code> встановлений обробник події. Ви можете зробити його таким що фокусує, додавши <code>tabindex=0</code> значення атрибута для нього. Ви маєте змогу зробити його працездатним за допомогою клавіатури, визначивши <code>onkeydown</code> обробник подій; у більшості випадків дії обробника подій повинні бути однаковими для обох типів подій.</p>
+
+<h3 id="Дивіться_також_3">Дивіться також</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> глобальний HTML атрибут</li>
+ <li>Обробники глобальних подій: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li>
+ <li>Обробники глобальних подій: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li>
+</ul>
+
+<h2 id="Інтерактивні_елементи_повинні_мати_можливість_бути_активовані_за_допомогою_клавіатури">Інтерактивні елементи повинні мати можливість бути активовані за допомогою клавіатури</h2>
+
+<p>Якщо користувач може взаємодіяти з елементом за допомогою сенсорного або вказівного пристрою, то цей елемент також повинен підтримувати взаємодію за допомогою клавіатури. Тобто, якщо ви визначили оброблювачі подій для подій дотику або кліку, їх також слід визначити для подій клавіатури. Обробники подій клавіатури повинні забезпечувати таку ж взаємодію, що і обробники сенсорних і клікабельних елементів.</p>
+
+<h3 id="Дивіться_також_4">Дивіться також</h3>
+
+<ul>
+ <li>Обробники глобальних подій: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li>
+ <li>Обробники глобальних подій: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li>
+</ul>
+
+<h2 id="Інтерактивні_елементи_повинні_бути_такими_що_фокусуються">Інтерактивні елементи повинні бути такими що фокусуються</h2>
+
+<p>Якщо користувач може взаємодіяти з елементом (наприклад, за допомогою сенсорного або вказівного пристрою), то він також повинен мати можливість фокусування за допомогою клавіатури. Ви можете зробити його такими що фокусується, додавши <code>tabindex=0</code> значення атрибута до нього. Це додасть елемент в список об'єктів, які можна сфокусувати, натиснувши кнопку <kbd>Tab</kbd>, в послідовності таких елементів, яка задана в HTML-документі.</p>
+
+<h3 id="Дивіться_також_5">Дивіться також</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> глобальний HTML атрибут</li>
+</ul>
+
+<h2 id="Елемент_що_фокусується_повинен_змінювати_стиль_при_фокусуванні">Елемент що фокусується повинен змінювати стиль при фокусуванні</h2>
+
+<p>Будь-який елемент, який може отримати фокус клавіатури, повинен мати помітний стиль, який вказує на те що елемент сфокусований. Ви можете зробити це за допомогою <code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code> CSS псевдоклас.</p>
+
+<p>Стандартні елементи фокусування, такі як посилання і поля вводу, за замовчуванням задаються браузером в спеціальному стилі, тому, можливо, вам не доведеться ставити стиль фокусування для таких елементів, якщо тільки ви не хочете, щоб стиль фокусування був більш характерним.</p>
+
+<p>Якщо ви створюєте свої власні елементи фокусування, переконайтеся, що ви також визначаєте стиль фокусування для них.</p>
+
+<h3 id="Дивіться_також_6">Дивіться також</h3>
+
+<ul>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C15.html">Застосування CSS для зміни формату представлення компонента UI, коли він отримує фокус.</a></li>
+</ul>
diff --git a/files/uk/web/api/ambient_light_events/index.html b/files/uk/web/api/ambient_light_events/index.html
new file mode 100644
index 0000000000..3c5d48cc76
--- /dev/null
+++ b/files/uk/web/api/ambient_light_events/index.html
@@ -0,0 +1,66 @@
+---
+title: Ambient Light Events
+slug: Web/API/Ambient_Light_Events
+translation_of: Web/API/Ambient_Light_Events
+---
+<div>{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}</div>
+
+<p>Ambient Light Events - це зручний спосіб реагувати на будь-які зміни інтенсивності світла, наприклад, змінюючи кольорову контрастність інтерфейсу користувача (UI) або змінюючи експозицію, необхідну для фотографування.</p>
+
+<h2 id="Опис_події">Опис події</h2>
+
+<p>Коли датчик освітленості пристрою виявляє зміну рівня освітленості, він повідомляє браузер про цю зміну. Браузер, після отримання такого сповіщення, запускає подію {{domxref ("DeviceLightEvent")}}, яка надає інформацію про точну інтенсивність світла (в одиницях люкс).</p>
+
+<p>Цю подію можна перехопити на рівні об'єкту <code>window</code> за допомогою методу {{domxref ("EventTarget.addEventListener", "addEventListener")}} (використовуючи назву події {{event ("devicelight")}}) або прикріпивши обробку події як властивість {{domxref ("window.ondevicelight")}}.</p>
+
+<p>Після перехоплення об'єкт події надає доступ до інтенсивності світла, вираженої у {{interwiki ("wikipedia", "lux")}} через властивість {{domxref ("DeviceLightEvent.value")}}.</p>
+
+<h2 id="Приклад">Приклад</h2>
+
+<pre class="brush: js notranslate">if ('ondevicelight' in window) {
+  window.addEventListener('devicelight', function(event) {
+    var body = document.querySelector('body');
+    if (event.value &lt; 50) {
+      body.classList.add('darklight');
+      body.classList.remove('brightlight');
+    } else {
+      body.classList.add('brightlight');
+      body.classList.remove('darklight');
+    }
+  });
+} else {
+  console.log('Подія devicelight не підтримується');
+}
+</pre>
+
+<h2 id="Специфікація">Специфікація</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("AmbientLight", "", "Ambient Light Events")}}</td>
+   <td>{{Spec2("AmbientLight")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність">Сумісність</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці сформована із структурованих даних. Якщо ви хочете внести свій внесок у дані, відвідайте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> та надішліть нам запит на зміни.</div>
+
+<p>{{Compat("api.DeviceLightEvent")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{domxref("DeviceLightEvent")}}</li>
+ <li>{{event("devicelight")}}</li>
+</ul>
diff --git a/files/uk/web/api/angle_instanced_arrays/index.html b/files/uk/web/api/angle_instanced_arrays/index.html
new file mode 100644
index 0000000000..db1d1906ff
--- /dev/null
+++ b/files/uk/web/api/angle_instanced_arrays/index.html
@@ -0,0 +1,83 @@
+---
+title: ANGLE_instanced_arrays
+slug: Web/API/ANGLE_instanced_arrays
+translation_of: Web/API/ANGLE_instanced_arrays
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p><code><strong>ANGLE_instanced_arrays</strong></code> <span class="tlid-translation translation" lang="uk"><span title="">розширення є частиною</span></span> <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> <span class="tlid-translation translation" lang="uk"><span title="">і дозволяє малювати один і той же об'єкт або групи подібних об'єктів кілька разів, якщо вони поділяють однакові вершинні дані, лічильник примітиву і тип.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Розширення WebGL доступні за допомогою метода</span></span>{{domxref("WebGLRenderingContext.getExtension()")}} . <span class="tlid-translation translation" lang="uk"><span title="">Для отримання додаткової інформації див</span></span><a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions"> Using Extensions</a> в <a href="/en-US/docs/Web/API/WebGL_API/Tutorial">WebGL tutorial</a>.</p>
+
+<div class="note">
+<p><strong><span class="tlid-translation translation" lang="uk"><span title="">Доступність:</span></span></strong> <span class="tlid-translation translation" lang="uk"><span title="">Це розширення доступне лише для</span></span> {{domxref("WebGLRenderingContext", "WebGL1", "", 1)}} <span class="tlid-translation translation" lang="uk"><span title="">контексті.</span></span> В {{domxref("WebGL2RenderingContext", "WebGL2", "", 1)}}, <span class="tlid-translation translation" lang="uk"><span title="">функціональність цього розширення доступна на</span></span> WebGL2 <span class="tlid-translation translation" lang="uk"><span title="">контекст за замовчуванням і константи і методи доступні без</span></span> <span class="tlid-translation translation" lang="uk"><span title="">суфіксу </span></span> "<code>ANGLE</code>".</p>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Незважаючи на назву</span></span> "ANGLE", <span class="tlid-translation translation" lang="uk"><span title="">це розширення працює на будь-якому пристрої, якщо його підтримує апаратне забезпечення, а не тільки на Windows, коли використовується бібліотека ANGLE. </span></span> "ANGLE" <span class="tlid-translation translation" lang="uk"><span title="">просто вказує, що це розширення було написано авторами бібліотеки ANGLE.</span></span></p>
+</div>
+
+<h2 id="Константи"><span class="tlid-translation translation" lang="uk"><span title="">Константи</span></span></h2>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Це розширення виставляє одну нову константу, яку можна використовувати метод </span></span>{{domxref("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} :</p>
+
+<dl>
+ <dt><code>ext.VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE</code></dt>
+ <dd><span class="tlid-translation translation" lang="uk"><span title="">Повертає </span></span>{{domxref("GLint")}} <span class="tlid-translation translation" lang="uk"><span title="">опису частотного дільника, використовуваного для інтрадерного візуалізації при використанні в</span></span> {{domxref("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} <span class="tlid-translation translation" lang="uk"><span title="">як параметр </span></span><code>pname</code> .</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p>This extension exposes three new methods.</p>
+
+<dl>
+ <dt>{{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}}</dt>
+ <dd>
+ <p>Behaves identically to {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}} except that multiple instances of the range of elements are executed, and the instance advances for each iteration.</p>
+ </dd>
+ <dt>{{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}</dt>
+ <dd>
+ <p>Behaves identically to {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}} except that multiple instances of the set of elements are executed and the instance advances between each set.</p>
+ </dd>
+ <dt>{{domxref("ANGLE_instanced_arrays.vertexAttribDivisorANGLE()", "ext.vertexAttribDivisorANGLE()")}}</dt>
+ <dd>
+ <p>Modifies the rate at which generic vertex attributes advance when rendering multiple instances of primitives with {{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}} and {{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}.</p>
+ </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Enabling the extension:</p>
+
+<pre class="brush: js">var ext = gl.getExtension('ANGLE_instanced_arrays');
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ANGLE_instanced_arrays', '', 'ANGLE_instanced_arrays')}}</td>
+   <td>{{Spec2('ANGLE_instanced_arrays')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.ANGLE_instanced_arrays")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.getExtension()")}}</li>
+ <li>{{domxref("WebGL2RenderingContext.drawArraysInstanced()")}}</li>
+ <li>{{domxref("WebGL2RenderingContext.drawElementsInstanced()")}}</li>
+ <li>{{domxref("WebGL2RenderingContext.vertexAttribDivisor()")}}</li>
+</ul>
diff --git a/files/uk/web/api/api_відображення_сторінки/index.html b/files/uk/web/api/api_відображення_сторінки/index.html
new file mode 100644
index 0000000000..6675a3783b
--- /dev/null
+++ b/files/uk/web/api/api_відображення_сторінки/index.html
@@ -0,0 +1,201 @@
+---
+title: API відображення сторінки
+slug: Web/API/API_відображення_сторінки
+tags:
+  - API
+  - API відображення сторінки
+  - visibilityState
+  - visibilitychange
+  - відображення сторінки
+  - процеси скритої закладки
+  - фоновий режим
+translation_of: Web/API/Page_Visibility_API
+---
+<div>{{DefaultAPISidebar("Page Visibility API")}}</div>
+
+<div></div>
+
+<p>При перегляді сайту за допомогою вкладок існує ймовірність того, що будь-яка з веб-сторінок знаходиться в фоновому режимі і тому користувач її не бачить. API відображення сторінки надає події, які ви можете відстежити, щоб дізнатися, коли документ стає видимим або прихованим, а також дозволяє отримати поточний стан прихованості/видимості сторінки.</p>
+
+<div class="note">
+<p><strong>Примітка:</strong> API відображення сторінки є особливо корисним для економії ресурсів та підвищення продуктивності, дозволяючи сторінці уникнути виконання непотрібних завдань, коли документ не є видимим.</p>
+</div>
+
+<p>Коли користувач згортає вікно або перемикається на іншу вкладку, API посилає подію {{event("visibilitychange")}}, щоб передати слухачам інформацію про зміну стану сторінки. Ви можете виявити подію і виконати деякі дії або нічого не виконувати. Наприклад, якщо ваш веб-додаток програє відео, він може поставити відео на паузу, коли користувач переміщує вкладку у фоновий режим, і відновити відтворення, коли користувач повернеться до цієї вкладки. Користувач не втрачає миті у відео, звук відео не заважає аудіо в новій вкладці на передньому плані, і користувач не пропустить жодного моменту в них.</p>
+
+<p>Стан видимості {{HTMLElement ("iframe")}} збігаються зі станом батьківського документа. Приховування <code>&lt;iframe&gt;</code> за допомогою властивостей CSS (таких як {{cssxref ("display", "display: none;")}}) не викликає подій видимості і не змінює стан документа, що міститься в кадрі.</p>
+
+<h3 id="Випадки_використання">Випадки використання</h3>
+
+<p>Розглянемо декілька прикладів використання API видимості сторінки.</p>
+
+<ul>
+ <li>На сайті є карусель зображень, яка не повинна переходити до наступного слайду, якщо користувач не переглядає сторінку.</li>
+ <li>Додаток, що показує інформаційну панель, не повинен опитувати сервер на оновлення, коли сторінку не видно.</li>
+ <li>Сторінка хоче визначити, коли до неї мають доступ, щоб вона могла точно підрахувати кількість переглядів.</li>
+ <li>Сайт хоче відключити звуки, коли пристрій перебуває в режимі очікування або користувач натискає кнопку живлення, щоб вимкнути екран.</li>
+</ul>
+
+<p>Розробники у минулому використовували недосконалі проксі для виявлення цього. Наприклад, перегляд {{event("blur")}} і {{event("focus")}} подій на вікні допомагає зрозуміти, коли ваша сторінка не є активною, але не говорить про те, що ваша сторінка насправді прихована для користувача. API Видимість сторінки вирішує цю проблему.</p>
+
+<div class="note">
+<p><strong>Примітка:</strong> У той час як {{domxref ("GlobalEventHandlers.onblur", "onblur")}} та {{domxref ("GlobalEventHandlers.onfocus", "onfocus")}} скажуть вам, коли користувач перемикає вікно, але це не обов'язково означає, що воно приховано. Сторінки стають прихованими тільки тоді, коли користувач перемикає вкладки або згортає вікно браузера, що містить вкладку.</p>
+</div>
+
+<h3 id="Політика_позиціонування_як_сприяння_продуктивності_фонової_сторінки">Політика позиціонування, як сприяння продуктивності фонової сторінки</h3>
+
+<p>Окремо від API відображення сторінки агенти  користувача зазвичай мають ряд власних політик для зниження впливу продуктивності фонових або прихованих вкладок. Вони можуть включати в себе:</p>
+
+<ul>
+ <li>Більшість браузерів припиняють посилати {{domxref ("Window.requestAnimationFrame", "requestAnimationFrame ()")}} зворотні виклики на фонові або прихован вкладкиі {{{HTMLElement ("iframe")}}} для підвищення продуктивності і терміну служби акумулятора.</li>
+ <li>Такі таймери, як {{domxref ("WindowOrWorkerGlobalScope.setTimeout", "setTimeout ()")}}, гасяться в фонових і неактивних вкладках, щоб допомогти поліпшити продуктивність. Більш детальну інформацію див. у розділі  <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Причини затримок, що перевищують встановлені.</a></li>
+ <li>Використання фонового тайм-ауту на основі виділеного ліміту тепер доступно в сучасних браузерах (Firefox 58+, Chrome 57+), що накладає додаткові обмеження на використання процесора фонового таймера. В сучасних браузерах це працює схожим чином, докладніше про це можна прочитати нижче:
+  <ul>
+   <li>У Firefox, вікна в фонових вкладках мають свій власний бюджет часу у мілісекундах - максимальне і мінімальне значення +50 мс і -150 мс відповідно. Chrome дуже схожий, за виключенням того, що бюджет зазначається в секундах.</li>
+   <li>Вкладки підлягають гасінню через 30 секунд, з тими ж самими правилами затримки по гасінню, що і для віконних таймерів (знову ж таки, дивіться розділ <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Причини затримок довше, ніж зазначено</a>).  У Chrome це значення дорівнює 10 секундам.</li>
+   <li>Завдання по таймеру дозволені тільки в тому випадку, якщо витрати по ньому не мають негативного значення.</li>
+   <li>Після закінчення виконання коду таймера, тривалість часу, зайнятого на його виконання, віднімається від часу тайм-ауту його вікна.</li>
+   <li>Бюджет регенерується зі швидкістю 10 мс на секунду, як в Firefox, так і у Chrome.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Деякі процеси виключені з цього гасящего режиму. У цих випадках ви також можете використовувати API видимості сторінки, щоб зменшити вплив на продуктивність.</p>
+
+<ul>
+ <li>Вкладки, які відтворюють звук, перебувають на передньому плані і не гасяться.</li>
+ <li>Вкладки з кодом, що використовують мережеві з'єднання у реальному часі  (<a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a> та <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a>) , залишаються незачепленими, щоб уникнути тимчасового закриття цих з'єднань і їх несподіваного відключення.</li>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> процеси також залишаються непорушними для уникнення тайм-аутів.</li>
+</ul>
+
+<h2 id="Приклад">Приклад</h2>
+
+<p>Подивіться <a href="http://daniemon.com/tech/webapps/page-visibility/">живий приклад</a> (відео зі звуком).</p>
+
+<p>Приклад, який призупиняє перегляд відео під час перемиканні на іншу вкладку і відтворює його знову при поверненні на цю вкладку, був створений за таким кодом:</p>
+
+<pre class="brush: js">   // Встановіть ім'я властивості hidden і події зміни для видимості.
+
+var hidden, visibilityChange;
+if (typeof document.hidden !== "undefined") { // Opera 12.10 і Firefox 18 і більше пізніша підтримка
+  hidden = "hidden";
+  visibilityChange = "visibilitychange";
+} else if (typeof document.msHidden !== "undefined") {
+  hidden = "msHidden";
+  visibilityChange = "msvisibilitychange";
+} else if (typeof document.webkitHidden !== "undefined") {
+  hidden = "webkitHidden";
+  visibilityChange = "webkitvisibilitychange";
+}
+
+var videoElement = document.getElementById("videoElement");
+
+// Якщо сторінка прихована, зупиніть відео;
+// Якщо сторінка відображається, відтворіть відеозображення;
+
+function handleVisibilityChange() {
+  if (document[hidden]) {
+    videoElement.pause();
+  } else {
+    videoElement.play();
+  }
+}
+
+      // Попереджаємо, якщо браузер не підтримує addEventListener або Page Visibility API
+if (typeof document.addEventListener === "undefined" || hidden === undefined) {
+  console.log("Для цього демонстрування потрібен браузер, наприклад, Google Chrome або Firefox, який підтримує API для перегляду сторінок.");
+} else {
+      // Зміна видимості сторінки
+  document.addEventListener(visibilityChange, handleVisibilityChange, false);
+
+     // Коли відео призупиняється, встановлюємо назву.
+     // Це свідчитеме про паузу.
+  videoElement.addEventListener("pause", function(){
+      document.title = 'Paused';
+  }, false);
+
+  // Коли відео відтворюється, встановлюємо назву.
+  videoElement.addEventListener("play", function(){
+      document.title = 'Playing';
+  }, false);
+
+}
+</pre>
+
+<h2 id="Властивості_використані_в_інтерфейсі_документа">Властивості, використані в інтерфейсі документа</h2>
+
+<p>API Видимість сторінки додає наступні властивості до інтерфейсу {{domxref("Document")}} :</p>
+
+<dl>
+ <dt>{{domxref("Document.hidden")}} {{ReadOnlyInline}}</dt>
+ <dd>Повертає <code>true</code> , якщо сторінка знаходиться в стані, яке вважається прихованим для користувача, і <code>false</code> якщо навпаки.</dd>
+ <dt>{{domxref("Document.visibilityState")}} {{ReadOnlyInline}}</dt>
+ <dd> {{domxref ("DOMString")}} вказує на поточний стан видимості документа. Можливі значення:
+ <dl>
+  <dt><code>visible</code></dt>
+  <dd>Зміст сторінки може бути, принаймні, частково видимим. На практиці це означає, що сторінка є закладкою на передньому плані немінімізірованного вікна.</dd>
+  <dt><code>hidden</code></dt>
+  <dd>Вміст сторінки не видно користувачеві або через те, що вкладка документа знаходиться в фоновому режимі, або через те, що частина вікна прихована, або через те, що екран пристрою вимкнений.</dd>
+  <dt><code>prerender</code></dt>
+  <dd>Вміст сторінки є попередніми і невидимим для користувача. Документ може буті в стані попереднього завантаження.
+  <div class="note"><strong>Примітка:</strong> Не всі браузери підтримують попереднє завантаження.</div>
+  </dd>
+  <dt><code>unloaded</code></dt>
+  <dd>Сторінка перебуває в процесі вивантаження з пам'яті.
+  <div class="note"><strong>Примітка:</strong> Не всі браузери підтримують це значення.</div>
+  </dd>
+ </dl>
+ </dd>
+ <dt>{{domxref("Document.onvisibilitychange")}}</dt>
+ <dd> {{domxref("EventListener")}} задає код, який буде викликатися при виникненні події {{event("visibilitychange")}} .</dd>
+</dl>
+
+<pre class="brush: js">//startSimulation та pauseSimulation визначені в іншому місці
+function handleVisibilityChange() {
+  if (document.hidden) {
+    pauseSimulation();
+  } else  {
+    startSimulation();
+  }
+}
+
+document.addEventListener("visibilitychange", handleVisibilityChange, false);
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Page Visibility API')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td>Початкове значення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Працює_з_браузерами">Працює з браузерами</h2>
+
+<div>
+<h3 id="Document.visibilityState"><code>Document.visibilityState</code></h3>
+
+<div>
+
+
+<p>{{Compat("api.Document.visibilityState")}}</p>
+</div>
+</div>
+
+<h2 id="Дивись_також">Дивись також</h2>
+
+<ul>
+ <li>Опис <a href="http://blogs.msdn.com/b/ie/archive/2011/07/08/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-2.aspx" title="Page Visibility on IEBlog"> API Видимості сторінки</a> від IEBlog.</li>
+ <li>Опис <a href="http://code.google.com/chrome/whitepapers/pagevisibility.html" title="Page Visibility API by Google">API Видимості сторінки</a>  від Google</li>
+</ul>
diff --git a/files/uk/web/api/blob/index.html b/files/uk/web/api/blob/index.html
new file mode 100644
index 0000000000..3cdfbcf46a
--- /dev/null
+++ b/files/uk/web/api/blob/index.html
@@ -0,0 +1,230 @@
+---
+title: Blob
+slug: Web/API/Blob
+translation_of: Web/API/Blob
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>Об'єкт <code>Blob</code> являє собою файло-подібний об'єкт незмінних, початкових даних. Blob представляє дані, що не обов'язкові у нативному форматі JavaScript. Вигляд {{domxref("File")}} заснований на <code>Blob</code>, наслідує функціонал Blob та доповнює його для підтримки файлів з файлової системи користувача.</p>
+
+<p>Для <code>формування Blob</code> з інших не-blob об'єктів й даних використовується конструктор {{domxref("Blob.Blob", "Blob()")}}. Для створення Blob, що міститиме підмножину інших даних Blob, викликається метод {{domxref("Blob.slice()", "slice()")}}. Для отримання Blob для файла з файлової системи користувача перегляньте документацію до {{domxref("File")}}.</p>
+
+<p>API, що працюють з  <code>Blob</code>, також перелічені у документації {{domxref("File")}}.</p>
+
+<div class="note">
+<p><strong>Зауваження:</strong> <code>Метод slice()</code> другим парметром приймає початкову довжину для індикації кількості байтів<code>, які будуть скопійовані у новий Blob</code>. Якщо вказувати змінні таким чином<code>: початковій індекс + довижина, що привищує </code>розмір <code>джерела Blob</code>, <code>повератємий Blob</code> буде містити дані від початкового індексу <code>до кінця джерела Blob</code>.</p>
+</div>
+
+<div class="note"><strong>Зауваження:</strong> Майте на увазі, <code>що метод slice()</code> має вендорні префікси у деяких браузерах и версіях: <code>blob.mozSlice()</code> для Firefox 12 та попередніх <code>й blob.webkitSlice()</code> у Safari. Стара версія методу <code>slice()</code>, без вендорних префіксів, має іншу семантику та вважається застарілою. <code>Підтримка blob.mozSlice()</code> була припинена з Firefox 30.</div>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("Blob.Blob", "Blob(blobParts[, options])")}}</dt>
+ <dd>Повертає новостворенний <code>об'єкт Blob</code>, чий контент складається з ланцюга масивів значень вхідних парметрів.</dd>
+</dl>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt>{{domxref("Blob.isClosed")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Булєве значення, що вказує, чи був метод {{domxref("Blob.close()")}} викликан на Blob. Закритий Blob не може бути прочитаний.</dd>
+ <dt>{{domxref("Blob.size")}} {{readonlyinline}}</dt>
+ <dd>Розмір, у байтах, даних, що міститься у об'єкті <code>Blob</code>.</dd>
+ <dt>{{domxref("Blob.type")}} {{readonlyinline}}</dt>
+ <dd>Строка, що вказує MIME тип даних, що містяться <code>у Blob</code>. Якщо тип невідомий, ця строка порожня.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<dl>
+ <dt>{{domxref("Blob.close()")}} {{experimental_inline}}</dt>
+ <dd>Закриває об'єкт Blob, можливо, звілняючи <span class="short_text" id="result_box" lang="uk"><span>використовувані</span></span> ресурси.</dd>
+ <dt>{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt>
+ <dd>Повертає новий об'єкт <code>Blob</code>, що містить дані у вказаному диапазоні байтів джерела <code>Blob</code>.</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Приклад_використання_конструктора_Blob">Приклад використання конструктора Blob</h3>
+
+<p>{{domxref("Blob.Blob", "Blob() constructor")}} дозволяє створювати Blob з інших об'єктів. Наприклад, щоб сконструювати Blob із стрічки:</p>
+
+<pre>var debug = {hello: "world"};
+var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});</pre>
+
+<div class="warning">
+<p>До того, як конструктор Blob став доступний, це можна було зробити за допомогою {{domxref("BlobBuilder")}} API, яка зараз вважається застарілою:</p>
+
+<pre class="brush: js">var builder = new BlobBuilder();
+var fileParts = ['&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;'];
+builder.append(fileParts[0]);
+var myBlob = builder.getBlob('text/xml');
+</pre>
+</div>
+
+<h3 id="Приклад_створення_URL_типізованого_масиву_з_використанням_Blob">Приклад створення URL типізованого масиву з використанням Blob</h3>
+
+<p>Наступний код:</p>
+
+<pre class="brush: js">var typedArray = GetTheTypedArraySomehow();
+var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // pass a useful mime type here
+var url = URL.createObjectURL(blob);
+// url буде виглядати наступним чином: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
+// тепер ви можете використовувати url у будь-якому контексті, де можуть бути використані звичайні URLs, наприклад img.src, тощо.
+</pre>
+
+<h3 id="Приклад_отримання_даних_з_Blob">Приклад отримання даних з Blob</h3>
+
+<p>Єдиний шлях для отримання даних з Blob це використовуючи {{domxref("FileReader")}}. Наступиний код зчитує дані з Blob у вигляді типізованого масиву.</p>
+
+<pre class="brush: js">var reader = new FileReader();
+reader.addEventListener("loadend", function() {
+   // reader.result містить контент Blob у вигляді типізованого масиву
+});
+reader.readAsArrayBuffer(blob);</pre>
+
+<p>Вікористовуючи інші методи {{domxref("FileReader")}}, можна прочитати контент Blob у вигляді строки або URL.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API','#blob','Blob')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5<sup>[1]</sup></td>
+   <td>4<sup>[2]</sup></td>
+   <td>10</td>
+   <td>11.10<sup>[1]</sup></td>
+   <td>5.1<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td><code>slice()</code></td>
+   <td>10 {{property_prefix("webkit")}}<br>
+    21</td>
+   <td>5 {{property_prefix("moz")}}<sup>[3]</sup><br>
+    13</td>
+   <td>10</td>
+   <td>12</td>
+   <td>5.1 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>Blob()</code> constructor</td>
+   <td>20</td>
+   <td>{{CompatGeckoDesktop("13.0")}}</td>
+   <td>10</td>
+   <td>12.10</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td><code>close()</code> and <code>isClosed</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("13.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>slice()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Blob()</code> constructor</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>close()</code> and <code>isClosed</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] A version of <code>slice()</code> taking the length as second argument was implemented in <a href="http://trac.webkit.org/changeset/55670">WebKit</a> and <a href="http://www.opera.com/docs/specs/presto28/file/#blob">Opera 11.10</a>. However, since that syntax differed from {{jsxref("Array/slice", "Array.slice()")}} and {{jsxref("String/slice", "String.slice()")}}, WebKit removed support and added support for the new syntax as <a href="http://trac.webkit.org/changeset/83873"><code>Blob.webkitSlice()</code></a>.</p>
+
+<p>[2] A version of <code>slice()</code> taking the length as second argument was implemented in <a href="https://hg.mozilla.org/mozilla-central/rev/1b3947ed93c6">Firefox 4</a>. However, since that syntax differed from {{jsxref("Array/slice", "Array.slice()")}} and {{jsxref("String/slice", "String.slice()")}}, Gecko removed support and added support for the new syntax as <code>mozSlice()</code>.</p>
+
+<p>[3] Prior to Gecko 12.0 {{geckoRelease("12.0")}}, there was a bug that affected the behavior of <code>slice()</code>; it did not work for <code>start</code> and <code>end</code> positions outside the range of signed 64-bit values; it has now been fixed to support unsigned 64-bit values.</p>
+
+<p>[4] See {{bug("1048325")}}</p>
+
+<h2 id="Gecko_notes_availability_in_privileged_code">Gecko notes: availability in privileged code</h2>
+
+<p>To use from chrome code, JSM and Bootstrap scope, you have to import it like this:</p>
+
+<pre class="brush: js">Cu.importGlobalProperties(['Blob']);
+</pre>
+
+<p><code>Blob</code> is available in Worker scopes.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("BlobBuilder")}}</li>
+ <li>{{domxref("File")}}</li>
+ <li>{{domxref("URL.createObjectURL")}}</li>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/uk/web/api/canvas_api/index.html b/files/uk/web/api/canvas_api/index.html
new file mode 100644
index 0000000000..70dbbf1f8d
--- /dev/null
+++ b/files/uk/web/api/canvas_api/index.html
@@ -0,0 +1,166 @@
+---
+title: Canvas API
+slug: Web/API/Canvas_API
+tags:
+  - API
+  - Canvas
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/API/Canvas_API
+---
+<div>{{CanvasSidebar}}</div>
+
+<p class="summary">Доданий в <a href="/en-US/docs/HTML/HTML5">HTML5</a>, <strong>елемент HTML {{HTMLElement("canvas")}}</strong> призначений для створення графіки засобами <a href="/en-US/docs/Web/JavaScript">JavaScript</a>. Для прикладу, його використовують для малювання графіків, створення композиції фотографій, створення анімацій, і навіть для обробки та рендерингу відео в реальному часі.</p>
+
+<p>Mozilla applications gained support for <code>&lt;canvas&gt;</code> starting with Gecko 1.8 (i.e. <a href="/en-US/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>). The element was originally introduced by Apple for the OS X Dashboard and Safari. Internet Explorer supports <code>&lt;canvas&gt;</code> from version 9 onwards; for earlier versions of IE, a page can effectively add support for <code>&lt;canvas&gt;</code> by including a script from Google's <a href="http://excanvas.sourceforge.net/">Explorer Canvas</a> project. Google Chrome and Opera 9 also support <code>&lt;canvas&gt;</code>.</p>
+
+<p>The <code>&lt;canvas&gt;</code> element is also used by <a href="/en-US/docs/Web/WebGL">WebGL</a> to draw hardware-accelerated 3D graphics on web pages.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>This is just a simple code snippet which uses the {{domxref("CanvasRenderingContext2D.fillRect()")}} method.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+</pre>
+
+<p>Edit the code below and see your changes update live in the canvas:</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', drawCanvas);
+window.addEventListener('load', drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Reference">Reference</h2>
+
+<div class="index">
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasPattern")}}</li>
+ <li>{{domxref("ImageBitmap")}}</li>
+ <li>{{domxref("ImageData")}}</li>
+ <li>{{domxref("TextMetrics")}}</li>
+ <li>{{domxref("Path2D")}} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<p>The interfaces related to the <code>WebGLRenderingContext</code> are referenced under <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p>
+
+<h2 id="Guides_and_tutorials">Guides and tutorials</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></dt>
+ <dd>A comprehensive tutorial covering both the basic usage of <code>&lt;canvas&gt;</code> and its advanced features.</dd>
+ <dt><a href="/en-US/Add-ons/Code_snippets/Canvas">Code snippets: Canvas</a></dt>
+ <dd>Some extension developer-oriented code snippets involving <code>&lt;canvas&gt;</code>.</dd>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Demo: A basic ray-caster</a></dt>
+ <dd>A demo of ray-tracing animation using canvas.</dd>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas">Drawing DOM objects into a canvas</a></dt>
+ <dd>How to draw DOM content, such as HTML elements, into a canvas.</dd>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulating video using canvas</a></dt>
+ <dd>Combining {{HTMLElement("video")}} and {{HTMLElement("canvas")}} to manipulate video data in real time.</dd>
+</dl>
+
+<h2 id="Resources">Resources</h2>
+
+<h3 id="Generic">Generic</h3>
+
+<ul>
+ <li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Canvas Deep Dive</a></li>
+ <li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Canvas Handbook</a></li>
+</ul>
+
+<h3 id="Libraries">Libraries</h3>
+
+<ul>
+ <li><a href="http://fabricjs.com">Fabric.js</a> is an open-source canvas library with SVG parsing capabilities.</li>
+ <li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> is an open-source canvas library focused on interactivity for desktop and mobile applications.</li>
+ <li><a href="http://paperjs.org/">Paper.js</a> is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.</li>
+ <li><a href="http://origamijs.com/docs/">Origami.js</a> is an open source lightweight canvas library.</li>
+ <li><a href="http://libcanvas.github.com/">libCanvas</a> is powerful and lightweight canvas framework.</li>
+ <li><a href="http://processingjs.org">Processing.js</a> is a port of the Processing visualization language.</li>
+ <li><a href="https://playcanvas.com/">PlayCanvas</a> is an open source game engine.</li>
+ <li><a href="http://www.pixijs.com/">Pixi.js</a> is an open source game engine.</li>
+ <li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> is a charting and graphing library.</li>
+ <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> is an animation key-framing API for Canvas.</li>
+ <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> is a WebGL framework for data visualization, creative coding and game development.</li>
+ <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> creates interactive 2D Canvas data visualizations for the Web.</li>
+ <li><a href="http://www.createjs.com/easeljs">EaselJS</a> is a free/open source library to make it easier to use canvas for games and art</li>
+ <li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> is another open-source javascript library for creating and manipulating 2d canvas elements</li>
+ <li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> is an open source library to create canvas based heatmaps</li>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '&lt;canvas&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li>
+</ul>
diff --git a/files/uk/web/api/canvas_api/tutorial/basic_usage/index.html b/files/uk/web/api/canvas_api/tutorial/basic_usage/index.html
new file mode 100644
index 0000000000..e57e9fe4a0
--- /dev/null
+++ b/files/uk/web/api/canvas_api/tutorial/basic_usage/index.html
@@ -0,0 +1,152 @@
+---
+title: Базове використання canvas
+slug: Web/API/Canvas_API/Tutorial/Basic_usage
+translation_of: Web/API/Canvas_API/Tutorial/Basic_usage
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</div>
+
+<div class="summary">
+<p>Давайте почнемо цей урок з розгляду елемента  {{HTMLElement("canvas")}} {{Glossary("HTML")}} як такого. Наприкінці ви дізнаєтесь, як задати canvas 2D context та  зможете намалювати перший приклад в соєму браузері.</p>
+</div>
+
+<h2 id="Елемент_&lt;canvas>">Елемент <code>&lt;canvas&gt;</code></h2>
+
+<pre class="brush: html notranslate">&lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Елемент {{HTMLElement("canvas")}} схожий на елемент {{HTMLElement("img")}} , з єдиною видимою різницею - він не має атрибутів <code>src</code> та <code>alt</code> attributes. Дійсно, <code>&lt;canvas&gt;</code> має лише два атрибути, {{htmlattrxref("width", "canvas")}} та{{htmlattrxref("height", "canvas")}}. Обидва вони не є обов'язковими, та можуть бути задані за допомогою {{Glossary("DOM")}} <a href="/en-US/docs/Web/API/HTMLCanvasElement">в</a>ластивостей. Коли значення <code>width</code> та <code>height</code> не встановлені, canvas за замовчуванням буде <strong>300 пікселів </strong>шириною, та <strong>150 пікселів</strong> у висоту. Також можливо задати довільні розміри за допомогою  {{Glossary("CSS")}}, але під час ренедерингу зображення буде масштабуватися згідно з його розмірами: якщо задані в CSS параметри не відповідають початковому співвідношенню сторін canvas, воно буде викривленим. </p>
+
+<div class="note">
+<p><strong>Примітка:</strong> Якщо ваше зображення здається викривленимб спробуйте задати атрибути <code>width</code> and <code>height</code> атрибути в тегу <code>&lt;canvas&gt;</code> не використовуючи CSS.</p>
+</div>
+
+<p>Атрибут <a href="/en-US/docs/Web/HTML/Global_attributes/id"><code>id</code></a> не специфіцний для  <code>&lt;canvas&gt;, проте це один з </code><a href="/en-US/docs/Web/HTML/Global_attributes">global HTML attributes</a> які можна викростивувати для  HTML елементів (наприклад, <code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code>). Використання <code>id</code> завжди є хорошим рішенням, тому що полегшує ідентифікацію елемента в скрипті. .</p>
+
+<p><code>&lt;canvas&gt;</code> може бути стилізований так само, як і будь-яке звичайне зображення ({{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("background")}}…). Ці правила, однак, не впливають на фактичний малюнок на canvas. Ми побачимо, як це робиться в спеціальній главі цього підручника. Якщо до canvas не застосовуються правила стилізації, воно за замовчуванням буде повністю прозорим.</p>
+
+<div id="section_2">
+<h3 id="Резервний_вміст">Резервний вміст</h3>
+
+<p><code>&lt;canvas&gt;</code> відрізняється від {{HTMLElement("img")}} тим, щоя як і для {{HTMLElement("video")}}, {{HTMLElement("audio")}}, або {{HTMLElement("picture")}} елементів, легко визначити деякий резервний вміст, котрий буде відображатися в старих браузерах, що не підтримують <code>&lt;canvas&gt;</code>, таких, як версії Internet Explorer до 9ї версії чи  текстових браузерах. Ви завжди повинні задавати резервний вміст, який буде відображатися в таких браузерах.</p>
+
+<p>Задати резервний вміст дуже просто, достатнь просто вставити альтернативний контент всередину елемента <code>&lt;canvas&gt;</code>. Браузери, які його не підтримують, проігноруюьб контейнер та відобразять альтернативний вміст замість нього. Браузери, які підтримують, пропустять вміст <code>&lt;canvas&gt;</code> і просто покажуть зображення нормально.</p>
+
+<p>наприклад, ми можемо задати текстовий опис вмісту  canvas чи використати статичне зображення динамічно створюваного контентуge of the dynamically rendered content. This can look something like this:</p>
+
+<pre class="brush: html notranslate">&lt;canvas id="stockGraph" width="150" height="150"&gt;
+  current stock price: $3.15 + 0.15
+&lt;/canvas&gt;
+
+&lt;canvas id="clock" width="150" height="150"&gt;
+  &lt;img src="images/clock.png" width="150" height="150" alt=""/&gt;
+&lt;/canvas&gt;
+</pre>
+
+<p>Рекомендація користувачу встановити інший браузер, що підтримує canvas,  не допомогає тим з них, хто не може взагалі прочтитати вміст canvas, наприклад. Використання резервного вмісту або додаткового DOM допомогає <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">make the canvas more accessible</a><a href="/en-US/docs/">.</a></p>
+
+<h3 id="Обовязковий_тег_&lt;canvas>">Обов'язковий тег <code>&lt;/canvas&gt;</code> </h3>
+
+<p>Як наслідок способу надання резервного вмісту,  на відміну від елемента {{HTMLElement("img")}}, {{HTMLElement("canvas")}} <strong>вимагає </strong> закриваючого тега (<code>&lt;/canvas&gt;</code>). у випадку його відстусності, весь документ після  <code>&lt;/canvas&gt;</code> буде розглядатися як резервний вміст та не буде показаний.</p>
+
+<p>Якщо резервний вміст не потрібен, простий <code>&lt;canvas id="foo" ...&gt;&lt;/canvas&gt;</code> повністю сумісний з усіма браузерами, що підтримують canvas.</p>
+
+<h2 id="The_rendering_context">The rendering context</h2>
+
+<p>The {{HTMLElement("canvas")}} element creates a fixed-size drawing surface that exposes one or more <strong>rendering contexts</strong>, which are used to create and manipulate the content shown. In this tutorial, we focus on the 2D rendering context. Other contexts may provide different types of rendering; for example, <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a> uses a 3D context based on <a class="external" href="http://www.khronos.org/opengles/" rel="external" title="http://en.wikipedia.org/wiki/OpenGL_ES">OpenGL ES</a>.</p>
+
+<p>The canvas is initially blank. To display something, a script first needs to access the rendering context and draw on it. The {{HTMLElement("canvas")}} element has a method called {{domxref("HTMLCanvasElement.getContext", "getContext()")}}, used to obtain the rendering context and its drawing functions. <code>getContext()</code> takes one parameter, the type of context. For 2D graphics, such as those covered by this tutorial, you specify <code>"2d"</code> to get a {{domxref("CanvasRenderingContext2D")}}.</p>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('tutorial');
+var ctx = canvas.getContext('2d');
+</pre>
+
+<p>The first line in the script retrieves the node in the DOM representing the {{HTMLElement("canvas")}} element by calling the {{domxref("document.getElementById()")}} method. Once you have the element node, you can access the drawing context using its <code>getContext()</code> method.</p>
+
+<div id="section_5">
+<h2 id="Checking_for_support">Checking for support</h2>
+
+<p>The fallback content is displayed in browsers which do not support {{HTMLElement("canvas")}}. Scripts can also check for support programmatically by simply testing for the presence of the <code>getContext()</code> method. Our code snippet from above becomes something like this:</p>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('tutorial');
+
+if (canvas.getContext) {
+  var ctx = canvas.getContext('2d');
+  // drawing code here
+} else {
+  // canvas-unsupported code here
+}
+</pre>
+</div>
+</div>
+
+<h2 id="A_skeleton_template">A skeleton template</h2>
+
+<p>Here is a minimalistic template, which we'll be using as a starting point for later examples.</p>
+
+<div class="note">
+<p><strong>Note:</strong> it is not good practice to embed a script inside HTML. We do it here to keep the example concise.</p>
+</div>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"/&gt;
+    &lt;title&gt;Canvas tutorial&lt;/title&gt;
+    &lt;script type="text/javascript"&gt;
+      function draw() {
+        var canvas = document.getElementById('tutorial');
+        if (canvas.getContext) {
+          var ctx = canvas.getContext('2d');
+        }
+      }
+    &lt;/script&gt;
+    &lt;style type="text/css"&gt;
+      canvas { border: 1px solid black; }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body onload="draw();"&gt;
+    &lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>The script includes a function called <code>draw()</code>, which is executed once the page finishes loading; this is done by listening for the {{event("load")}} event on the document. This function, or one like it, could also be called using {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}, {{domxref("WindowTimers.setInterval", "window.setInterval()")}}, or any other event handler, as long as the page has been loaded first.</p>
+
+<p>Here is how a template would look in action. As shown here, it is initially blank.</p>
+
+<p>{{EmbedLiveSample("A_skeleton_template", 160, 160)}}</p>
+
+<h2 id="A_simple_example">A simple example</h2>
+
+<p>To begin, let's take a look at a simple example that draws two intersecting rectangles, one of which has alpha transparency. We'll explore how this works in more detail in later examples.</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+ &lt;head&gt;
+  &lt;meta charset="utf-8"/&gt;
+  &lt;script type="application/javascript"&gt;
+    function draw() {
+      var canvas = document.getElementById('canvas');
+      if (canvas.getContext) {
+        var ctx = canvas.getContext('2d');
+
+        ctx.fillStyle = 'rgb(200, 0, 0)';
+        ctx.fillRect(10, 10, 50, 50);
+
+        ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
+        ctx.fillRect(30, 30, 50, 50);
+      }
+    }
+  &lt;/script&gt;
+ &lt;/head&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>This example looks like this:</p>
+
+<p>{{EmbedLiveSample("A_simple_example", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</p>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</p>
diff --git a/files/uk/web/api/canvas_api/tutorial/index.html b/files/uk/web/api/canvas_api/tutorial/index.html
new file mode 100644
index 0000000000..f712d8ed88
--- /dev/null
+++ b/files/uk/web/api/canvas_api/tutorial/index.html
@@ -0,0 +1,63 @@
+---
+title: Canvas tutorial
+slug: Web/API/Canvas_API/Tutorial
+tags:
+  - Canvas
+  - Graphics
+  - Guide
+  - HTML
+  - HTML5
+  - Intermediate
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Web/API/Canvas_API/Tutorial
+---
+<div>{{CanvasSidebar}}</div>
+
+<p><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a></p>
+
+<div class="summary">
+<p><a href="/en-US/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><strong><code>&lt;canvas&gt;</code></strong></a> is an <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> element which can be used to draw graphics using scripting (usually <a href="/en-US/docs/Glossary/JavaScript" title="JavaScript">JavaScript</a>). This can, for instance, be used to draw graphs, make photo composition or simple (and <a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster" title="A_Basic_RayCaster">not so simple</a>) animations. The images on this page show examples of <a href="/en-US/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><strong><code>&lt;canvas&gt;</code></strong></a> implementations which will be created in this tutorial.</p>
+</div>
+
+<p><span class="seoSummary">This tutorial describes how to use the <code>&lt;canvas&gt;</code> element to draw 2D graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with canvas and will provide code snippets that may get you started in building your own content.</span></p>
+
+<p>First introduced in WebKit by Apple for the OS X Dashboard, <code>&lt;canvas&gt;</code> has since been implemented in browsers. Today, all major browsers support it.</p>
+
+<h2 id="Before_you_start" name="Before_you_start">Before you start</h2>
+
+<p>Using the <code>&lt;canvas&gt;</code> element is not very difficult, but you do need a basic understanding of <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> and <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. The <code>&lt;canvas&gt;</code> element is not supported in some older browsers, but is supported in recent versions of all major browsers. The default size of the canvas is 300 px × 150 px (width × height). But custom sizes can be defined using the HTML <code>height</code> and <code>width</code> property. In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.</p>
+
+<h2 id="In_this_tutorial" name="In_this_tutorial">In this tutorial</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage" title="Canvas_tutorial/Basic_usage">Basic usage</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">Drawing shapes</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">Applying styles and colors</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">Drawing text</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images" title="Canvas_tutorial/Using_images">Using images</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations" title="Canvas_tutorial/Transformations">Transformations</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Canvas_tutorial/Compositing">Compositing and clipping</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">Basic animations</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">Advanced animations</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Pixel manipulation</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Hit regions and accessibility</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">Optimizing the canvas</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Finale">Finale</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API" title="HTML/Canvas">Canvas topic page</a></li>
+ <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe Illustrator to Canvas plug-in</a></li>
+ <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li>
+ <li><a class="external" href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/" title="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">31 days of canvas tutorials</a></li>
+</ul>
+
+<h2 id="A_note_to_contributors">A note to contributors</h2>
+
+<p>Due to an unfortunate technical error that occurred the week of June 17, 2013, we lost the history of this tutorial, including attributions to all past contributors to its content. We apologize for this, and hope you'll forgive this unfortunate mishap.</p>
+
+<div>{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}</div>
diff --git a/files/uk/web/api/canvas_api/tutorial/чутливі_ділянки_та_доступність/index.html b/files/uk/web/api/canvas_api/tutorial/чутливі_ділянки_та_доступність/index.html
new file mode 100644
index 0000000000..cb7b8b615b
--- /dev/null
+++ b/files/uk/web/api/canvas_api/tutorial/чутливі_ділянки_та_доступність/index.html
@@ -0,0 +1,108 @@
+---
+title: Чутливі ділянки та доступність
+slug: Web/API/Canvas_API/Tutorial/Чутливі_ділянки_та_доступність
+tags:
+  - Canvas
+  - Графіка
+  - Полотно
+  - Підручник
+translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility
+---
+<div>{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}</div>
+
+<div class="summary">Власне HTML-елемент {{HTMLElement("canvas")}} являє собою лише множину кольорових точок і не містить жодних відомостей про намальовані об'єкти. Вміст полотна жодним чином не розкривається інструментам доступності, як це передбачено для семантичного HTML. Тож загалом, слід уникати використання полотен в застосунках або сайтах, від яких вимагається підтримка доступності. Проте наведені нижче настанови допоможуть все ж дещо уприступнити вміст полотен.</div>
+
+<h2 id="Запасний_вміст">Запасний вміст</h2>
+
+<p>Вміст між тегами <code>&lt;canvas&gt; … &lt;/canvas&gt;</code> може відігравати роль запасного варіанту для тих {{glossary("Browser", "переглядачів")}}, що не мають підтримки полотен. Він також вельми корисний тоді, коли користувач потребує допоміжних засобів (як-от екранний диктор), які можуть читати дерево DOM всередині. Чудовий приклад з <a href="http://www.html5accessibility.com/tests/canvas.html">html5accessibility.com</a> показує, як це можна здійснити:</p>
+
+<pre class="brush: html">&lt;canvas&gt;
+  &lt;h2&gt;Shapes&lt;/h2&gt;
+  &lt;p&gt;A rectangle with a black border.
+   In the background is a pink circle.
+   Partially overlaying the &lt;a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();"&gt;circle&lt;/a&gt;.
+   Partially overlaying the circle is a green
+   &lt;a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();"&gt;square&lt;/a&gt;
+   and a purple &lt;a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();"&gt;triangle&lt;/a&gt;,
+   both of which are semi-opaque, so the full circle can be seen underneath.&lt;/p&gt;
+&lt;/canvas&gt; </pre>
+
+<p>Перегляньте відео від Стіва Фолкнера про те, як <a href="https://www.youtube.com/watch?v=ABeIFlqYiMQ">екранний диктор NVDA читає цей приклад</a>.</p>
+
+<h2 id="Правила_ARIA">Правила ARIA</h2>
+
+<p>Accessible Rich Internet Applications <strong>(<a href="/uk/docs/Web/Accessibility/ARIA">ARIA</a>)</strong> визначає способи того, як зробити веб-застосунки та вміст доступнішими для людей з певними вадами. Можна вжити ARIA-атрибути для описання поведінки й призначення HTML-елемента полотна:</p>
+
+<pre class="brush: html">&lt;canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Дивіться <a href="/uk/docs/Web/Accessibility/ARIA">ARIA</a> та <a href="/uk/docs/Web/Accessibility/ARIA/ARIA_Techniques">Використання ARIA</a>, щоб дізнатись більше.</p>
+
+<h2 id="Чутливі_ділянки">Чутливі ділянки</h2>
+
+<p>Однією з поширених задач є з'ясування того, чи належать координати миші до певної ділянки на полотні. Відповідний API уможливлює створення певних чутливих ділянок на полотні та дає інші можливості розкрити взаємодіяльний вміст полотна інструментам <a href="/uk/docs/Web/Accessibility">доступності</a>. Він дозволяє полегшити виявлення влучень (належності координат миші певній ділянці) та доправити відповідні події до елементів DOM. Цей API має такі три методи (досі лишаються дослідними в сучасних переглядачах, тож перевіряйте таблиці сумісності):</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt>
+ <dd>Створює чутливу ділянку на полотні.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt>
+ <dd>Видаляє з полотна чутливу ділянку із зазначеним <code>id</code> .</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt>
+ <dd>Видаляє з полотна всі чутливі ділянки.</dd>
+</dl>
+
+<p>Створюючи новий контур з допомогою {{domxref("CanvasRenderingContext2D.beginPath()")}} можна перетворити його на чутливу ділянку, а тоді, перевіряючи значення властивості {{domxref("MouseEvent.region")}}, з'ясовувати, чи влучає миша у вказану область:</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
+ctx.fill();
+ctx.addHitRegion({id: 'circle'});
+
+canvas.addEventListener('mousemove', function(event) {
+  if (event.region) {
+    console.log('Влучив у ділянку: ' + event.region);  // Влучив у ділянку: circle
+  }
+});
+</pre>
+
+<p>Крім того, метод <code>addHitRegion()</code> може також приймати параметр <code>control</code>, що вказує елемент (має бути нащадком елемента <code>canvas</code>), до якого доправлятимуться події:</p>
+
+<pre class="brush: js">ctx.addHitRegion({control: element});</pre>
+
+<p>Наприклад, це може стати в нагоді для доправлення подій до елементів {{HTMLElement("input")}}.</p>
+
+<h2 id="Облямівки_фокуса">Облямівки фокуса</h2>
+
+<p>Для роботи з клавіатури, облямівки фокуса є зручними індикаторами, що полегшують пересування сторінкою. Щоб намалювати облямівку фокуса навколо малюнка (контура) на полотні, можна скористатися методом <code>drawFocusIfNeeded()</code>.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}</dt>
+ <dd>Якщо відповідний елемент перебуває у фокусі, цей метод намалює облямівку навколо контура.</dd>
+</dl>
+
+<p>Крім того, можна використати метод <code>scrollPathIntoView()</code>, щоб зробити елемент видимим на екрані, якщо він перебуває у фокусі, наприклад.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}</dt>
+ <dd>Гортає поточний чи вказаний контур до видимої області.</dd>
+</dl>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Потреби доступності Canvas</a></li>
+ <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Вади доступності елемента canvas</a></li>
+ <li><a href="http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">Доступність HTML5 Canvas у Firefox 13 — Стів Фолкнер</a></li>
+ <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">Найкращі рішення для взаємодії з елементами полотна</a></li>
+</ul>
+
+<div>{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}</div>
diff --git a/files/uk/web/api/console/dir/index.html b/files/uk/web/api/console/dir/index.html
new file mode 100644
index 0000000000..1f697b7b5e
--- /dev/null
+++ b/files/uk/web/api/console/dir/index.html
@@ -0,0 +1,104 @@
+---
+title: Console.dir()
+slug: Web/API/Console/dir
+translation_of: Web/API/Console/dir
+---
+<div>{{APIRef("Console API")}}{{Non-standard_header}}</div>
+
+<p>Відображає інтерактивний перелік властивостей заданого JavaScript об'єкту. Кінцеві дані показуються у вигляді ієрархічного списку з трикутниками, клікнувши на які мишкою Ви можете переглянути вміст дочірніх об'єктів.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p><img alt="console-dir.png" class="default internal" src="/@api/deki/files/6081/=console-dir.png"></p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox">console.dir(<em>object</em>);
+</pre>
+
+<h2 id="Параметри">Параметри</h2>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>Об'єкт JavaScript, властивості якого ви хочете переглянути.</dd>
+</dl>
+
+<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("8.0")}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("8.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">Chrome Console API reference</a></li>
+</ul>
diff --git a/files/uk/web/api/console/index.html b/files/uk/web/api/console/index.html
new file mode 100644
index 0000000000..8a19610a53
--- /dev/null
+++ b/files/uk/web/api/console/index.html
@@ -0,0 +1,278 @@
+---
+title: Console
+slug: Web/API/Console
+tags:
+  - API
+  - Debugging
+  - Interface
+  - NeedsCompatTable
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - console
+  - web console
+translation_of: Web/API/Console
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>The <strong><code>Console</code></strong> object provides access to the browser's debugging console (e.g., the <a href="/en-US/docs/Tools/Web_Console">Web Console</a> in Firefox). The specifics of how it works vary from browser to browser, but there is a <em>de facto</em> set of features that are typically provided.</p>
+
+<p>The <code>Console</code> object can be accessed from any global object, {{domxref("Window")}} on browsing scopes, {{domxref("WorkerGlobalScope")}}, and its specific variants in workers via property console. It's exposed as {{domxref("Window.console")}}, and can be referenced as simply <code>console</code>. For example:</p>
+
+<pre class="brush: js">console.log("Failed to open the specified link")</pre>
+
+<p>This page documents the {{anch("Methods")}} available on the <code>Console</code> object and gives a few {{anch("Usage")}} examples.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("Console.assert()")}}</dt>
+ <dd>Log a message and stack trace to console if first argument is <code>false</code>.</dd>
+ <dt>{{domxref("Console.clear()")}}</dt>
+ <dd>Clear the console.</dd>
+ <dt>{{domxref("Console.count()")}}</dt>
+ <dd>Log the number of times this line has been called with the given label.</dd>
+ <dt>{{domxref("Console.debug()")}}</dt>
+ <dd>An alias for <code>log() - starting with Chromium 58 this method is a no-op on Chromium browsers.</code></dd>
+ <dt>{{domxref("Console.dir()")}} {{Non-standard_inline}}</dt>
+ <dd>Displays an interactive listing of the properties of a specified JavaScript object. This listing lets you use disclosure triangles to examine the contents of child objects.</dd>
+ <dt>{{domxref("Console.dirxml()")}} {{Non-standard_inline}}</dt>
+ <dd>
+ <p>Displays an XML/HTML Element representation of the specified object if possible or the JavaScript Object view if it is not.</p>
+ </dd>
+ <dt>{{domxref("Console.error()")}}</dt>
+ <dd>Outputs an error message. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd>
+ <dt>{{domxref("Console.exception()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>An alias for <code>error()</code></dd>
+ <dt>{{domxref("Console.group()")}}</dt>
+ <dd>Creates a new inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>, indenting all following output by another level. To move back out a level, call <code>groupEnd()</code>.</dd>
+ <dt>{{domxref("Console.groupCollapsed()")}}</dt>
+ <dd>Creates a new inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>, indenting all following output by another level; unlike <code>group()</code>, this starts with the inline group collapsed, requiring the use of a disclosure button to expand it. To move back out a level, call <code>groupEnd()</code>.</dd>
+ <dt>{{domxref("Console.groupEnd()")}}</dt>
+ <dd>Exits the current inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>.</dd>
+ <dt>{{domxref("Console.info()")}}</dt>
+ <dd>Informative logging information. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd>
+ <dt>{{domxref("Console.log()")}}</dt>
+ <dd>For general output of logging information. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd>
+ <dt>{{domxref("Console.profile()")}} {{Non-standard_inline}}</dt>
+ <dd>Starts the browser's build-in profiler (for example, the <a href="/en-US/docs/Tools/Performance">Firefox performance tool</a>). You can specify an optional name for the profile.</dd>
+ <dt>{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}</dt>
+ <dd>Stops the profiler. You can see the resulting profile in the browser's performance tool (for example, the <a href="/en-US/docs/Tools/Performance">Firefox performance tool</a>).</dd>
+ <dt>{{domxref("Console.table()")}}</dt>
+ <dd>Displays tabular data as a table.</dd>
+ <dt>{{domxref("Console.time()")}}</dt>
+ <dd>Starts a <a href="/en-US/docs/Web/API/console#Timers">timer</a> with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page.</dd>
+ <dt>{{domxref("Console.timeEnd()")}}</dt>
+ <dd>Stops the specified <a href="/en-US/docs/Web/API/console#Timers">timer</a> and logs the elapsed time in seconds since its start.</dd>
+ <dt>{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}</dt>
+ <dd>Adds a marker to the browser's <a href="https://developer.chrome.com/devtools/docs/timeline">Timeline</a> or <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> tool.</dd>
+ <dt>{{domxref("Console.trace()")}}</dt>
+ <dd>Outputs a <a href="/en-US/docs/Web/API/console#Stack_traces">stack trace</a>.</dd>
+ <dt>{{domxref("Console.warn()")}}</dt>
+ <dd>Outputs a warning message. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd>
+</dl>
+
+
+<h2 id="Usage" name="Usage">Usage</h2>
+
+<h3 id="Outputting_text_to_the_console" name="Outputting_text_to_the_console">Outputting text to the console</h3>
+
+<p>The most frequently-used feature of the console is logging of text and other data. There are four categories of output you can generate, using the {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, and {{domxref("console.error()")}} methods. Each of these results in output that's styled differently in the log, and you can use the filtering controls provided by your browser to only view the kinds of output that interest you.</p>
+
+<p>There are two ways to use each of the output methods; you can simply pass in a list of objects whose string representations get concatenated into one string, then output to the console, or you can pass in a string containing zero or more substitution strings followed by a list of the objects with which to replace them.</p>
+
+<h4 id="Outputting_a_single_object">Outputting a single object</h4>
+
+<p>The simplest way to use the logging methods is to output a single object:</p>
+
+<pre class="brush: js">var someObject = { str: "Some text", id: 5 };
+console.log(someObject);
+</pre>
+
+<p>The output looks something like this:</p>
+
+<pre>[09:27:13.475] ({str:"Some text", id:5})</pre>
+
+<h4 id="Outputting_multiple_objects">Outputting multiple objects</h4>
+
+<p>You can also output multiple objects by simply listing them when calling the logging method, like this:</p>
+
+<pre class="brush: js">var car = "Dodge Charger";
+var someObject = {str:"Some text", id:5};
+console.info("My first car was a", car, ". The object is: ", someObject);</pre>
+
+<p>This output will look like this:</p>
+
+<pre>[09:28:22.711] My first car was a Dodge Charger . The object is:  ({str:"Some text", id:5})
+</pre>
+
+<h4 id="Using_string_substitutions">Using string substitutions</h4>
+
+<p>Gecko 9.0 {{geckoRelease("9.0")}} introduced support for string substitutions. When passing a string to one of the console object's methods that accepts a string, you may use these substitution strings:</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Substitution string</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td>%o or %O</td>
+   <td>Outputs a JavaScript object. Clicking the object name opens more information about it in the inspector.</td>
+  </tr>
+  <tr>
+   <td>%d or %i</td>
+   <td>Outputs an integer. Number formatting is supported, for example  <code>console.log("Foo %.2d", 1.1)</code> will output the number as two significant figures with a leading 0: <code>Foo 01</code></td>
+  </tr>
+  <tr>
+   <td>%s</td>
+   <td>Outputs a string.</td>
+  </tr>
+  <tr>
+   <td>%f</td>
+   <td>Outputs a floating-point value. Formatting is supported, for example  <code>console.log("Foo %.2f", 1.1)</code> will output the number to 2 decimal places: <code>Foo 1.10</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Each of these pulls the next argument after the format string off the parameter list. For example:</p>
+
+<pre>for (var i=0; i&lt;5; i++) {
+  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
+}
+</pre>
+
+<p>The output looks like this:</p>
+
+<pre>[13:14:13.481] Hello, Bob. You've called me 1 times.
+[13:14:13.483] Hello, Bob. You've called me 2 times.
+[13:14:13.485] Hello, Bob. You've called me 3 times.
+[13:14:13.487] Hello, Bob. You've called me 4 times.
+[13:14:13.488] Hello, Bob. You've called me 5 times.
+</pre>
+
+<h4 id="Styling_console_output">Styling console output</h4>
+
+<p>You can use the <code>"%c"</code> directive to apply a CSS style to console output:</p>
+
+<pre class="brush: js">console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");</pre>
+
+<div>The text before the directive will not be affected, but the text after the directive will be styled using the CSS declarations in the parameter.</div>
+
+<div> </div>
+
+<div><img alt="" src="https://mdn.mozillademos.org/files/12527/CSS-styling.png" style="display: block; margin: 0 auto;"></div>
+
+<div> </div>
+
+<div class="note">
+<p><strong>Note</strong>: Quite a few CSS properties are supported by this styling; you should experiment and see which ones provide useful.</p>
+</div>
+
+<div> </div>
+
+<div>{{h3_gecko_minversion("Using groups in the console", "9.0")}}</div>
+
+<p>You can use nested groups to help organize your output by visually combining related material. To create a new nested block, call <code>console.group()</code>. The <code>console.groupCollapsed()</code> method is similar, but creates the new block collapsed, requiring the use of a disclosure button to open it for reading.</p>
+
+<div class="note"><strong>Note:</strong> Collapsed groups are not supported yet in Gecko; the <code>groupCollapsed()</code> method is the same as <code>group()</code> at this time.</div>
+
+<p>To exit the current group, simply call console.groupEnd(). For example, given this code:</p>
+
+<pre class="brush: js">console.log("This is the outer level");
+console.group();
+console.log("Level 2");
+console.group();
+console.log("Level 3");
+console.warn("More of level 3");
+console.groupEnd();
+console.log("Back to level 2");
+console.groupEnd();
+console.debug("Back to the outer level");
+</pre>
+
+<p>The output looks like this:</p>
+
+<p><img alt="nesting.png" class="default internal" src="/@api/deki/files/6082/=nesting.png"></p>
+
+<div>{{h3_gecko_minversion("Timers", "10.0")}}</div>
+
+<p>In order to calculate the duration of a specific operation, Gecko 10 introduced the support of timers in the <code>console</code> object. To start a timer, call the <code>console.time</code><code>()</code> method, giving it a name as the only parameter. To stop the timer, and to get the elapsed time in milliseconds, just call the <code>console.timeEnd()</code> method, again passing the timer's name as the parameter. Up to 10,000 timers can run simultaneously on a given page.</p>
+
+<p>For example, given this code:</p>
+
+<pre class="brush: js">console.time("answer time");
+alert("Click to continue");
+console.timeEnd("answer time");
+</pre>
+
+<p>will log the time needed by the user to discard the alert box:</p>
+
+<p><img alt="timerresult.png" class="default internal" src="/@api/deki/files/6084/=timerresult.png"></p>
+
+<p>Notice that the timer's name is displayed both when the timer is started and when it's stopped.</p>
+
+<div class="note"><strong>Note:</strong> It's important to note that if you're using this to log the timing for network traffic, the timer will report the total time for the transaction, while the time listed in the network panel is just the amount of time required for the header. If you have response body logging enabled, the time listed for the response header and body combined should match what you see in the console output.</div>
+
+<h3 id="Stack_traces">Stack traces</h3>
+
+<p>The console object also supports outputting a stack trace; this will show you the call path taken to reach the point at which you call {{domxref("console.trace()")}}. Given code like this:</p>
+
+<pre class="brush: js">function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+
+foo();
+</pre>
+
+<p>The output in the console looks something like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7167/api-trace2.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Console API')}}</td>
+   <td>{{Spec2('Console API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>At least in Firefox, if a page defines a <code>console</code> object, that object overrides the one built into Firefox.</li>
+ <li>Prior to {{Gecko("12.0")}}, the console object's methods only work when the Web Console is open. Starting with {{Gecko("12.0")}}, output is cached until the Web Console is opened, then displayed at that time.</li>
+ <li>It's worth noting that the Firefox's built-in <code>Console</code> object is compatible with the one provided by <a class="external" href="http://getfirebug.com/" title="http://getfirebug.com/">Firebug</a>.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Tools" title="Tools">Tools</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console" title="Web Console">Web Console</a> — how the Web Console in Firefox handles console API calls</li>
+ <li><a href="/en-US/docs/Tools/Remote_Debugging">Remote debugging</a> — how to see console output when the debugging target is a mobile device</li>
+ <li><a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">On-device console logging</a> — how to do logging on Firefox OS devices</li>
+</ul>
+
+<h3 id="Other_implementations">Other implementations</h3>
+
+<ul>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Google Chrome DevTools</a></li>
+ <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug</a></li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/hh772173(v=vs.85).aspx">Internet Explorer</a></li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Safari</a></li>
+</ul>
diff --git a/files/uk/web/api/console/log/index.html b/files/uk/web/api/console/log/index.html
new file mode 100644
index 0000000000..8155ab780b
--- /dev/null
+++ b/files/uk/web/api/console/log/index.html
@@ -0,0 +1,173 @@
+---
+title: Console.log()
+slug: Web/API/Console/log
+translation_of: Web/API/Console/log
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Виводить повідомлення  у веб консоль.</p>
+
+<p>Повідомлення може бути одним рядком (з необов'язковими значеннями заміщення) або може бути будь-яким одним або декількома об'єктами JavaScript.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">console.log(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.log(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h2 id="Параметри">Параметри</h2>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Перелік  JavaScript об'єктів для відображення. Представлення  кожного з цих об'єктів  об'єднаних разом та відображених в порядку переліку. Будьте обачливі, якщо ви вносите об'єкти в логи у останніх версіях Chrome та Firefox, адже те, що ви отримуєте у логах в консолі - це <em>посилання на об'єкти</em>, які не обов'язково є "значенням" даного об'єкту на момент виклику console.log(), але точно є значенням об'єкту в момент кліку по ньому, щоб відкрити.</dd>
+ <dt><code>msg</code></dt>
+ <dd> JavaScript рядок містить нуль або більше  <a href="https://developer.mozilla.org/en/docs/Web/API/console#Using_string_substitutions">символів підміни</a>.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>JavaScript об'єкти за допомогою яких можливо заміняти <a href="https://developer.mozilla.org/en/docs/Web/API/console#Using_string_substitutions">символи підміни</a> в межах <code>msg</code>. Це надає додатковий контроль формату виводу.</dd>
+</dl>
+
+<p>Дивіться <a href="https://developer.mozilla.org/en-US/docs/DOM/console#Outputting_text_to_the_console">Вивід тексту в консоль</a> у документації {{domxref("console")}} більш детально.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#log", "console.log()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Ознака</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базова підтримка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Рядки заміщення</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatChrome(28)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>10<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Доступність для "воркерів"</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Ознака</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базова підтримка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Рядки заміщення</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Доступність для "воркерів"</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Якщо від`ємне значення прямує до <code>%d</code>, воно буде заокруглене до найближчого від`ємного цілого, тому -0.1 стає -1.</p>
+
+<p>[2] <code>%c</code> не підтримується, <code>%d</code> буде візуалізоване, як 0, якщо це не є числом.</p>
+
+<h2 id="Різниця_із_console.dir()">Різниця із console.dir()</h2>
+
+<p>Ви можете запитати себе, яка ж відмінність між console.dir() та console.log().</p>
+
+<p>Інша корисна відмінність існує у Chrome, коли відбувається надсилання DOM- елементів до консолі.</p>
+
+<p><img alt="" src="http://i.imgur.com/DozDcYR.png"></p>
+
+<p>Помітимо:</p>
+
+<ul>
+ <li><code>console.log</code> друкує елемент у вигляді дерева HTML</li>
+ <li><code>console.dir</code> друкує елемент у вигляді JSON - дерева.</li>
+</ul>
+
+<p>Зокрема, <code>console.log</code> надає спеціальну обробку для DOM - елементів, тоді як <code>console.dir</code> цього не робить. Це часто виявляється корисним при спробі отримати повне уявлення про об`єкти DOM JS.</p>
+
+<p>Більше інформації про ці та інші функції можна отримати за посиланням: <a href="https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">Chrome Console API</a>.</p>
+
+<h2 id="Також_перегляньте">Також перегляньте:</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug wiki: Console API</a> - Firebug підтримує додаткові можливості у власній реалізації console.log(),  наприклад, <a href="http://www.softwareishard.com/blog/firebug/firebug-tip-styled-logging/">styled logging</a>.</li>
+ <li><a href="http://nodejs.org/docs/latest/api/console.html#console_console_log_data">NodeJS: Console API</a></li>
+</ul>
diff --git a/files/uk/web/api/customevent/index.html b/files/uk/web/api/customevent/index.html
new file mode 100644
index 0000000000..76b8aeef1a
--- /dev/null
+++ b/files/uk/web/api/customevent/index.html
@@ -0,0 +1,96 @@
+---
+title: CustomEvent
+slug: Web/API/CustomEvent
+tags:
+  - API
+  - DOM
+  - Interface
+  - NeedsCompatTable
+  - NeedsExample
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/CustomEvent
+---
+<p>{{APIRef("DOM")}} Інтерфейс <strong><code>CustomEvent</code></strong> являє собою події, ініціалізовані додатком для будь-яких цілей.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}</dt>
+ <dd>Створює <code>CustomEvent</code>.</dd>
+</dl>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt>{{domxref("CustomEvent.detail")}} {{readonlyinline}}</dt>
+ <dd>Будь-які дані, передані при ініціалізації події.</dd>
+</dl>
+
+<p><em>Цей інтерфейс успадковує властивості від батьків, </em>{{domxref("Event")}}:</p>
+
+<p>{{Page("/en-US/docs/Web/API/Event", "Properties")}}</p>
+
+<h2 id="Методи">Методи</h2>
+
+<dl>
+ <dt>{{domxref("CustomEvent.initCustomEvent()")}} {{deprecated_inline}}</dt>
+ <dd>
+ <p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Ініціалізує об'єкт </span></font>CustomEvent</code>. Якщо подія вже відправлена, цей метод нічого не робить.</p>
+ </dd>
+</dl>
+
+<p><em>Цей інтерфейс успадковує властивості від батьків, </em>{{domxref("Event")}}:</p>
+
+<p>{{Page("/en-US/docs/Web/API/Event", "Methods")}}</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комертарі</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-customevent','CustomEvent')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерна_сумісність">Браузерна сумісність</h2>
+
+
+
+<p>{{Compat("api.CustomEvent")}}</p>
+
+<h2 id="Firing_from_privileged_code_to_non-privileged_code">Firing from privileged code to non-privileged code</h2>
+
+<p>When firing a CustomEvent from privileged code (i.e. an extension) to non-privileged code (i.e. a webpage), security issues should be considered. Firefox and other Gecko applications restrict an object created in one context from being directly used for another, which will automatically prevent security holes, but these restrictions may also prevent your code from running as expected.</p>
+
+<p>While creating a CustomEvent object, you must create the object from the same <a href="/en-US/docs/XUL/window">window</a>. The <code>detail</code> attribute of your CustomEvent will be subjected to the same restrictions. String and Array values will be readable by the content without restrictions, but custom Objects will not. While using a custom Object, you will need to define the attributes of that object that are readable from the content script using <a href="/en-US/docs/">Components.utils.cloneInto()</a>.</p>
+
+<pre class="brush: js">// doc is a reference to the content document
+function dispatchCustomEvent(doc) {
+  var eventDetail = Components.utils.cloneInto({foo: 'bar'}, doc.defaultView);
+  var myEvent = doc.defaultView.CustomEvent("mytype", eventDetail);
+  doc.dispatchEvent(myEvent);
+}</pre>
+
+<p>But one needs to keep in mind that exposing a function will allow the content script to run it with chrome privileges, which can open a security vulnerability.</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages" title="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages">Interaction between privileged and non-privileged pages</a></li>
+ <li><a href="/en-US/docs/Web/API/window.postMessage" title="/en-US/docs/Web/API/window.postMessage">Window.postMessage</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Events/Creating_and_triggering_events">Creating and triggering events</a></li>
+</ul>
diff --git a/files/uk/web/api/customevent/initcustomevent/index.html b/files/uk/web/api/customevent/initcustomevent/index.html
new file mode 100644
index 0000000000..84ea6d6a28
--- /dev/null
+++ b/files/uk/web/api/customevent/initcustomevent/index.html
@@ -0,0 +1,120 @@
+---
+title: CustomEvent.initCustomEvent()
+slug: Web/API/CustomEvent/initCustomEvent
+translation_of: Web/API/CustomEvent/initCustomEvent
+---
+<p>{{APIRef("DOM")}}{{deprecated_header}}</p>
+
+<p>Метод <code><strong>CustomEvent.initCustomEvent()</strong></code> ініціалізує  <code>CustomEvent</code> об'єкт. Якщо на момент ініціалізації event-об'єкт вже був переданий(dispatched), то виклик метода {{ domxref("CustomEvent.initCustomEvent()") }} не матиме ніякого ефекту.</p>
+
+<p>Події,ініціалізовані у такий спосіб, повинні бути створені за допомогою метода {{domxref("Document.createEvent()") }}.Вказаний метод має бути викликаний для створення події до того, як вона буде передана за допомогою {{ domxref("EventTarget.dispatchEvent()") }}. Як тільки подія є переданою, ніяких дій цей метод більше не виконує. </p>
+
+<div class="note">
+<p><strong>Більше не використовуйте цей метод, оскільки він засуджується.</strong></p>
+
+<p>Натомість, використовуйте спеціальні конструктори подій, наприклад {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}. Сторінка про  <a href="/en-US/docs/Web/Guide/Events/Creating_and_triggering_events">Creating and triggering events</a> містить більше інформації про способи їхнього використання.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>event</em>.initCustomEvent(<em>type</em>, <em>canBubble</em>, <em>cancelable</em>, <em>detail</em>);
+</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><em>type</em></code></dt>
+ <dd>Це {{domxref("DOMString")}} , що містить назву події</dd>
+ <dt><em><code>canBubble</code></em></dt>
+ <dd>Це {{jsxref("Boolean")}} , що вказує чи подія виринає вгору(bubbles up) крізь DOM чи ні.</dd>
+ <dt><code><em>cancelable</em></code></dt>
+ <dd>Це {{jsxref("Boolean")}} , що вказує чи подія є cancelable.</dd>
+ <dt><em><code>deta</code></em><em><code>il</code></em></dt>
+ <dd>Дані, передані під час ініціалізації події</dd>
+</dl>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Опис</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-customevent-initcustomevent','CustomEvent')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Початкове визначення, однак, вже вважається небажаним, натомість, рекомендується використання конструктора,{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерна_сумісність">Браузерна сумісність</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Опис</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>
+    <p>Базова підтримка</p>
+   </td>
+   <td>{{ CompatVersionUnknown() }}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(6)}}</td>
+   <td>9</td>
+   <td>11</td>
+   <td>5.1 (533.3)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Опис</th>
+   <th>Android Webview</th>
+   <th>Chrome для Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базова підтримка</td>
+   <td>{{ CompatVersionUnknown() }}<sup>[1]</sup></td>
+   <td>{{ CompatVersionUnknown() }}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(6)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Починаючи з Chrome 59, <code>canBubble</code>, <code>cancelable</code>, та <code>detail</code> є необов'язковими параметрами , які за замовчуванням містять значення <code>false</code>, <code>false</code>, та <code>null</code> відповідно.</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{domxref("CustomEvent")}}</li>
+ <li>Конструктор для використання замість небажаного метода:{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}.</li>
+</ul>
diff --git a/files/uk/web/api/document/index.html b/files/uk/web/api/document/index.html
new file mode 100644
index 0000000000..44b1bddc0e
--- /dev/null
+++ b/files/uk/web/api/document/index.html
@@ -0,0 +1,470 @@
+---
+title: Document
+slug: Web/API/Document
+tags:
+  - API
+  - DOM
+  - Інтерфейс
+  - Документ
+  - Посилання
+translation_of: Web/API/Document
+---
+<div>{{APIRef}}</div>
+
+<div> </div>
+
+<p><span class="seoSummary"><strong><code>Document</code></strong> інтерфейс представляє будь-яку веб-сторінку, завантажену в браузер і яка слугує точкою входу в контент веб-сторінки, чим є <a href="/en-US/docs/Using_the_W3C_DOM_Level_1_Core" title="Using_the_W3C_DOM_Level_1_Core">DOM tree</a>.</span> DOM tree включає елементи такі як {{HTMLElement("body")}} і {{HTMLElement("table")}}, серед <a href="/en-US/docs/Web/HTML/Element">багатьох інших</a>. Це забезпечує глобальну функціональність для документу, таку як отримувати URL сторінки і створювати нові елементи в документі.</p>
+
+<p>{{inheritanceDiagram}}</p>
+
+<p><code>Інтерфейс Document</code> описує загальні властивості і методи для будь-якого типу документу. Залежно від типу документу (e.g. <a href="/en-US/docs/HTML" title="HTML">HTML</a>, <a href="/en-US/docs/XML" title="XML">XML</a>, SVG, …), більший API доступний: HTML-документи, які подаються з <code>text/html</code> типом контенту, також реалізовують {{domxref("HTMLDocument")}} інтерфейс, тоді як XML і SVG документи реалізовують {{domxref("XMLDocument")}} інтерфейс.</p>
+
+<h2 id="Properties" name="Properties">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("Document.Document","Document()")}}{{non-standard_inline}}</dt>
+ <dd>Створює новий <code>Document</code> об'єкт.</dd>
+</dl>
+
+<h2 id="Properties" name="Properties">Властивості</h2>
+
+<p><em>Цей інтерфейс також розширює {{domxref("Node")}} і {{domxref("EventTarget")}} інтерфейси.</em></p>
+
+<dl>
+ <dt>{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}</dt>
+ <dd>Забезпечує доступ до всіх елементів в документі. Це застарілий, нестандартний інтерфейс і він не повинен використовуватись.</dd>
+ <dt>{{domxref("Document.async")}} {{Deprecated_inline}}</dt>
+ <dd>Використовується з {{domxref("Document.load")}} щоб вказати асинхронний запит.</dd>
+ <dt>{{domxref("Document.body")}}</dt>
+ <dd>Повертає {{HTMLElement("body")}}, або {{htmlelement("frameset")}} вузол поточного документу.</dd>
+ <dt>{{domxref("Document.characterSet")}} {{readonlyinline}}</dt>
+ <dd>Повертає кодування, яке використовується в документі.</dd>
+ <dt>{{domxref("Document.charset")}} {{readonlyinline}} {{Deprecated_inline}}</dt>
+ <dd>Псевдонім для {{domxref("Document.characterSet")}}. Використовуй цю властивість взамін.</dd>
+ <dt>{{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Вказує чи документ інтерпретується в <em>quirks</em> чи <em>strict</em> режимі.</dd>
+ <dt>{{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Повертає Content-Type з MIME-заголовку поточного документу.</dd>
+ <dt>{{domxref("Document.doctype")}} {{readonlyinline}}</dt>
+ <dd>Повертає Визначення Типу Документу (DTD) поточного документу.</dd>
+ <dt>{{domxref("Document.documentElement")}} {{readonlyinline}}</dt>
+ <dd>Повертає {{domxref("Element")}}, який є прямим нащадком document. Для HTML-документів, це, як правило, <span class="seoSummary">{{domxref("HTMLElement")}}</span> елемент.</dd>
+ <dt>{{domxref("Document.documentURI")}} {{readonlyinline}}</dt>
+ <dd>Повертає розміщення документу у вигляді стрічки.</dd>
+ <dt>{{domxref("Document.domConfig")}} {{Deprecated_inline}}</dt>
+ <dd>Повинна повертати {{domxref("DOMConfiguration")}} об'єкт.</dd>
+ <dt>{{domxref("Document.fullscreen")}} {{obsolete_inline}}</dt>
+ <dd><code>true,</code>якщо документ в {{domxref("Using_full-screen_mode","full-screen mode")}}.</dd>
+ <dt>{{domxref("Document.hidden")}} {{readonlyinline}}</dt>
+ <dd>…</dd>
+ <dt>{{domxref("Document.implementation")}} {{readonlyinline}}</dt>
+ <dd>Повертає DOM реалізацію, асоційовану з поточним документом.</dd>
+ <dt>{{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}}</dt>
+ <dd>Псевдонім для {{domxref("Document.characterSet")}}. Використовуй цю властивість взамін.</dd>
+ <dt>{{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}}</dt>
+ <dd>Повертає ім'я набору стилів, які були останніми включені.  Має значення <code>null,</code> аж поки таблиця стилів змінена встановленням значення {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}.</dd>
+ <dt>{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}</dt>
+ <dd>Повертає {{jsxref("Boolean")}}, яким є <code>true</code> лише якщо цей документ є синтетичним, таким як окреме зображення, відео-, аудіо-файл, або т. п.</dd>
+ <dt>{{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt>
+ <dd>Елемент, який зараз є в повноекранному режимі для цього документу.</dd>
+ <dt>{{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt>
+ <dd><code>true,</code> якщо виклик {{domxref("Element.mozRequestFullscreen()")}} буде успішним в поточному документі.</dd>
+ <dt>{{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}}</dt>
+ <dd>Повертає бажаний набір стилів, як вказано автором сторінки.</dd>
+ <dt>{{domxref("Document.scrollingElement")}} {{readonlyinline}}</dt>
+ <dd>Повертає посилання на {{domxref("Element")}} ,який прокручує документ.</dd>
+ <dt>{{domxref("Document.selectedStyleSheetSet")}}</dt>
+ <dd>Повертає набір стилів, який зараз у використанні.</dd>
+ <dt>{{domxref("Document.styleSheetSets")}} {{readonlyinline}}</dt>
+ <dd>Повертає список наборів стилів, доступних для документу.</dd>
+ <dt>{{domxref("Document.timeline")}} {{readonlyinline}}</dt>
+ <dd>…</dd>
+ <dt>{{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>…</dd>
+ <dt>{{domxref("Document.visibilityState")}} {{readonlyinline}}</dt>
+ <dd>
+ <p>Повертає <code>string,</code> яка виражає видимість стану документу. Можливими значеннями є <code>visible</code>,  <code>hidden</code>,  <code>prerender</code>, і <code>unloaded</code>.</p>
+ </dd>
+ <dt>{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}</dt>
+ <dd>Повертає кодування, як визначено XML-оголошенням.</dd>
+ <dt>{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}</dt>
+ <dd>Повертає <code>true,</code> якщо оголошення XML  вказує документу бути автономним (<em>e.g.,</em> Зовнішня частина DTD впливає на контент документу), або <code>false</code>.</dd>
+ <dt>{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}</dt>
+ <dd>Повертає номер версії, як вказано в XML-оголошенні, або <code>"1.0",</code> якщо оголошення відсутнє.</dd>
+</dl>
+
+<p><code>Document</code> інтерфейс розширюється {{domxref("ParentNode")}} інтерфейсом:</p>
+
+<p>{{page("/en-US/docs/Web/API/ParentNode","Properties")}}</p>
+
+<h3 id="Розширення_для_HTML-документу"> Розширення для HTML-документу</h3>
+
+<p><em>Інтерфейс <code>Document</code> для HTML-документів розширює {{domxref("HTMLDocument")}} інтерфейс, або, починаючи з HTML5,  розширюється для таких документів.</em></p>
+
+<dl>
+ <dt>{{domxref("Document.alinkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Повертає або встановлює колір активних посилань в тілі документу.</dd>
+ <dt>{{domxref("Document.anchors")}}</dt>
+ <dd>Повертає список всіх якорів в документі.</dd>
+ <dt>{{domxref("Document.applets")}} {{Deprecated_inline}}</dt>
+ <dd>Повертає впорядкований список апплетів в межах документу.</dd>
+ <dt>{{domxref("Document.bgColor")}} {{Deprecated_inline}}</dt>
+ <dd>Отримує/встановлює фоновий колір поточного документу.</dd>
+ <dt>{{domxref("Document.cookie")}}</dt>
+ <dd>Повертає список куків, розділених крапкою з комою, для того документу або встановлює одиничний кукі.</dd>
+ <dt>{{domxref("Document.defaultView")}} {{readonlyinline}}</dt>
+ <dd>Повертає посилання на об'єкт window.</dd>
+ <dt>{{domxref("Document.designMode")}}</dt>
+ <dd>Отримує/встановлює можливість редагування цілого документу.</dd>
+ <dt>{{domxref("Document.dir")}} {{readonlyinline}}</dt>
+ <dd>Отримує/встановлює направленість (rtl - справа наліво/ltr зліва направо) документу.</dd>
+ <dt>{{domxref("Document.domain")}}</dt>
+ <dd>Отримує/встановлює домен поточного документу.</dd>
+ <dt>{{domxref("Document.embeds")}} {{readonlyinline}}</dt>
+ <dd>Повертає список вбудованих {{HTMLElement('embed')}} елементів в межах поточного документу.</dd>
+ <dt>{{domxref("document.fgColor")}} {{Deprecated_inline}}</dt>
+ <dd>Отримує/встановлює колір переднього плану, або колір тексту поточного документу.</dd>
+ <dt>{{domxref("Document.forms")}} {{readonlyinline}}</dt>
+ <dd>Повертає список {{HTMLElement("form")}} елементів в межах поточного документу.</dd>
+ <dt>{{domxref("Document.head")}} {{readonlyinline}}</dt>
+ <dd>Повертає {{HTMLElement("head")}} елемент поточного документу.</dd>
+ <dt>{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Отримує/встановлює висоту поточного документу.</dd>
+ <dt>{{domxref("Document.images")}} {{readonlyinline}}</dt>
+ <dd>Повертає список зображень в поточному документі.</dd>
+ <dt>{{domxref("Document.lastModified")}} {{readonlyinline}}</dt>
+ <dd>Повертає дату, коли документ був востаннє змінений.</dd>
+ <dt>{{domxref("Document.linkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Отримує/встановлює колір гіперпосилань в документі.</dd>
+ <dt>{{domxref("Document.links")}} {{readonlyinline}}</dt>
+ <dd>Повертає список всіх гіперпосилань в документі.</dd>
+ <dt>{{domxref("Document.location")}} {{readonlyinline}}</dt>
+ <dd>Повертає URI поточного документу.</dd>
+ <dt>{{domxref("Document.plugins")}} {{readonlyinline}}</dt>
+ <dd>Повертає список доступних плагінів.</dd>
+ <dt>{{domxref("Document.readyState")}} {{readonlyinline}}  {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Повертає статус завантаження документу.</dd>
+ <dt>{{domxref("Document.referrer")}} {{readonlyinline}}</dt>
+ <dd>Повертає URI сторінки, яка прив'язана до цієї сторінки.</dd>
+ <dt>{{domxref("Document.scripts")}} {{readonlyinline}}</dt>
+ <dd>Повертає всі {{HTMLElement("script")}} елементи в документі.</dd>
+ <dt>{{domxref("Document.title")}}</dt>
+ <dd>Встановлює або отримує назву поточного документу.</dd>
+ <dt>{{domxref("Document.URL")}} {{readonlyInline}}</dt>
+ <dd><span style="line-height: 19.0909080505371px;">Повертає розміщення документу у вигляді стрічки.</span></dd>
+ <dt>{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Отримує/встановлює колір відвіданих гіперпосилань.</dd>
+ <dt>{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Повертає ширину поточного документу.</dd>
+</dl>
+
+<h3 id="Властивості_включені_з_DocumentOrShadowRoot">Властивості, включені з DocumentOrShadowRoot</h3>
+
+<p><em>Інтерфейс <code>Document</code> включає наступні властивості, визначені в {{domxref("DocumentOrShadowRoot")}} міксині. Зверни увагу, що це, на даний час, реалізовано в Chrome; інші браузери все ще реалізують їх безпосередньо через {{domxref("Document")}} інтерфейс.</em></p>
+
+<dl>
+ <dt>{{domxref("DocumentOrShadowRoot.activeElement")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref('Element')}} within the shadow tree that has focus.</dd>
+ <dt>{{domxref("Document.fullscreenElement")}} {{readonlyinline}}</dt>
+ <dd>The element that's currently in full screen mode for this document.</dd>
+ <dt>{{domxref("DocumentOrShadowRoot.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Returns the element set as the target for mouse events while the pointer is locked. <code>null</code> if lock is pending, pointer is unlocked, or if the target is in another document.</dd>
+ <dt>{{domxref("DocumentOrShadowRoot.styleSheets")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref('StyleSheetList')}} of {{domxref('CSSStyleSheet')}} objects for stylesheets explicitly linked into, or embedded in a document.</dd>
+</dl>
+
+<h3 id="Event_handlers" name="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}}</dt>
+ <dd>Represents the event handling code for the {{event("afterscriptexecute")}} event.</dd>
+ <dt>{{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}}</dt>
+ <dd>Represents the event handling code for the {{event("beforescriptexecute")}} event.</dd>
+ <dt>{{domxref("Document.oncopy")}} {{non-standard_inline}}</dt>
+ <dd>Represents the event handling code for the {{event("copy")}} event.</dd>
+ <dt>{{domxref("Document.oncut")}} {{non-standard_inline}}</dt>
+ <dd>Represents the event handling code for the {{event("cut")}} event.</dd>
+ <dt>{{domxref("Document.onfullscreenchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenchange")}} event is raised.</dd>
+ <dt>{{domxref("Document.onfullscreenerror")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenerror")}} event is raised.</dd>
+ <dt>{{domxref("Document.onpaste")}} {{non-standard_inline}}</dt>
+ <dd>Represents the event handling code for the {{event("paste")}} event.</dd>
+ <dt>{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}</dt>
+ <dd>Represents the event handling code for the {{event("pointerlockchange")}} event.</dd>
+ <dt>{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}</dt>
+ <dd>Represents the event handling code for the {{event("pointerlockerror")}} event.</dd>
+ <dt>{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Represents the event handling code for the {{event("readystatechange")}} event.</dd>
+ <dt>{{domxref("Document.onselectionchange")}} {{experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd>
+ <dt>{{domxref("Document.onvisibilitychange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("visibilitychange")}} event is raised.</dd>
+ <dt>{{domxref("Document.onwheel")}} {{non-standard_inline}}</dt>
+ <dd>Represents the event handling code for the {{event("wheel")}} event.</dd>
+</dl>
+
+<p>The <code>Document</code> interface is extended with the {{domxref("GlobalEventHandlers")}} interface:</p>
+
+<p>{{Page("/en-US/docs/Web/API/GlobalEventHandlers", "Properties")}}</p>
+
+<h2 id="Methods" name="Methods">Методи</h2>
+
+<p><em>Цей інтерфейс також розширює {{domxref("Node")}} і {{domxref("EventTarget")}} інтерфейси.</em></p>
+
+<dl>
+ <dt>{{domxref("Document.adoptNode()")}}</dt>
+ <dd>Приймає вузол із зовнішнього документу.</dd>
+ <dt>{{domxref("Document.captureEvents()")}} {{Deprecated_inline}}</dt>
+ <dd>Дивись {{domxref("Window.captureEvents")}}.</dd>
+ <dt>{{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}}</dt>
+ <dd>Отримує об'єкт {{Domxref("Range")}} для фрагмента документу у відповідності до вказаних координат.</dd>
+ <dt>{{domxref("Document.createAttribute()")}}</dt>
+ <dd>Створює новий об'єкт {{domxref("Attr")}} і повертає його.</dd>
+ <dt>{{domxref("Document.createAttributeNS()")}}</dt>
+ <dd>Створює  новий вузол атрибута в заданому просторі імен і повертає його.</dd>
+ <dt>{{domxref("Document.createCDATASection()")}}</dt>
+ <dd>Створює новий вузол CDATA і повертає його.</dd>
+ <dt>{{domxref("Document.createComment()")}}</dt>
+ <dd> Створює новий вузол коментаря і повертає його.</dd>
+ <dt>{{domxref("Document.createDocumentFragment()")}}</dt>
+ <dd>Створює новий фрагмент документу.</dd>
+ <dt>{{domxref("Document.createElement()")}}</dt>
+ <dd>Створює новий елемент із заданим ім'ям тега.</dd>
+ <dt>{{domxref("Document.createElementNS()")}}</dt>
+ <dd>Створює новий елемент із заданим ім'ям тега і URI простором імен.</dd>
+ <dt>{{domxref("Document.createEntityReference()")}} {{obsolete_inline}}</dt>
+ <dd>Створює нове посилання на об'єкт і повертає його.</dd>
+ <dt>{{domxref("Document.createEvent()")}}</dt>
+ <dd>Створює об'єкт події.</dd>
+ <dt>{{domxref("Document.createNodeIterator()")}}</dt>
+ <dd>Створює об'єкт {{domxref("NodeIterator")}}.</dd>
+ <dt>{{domxref("Document.createProcessingInstruction()")}}</dt>
+ <dd>Створює новий об'єкт {{domxref("ProcessingInstruction")}}.</dd>
+ <dt>{{domxref("Document.createRange()")}}</dt>
+ <dd>Створює об'єкт {{domxref("Range")}}.</dd>
+ <dt>{{domxref("Document.createTextNode()")}}</dt>
+ <dd>Створює текстовий вузол.</dd>
+ <dt>{{domxref("Document.createTouch()")}} {{Deprecated_inline}}</dt>
+ <dd>Створює об'єкт {{domxref("Touch")}}.</dd>
+ <dt>{{domxref("Document.createTouchList()")}}</dt>
+ <dd>Створює об'єкт {{domxref("TouchList")}}.</dd>
+ <dt>{{domxref("Document.createTreeWalker()")}}</dt>
+ <dd> Створює об'єкт{{domxref("TreeWalker")}}.</dd>
+ <dt>{{domxref("Document.enableStyleSheetsForSet()")}}</dt>
+ <dd>Вмикає таблиці стилів для вказаного набору таблиць стилів.</dd>
+ <dt>{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}</dt>
+ <dd>Звільняє блокування вказівника.</dd>
+ <dt>{{domxref("Document.getAnimations()")}} {{experimental_inline}}</dt>
+ <dd>Повертає масив всіх об'єктів {{domxref("Animation")}}, які діють на даний момент, чиї цільові елементи є нащадками <code>document</code>.</dd>
+ <dt>{{domxref("Document.getElementsByClassName()")}}</dt>
+ <dd>Повертає список елементів із заданим ім'ям класу.</dd>
+ <dt>{{domxref("Document.getElementsByTagName()")}}</dt>
+ <dd>Повертає список елементів із заданим ім'ям тега.</dd>
+ <dt>{{domxref("Document.getElementsByTagNameNS()")}}</dt>
+ <dd>Повертає список елементів із заданим ім'ям тега і простором імен.</dd>
+ <dt>{{domxref("Document.importNode()")}}</dt>
+ <dd>Повертає клон вузла з зовнішнього документу.</dd>
+ <dt>{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}</dt>
+ <dd>Заміняє сутності, нормалізує текстові вузли, і т. д.</dd>
+ <dt>{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Звільняє поточний захват мишки, якщо він знаходиться на елементі в цьому документі.</dd>
+ <dt>{{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>Дивись {{domxref("Window.releaseEvents()")}}.</dd>
+ <dt>{{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}}</dt>
+ <dd>Дивись {{domxref("Window.routeEvent()")}}.</dd>
+ <dt>{{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Дозволяє змінити елемент, який використовуєтья в якості фонового зображення для вказаного ідентифікатора елемента. </dd>
+</dl>
+
+<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Інтерфейс </span></font>Document</code> розширюється інтерфейсом {{domxref("ParentNode")}}:</p>
+
+<dl>
+ <dt>{{domxref("document.getElementById","document.getElementById(String id)")}}</dt>
+ <dd>Повертає посилання на об'єкт визначеного елемента.</dd>
+ <dt>{{domxref("document.querySelector","document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd>Повертає перший Element-вузол в межах документу, в порядку документу, який співпадає зі вказаними селекторами.</dd>
+ <dt>{{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd>Повертає список всіх Element-вузлів в межах документу, які співпадають з вказаними селекторами.</dd>
+</dl>
+
+<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Інтерфейс </span></font>Document</code> розширюється інтерфейсом {{domxref("XPathEvaluator")}}:</p>
+
+<dl>
+ <dt>{{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}}</dt>
+ <dd>Компілює <code><a href="/en-US/docs/XPathExpression" title="XPathExpression">XPathExpression</a></code> який може тоді бути використаний для (повторюваних) оцінювань.</dd>
+ <dt>{{domxref("document.createNSResolver","document.createNSResolver(Node resolver)")}}</dt>
+ <dd>Створює об'єкт {{domxref("XPathNSResolver")}}.</dd>
+ <dt>{{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}</dt>
+ <dd>Вираховує вираз XPath.</dd>
+</dl>
+
+<h3 id="Розширення_для_HTML-документів">Розширення для HTML-документів</h3>
+
+<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">інтерфейс </span></font>Document</code> для HTML-документів наслідується від інтерфейсу {{domxref("HTMLDocument")}} або, починаючи з HTML5,  розширюється для таких документів:</p>
+
+<dl>
+ <dt>{{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.</dd>
+ <dt>{{domxref("document.close()")}}</dt>
+ <dd>Closes a document stream for writing.</dd>
+ <dt>{{domxref("document.execCommand","document.execCommand(String command[, Boolean showUI[, String value]])")}}</dt>
+ <dd>On an editable document, executes a formating command.</dd>
+ <dt>{{domxref("document.getElementsByName","document.getElementsByName(String name)")}}</dt>
+ <dd>Returns a list of elements with the given name.</dd>
+ <dt>{{domxref("document.hasFocus()")}}</dt>
+ <dd>Returns <code>true</code> if the focus is currently located anywhere inside the specified document.</dd>
+ <dt>{{domxref("document.open()")}}</dt>
+ <dd>Opens a document stream for writing.</dd>
+ <dt>{{domxref("document.queryCommandEnabled","document.queryCommandEnabled(String command)")}}</dt>
+ <dd>Returns true if the formating command can be executed on the current range.</dd>
+ <dt>{{domxref("document.queryCommandIndeterm","document.queryCommandIndeterm(String command)")}}</dt>
+ <dd>Returns true if the formating command is in an indeterminate state on the current range.</dd>
+ <dt>{{domxref("document.queryCommandState","document.queryCommandState(String command)")}}</dt>
+ <dd>Returns true if the formating command has been executed on the current range.</dd>
+ <dt>{{domxref("document.queryCommandSupported","document.queryCommandSupported(String command)")}}</dt>
+ <dd>Returns true if the formating command is supported on the current range.</dd>
+ <dt>{{domxref("document.queryCommandValue","document.queryCommandValue(String command)")}}</dt>
+ <dd>Returns the current value of the current range for a formating command.</dd>
+ <dt>{{domxref("document.write","document.write(String text)")}}</dt>
+ <dd>Writes text in a document.</dd>
+ <dt>{{domxref("document.writeln","document.writeln(String text)")}}</dt>
+ <dd>Writes a line of text in a document.</dd>
+</dl>
+
+<h3 id="Methods_included_from_DocumentOrShadowRoot">Methods included from DocumentOrShadowRoot</h3>
+
+<p><em>The <code>Document</code> interface includes the following methods defined on the {{domxref("DocumentOrShadowRoot")}} mixin. Note that this is currently only implemented by Chrome; other browsers still implement them on the {{domxref("Document")}} interface.</em></p>
+
+<dl>
+ <dt>{{domxref("DocumentOrShadowRoot.getSelection()")}}</dt>
+ <dd>Returns a {{domxref('Selection')}} object representing the range of text selected by the user, or the current position of the caret.</dd>
+ <dt>{{domxref("DocumentOrShadowRoot.elementFromPoint()")}}</dt>
+ <dd>Returns the topmost element at the specified coordinates.</dd>
+ <dt>{{domxref("DocumentOrShadowRoot.elementsFromPoint()")}}</dt>
+ <dd>Returns an array of all elements at the specified coordinates.</dd>
+ <dt>{{domxref("DocumentOrShadowRoot.caretPositionFromPoint()")}}</dt>
+ <dd>Returns a {{domxref('CaretPosition')}} object containing the DOM node containing the caret, and caret's character offset within that node.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Page Visibility API', '#onvisiblitychange-event-handler', 'onvisibilitychange')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td>Adds <code>onvisibility</code><code>change</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selection API', '', 'Extend Document and GlobalEventHandlers')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Adds <code>onselectstart</code> and <code>onselectionchange</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','#i-Document','Document')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition for the interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','#i-Document','Document')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Supersede DOM 1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','#i-Document','Document')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Supersede DOM 2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Intend to supersede DOM 3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Turn the {{domxref("HTMLDocument")}} interface into a <code>Document</code> extension.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}</td>
+   <td>{{Spec2('DOM3 XPath')}}</td>
+   <td>Define the {{domxref("XPathEvaluator")}} interface which extend document.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Page Visibility API', '#sec-document-interface', 'Document')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td>Extend the <code>Document</code> interface with the <code>visibilityState</code> and <code>hidden</code> attributes</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing','#dom-document-getselection','Document')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Extend the <code>Document</code> interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Extend the <code>Document</code> interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>Extend the <code>Document</code> interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Extend the <code>Document</code> interface</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility_notes">Browser compatibility notes</h2>
+
+<h3 id="Firefox_notes">Firefox notes</h3>
+
+<p>Mozilla defines a set of non-standard properties made only for XUL content:</p>
+
+<dl>
+ <dt>{{domxref("document.currentScript")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Returns the {{HTMLElement("script")}} element that is currently executing.</dd>
+ <dt>{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}</dt>
+ <dd>(<strong>Mozilla add-ons only!</strong>) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).</dd>
+ <dt>{{domxref("document.popupNode")}}</dt>
+ <dd>Returns the node upon which a popup was invoked.</dd>
+ <dt>{{domxref("document.tooltipNode")}}</dt>
+ <dd>Returns the node which is the target of the current tooltip.</dd>
+</dl>
+
+<p>Mozilla also define some non-standard methods:</p>
+
+<dl>
+ <dt>{{domxref("document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}</dt>
+ <dd>This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd>
+ <dt>{{domxref("document.getBoxObjectFor")}} {{obsolete_inline}}</dt>
+ <dd>Use the {{domxref("Element.getBoundingClientRect()")}} method instead.</dd>
+ <dt>{{domxref("document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}</dt>
+ <dd>Loads a <a href="/en-US/docs/XUL_Overlays" title="XUL_Overlays">XUL overlay</a> dynamically. This only works in XUL documents.</dd>
+ <dt>{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}</dt>
+ <dd>This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd>
+</dl>
+
+<h3 id="Internet_Explorer_notes">Internet Explorer notes</h3>
+
+<p>Microsoft defines some non-standard properties:</p>
+
+<dl>
+ <dt>{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See <a href="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx">MSDN</a>.</dd>
+ <dt><span style="font-weight: normal; line-height: 1.5;">Internet Explorer does not support all methods from the <code>Node</code> interface in the <code>Document</code> interface:</span></dt>
+</dl>
+
+<dl>
+ <dt>{{domxref("document.contains")}}</dt>
+ <dd>As a work-around, <code>document.body.contains()</code> can be used.</dd>
+</dl>
diff --git a/files/uk/web/api/document/visibilitychange_event/index.html b/files/uk/web/api/document/visibilitychange_event/index.html
new file mode 100644
index 0000000000..be68d28a48
--- /dev/null
+++ b/files/uk/web/api/document/visibilitychange_event/index.html
@@ -0,0 +1,82 @@
+---
+title: 'Документ: зміна видимості'
+slug: Web/API/Document/visibilitychange_event
+tags:
+  - API
+  - API відображення сторінки
+  - visibilitychange
+  - відображення сторінки
+  - фоновий режим
+translation_of: Web/API/Document/visibilitychange_event
+---
+<div>{{APIRef}}</div>
+
+<p>Подія <code> visibilitychange</code> запускається в документі, коли вміст його вкладки змінився, став видимим або прихованим.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Бульбашки</th>
+   <td>Так</td>
+  </tr>
+  <tr>
+   <th scope="row">Скасовується</th>
+   <td>Ні</td>
+  </tr>
+  <tr>
+   <th scope="row">Інтерфейс</th>
+   <td>{{domxref("event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Свойство обработчика события</th>
+   <td>{{domxref("Document.onvisibilitychange", "onvisibilitychange")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Інформація_про_використання">Інформація про використання</h2>
+
+<p>У подію не включено оновлення статусу видимості документа, але цю інформацію можна отримати з властивості {{domxref ("Document.visibilityState", "visibilityState")}} документа.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>У цьому прикладі починається відтворення музичного запису, коли документ стає видимим, і призупиняється відтворення музики, коли документ більше не видно.</p>
+
+<pre class="brush:js">document.addEventListener("visibilitychange", function() {
+  if (document.visibilityState === 'visible') {
+    backgroundMusic.play();
+  } else {
+    backgroundMusic.pause();
+  }
+});
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Page Visibility API','#sec-visibilitychange-event','visibilitychange')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Сумісність з браузерами</h2>
+
+<p>{{Compat("api.Document.visibilitychange")}}</p>
+
+<h2 id="Дивись_також">Дивись також</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Page_Visibility_API">API видимості сторінки</a></li>
+ <li>{{domxref("Document.visibilityState")}}</li>
+</ul>
diff --git a/files/uk/web/api/domstring/index.html b/files/uk/web/api/domstring/index.html
new file mode 100644
index 0000000000..54ba0dee57
--- /dev/null
+++ b/files/uk/web/api/domstring/index.html
@@ -0,0 +1,45 @@
+---
+title: DOMString
+slug: Web/API/DOMString
+translation_of: Web/API/DOMString
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>DOMString</code></strong>  є 16-бітовою послідовністю безнакових цілих, типово інтерпретуєтьсят як UTF-16 <a href="http://www.unicode.org/glossary/#code_unit">code units</a>. Це точно відповідає до JavaScript <a href="https://tc39.es/ecma262/#sec-ecmascript-language-types-string-type">примітивному типу String</a>. Коли <code>DOMString</code> застосовється у JavaScript, це напряму відображує відповідну {{jsxref("String")}}.</p>
+
+<p>When a Web API accepts a <code>DOMString</code>, the value provided will be stringified, using the <code><a href="https://tc39.es/ecma262/#sec-tostring">ToString</a></code> abstract operation. (For types other than Symbol, this has the same behavior as the {{jsxref("String/String", "String()")}} function.)</p>
+
+<p>Certain Web APIs accepting a <code>DOMString</code> have an additional legacy behavior, where passing {{jsxref("null")}} stringifies to the empty string instead of the usual <code>"null"</code>.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}}</td>
+   <td>{{Spec2('WebIDL')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebIDL', '#es-DOMString')}}</td>
+   <td>{{Spec2('WebIDL')}}</td>
+   <td>This defines how JavaScript values are converted to <code>DOMString</code> and vice versa.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Також_дивися">Також дивися:</h2>
+
+<ul>
+ <li>JavaScript {{jsxref("String")}}</li>
+ <li>{{domxref("USVString")}}</li>
+ <li>{{domxref("CSSOMString")}}</li>
+ <li><a href="/en-US/docs/Web/API/DOMString/Binary">Binary strings</a></li>
+</ul>
diff --git a/files/uk/web/api/element/getclientrects/index.html b/files/uk/web/api/element/getclientrects/index.html
new file mode 100644
index 0000000000..5a88f0321c
--- /dev/null
+++ b/files/uk/web/api/element/getclientrects/index.html
@@ -0,0 +1,219 @@
+---
+title: Element.getClientRects()
+slug: Web/API/Element/getClientRects
+translation_of: Web/API/Element/getClientRects
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>getClientRects()</strong></code> метод {{domxref("Element")}} інтерфейсу повертає колекцію {{DOMxRef("DOMRect")}} об'єктів, які позначають границі прямокутників для кожної <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS border box</a> в клієнта.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>let <em>rectCollection</em> = <var>object</var>.getClientRects();</code></pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Повернене значення є колекцією {{DOMxRef("DOMRect")}} об'єктів, один для кожної CSS border box асоційованої з елементом. Кожен {{DOMxRef("DOMRect")}} об'єкт містить лише для читання <code>left</code>, <code>top</code>, <code>right</code> <code>і bottom</code> властивості, які описують border box, в пікселях, з top-left відносно до top-left видимої області веб-сторінки. For tables with captions, the caption is included even though it's outside the border box of the table. When called on SVG elements other than an outer-<code>&lt;svg&gt;</code>, the "viewport" that the resulting rectangles are relative to is the viewport that the element's outer-<code>&lt;svg&gt;</code> establishes (and to be clear, the rectangles are also transformed by the outer-<code>&lt;svg&gt;</code>'s <code>viewBox</code> transform, if any).</p>
+
+<p>Originally, Microsoft intended this method to return a <code>TextRectangle</code> object for each <em>line</em> of text. However, the CSSOM working draft specifies that it returns a {{DOMxRef("DOMRect")}} for each <em>border box</em>. For an inline element, the two definitions are the same. But for a block element, Mozilla will return only a single rectangle.</p>
+
+<p>{{Fx_MinVersion_Note(3.5, "Firefox 3.5 adds <code>width</code> and <code>height</code> properties to the <code>TextRectangle</code> object.")}}</p>
+
+<p>The amount of scrolling that has been done of the viewport area (or any other scrollable element) is taken into account when computing the rectangles.</p>
+
+<p>The returned rectangles do not include the bounds of any child elements that might happen to overflow.</p>
+
+<p>For HTML {{HtmlElement("area")}} elements, SVG elements that do not render anything themselves, <code>display:none</code> elements, and generally any elements that are not directly rendered, an empty list is returned.</p>
+
+<p>Rectangles are returned even for CSS boxes that have empty border-boxes. The <code>left</code>, <code>top</code>, <code>right</code>, and <code>bottom</code> coordinates can still be meaningful.</p>
+
+<p>Fractional pixel offsets are possible.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>These examples draw client rects in various colors. Note that the JavaScript function that paints the client rects is connected to the markup via the class <code>withClientRectsOverlay</code>.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Example 1: This HTML creates three paragraphs with a <code>&lt;span&gt;</code> inside, each embedded in a <code>&lt;div&gt;</code> block. Client rects are painted for the paragraph in the second block, and for the <code>&lt;span&gt;</code> element in the third block.</p>
+
+<pre class="brush: html">&lt;h3&gt;A paragraph with a span inside&lt;/h3&gt;
+&lt;p&gt;Both the span and the paragraph have a border set. The
+  client rects are in red. Note that the p has onlyone border
+  box, while the span has multiple border boxes.&lt;/p&gt;
+
+&lt;div&gt;
+  &lt;strong&gt;Original&lt;/strong&gt;
+  &lt;p&gt;
+    &lt;span&gt;Paragraph that spans multiple lines&lt;/span&gt;
+  &lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;strong&gt;p's rect&lt;/strong&gt;
+  &lt;p class="withClientRectsOverlay"&gt;
+    &lt;span&gt;Paragraph that spans multiple lines&lt;/span&gt;
+  &lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;strong&gt;span's rect&lt;/strong&gt;
+  &lt;p&gt;
+    &lt;span class="withClientRectsOverlay"&gt;Paragraph that spans multiple lines&lt;/span&gt;
+  &lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>Example 2: This HTML creates three ordered lists. Client rects are painted for the <code>&lt;ol&gt;</code> in the second block, and for each <code>&lt;li&gt;</code> element in the third block.</p>
+
+<pre class="brush: html">&lt;h3&gt;A list&lt;/h3&gt;
+&lt;p&gt;Note that the border box doesn't include the number, so
+  neither do the client rects.&lt;/p&gt;
+
+&lt;div&gt;
+  &lt;strong&gt;Original&lt;/strong&gt;
+  &lt;ol&gt;
+    &lt;li&gt;Item 1&lt;/li&gt;
+    &lt;li&gt;Item 2&lt;/li&gt;
+  &lt;/ol&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;strong&gt;ol's rect&lt;/strong&gt;
+  &lt;ol class="withClientRectsOverlay"&gt;
+    &lt;li&gt;Item 1&lt;/li&gt;
+    &lt;li&gt;Item 2&lt;/li&gt;
+  &lt;/ol&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;strong&gt;each li's rect&lt;/strong&gt;
+  &lt;ol&gt;
+    &lt;li class="withClientRectsOverlay"&gt;Item 1&lt;/li&gt;
+    &lt;li class="withClientRectsOverlay"&gt;Item 2&lt;/li&gt;
+  &lt;/ol&gt;
+&lt;/div&gt;</pre>
+
+<p>Example 3: This HTML creates two tables with captions. Client rects are painted for the <code>&lt;table&gt;</code> in the second block.</p>
+
+<pre class="brush: html">&lt;h3&gt;A table with a caption&lt;/h3&gt;
+&lt;p&gt;Although the table's border box doesn't include the
+  caption, the client rects do include the caption.&lt;/p&gt;
+
+&lt;div&gt;
+  &lt;strong&gt;Original&lt;/strong&gt;
+  &lt;table&gt;
+    &lt;caption&gt;caption&lt;/caption&gt;
+    &lt;thead&gt;
+      &lt;tr&gt;&lt;th&gt;thead&lt;/th&gt;&lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tbody&gt;
+      &lt;tr&gt;&lt;td&gt;tbody&lt;/td&gt;&lt;/tr&gt;
+    &lt;/tbody&gt;
+  &lt;/table&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;strong&gt;table's rect&lt;/strong&gt;
+  &lt;table class="withClientRectsOverlay"&gt;
+    &lt;caption&gt;caption&lt;/caption&gt;
+    &lt;thead&gt;
+      &lt;tr&gt;&lt;th&gt;thead&lt;/th&gt;&lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tbody&gt;
+      &lt;tr&gt;&lt;td&gt;tbody&lt;/td&gt;&lt;/tr&gt;
+    &lt;/tbody&gt;
+  &lt;/table&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>The CSS draws borders around the paragraph and the <code>&lt;span&gt;</code> inside each <code>&lt;div&gt;</code> block for the first example, around the <code>&lt;ol&gt;</code> and <code>li</code> for the second example, and around <code>&lt;table&gt;</code>, <code>&lt;th&gt;</code>, and <code>&lt;td&gt;</code> elements for the third example.</p>
+
+<pre class="brush: css">strong {
+  text-align: center;
+}
+div {
+  display: inline-block;
+  width: 150px;
+}
+div p, ol, table {
+  border: 1px solid blue;
+}
+span, li, th, td {
+  border: 1px solid green;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>The JavaScript code draws the client rects for all HTML elements that have CSS class <code>withClientRectsOverlay</code> assigned.</p>
+
+<pre class="brush: js">function addClientRectsOverlay(elt) {
+  /* Absolutely position a div over each client rect so that its border width
+     is the same as the rectangle's width.
+     Note: the overlays will be out of place if the user resizes or zooms. */
+  var rects = elt.getClientRects();
+  for (var i = 0; i != rects.length; i++) {
+    var rect = rects[i];
+    var tableRectDiv = document.createElement('div');
+    tableRectDiv.style.position = 'absolute';
+    tableRectDiv.style.border = '1px solid red';
+    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
+    tableRectDiv.style.margin = tableRectDiv.style.padding = '0';
+    tableRectDiv.style.top = (rect.top + scrollTop) + 'px';
+    tableRectDiv.style.left = (rect.left + scrollLeft) + 'px';
+    // We want rect.width to be the border width, so content width is 2px less.
+    tableRectDiv.style.width = (rect.width - 2) + 'px';
+    tableRectDiv.style.height = (rect.height - 2) + 'px';
+    document.body.appendChild(tableRectDiv);
+  }
+}
+
+(function() {
+  /* Call function addClientRectsOverlay(elt) for all elements with
+     assigned class "withClientRectsOverlay" */
+  var elt = document.getElementsByClassName('withClientRectsOverlay');
+  for (var i = 0; i &lt; elt.length; i++) {
+    addClientRectsOverlay(elt[i]);
+  }
+})();</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Examples', 680, 650)}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-element-getclientrects", "Element.getClientRects()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes">Notes</h3>
+
+<p><code>getClientRects()</code> was first introduced in the MS IE DHTML object model.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Element.getClientRects")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{DOMxRef("Element.getBoundingClientRect()")}}</li>
+ <li>{{DOMxRef("Element.getClientRects()")}}</li>
+</ul>
diff --git a/files/uk/web/api/element/index.html b/files/uk/web/api/element/index.html
new file mode 100644
index 0000000000..aa007c48e7
--- /dev/null
+++ b/files/uk/web/api/element/index.html
@@ -0,0 +1,490 @@
+---
+title: Element
+slug: Web/API/Element
+tags:
+  - API
+  - DOM
+  - DOM Reference
+  - Element
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web API
+translation_of: Web/API/Element
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary"><strong><code>Element</code></strong><code>це найбільш загальний базовий класс</code>з якого наслідуються всі об'єкти {{DOMxRef("Document")}} .  Тільки він має методи та властивості, загальні для всіх видів елементів. Більшість специфічних классів наслідуються з <code>Element</code>.</span> Наприклад, {{DOMxRef("HTMLElement")}} інтерфейс є базовим інтерфейсом для HTML елементів, тоді як {{DOMxRef("SVGElement")}} інтерфейс є базовим для усіх SVG елементів. Більшість функціональності визначається ще далі у ієрархії классу.</p>
+
+<p>Мови за межами сфери Web платформ, такі як XUL, через інтерфейс <code>XULElement</code> , також застосовують <code>Element</code>.</p>
+
+<p>{{InheritanceDiagram}}implement</p>
+
+<h2 id="Properties" name="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent interface, {{DOMxRef("Node")}}, and by extension that interface's parent, {{DOMxRef("EventTarget")}}. It implements the properties of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}, {{DOMxRef("NonDocumentTypeChildNode")}}, </em>and {{DOMxRef("Animatable")}}.</p>
+
+<dl>
+ <dt>{{DOMxRef("Element.attributes")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{DOMxRef("NamedNodeMap")}} object containing the assigned attributes of the corresponding HTML element.</dd>
+ <dt>{{DOMxRef("Element.classList")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{DOMxRef("DOMTokenList")}} containing the list of class attributes.</dd>
+ <dt>{{DOMxRef("Element.className")}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} representing the class of the element.</dd>
+ <dt>{{DOMxRef("Element.clientHeight")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the inner height of the element.</dd>
+ <dt>{{DOMxRef("Element.clientLeft")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the width of the left border of the element.</dd>
+ <dt>{{DOMxRef("Element.clientTop")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the width of the top border of the element.</dd>
+ <dt>{{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the inner width of the element.</dd>
+ <dt>{{DOMxRef("Element.computedName")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{DOMxRef("DOMString")}} containing the label exposed to accessibility.</dd>
+ <dt>{{DOMxRef("Element.computedRole")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{DOMxRef("DOMString")}} containing the ARIA role that has been applied to a particular element. </dd>
+ <dt>{{DOMxRef("Element.id")}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} representing the id of the element.</dd>
+ <dt>{{DOMxRef("Element.innerHTML")}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} representing the markup of the element's content.</dd>
+ <dt>{{DOMxRef("Element.localName")}} {{readOnlyInline}}</dt>
+ <dd>A {{DOMxRef("DOMString")}} representing the local part of the qualified name of the element.</dd>
+ <dt>{{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}</dt>
+ <dd>The namespace URI of the element, or <code>null</code> if it is no namespace.
+ <div class="note">
+ <p><strong>Note:</strong> In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2")}}</p>
+ </div>
+ </dd>
+ <dt>{{DOMxRef("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}</dt>
+ <dd>Is an {{DOMxRef("Element")}}, the element immediately following the given one in the tree, or <code>null</code> if there's no sibling node.</dd>
+ <dt>{{DOMxRef("Element.outerHTML")}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string.</dd>
+ <dt>{{DOMxRef("Element.prefix")}} {{readOnlyInline}}</dt>
+ <dd>A {{DOMxRef("DOMString")}} representing the namespace prefix of the element, or <code>null</code> if no prefix is specified.</dd>
+ <dt>{{DOMxRef("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}</dt>
+ <dd>Is a {{DOMxRef("Element")}}, the element immediately preceding the given one in the tree, or <code>null</code> if there is no sibling element.</dd>
+ <dt>{{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the scroll view height of an element.</dd>
+ <dt>{{DOMxRef("Element.scrollLeft")}}</dt>
+ <dd>Is a {{jsxref("Number")}} representing the left scroll offset of the element.</dd>
+ <dt>{{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.</dd>
+ <dt>{{DOMxRef("Element.scrollTop")}}</dt>
+ <dd>A {{jsxref("Number")}} representing number of pixels the top of the document is scrolled vertically.</dd>
+ <dt>{{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the maximum top scroll offset possible for the element.</dd>
+ <dt>{{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the scroll view width of the element.</dd>
+ <dt>{{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}}</dt>
+ <dd>Returns the open shadow root that is hosted by the element, or null if no open shadow root is present.</dd>
+ <dt>{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}</dt>
+ <dd>Returns the shadow root that is hosted by the element, regardless if its open or closed. <strong>Available only to <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd>
+ <dt>{{DOMxRef("Element.slot")}} {{Experimental_Inline}}</dt>
+ <dd>Returns the name of the shadow DOM slot the element is inserted in.</dd>
+ <dt>{{DOMxRef("Element.tabStop")}} {{Non-standard_Inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating if the element can receive input focus via the tab key.</dd>
+ <dt>{{DOMxRef("Element.tagName")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("String")}} with the name of the tag for the given element.</dd>
+ <dt>{{DOMxRef("Element.undoManager")}} {{Experimental_Inline}} {{readOnlyInline}}</dt>
+ <dd>Returns the {{DOMxRef("UndoManager")}} associated with the element.</dd>
+ <dt>{{DOMxRef("Element.undoScope")}} {{Experimental_Inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> DOM Level 3 defined <code>namespaceURI</code>, <code>localName</code> and <code>prefix</code> on the {{DOMxRef("Node")}} interface. In DOM4 they were moved to <code>Element</code>.</p>
+
+<p>This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.</p>
+</div>
+
+<h3 id="Properties_included_from_Slotable">Properties included from Slotable</h3>
+
+<p><em>The <code>Element</code> interface includes the following property, defined on the {{DOMxRef("Slotable")}} mixin.</em></p>
+
+<dl>
+ <dt>{{DOMxRef("Slotable.assignedSlot")}}{{readonlyInline}}</dt>
+ <dd>Returns a {{DOMxRef("HTMLSlotElement")}} representing the {{htmlelement("slot")}} the node is inserted in.</dd>
+</dl>
+
+<h3 id="Handlers" name="Handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("Element.onfullscreenchange")}}</dt>
+ <dd>An event handler for the {{event("fullscreenchange")}} event, which is sent when the element enters or exits full-screen mode. This can be used to watch both for successful expected transitions, but also to watch for unexpected changes, such as when your app is running in the background.</dd>
+ <dt>{{domxref("Element.onfullscreenerror")}}</dt>
+ <dd>An event handler for the {{event("fullscreenerror")}} event, which is sent when an error occurs while attempting to change into full-screen mode.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parents {{DOMxRef("Node")}}, and its own parent, {{DOMxRef("EventTarget")}}<em>, and implements those of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}<em>, {{DOMxRef("NonDocumentTypeChildNode")}}, </em></em>and {{DOMxRef("Animatable")}}.</em></p>
+
+<dl>
+ <dt>{{DOMxRef("EventTarget.addEventListener()")}}</dt>
+ <dd>Registers an event handler to a specific event type on the element.</dd>
+ <dt>{{DOMxRef("Element.attachShadow()")}}</dt>
+ <dd>Attaches a shadow DOM tree to the specified element and returns a reference to its {{DOMxRef("ShadowRoot")}}.</dd>
+ <dt>{{DOMxRef("Element.animate()")}} {{Experimental_Inline}}</dt>
+ <dd>A shortcut method to create and run an animation on an element. Returns the created Animation object instance.</dd>
+ <dt>{{DOMxRef("Element.closest()")}} {{Experimental_Inline}}</dt>
+ <dd>Returns the {{DOMxRef("Element")}} which is the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter.</dd>
+ <dt>{{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}</dt>
+ <dd>Creates a <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> on on the element, turning it into a shadow host. Returns a {{DOMxRef("ShadowRoot")}}.</dd>
+ <dt>{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}</dt>
+ <dd>Returns a {{DOMxRef("StylePropertyMapReadOnly")}} interface which provides a read-only representation of a CSS declaration block that is an alternative to {{DOMxRef("CSSStyleDeclaration")}}.</dd>
+ <dt>{{DOMxRef("EventTarget.dispatchEvent()")}}</dt>
+ <dd>Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates whether no handler canceled the event.</dd>
+ <dt>{{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}</dt>
+ <dd>Returns an array of Animation objects currently active on the element.</dd>
+ <dt>{{DOMxRef("Element.getAttribute()")}}</dt>
+ <dd>Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.</dd>
+ <dt>{{DOMxRef("Element.getAttributeNames()")}}</dt>
+ <dd>Returns an array of attribute names from the current element.</dd>
+ <dt>{{DOMxRef("Element.getAttributeNS()")}}</dt>
+ <dd>Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.</dd>
+ <dt>{{DOMxRef("Element.getAttributeNode()")}} {{Obsolete_Inline}}</dt>
+ <dd>Retrieves the node representation of the named attribute from the current node and returns it as an {{DOMxRef("Attr")}}.</dd>
+ <dt>{{DOMxRef("Element.getAttributeNodeNS()")}} {{Obsolete_Inline}}</dt>
+ <dd>Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{DOMxRef("Attr")}}.</dd>
+ <dt>{{DOMxRef("Element.getBoundingClientRect()")}}</dt>
+ <dd>Returns the size of an element and its position relative to the viewport.</dd>
+ <dt>{{DOMxRef("Element.getClientRects()")}}</dt>
+ <dd>Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.</dd>
+ <dt>{{DOMxRef("Element.getElementsByClassName()")}}</dt>
+ <dd>Returns a live {{DOMxRef("HTMLCollection")}} that contains all descendants of the current element that possess the list of classes given in the parameter.</dd>
+ <dt>{{DOMxRef("Element.getElementsByTagName()")}}</dt>
+ <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name, from the current element.</dd>
+ <dt>{{DOMxRef("Element.getElementsByTagNameNS()")}}</dt>
+ <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name and namespace, from the current element.</dd>
+ <dt>{{DOMxRef("Element.hasAttribute()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.</dd>
+ <dt>{{DOMxRef("Element.hasAttributeNS()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.</dd>
+ <dt>{{DOMxRef("Element.hasAttributes()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has one or more HTML attributes present.</dd>
+ <dt>{{DOMxRef("Element.hasPointerCapture()")}}</dt>
+ <dd>Indicates whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.</dd>
+ <dt>{{DOMxRef("Element.insertAdjacentElement()")}}</dt>
+ <dd>Inserts a given element node at a given position relative to the element it is invoked upon.</dd>
+ <dt>{{DOMxRef("Element.insertAdjacentHTML()")}}</dt>
+ <dd>Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.</dd>
+ <dt>{{DOMxRef("Element.insertAdjacentText()")}}</dt>
+ <dd>Inserts a given text node at a given position relative to the element it is invoked upon.</dd>
+ <dt>{{DOMxRef("Element.matches()")}} {{Experimental_Inline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.</dd>
+ <dt>{{DOMxRef("Element.pseudo()")}} {{Experimental_Inline}}</dt>
+ <dd>Returns a {{DOMxRef("CSSPseudoElement")}} representing the child pseudo-element matched by the specified pseudo-element selector.</dd>
+ <dt>{{DOMxRef("Element.querySelector()")}}</dt>
+ <dd>Returns the first {{DOMxRef("Node")}} which matches the specified selector string relative to the element.</dd>
+ <dt>{{DOMxRef("Element.querySelectorAll()")}}</dt>
+ <dd>Returns a {{DOMxRef("NodeList")}} of nodes which match the specified selector string relative to the element.</dd>
+ <dt>{{DOMxRef("Element.releasePointerCapture()")}}</dt>
+ <dd>Releases (stops) pointer capture that was previously set for a specific {{DOMxRef("PointerEvent","pointer event")}}.</dd>
+ <dt>{{DOMxRef("ChildNode.remove()")}} {{Experimental_Inline}}</dt>
+ <dd>Removes the element from the children list of its parent.</dd>
+ <dt>{{DOMxRef("Element.removeAttribute()")}}</dt>
+ <dd>Removes the named attribute from the current node.</dd>
+ <dt>{{DOMxRef("Element.removeAttributeNS()")}}</dt>
+ <dd>Removes the attribute with the specified name and namespace, from the current node.</dd>
+ <dt>{{DOMxRef("Element.removeAttributeNode()")}} {{Obsolete_Inline}}</dt>
+ <dd>Removes the node representation of the named attribute from the current node.</dd>
+ <dt>{{DOMxRef("EventTarget.removeEventListener()")}}</dt>
+ <dd>Removes an event listener from the element.</dd>
+ <dt>{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}</dt>
+ <dd>Asynchronously asks the browser to make the element full-screen.</dd>
+ <dt>{{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}</dt>
+ <dd>Allows to asynchronously ask for the pointer to be locked on the given element.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Element.scroll()")}}</dt>
+ <dd>Scrolls to a particular set of coordinates inside a given element.</dd>
+ <dt>{{domxref("Element.scrollBy()")}}</dt>
+ <dd>Scrolls an element by the given amount.</dd>
+ <dt>{{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}}</dt>
+ <dd>Scrolls the page until the element gets into the view.</dd>
+ <dt>{{domxref("Element.scrollTo()")}}</dt>
+ <dd>Scrolls to a particular set of coordinates inside a given element.</dd>
+ <dt>{{DOMxRef("Element.setAttribute()")}}</dt>
+ <dd>Sets the value of a named attribute of the current node.</dd>
+ <dt>{{DOMxRef("Element.setAttributeNS()")}}</dt>
+ <dd>Sets the value of the attribute with the specified name and namespace, from the current node.</dd>
+ <dt>{{DOMxRef("Element.setAttributeNode()")}} {{Obsolete_Inline}}</dt>
+ <dd>Sets the node representation of the named attribute from the current node.</dd>
+ <dt>{{DOMxRef("Element.setAttributeNodeNS()")}} {{Obsolete_Inline}}</dt>
+ <dd>Sets the node representation of the attribute with the specified name and namespace, from the current node.</dd>
+ <dt>{{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}</dt>
+ <dd>Sets up mouse event capture, redirecting all mouse events to this element.</dd>
+ <dt>{{DOMxRef("Element.setPointerCapture()")}}</dt>
+ <dd>Designates a specific element as the capture target of future <a href="/en-US/docs/Web/API/Pointer_events">pointer events</a>.</dd>
+ <dt>{{DOMxRef("Element.toggleAttribute()")}}</dt>
+ <dd>Toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<p>Listen to these events using <code>addEventListener()</code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p>
+
+<dl>
+ <dt>{{domxref("Element/cancel_event", "cancel")}}</dt>
+ <dd>Fires on a {{HTMLElement("dialog")}} when the user instructs the browser that they wish to dismiss the current open dialog. For example, the browser might fire this event when the user presses the <kbd>Esc</kbd> key or clicks a "Close dialog" button which is part of the browser's UI.<br>
+ Also available via the {{domxref("GlobalEventHandlers/oncancel", "oncancel")}} property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/Element/error_event">error</a></code></dt>
+ <dd>Fired when when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onerror", "onerror")}} property.</dd>
+ <dt>{{domxref("Element/scroll_event", "scroll")}}</dt>
+ <dd>Fired when the document view or an element has been scrolled.<br>
+ Also available via the {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} property.</dd>
+ <dt>{{domxref("Element/select_event", "select")}}</dt>
+ <dd>Fired when some text has been selected.<br>
+ Also available via the {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}} property.</dd>
+ <dt>{{domxref("Element/show_event", "show")}}</dt>
+ <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/Mozilla_event_reference/contextmenu" title="/en-US/docs/Mozilla_event_reference/contextmenu">contextmenu</a> event was fired on/bubbled to an element that has a <a href="https://developer.mozilla.org/en-US/DOM/element.contextmenu" title="/en-US/docs/Mozilla_event_reference/contextmenu">contextmenu</a> attribute. {{deprecated_inline}}<br>
+ Also available via the {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}} property.</dd>
+ <dt>{{domxref("Element/wheel_event","wheel")}}</dt>
+ <dd>Fired when the user rotates a wheel button on a pointing device (typically a mouse).<br>
+ Also available via the {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}} property.</dd>
+</dl>
+
+<h3 id="Clipboard_events">Clipboard events</h3>
+
+<dl>
+ <dt>{{domxref("Element/copy_event", "copy")}}</dt>
+ <dd>Fired when the user initiates a copy action through the browser's user interface.<br>
+ Also available via the {{domxref("HTMLElement/oncopy", "oncopy")}} property.</dd>
+ <dt>{{domxref("Element/cut_event", "cut")}}</dt>
+ <dd>Fired when the user initiates a cut action through the browser's user interface.<br>
+ Also available via the {{domxref("HTMLElement/oncut", "oncut")}} property.</dd>
+ <dt>{{domxref("Element/paste_event", "paste")}}</dt>
+ <dd>Fired when the user initiates a paste action through the browser's user interface.<br>
+ Also available via the {{domxref("HTMLElement/onpaste", "onpaste")}} property.</dd>
+</dl>
+
+<h3 id="Composition_events">Composition events</h3>
+
+<dl>
+ <dt>{{domxref("Element/compositionend_event", "compositionend")}}</dt>
+ <dd>Fired when a text composition system such as an {{glossary("input method editor")}} completes or cancels the current composition session.</dd>
+ <dt>{{domxref("Element/compositionstart_event", "compositionstart")}}</dt>
+ <dd>Fired when a text composition system such as an {{glossary("input method editor")}} starts a new composition session.</dd>
+ <dt>{{domxref("Element/compositionupdate_event", "compositionupdate")}}</dt>
+ <dd>Fired when a new character is received in the context of a text composition session controlled by a text composition system such as an {{glossary("input method editor")}}.</dd>
+</dl>
+
+<h3 id="Focus_events">Focus events</h3>
+
+<dl>
+ <dt>{{domxref("Element/blur_event", "blur")}}</dt>
+ <dd>Fired when an element has lost focus.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onblur", "onblur")}} property.</dd>
+ <dt>{{domxref("Element/focus_event", "focus")}}</dt>
+ <dd>Fired when an element has gained focus.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} property</dd>
+ <dt>{{domxref("Element/focusin_event", "focusin")}}</dt>
+ <dd>Fired when an element is about to gain focus.</dd>
+ <dt>{{domxref("Element/focusout_event", "focusout")}}</dt>
+ <dd>Fired when an element is about to lose focus.</dd>
+</dl>
+
+<h3 id="Fullscreen_events">Fullscreen events</h3>
+
+<dl>
+ <dt><code>{{domxref("Element/fullscreenchange_event", "fullscreenchange")}}</code></dt>
+ <dd>Sent to an {{domxref("Element")}} when it transitions into or out of <a href="/en-US/docs/Web/API/Fullscreen_API/Guide">full-screen</a> mode.<br>
+ Also available via the {{domxref("Element.onfullscreenchange", "onfullscreenchange")}}  property.</dd>
+ <dt><code>{{domxref("Element/fullscreenerror_event", "fullscreenerror")}}</code></dt>
+ <dd>Sent to an <code>Element</code> if an error occurs while attempting to switch it into or out of <a href="/en-US/docs/Web/API/Fullscreen_API/Guide">full-screen</a> mode.<br>
+ Also available via the {{domxref("Element.onfullscreenerror", "onfullscreenerror")}} property.</dd>
+</dl>
+
+<h3 id="Keyboard_events">Keyboard events</h3>
+
+<dl>
+ <dt><code>{{domxref("Element/keydown_event", "keydown")}}</code></dt>
+ <dd>Fired when a key is pressed.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onkeydown", "onkeydown")}} property.</dd>
+ <dt><code>{{domxref("Element/keypress_event", "keypress")}}</code></dt>
+ <dd>Fired when a key that produces a character value is pressed down. {{deprecated_inline}}<br>
+ Also available via the {{domxref("GlobalEventHandlers/onkeypress", "onkeypress")}} property.</dd>
+ <dt><code>{{domxref("Element/keyup_event", "keyup")}}</code></dt>
+ <dd>Fired when a key is released.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onkeyup", "onkeyup")}} property.</dd>
+</dl>
+
+<h3 id="Mouse_events">Mouse events</h3>
+
+<dl>
+ <dt>{{domxref("Element/auxclick_event", "auxclick")}}</dt>
+ <dd>Fired when a non-primary pointing device button (e.g., any mouse button other than the left button) has been pressed and released on an element.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}} property.</dd>
+ <dt>{{domxref("Element/click_event", "click")}}</dt>
+ <dd>Fired when a pointing device button (e.g., a mouse's primary button) is pressed and released on a single element.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onclick", "onclick")}} property.</dd>
+ <dt>{{domxref("Element/contextmenu_event", "contextmenu")}}</dt>
+ <dd>Fired when the user attempts to open a context menu.<br>
+ Also available via the {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}} property.</dd>
+ <dt>{{domxref("Element/dblclick_event", "dblclick")}}</dt>
+ <dd>Fired when a pointing device button (e.g., a mouse's primary button) is clicked twice on a single element.<br>
+ Also available via the {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}} property.</dd>
+ <dt>{{domxref("Element/DOMActivate_event", "DOMActivate")}} {{Deprecated_Inline}}</dt>
+ <dd>Occurs when an element is activated, for instance, through a mouse click or a keypress.</dd>
+ <dt>{{domxref("Element/mousedown_event", "mousedown")}}</dt>
+ <dd>Fired when a pointing device button is pressed on an element.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}} property.</dd>
+ <dt>{{domxref("Element/mouseenter_event", "mouseenter")}}</dt>
+ <dd>Fired when a pointing device (usually a mouse) is moved over the element that has the listener attached.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}} property.</dd>
+ <dt>{{domxref("Element/mouseleave_event", "mouseleave")}}</dt>
+ <dd>Fired when the pointer of a pointing device (usually a mouse) is moved out of an element that has the listener attached to it.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}} property.</dd>
+ <dt>{{domxref("Element/mousemove_event", "mousemove")}}</dt>
+ <dd>Fired when a pointing device (usually a mouse) is moved while over an element.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}} property.</dd>
+ <dt>{{domxref("Element/mouseout_event", "mouseout")}}</dt>
+ <dd>Fired when a pointing device (usually a mouse) is moved off the element to which the listener is attached or off one of its children.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}} property.</dd>
+ <dt>{{domxref("Element/mouseover_event", "mouseover")}}</dt>
+ <dd>Fired when a pointing device is moved onto the element to which the listener is attached or onto one of its children.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}} property.</dd>
+ <dt>{{domxref("Element/mouseup_event", "mouseup")}}</dt>
+ <dd>Fired when a pointing device button is released on an element.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}} property.</dd>
+ <dt>{{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}</dt>
+ <dd>Fired each time the amount of pressure changes on the trackpadtouchscreen.</dd>
+ <dt>{{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}</dt>
+ <dd>Fired after the mousedown event as soon as sufficient pressure has been applied to qualify as a "force click".</dd>
+ <dt>{{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}</dt>
+ <dd>Fired before the {{domxref("Element/mousedown_event", "mousedown")}} event.</dd>
+ <dt>{{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}</dt>
+ <dd>Fired after the {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} event as soon as the pressure has been reduced sufficiently to end the "force click".</dd>
+</dl>
+
+<h3 id="Touch_events">Touch events</h3>
+
+<dl>
+ <dt>{{domxref("Element/touchcancel_event", "touchcancel")}}</dt>
+ <dd>Fired when one or more touch points have been disrupted in an implementation-specific manner (for example, too many touch points are created).<br>
+ Also available via the {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} property.</dd>
+ <dt>{{domxref("Element/touchend_event", "touchend")}}</dt>
+ <dd>Fired when one or more touch points are removed from the touch surface.<br>
+ Also available via the {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}} property</dd>
+ <dt>{{domxref("Element/touchmove_event", "touchmove")}}</dt>
+ <dd>Fired when one or more touch points are moved along the touch surface.<br>
+ Also available via the {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}} property</dd>
+ <dt>{{domxref("Element/touchstart_event", "touchstart")}}</dt>
+ <dd>Fired when one or more touch points are placed on the touch surface.<br>
+ Also available via the {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}} property</dd>
+</dl>
+
+<dl>
+ <dt></dt>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Pseudo-Elements", '#window-interface', 'Element')}}</td>
+   <td>{{Spec2("CSS4 Pseudo-Elements")}}</td>
+   <td>Added the <code>pseudo()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web Animations", '', '')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td>Added the <code>getAnimations()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Undo Manager', '', 'Element')}}</td>
+   <td>{{Spec2('Undo Manager')}}</td>
+   <td>Added the <code>undoScope</code> and <code>undoManager</code> properties.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Events 2')}}</td>
+   <td>Added the following event handlers: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br>
+    Added the following methods: <code>setPointerCapture()</code> and <code>releasePointerCapture()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Added the following event handlers: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br>
+    Added the following methods: <code>setPointerCapture()</code> and <code>releasePointerCapture()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>Added the following methods: <code>querySelector()</code> and <code>querySelectorAll()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Added the <code>requestPointerLock()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Added the <code>requestFullscreen()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Added the following properties: <code>innerHTML</code>, and <code>outerHTML</code>.<br>
+    Added the following method: <code>insertAdjacentHTML()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Added the following properties: <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code>, and <code>clientHeight</code>.<br>
+    Added the following methods: <code>getClientRects()</code>, <code>getBoundingClientRect()</code>, <code>scroll()</code>, <code>scrollBy()</code>, <code>scrollTo()</code> and <code>scrollIntoView()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added inheritance of the {{DOMxRef("ElementTraversal")}} interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Added the following methods: <code>closest()</code>, <code>insertAdjacentElement()</code> and <code>insertAdjacentText()</code>.<br>
+    Moved <code>hasAttributes()</code> from the <code>Node</code> interface to this one.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#interface-element", "Element")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Removed the following methods: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>.<br>
+    Modified the return value of <code>getElementsByTagName()</code> and <code>getElementsByTagNameNS()</code>.<br>
+    Removed the <code>schemaTypeInfo</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Added the following methods: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>. These methods were never implemented and have been removed in later specifications.<br>
+    Added the <code>schemaTypeInfo</code> property. This property was never implemented and has been removed in later specifications.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>The <code>normalize()</code> method has been moved to {{DOMxRef("Node")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Element")}}</p>
diff --git a/files/uk/web/api/globaleventhandlers/index.html b/files/uk/web/api/globaleventhandlers/index.html
new file mode 100644
index 0000000000..982d3d2ca3
--- /dev/null
+++ b/files/uk/web/api/globaleventhandlers/index.html
@@ -0,0 +1,273 @@
+---
+title: GlobalEventHandlers
+slug: Web/API/GlobalEventHandlers
+tags:
+  - API
+  - GlobalEventHandlers
+  - HTML DOM
+  - Mixin
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - events
+translation_of: Web/API/GlobalEventHandlers
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">The <strong><code>GlobalEventHandlers</code></strong> mixin describes the event handlers common to several interfaces like {{domxref("HTMLElement")}}, {{domxref("Document")}}, or {{domxref("Window")}}.</span> Each of these interfaces can, of course, add more event handlers in addition to the ones listed below.</p>
+
+<div class="note">
+<p><strong>Note</strong>: <code>GlobalEventHandlers</code> is a mixin and not an interface; you can't actually create an object of type <code>GlobalEventHandlers</code>.</p>
+</div>
+
+<h2 id="Properties_2">Properties</h2>
+
+<p><em>This interface doesn't include any properties except for the event handlers listed below.</em></p>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<p>These event handlers are defined on the {{domxref("GlobalEventHandlers")}} mixin, and implemented by {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}, as well as by {{domxref("WorkerGlobalScope")}} for Web Workers.</p>
+
+<div id="Properties">
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{domxref("HTMLMediaElement/abort_event", "abort")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when an {{event("animationcancel")}} event is sent, indicating that a running <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS animation</a> has been canceled.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when an {{event("animationend")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS animation</a> has stopped playing.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onanimationiteration")}} {{Non-standard_inline}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when an {{event("animationiteration")}} event has been sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS animation</a> has begun playing a new iteration of the animation sequence.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onanimationstart")}} {{Non-standard_inline}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when an {{event("animationstart")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS animation</a> has started playing.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onauxclick")}} {{Non-standard_inline}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when an {{event("auxclick")}} event is sent, indicating that a non-primary button has been pressed on an input device (e.g. a middle mouse button).</dd>
+ <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("blur")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
+ <dd>Is an {{domxref("OnErrorEventHandler")}} representing the code to be called when the {{event("error")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("focus")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncancel")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cancel")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncanplay")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplay")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncanplaythrough")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplaythrough")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("change")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("click")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("close")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("contextmenu")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncuechange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cuechange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dblclick")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondrag")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drag")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragend")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragend")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragenter")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragenter")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragexit")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragexit")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragleave")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragleave")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragover")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragover")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragstart")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragstart")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondrop")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drop")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondurationchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("durationchange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onemptied")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("emptied")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onended")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ended")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onformdata")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} for processing {{event("formdata")}} events, fired after the entry list representing the form's data is constructed.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ongotpointercapture")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("gotpointercapture")}} event type is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("input")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oninvalid")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("invalid")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keydown")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keypress")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keyup")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onload")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("load")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadeddata")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadeddata")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadedmetadata")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadedmetadata")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadend")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadend")}} event is raised (when progress has stopped on the loading of a resource.)</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadstart")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadstart")}} event is raised (when progress has begun on the loading of a resource.)</dd>
+ <dt>{{domxref("GlobalEventHandlers.onlostpointercapture")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("lostpointercapture")}} event type is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousedown")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseenter")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseenter")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseleave")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseleave")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousemove")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseout")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseover")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseup")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousewheel")}} {{Non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousewheel")}} event is raised. Deprecated. Use <code>onwheel</code> instead.</dd>
+ <dt>{{ domxref("GlobalEventHandlers.onwheel") }}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("wheel")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpause")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pause")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onplay")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("play")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onplaying")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("playing")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerdown")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerdown")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointermove")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointermove")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerup")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerup")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointercancel")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointercancel")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerover")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerover")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerout")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerout")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerenter")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerenter")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerleave")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerleave")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockchange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockerror")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onprogress")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("progress")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onratechange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ratechange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("reset")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("resize")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("scroll")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onseeked")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeked")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onseeking")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeking")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("select")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselectstart")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised, i.e. when the user starts to make a new text selection on a web page.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised, i.e. when the text selected on a web page changes.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onshow")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("show")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("sort")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onstalled")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("stalled")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("submit")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsuspend")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("suspend")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontimeupdate")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("timeupdate")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onvolumechange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("volumechange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchcancel")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchcancel")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchend")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchend")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchmove")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchmove")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchstart")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchstart")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontransitioncancel")}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when a {{event("transitioncancel")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> has been cancelled.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontransitionend")}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when a {{event("transitionend")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> has finished playing.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontransitionrun")}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when a {{event("transitionrun")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> is running, though not nessarilty started.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontransitionstart")}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when a {{event("transitionstart")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> has started transitioning.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onwaiting")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("waiting")}} event is raised.</dd>
+</dl>
+</div>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface defines no methods.</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Selection API",'', 'Extension to GlobalEventHandlers')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Adds <code>onselectionchange.</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Adds <code>onpointerlockchange</code> and <code>onpointerlockerror</code> on {{domxref("Document")}}. It is experimentally implemented on <code>GlobalEventHandlers</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Added <code>onsort</code> since the {{SpecName("HTML5 W3C")}} snapshot.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>GlobalEventHandlers</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.GlobalEventHandlers")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Element")}}</li>
+ <li>{{domxref("EventHandler")}}</li>
+ <li>{{domxref("Event")}}</li>
+</ul>
diff --git a/files/uk/web/api/globaleventhandlers/onkeydown/index.html b/files/uk/web/api/globaleventhandlers/onkeydown/index.html
new file mode 100644
index 0000000000..535fd8b0a0
--- /dev/null
+++ b/files/uk/web/api/globaleventhandlers/onkeydown/index.html
@@ -0,0 +1,93 @@
+---
+title: GlobalEventHandlers.onkeydown
+slug: Web/API/GlobalEventHandlers/onkeydown
+tags:
+  - HTML DOM
+  - Обробник подій
+  - клавіатура
+  - події клавіатури
+translation_of: Web/API/GlobalEventHandlers/onkeydown
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>Властивість <code><strong>onkeydown</strong></code> спільно з <a href="https://wiki.developer.mozilla.org/uk/docs/Web/API/GlobalEventHandlers"><code>GlobalEventHandlers</code></a> є <a href="https://wiki.developer.mozilla.org/uk/docs/Web/API/EventHandler" rel="nofollow"><code>EventHandler</code></a> обробляє події {{event("keydown")}}.</p>
+
+<p>Подія <code>keydown</code> спрацьовує, коли користувач натискає клавішу клавіатури.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>target</em>.onkeydown = <em>functionRef</em>;</pre>
+
+<h3 id="Значення">Значення</h3>
+
+<p><code>functionRef</code> це ім'я функції або вираз функції. В якості єдиного аргументу функція отримує об'єкт {{domxref("KeyboardEvent")}}.</p>
+
+<h2 id="Приклад">Приклад</h2>
+
+<p>У цьому прикладі виводитимуться значення {{domxref("KeyboardEvent.code")}} щоразу, коли ви натискаете клавішу всередині елемента  {{HtmlElement("input")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.onkeydown = logKey;
+
+function logKey(e) {
+  log.textContent += ` ${e.code}`;
+}</pre>
+
+<h3 id="Підсумок">Підсумок</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onkeydown','onkeydown')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами </h2>
+
+
+
+<p>{{Compat("api.GlobalEventHandlers.onkeydown")}}</p>
+
+<h3 id="Нотатки_щодо_сумісності">Нотатки щодо сумісності</h3>
+
+<p>Так якб Firefox 65 події клавіатури і ключа тепер запускаються під час складання IME, для поліпшення крос-браузерної сумісності для користувачів CJKT (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=354358" rel="noopener">bug 354358</a>, також більш детальну інформацію дивіться <a href="https://www.fxsitecompat.com/en-CA/docs/2018/keydown-and-keyup-events-are-now-fired-during-ime-composition/" rel="noopener">keydown and keyup події наразі запускаються під час складання IME</a>. Щоб проігнорувати всі події <code>keyup</code> , зробіть щось на зразок цього (229 це спеціальний набір значень для <code>keyCode</code> що відноситься до читу, який був використаний IME):</p>
+
+<pre class="brush: js"><code>eventTarget.addEventListener("keydown", event =&gt; {
+  if (event.isComposing || event.keyCode === 229) {
+    return;
+  }
+  // зробити що-небудь    });</code>
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Подія {{Event("keydown")}} </li>
+ <li>Пов'язані обробники подій
+  <ul>
+   <li>{{domxref("GlobalEventHandlers.onkeypress")}}</li>
+   <li>{{domxref("GlobalEventHandlers.onkeyup")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/uk/web/api/globaleventhandlers/onkeyup/index.html b/files/uk/web/api/globaleventhandlers/onkeyup/index.html
new file mode 100644
index 0000000000..d429593327
--- /dev/null
+++ b/files/uk/web/api/globaleventhandlers/onkeyup/index.html
@@ -0,0 +1,95 @@
+---
+title: GlobalEventHandlers.onkeyup
+slug: Web/API/GlobalEventHandlers/onkeyup
+tags:
+  - HTML DOM
+  - Обробник подій
+  - клавіатура
+  - події клавіатури
+translation_of: Web/API/GlobalEventHandlers/onkeyup
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<div></div>
+
+<p>Властивість <code><strong>onkeyup</strong></code> спільно з {{domxref("GlobalEventHandlers")}} є {{domxref("EventHandler")}} обробляє події  {{event("keyup")}} .</p>
+
+<p>Подія <code>keyup</code> спрацьовує, коли користувач відпускає раніше натиснуту клавішу клавіатури.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>target</em>.onkeyup = <em>functionRef</em>;</pre>
+
+<h3 id="Значення">Значення</h3>
+
+<p><code>functionRef </code>це ім'я функції або вираз функції. В якості єдиного аргументу функція отримує об'єкт {{domxref("KeyboardEvent")}}.</p>
+
+<h2 id="Приклад">Приклад</h2>
+
+<p>У цьому прикладі виводитимуться значення {{domxref ("KeyboardEvent.code")}} щоразу, коли ви відпускаєте клавішу всередині елемента {{HtmlElement ("input")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.onkeyup = logKey; //
+
+function logKey(e) {
+  log.textContent += ` ${e.code}`; //Видає у тегу &lt;p&gt; ключ натиснутої клавіші
+}</pre>
+
+<h3 id="Підсумок">Підсумок</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onkeyup','onkeyup')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+
+
+<p>{{Compat("api.GlobalEventHandlers.onkeyup")}}</p>
+
+<h3 id="Нотатки_щодо_сумісності">Нотатки щодо сумісності</h3>
+
+<p>Так як Firefox 65, події клавіатури і ключа тепер запускаються під час складання IME, для поліпшення крос-браузерної сумісності для користувачів CJKT ({{bug (354358)}}, також більш детальну інформацію дивіться <a href="https://www.fxsitecompat.com/en-CA/docs/2018/keydown-and-keyup-events-are-now-fired-during-ime-composition/">keydown and keyup події наразі запускаються під час складання IME</a>. Щоб проігнорувати всі події <code>keyup</code> , зробіть щось на зразок цього (229 це спеціальний набір значень для <code>keyCode</code> що відноситься до читу, який був використаний IME):</p>
+
+<pre class="brush: js"><code>eventTarget.addEventListener("keyup", event =&gt; {
+  if (event.isComposing || event.keyCode === 229) {
+    return;
+  }
+  // зробити що-небудь
+});</code></pre>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>Подія {{Event("keyup")}} </li>
+ <li>Пов'язані обробники подій
+  <ul>
+   <li>{{domxref("GlobalEventHandlers.onkeydown")}}</li>
+   <li>{{domxref("GlobalEventHandlers.onkeypress")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/uk/web/api/globaleventhandlers/onmouseover/index.html b/files/uk/web/api/globaleventhandlers/onmouseover/index.html
new file mode 100644
index 0000000000..b3d98e075e
--- /dev/null
+++ b/files/uk/web/api/globaleventhandlers/onmouseover/index.html
@@ -0,0 +1,71 @@
+---
+title: Обробник_глобальних_подій.onmouseover
+slug: Web/API/GlobalEventHandlers/onmouseover
+tags:
+  - Event Handler
+  - onmouseover
+  - Обробник глобальних подій
+  - Подія мищі
+translation_of: Web/API/GlobalEventHandlers/onmouseover
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>Властивістю <code><strong>onmouseover</strong></code> мікшіна {{domxref("GlobalEventHandlers")}} є {{domxref("EventHandler")}} , який обробляє події наведення миші {{event("mouseover")}}.</p>
+
+<p>Подія <code>mouseover</code> запускається, коли користувач переміщує курсор на певний елемент. </p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>element</em>.onmouseover = <em>function</em>;
+</pre>
+
+<h2 class="editable" id="Приклад"><span>Приклад</span></h2>
+
+<p><span><span>Цей приклад додає <code>onmouseover</code> та <code>onmouseout</code> подіі до параграфу. Спробуйте перемістити мишу до елементу.</span></span></p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Test your mouse on me!&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const p = document.querySelector('p');
+p.onmouseover = logMouseOver;
+p.onmouseout = logMouseOut;
+
+function logMouseOver() {
+  p.innerHTML = 'Виявлено MOUSE OVER';
+}
+
+function logMouseOut() {
+  p.innerHTML = 'Виявлено MOUSE OUT';
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onmouseover','onmouseover')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("api.GlobalEventHandlers.onmouseover")}}</p>
+</div>
diff --git a/files/uk/web/api/headers/index.html b/files/uk/web/api/headers/index.html
new file mode 100644
index 0000000000..529712ef22
--- /dev/null
+++ b/files/uk/web/api/headers/index.html
@@ -0,0 +1,133 @@
+---
+title: Заголовки
+slug: Web/API/Headers
+tags:
+  - API
+  - Fetch
+  - Fetch API
+  - Headers
+  - Інтерфейс
+  - Заголовки
+translation_of: Web/API/Headers
+---
+<div>{{ APIRef("Fetch") }}</div>
+
+<p>Інтерфейс <strong><code>Headers</code></strong>  <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> дозволяє вам виконувати різні дії з  HTTP запитами і заголовками відповідей. Ці дії включають отримання налаштування, додавання і видалення . Об'єкт <code>Headers</code> має асоціативний список заголовків, який по замовчуванню пустий і містить ноль чи більше пар імен і значень. Ви можете додавати то цього списку, використовуючи метод типу<span style="line-height: 19.0909080505371px;"> {{domxref("Headers.append","append()")}}. У всіх методах цього інтерфейсу імена заголовків знаходяться по  не чутливим до реєсту запитам </span>. </p>
+
+<p>З метою безпеки деякі заголовки можуть контролюватись тільки за допомогою user agent. Ці заголовки включають: {{Glossary("Forbidden_header_name", "forbidden header names", 1)}}  і {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.</p>
+
+<p>Об'єкт заголовку також має associated guard, що приймає значення: <code>immutable</code>, <code>request</code>, <code>request-no-cors</code>, <code>response</code> чи <code>none</code>. Це впливає на те чи меоди: {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, і {{domxref("Headers.append","append()")}} змінюватимуть заголовок. Для більшої інформації дивіться {{Glossary("Guard")}}.</p>
+
+<p>Ви можете отримати об'єкт <code>Headers</code>  через властивості {{domxref("Request.headers")}} і{{domxref("Response.headers")}}, і створити новий об'єкт  <code>Headers</code>, використовуючи конструктор {{domxref("Headers.Headers()")}}.</p>
+
+<p>Об'єкт, що імплементує <code>Headers</code> може напряму використовуватись в структурі {{jsxref("Statements/for...of", "for...of")}} замість{{domxref('Headers.entries()', 'entries()')}}: <code>for (var p of myHeaders)</code>тотожний <code>for (var p of myHeaders.entries())</code>.</p>
+
+<div class="note">
+<p><strong>Нотатка</strong>: Ви можете знайти більше про доступні заголовки прочитавши довідку по <a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a>.</p>
+</div>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("Headers.Headers()")}}</dt>
+ <dd>Створює новий об'єкт заголовку <code>Headers</code>.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<dl>
+ <dt>{{domxref("Headers.append()")}}</dt>
+ <dd>Додає нове значення до існуючого заголовка в об'єкті <code>Headers</code>, або додає заголовок якщо той не існує.</dd>
+ <dt>{{domxref("Headers.delete()")}}</dt>
+ <dd>Видаляє заголовок з об'єкта <code>Headers</code>.</dd>
+ <dt>{{domxref("Headers.entries()")}}</dt>
+ <dd>Повертає {{jsxref("Iteration_protocols","iterator")}}, дозволяючи проводити через всі пари ключ/значення, що знаходяться в об'єкті.</dd>
+ <dt>{{domxref("Headers.forEach()")}}</dt>
+ <dd>Виконує вказану функцію для кожного елементу масива.</dd>
+ <dt>{{domxref("Headers.get()")}}</dt>
+ <dd>Повертає {{domxref("ByteString")}} послідовність всіх значеннях заголовків об'єкта <code>Headers</code> з заданим іменем.</dd>
+ <dt>{{domxref("Headers.has()")}}</dt>
+ <dd>Повертає логічне значення чи має обєкт <code>Headers</code> певний заголовок</dd>
+ <dt>{{domxref("Headers.keys()")}}</dt>
+ <dd>Повертає {{jsxref("Iteration_protocols", "iterator")}}, що дозволяє вам пройтись по всім ключам пар ключ/значення, що містяться в об'єкті.</dd>
+ <dt>{{domxref("Headers.set()")}}</dt>
+ <dd>Задає нове значення існуючого заголовку всередині об'єкта <code>Headers</code>, або додає заголовок, якщо той не існує.</dd>
+ <dt>{{domxref("Headers.values()")}}</dt>
+ <dd>Повертає {{jsxref("Iteration_protocols", "iterator")}}, що дозволяє вам проходитись по всім значенням пар ключ/значення, які містяться в цьому об'єкті.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Нотатка</strong>:  Різниця між {{domxref("Headers.set()")}} і {{domxref("Headers.append()")}} в тому, що якщо вказаний заголовок уже існує і допускає багато значень, {{domxref("Headers.set()")}} перезаписуватиме існуючі значення новим., тоді як {{domxref("Headers.append()")}} буде додавати нове значення в кінець набору значень. Дивіться їх сторінки для прикладу кода.</p>
+</div>
+
+<div class="note">
+<p><strong>Нотатка</strong>: Всі методи Headers видаватимуть помилку <code>TypeError</code> якщо ви спробуєте передати не <a href="https://fetch.spec.whatwg.org/#concept-header-name">Валідне ім'я заголовку</a>. Операції зміни заголовку видаватимуть <code>TypeError,</code> якщо заголовок  незмінний {{Glossary("Guard")}}. У разі інших невдач, вийняток не виникатиме.</p>
+</div>
+
+<div class="note">
+<p><strong>Нотатка</strong>: Коли значення Header повторюються вони автоматично сортуються в лексикографічному порядку і значення дубльованих заголовків комбінуються.</p>
+</div>
+
+<h3 id="Застарілі_методи">Застарілі методи</h3>
+
+<dl>
+ <dt>{{domxref("Headers.getAll()")}}</dt>
+ <dd>Використовується для повернення масиву всіх значень заголовка з заданим іменем в об'єкті <code>Headers</code> ; цей метод - видалений із специфікації і натомість тепер {{domxref("Headers.get()")}} повертає всі значення замість одного.</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>В наступномуIn the following фрагменті ми створили новий заголовок, використавши конструктор <code>Headers()</code> constructor, додали новий заголовок за допомогою <code>append()</code>, потім повернули значення цього заголовку, використовуючи <code>get()</code>:</p>
+
+<pre class="brush: js">var myHeaders = new Headers();
+
+myHeaders.append('Content-Type', 'text/xml');
+myHeaders.get('Content-Type') // should return 'text/xml'
+</pre>
+
+<p>Те ж можна досягнути передаванням масиву масивів чи літералу об'єкта до конструктора:</p>
+
+<pre class="brush: js">var myHeaders = new Headers({
+    'Content-Type': 'text/xml'
+});
+
+// or, using an array of arrays:
+myHeaders = new Headers([
+    ['Content-Type', 'text/xml']
+]);
+
+myHeaders.get('Content-Type') // should return 'text/xml'
+</pre>
+
+<h2 id="Специфікація">Специфікація</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#headers-class','Headers')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_браузерів">Підтримка браузерів</h2>
+
+<div class="hidden">Таблиця підтримки на цій сторінці згенерована з структурованих даних будь ласка прогляньте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і надішлінть нам pull request.</div>
+
+<p>{{Compat("api.Headers")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP контроль доступу (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/uk/web/api/history_api/index.html b/files/uk/web/api/history_api/index.html
new file mode 100644
index 0000000000..47dc8cad03
--- /dev/null
+++ b/files/uk/web/api/history_api/index.html
@@ -0,0 +1,122 @@
+---
+title: History API
+slug: Web/API/History_API
+translation_of: Web/API/History_API
+---
+<div>{{DefaultAPISidebar("History API")}}</div>
+
+<p>Об'єкт DOM {{DOMxRef("Window")}} надає доступ до сеансу історії браузера через об'єкт {{DOMxRef("Window.history","history")}}. Він має корисні методи та властивості, які дозволяють відкривати попередні і наступні сторінки з історії користувача та впливати на вміст стеку історії.</p>
+
+<h2 id="Концепція_та_використання">Концепція та використання</h2>
+
+<p><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>Навігація </span></span></span> по історії користувача здійснюється за допомогою методів {{DOMxRef("History.back","back()")}}, {{DOMxRef("History.forward","forward()")}} та {{DOMxRef("History.go","go()")}}.</p>
+
+<h3 id="Навігація_вперед_і_назад"><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>Навігація вперед і назад</span></span></span></h3>
+
+<p>Щоб відкрити попередню сторінку:</p>
+
+<pre class="brush: js notranslate">window.history.back()
+</pre>
+
+<p>Цей метод діє так само, ніби реальний користувач натиснув кнопку <kbd><strong>Назад</strong></kbd> на панелі інструментів свого браузера.</p>
+
+<p>Подібним чином можна відкрити наступну сторінку (кнопка <kbd><strong>Вперед</strong></kbd> на панелі інструментів):</p>
+
+<pre class="brush: js notranslate">window.history.forward()
+</pre>
+
+<h3 id="Перехід_до_певної_точки_в_історії"><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>Перехід до певної точки в історії</span></span></span></h3>
+
+<p>Щоб завантажити певну сторінку з історії сеансу використовується метод {{DOMxRef("History.go","go()")}}, передаючи як аргумент відносне положення до поточної сторінки (позиція поточної сторінки дорівнює <code>0</code>.)</p>
+
+<p>Щоб повернутися на одну сторінку назад (еквівалент виклику {{DOMxRef("History.back","back()")}}):</p>
+
+<pre class="brush: js notranslate">window.history.go(-1)
+</pre>
+
+<p><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>Перехід на сторінку вперед, подібно до виклику </span></span></span>{{DOMxRef("History.forward","forward()")}}:</p>
+
+<pre class="brush: js notranslate">window.history.go(1)
+</pre>
+
+<p>Подібним чином можна рухатись на 2 сторінки вперед, передаючи як аргумент <code>2</code> тощо.</p>
+
+<p>Ще одне застосування методу <code>go()</code> – оновлення поточної сторінки, використовуючи для цього аргумент <code>0</code>, або викликаючи метод без аргументу:</p>
+
+<pre class="brush: js notranslate">// Наступний код
+// оновить поточну сторінку
+window.history.go(0)
+window.history.go()
+</pre>
+
+<p>Кількість сторінок у стеку історії визначається значенням властивості <code>length</code>:</p>
+
+<pre class="brush: js notranslate">let numberOfEntries = window.history.length
+</pre>
+
+<h2 id="Інтерфейси">Інтерфейси</h2>
+
+<dl>
+ <dt>{{domxref("History")}}</dt>
+ <dd>Дозволяє управляти історією сеансу браузера (відвіданими сторінками у вкладці або фреймі, куди завантажується поточна сторінка).</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>В наступному прикладі призначається обробка подій через властивість <code>onpopstate</code> щоб проілюструвати деякі методи об’єкта історії для додавання, заміни та переміщення в історії браузера в поточній вкладці.</p>
+
+<pre class="brush:js line-numbers language-js notranslate">window.onpopstate = function(event) {
+  console.log(`location: ${document.location}, state: ${JSON.stringify(event.state)}`)
+}
+
+history.pushState({page: 1}, "title 1", "?page=1")
+history.pushState({page: 2}, "title 2", "?page=2")
+history.replaceState({page: 3}, "title 3", "?page=3")
+history.back() // виведе в консоль "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back() // виведе в консоль "location: http://example.com/example.html, state: null"
+history.go(2)  // виведе в консоль "location: http://example.com/example.html?page=3, state: {"page":3}"</pre>
+
+<h2 id="Специфікація">Специфікація</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "browsers.html#history", "History")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "browsers.html#history", "History")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність">Сумісність</h2>
+
+
+
+<p>{{Compat("api.History")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<h3 id="Довідка">Довідка</h3>
+
+<ul>
+ <li>{{ domxref("window.history") }}</li>
+ <li>{{ domxref("window.onpopstate") }}</li>
+</ul>
+
+<h3 id="Посібник">Посібник</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/History_API/Working_with_the_History_API">Working with the History API</a></li>
+</ul>
diff --git a/files/uk/web/api/html_dom_api/index.html b/files/uk/web/api/html_dom_api/index.html
new file mode 100644
index 0000000000..4f94294e96
--- /dev/null
+++ b/files/uk/web/api/html_dom_api/index.html
@@ -0,0 +1,472 @@
+---
+title: The HTML DOM API
+slug: Web/API/HTML_DOM_API
+tags:
+  - API
+  - Beginner
+  - DOM
+  - Documents
+  - Elements
+  - HTML DOM
+  - HTML DOM API
+  - NeedsTranslation
+  - Nodes
+  - Overview
+  - TopicStub
+  - Web
+  - Windows
+  - hierarchy
+translation_of: Web/API/HTML_DOM_API
+---
+<p>{{DefaultAPISidebar("HTML DOM")}}</p>
+
+<p>The <strong>HTML DOM API</strong> is made up of the interfaces that define the functionality of each of the {{Glossary("element", "elements")}} in {{Glossary("HTML")}}, as well as any supporting types and interfaces they rely upon.</p>
+
+<p>The functional areas included in the HTML DOM API include:</p>
+
+<ul>
+	<li>Access to and control of HTML elements via the {{Glossary("DOM")}}.</li>
+	<li>Access to and manipulation of form data.</li>
+	<li>Interacting with the contents of 2D images and the context of an HTML {{HTMLElement("canvas")}}, for example to draw on top of them.</li>
+	<li>Management of media connected to the HTML media elements ({{HTMLElement("audio")}} and {{HTMLElement("video")}}).</li>
+	<li>Dragging and dropping of content on webpages.</li>
+	<li>Access to the browser navigation history</li>
+	<li>Supporting and connective interfaces for other APIs such as <a href="/en-US/docs/Web/Web_Components">Web Components</a>, <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage</a>, <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>, <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket</a>, and <a href="/en-US/docs/Web/API/Server-sent_events">Server-sent events</a>.</li>
+</ul>
+
+<h2 id="HTML_DOM_concepts_and_usage">HTML DOM concepts and usage</h2>
+
+<p>In this article, we'll focus on the parts of the HTML DOM that involve engaging with HTML elements. Discussion of other areas, such as <a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">Drag and Drop</a>, <a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a>, <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage</a>, etc. can be found in the documentation for those APIs.</p>
+
+<h3 id="Structure_of_an_HTML_document">Structure of an HTML document</h3>
+
+<p>The Document Object Model ({{Glossary("DOM")}}) is an architecture that describes the structure of a {{domxref("document")}}; each document is represented by an instance of the interface {{domxref("Document")}}. A document, in turn, consists of a hierarchical tree of <strong>nodes</strong>, in which a node is a fundamental record representing a single object within the document (such as an element or text node).</p>
+
+<p>Nodes may be strictly organizational, providing a means for grouping other nodes together or for providing a point at which a hierarchy can be constructed; other nodes may represent visible components of a document. Each node is based on the {{domxref("Node")}} interface, which provides properties for getting information about the node as well as methods for creating, deleting, and organizing nodes within the DOM.</p>
+
+<p>Nodes don't have any concept of including the content that is actually displayed in the document. They're empty vessels. The fundamental notion of a node that can represent visual content is introduced by the {{domxref("Element")}} interface. An <code>Element</code> object instance represents a single element in a document created using either HTML or an {{glossary("XML")}} vocabulary such as {{glossary("SVG")}}.</p>
+
+<p>For example, consider a document with two elements, one of which has two more elements nested inside it:</p>
+
+<p><img alt="Structure of a document with elements inside a document in a window" src="https://mdn.mozillademos.org/files/16587/dom-structure.svg" style="display: block; height: 379px; margin: 0 auto; width: 291px;"></p>
+
+<p>While the {{domxref("Document")}} interface is defined as part of the <a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a> specification, the HTML specification significantly enhances it to add information specific to using the DOM in the context of a web browser, as well as to using it to represent HTML documents specifically.</p>
+
+<p>Among the things added to <code>Document</code> by the HTML standard are:</p>
+
+<ul>
+	<li>Support for accessing various information provided by the {{Glossary("HTTP")}} headers when loading the page, such as the <a href="/en-US/docs/Web/API/Document/location">location</a> from which the document was loaded, <a href="/en-US/docs/Web/API/Document/cookie">cookies</a>, <a href="/en-US/docs/Web/API/Document/lastModified">modification date</a>, <a href="/en-US/docs/Web/API/Document/referrer">referring site</a>, and so forth.</li>
+	<li>Access to lists of elements in the document's {{HTMLElement("head")}} block and <a href="/en-US/docs/Web/API/Document/body">body</a>, as well as lists of the <a href="/en-US/docs/Web/API/Document/images">images</a>, <a href="/en-US/docs/Web/API/Document/links">links</a>, <a href="/en-US/docs/Web/API/Document/scripts">scripts</a>, etc. contained in the document.</li>
+	<li>Support for interacting with the user by examining <a href="/en-US/docs/Web/API/Document/hasFocus">focus</a> and by executing commands on <a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">editable content</a>.</li>
+	<li>Event handlers for document <a href="/en-US/docs/Web/API/GlobalEventHandlers">events defined by the HTML standard</a> to allow access to <a href="/en-US/docs/Web/API/MouseEvent">mouse</a> and <a href="/en-US/docs/Web/API/KeyboardEvent">keyboard</a> events, <a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">drag and drop</a>, <a href="/en-US/docs/Web/API/HTMLMediaElement">media control</a>, and more.</li>
+	<li>Event handlers for events that can be delivered to both elements and documents; these presently include only <a href="/en-US/docs/Web/API/HTMLElement/oncopy">copy</a>, <a href="/en-US/docs/Web/API/HTMLElement/oncut">cut</a>, and <a href="/en-US/docs/Web/API/HTMLElement/onpaste">paste</a> actions.</li>
+</ul>
+
+<h3 id="HTML_element_interfaces">HTML element interfaces</h3>
+
+<p>The <code>Element</code> interface has been further adapted to represent HTML elements specifically by introducing the {{domxref("HTMLElement")}} interface, which all more specific HTML element classes inherit from. This expands the <code>Element</code> class to add HTML-specific general features to the element nodes. Properties added by <code>HTMLElement</code> include for example {{domxref("HTMLElement.hidden", "hidden")}} and {{domxref("HTMLElement.innerText", "innerText")}}. <code>HTMLElement</code> also adds all the <a href="/en-US/docs/Web/API/GlobalEventHandlers">global event handlers</a>.</p>
+
+<p>An {{Glossary("HTML")}} document is a DOM tree in which each of the nodes is an HTML element, represented by the {{domxref("HTMLElement")}} interface. The <code>HTMLElement</code> class, in turn, implements <code>Node</code>, so every element is also a node (but not the other way around). This way, the structural features implemented by the {{domxref("Node")}} interface are also available to HTML elements, allowing them to be nested within each other, created and deleted, moved around, and so forth.</p>
+
+<p>The <code>HTMLElement</code> interface is generic, however, providing only the functionality common to all HTML elements such as the element's ID, its coordinates, the HTML making up the element, information about scroll position, and so forth.</p>
+
+<p>In order to expand upon the functionality of the core <code>HTMLElement</code> interface to provide the features needed by a specific element, the <code>HTMLElement</code> class is subclassed to add the needed properties and methods. For example, the {{HTMLElement("canvas")}} element is represented by an object of type {{domxref("HTMLCanvasElement")}}. <code>HTMLCanvasElement</code> augments the <code>HTMLElement</code> type by adding properties such as {{domxref("HTMLCanvasElement.height", "height")}} and methods like {{domxref("HTMLCanvasElement.getContext", "getContext()")}} to provide canvas-specific features.</p>
+
+<p>The overall inheritance for HTML element classes looks like this:</p>
+
+<p><img alt="Hierarchy of interfaces for HTML elements" src="https://mdn.mozillademos.org/files/16596/html-dom-hierarchy.svg" style="display: block; height: 565px; margin: 0 auto; width: 661px;"></p>
+
+<p>As such, an element inherits the properties and methods of all of its ancestors. For example, consider a {{HTMLElement("a")}} element, which is represented in the DOM by an object of type {{domxref("HTMLAnchorElement")}}. The element, then, includes the anchor-specific properties and methods described in that class's documentation, but also those defined by {{domxref("HTMLElement")}} and {{domxref("Element")}}, as well as from {{domxref("Node")}} and, finally, {{domxref("EventTarget")}}.</p>
+
+<p>Each level defines a key aspect of the utility of the element. From <code>Node</code>, the element inherits concepts surrounding the ability for the element to be contained by another element, and to contain other elements itself. Of special importance is what is gained by inheriting from <code>EventTarget</code>: the ability to receive and handle events such as mouse clicks, play and pause events, and so forth.</p>
+
+<p>There are elements that share commonalities and thus have an additional intermediary type. For example, the {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements both present audiovisual media. The corresponding types, {{domxref("HTMLAudioElement")}} and {{domxref("HTMLVideoElement")}}, are both based upon the common type {{domxref("HTMLMediaElement")}}, which in turn is based upon {{domxref("HTMLElement")}} and so forth. <code>HTMLMediaElement</code> defines the methods and properties held in common between audio and video elements.</p>
+
+<p>These element-specific interfaces make up the majority of the HTML DOM API, and are the focus of this article. To learn more about the actual structure of the <a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a>, see <a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a>.</p>
+
+<h2 id="HTML_DOM_target_audience">HTML DOM target audience</h2>
+
+<p>The features exposed by the HTML DOM are among the most commonly-used APIs in the web developer's arsenal. All but the most simple web applications will use some features of the HTML DOM.</p>
+
+<h2 id="HTML_DOM_API_interfaces">HTML DOM API interfaces</h2>
+
+<p>The majority of the interfaces that comprise the HTML DOM API map almost one-to-one to individual HTML elements, or to a small group of elements with similar functionality. In addition, the HTML DOM API includes a few interfaces and types to support the HTML element interfaces.</p>
+
+<h3 id="HTML_element_interfaces_2">HTML element interfaces</h3>
+
+<p>These interfaces represent specific HTML elements (or sets of related elements which have the same properties and methods associated with them).</p>
+
+<div class="index">
+<ul>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLAnchorElement"><code>HTMLAnchorElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLAreaElement"><code>HTMLAreaElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLAudioElement"><code>HTMLAudioElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLBRElement"><code>HTMLBRElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLBaseElement"><code>HTMLBaseElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLBaseFontElement"><code>HTMLBaseFontElement</code></a> {{obsolete_inline}}</span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLBodyElement"><code>HTMLBodyElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLButtonElement"><code>HTMLButtonElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLCanvasElement"><code>HTMLCanvasElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLDListElement"><code>HTMLDListElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLDataElement"><code>HTMLDataElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLDataListElement"><code>HTMLDataListElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLDetailsElement"><code>HTMLDetailsElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLDialogElement"><code>HTMLDialogElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLDirectoryElement"><code>HTMLDirectoryElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLDivElement"><code>HTMLDivElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLEmbedElement"><code>HTMLEmbedElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLFieldSetElement"><code>HTMLFieldSetElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLFontElement"><code>HTMLFontElement</code></a> {{obsolete_inline}}</span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLFormElement"><code>HTMLFormElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLFrameElement"><code>HTMLFrameElement</code></a> {{obsolete_inline}}</span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLFrameSetElement"><code>HTMLFrameSetElement</code></a> {{obsolete_inline}}</span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLHRElement"><code>HTMLHRElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLHeadElement"><code>HTMLHeadElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLHeadingElement"><code>HTMLHeadingElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLHtmlElement"><code>HTMLHtmlElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLIFrameElement"><code>HTMLIFrameElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLIsIndexElement"><code>HTMLIsIndexElement</code></a> {{obsolete_inline}}</span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLLIElement"><code>HTMLLIElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLLabelElement"><code>HTMLLabelElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLLegendElement"><code>HTMLLegendElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLLinkElement"><code>HTMLLinkElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLMapElement"><code>HTMLMapElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLMarqueeElement"><code>HTMLMarqueeElement</code></a> {{deprecated_inline}}</span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLMenuElement"><code>HTMLMenuElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLMenuItemElement"><code>HTMLMenuItemElement</code></a> {{obsolete_inline}}</span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLMetaElement"><code>HTMLMetaElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLMeterElement"><code>HTMLMeterElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLModElement"><code>HTMLModElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLOListElement"><code>HTMLOListElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLObjectElement"><code>HTMLObjectElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLOptGroupElement"><code>HTMLOptGroupElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLOptionElement"><code>HTMLOptionElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLOutputElement"><code>HTMLOutputElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLParagraphElement"><code>HTMLParagraphElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLParamElement"><code>HTMLParamElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLPictureElement"><code>HTMLPictureElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLPreElement"><code>HTMLPreElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLProgressElement"><code>HTMLProgressElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLQuoteElement"><code>HTMLQuoteElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLScriptElement"><code>HTMLScriptElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLSelectElement"><code>HTMLSelectElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLSlotElement"><code>HTMLSlotElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLSourceElement"><code>HTMLSourceElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLStyleElement"><code>HTMLStyleElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTableCaptionElement"><code>HTMLTableCaptionElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTableCellElement"><code>HTMLTableCellElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTableColElement"><code>HTMLTableColElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTableElement"><code>HTMLTableElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTableRowElement"><code>HTMLTableRowElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTableSectionElement"><code>HTMLTableSectionElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTemplateElement"><code>HTMLTemplateElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTextAreaElement"><code>HTMLTextAreaElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTimeElement"><code>HTMLTimeElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTitleElement"><code>HTMLTitleElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTrackElement"><code>HTMLTrackElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLUListElement"><code>HTMLUListElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLUnknownElement"><code>HTMLUnknownElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLVideoElement"><code>HTMLVideoElement</code></a></span></span></li>
+</ul>
+</div>
+
+<h3 id="Web_app_and_browser_integration_interfaces">Web app and browser integration interfaces</h3>
+
+<p>These interfaces offer access to the browser window and document that contain the HTML, as well as to the browser's state, available plugins (if any), and various configuration options.</p>
+
+<div class="index">
+<ul>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/ApplicationCache"><code>ApplicationCache</code></a> {{obsolete_inline}}</span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/BarProp"><code>BarProp</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/External"><code>External</code></a> {{deprecated_inline}}</span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/Navigator"><code>Navigator</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/Plugin"><code>Plugin</code></a> {{obsolete_inline}}</span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/PluginArray"><code>PluginArray</code></a> {{obsolete_inline}}</span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><code><a href="/en-US/docs/Web/API/Window">Window</a></code></span></span></li>
+</ul>
+</div>
+
+<h3 id="Form_support_interfaces">Form support interfaces</h3>
+
+<p>These interfaces provide structure and functionality required by the elements used to create and manage forms, including the {{HTMLElement("form")}} and {{HTMLElement("input")}} elements.</p>
+
+<div class="index">
+<ul>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/FormDataEvent"><code>FormDataEvent</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLFormControlsCollection"><code>HTMLFormControlsCollection</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLOptionsCollection"><code>HTMLOptionsCollection</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/RadioNodeList"><code>RadioNodeList</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/ValidityState"><code>ValidityState</code></a></span></span></li>
+</ul>
+</div>
+
+<h3 id="Canvas_and_image_interfaces">Canvas and image interfaces</h3>
+
+<p>These interfaces represent objects used by the Canvas API as well as the {{HTMLElement("img")}} element and {{HTMLElement("picture")}} elements.</p>
+
+<div class="index">
+<ul>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/CanvasGradient"><code>CanvasGradient</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/CanvasPattern"><code>CanvasPattern</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/CanvasRenderingContext2D"><code>CanvasRenderingContext2D</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/ImageBitmap"><code>ImageBitmap</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/ImageBitmapRenderingContext"><code>ImageBitmapRenderingContext</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/ImageData"><code>ImageData</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/OffscreenCanvas"><code>OffscreenCanvas</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/OffscreenCanvasRenderingContext2D"><code>OffscreenCanvasRenderingContext2D</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/Path2D"><code>Path2D</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/TextMetrics"><code>TextMetrics</code></a></span></span></li>
+</ul>
+</div>
+
+<h3 id="Media_interfaces">Media interfaces</h3>
+
+<p>The media interfaces provide HTML access to the contents of the media elements: {{HTMLElement("audio")}} and {{HTMLElement("video")}}.</p>
+
+<div class="index">
+<ul>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/AudioTrack"><code>AudioTrack</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/AudioTrackList"><code>AudioTrackList</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/MediaError"><code>MediaError</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/TextTrack"><code>TextTrack</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/TextTrackCue"><code>TextTrackCue</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/TextTrackCueList"><code>TextTrackCueList</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/TextTrackList"><code>TextTrackList</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/TimeRanges"><code>TimeRanges</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/TrackEvent"><code>TrackEvent</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/VideoTrack"><code>VideoTrack</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/VideoTrackList"><code>VideoTrackList</code></a></span></span></li>
+</ul>
+</div>
+
+<h3 id="Drag_and_drop_interfaces">Drag and drop interfaces</h3>
+
+<p>These interfaces are used by the <a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">HTML Drag and Drop API</a> to represent individual draggable (or dragged) items, groups of dragged or draggable items, and to handle the drag and drop process.</p>
+
+<div class="index">
+<ul>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/DataTransfer"><code>DataTransfer</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/DataTransferItem"><code>DataTransferItem</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/DataTransferItemList"><code>DataTransferItemList</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/DragEvent"><code>DragEvent</code></a></span></span></li>
+</ul>
+</div>
+
+<h3 id="Page_history_interfaces">Page history interfaces</h3>
+
+<p>The History API interfaces let you access information about the browser's history, as well as to shift the browser's current tab forward and backward through that history.</p>
+
+<div class="index">
+<ul>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/BeforeUnloadEvent"><code>BeforeUnloadEvent</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HashChangeEvent"><code>HashChangeEvent</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/History"><code>History</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/Location"><code>Location</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/PageTransitionEvent"><code>PageTransitionEvent</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/PopStateEvent"><code>PopStateEvent</code></a></span></span></li>
+</ul>
+</div>
+
+<h3 id="Web_Components_interfaces">Web Components interfaces</h3>
+
+<p>These interfaces are used by the <a href="/en-US/docs/Web/Web_Components">Web Components API</a> to create and manage the available <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">custom elements</a>.</p>
+
+<div class="index">
+<ul>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/CustomElementRegistry"><code>CustomElementRegistry</code></a></span></span></li>
+</ul>
+</div>
+
+<h3 id="Miscellaneous_and_supporting_interfaces">Miscellaneous and supporting interfaces</h3>
+
+<p>These supporting object types are used in a variety of ways in the HTML DOM API; in addition, {{domxref("PromiseRejectionEvent")}} represents the event delivered when a {{Glossary("JavaScript")}} {{jsxref("Promise")}} is rejected.</p>
+
+<div class="index">
+<ul>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/DOMStringList"><code>DOMStringList</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/DOMStringMap"><code>DOMStringMap</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/ErrorEvent"><code>ErrorEvent</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLAllCollection"><code>HTMLAllCollection</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/MimeType"><code>MimeType</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/MimeTypeArray"><code>MimeTypeArray</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/PromiseRejectionEvent"><code>PromiseRejectionEvent</code></a></span></span></li>
+</ul>
+</div>
+
+<h3 id="Interfaces_belonging_to_other_APIs">Interfaces belonging to other APIs</h3>
+
+<p>There are several interfaces which are technically defined in the HTML specification while actually being part of other APIs.</p>
+
+<h4 id="Web_storage_interfaces">Web storage interfaces</h4>
+
+<p>The <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a> provides the ability for web sites to store data either temporarily or permanently on the user's device for later re-use.</p>
+
+<div class="index">
+<ul>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/Storage"><code>Storage</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/StorageEvent"><code>StorageEvent</code></a></span></span></li>
+</ul>
+</div>
+
+<h4 id="Web_Workers_interfaces">Web Workers interfaces</h4>
+
+<p>These interfaces are used by the <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a> both to establish the ability for workers to interact with an app and its content, but also to support messaging between windows or apps.</p>
+
+<div class="index">
+<ul>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/BroadcastChannel"><code>BroadcastChannel</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/DedicatedWorkerGlobalScope"><code>DedicatedWorkerGlobalScope</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/MessageChannel"><code>MessageChannel</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/MessageEvent"><code>MessageEvent</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/MessagePort"><code>MessagePort</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/SharedWorker"><code>SharedWorker</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/SharedWorkerGlobalScope"><code>SharedWorkerGlobalScope</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/Worker"><code>Worker</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/WorkerGlobalScope"><code>WorkerGlobalScope</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/WorkerLocation"><code>WorkerLocation</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/WorkerNavigator "><code>WorkerNavigator </code></a></span></span></li>
+</ul>
+</div>
+
+<h4 id="WebSocket_interfaces">WebSocket interfaces</h4>
+
+<p>These interfaces, defined by the HTML specification, are used by the <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket API</a>.</p>
+
+<div class="index">
+<ul>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/CloseEvent"><code>CloseEvent</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/WebSocket"><code>WebSocket</code></a></span></span></li>
+</ul>
+</div>
+
+<h4 id="Server-sent_events_interfaces">Server-sent events interfaces</h4>
+
+<p>The {{domxref("EventSource")}} interface represents the source which sent or is sending <a href="/en-US/docs/Web/API/Server-sent_events">server-sent events</a>.</p>
+
+<div class="index">
+<ul>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/EventSource"><code>EventSource</code></a></span></span></li>
+</ul>
+</div>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In this example, an {{HTMLElement("input")}} element's {{domxref("HTMLInputElement.input_event", "input")}} event is monitored in order to update the state of a form's "submit" button based on whether or not a given field currently has a value.</p>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">const nameField = document.getElementById("userName");
+const sendButton = document.getElementById("sendButton")
+
+sendButton.disabled = true;
+// [note: this is disabled since it causes this article to always load with this example focused and scrolled into view]
+//nameField.focus();
+
+nameField.addEventListener("input", event =&gt; {
+  const elem = event.target;
+  const valid = elem.value.length != 0;
+
+  if (valid &amp;&amp; sendButton.disabled) {
+    sendButton.disabled = false;
+  } else if (!valid &amp;&amp; !sendButton.disabled) {
+    sendButton.disabled = true;
+  }
+});</pre>
+
+<p>This code uses the {{domxref("Document")}} interface's {{domxref("Document.getElementById", "getElementById()")}} method to get the DOM object representing the {{HTMLElement("input")}} elements whose IDs are <code>userName</code> and <code>sendButton</code>.  With these, we can access the properties and methods that provide information about and grant control over these elements.</p>
+
+<p>The {{domxref("HTMLInputElement")}} object for the "Send" button's {{domxref("HTMLInputElement.disabled", "disabled")}} property is set to <code>true</code>, which disables the "Send" button so it can't be clicked. In addition, the user name input field is made the active focus by calling the {{domxref("HTMLElement.focus", "focus()")}} method it inherits from {{domxref("HTMLElement")}}.</p>
+
+<p>Then {{domxref("EventTarget.addEventListener", "addEventListener()")}} is called to add a handler for the <code>input</code> event to the user name input. This code looks at the length of the current value of the input; if it's zero, then the "Send" button is disabled if it's not already disabled. Otherwise, the code ensures that the button is enabled.</p>
+
+<p>With this in place, the "Send" button is always enabled whenever the user name input field has a value, and disabled when it's empty.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<p>The HTML for the form looks like this:</p>
+
+<pre class="brush: html">&lt;p&gt;Please provide the information below. Items marked with "*" are required.&lt;/p&gt;
+&lt;form action="" method="get"&gt;
+  &lt;p&gt;
+    &lt;label for="userName" required&gt;Your name:&lt;/label&gt;
+    &lt;input type="text" id="userName"&gt; (*)
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="email"&gt;Email:&lt;/label&gt;
+    &lt;input type="email" id="userEmail"&gt;
+  &lt;/p&gt;
+  &lt;input type="submit" value="Send" id="sendButton"&gt;
+&lt;/form&gt;
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Examples", 640, 300)}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+	<thead>
+		<tr>
+			<th scope="col">Specification</th>
+			<th scope="col">Status</th>
+			<th scope="col">Comment</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td>{{SpecName('HTML WHATWG')}}</td>
+			<td>{{Spec2('HTML WHATWG')}}</td>
+			<td>WHATWG HTML Specification</td>
+		</tr>
+		<tr>
+			<td>{{SpecName('HTML5 W3C')}}</td>
+			<td>{{Spec2('HTML5 W3C')}}</td>
+			<td>No change from {{SpecName("DOM2 HTML")}}</td>
+		</tr>
+		<tr>
+			<td>{{SpecName('DOM2 HTML')}}</td>
+			<td>{{Spec2('DOM2 HTML')}}</td>
+			<td>No change from {{SpecName("DOM1")}}.</td>
+		</tr>
+		<tr>
+			<td>{{SpecName('DOM1')}}</td>
+			<td>{{Spec2('DOM1')}}</td>
+			<td>Initial definition.</td>
+		</tr>
+	</tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLElement")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+	<dt>References</dt>
+	<dd>
+	<ul>
+		<li><a href="/en-US/docs/Web/HTML/Element">HTML elements reference</a></li>
+		<li><a href="/en-US/docs/Web/HTML/Attributes">HTML attribute reference</a></li>
+		<li><a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM)</a> reference</li>
+	</ul>
+	</dd>
+	<dt>Guides</dt>
+	<dd>
+	<ul>
+		<li>
+		<p><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents" style="font-size: 1rem; letter-spacing: -0.00278rem;">Manipulating documents</a><span style="font-size: 1rem; letter-spacing: -0.00278rem;">: A beginner's guide to manipulating the DOM.</span></p>
+		</li>
+	</ul>
+	</dd>
+</dl>
diff --git a/files/uk/web/api/html_dom_api/microtask_guide/index.html b/files/uk/web/api/html_dom_api/microtask_guide/index.html
new file mode 100644
index 0000000000..7b02378a59
--- /dev/null
+++ b/files/uk/web/api/html_dom_api/microtask_guide/index.html
@@ -0,0 +1,324 @@
+---
+title: Використання мікрозадач у JavaScript за допомогою queueMicrotask()
+slug: Web/API/HTML_DOM_API/Microtask_guide
+tags:
+  - API
+  - JavaScript
+  - ServiceWorker
+  - SharedWorker
+  - Window
+  - Worker
+  - queueMicrotask
+  - Довідник
+  - асинхронний
+  - мікрозадача
+  - пакет
+  - черга
+translation_of: Web/API/HTML_DOM_API/Microtask_guide
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><span class="seoSummary"><strong>Мікрозадача</strong> - це коротка функція, яка виконується після того, як функція чи програма, яка її створила, завершується, <em>та</em> тільки якщо стек виконання JavaScript порожній, але перед поверненням контролю до циклу подій {{Glossary("user agent", "користувацького агента")}} для керування середовищем виконання скрипта.</span> Даний цикл подій може бути або головним циклом подій веб-переглядача, або циклом подій, що керує <a href="/uk/docs/Web/API/Web_Workers_API">веб-виконавцем</a>. Це дозволяє даній функції виконуватись без ризику втрутитись у виконання іншого скрипта, в той же час гарантує, що мікрозадача виконається до того, як користувацький агент матиме змогу відреагувати на дії, виконані цією мікрозадачею.</p>
+
+<p><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Promise">Проміси</a> JavaScript та <a href="/uk/docs/Web/API/Mutation_Observer_API">Mutation Observer API</a> використовують чергу мікрозадач для виконання своїх зворотніх викликів, але бувають інші випадки, коли здатність відкласти роботу до завершення поточного проходу циклу подій може бути корисна. Щоб дозволити стороннім бібліотекам, фреймворкам та поліфілам використовувати мікрозадачі, метод {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}} доступний у інтерфейсах {{domxref("Window")}} та {{domxref("Worker")}} через домішку {{domxref("WindowOrWorkerGlobalScope")}}.</p>
+
+<h2 id="Задачі_та_мікрозадачі">Задачі та мікрозадачі</h2>
+
+<p>Щоб належно обговорювати мікрозадачі, насамперед, корисно знати, що таке задача JavaScript та чим мікрозадачі відрізняються від задач. Це швидке, спрощене пояснення, але якщо вам потрібно більше подробиць, ви можете їх дізнатись у статті <a href="/uk/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth">В подробицях: мікрозадачі та середовище виконання JavaScript</a>.</p>
+
+<h3 id="Задачі">Задачі</h3>
+
+<p><strong>Задача</strong> - це будь-який код JavaScript, що запланований до запуску стандартними механізмами, такими як початковий запуск програми, запуск зворотного виклику для події, або запуск таймера чи інтервалу. Всі вони розташовуються у <strong>черзі задач</strong>.</p>
+
+<p>Задачі додаються до черги задач, коли:</p>
+
+<ul>
+ <li>Безпосередньо виконується нова програма чи підпрограма JavaScript (наприклад, з консолі чи запуском коду у елементі {{HTMLElement("script")}}).</li>
+ <li>Спрацьовує подія, додаючи функцію зворотного виклику події до черги задач.</li>
+ <li>Доходить черга таймера чи інтервалу, створеного методом {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} чи {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}, що спричиняє додавання відповідного зворотного виклику до черги задач.</li>
+</ul>
+
+<p>Цикл подій, що керує вашим кодом, обробляє ці задачі одна за одною, в тому порядку, в якому вони були додані у чергу. Лише ті задачі, які <em>вже знаходились у черзі задач</em>, коли почався прохід циклу подій, будуть виконані протягом поточної ітерації. Решті доведеться зачекати наступної ітерації.</p>
+
+<h3 id="Мікрозадачі">Мікрозадачі</h3>
+
+<p>Спершу різниця між мікрозадачами та задачами здається незначною. І вони дійсно схожі; і те, й інше - код JavaScript, який розміщується у черзі та запускається у належний час. Однак, в той час, як цикл подій запускає лише задачі, наявні у черзі на момент початку ітерації, одна за одною, з мікрозадачами він поводиться зовсім по-іншому.</p>
+
+<p>Є дві ключові відмінності.</p>
+
+<p>По-перше, кожен раз, коли задача завершується, цикл подій перевіряє, чи задача повертає контроль іншому коду JavaScript. Якщо ні, він запускає всі мікрозадачі з черги мікрозадач. Таким чином, черга мікрозадач обробляється багаторазово протягом однієї ітерації циклу подій, в тому числі після обробки подій та інших зворотних викликів.</p>
+
+<p>По-друге, якщо мікрозадача додає інші мікрозадачі до черги, викликаючи метод {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}}, ці додані мікрозадачі <em>виконуються перед запуском наступної задачі</em>. Все тому, що цикл подій викликатиме мікрозадачі, доки у черзі не залишиться жодної, навіть якщо при цьому додаються нові.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Застереження:</strong> Оскільки мікрозадачі можуть ставити у чергу інші мікрозадачі, а цикл подій продовжуватиме обробляти мікрозадачі, доки черга не спорожніє, існує реальний ризик спричинити нескінченну обробку мікрозадач циклом подій. Будьте обережні, додаючи мікрозадачі рекурсивно.</p>
+</div>
+
+<h2 id="Використання_мікрозадач">Використання мікрозадач</h2>
+
+<p>Перед тим, як продовжити, важливо зазначити ще раз, що більшість програмістів нечасто використовують мікрозадачі, якщо взагалі використовують. Це вузькоспеціалізована функціональність сучасної JavaScript-розробки для переглядачів, що дозволяє вам запланувати виконання коду попереду чогось іншого у довгому списку речей, що чекають на виконання комп'ютером користувача. Зловживання цією можливістю призведе до проблем з продуктивністю.</p>
+
+<h3 id="Додавання_мікрозадач_у_чергу">Додавання мікрозадач у чергу</h3>
+
+<p>Таким чином, вам варто використовувати мікрозадачі лише тоді, коли немає іншого рішення, або при створенні фреймворків чи бібліотек, які мають використовувати мікрозадачі для створення функціональності, яку реалізують. Хоча раніше існували трюки, які дозволяли ставити мікрозадачі в чергу (наприклад, створення проміса, який негайно вирішується), введення методу {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}} додає стандартний спосіб створення мікрозадач безпечно та без допомоги трюків.</p>
+
+<p>Введення методу <code>queueMicrotask()</code> дозволяє уникнути вивертів, що трапляються під час такого проникнення у чергу мікрозадач за допомогою промісів. Наприклад, при використанні промісів для створення мікрозадач, винятки, викинуті зворотним викликом, повідомляються як відхилені проміси, а не як стандартні винятки. Також, створення та знищення промісів потребує додаткових витрат як часу, так і пам'яті, цього уникає функція, яка належним чином ставить мікрозадачі у чергу.</p>
+
+<p>Просто передайте {{jsxref("Function","функцію")}} JavaScript, яку треба викликати, коли контекст обробляє мікрозадачі, у метод <code>queueMicrotask()</code>, доступний у глобальному контексті, як визначено у інтерфейсі {{domxref("Window")}} або {{domxref("Worker")}}, в залежності від поточного контексту виконання.</p>
+
+<pre class="brush: js">queueMicrotask(() =&gt; {
+  /* тут код, який виконує мікрозадача */
+});
+</pre>
+
+<p>Сама функція мікрозадачі не приймає параметрів та не повертає значення.</p>
+
+<h3 id="Коли_використовувати_мікрозадачі">Коли використовувати мікрозадачі</h3>
+
+<p>У цьому розділі ми розглянемо сценарії, в яких мікрозадачі є особливо корисними. Загалом, мова йде про отримання та перевірку результатів, або прибирання, після того, як головне тіло контексту виконання JavaScript завершується, але перед тим, як опрацьовуються будь-які обробники подій, таймери та інтервали, чи інші зворотні виклики.</p>
+
+<p>Коли це корисно?</p>
+
+<p>Головна причина використання мікрозадач проста: забезпечити послідовний порядок виконання задач, навіть коли результати чи дані доступні синхронно, одночасно знижуючи ризик помітних користувачу затримок у операціях.</p>
+
+<h4 id="Забезпечення_порядку_виконання_при_використанні_промісів_в_умовних_конструкціях">Забезпечення порядку виконання при використанні промісів в умовних конструкціях</h4>
+
+<p>Одна з ситуацій, в якій можуть використовуватись мікрозадачі - це забезпечення завжди послідовного порядку виконання у ситуації, коли проміси використовуються у одному блоці конструкції <code>if...else</code> (чи іншої умовної конструкції), але не в іншому блоці. Розглянемо наступний код:</p>
+
+<pre class="brush: js">customElement.prototype.getData = url =&gt; {
+  if (this.cache[url]) {
+    this.data = this.cache[url];
+    this.dispatchEvent(new Event("load"));
+  } else {
+    fetch(url).then(result =&gt; result.arrayBuffer()).then(data =&gt; {
+      this.cache[url] = data;
+      this.data = data;
+      this.dispatchEvent(new Event("load"));
+    });
+  }
+};</pre>
+
+<p>Проблема тут полягає в тому, що, використовуючи задачу в одній гілці конструкції <code>if...else</code> (у випадку, коли зображення доступне з кешу), але маючи проміси у блоці <code>else</code>, ми отримуємо ситуацію, в якій порядок операцій може бути різним; наприклад, як показано нижче.</p>
+
+<pre class="brush: js">element.addEventListener("load", () =&gt; console.log("Завантажені дані"));
+console.log("Отримання даних...");
+element.getData();
+console.log("Дані отримано");
+</pre>
+
+<p>Виконання цього коду два рази підряд дає результати, наведені у таблиці:</p>
+
+<table class="standard-table">
+ <caption>Результати, коли дані не кешовані (зліва) та коли дані знайдені в кеші</caption>
+ <thead>
+  <tr>
+   <th scope="col">Дані не кешовані</th>
+   <th scope="col">Дані кешовані</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <pre>
+Отримання даних
+Дані отримано
+Завантажені дані
+</pre>
+   </td>
+   <td>
+    <pre>
+Отримання даних
+Завантажені дані
+Дані отримано
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Навіть гірше, іноді властивість елементів <code>data</code> буде встановлена, а іноді не буде, на той момент, коли цей код завершує виконання.</p>
+
+<p>Ми можемо забезпечити послідовний порядок цих операцій використанням мікрозадачі у блоці <code>if</code>, щоб збалансувати два блоки:</p>
+
+<pre class="brush: js">customElement.prototype.getData = url =&gt; {
+  if (this.cache[url]) {
+    queueMicrotask(() =&gt; {
+      this.data = this.cache[url];
+      this.dispatchEvent(new Event("load"));
+    });
+  } else {
+    fetch(url).then(result =&gt; result.arrayBuffer()).then(data =&gt; {
+      this.cache[url] = data;
+      this.data = data;
+      this.dispatchEvent(new Event("load"));
+    });
+  }
+};</pre>
+
+<p>Це збалансовує два блоки, бо тепер в обох ситуаціях встановлення значення <code>data</code> та запуск події <code>load</code> відбувається всередині мікрозадачі (за допомогою <code>queueMicrotask()</code> у блоці <code>if</code> та за допомогою промісів, що використовуються методом {{domxref("WindowOrWorkerGlobalScope.fetch", "fetch()")}}, у блоці <code>else</code>).</p>
+
+<h4 id="Пакетне_виконання_операцій">Пакетне виконання операцій</h4>
+
+<p>Ви також можете використати мікрозадачі, щоб зібрати множину запитів з різних джерел у єдиний пакет, уникаючи можливих затрат, пов'язаних з багатьма викликами задля виконання задач одного типу.</p>
+
+<p>Фрагмент коду, наведений нижче, створює функцію, яка збирає множину повідомлень у масив, використовуючи мікрозадачу, щоб відправити їх як єдиний об'єкт по завершенні контексту.</p>
+
+<pre class="brush: js">const messageQueue = [];
+
+let sendMessage = message =&gt; {
+  messageQueue.push(message);
+
+  if (messageQueue.length === 1) {
+    queueMicrotask(() =&gt; {
+      const json = JSON.stringify(messageQueue);
+      messageQueue.length = 0;
+      fetch("url-of-receiver", json);
+    });
+  }
+};
+</pre>
+
+<p>Коли викликається <code>sendMessage()</code>, вказане повідомлення спочатку додається у масив черги повідомлень. А далі відбувається цікаве.</p>
+
+<p>Якщо повідомлення, яке ми додали до масиву, є першим, ми додаємо мікрозадачу, яка відправлятиме пакет. Мікрозадача виконається, як завжди, коли шлях виконання JavaScript сягне верхнього рівня, одразу перед зворотними викликами. Це означає, що будь-які подальші виклики <code>sendMessage()</code>, зроблені в цей час, додадуть свої повідомлення до черги повідомлень, але, завдяки перевірці довжини масиву перед додаванням мікрозадачі, нових мікрозадач у чергу не буде додано.</p>
+
+<p>Коли запускається мікрозадача, то вона має масив, потенційно, багатьох повідомлень, які на неї очікують. Вона починається кодуванням його як JSON за допомогою методу {{jsxref("JSON.stringify()")}}. Після цього вміст масиву більше не потрібний, а отже, ми спорожнюємо масив <code>messageQueue</code>. Нарешті, ми використовуємо метод {{domxref("WindowOrWorkerGlobalScope.fetch", "fetch()")}}, щоб відправити рядок JSON на сервер.</p>
+
+<p>Це дозволяє кожному виклику <code>sendMessage()</code>, зробленому під час тієї самої ітерації циклу подій, додавати свої повідомлення до тієї самої операції <code>fetch()</code>, без потенційних затримок трансмісії іншими задачами, такими як таймери та подібні.</p>
+
+<p>Сервер отримає рядок JSON, далі, ймовірно, декодує його та обробить повідомлення, які знайде у отриманому масиві.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Простий_приклад_мікрозадачі">Простий приклад мікрозадачі</h3>
+
+<p>У цьому простому прикладі ми бачимо, що додавання мікрозадачі у чергу спричиняє запуск зворотного виклику мікрозадачі після того, як тіло цього скрипта верхнього рівня завершує виконання.</p>
+
+<div class="hidden">
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;pre id="log"&gt;
+&lt;/pre&gt;</pre>
+</div>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<div class="hidden">
+<p>Наведений нижче код використовується для логування результату.</p>
+
+<pre class="brush: js">let logElem = document.getElementById("log");
+let log = s =&gt; logElem.innerHTML += s + "&lt;br&gt;";</pre>
+</div>
+
+<p>У наступному коді ми бачимо виклик {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}}, що використовується для планування запуску мікрозадачі. Цей виклик оточують виклики <code>log()</code>, користувацької функції, яка просто виводить текст на екран.</p>
+
+<pre class="brush: js">log("До розміщення мікрозадачі в черзі");
+queueMicrotask(() =&gt; {
+  log("Мікрозадача запустилась.")
+});
+log("Після розміщення мікрозадачі в черзі");</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample("Простий_приклад_мікрозадачі", 640, 80)}}</p>
+
+<h3 id="Таймер_та_приклад_мікрозадачі">Таймер та приклад мікрозадачі</h3>
+
+<p>У цьому прикладі встановлюється таймер для запуску через нуль мілісекунд (або "якомога швидше"). Це демонструє різницю між тим, що означає "якомога швидше" при плануванні нової задачі (наприклад, при використанні <code>setTimeout()</code>) у порівнянні з використанням мікрозадачі.</p>
+
+<div class="hidden">
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;pre id="log"&gt;
+&lt;/pre&gt;</pre>
+</div>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<div class="hidden">
+<p>Наведений нижче код використовується для логування результату.</p>
+
+<pre class="brush: js">let logElem = document.getElementById("log");
+let log = s =&gt; logElem.innerHTML += s + "&lt;br&gt;";</pre>
+</div>
+
+<p>У наступному коді ми бачимо виклик {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}}, який використовується для планування запуску мікрозадачі. Цей виклик розташований між викликами <code>log()</code>, користувацької функції, яка просто виводить текст на екран.</p>
+
+<p>Наступний код встановлює таймер, який має запуститися через нуль мілісекунд, після чого додає у чергу мікрозадачу. Він оточений викликами <code>log()</code> для виводу додаткових повідомлень.</p>
+
+<pre class="brush: js">let callback = () =&gt; log("Запустився звичайний зворотний виклик таймера");
+
+let urgentCallback = () =&gt; log("*** О, ні! Запустився терміновий зворотний виклик!");
+
+log("Початок головної програми");
+setTimeout(callback, 0);
+queueMicrotask(urgentCallback);
+log("Кінець головної програми");</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample("Таймер_та_приклад_мікрозадачі", 640, 100)}}</p>
+
+<p>Зауважте, що текст, який виводиться головною програмою, з'являється першим, далі текст, виведений мікрозадачею, а за ним текст зворотного виклику таймера. Все тому, що, коли задача, що керує виконанням головної програми, завершується, черга мікрозадач обробляється раніше черги задач, в якій розташований зворотний виклик таймера. Знання того, що задачі та мікрозадачі розташовуються у різних чергах, і те, що мікрозадачі виконуються першими, допомагає легше в цьому розібратись.</p>
+
+<h3 id="Мікрозадача_з_функції">Мікрозадача з функції</h3>
+
+<p>Цей приклад трохи розширює попередній додаванням функції, яка виконує певну роботу. Ця функція використовує <code>queueMicrotask()</code>, щоб додати мікрозадачу. Важливий момент, який варто з нього винести - мікрозадача не виконується, коли завершується функція, а тільки коли завершується головна програма.</p>
+
+<div class="hidden">
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;pre id="log"&gt;
+&lt;/pre&gt;</pre>
+</div>
+
+<h4 id="JavaScript_3">JavaScript</h4>
+
+<div class="hidden">
+<p>Наведений нижче код використовується для логування результату.</p>
+
+<pre class="brush: js">let logElem = document.getElementById("log");
+let log = s =&gt; logElem.innerHTML += s + "&lt;br&gt;";</pre>
+</div>
+
+<p>Код головної програми наступний. Функція <code>doWork()</code> викликає <code>queueMicrotask()</code>, але мікрозадача не запускається, доки вся програма не завершується, оскільки саме тоді завершується задача і не залишається нічого іншого у стеку виконання.</p>
+
+<pre class="brush: js">let callback = () =&gt; log("Запустився звичайний зворотний виклик таймера");
+
+let urgentCallback = () =&gt; log("*** О, ні! Запустився терміновий зворотний виклик!");
+
+let doWork = () =&gt; {
+  let result = 1;
+
+  queueMicrotask(urgentCallback);
+
+  for (let i=2; i&lt;=10; i++) {
+    result *= i;
+  }
+  return result;
+};
+
+log("Початок головної програми");
+setTimeout(callback, 0);
+log(`10! дорівнює ${doWork()}`);
+log("Кінець головної програми");</pre>
+
+<h4 id="Результат_3">Результат</h4>
+
+<p>{{EmbedLiveSample("Мікрозадача_з_функції", 640, 100)}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth">В подробицях: мікрозадачі та середовище виконання JavaScript</a></li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}}</li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous">Asynchronous JavaScript</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
+   <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
+   <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
+   <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
+   <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/uk/web/api/htmlcanvaselement/index.html b/files/uk/web/api/htmlcanvaselement/index.html
new file mode 100644
index 0000000000..9f1a6452ed
--- /dev/null
+++ b/files/uk/web/api/htmlcanvaselement/index.html
@@ -0,0 +1,264 @@
+---
+title: HTMLCanvasElement
+slug: Web/API/HTMLCanvasElement
+tags:
+  - API
+  - Canvas
+  - HTML DOM
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLCanvasElement
+---
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+
+<p>The <strong><code>HTMLCanvasElement</code></strong> interface provides properties and methods for manipulating the layout and presentation of canvas elements. The <code>HTMLCanvasElement</code> interface also inherits the properties and methods of the {{domxref("HTMLElement")}} interface.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.height")}}</dt>
+ <dd>Is a positive <code>integer</code> reflecting the {{htmlattrxref("height", "canvas")}} HTML attribute of the {{HTMLElement("canvas")}} element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of <code>150</code> is used.</dd>
+ <dt>{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} reflecting the {{htmlattrxref("moz-opaque", "canvas")}} HTML attribute of the {{HTMLElement("canvas")}} element. It lets the canvas know whether or not translucency will be a factor. If the canvas knows there's no translucency, painting performance can be optimized.</dd>
+ <dt>{{domxref("HTMLCanvasElement.width")}}</dt>
+ <dd>Is a positive <code>integer</code> reflecting the {{htmlattrxref("width", "canvas")}} HTML attribute of the {{HTMLElement("canvas")}} element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of <code>300</code> is used.</dd>
+ <dt>{{domxref("HTMLCanvasElement.mozPrintCallback")}}{{non-standard_inline}}</dt>
+ <dd>Is a <code>function</code> that is Initially null, Web content can set this to a JavaScript function that will be called if the page is printed. This function can then redraw the canvas at a higher resolution that is suitable for the printer being used. <a href="https://blog.mozilla.org/labs/2012/09/a-new-way-to-control-printing-output/">See this blog post.</a></dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("CanvasCaptureMediaStream")}} that is a real-time video capture of the surface of the canvas.</dd>
+ <dt>{{domxref("HTMLCanvasElement.getContext()")}}</dt>
+ <dd>Returns a drawing context on the canvas, or null if the context ID is not supported. A drawing context lets you draw on the canvas. Calling getContext with <code>"2d"</code> returns a {{domxref("CanvasRenderingContext2D")}} object, whereas calling it with <code>"experimental-webgl"</code> (or <code>"webgl"</code>) returns a {{domxref("WebGLRenderingContext")}} object. This context is only available on browsers that implement <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd>
+ <dt>{{domxref("HTMLCanvasElement.toDataURL()")}}</dt>
+ <dd>Returns a data-URL containing a representation of the image in the format specified by the <code>type</code> parameter (defaults to <code>png</code>). The returned image is in a resolution of 96dpi.</dd>
+ <dt>{{domxref("HTMLCanvasElement.toBlob()")}}</dt>
+ <dd>Creates a {{domxref("Blob")}} object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent.</dd>
+ <dt>{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}</dt>
+ <dd>Transfers control to an {{domxref("OffscreenCanvas")}} object, either on the main thread or on a worker.</dd>
+ <dt>{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Returns a {{domxref("File")}} object representing the image contained in the canvas; this file is a memory-based file, with the specified <code>name</code>. If <code>type</code> is not specified, the image type is <code>image/png</code>.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}</td>
+   <td>{{Spec2('Media Capture DOM Elements')}}</td>
+   <td>Adds the method <code>captureStream()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>The method <code>getContext()</code> now returns a {{domxref("RenderingContext")}} rather than an opaque <code>object</code>.<br>
+    The methods <code>probablySupportsContext()</code>, <code>setContext()</code> and <code>transferControlToProxy()</code>have been added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (<code>2D</code> context)</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop('1.9.2')}}</td>
+   <td>9.0</td>
+   <td>9.0 [1]</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>toBlob()</code></td>
+   <td>50</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop('19')}} [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td>
+  </tr>
+  <tr>
+   <td><code>probablySupportsContext()</code>,<br>
+    <code>setContext()</code>,<br>
+    <code>transferControlToProxy()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop('2')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>captureStream()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop('41')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>transferControlToOffscreen()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(44)}} [3]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (<code>2D</code> context)</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0 [1]</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td><code>webgl</code> context</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}} as <code>experimental-webgl</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>toBlob()</code></td>
+   <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td>
+   <td>50</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile('18')}} [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td>
+  </tr>
+  <tr>
+   <td><code>probablySupportsContext()</code>,<br>
+    <code>setContext()</code>,<br>
+    <code>transferControlToProxy() </code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile('2')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>captureStream() </code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile('41')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>transferControlToOffscreen()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(44)}} [3]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Opera Mini 5.0 and later has partial support.</p>
+
+<p>[2] Support for the third parameter, has been added in Gecko 25 only: when used with the <code>"image/jpeg"</code> type, this argument specifies the image quality.</p>
+
+<p>[3] This feature is behind a feature preference setting. In about:config, set <code>gfx.offscreencanvas.enabled</code> to <code>true</code>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>HTML element implementing this interface: {{HTMLElement("canvas")}}.</li>
+</ul>
diff --git a/files/uk/web/api/htmlelement/index.html b/files/uk/web/api/htmlelement/index.html
new file mode 100644
index 0000000000..02de0c792e
--- /dev/null
+++ b/files/uk/web/api/htmlelement/index.html
@@ -0,0 +1,486 @@
+---
+title: HTMLElement
+slug: Web/API/HTMLElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - NeedsMobileBrowserCompatibility
+  - NeedsNewLayout
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLElement
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<div> </div>
+
+<p>The <strong><code>HTMLElement</code></strong> interface represents any <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a> element. Some elements directly implement this interface, others implement it via an interface that inherits it.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, {{domxref("Element")}}, and implements those from {{domxref("GlobalEventHandlers")}} and {{domxref("TouchEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLElement.accessKey")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the access key assigned to the element.</dd>
+ <dt>{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the element's assigned access key.</dd>
+ <dt>{{domxref("HTMLElement.contentEditable")}}</dt>
+ <dd>Is a {{domxref("DOMString")}}, where a value of <code>"true"</code> means the element is editable and a value of <code>"false"</code> means it isn't.</dd>
+ <dt>{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} that indicates whether or not the content of the element can be edited.</dd>
+ <dt>{{domxref("HTMLElement.contextMenu")}}</dt>
+ <dd>Is a {{domxref("HTMLMenuElement")}} representing the contextual menu associated with the element. It may be <code>null</code>.</dd>
+ <dt>{{domxref("HTMLElement.dataset")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMStringMap")}} with which script can read and write the element's <a href="/en-US/docs/Web/Guide/HTML/Using_data_attributes">custom data attributes</a> (<code>data-*</code>) .</dd>
+ <dt>{{domxref("HTMLElement.dir")}}</dt>
+ <dd>Is a {{domxref("DOMString")}}, reflecting the <code>dir</code> global attribute, representing the directionality of the element. Possible values are <code>"ltr"</code>, <code>"rtl"</code>, and <code>"auto"</code>.</dd>
+ <dt>{{domxref("HTMLElement.draggable")}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating if the element can be dragged.</dd>
+ <dt>{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMSettableTokenList")}} reflecting the <code>dropzone</code> global attribute and describing the behavior of the element regarding a drop operation.</dd>
+ <dt>{{domxref("HTMLElement.hidden")}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating if the element is hidden or not.</dd>
+ <dt>{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} representing the item scope.</dd>
+ <dt>{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemId")}} {{experimental_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the item ID.</dd>
+ <dt>{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}</dt>
+ <dd>Returns a {{jsxref("Object")}} representing the item value.</dd>
+ <dt>{{domxref("HTMLElement.lang")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the language of an element's attributes, text, and element contents.</dd>
+ <dt>{{domxref("HTMLElement.noModule")}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating wether an import script can be executed in user agents that support module scripts.</dd>
+ <dt>{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>double</code> containing the height of an element, relative to the layout.</dd>
+ <dt>{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>double</code>, the distance from this element's left border to its <code>offsetParent</code>'s left border.</dd>
+ <dt>{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("Element")}} that is the element from which all offset calculations are currently computed.</dd>
+ <dt>{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>double</code>, the distance from this element's top border to its <code>offsetParent</code>'s top border.</dd>
+ <dt>{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>double</code> containing the width of an element, relative to the layout.</dd>
+ <dt>{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("HTMLPropertiesCollection")}}…</dd>
+ <dt>{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} that controls <a href="/en-US/docs/HTML/Controlling_spell_checking_in_HTML_forms" title="en/Controlling_spell_checking_in_HTML_forms">spell-checking</a>. It is present on all HTML elements, though it doesn't have an effect on all of them.</dd>
+ <dt>{{domxref("HTMLElement.style")}}</dt>
+ <dd>Is a {{domxref("CSSStyleDeclaration")}}, an object representing the declarations of an element's style attributes.</dd>
+ <dt>{{domxref("HTMLElement.tabIndex")}}</dt>
+ <dd>Is a <code>long</code> representing the position of the element in the tabbing order.</dd>
+ <dt>{{domxref("HTMLElement.title")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the text that appears in a popup box when mouse is over the element.</dd>
+ <dt>{{domxref("HTMLElement.translate")}} {{experimental_inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} representing the translation.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<p>Most event handler properties, of the form <code>onXYZ</code>, are defined on the {{domxref("GlobalEventHandlers")}} or {{domxref("TouchEventHandlers")}} interfaces and implemented by <code>HTMLElement</code>. In addition, the following handlers are specific to <code>HTMLElement</code>.</p>
+
+<dl>
+ <dt>{{ domxref("HTMLElement.oncopy") }}  {{ non-standard_inline() }}</dt>
+ <dd>Returns the event handling code for the <code>copy</code> event ({{bug("280959")}}).</dd>
+ <dt>{{ domxref("HTMLElement.oncut") }}  {{ non-standard_inline() }}</dt>
+ <dd>Returns the event handling code for the <code>cut</code> event ({{bug("280959")}}).</dd>
+ <dt>{{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}</dt>
+ <dd>Returns the event handling code for the <code>paste</code> event ({{bug("280959")}}).</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchstart")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchend")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchmove")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchenter")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchleave")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchcancel")}} event.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, {{domxref("Element")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLElement.blur()")}}</dt>
+ <dd>Removes keyboard focus from the currently focused element.</dd>
+ <dt>{{domxref("HTMLElement.click()")}}</dt>
+ <dd>Sends a mouse click event to the element.</dd>
+ <dt>{{domxref("HTMLElement.focus()")}}</dt>
+ <dd>Makes the element the current keyboard focus.</dd>
+ <dt>{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}</dt>
+ <dd>Runs the spell checker on the element's contents.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Added the following properties: <code>offsetParent</code>, <code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, and <code>offsetHeight</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Added the following properties: <code>translate</code>, <code>itemScope</code>, <code>itemType</code>, <code>itemId</code>, <code>itemRef</code>, <code>itemProp</code>, <code>properties</code>, and <code>itemValue</code>.<br>
+    Added the following method: <code>forceSpellcheck()</code>.<br>
+    Moved the <code>onXYZ</code> attributes to the {{domxref("GlobalEventHandlers")}} interface and added an inheritance from it.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Added the following properties: <code>dataset</code>, <code>hidden</code>, <code>tabindex</code>, <code>accessKey</code>, <code>accessKeyLabel</code>, <code>draggable</code>, <code>dropzone</code>, <code>contentEditable</code>, <code>isContentEditable</code>, <code>contextMenu</code>, <code>spellcheck</code>, <code>commandType</code>, <code>commandLabel</code>, <code>commandIcon</code>, <code>commandHidden</code>, <code>commandDisabled</code>, <code>commandChecked</code>, <code>style</code>, and all the <code>onXYZ</code> properties.<br>
+    Moved the <code>id</code> and <code>className</code> properties to the {{domxref("Element")}} interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>No change from {{SpecName('DOM2 HTML')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>{{CompatChrome(17)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>6.0</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td>
+   <td>{{CompatGeckoDesktop("8.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}{{WebkitBug(72715)}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.blur()", "blur()")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.click()", "click()")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>{{CompatChrome(9)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatUnknown}}</td>
+   <td>6.0</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dataset", "dataset")}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>{{CompatChrome(8)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>11</td>
+   <td>11.10</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.focus()", "focus()")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.contentEditable", "contentEditable")}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5.5</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.spellcheck", "spellcheck")}}</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.style", "style")}}</td>
+   <td>{{CompatVersionUnknown}} (returns a {{domxref("CSS2Properties")}}, rather than a {{domxref("CSSStyleDeclaration")}})</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.forceSpellCheck", "forceSpellCheck()")}} {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.draggable", "draggable")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dropzone", "dropzone")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>12.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.offsetLeft", "offsetLeft")}}, {{domxref("HTMLElement.offsetTop", "offsetTop")}}, {{domxref("HTMLElement.offsetParent", "offsetParent")}}, {{domxref("HTMLElement.offsetHeight", "offsetHeight")}} and {{domxref("HTMLElement.offsetWidth", "offsetWidth")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.onModule")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(47)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.translate", "translate")}} {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.itemScope", "itemScope")}}, {{domxref("HTMLElement.itemType", "itemType")}}, {{domxref("HTMLElement.itemRef", "itemRef")}}, {{domxref("HTMLElement.itemId", "itemId")}}, {{domxref("HTMLElement.itemProp", "itemProp")}}, and {{domxref("HTMLElement.itemValue", "itemValue")}} {{experimental_inline}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.60<br>
+    (Removed in Opera 15)</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.properties", "properties")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.ontouchstart")}}, {{domxref("HTMLElement.ontouchend")}}, {{domxref("HTMLElement.ontouchmove")}}, {{domxref("HTMLElement.ontouchenter")}}, {{domxref("HTMLElement.ontouchleave")}}, and {{domxref("HTMLElement.ontouchcancel")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>{{CompatGeckoMobile("1.0")}}</p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td>
+   <td>{{CompatGeckoMobile("8.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.blur()", "blur()")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.click()", "click()")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dataset", "dataset")}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.focus()", "focus()")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.onModule", "onModule()")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(47)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}</td>
+   <td>{{CompatGeckoMobile("1.9")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Element")}}</li>
+</ul>
diff --git a/files/uk/web/api/htmlelement/offsettop/index.html b/files/uk/web/api/htmlelement/offsettop/index.html
new file mode 100644
index 0000000000..9bafdc485c
--- /dev/null
+++ b/files/uk/web/api/htmlelement/offsettop/index.html
@@ -0,0 +1,60 @@
+---
+title: HTMLElement.offsetTop
+slug: Web/API/HTMLElement/offsetTop
+translation_of: Web/API/HTMLElement/offsetTop
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<div>Властивість лише для зчитування <strong><code>HTMLElement.offsetTop</code></strong> повертає відстань від поточного елемента відносно верху {{domxref("HTMLelement.offsetParent","offsetParent")}} .</div>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтакс</h2>
+
+<pre class="syntaxbox"><var>topPos</var> = element.offsetTop;
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметри</h3>
+
+<ul>
+ <li><code>topPos</code> це кількість пікселів від верху <em>найближчого відносно зпозиціонованого</em> батьківського елементу.</li>
+</ul>
+
+<h2 id="Example" name="Example">Приклад</h2>
+
+<pre class="brush:js">var d = document.getElementById("div1");
+var topPos = d.offsetTop;
+
+if (topPos &gt; 10) {
+  // object is offset more
+  // than 10 pixels from its parent
+}</pre>
+
+<h2 id="Specification" name="Specification">Специфікація</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфіуація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-htmlelement-offsettop', 'offsetTop')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibility" name="Compatibility">Браузерна сумісність</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.offsetTop")}}</p>
+
+<p>In compliance with the specification, this property will return <code>null</code> on Webkit if the element is hidden (the <code>style.display</code> of this element or any ancestor is <code>"none"</code>) or if the <code>style.position</code> of the element itself is set to <code>"fixed"</code>.</p>
+
+<p>This property will return <code>null</code> on Internet Explorer (9) if the <code>style.position</code> of the element itself is set to <code>"fixed"</code>. (Having <code>display:none</code> does not affect this browser.)</p>
diff --git a/files/uk/web/api/htmlformelement/index.html b/files/uk/web/api/htmlformelement/index.html
new file mode 100644
index 0000000000..7871a2d052
--- /dev/null
+++ b/files/uk/web/api/htmlformelement/index.html
@@ -0,0 +1,245 @@
+---
+title: HTMLFormElement
+slug: Web/API/HTMLFormElement
+tags:
+  - API
+  - Form Element
+  - Forms
+  - HTML DOM
+  - HTML forms
+  - HTMLFormElement
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLFormElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">The <code><strong>HTMLFormElement</strong></code> interface represents a {{HTMLElement("form")}} element in the DOM; it allows access to and in some cases modification of aspects of the form, as well as access to its component elements.</span></p>
+
+<p>{{InheritanceDiagram(600,120)}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface also inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLFormElement.elements")}} {{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("HTMLFormControlsCollection")}} holding all form controls belonging to this form element.</dd>
+ <dt>{{domxref("HTMLFormElement.length")}}{{ReadOnlyInline}}</dt>
+ <dd>A <code>long</code> reflecting  the number of controls in the form.</dd>
+ <dt>{{domxref("HTMLFormElement.name")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("name", "form") }} HTML attribute, containing the name of the form.</dd>
+ <dt>{{domxref("HTMLFormElement.method")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("method", "form") }} HTML attribute, indicating the HTTP method used to submit the form. Only specified values can be set.</dd>
+ <dt>{{domxref("HTMLFormElement.target")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("target", "form") }} HTML attribute, indicating where to display the results received from submitting the form.</dd>
+ <dt>{{domxref("HTMLFormElement.action")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("action", "form") }} HTML attribute, containing the URI of a program that processes the information submitted by the form.</dd>
+ <dt>{{domxref("HTMLFormElement.encoding")}} or {{domxref("HTMLFormElement.enctype")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("enctype", "form") }} HTML attribute, indicating the type of content that is used to transmit the form to the server. Only specified values can be set. The two properties are synonyms.</dd>
+ <dt>{{domxref("HTMLFormElement.acceptCharset")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("accept-charset", "form") }} HTML attribute, representing the character encoding that the server accepts.</dd>
+ <dt>{{domxref("HTMLFormElement.autocomplete")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("autocomplete", "form") }} HTML attribute, indicating whether the controls in this form can have their values automatically populated by the browser.</dd>
+ <dt>{{domxref("HTMLFormElement.noValidate")}}</dt>
+ <dd>A {{jsxref("Boolean")}} reflecting the value of the form's  {{ htmlattrxref("novalidate", "form") }} HTML attribute, indicating whether the form should not be validated.</dd>
+</dl>
+
+<p>Named inputs are added to their owner form instance as properties, and can overwrite native properties if they share the same name (eg a form with an input named <code>action</code> will have its <code>action</code> property return that input instead of the form's {{ htmlattrxref("action", "form") }} HTML attribute).</p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface also inherits methods from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLFormElement.checkValidity", "checkValidity()")}}</dt>
+ <dd>Returns <code>true</code> if the element's child controls are subject to <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> and satisfy those contraints; returns <code>false</code> if some controls do not satisfy their constraints. Fires an event named {{event("invalid")}} at any control that does not satisfy its constraints; such controls are considered invalid if the event is not canceled. It is up to the programmer to decide how to respond to <code>false</code>.</dd>
+ <dt>{{domxref("HTMLFormElement.reportValidity", "reportValidity()")}}</dt>
+ <dd>Returns <code>true</code> if the element's child controls satisfy their <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">validation constraints</a>. When <code>false</code> is returned, cancelable {{Event("invalid")}} events are fired for each invalid child and validation problems are reported to the user.</dd>
+ <dt>{{domxref("HTMLFormElement.requestSubmit", "requestSubmit()")}}</dt>
+ <dd>Requests that the form be submitted using the specified submit button and its corresponding configuration.</dd>
+ <dt>{{domxref("HTMLFormElement.reset", "reset()")}}</dt>
+ <dd>Resets the form to its initial state.</dd>
+ <dt>{{domxref("HTMLFormElement.submit", "submit()")}}</dt>
+ <dd>Submits the form to the server.</dd>
+</dl>
+
+<h3 id="Deprecated_methods">Deprecated methods</h3>
+
+<dl>
+ <dt>{{domxref("HTMLFormElement.requestAutocomplete()")}} {{deprecated_inline}}</dt>
+ <dd>Triggers a native browser interface to assist the user in completing the fields which have an <a href="https://html.spec.whatwg.org/#autofill-field-name">autofill field name</a> value that is not <code>off</code> or <code>on</code>. The form will receive an event once the user has finished with the interface, the event will either be {{event("autocomplete")}} when the fields have been filled or {{event("autocompleteerror")}} when there was a problem.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<p>Listen to these events using <code>addEventListener()</code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLFormElement/formdata_event">formdata</a></code></dt>
+ <dd><span style="display: none;"> </span>The <code>formdata</code> event fires after the entry list representing the form's data is constructed.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onformdata">onformdata</a></code> property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLFormElement/reset_event">reset</a></code></dt>
+ <dd><span style="display: none;"> </span>The <code>reset</code> event fires when a form is reset.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onreset">onreset</a></code> property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLFormElement/submit_event">submit</a></code></dt>
+ <dd>The <code>submit</code> event fires when a form is submitted.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a></code> property.</dd>
+</dl>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<h3 id="Obtaining_a_form_element_object">Obtaining a form element object</h3>
+
+<p>To obtain an <code>HTMLFormElement</code> object, you can use a <a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS selector</a> with {{domxref("ParentNode.querySelector", "querySelector()")}}, or you can get a list of all of the forms in the document using its {{domxref("Document.forms", "forms")}} property.</p>
+
+<p>{{domxref("Document.forms")}} returns an array of <code>HTMLFormElement</code> objects listing each of the forms on the page. You can then use any of the following syntaxes to get an individual form:</p>
+
+<dl>
+ <dt><code>document.forms[<em>index</em>]</code></dt>
+ <dd>Returns the form at the specified <code>index</code> into the array of forms.</dd>
+ <dt><code>document.forms[<em>id</em>]</code></dt>
+ <dd>Returns the form whose ID is <code>id</code>.</dd>
+ <dt><code>document.forms[<em>name</em>]</code></dt>
+ <dd>Returns the form whose {{domxref("Element.name", "name")}} attribute's value is <code>name</code>.</dd>
+</dl>
+
+<h3 id="Accessing_the_forms_elements">Accessing the form's elements</h3>
+
+<p>You can access the list of the form's data-containing elements by examining the form's {{domxref("HTMLFormElement.elements", "elements")}} property. This returns an {{domxref("HTMLFormControlsCollection")}} listing all of the form's user data entry elements, both those which are descendants of the <code>&lt;form&gt;</code> and those which are made members of the form using their <code>form</code> attributes.</p>
+
+<p>You can also get the form's element by using its <code>name</code> attribute as a key of the <code>form</code>, but using <code>elements</code> is a better approach — it contains only the form's elements, and it cannot be mixed with other attributes of the <code>form</code>.</p>
+
+<h3 id="Elements_that_are_considered_form_controls">Elements that are considered form controls</h3>
+
+<p>The elements which are included by <code>HTMLFormElement.elements</code> and <code>HTMLFormElement.length</code> are:</p>
+
+<ul>
+ <li>{{HTMLElement("button")}}</li>
+ <li>{{HTMLElement("fieldset")}}</li>
+ <li>{{HTMLElement("input")}} (with the exception that any whose {{htmlattrxref("type", "input")}} is <code>"image"</code> are omitted for historical reasons)</li>
+ <li>{{HTMLElement("object")}}</li>
+ <li>{{HTMLElement("output")}}</li>
+ <li>{{HTMLElement("select")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
+
+<p>No other elements are included in the list returned by <code>elements</code>, which makes it an excellent way to get at the elements most important when processing forms.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Creating a new form element, modifying its attributes, then submitting it:</p>
+
+<pre class="brush: js">var f = document.createElement("form");// Create a form
+document.body.appendChild(f);          // Add it to the document body
+f.action = "/cgi-bin/some.cgi";        // Add action and method attributes
+f.method = "POST";
+f.submit();                            // Call the form's submit method
+</pre>
+
+<p>Extract information from a form element and set some of its attributes:</p>
+
+<pre class="brush: html">&lt;form name="formA" action="/cgi-bin/test" method="post"&gt;
+ &lt;p&gt;Press "Info" for form details, or "Set" to change those details.&lt;/p&gt;
+ &lt;p&gt;
+  &lt;button type="button" onclick="getFormInfo();"&gt;Info&lt;/button&gt;
+  &lt;button type="button" onclick="setFormInfo(this.form);"&gt;Set&lt;/button&gt;
+  &lt;button type="reset"&gt;Reset&lt;/button&gt;
+ &lt;/p&gt;
+
+ &lt;textarea id="form-info" rows="15" cols="20"&gt;&lt;/textarea&gt;
+&lt;/form&gt;
+
+&lt;script&gt;
+  function getFormInfo(){
+    // Get a reference to the form via its name
+    var f = document.forms["formA"];
+    // The form properties we're interested in
+    var properties = [ 'elements', 'length', 'name', 'charset', 'action', 'acceptCharset', 'action', 'enctype', 'method', 'target' ];
+    // Iterate over the properties, turning them into a string that we can display to the user
+    var info = properties.map(function(property) { return property + ": " + f[property] }).join("\n");
+
+    // Set the form's &lt;textarea&gt; to display the form's properties
+    document.forms["formA"].elements['form-info'].value = info; // document.forms["formA"]['form-info'].value would also work
+  }
+
+  function setFormInfo(f){ // Argument should be a form element reference.
+    f.action = "a-different-url.cgi";
+    f.name   = "a-different-name";
+  }
+&lt;/script&gt;
+</pre>
+
+<p>Submit a form into a new window:</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="utf-8"&gt;
+&lt;title&gt;Example new-window form submission&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;form action="test.php" target="_blank"&gt;
+  &lt;p&gt;&lt;label&gt;First name: &lt;input type="text" name="firstname"&gt;&lt;/label&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;label&gt;Last name: &lt;input type="text" name="lastname"&gt;&lt;/label&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;label&gt;&lt;input type="password" name="pwd"&gt;&lt;/label&gt;&lt;/p&gt;
+
+  &lt;fieldset&gt;
+   &lt;legend&gt;Pet preference&lt;/legend&gt;
+    &lt;p&gt;&lt;label&gt;&lt;input type="radio" name="pet" value="cat"&gt; Cat&lt;/label&gt;&lt;/p&gt;
+    &lt;p&gt;&lt;label&gt;&lt;input type="radio" name="pet" value="dog"&gt; Dog&lt;/label&gt;&lt;/p&gt;
+  &lt;/fieldset&gt;
+
+  &lt;fieldset&gt;
+    &lt;legend&gt;Owned vehicles&lt;/legend&gt;
+
+    &lt;p&gt;&lt;label&gt;&lt;input type="checkbox" name="vehicle" value="Bike"&gt;I have a bike&lt;/label&gt;&lt;/p&gt;
+    &lt;p&gt;&lt;label&gt;&lt;input type="checkbox" name="vehicle" value="Car"&gt;I have a car&lt;/label&gt;&lt;/p&gt;
+  &lt;/fieldset&gt;
+
+  &lt;p&gt;&lt;button&gt;Submit&lt;/button&gt;&lt;/p&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="Submitting_forms_and_uploading_files_using_XMLHttpRequest">Submitting forms and uploading files using <code>XMLHttpRequest</code></h3>
+
+<p>If you want to know how to serialize and submit a form using the {{domxref("XMLHttpRequest")}} API, please read <a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">this paragraph</a>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#htmlformelement", "HTMLFormElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>The following method has been added: <code>requestAutocomplete()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "sec-forms.html#htmlformelement", "HTMLFormElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>The elements properties returns an {{domxref("HTMLFormControlsCollection")}} instead of a raw {{domxref("HTMLCollection")}}. This is mainly a technical change. The following method has been added: <code>checkValidity()</code>. The following properties have been added: <code>autocomplete</code>, <code>noValidate</code>, and <code>encoding</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLFormElement")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML element implementing this interface: {{ HTMLElement("form") }}.</li>
+</ul>
diff --git a/files/uk/web/api/htmlformelement/reset/index.html b/files/uk/web/api/htmlformelement/reset/index.html
new file mode 100644
index 0000000000..9917055250
--- /dev/null
+++ b/files/uk/web/api/htmlformelement/reset/index.html
@@ -0,0 +1,70 @@
+---
+title: HTMLFormElement.reset()
+slug: Web/API/HTMLFormElement/reset
+tags:
+  - скидання форми
+translation_of: Web/API/HTMLFormElement/reset
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Метод <code><strong>HTMLFormElement.reset()</strong></code> відновлює значення елемента форми за замовчуванням.  Цей метод робить те ж саме, що і натискання кнопки скидання форми. </p>
+
+<p>Якщо елемент управління форми (наприклад, кнопка скидання) має ім'я або ідентифікатор скидання, він маскує метод скидання форми. Він не скидає інші атрибути <code>input</code> елемента, наприклад, <code>disabled</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js"><em>HTMLFormElement</em>.reset()
+</pre>
+
+<h2 id="Example" name="Example">Приклад</h2>
+
+<pre>&lt;form&gt;
+    &lt;input type="text" size="350" value="Приймеш синю пігулку - і казці кінець. Ти прокинешся у своєму ліжку і повіриш, що це був сон. Приймеш червону пігулку - увійдеш до країни чудес. Я покажу тобі, чи глибока кроляча нора."/&gt;
+    &lt;input type="reset" value="Reset"&gt;
+    &lt;button type="reset"&gt;Red&lt;/button&gt;
+    &lt;div id="test"&gt;Blue&lt;/div&gt;
+&lt;/form&gt;
+
+&lt;script&gt;
+  // тут ми будем зберігати елемент, при нажатті на який ініціювало reset подію
+  let resetElement = undefined;
+
+  // додамо прослуховувач click події до елементів, які дозволяють скинути значення форми
+  document.querySelectorAll("*[type=reset], #test").forEach(element =&gt; element.addEventListener("click", e =&gt; {
+    resetElement = e.target;
+  }));
+
+  // при активації клік події виклечемо .reset() на FORM елементі
+  document.querySelector("#test").addEventListener("click", e =&gt; e.target.parentNode.reset());
+
+ // переконаємося в тому, що .reset() ініціює подію
+ window.addEventListener("reset", e =&gt; {
+    console.log(e.type, " has been initiated by: ", resetElement.tagName);
+    resetElement = undefined;
+  })
+&lt;/script&gt;</pre>
+
+<h2 id="Specification" name="Specification">Специфікація</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-form-reset', 'HTMLFormElement: reset')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("api.HTMLFormElement.reset")}}</p>
diff --git a/files/uk/web/api/htmlimageelement/image/index.html b/files/uk/web/api/htmlimageelement/image/index.html
new file mode 100644
index 0000000000..1477430aae
--- /dev/null
+++ b/files/uk/web/api/htmlimageelement/image/index.html
@@ -0,0 +1,117 @@
+---
+title: Image()
+slug: Web/API/HTMLImageElement/Image
+tags:
+  - Constructor
+  - DOM
+  - HTML DOM
+  - HTMLImageElement
+  - Довідка
+translation_of: Web/API/HTMLImageElement/Image
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<div>Конструктор <strong><code>Image()</code></strong> створює новий примірник {{domxref("HTMLImageElement")}}. Наслідком є те саме, що й для {{domxref("Document.createElement()", "document.createElement('img')")}}.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js"><span style="font-family: courier new,andale mono,monospace; line-height: normal;">new Image(width, height</span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">)</span></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt>width {{optional_inline}}</dt>
+ <dd>Ширина зображення (визначає значення атрибута {{htmlattrxref("width", "img")}}).</dd>
+ <dt>height {{optional_inline}}</dt>
+ <dd>Висота зображення (визначає значення атрибута {{htmlattrxref("height", "img")}}).</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>У наведеному прикладі створюється елемент <code>&lt;img&gt;</code> завбільшки 100x200, до нього завантажується якесь зображення та додається до тіла документа:</p>
+
+<pre class="brush: js">var image = new Image(100, 200);
+image.onload = function() {
+  // Додати у DOM
+  document.body.appendChild(image);
+};
+image.src = '/assets/зразок.png';</pre>
+
+<p>Того ж можна досягти оголошенням такого HTML-елемента просто всередині {{htmlelement("body")}}:</p>
+
+<pre class="brush: html">&lt;img width="100" height="200" src="/assets/зразок.png"&gt;</pre>
+
+<p>Але перевагою створення <code>&lt;img&gt;</code> за допомогою конструктора <code>Image()</code> є можливість додати зображення у DOM лише після його завантаження (завдяки обробникові події <code>load</code>).</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "embedded-content.html#dom-image", "Image()")}}</td>
+   <td>{{spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/uk/web/api/htmlimageelement/index.html b/files/uk/web/api/htmlimageelement/index.html
new file mode 100644
index 0000000000..0f227e69f3
--- /dev/null
+++ b/files/uk/web/api/htmlimageelement/index.html
@@ -0,0 +1,401 @@
+---
+title: HTMLImageElement
+slug: Web/API/HTMLImageElement
+tags:
+  - API
+  - HTML DOM
+  - HTMLImageElement
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - img
+translation_of: Web/API/HTMLImageElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>The <strong><code>HTMLImageElement</code></strong> interface provides special properties and methods  for manipulating the layout and presentation of {{HTMLElement("img")}} elements.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLImageElement.align")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} indicating the alignment of the image with respect to the surrounding context.</dd>
+ <dt>{{domxref("HTMLImageElement.alt")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("alt", "img")}} HTML attribute,  thus indicating fallback context for the image.</dd>
+ <dt>{{domxref("HTMLImageElement.border")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that is responsible for the width of the border surrounding the image. This is now deprecated and the CSS {{cssxref("border")}} property should be used instead.</dd>
+ <dt>{{domxref("HTMLImageElement.complete")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} that is <code>true</code> if the browser has finished fetching the image, whether successful or not. It also shows true, if the image has no {{domxref("HTMLImageElement.src", "src")}} value.</dd>
+ <dt>{{domxref("HTMLImageElement.crossOrigin")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the CORS setting for this image element. See <a href="/en-US/docs/HTML/CORS_settings_attributes">CORS settings attributes</a> for further details.</dd>
+ <dt>{{domxref("HTMLImageElement.currentSrc")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the URL to the currently displayed image (which may change, for example in response to media queries).</dd>
+ <dt>{{domxref("HTMLImageElement.height")}}</dt>
+ <dd>Is a <code>unsigned long</code> that reflects the {{htmlattrxref("height", "img")}} HTML attribute, indicating the rendered height of the image in CSS pixels.</dd>
+ <dt>{{domxref("HTMLImageElement.hspace")}} {{obsolete_inline}}</dt>
+ <dd>Is a <code>long</code> representing the space on either side of the image.</dd>
+ <dt>{{domxref("HTMLImageElement.isMap")}}</dt>
+ <dd>Is a {{domxref("Boolean")}} that reflects the {{htmlattrxref("ismap", "img")}} HTML attribute, indicating that the image is part of a server-side image map.</dd>
+ <dt>{{domxref("HTMLImageElement.longDesc")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the URI of a long description of the image.</dd>
+ <dt>{{domxref("HTMLImageElement.lowSrc")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that refers to a low-quality (but faster to load) copy of the image.</dd>
+ <dt>{{domxref("HTMLImageElement.name")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the name of the element.</dd>
+ <dt>{{domxref("HTMLImageElement.naturalHeight")}} {{readonlyInline}}</dt>
+ <dd>Returns a <code>unsigned long</code> representing the intrinsic height of the image in CSS pixels, if it is available; else, it shows <code>0</code>.</dd>
+ <dt>{{domxref("HTMLImageElement.naturalWidth")}} {{readonlyInline}}</dt>
+ <dd>Returns a <code>unsigned long</code> representing the intrinsic width of the image in CSS pixels, if it is available; otherwise, it will show <code>0</code>.</dd>
+ <dt>{{domxref("HTMLImageElement.referrerPolicy")}} {{experimental_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("referrerpolicy", "img")}} HTML attribute indicating which referrer to use in order to fetch the image.</dd>
+ <dt>{{domxref("HTMLImageElement.src")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("src", "img")}} HTML attribute, containing the full URL of the image including base URI.</dd>
+ <dt>{{domxref("HTMLImageElement.sizes")}} {{experimental_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} reflecting the {{htmlattrxref("sizes", "img")}} HTML attribute.</dd>
+ <dt>{{domxref("HTMLImageElement.srcset")}} {{experimental_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} reflecting the {{htmlattrxref("srcset", "img")}} HTML attribute, containing a list of candidate images, separated by a comma (<code>',', U+002C COMMA</code>). A candidate image is a URL followed by a <code>'w'</code> with the width of the images, or an <code>'x'</code> followed by the pixel density.</dd>
+ <dt>{{domxref("HTMLImageElement.useMap")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("usemap", "img")}} HTML attribute, containing a partial URL of a map element.</dd>
+ <dt>{{domxref("HTMLImageElement.vspace")}} {{obsolete_inline}}</dt>
+ <dd>Is a <code>long</code> representing the space above and below the image.</dd>
+ <dt>{{domxref("HTMLImageElement.width")}}</dt>
+ <dd>Is a <code>unsigned long</code> that reflects the {{htmlattrxref("width", "img")}} HTML attribute, indicating the rendered width of the image in CSS pixels.</dd>
+ <dt>{{domxref("HTMLImageElement.x")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>long</code> representing the horizontal offset from the nearest layer. This property mimics an old Netscape 4 behavior.</dd>
+ <dt>{{domxref("HTMLImageElement.y")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns a <code>long</code> representing the vertical offset from the nearest layer. This property is also similar to behavior of an old Netscape 4.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLImageElement.Image()", "Image()")}}</dt>
+ <dd>The <code>Image()</code> constructor, taking two optional <code>unsigned</code> <code>long</code>, which are the width and the height of the resource, creates an instance of <code>HTMLImageElement</code> , not inserted in a DOM tree.</dd>
+</dl>
+
+<h2 id="Errors">Errors</h2>
+
+<p>If an error occurs while trying to load or render the image, and an {{htmlattrxref("onerror")}} event handler has been configured to handle the {{event("error")}} event, that event handler will get called. This can happen in a number of situations, including:</p>
+
+<ul>
+ <li>The {{htmlattrxref("src", "img")}} attribute is empty or <code>null</code>.</li>
+ <li>The specified <code>src</code> URL is the same as the URL of the page the user is currently on.</li>
+ <li>The specified image is corrupted in some way that prevents it from being loaded.</li>
+ <li>The specified image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in the <code>&lt;img&gt;</code> element's attributes.</li>
+ <li>The specified image is in a format not supported by the {{Glossary("user agent")}}.</li>
+</ul>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">var img1 = new Image(); // HTML5 Constructor
+img1.src = 'image1.png';
+img1.alt = 'alt';
+document.body.appendChild(img1);
+
+var img2 = document.createElement('img'); // use DOM <a href="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/html/nsIDOMHTMLImageElement.idl">HTMLImageElement</a>
+img2.src = 'image2.jpg';
+img2.alt = 'alt text';
+document.body.appendChild(img2);
+
+// using first image in the document
+alert(document.images[0].src);
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Added the <code>referrerPolicy</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#excensions-to-the-htmlimageelement-interface", "Extensions to HTMLImageElement")}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Added the <code>x</code> and <code>y</code> properties.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "embedded-content.html#the-img-element", "HTMLImageElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>The following properties have been added: <code>srcset</code>, <code>currentSrc</code> and <code>sizes</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-img-element", "HTMLImageElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>A constructor (with 2 optional parameters) has been added.<br>
+    The following properties are now obsolete: <code>name</code>, <code>border</code>, <code>align</code>, <code>hspace</code>, <code>vspace</code>, and <code>longdesc</code>.<br>
+    The following properties are now <code>unsigned long</code>, instead of <code>long</code>: <code>height</code>, and <code>width</code>.<br>
+    The following properties have been added: <code>crossorigin</code>, <code>naturalWidth</code>, <code>naturalHeight</code>, and <code>complete</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-17701901', 'HTMLImgElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>The <code>lowSrc</code> property has been removed.<br>
+    The following properties are now <code>long</code>, instead of <code>DOMString</code>: <code>height</code>, <code>width</code>, <code>hspace</code>, and <code>vspace</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-17701901', 'HTMLImgElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>lowSrc</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>naturalWidth</code>, <code>naturalHeight</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>crossorigin</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>complete</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5<sup>[4]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcset</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(34)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(32)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>21</td>
+   <td>{{CompatSafari(7.1)}}</td>
+  </tr>
+  <tr>
+   <td><code>currentSrc </code>{{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(32)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>sizes</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(33)}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>x</code> and <code>y</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>14<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>referrerPolicy</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onerror</code> event handler</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(51)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>lowSrc</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>naturalWidth</code>, <code>naturalHeight</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>crossorigin</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>complete</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcset</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(32)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>iOS 8</td>
+  </tr>
+  <tr>
+   <td><code>currentSrc </code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(32)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>sizes</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(33)}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>x</code> and <code>y</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>14<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>referrerPolicy</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onerror</code> event handler</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(51)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Though, these <code>x</code> and <code>y</code> properties were removed in Gecko 7.0 {{geckoRelease("7.0")}} but later, they were restored in Gecko 14.0 {{geckoRelease("14.0")}} for compatibility reasons.</p>
+
+<p>[2] This feature is behind the <code>dom.image.srcset.enabled</code> preference, defaulting to <code>false</code>.</p>
+
+<p>[3] This feature is behind the <code>dom.image.picture.enabled</code> preference, defaulting to <code>false</code>.</p>
+
+<p>[4] IE reports <code>false</code> for broken images.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML element implementing this interface: {{HTMLElement("img")}}</li>
+</ul>
diff --git a/files/uk/web/api/index.html b/files/uk/web/api/index.html
new file mode 100644
index 0000000000..60714ca304
--- /dev/null
+++ b/files/uk/web/api/index.html
@@ -0,0 +1,26 @@
+---
+title: Список Web API
+slug: Web/API
+translation_of: Web/API
+---
+<p><span class="seoSummary">Під час написання коду розробнику доступна велика кількість Web API (Application Programming Interface, інтерфейс програмування застосунків). Нижче наведено перелік усіх API та інтерфейсів, які ви можете використовувати під час розробки веб-застосунку чи сайту.</span></p>
+
+<p>Web API зазвичай використовуються JavaScript, хоча і не обмежені саме цією мовою програмування.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Нижче наведено список усіх доступних API.</p>
+
+<div>{{ListGroups}}</div>
+
+<h2 id="Інтерфейси">Інтерфейси</h2>
+
+<p>Нижче наведено список усіх доступних інтерфейсів.</p>
+
+<div>{{APIListAlpha}}</div>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/Events">Довідкова інформація по подіям Web API</a></li>
+</ul>
diff --git a/files/uk/web/api/intersection_observer_api/index.html b/files/uk/web/api/intersection_observer_api/index.html
new file mode 100644
index 0000000000..49a9ce1d06
--- /dev/null
+++ b/files/uk/web/api/intersection_observer_api/index.html
@@ -0,0 +1,610 @@
+---
+title: Intersection Observer API
+slug: Web/API/Intersection_Observer_API
+tags:
+  - API
+  - Clipping
+  - Intersection
+  - Intersection Observer API
+  - IntersectionObserver
+  - Overview
+  - Performance
+  - Reference
+  - Web
+  - Швидкодія
+translation_of: Web/API/Intersection_Observer_API
+---
+<div>{{DefaultAPISidebar("Intersection Observer API")}}</div>
+
+<p class="summary"><strong>Intersection Observer API</strong> дозволяє веб-застосункам асинхронно стежити за зміною перетину елемента з його батьком чи областю видимості документа <span class="seoSummary">{{Glossary("viewport")}}</span>.</p>
+
+<p>Історично склалося так, що виявлення видимості окремого елемента чи видимості двох елементів по відношенню один до одного було непростою задачею. Варіанти вирішення цієї задачі були ненадійними і сповільнювали роботу браузера. На жаль, з "дорослішанням" вебу, необхідність у вирішенні цієї проблеми тільки зростала, з різних причин, таких як:</p>
+
+<ul>
+ <li>Відкладене завантаження зображень чи іншого контенту по мірі прокрутки сторінки.</li>
+ <li>Реалізація веб-сайтів з "безкінечним скролом", де контент підвантажується по мірі того як сторінка прокручується вниз, і користувачу не потрібно переключатися між сторінками.</li>
+ <li>Звіт про видимість реклами з метою порахувати доходи від неї.</li>
+ <li>Прийняття рішення, запускати чи ні якийсь процес чи анімацію в залежності від того, побачить користувач результат чи ні.</li>
+</ul>
+
+<p>Раніше реалізація виявлення пересічення елементів означала використання обробників подій і циклів, викликаючих методи типу {{domxref("Element.getBoundingClientRect()")}}, щоб зібрати необхідну інформацію про кожен зачеплений елемент. Оскільки весь цей код працює в основному потоці, виникають проблеми з продуктивністю.</p>
+
+<p>Розглянемо веб-сторінку з безкінечним скролом. На сторінці використовується бібліотека для керування періодично розміщуваною по всій сторінці рекламою, всюди анімована графіка, а також бібліотека для відображення спливаючих вікон. І всі ці речі використовують свої власні правила для визначення перетинів, і всі вони запущені в основному потоці. Автор сайту може навіть не підозрювати про цю проблему, а також може не знати, як працюють сторонні бібліотеки зсередини. В той же час користувач по ходу прокрутки сторінки стикається з тим, що робота сайта сповільнюється постійним спрацьовуванням виявлення перетинів, що в підсумку призводить до того, що користувач не задоволений браузером, сайтом і своїм комп'ютером.</p>
+
+<p><strong>Intersection Observer API</strong> дає можливість зареєструвати callback-функцію, яка виконається при перетині спостережуваним елементом кордонів іншого елемента (чи області видимості документа {{Glossary("viewport")}}), або при зміні величини перетину на визначене значення. Таким чином, більше немає необхідності вираховувати перетин елементів в основному потоці, і браузер може оптимізовувати ці процеси на свій погляд.</p>
+
+<p>Observer API не дозволить дізнатися точне число пікселів чи визначати конкретні пікселі в перетині; проте, його використання покриває найбільш поширені випадки, наприклад <em>"Якщо елементи перетинаються на N%, зроби це і це"</em>.</p>
+
+<h2 id="Основні_поняття_і_використання_Intersection_Observer_API">Основні поняття і використання <strong>Intersection Observer API </strong></h2>
+
+<p>Intersection Observer API дозволяє вказати функцію, яка буде викликана щоразу для елемента (target) при перетині його з областю видимості документа (по-замовчуванню) чи заданим елементом (root).</p>
+
+<p>Зазвичай, використовується відстеження перетину елементу з областю видимості (необхідно вказати  <code>null</code> в якості кореневого елементу).</p>
+
+<p>Чи використовуємо ми область видимості чи інший елемент в якості кореневого, API працює однаково, викликаючи задану вами функцію зворотнього виклику, щоразу, коли видимість цільового елементу змінюється так, що вона перетинає в потрібному ступені кореневий елемент.</p>
+
+<p>Ступінь перетину цільового і кореневого елементу задається в діапазоні від 0.0 до 1.0, де 1.0 це повний перетин цільовим елементом кордонів кореневого.</p>
+
+<h3 id="Створення_intersection_observer">Створення intersection observer</h3>
+
+<p>Для початку з допомогою конструктору потрібно створити об'єкт-спостерігач, вказати для нього функцію для виклику і налаштування відстеження:</p>
+
+<pre class="brush: js notranslate">let options = {
+  root: document.querySelector('#scrollArea'),
+  rootMargin: '0px',
+  threshold: 1.0
+}
+
+let observer = new IntersectionObserver(callback, options);
+</pre>
+
+<p>Параметр <strong>threshold</strong> зі значенням <strong>1.0</strong> означає що функція буде викликана при 100% перетину об'єкта (за яким ми стежимо) з об'єктом root.</p>
+
+<h4 id="Налаштування_Intersection_observer">Налаштування Intersection observer</h4>
+
+<p>The <code>options</code> object passed into the {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} constructor let you control the circumstances under which the observer's callback is invoked. It has the following fields:</p>
+
+<dl>
+ <dt><code>root</code></dt>
+ <dd>Елемент який використовується в якості області перегляду для перевірки видимості цільового елементу. Повинен бути батьком цільового елементу. По замовчуванню використовується область видимості браузера якщо не визначений або має значення  <code>null</code>.</dd>
+ <dt><code>rootMargin</code></dt>
+ <dd>
+ <p>Відступи навколо root. Можуть мати значення як властивість css margin: <code>10px 20px 30px 40px"</code> (top, right, bottom, left). Значення можна задавати у відсотках. По замовчуванню всі параметри встановлені в нулі.</p>
+ </dd>
+ <dt><code>threshold</code></dt>
+ <dd>Число чи масив чисел, який вказує, при якому відсотку видимості цільового елементу повинен спрацювати callback. Наприклад, в цьому випадку callback функція буде викликатися при появі в зоні видимості кожні 25% цільового елементу: [0, 0.25, 0.5, 0.75, 1]. Дефолтне значення 0 (як тільки хоча б один піксель стане видимим, то буде викликаний колбек). Значення 1.0 означає, що увесь елемент повністю має стати видимим перед тим, як буде викликано колбек.</dd>
+</dl>
+
+<h4 id="Цільовий_елемент_який_буде_спостерігатися">Цільовий елемент, який буде спостерігатися</h4>
+
+<p>Після того, як ви створили спостерігача, вам потрібно дати йому цільовий елемент для перегляду:</p>
+
+<pre class="brush: js notranslate">let target = document.querySelector('#listItem');
+observer.observe(target);
+
+// the callback we setup for the observer will be executed now for the first time
+// it waits until we assign a target to our observer (even if the target is currently not visible)
+</pre>
+
+<p>Щоразу, коли ціль досягає порогового значення, вказаного для IntersectionObserver, викликається функція зворотнього виклику callback. Де callback отримує список об'єктів IntersectionObserverEntry і спостерігача:</p>
+
+<pre class="brush: js notranslate">let callback = (entries, observer) =&gt; {
+  entries.forEach(entry =&gt; {
+    // Each entry describes an intersection change for one observed
+    // target element:
+    //   entry.boundingClientRect
+    //   entry.intersectionRatio
+    //   entry.intersectionRect
+    //   entry.isIntersecting
+    //   entry.rootBounds
+    //   entry.target
+    //   entry.time
+  });
+};
+</pre>
+
+<p>Зверніть увагу, що функція зворотнього виклику запускається в головному потоці і повинна виконуватися якнайшвидше, тому якщо щось забирає багато часу, то використовуйте {{domxref("Window.requestIdleCallback()")}}.</p>
+
+<p>Також зверніть увагу, що якщо ви вказали опцію <code>root</code>, цільовий елемент повинен бути потомком кореневого елементу. </p>
+
+<h3 id="How_intersection_is_calculated">How intersection is calculated</h3>
+
+<p>All areas considered by the Intersection Observer API are rectangles; elements which are irregularly shaped are considered as occupying the smallest rectangle which encloses all of the element's parts. Similarly, if the visible portion of an element is not rectangular, the element's intersection rectangle is construed to be the smallest rectangle that contains all the visible portions of the element.</p>
+
+<p>It's useful to understand a bit about how the various properties provided by {{domxref("IntersectionObserverEntry")}} describe an intersection.</p>
+
+<h4 id="The_intersection_root_and_root_margin">The intersection root and root margin</h4>
+
+<p>Before we can track the intersection of an element with a container, we need to know what that container is. That container is the <strong>intersection root</strong>, or <strong>root element</strong>. This can be either a specific element in the document which is an ancestor of the element to be observed, or <code>null</code> to use the document's viewport as the container.</p>
+
+<p>The <strong><dfn>root intersection rectangle</dfn></strong> is the rectangle used to check against the target or targets. This rectangle is determined like this:</p>
+
+<ul>
+ <li>If the intersection root is the implicit root (that is, the top-level {{domxref("Document")}}), the root intersection rectangle is the viewport's rectangle.</li>
+ <li>If the intersection root has an overflow clip, the root intersection rectangle is the root element's content area.</li>
+ <li>Otherwise, the root intersection rectangle is the intersection root's bounding client rectangle (as returned by calling {{domxref("Element.getBoundingClientRect", "getBoundingClientRect()")}} on it).</li>
+</ul>
+
+<p>The root intersection rectangle can be adjusted further by setting the <strong>root margin</strong>, <code>rootMargin</code>, when creating the {{domxref("IntersectionObserver")}}. The values in <code>rootMargin</code> define offsets added to each side of the intersection root's bounding box to create the final intersection root bounds (which are disclosed in {{domxref("IntersectionObserverEntry.rootBounds")}} when the callback is executed).</p>
+
+<h4 id="Thresholds">Thresholds</h4>
+
+<p>Rather than reporting every infinitesimal change in how much a target element is visible, the Intersection Observer API uses <strong>thresholds</strong>. When you create an observer, you can provide one or more numeric values representing percentages of the target element which are visible. Then, the API only reports changes to visibility which cross these thresholds.</p>
+
+<p>For example, if you want to be informed every time a target's visibility passes backward or forward through each 25% mark, you would specify the array [0, 0.25, 0.5, 0.75, 1] as the list of thresholds when creating the observer. You can tell which direction the visibility changed in (that is, whether the element became more visible or less visible) by checking the value of the {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}} property on the {{domxref("IntersectionObserverEntry")}} passed into the callback function at the time of the visibility change. If <code>isIntersecting</code> is <code>true</code>, the target element has become at least as visible as the threshold that was passed. If it's <code>false</code>, the target is no longer as visible as the given threshold.</p>
+
+<p>To get a feeling for how thresholds work, try scrolling the box below around. Each colored box within it displays the percentage of itself that's visible in all four of its corners, so you can see these ratios change over time as you scroll the container. Each box has a different set of thresholds:</p>
+
+<ul>
+ <li>The first box has a threshold for each percentage point of visibility; that is, the {{domxref("IntersectionObserver.thresholds")}} array is <code>[0.00, 0.01, 0.02, ..., 0.99, 1.00]</code>.</li>
+ <li>The second box has a single threshold, at the 50% mark.</li>
+ <li>The third box has thresholds every 10% of visibility (0%, 10%, 20%, etc.).</li>
+ <li>The last box has thresholds each 25%.</li>
+</ul>
+
+<div class="hidden">
+<h5 id="Threshold_example">Threshold example</h5>
+
+<pre class="brush: html notranslate">&lt;template id="boxTemplate"&gt;
+  &lt;div class="sampleBox"&gt;
+    &lt;div class="label topLeft"&gt;&lt;/div&gt;
+    &lt;div class="label topRight"&gt;&lt;/div&gt;
+    &lt;div class="label bottomLeft"&gt;&lt;/div&gt;
+    &lt;div class="label bottomRight"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/template&gt;
+
+&lt;main&gt;
+  &lt;div class="contents"&gt;
+    &lt;div class="wrapper"&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/main&gt;</pre>
+
+<pre class="brush: css notranslate">.contents {
+  position: absolute;
+  width: 700px;
+  height: 1725px;
+}
+
+.wrapper {
+  position: relative;
+  top: 600px;
+}
+
+.sampleBox {
+  position: relative;
+  left: 175px;
+  width: 150px;
+  background-color: rgb(245, 170, 140);
+  border: 2px solid rgb(201, 126, 17);
+  padding: 4px;
+  margin-bottom: 6px;
+}
+
+#box1 {
+  height: 200px;
+}
+
+#box2 {
+  height: 75px;
+}
+
+#box3 {
+  height: 150px;
+}
+
+#box4 {
+  height: 100px;
+}
+
+.label {
+  font: 14px "Open Sans", "Arial", sans-serif;
+  position: absolute;
+  margin: 0;
+  background-color: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(0, 0, 0, 0.7);
+  width: 3em;
+  height: 18px;
+  padding: 2px;
+  text-align: center;
+}
+
+.topLeft {
+  left: 2px;
+  top: 2px;
+}
+
+.topRight {
+  right: 2px;
+  top: 2px;
+}
+
+.bottomLeft {
+  bottom: 2px;
+  left: 2px;
+}
+
+.bottomRight {
+  bottom: 2px;
+  right: 2px;
+}
+</pre>
+
+<pre class="brush: js notranslate">let observers = [];
+
+startup = () =&gt; {
+  let wrapper = document.querySelector(".wrapper");
+
+  // Options for the observers
+
+  let observerOptions = {
+    root: null,
+    rootMargin: "0px",
+    threshold: []
+  };
+
+  // An array of threshold sets for each of the boxes. The
+  // first box's thresholds are set programmatically
+  // since there will be so many of them (for each percentage
+  // point).
+
+  let thresholdSets = [
+    [],
+    [0.5],
+    [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
+    [0, 0.25, 0.5, 0.75, 1.0]
+  ];
+
+  for (let i=0; i&lt;=1.0; i+= 0.01) {
+    thresholdSets[0].push(i);
+  }
+
+  // Add each box, creating a new observer for each
+
+  for (let i=0; i&lt;4; i++) {
+    let template = document.querySelector("#boxTemplate").content.cloneNode(true);
+    let boxID = "box" + (i+1);
+    template.querySelector(".sampleBox").id = boxID;
+    wrapper.appendChild(document.importNode(template, true));
+
+    // Set up the observer for this box
+
+    observerOptions.threshold = thresholdSets[i];
+    observers[i] = new IntersectionObserver(intersectionCallback, observerOptions);
+    observers[i].observe(document.querySelector("#" + boxID));
+  }
+
+  // Scroll to the starting position
+
+  document.scrollingElement.scrollTop = wrapper.firstElementChild.getBoundingClientRect().top + window.scrollY;
+  document.scrollingElement.scrollLeft = 750;
+}
+
+intersectionCallback = (entries) =&gt; {
+  entries.forEach((entry) =&gt; {
+    let box = entry.target;
+    let visiblePct = (Math.floor(entry.intersectionRatio * 100)) + "%";
+
+    box.querySelector(".topLeft").innerHTML = visiblePct;
+    box.querySelector(".topRight").innerHTML = visiblePct;
+    box.querySelector(".bottomLeft").innerHTML = visiblePct;
+    box.querySelector(".bottomRight").innerHTML = visiblePct;
+  });
+}
+
+startup();
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("Threshold_example", 500, 500)}}</p>
+
+<h4 id="Clipping_and_the_intersection_rectangle">Clipping and the intersection rectangle</h4>
+
+<p>The browser computes the final intersection rectangle as follows; this is all done for you, but it can be helpful to understand these steps in order to better grasp exactly when intersections will occur.</p>
+
+<ol>
+ <li>The target element's bounding rectangle (that is, the smallest rectangle that fully encloses the bounding boxes of every component that makes up the element) is obtained by calling {{domxref("Element.getBoundingClientRect", "getBoundingClientRect()")}} on the target. This is the largest the intersection rectangle may be. The remaining steps will remove any portions that don't intersect.</li>
+ <li>Starting at the target's immediate parent block and moving outward, each containing block's clipping (if any) is applied to the intersection rectangle. A block's clipping is determined based on the intersection of the two blocks and the clipping mode (if any) specified by the {{cssxref("overflow")}} property. Setting <code>overflow</code> to anything but <code>visible</code> causes clipping to occur.</li>
+ <li>If one of the containing elements is the root of a nested browsing context (such as the document contained in an {{HTMLElement("iframe")}}, the intersection rectangle is clipped to the containing context's viewport, and recursion upward through the containers continues with the container's containing block. So if the top level of an <code>&lt;iframe&gt;</code> is reached, the intersection rectangle is clipped to the frame's viewport, then the frame's parent element is the next block recursed through toward the intersection root.</li>
+ <li>When recursion upward reaches the intersection root, the resulting rectangle is mapped to the intersection root's coordinate space.</li>
+ <li>The resulting rectangle is then updated by intersecting it with the <a href="/en-US/docs/Web/API/Intersection_Observer_API#root-intersection-rectangle">root intersection rectangle</a>.</li>
+ <li>This rectangle is, finally, mapped to the coordinate space of the target's {{domxref("document")}}.</li>
+</ol>
+
+<h3 id="Intersection_change_callbacks">Intersection change callbacks</h3>
+
+<p>When the amount of a target element which is visible within the root element crosses one of the visibility thresholds, the {{domxref("IntersectionObserver")}} object's callback is executed. The callback receives as input an array of all of <code>IntersectionObserverEntry</code> objects, one for each threshold which was crossed, and a reference to the <code>IntersectionObserver</code> object itself.</p>
+
+<p>Each entry in the list of thresholds is an {{domxref("IntersectionObserverEntry")}} object describing one threshold that was crossed; that is, each entry describes how much of a given element is intersecting with the root element, whether or not the element is considered to be intersecting or not, and the direction in which the transition occurred.</p>
+
+<p>The code snippet below shows a callback which keeps a counter of how many times elements transition from not intersecting the root to intersecting by at least 75%.</p>
+
+<pre class="brush: js notranslate">intersectionCallback(entries) =&gt; {
+  entries.forEach(entry =&gt; {
+    if (entry.isIntersecting) {
+      let elem = entry.target;
+
+      if (entry.intersectionRatio &gt;= 0.75) {
+        intersectionCounter++;
+      }
+    }
+  });
+}
+</pre>
+
+<h2 id="Інтерфейси">Інтерфейси</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver")}}</dt>
+ <dd>Основний інтерфейс для API Intersection Observer. Надає методи для створення і керування observer, який може спостерігати будь-яку кількість цільових елементів для однієї і тієї ж конфігурації перетину. Кожен observer може асинхронно спостерігати зміни в перетині між одним чи кількома цільовими елементами і спільним елементом-батьком чи з їх верхнім рівнем Document's viewport. Батько чи область перегляду згадується як <strong>root</strong>.</dd>
+ <dt>{{domxref("IntersectionObserverEntry")}}</dt>
+ <dd>
+ <p>Описує перетин між цільовим елементом і його кореневим контейнером в певний момент переходу. Об'єкти цього типу можуть бути отримані тільки двома способами: в якості вхідних даних для вашого зворотнього виклику <code>IntersectionObserver</code> чи шляхом виклику {{domxref("IntersectionObserver.takeRecords()")}}.</p>
+ </dd>
+</dl>
+
+<h2 id="A_simple_example">A simple example</h2>
+
+<p>This simple example causes a target element to change its color and transparency as it becomes more or less visible. At <a href="/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a>, you can find a more extensive example showing how to time how long a set of elements (such as ads) are visible to the user and to react to that information by recording statistics or by updating elements..</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>The HTML for this example is very short, with a primary element which is the box that we'll be targeting (with the creative ID <code>"box"</code>) and some contents within the box.</p>
+
+<pre class="brush: html notranslate">&lt;div id="box"&gt;
+  &lt;div class="vertical"&gt;
+    Welcome to &lt;strong&gt;The Box!&lt;/strong&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>The CSS isn't terribly important for the purposes of this example; it lays out the element and establishes that the {{cssxref("background-color")}} and {{cssxref("border")}} attributes can participate in <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transitions</a>, which we'll use to affect the changes to the element as it becomes more or less obscured.</p>
+
+<pre class="brush: css notranslate">#box {
+  background-color: rgba(40, 40, 190, 255);
+  border: 4px solid rgb(20, 20, 120);
+  transition: background-color 1s, border 1s;
+  width: 350px;
+  height: 350px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.vertical {
+  color: white;
+  font: 32px "Arial";
+}
+
+.extra {
+  width: 350px;
+  height: 350px;
+  margin-top: 10px;
+  border: 4px solid rgb(20, 20, 120);
+  text-align: center;
+  padding: 20px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Finally, let's take a look at the JavaScript code that uses the Intersection Observer API to make things happen.</p>
+
+<h4 id="Setting_up">Setting up</h4>
+
+<p>First, we need to prepare some variables and install the observer.</p>
+
+<pre class="brush: js notranslate">const numSteps = 20.0;
+
+let boxElement;
+let prevRatio = 0.0;
+let increasingColor = "rgba(40, 40, 190, ratio)";
+let decreasingColor = "rgba(190, 40, 40, ratio)";
+
+// Set things up
+window.addEventListener("load", (event) =&gt; {
+  boxElement = document.querySelector("#box");
+
+  createObserver();
+}, false);</pre>
+
+<p>The constants and variables we set up here are:</p>
+
+<dl>
+ <dt><code>numSteps</code></dt>
+ <dd>A constant which indicates how many thresholds we want to have between a visibility ratio of 0.0 and 1.0.</dd>
+ <dt><code>prevRatio</code></dt>
+ <dd>This variable will be used to record what the visibility ratio was the last time a threshold was crossed; this will let us figure out whether the target element is becoming more or less visible.</dd>
+ <dt><code>increasingColor</code></dt>
+ <dd>A string defining a color we'll apply to the target element when the visibility ratio is increasing. The word "ratio" in this string will be replaced with the target's current visibility ratio, so that the element not only changes color but also becomes increasingly opaque as it becomes less obscured.</dd>
+ <dt><code>decreasingColor</code></dt>
+ <dd>Similarly, this is a string defining a color we'll apply when the visibility ratio is decreasing.</dd>
+</dl>
+
+<p>We call {{domxref("EventTarget.addEventListener", "Window.addEventListener()")}} to start listening for the {{event("load")}} event; once the page has finished loading, we get a reference to the element with the ID <code>"box"</code> using {{domxref("Document.querySelector", "querySelector()")}}, then call the <code>createObserver()</code> method we'll create in a moment to handle building and installing the intersection observer.</p>
+
+<h4 id="Creating_the_intersection_observer">Creating the intersection observer</h4>
+
+<p>The <code>createObserver()</code> method is called once page load is complete to handle actually creating the new {{domxref("IntersectionObserver")}} and starting the process of observing the target element.</p>
+
+<pre class="brush: js notranslate">function createObserver() {
+  let observer;
+
+  let options = {
+    root: null,
+    rootMargin: "0px",
+    threshold: buildThresholdList()
+  };
+
+  observer = new IntersectionObserver(handleIntersect, options);
+  observer.observe(boxElement);
+}</pre>
+
+<p>This begins by setting up an <code>options</code> object containing the settings for the observer. We want to watch for changes in visibility of the target element relative to the document's viewport, so <code>root</code> is <code>null</code>. We need no margin, so the margin offset, <code>rootMargin</code>, is specified as "0px". This causes the observer to watch for changes in the intersection between the target element's bounds and those of the viewport, without any added (or subtracted) space.</p>
+
+<p>The list of visibility ratio thresholds, <code>threshold</code>, is constructed by the function <code>buildThresholdList()</code>. The threshold list is built programmatically in this example since there are a number of them and the number is intended to be adjustable.</p>
+
+<p>Once <code>options</code> is ready, we create the new observer, calling the {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} constructor, specifying a function to be called when intersection crosses one of our thresholds, <code>handleIntersect()</code>, and our set of options. We then call {{domxref("IntersectionObserver.observe", "observe()")}} on the returned observer, passing into it the desired target element.</p>
+
+<p>We could opt to monitor multiple elements for visibility intersection changes with respect to the viewport by calling <code>observer.observe()</code> for each of those elements, if we wanted to do so.</p>
+
+<h4 id="Building_the_array_of_threshold_ratios">Building the array of threshold ratios</h4>
+
+<p>The <code>buildThresholdList()</code> function, which builds the list of thresholds, looks like this:</p>
+
+<pre class="brush: js notranslate">function buildThresholdList() {
+  let thresholds = [];
+  let numSteps = 20;
+
+  for (let i=1.0; i&lt;=numSteps; i++) {
+    let ratio = i/numSteps;
+    thresholds.push(ratio);
+  }
+
+  thresholds.push(0);
+  return thresholds;
+}</pre>
+
+<p>This builds the array of thresholds—each of which is a ratio between 0.0 and 1.0, by pushing the value <code>i/numSteps</code> onto the <code>thresholds</code> array for each integer <code>i</code> between 1 and <code>numSteps</code>. It also pushes 0 to include that value. The result, given the default value of <code>numSteps</code> (20), is the following list of thresholds:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>#</th>
+   <th>Ratio</th>
+   <th>#</th>
+   <th>Ratio</th>
+  </tr>
+  <tr>
+   <th>1</th>
+   <td>0.05</td>
+   <th>11</th>
+   <td>0.55</td>
+  </tr>
+  <tr>
+   <th>2</th>
+   <td>0.1</td>
+   <th>12</th>
+   <td>0.6</td>
+  </tr>
+  <tr>
+   <th>3</th>
+   <td>0.15</td>
+   <th>13</th>
+   <td>0.65</td>
+  </tr>
+  <tr>
+   <th>4</th>
+   <td>0.2</td>
+   <th>14</th>
+   <td>0.7</td>
+  </tr>
+  <tr>
+   <th>5</th>
+   <td>0.25</td>
+   <th>15</th>
+   <td>0.75</td>
+  </tr>
+  <tr>
+   <th>6</th>
+   <td>0.3</td>
+   <th>16</th>
+   <td>0.8</td>
+  </tr>
+  <tr>
+   <th>7</th>
+   <td>0.35</td>
+   <th>17</th>
+   <td>0.85</td>
+  </tr>
+  <tr>
+   <th>8</th>
+   <td>0.4</td>
+   <th>18</th>
+   <td>0.9</td>
+  </tr>
+  <tr>
+   <th>9</th>
+   <td>0.45</td>
+   <th>19</th>
+   <td>0.95</td>
+  </tr>
+  <tr>
+   <th>10</th>
+   <td>0.5</td>
+   <th>20</th>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>We could, of course, hard-code the array of thresholds into our code, and often that's what you'll end up doing. But this example leaves room for adding configuration controls to adjust the granularity, for example.</p>
+
+<h4 id="Handling_intersection_changes">Handling intersection changes</h4>
+
+<p>When the browser detects that the target element (in our case, the one with the ID <code>"box"</code>) has been unveiled or obscured such that its visibility ratio crosses one of the thresholds in our list, it calls our handler function, <code>handleIntersect()</code>:</p>
+
+<pre class="brush: js notranslate">function handleIntersect(entries, observer) {
+  entries.forEach((entry) =&gt; {
+    if (entry.intersectionRatio &gt; prevRatio) {
+      entry.target.style.backgroundColor = increasingColor.replace("ratio", entry.intersectionRatio);
+    } else {
+      entry.target.style.backgroundColor = decreasingColor.replace("ratio", entry.intersectionRatio);
+    }
+
+    prevRatio = entry.intersectionRatio;
+  });
+}</pre>
+
+<p>For each {{domxref("IntersectionObserverEntry")}} in the list <code>entries</code>, we look to see if the entry's {{domxref("IntersectionObserverEntry.intersectionRatio", "intersectionRatio")}} is going up; if it is, we set the target's {{cssxref("background-color")}} to the string in <code>increasingColor</code> (remember, it's <code>"rgba(40, 40, 190, ratio)"</code>), replaces the word "ratio" with the entry's <code>intersectionRatio</code>. The result: not only does the color get changed, but the transparency of the target element changes, too; as the intersection ratio goes down, the background color's alpha value goes down with it, resulting in an element that's more transparent.</p>
+
+<p>Similarly, if the <code>intersectionRatio</code> is going down, we use the string <code>decreasingColor</code> and replace the word "ratio" in that with the <code>intersectionRatio</code> before setting the target element's <code>background-color</code>.</p>
+
+<p>Finally, in order to track whether the intersection ratio is going up or down, we remember the current ratio in the variable <code>prevRatio</code>.</p>
+
+<h3 id="Result">Result</h3>
+
+<p>Below is the resulting content. Scroll this page up and down and notice how the appearance of the box changes as you do so.</p>
+
+<p>{{EmbedLiveSample('A_simple_example', 400, 400)}}</p>
+
+<p>There's an even more extensive example at <a href="/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('IntersectionObserver')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.IntersectionObserver")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://github.com/w3c/IntersectionObserver">Intersection Observer polyfill</a></li>
+ <li><a href="/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a></li>
+ <li>{{domxref("IntersectionObserver")}} and {{domxref("IntersectionObserverEntry")}}</li>
+</ul>
+
+<div id="gtx-trans" style="position: absolute; left: 22px; top: 11013px;">
+<div class="gtx-trans-icon"></div>
+</div>
diff --git a/files/uk/web/api/mediaquerylist/addlistener/index.html b/files/uk/web/api/mediaquerylist/addlistener/index.html
new file mode 100644
index 0000000000..f908e9cf49
--- /dev/null
+++ b/files/uk/web/api/mediaquerylist/addlistener/index.html
@@ -0,0 +1,82 @@
+---
+title: MediaQueryList.addListener()
+slug: Web/API/MediaQueryList/addListener
+tags:
+  - API
+  - MediaQueryList
+  - Довідка
+  - Медіа-запити
+  - метод
+translation_of: Web/API/MediaQueryList/addListener
+---
+<div>{{APIRef("CSSOM View")}}</div>
+
+<p>Метод <code><strong>addListener()</strong></code> інтерфейсу {{domxref("MediaQueryList")}} додає слухача до <code>MediaQueryListener</code>, який викличе вказану функцію щойно стан медіа-запиту зміниться.</p>
+
+<p>Цей метод є простим скороченням для {{domxref("EventTarget.addEventListener()")}} задля зворотньої сумісності. В старших веб-переглядачах доводиться використовувати <code>addListener</code> замість <code>addEventListener</code>, тоді як в нових <code>MediaQueryList</code> просто успадковує <code>EventTarget</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>MediaQueryList.addListener(func)</em></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>func</code></dt>
+ <dd>Функція-слухач, яку буде викликано щораз, як зміниться стан медіа-запиту. В первинній реалізації слухачем був об'єкт {{domxref("MediaQueryListListener")}}, а в новій вже використано звичайний механізм подій, тож слухач — це звичайна функція, а об'єкт події {{domxref("MediaQueryListEvent")}} успадковано від {{domxref("Event")}}.</dd>
+</dl>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>Нічого.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">var mql = window.matchMedia('(max-width: 600px)');
+
+function screenTest(e) {
+  if (e.matches) {
+    // Вікно є вужчим за 600 пікселів (або ж точно 600)
+    para.textContent = 'Маємо вузький екран, щонайбільше 600px';
+    document.body.style.backgroundColor = 'red';
+  } else {
+    // Вікно є ширшим за 600 пікселів
+    para.textContent = 'Маємо широкий екран — понад 600px завширшки';
+    document.body.style.backgroundColor = 'blue';
+  }
+}
+
+mql.addListener(screenTest);</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Специфікація</th>
+   <th>Статус</th>
+   <th>Примітка</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-mediaquerylist-addlistener", "addListener")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Початкова виознака</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("api.MediaQueryList.addListener")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/CSS/Media_queries">Медіа-запити</a></li>
+ <li><a href="/uk/docs/CSS/Using_media_queries_from_code">Використання медіа-запитів у коді</a></li>
+ <li>{{domxref("window.matchMedia()")}}</li>
+ <li>{{domxref("MediaQueryList")}}</li>
+ <li>{{domxref("MediaQueryListEvent")}}</li>
+</ul>
diff --git a/files/uk/web/api/mediaquerylist/index.html b/files/uk/web/api/mediaquerylist/index.html
new file mode 100644
index 0000000000..7e22ce652e
--- /dev/null
+++ b/files/uk/web/api/mediaquerylist/index.html
@@ -0,0 +1,109 @@
+---
+title: MediaQueryList
+slug: Web/API/MediaQueryList
+tags:
+  - API
+  - CSSOM View
+  - Interface
+  - MediaQueryList
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/MediaQueryList
+---
+<div>{{APIRef("CSSOM View")}} {{SeeCompatTable}}</div>
+
+<p>A <strong><code>MediaQueryList</code></strong> object stores information on a <a href="/en-US/docs/Web/CSS/Media_Queries">media query</a> applied to a document, and handles sending notifications to listeners when the media query state change (i.e. when the media query test starts or stops evaluating to <code>true</code>).</p>
+
+<p>This makes it possible to observe a document to detect when its media queries change, instead of polling the values periodically, and allows you to programmatically make changes to a document based on media query status.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>The new version of the <code>MediaQueryList</code> interface inherits properties from its parent interface, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MediaQueryList.matches")}} {{readonlyInline}}</dt>
+ <dd>A {{domxref("Boolean")}} that returns <code>true</code> if the {{domxref("document")}} currently matches the media query list, or <code>false</code> if not.</dd>
+ <dt>{{domxref("MediaQueryList.media")}} {{readonlyInline}}</dt>
+ <dd>A {{domxref("DOMString")}} representing a serialized media query.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("MediaQueryList.onchange")}}</dt>
+ <dd>An event handler property representing a function that is invoked when the {{event("change")}} event fires, i.e when the status of media query support changes. The event object is a {{domxref("MediaQueryListEvent")}} instance, which is recognised as a <code>MediaListQuery</code> instance in older browsers, for backwards compatibility purposes.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>The new version of the <code>MediaQueryList</code> interface inherits methods from its parent interface, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MediaQueryList.addListener()")}}</dt>
+ <dd>Adds a listener to the <code>MediaQueryListener</code> that will run a custom callback function in response to the media query status changing. This is basically an alias for {{domxref("EventTarget.addEventListener()")}}, for backwards compatibility purposes.</dd>
+ <dt>{{domxref("MediaQueryList.removeListener()")}}</dt>
+ <dd>Removes a listener from the <code>MediaQueryListener</code>. This is basically an alias for {{domxref("EventTarget.removeEventListener()")}}, for backwards compatibility purposes.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This simple example creates a <code>MediaQueryList</code> and then sets up a listener to detect when the media query status changes, running a custom function when it does to change the appearence of the page.</p>
+
+<pre class="brush: js">var para = document.querySelector('p');
+
+var mql = window.matchMedia('(max-width: 600px)');
+
+function screenTest(e) {
+  if (e.matches) {
+    /* the viewport is 600 pixels wide or less */
+    para.textContent = 'This is a narrow screen — less than 600px wide.';
+    document.body.style.backgroundColor = 'red';
+  } else {
+    /* the viewport is more than than 600 pixels wide */
+    para.textContent = 'This is a wide screen — more than 600px wide.';
+    document.body.style.backgroundColor = 'blue';
+  }
+}
+
+mql.addListener(screenTest);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can find this example on GitHub (see the <a href="https://github.com/mdn/dom-examples/blob/master/mediaquerylist/index.html">source code</a>, and also see it <a href="https://mdn.github.io/dom-examples/mediaquerylist/index.html">running live</a>).</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#the-mediaquerylist-interface", "MediaQueryList")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.MediaQueryList")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Media_queries">Media queries</a></li>
+ <li><a href="/en-US/docs/CSS/Using_media_queries_from_code">Using media queries from code</a></li>
+ <li>{{domxref("window.matchMedia()")}}</li>
+ <li>{{domxref("MediaQueryListListener")}}</li>
+ <li>{{domxref("MediaQueryListEvent")}}</li>
+</ul>
diff --git a/files/uk/web/api/network_information_api/index.html b/files/uk/web/api/network_information_api/index.html
new file mode 100644
index 0000000000..0afabb53ad
--- /dev/null
+++ b/files/uk/web/api/network_information_api/index.html
@@ -0,0 +1,87 @@
+---
+title: Network Information API
+slug: Web/API/Network_Information_API
+translation_of: Web/API/Network_Information_API
+---
+<p>{{DefaultAPISidebar("Network Information API")}}{{SeeCompatTable}}</p>
+
+<p>Network Information API надає інформацію про мережеве підключення в загальних термінах ('wifi', 'cellular' тощо). Ця інформація може бути використана для вибору якості і розміру вмісту на основі підключення користувача. Весь API складається з інтерфейсу {{domxref ("NetworkInformation")}} та однієї властивості до інтерфейсу {{domxref ("Navigator")}}: {{domxref ("Navigator.connection")}} .</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Виявлення_зміни_підключення"><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>Виявлення зміни підключення</span></span></span></h3>
+
+<p><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>В цьому прикладі ми стежимо за змінами підключення користувача.</span></span></span></p>
+
+<pre class="brush: js notranslate">var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+var type = connection.effectiveType;
+
+function updateConnectionStatus() {
+  console.log("Тип підключення було змінено з " + type + " на " + connection.effectiveType);
+  type = connection.effectiveType;
+}
+
+connection.addEventListener('change', updateConnectionStatus);
+</pre>
+
+<h3 id="Попереднє_завантаження_великих_ресурсів"><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>Попереднє завантаження великих ресурсів</span></span></span></h3>
+
+<p>Об'єкт підключення {{domxref ("Navigator.connection")}} корисний для визначення необхідності попереднього завантажування ресурсів, що мають великий розмір. Перевірка типу підключення буде викликана незабаром після завантаження сторінки. Якщо з'єднання визначено як стільниковий зв’язок, то прапорець <code>preloadVideo</code> буде встановлено у значення <code>false</code>. Для простоти та наочності цей приклад перевіряє лише один тип підключення. На практиці використовується оператор switch або інший метод для перевірки всіх можливих значень {{domxref ("NetworkInformation.type")}}. Незалежно від значення <code>type</code> ви можете оцінити швидкість з'єднання через властивість {{domxref ("NetworkInformation.effectiveType")}}.</p>
+
+<pre class="brush: js notranslate">let preloadVideo = true;
+var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+if (connection) {
+  if (connection.effectiveType === 'slow-2g') {
+    preloadVideo = false;
+  }
+}</pre>
+
+<h2 id="Інтерфейси">Інтерфейси</h2>
+
+<dl>
+ <dt>{{domxref("NetworkInformation")}}</dt>
+ <dd>Надає інформацію про з’єднання, яке пристрій використовує для зв’язку з мережею, та забезпечує сповіщення, якщо тип з’єднання змінюється. Інтерфейс <code>NetworkInformation</code>  не може бути створено як екземпляр. Натомість доступ до нього здійснюється через інтерфейс {{domxref ("Navigator")}}.</dd>
+</dl>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Network Information', '', 'Network Information API')}}</td>
+   <td>{{Spec2('Network Information')}}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність">Сумісність</h2>
+
+<h3 id="NetworkInformation">NetworkInformation</h3>
+
+
+
+<p>{{Compat("api.NetworkInformation")}}</p>
+
+<h3 id="Navigator.connection">Navigator.connection</h3>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.Navigator.connection")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{spec("http://w3c.github.io/netinfo/", "Network Information API Specification", "ED")}}</li>
+ <li><a href="/en-US/docs/Online_and_offline_events">Online and offline events</a></li>
+ <li>{{domxref("Navigator.connection", "window.navigator.connection")}}</li>
+</ul>
diff --git a/files/uk/web/api/networkinformation/index.html b/files/uk/web/api/networkinformation/index.html
new file mode 100644
index 0000000000..f1bff837d6
--- /dev/null
+++ b/files/uk/web/api/networkinformation/index.html
@@ -0,0 +1,88 @@
+---
+title: NetworkInformation
+slug: Web/API/NetworkInformation
+translation_of: Web/API/NetworkInformation
+---
+<div>{{APIRef("Network Information API")}}{{SeeCompatTable}}</div>
+
+<p>Інтерфейс <code><strong>NetworkInformation</strong></code> надає інформацію про з’єднання, яке пристрій використовує для зв’язку з мережею, та забезпечує засоби для сповіщень, якщо тип підключення змінюється. Інтерфейс <code>NetworkInformation</code> не може бути створено як екземпляр. Натомість доступ до нього здійснюється через властивість з'єднання інтерфейсу {{domxref("Navigator")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Властивості">Властивості</h2>
+
+<p><em><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>Цей інтерфейс також успадковує властивості свого батьківського елементу</span></span></span>, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dd>
+ <ul>
+ </ul>
+ </dd>
+ <dt>{{domxref("NetworkInformation.downlink")}} {{readonlyinline}}</dt>
+ <dd>Повертає приблизне значення ефективної пропускної здатності в мегабітах в секунду. Значення округлено до найближчого кратного до 25 кілобіт на секунду.</dd>
+ <dt>{{domxref("NetworkInformation.downlinkMax")}} {{readonlyinline}}</dt>
+ <dd>Повертає максимальну швидкість, в мегабітах в секунду (Mbps), для поточного з'єднання.</dd>
+ <dt>{{domxref("NetworkInformation.effectiveType")}} {{readonlyinline}}</dt>
+ <dd>Повертає діючий тип з'єднання в значенні 'slow-2g', '2g', '3g', або '4g'.</dd>
+ <dt>{{domxref("NetworkInformation.rtt")}} {{readonlyinline}}</dt>
+ <dd>Повертає оцінку часу зворотного зв'язку (RTT) поточного з'єднання, округлену до найближчого кратного до 25 мілісекунд.</dd>
+ <dt>{{domxref("NetworkInformation.saveData")}} {{readonlyinline}}</dt>
+ <dd>Повертає <code>true</code>, якщо користувач встановив параметр зменшеного використання даних.</dd>
+ <dt>{{domxref("NetworkInformation.type")}} {{readonlyinline}}</dt>
+ <dd>Повертає тип підключення, яке використовує пристрій для зв’язку з мережею. Існуючі значення:
+ <ul>
+  <li><code>bluetooth</code></li>
+  <li><code>cellular</code></li>
+  <li><code>ethernet</code></li>
+  <li><code>none</code></li>
+  <li><code>wifi</code></li>
+  <li><code>wimax</code></li>
+  <li><code>other</code></li>
+  <li><code>unknown</code></li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Обробники_подій"><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>Обробники подій</span></span></span></h3>
+
+<dl>
+ <dt>{{domxref("NetworkInformation.onchange")}}</dt>
+ <dd>Подія, яка запускається, коли змінюється інформація про з’єднання, і {{event("change")}} запускається на цьому об’єкті.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<p><em><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>Цей інтерфейс також успадковує властивості свого батьківського елементу</span></span></span>, {{domxref("EventTarget")}}.</em></p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Network Information', '#networkinformation-interface', 'NetworkInformation')}}</td>
+   <td>{{Spec2('Network Information')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність">Сумісність</h2>
+
+
+
+<p>{{Compat("api.NetworkInformation")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Network_Information_API">Network Information API</a></li>
+ <li><a href="/en-US/docs/Online_and_offline_events">Online and offline events</a></li>
+ <li>Реалізація інтерфейсу в {{domxref("Navigator")}}.</li>
+</ul>
diff --git a/files/uk/web/api/node/contains/index.html b/files/uk/web/api/node/contains/index.html
new file mode 100644
index 0000000000..db187f1462
--- /dev/null
+++ b/files/uk/web/api/node/contains/index.html
@@ -0,0 +1,112 @@
+---
+title: Node.contains()
+slug: Web/API/Node/contains
+tags:
+  - API
+  - DOM
+  - Method
+  - Node
+  - Вузол
+  - метод
+translation_of: Web/API/Node/contains
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Метод <strong><code>Node.contains()</code></strong> повертає значення {{jsxref("Boolean")}}, яке вказує, чи переданий вузол є нащадком заданого вузла чи ні.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">node.contains( otherNode )
+</pre>
+
+<h2 id="Приклад">Приклад</h2>
+
+<p>Ця функція перевіряє, чи елемент знаходиться в тілі сторінки. А також визначає чи тіло сторінки включає само себе. Якщо включає само себе, то відповідно метод <code>isInPage</code> буде повертати <code>false</code>. В іншому випадку буде повертатися <code>true</code> або<code> false </code>в залежності від того, чи елемент існує всередині тіла сторінки.</p>
+
+<pre class="brush:js">function isInPage(node) {
+  return (node === document.body) ? false : document.body.contains(node);
+}</pre>
+
+<h2 id="Specifications" name="Specifications">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-node-contains", "Node.contains()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Початкове визначення</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особливість</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базова підтримка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>5.0<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.0<sup>[2]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особливість</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базова підтримка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer <a href="https://connect.microsoft.com/IE/feedback/details/780874/node-contains-is-incorrect">лише підтримує метод <code>contains()</code> для елементів</a>.</p>
+
+<p>[2] Safari 2.x <a href="https://books.google.de/books?id=KW9G9rdlStIC&amp;lpg=PA299&amp;ots=4XRWUISZVr&amp;dq=safari+node+contains+professional+javascript&amp;pg=PA299&amp;hl=de#v=onepage&amp;q=safari%20node%20contains%20professional%20javascript&amp;f=false">реалізувала метод <code>contains()</code> неправильно</a>.</p>
+
+<h2 id="Дивитися_також">Дивитися також</h2>
+
+<ul>
+ <li>{{domxref("Node.compareDocumentPosition")}}</li>
+ <li>{{domxref("Node.hasChildNodes")}}</li>
+</ul>
diff --git a/files/uk/web/api/node/index.html b/files/uk/web/api/node/index.html
new file mode 100644
index 0000000000..9fc5be13f4
--- /dev/null
+++ b/files/uk/web/api/node/index.html
@@ -0,0 +1,508 @@
+---
+title: Node
+slug: Web/API/Node
+tags:
+  - API
+  - DOM
+  - DOM Reference
+  - Interface
+  - NeedsTranslation
+  - Node
+  - Reference
+  - TopicStub
+translation_of: Web/API/Node
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>A <strong><code>Node</code></strong> is an interface from which a number of DOM types inherit, and allows these various types to be treated (or tested) similarly.</p>
+
+<p>The following interfaces all inherit from <code>Node</code> its methods and properties: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} (which {{domxref("Text")}}, {{domxref("Comment")}}, and {{domxref("CDATASection")}} inherit), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}</p>
+
+<p>These interfaces may return null in particular cases where the methods and properties are not relevant. They may throw an exception - for example when adding children to a node type for which no children can exist.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parents {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p>
+
+<dl>
+ <dt>{{domxref("Node.baseURI")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the base URL. The concept of base URL changes from one language to another; in HTML, it corresponds to the protocol, the domain name and the directory structure, that is all until the last <code>'/'</code>.</dd>
+ <dt>{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}} {{ Fx_minversion_inline("3") }}</dt>
+ <dd>(Not available to web content.) The read-only {{ Interface("nsIURI") }} object representing the base URI for the element.</dd>
+ <dt>{{domxref("Node.childNodes")}} {{readonlyInline}}</dt>
+ <dd>Returns a live {{domxref("NodeList")}} containing all the children of this node. {{domxref("NodeList")}} being live means that if the children of the <code>Node</code> change, the {{domxref("NodeList")}} object is automatically updated.</dd>
+ <dt>{{domxref("Node.firstChild")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the first direct child node of the node, or <code>null</code> if the node has no child.</dd>
+ <dt>{{domxref("Node.lastChild")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the last direct child node of the node, or <code>null</code> if the node has no child.</dd>
+ <dt>{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the local part of the qualified name of an element.
+ <div class="note">
+ <p><strong>Note:</strong> In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML. {{gecko_minversion_inline("1.9.2")}}</p>
+ </div>
+ </dd>
+ <dt>{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>The namespace URI of this node, or <code>null</code> if it is no namespace.
+ <div class="note">
+ <p><strong>Note:</strong> In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="https://www.w3.org/1999/xhtml/" title="Linkification: http://www.w3.org/1999/xhtml">https://www.w3.org/1999/xhtml/</a></code> namespace in both HTML and XML trees. {{gecko_minversion_inline("1.9.2")}}</p>
+ </div>
+ </dd>
+ <dt>{{domxref("Node.nextSibling")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the next node in the tree, or <code>null</code> if there isn't such node.</dd>
+ <dt>{{domxref("Node.nodeName")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the name of the <code>Node</code>. The structure of the name will differ with the name type. E.g. An {{domxref("HTMLElement")}} will contain the name of the corresponding tag, like <code>'audio'</code> for an {{domxref("HTMLAudioElement")}}, a {{domxref("Text")}} node will have the <code>'#text'</code> string, or a {{domxref("Document")}} node will have the <code>'#document'</code> string.</dd>
+ <dt>{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}{{ Fx_minversion_inline("3") }}</dt>
+ <dd>A {{ Interface("nsIPrincipal") }} representing the node principal.</dd>
+ <dt>{{domxref("Node.nodeType")}}{{readonlyInline}}</dt>
+ <dd>Returns an <code>unsigned short</code> representing the type of the node. Possible values are:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th scope="col">Name</th>
+    <th scope="col">Value</th>
+   </tr>
+   <tr>
+    <td><code>ELEMENT_NODE</code></td>
+    <td><code>1</code></td>
+   </tr>
+   <tr>
+    <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>2</code></td>
+   </tr>
+   <tr>
+    <td><code>TEXT_NODE</code></td>
+    <td><code>3</code></td>
+   </tr>
+   <tr>
+    <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>4</code></td>
+   </tr>
+   <tr>
+    <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>5</code></td>
+   </tr>
+   <tr>
+    <td><code>ENTITY_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>6</code></td>
+   </tr>
+   <tr>
+    <td><code>PROCESSING_INSTRUCTION_NODE</code></td>
+    <td><code>7</code></td>
+   </tr>
+   <tr>
+    <td><code>COMMENT_NODE</code></td>
+    <td><code>8</code></td>
+   </tr>
+   <tr>
+    <td><code>DOCUMENT_NODE</code></td>
+    <td><code>9</code></td>
+   </tr>
+   <tr>
+    <td><code>DOCUMENT_TYPE_NODE</code></td>
+    <td><code>10</code></td>
+   </tr>
+   <tr>
+    <td><code>DOCUMENT_FRAGMENT_NODE</code></td>
+    <td><code>11</code></td>
+   </tr>
+   <tr>
+    <td><code>NOTATION_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>12</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("Node.nodeValue")}}</dt>
+ <dd>Returns / Sets the value of the current node</dd>
+ <dt>{{domxref("Node.ownerDocument")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("Document")}} that this node belongs to. If no document is associated with it, returns <code>null</code>.</dd>
+ <dt>{{domxref("Node.parentNode")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns <code>null</code>.</dd>
+ <dt>{{domxref("Node.parentElement")}} {{readonlyInline}}</dt>
+ <dd>Returns an {{domxref("Element")}} that is the parent of this node. If the node has no parent, or if that parent is not an {{domxref("Element")}}, this property returns <code>null</code>.</dd>
+ <dt>{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the namespace prefix of the node, or <code>null</code> if no prefix is specified.</dd>
+ <dt>{{domxref("Node.previousSibling")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the previous node in the tree, or <code>null</code> if there isn't such node.</dd>
+ <dt>{{domxref("Node.rootNode")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} object representing the topmost node in the tree, or the current node if it's the topmost node in the tree. This is found by walking backward along {{domxref("Node.parentNode")}} until the top is reached.</dd>
+ <dt>{{domxref("Node.textContent")}}</dt>
+ <dd>Returns / Sets the textual content of an element and all its descendants.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p>
+
+<dl>
+ <dt>{{domxref("Node.appendChild()")}}</dt>
+ <dd>Adds the specified childNode argument as the last child to the current node.<br>
+ If the argument referenced an existing node on the DOM tree, the node will be detached from its current position and attached at the new position.</dd>
+ <dt>{{domxref("Node.cloneNode()")}}</dt>
+ <dd>Clone a {{domxref("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.</dd>
+ <dt>{{domxref("Node.compareDocumentPosition()")}}</dt>
+ <dt>{{domxref("Node.contains()")}}</dt>
+ <dt>{{domxref("Node.getFeature()")}} {{obsolete_inline}}</dt>
+ <dt>{{domxref("Node.getRootNode()")}}</dt>
+ <dd>Returns the context objects root which optionally includes the shadow root if it is available. </dd>
+ <dt>{{domxref("Node.getUserData()")}} {{obsolete_inline}}</dt>
+ <dd>Allows a user to get some {{domxref("DOMUserData")}} from the node.</dd>
+ <dt>{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has any attributes, or not.</dd>
+ <dt>{{domxref("Node.hasChildNodes()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has any child nodes, or not.</dd>
+ <dt>{{domxref("Node.insertBefore()")}}</dt>
+ <dd>Inserts the first {{domxref("Node")}} given in a parameter immediately before the second, child of this element, {{domxref("Node")}}.</dd>
+ <dt>{{domxref("Node.isDefaultNamespace()")}}</dt>
+ <dt>{{domxref("Node.isEqualNode()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} which indicates whether or not two nodes are of the same type and all their defining data points match.</dd>
+ <dt>{{domxref("Node.isSameNode()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} value indicating whether or not the two nodes are the same (that is, they reference the same object).</dd>
+ <dt>{{domxref("Node.isSupported()")}} {{obsolete_inline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.</dd>
+ <dt>{{domxref("Node.lookupPrefix()")}}</dt>
+ <dt>{{domxref("Node.lookupNamespaceURI()")}}</dt>
+ <dt>{{domxref("Node.normalize()")}}</dt>
+ <dd>Clean up all the text nodes under this element (merge adjacent, remove empty).</dd>
+ <dt>{{domxref("Node.removeChild()")}}</dt>
+ <dd>Removes a child node from the current element, which must be a child of the current node.</dd>
+ <dt>{{domxref("Node.replaceChild()")}}</dt>
+ <dd>Replaces one child {{domxref("Node")}} of the current one with the second one given in parameter.</dd>
+ <dt>{{domxref("Node.setUserData()")}} {{obsolete_inline}}</dt>
+ <dd>Allows a user to attach, or remove, {{domxref("DOMUserData")}} to the node.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Browse_all_child_nodes">Browse all child nodes</h3>
+
+<p>The following function recursively cycles all child nodes of a node and executes a callback function upon them (and upon the parent node itself).</p>
+
+<pre class="brush: js">function DOMComb (oParent, oCallback) {
+  if (oParent.hasChildNodes()) {
+    for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) {
+      DOMComb(oNode, oCallback);
+    }
+  }
+  oCallback.call(oParent);
+}</pre>
+
+<h4 id="Syntax">Syntax</h4>
+
+<pre class="syntaxbox">DOMComb(parentNode, callbackFunction);</pre>
+
+<h4 id="Description">Description</h4>
+
+<p>Recursively cycle all child nodes of <code>parentNode</code> and <code>parentNode</code> itself and execute the <code>callbackFunction</code> upon them as <a href="/en-US/docs/JavaScript/Reference/Operators/this" title="en-US/docs/JavaScript/Reference/Operators/this"><code>this</code></a> objects.</p>
+
+<h4 id="Parameters">Parameters</h4>
+
+<dl>
+ <dt><code>parentNode</code></dt>
+ <dd>The parent node (<code><strong>Node</strong> <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object" title="en-US/docs/JavaScript/Reference/Global_Objects/Object">Object</a></code>).</dd>
+ <dt><code>callbackFunction</code></dt>
+ <dd>The callback function (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>).</dd>
+</dl>
+
+<h4 id="Sample_usage">Sample usage</h4>
+
+<p>The following example send to the <code>console.log</code> the text content of the body:</p>
+
+<pre class="brush: js">function printContent () {
+  if (this.nodeValue) { console.log(this.nodeValue); }
+}
+
+onload = function () {
+  DOMComb(document.body, printContent);
+};</pre>
+
+<h3 id="Remove_all_children_nested_within_a_node">Remove all children nested within a node</h3>
+
+<pre class="brush: js">Element.prototype.removeAll = function () {
+  while (this.firstChild) { this.removeChild(this.firstChild); }
+  return this;
+};</pre>
+
+<h4 id="Sample_usage_2">Sample usage</h4>
+
+<pre class="brush: js">/* ... an alternative to document.body.innerHTML = "" ... */
+document.body.removeAll();</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Removed the following properties: <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br>
+    Removed the following methods: <code>isSupported()</code>, <code>hasAttributes()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>The methods <code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, and <code>appendChild()</code> returns one more kind of error (<code>NOT_SUPPORTED_ERR</code>) if called on a {{domxref("Document")}}.<br>
+    The <code>normalize()</code> method has been modified so that {{domxref("Text")}} node can also be normalized if the proper {{domxref("DOMConfiguration")}} flag is set.<br>
+    Added the following methods: <code>compareDocumentPosition()</code>, <code>isSameNode()</code>, <code>lookupPrefix()</code>, <code>isDefaultNamespace()</code>, <code>lookupNamespaceURI()</code>, <code>isEqualNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData().</code><br>
+    Added the following properties: <code>baseURI</code> and <code>textContent</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>The <code>ownerDocument</code> property was slightly modified so that {{domxref("DocumentFragment")}} also returns <code>null</code>.<br>
+    Added the following properties: <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br>
+    Added the following methods: <code>normalize()</code>, <code>isSupported()</code> and <code>hasAttributes()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+
+    {{CompatNo}}{{CompatGeckoDesktop("22.0")}}<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td><code>getFeature()</code>{{obsolete_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+    {{CompatNo}}{{CompatGeckoDesktop("7.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>getUserData()</code>, <code>setUserData()</code> and <code>hasAttributes()</code> {{deprecated_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+    {{CompatNo}}{{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>isSameNode()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+    Removed in {{CompatGeckoDesktop("10")}}<br>
+    Returned in {{CompatGeckoDesktop("48")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>isSupported()</code> {{obsolete_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+   </td><td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>attributes</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+    {{CompatNo}}{{CompatGeckoDesktop("22.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>rootNode()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>CompatGeckoDesktop(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>namespaceURI</code>, <code>localName</code>, <code>prefix</code> {{obsolete_inline}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatNo}}46.0<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatNo}}48.0<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>getRootNode</code></td>
+   <td>{{CompatChrome(54.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(41)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td><code>getFeature()</code>{{obsolete_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}<br>
+    {{CompatNo}}{{CompatGeckoDesktop("7.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>getUserData()</code>, <code>setUserData()</code> and <code>hasAttributes()</code> {{deprecated_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>isSameNode()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatGeckoDesktop("1.0")}}<br>
+     Removed in {{CompatGeckoDesktop("10")}}<br>
+     Returned in {{CompatGeckoDesktop("48")}}</p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>isSupported()</code> {{obsolete_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>attributes</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>rootNode()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>namespaceURI</code>, <code>localName</code>, <code>prefix</code> {{obsolete_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatNo}}48.0[3]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>getRootNode()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(54.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(41)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(54.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] WebKit and old versions of Blink incorrectly do not make <code>Node</code> inherit from {{domxref("EventTarget")}}.</p>
+
+<p>[2] In Gecko 22.0 {{geckoRelease("22.0")}} the <code>attributes</code> property was moved to {{domxref("Element")}}.</p>
+
+<p>[3] The properties were moved to the {{domxref("Element")}} and {{domxref("Attr")}} APIs according to the DOM4 standard.</p>
diff --git a/files/uk/web/api/promiserejectionevent/index.html b/files/uk/web/api/promiserejectionevent/index.html
new file mode 100644
index 0000000000..897a97a97a
--- /dev/null
+++ b/files/uk/web/api/promiserejectionevent/index.html
@@ -0,0 +1,95 @@
+---
+title: PromiseRejectionEvent
+slug: Web/API/PromiseRejectionEvent
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - JavaScript
+  - PromiseRejectionEvent
+  - Promises
+  - Reference
+  - events
+  - події
+  - проміси
+translation_of: Web/API/PromiseRejectionEvent
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">Інтерфейс <strong><code>PromiseRejectionEvent</code></strong> відображає події, які надсилаються у глобальний контекст скрипта, коли об'єкти JavaScript {{jsxref("Promise")}} відхиляються.</span> Ці події особливо корисні для цілей телеметрії та налагоджування.</p>
+
+<p>Щоб дізнатись більше про події відхилення промісів, дивіться {{SectionOnPage("/uk/docs/Web/JavaScript/Guide/Using_promises", "Події відхилення промісів")}}.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("PromiseRejectionEvent.PromiseRejectionEvent", "PromiseRejectionEvent()")}}</dt>
+ <dd>Створює подію <code>PromiseRejectionEvent</code>, отримуючи тип події (<code><a href="/uk/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a></code> або <code><a href="/uk/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a></code>) та інші деталі.</dd>
+</dl>
+
+<h2 id="Властивості">Властивості</h2>
+
+<p><em>Також успадковує властивості від батьківського інтерфейсу {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("PromiseRejectionEvent.promise")}} {{readonlyInline}}</dt>
+ <dd>Об'єкт JavaScript {{jsxref("Promise")}}, який був відхилений.</dd>
+ <dt>{{domxref("PromiseRejectionEvent.reason")}} {{readOnlyInline}}</dt>
+ <dd>Значення чи {{jsxref("Object","об'єкт")}}, що вказує причину відхилення проміса, як вона передається у {{jsxref("Promise.відхилено","Promise.reject()")}}.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<p><em>Цей інтерфейс не має унікальних методів; він успадковує методи від батьківського інтерфейсу {{domxref("Event")}}</em>.</p>
+
+<h2 id="Події">Події</h2>
+
+<dl>
+ <dt><a href="/uk/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a></dt>
+ <dd>Запускається, коли об'єкт JavaScript {{jsxref("Promise")}} відхиляється, і після того, як відхилення було оброблене кодом для обробки відхилення проміса.</dd>
+ <dt><a href="/uk/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a></dt>
+ <dd>Запускається, коли об'єкт JavaScript {{jsxref("Promise")}} відхиляється, але немає обробника, який зреагував би на відхилення.</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Цей простий приклад перехоплює необроблені відхилення промісів та логує їх з метою відлагодження.</p>
+
+<pre class="brush: js">window.onunhandledrejection = function(e) {
+  console.log(e.reason);
+}</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#promiserejectionevent', 'PromiseRejectionEvent')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("api.PromiseRejectionEvent")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Archive/Add-ons/Techniques/Promises">Promises</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Using_promises">Використання промісів</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{domxref("WindowEventHandlers.onrejectionhandled")}}</li>
+ <li>{{domxref("WindowEventHandlers.onunhandledrejection")}}</li>
+</ul>
diff --git a/files/uk/web/api/promiserejectionevent/promise/index.html b/files/uk/web/api/promiserejectionevent/promise/index.html
new file mode 100644
index 0000000000..a9874092ad
--- /dev/null
+++ b/files/uk/web/api/promiserejectionevent/promise/index.html
@@ -0,0 +1,76 @@
+---
+title: PromiseRejectionEvent.promise
+slug: Web/API/PromiseRejectionEvent/promise
+tags:
+  - API
+  - HTML DOM
+  - JavaScript
+  - Promise
+  - PromiseRejectionEvent
+  - Властивість
+  - Проміс
+  - події
+translation_of: Web/API/PromiseRejectionEvent/promise
+---
+<div>{{APIRef("HTML DOM") }}</div>
+
+<p>Властивість <code><strong>promise</strong></code> інтерфейсу {{domxref("PromiseRejectionEvent")}}, доступна лише для читання, вказує об'єкт JavaScript {{jsxref("Promise")}}, який був відхилений. Ви можете дослідити властивість події {{domxref("PromiseRejectionEvent.reason")}}, щоб дізнатись, чому проміс був відхилений.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>promise</em> = <em>PromiseRejectionEvent</em>.promise</pre>
+
+<h3 id="Значення">Значення</h3>
+
+<p>Об'єкт JavaScript {{jsxref("Promise")}}, який був відхилений, і чиє відхилення пройшло необробленим.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Цей приклад прослуховує необроблені проміси, і, якщо властивість {{domxref("PromiseRejectionEvent.reason", "reason")}} є об'єктом з полем <code>code</code>, що містить текст "Модуль не готовий", він встановлює функцію зворотного виклику, що виконується під час неактивності переглядача, яка буде повторно запускати невиконану задачу, щоб виконати її правильно.</p>
+
+<p>Метод {{domxref("event.preventDefault()")}} викликається, щоб зазначити, що проміс тепер був оброблений.</p>
+
+<pre class="brush: js">window.onunhandledrejection = function(event) {
+  if (event.reason.code &amp;&amp; event.reason.code == "Модуль не готовий") {
+    window.requestIdleCallback(function(deadline) {
+      loadModule(event.reason.moduleName)
+        .then(performStartup);
+    });
+    event.preventDefault();
+  }
+}</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-promiserejectionevent-promise', 'PromiseRejectionEvent.promise')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("api.PromiseRejectionEvent.promise")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{SectionOnPage("/uk/docs/Web/JavaScript/Guide/Using_promises", "Події відхилення промісів")}}</li>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{domxref("PromiseRejectionEvent")}}</li>
+ <li><a href="/uk/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a></li>
+ <li><a href="/uk/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a></li>
+</ul>
diff --git a/files/uk/web/api/promiserejectionevent/promiserejectionevent/index.html b/files/uk/web/api/promiserejectionevent/promiserejectionevent/index.html
new file mode 100644
index 0000000000..a7ae3616a8
--- /dev/null
+++ b/files/uk/web/api/promiserejectionevent/promiserejectionevent/index.html
@@ -0,0 +1,89 @@
+---
+title: PromiseRejectionEvent()
+slug: Web/API/PromiseRejectionEvent/PromiseRejectionEvent
+tags:
+  - API
+  - HTML DOM
+  - JavaScript
+  - Promise
+  - PromiseRejectionEvent
+  - Конструктор
+  - Проміс
+  - події
+translation_of: Web/API/PromiseRejectionEvent/PromiseRejectionEvent
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">Конструктор <code><strong>PromiseRejectionEvent()</strong></code> створює та вертає {{domxref("PromiseRejectionEvent")}}, що відображає події, запущені, коли об'єкт JavaScript {{jsxref("Promise")}} був відхилений.</span> З подіями відхилення промісів стає можливим виявляти та повідомляти про проміси, чиє неуспішне завершення пройшло непоміченим. Також стає легше писати глобальні обробники для помилок.</p>
+
+<p>Існують два типи подій <code>PromiseRejectionEvent</code>: <a href="/uk/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a> надсилається середовищем виконання JavaScript, коли проміс був відхилений, але відхилення не було оброблене. Подія <a href="/uk/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a> видається, якщо проміс був відхилений, але відхилення було перехоплене обробником відхилень.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>promiseRejectionEvent</em> = PromiseRejectionEvent(<em>type</em>, <em>options</em>);
+</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<p><em>Конструктор <code>PromiseRejectionEvent()</code></em><em> також успадковує параметри від {{domxref("Event.Event", "Event()")}}.</em></p>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>Рядок, що відображає ім'я типу події <code>PromiseRejectionEvent</code>. Він чутливий до регістру, і повинен мати значення <a href="/uk/docs/Web/API/Window/rejectionhandled_event">"rejectionhandled"</a> або <a href="/uk/docs/Web/API/Window/unhandledrejection_event">"unhandledrejection"</a>, щоб відповідати іменам можливих (не штучно створених) подій {{domxref("PromiseRejectionEvent")}}, які можуть запустити програмні агенти).</dd>
+ <dt><code>options</code></dt>
+ <dd>{{jsxref("Object","Об'єкт")}}, що визначає деталі відхилення:
+ <dl>
+  <dt><code>promise</code></dt>
+  <dd>{{jsxref("Promise","Проміс")}}, що був відхилений.</dd>
+  <dt><code>reason</code></dt>
+  <dd>Будь-яке значення чи {{jsxref("Object","об'єкт")}}, що відображає причину відхилення проміса. Це може бути що завгодно, від числового коду помилки, до помилки {{domxref("DOMString")}} та об'єкта, який містить детальну інформацію, що описує ситуацію, яка призвела до відхилення проміса.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Нова подія <code>PromiseRejectionEvent</code>, що має конфігурацію, визначену параметрами.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Цей приклад створює нову подію <a href="/uk/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a> для проміса <code>myPromise</code> з причиною-рядком "Мій будинок горить". Параметр <code>reason</code> (причина) міг так само легко бути числом, чи навіть об'єктом з детальною інформацією, що містить адрес будинку, чи опис того, наскільки сильний вогонь, і номер телефону людини, яку потрібно повідомити.</p>
+
+<pre class="brush: js">let myRejectionEvent = new PromiseRejectionEvent("unhandledrejection", {
+  promise : myPromise,
+  reason : "Мій будинок горить"
+});</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#the-promiserejectionevent-interface', 'the PromiseRejectionEvent interface')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("api.PromiseRejectionEvent.PromiseRejectionEvent")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Archive/Add-ons/Techniques/Promises">Promises</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Використання промісів</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{domxref("PromiseRejectionEvent")}}</li>
+</ul>
diff --git a/files/uk/web/api/promiserejectionevent/reason/index.html b/files/uk/web/api/promiserejectionevent/reason/index.html
new file mode 100644
index 0000000000..b12a2480c1
--- /dev/null
+++ b/files/uk/web/api/promiserejectionevent/reason/index.html
@@ -0,0 +1,66 @@
+---
+title: PromiseRejectionEvent.reason
+slug: Web/API/PromiseRejectionEvent/reason
+tags:
+  - API
+  - HTML DOM
+  - JavaScript
+  - Promise
+  - PromiseRejectionEvent
+  - reason
+  - Властивість
+  - Проміс
+  - події
+translation_of: Web/API/PromiseRejectionEvent/reason
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>Властивість <strong><code>reason</code></strong> інтерфейсу {{domxref("PromiseRejectionEvent")}}, доступна лише для читання, є будь-яким значенням JavaScript чи {{jsxref("Object","об'єктом")}}, що надає причину, яка передається у {{jsxref("Promise.відхилено","Promise.reject()")}}. Це, в теорії, надає інформацію щодо причини відхилення проміса.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>reason</em> = <em>PromiseRejectionEvent</em>.reason</pre>
+
+<h3 id="Значення">Значення</h3>
+
+<p>Значення або об'єкт, що надає інформацію, якою ви можете скористатись, щоб зрозуміти, чому був відхилений проміс. Це може бути що завгодно, від коду помилки до об'єкта з текстом, посиланнями та всім, що ви захочете в нього додати.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">window.onunhandledrejection = function(e) {
+  console.log(e.reason);
+}</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-promiserejectionevent-reason', 'PromiseRejectionEvent.reason')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("api.PromiseRejectionEvent.reason")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{domxref("PromiseRejectionEvent")}}</li>
+ <li><a href="/uk/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a></li>
+ <li><a href="/uk/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a></li>
+</ul>
diff --git a/files/uk/web/api/svganimatedstring/animval/index.html b/files/uk/web/api/svganimatedstring/animval/index.html
new file mode 100644
index 0000000000..46f2c2a3d2
--- /dev/null
+++ b/files/uk/web/api/svganimatedstring/animval/index.html
@@ -0,0 +1,44 @@
+---
+title: SVGAnimatedString.animVal
+slug: Web/API/SVGAnimatedString/animVal
+translation_of: Web/API/SVGAnimatedString/animVal
+---
+<p>{{APIRef("SVG")}}</p>
+
+<p>Атрибут AnimVal або властивість animVal містить те саме значення, що і властивість baseVal. Якщо атрибут або властивість анімований, він буде містити поточне анімоване значення атрибута або властивості. Якщо даний атрибут або властивість в даний час не анімовані, то він містить те саме значення, що і baseVal</p>
+
+<div class="note">
+<p>Властивість <strong>animVal</strong> доступна лише для зчитування значення. Internet Explorer 9 підтримує анімацію SVG, але не підтримує анімацію SVG на основі декларативних баз даних. В результаті, властивість <strong>animVal </strong>містить те саме значення, що і властивість baseVal.</p>
+</div>
+
+<h2 class="alert" id="Синтакс">Синтакс</h2>
+
+<pre><em>var</em> = <em>object.</em><strong>animVal</strong></pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарі</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'types.html#__svg__SVGAnimatedString__animVal')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG2', 'types.html#__svg__SVGAnimatedString__animVal')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Сумісність браузерів</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці генерується з структурованих даних. Якщо ви хочете внести свій внесок у свої дані, будь ласка, перегляньте https://github.com/mdn/browser-compat-data і надішліть нам запит на pull-request.</div>
+
+<p>{{Compat("api.SVGAnimatedString.animVal")}}</p>
diff --git a/files/uk/web/api/svganimatedstring/index.html b/files/uk/web/api/svganimatedstring/index.html
new file mode 100644
index 0000000000..bca995b90e
--- /dev/null
+++ b/files/uk/web/api/svganimatedstring/index.html
@@ -0,0 +1,60 @@
+---
+title: SVGAnimatedString
+slug: Web/API/SVGAnimatedString
+tags:
+  - API
+  - NeedsExample
+  - NeedsTranslation
+  - Reference
+  - Référence(2)
+  - SVG
+  - SVG DOM
+  - TopicStub
+translation_of: Web/API/SVGAnimatedString
+---
+<div>{{APIRef("SVG")}}</div>
+
+<div> </div>
+
+<p>The <code><strong>SVGAnimatedString</strong></code> interface represents string attributes which can be animated from each SVG declaration. You need to create SVG attribute before doing anything else, everything should be declared inside this.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("SVGAnimatedString.animVal")}} {{readonlyInline}}</dt>
+ <dd>This is a {{domxref("DOMString")}} representing the animation value. <span class="field"><span class="_animVal doc">If the given attribute or property is being animated it contains the current animated value of the attribute or property. If the given attribute or property is not currently being animated, it contains the same value as </span></span>baseVal<span class="field"><span class="_animVal doc">.</span></span></dd>
+ <dt>{{domxref("SVGAnimatedString.baseVal")}}</dt>
+ <dd>This is a {{domxref("DOMString")}} representing the base value. <span class="field"><span class="_baseVal doc">The base value of the given attribute before applying any animations. Setter throws DOMException.</span></span></dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>The <code>SVGAnimatedString</code> interface do not provide any specific methods.</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', '#InterfaceSVGAnimatedString')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG2', 'types.html#InterfaceSVGAnimatedString')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.SVGAnimatedString")}}</p>
diff --git a/files/uk/web/api/urlsearchparams/index.html b/files/uk/web/api/urlsearchparams/index.html
new file mode 100644
index 0000000000..78ab36b8e8
--- /dev/null
+++ b/files/uk/web/api/urlsearchparams/index.html
@@ -0,0 +1,171 @@
+---
+title: URLSearchParams
+slug: Web/API/URLSearchParams
+translation_of: Web/API/URLSearchParams
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p><strong><code>URLSearchParams</code></strong> інтерфейс визначає корисні методи для роботи з довгими текстовими URL.</p>
+
+<p>Об'єктна реалізація <code>URLSearchParams</code> може використовуватись напряму в {{jsxref("Statements/for...of", "for...of")}} структурі, замість {{domxref('URLSearchParams.entries()', 'entries()')}}: <code>for (var p of mySearchParams)</code> що еквівалентно до <code>for (var p of mySearchParams.entries())</code>.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}</dt>
+ <dd>Конструктор вертає <code>URLSearchParams</code> об'єкт.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface doesn't inherit any property.</em></p>
+
+<h2 id="Методи">Методи</h2>
+
+<p><em>Інтерфейс на наслідує ніяких методів</em></p>
+
+<dl>
+ <dt>{{domxref("URLSearchParams.append()")}}</dt>
+ <dd>Appends a specified key/value pair as a new search parameter.</dd>
+ <dt>{{domxref("URLSearchParams.delete()")}}</dt>
+ <dd>Deletes the given search parameter, and its associated value, from the list of all search parameters.</dd>
+ <dt>{{domxref("URLSearchParams.entries()")}}</dt>
+ <dd>Returns an {{jsxref("Iteration_protocols","iterator")}} allowing to go through all key/value pairs contained in this object.</dd>
+ <dt>{{domxref("URLSearchParams.get()")}}</dt>
+ <dd>Returns the first value associated to the given search parameter.</dd>
+ <dt>{{domxref("URLSearchParams.getAll()")}}</dt>
+ <dd>Returns all the values association with a given search parameter.</dd>
+ <dt>{{domxref("URLSearchParams.has()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if such a search parameter exists.</dd>
+ <dt>{{domxref("URLSearchParams.keys()")}}</dt>
+ <dd>Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing to go through all <strong>keys </strong>of the key/value pairs contained in this object.</dd>
+ <dt>{{domxref("URLSearchParams.set()")}}</dt>
+ <dd>Sets the value associated to a given search parameter to the given value. If there were several values, delete the others.</dd>
+ <dt>{{domxref("URLSearchParams.toString()")}}</dt>
+ <dd>Returns a string containg a query string suitable for use in a URL.</dd>
+ <dt>{{domxref("URLSearchParams.values()")}}</dt>
+ <dd>Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing to go through all <strong>values </strong>of the key/value pairs contained in this object.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js notranslate">var paramsString = "q=URLUtils.searchParams&amp;topic=api"
+var searchParams = new URLSearchParams(paramsString);
+
+//Iterate the search parameters.
+for (let p of searchParams) {
+  console.log(p);
+}
+
+searchParams.has("topic") === true; // true
+searchParams.get("topic") === "api"; // true
+searchParams.getAll("topic"); // ["api"]
+searchParams.get("foo") === null; // true
+searchParams.append("topic", "webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&amp;topic=api&amp;topic=webdev"
+searchParams.set("topic", "More webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&amp;topic=More+webdev"
+searchParams.delete("topic");
+searchParams.toString(); // "q=URLUtils.searchParams"
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('URL', '#urlsearchparams', "URLSearchParams")}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoDesktop("29.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>36</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, and support of <code>for...of</code></td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoDesktop("44.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>36</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoMobile("29.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49)}}</td>
+  </tr>
+  <tr>
+   <td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, and support of <code>for...of</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoMobile("44.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Other URL-related interfaces: {{domxref("URL")}}, {{domxref("URLUtils")}}.</li>
+ <li><a href="https://developers.google.com/web/updates/2016/01/urlsearchparams?hl=en">Google Developers: Easy URL manipulation with URLSearchParams</a></li>
+</ul>
+
+<dl>
+</dl>
diff --git a/files/uk/web/api/web_workers_api/index.html b/files/uk/web/api/web_workers_api/index.html
new file mode 100644
index 0000000000..a22a63cd93
--- /dev/null
+++ b/files/uk/web/api/web_workers_api/index.html
@@ -0,0 +1,215 @@
+---
+title: Web Workers API
+slug: Web/API/Web_Workers_API
+translation_of: Web/API/Web_Workers_API
+---
+<p>{{DefaultAPISidebar("Web Workers API")}}</p>
+
+<p class="summary"><strong>Web Workers</strong> це механізм, який дозволяє запускати скрипові операції  у фоновому потоці, окремо від основного діючого потоку web-додатку. Перевага цього методу в тому, що трудоміські процеси можуть виконуватися в окромому потоці, дозволяючи основному (зазвичай UI) потоку працювати без блокування/сповільнення.</p>
+
+<h2 id="Концепція_та_використання_Web_Workers">Концепція та використання Web Workers</h2>
+
+<p>Worker це об'єкт, який створюється з використанням конструктору (e.g. {{domxref("Worker.Worker", "Worker()")}}), який запускає вказаний JavaScript-файл — файл, який містить код, що буде запущений у робочому потоці; workers запускаються у іншому глобальному контексті, який не є поточним {{domxref("window")}}. Цей контекст представляюється об'єктом  {{domxref("DedicatedWorkerGlobalScope")}} у разі виділеного workers (стандартний workers, <span class="short_text" id="result_box" lang="uk"><span>які</span> <span>використовуються</span> <span>одним </span><span>сценарієм</span><span>;</span></span> загальні workers використовують {{domxref("SharedWorkerGlobalScope")}}).</p>
+
+<p>У потоці workers можна запускати будь-який код з невеликкими винятками. Наприклад, не можна напряму маніпулювати DOM з worker або використовувати деякі стандартні методи та властивості об'єкту {{domxref("window")}}, але можна використовувати велику кількість речей, доступних <code>з window</code>, включаючи <a href="/en-US/docs/WebSockets">WebSockets</a>, та механізми зберігання даних, як <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> та Firefox OS-only <a href="/en-US/docs/Web/API/Data_Store_API">Data Store API</a>.  Дивіться <a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Функції та класи, доступні для workers</a> для більшої детальності.</p>
+
+<p>Дані передаються між workers та основним потоком за допомогою системи сповіщення — обидві сторони пересилають свої сповіщення, використовуючи методи<code> postMessage()</code>, та відповідаюсь через обробник подій <code>onmessage</code> (повідомлення містится всепредині атрибутів даних {{event("Message")}} ). Дані копіюються, а не поширюються.</p>
+
+<p>Workers можуть в свою чергу породжувати нові workers, за умови, що ці workers будуть розміщуватися в межах однієї й тієї ж самої сорінки, що й батьківський worker.  На додаток, workers можуть використовувати <a class="internal" href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> для мережевого В/В, за винятком того, що <code>responseXML</code> <code>та channel</code> атрибути <code>XMLHttpRequest</code> завжди <code>повертають null</code>.</p>
+
+<p>Окрім виділених workers, є й інши типи:</p>
+
+<ul>
+ <li>Загальні workers - можуть бути використані декількома сценаріями, запускаючись в різних вікнах, IFrames, тощо, якщо вони у одному домені з worker. Вони трохи складніші, ніж виділені workers — скрипти мають спілкуватися через активний порт. Дивіться {{domxref("SharedWorker")}} для більшї детальності.</li>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a> по суті виступають в якості проксі-серверу, знаходячись між web-додатком, браузером й мережею (коли доступна). Вони призначені для того (зокрема іншого), щоб давати змогу створювати ефективний offline-функціонал, перехоплення мережевих запитів та прийняття відповідних заходів, основуючись на тому, чи доступна мережа, та поновювати данні більш переважними з серверу. Вони також дозволяють доступ для додавання сповіщень та фонових синхроних APIs.</li>
+ <li>Chrome Workers є Firefox-only типом worker, що можна використовуати, якщо розроблюється доповнення та бажано використовувати workers й мати доступ до <a href="https://developer.mozilla.org/en/js-ctypes">js-ctypes</a> у worker. Дивіться {{domxref("ChromeWorker")}} для більшої детальності. </li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a> забезпечуюсть можливість направляти сценарії обробки звуку відбуватися у контексті web worker.</li>
+</ul>
+
+<div class="note">
+<p><strong>Примітка</strong>: Згіздно з <a href="https://html.spec.whatwg.org/multipage/workers.html#runtime-script-errors-2">Web workers Spec</a>, події помилок worker не повинні вспливати (дивіться {{bug(1188141)}}. Це було реалізовано у Firefox 42.</p>
+</div>
+
+<h2 id="Інтерфейси_Web_Worker">Інтерфейси Web Worker</h2>
+
+<dl>
+ <dt>{{domxref("AbstractWorker")}}</dt>
+ <dd>Абстрактні властивості та методи, загальні для всіх видів workers ({{domxref("Worker")}} або {{domxref("SharedWorker")}}).</dd>
+ <dt>{{domxref("Worker")}}</dt>
+ <dd>Представляє собою діючий поток worker, дозволяючи передавати сповіщення запущеному коду worker.</dd>
+ <dt>{{domxref("SharedWorker")}}</dt>
+ <dd>Представляє собою специфічний вид worker, який може бути <em>доступний</em> з декількох контекстів браузерів, будучи декількома вікнами, iframes або іншими workers.</dd>
+ <dt>{{domxref("WorkerGlobalScope")}}</dt>
+ <dd>Представляє собою загальний scope будь-якого worker (виконуючи ту ж роботу, що й {{domxref("Window")}} для звичайного контенту web). Різні види worker мають об'єкт scope, який наслідується з цього інерфейсу та додає більше специфічних особливостей.</dd>
+ <dt>{{domxref("DedicatedWorkerGlobalScope")}}</dt>
+ <dd>Представляє собою scope виділеного worker, наслудуючись з {{domxref("WorkerGlobalScope")}} та додаючи деякі  особливості.</dd>
+ <dt>{{domxref("SharedWorkerGlobalScope")}}</dt>
+ <dd>Представляє собою scope загального worker, наслідуючись з {{domxref("WorkerGlobalScope")}} та додаючи деякі особливості.</dd>
+ <dt>{{domxref("WorkerNavigator")}}</dt>
+ <dd>Представляє собою ідентифікатор та стан користувача (клієнта):</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Ми створили декілька простих прикладів, щоб показати основне вікористання:</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/simple-web-worker">Основні приклади виділеного worker </a>(<a href="http://mdn.github.io/simple-web-worker/">запуск виділеного worker</a>).</li>
+ <li><a href="https://github.com/mdn/simple-shared-worker">Основні приклади загалного worker </a>(<a href="http://mdn.github.io/simple-shared-worker/">запуск загального worker</a>).</li>
+</ul>
+
+<p>Ви можете знайти більше інформації як працюють ці демо у <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Використання web workers</a>.</p>
+
+<h2 id="Специфікация">Специфікация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#toc-workers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("Web Workers")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Workers')}}</td>
+   <td>{{Spec2('Web Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}</td>
+   <td>10.0</td>
+   <td>10.6</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Shared workers</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop(29)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.6</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Passing data using structured cloning</td>
+   <td>13</td>
+   <td>{{CompatGeckoDesktop(8)}}</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Passing data using  transferable objects</td>
+   <td>17 {{property_prefix("webkit")}}<br>
+    21</td>
+   <td>{{CompatGeckoDesktop(18)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Global {{domxref("window.URL", "URL")}}</td>
+   <td>10<sup>[1]</sup><br>
+    23</td>
+   <td>{{CompatGeckoDesktop(21)}}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>4</td>
+   <td>{{CompatGeckoMobile(1.9.1)}}</td>
+   <td>1.0.1</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>Shared workers</td>
+   <td>{{CompatNo}}</td>
+   <td>4</td>
+   <td>29</td>
+   <td>1.4</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Passing data using structured cloning</td>
+   <td>{{CompatNo}}</td>
+   <td>4</td>
+   <td>8</td>
+   <td>1.0.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Passing data using  transferable objects</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>18</td>
+   <td>1.0.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] As <code>webkitURL</code>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/basic_usage">Using Web Workers</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">Worker Interface</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker">SharedWorker interface</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Functions and classes available to workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/Advanced_concepts_and_examples">Advanced concepts and examples</a></li>
+ <li><a href="/en-US/docs/Web/API/ChromeWorker">ChromeWorker</a>: for using workers in privileged/chrome code</li>
+</ul>
diff --git a/files/uk/web/api/webgl_api/index.html b/files/uk/web/api/webgl_api/index.html
new file mode 100644
index 0000000000..078414deeb
--- /dev/null
+++ b/files/uk/web/api/webgl_api/index.html
@@ -0,0 +1,238 @@
+---
+title: WebGL
+slug: Web/API/WebGL_API
+tags:
+  - WebGL
+  - Графіка
+  - Детально
+  - Медіа
+translation_of: Web/API/WebGL_API
+---
+<div>{{WebGLSidebar}}</div>
+
+<div class="summary">
+<p>WebGL (Web Graphics Library) - це JavaScript API для відображення інтерактивної 3D та 2D графіки в будь-якому сумісному веб-переглядачі без використання плагінів. WebGL робиць це вводячи API, яке точно відповідає OpenGL ES 2.0 та може бути використане в HTML5 {{HTMLElement("canvas")}} елементах.</p>
+</div>
+
+<p>Підтримка WebGL присутня в <a href="/en-US/Firefox" title="Firefox 4 for developers">Firefox</a> 4+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/" title="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/safari/" title="http://www.apple.com/fr/safari/">Safari </a>5.1+ and <a href="http://windows.microsoft.com/en-us/internet-explorer/browser-ie" title="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> 11+; проте, користувацький пристрій має також мати апаратне забезпечення, яке підтримує ці функції.</p>
+
+<p>Елемент {{HTMLElement("canvas")}} також використовується Canvas 2D для побудови 2D графіки на веб-сторінках.</p>
+
+<h2 id="Посилання">Посилання</h2>
+
+<h3 id="Стандартні_інтерфейси">Стандартні інтерфейси</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("WebGLRenderingContext")}}</li>
+ <li>{{domxref("WebGL2RenderingContext")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLActiveInfo")}}</li>
+ <li>{{domxref("WebGLBuffer")}}</li>
+ <li>{{domxref("WebGLContextEvent")}}</li>
+ <li>{{domxref("WebGLFramebuffer")}}</li>
+ <li>{{domxref("WebGLProgram")}}</li>
+ <li>{{domxref("WebGLQuery")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLRenderbuffer")}}</li>
+ <li>{{domxref("WebGLSampler")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLShader")}}</li>
+ <li>{{domxref("WebGLShaderPrecisionFormat")}}</li>
+ <li>{{domxref("WebGLSync")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLTexture")}}</li>
+ <li>{{domxref("WebGLTransformFeedback")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLUniformLocation")}}</li>
+ <li>{{domxref("WebGLVertexArrayObject")}} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<h3 id="Розширення">Розширення</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("ANGLE_instanced_arrays")}}</li>
+ <li>{{domxref("EXT_blend_minmax")}}</li>
+ <li>{{domxref("EXT_color_buffer_float")}}</li>
+ <li>{{domxref("EXT_color_buffer_half_float")}}</li>
+ <li>{{domxref("EXT_disjoint_timer_query")}}</li>
+ <li>{{domxref("EXT_frag_depth")}}</li>
+ <li>{{domxref("EXT_sRGB")}}</li>
+ <li>{{domxref("EXT_shader_texture_lod")}}</li>
+ <li>{{domxref("EXT_texture_filter_anisotropic")}}</li>
+ <li>{{domxref("OES_element_index_uint")}}</li>
+ <li>{{domxref("OES_standard_derivatives")}}</li>
+ <li>{{domxref("OES_texture_float")}}</li>
+ <li>{{domxref("OES_texture_float_linear")}}</li>
+ <li>{{domxref("OES_texture_half_float")}}</li>
+ <li>{{domxref("OES_texture_half_float_linear")}}</li>
+ <li>{{domxref("OES_vertex_array_object")}}</li>
+ <li>{{domxref("WEBGL_color_buffer_float")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_atc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_es3")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_etc1")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_pvrtc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_s3tc")}}</li>
+ <li>{{domxref("WEBGL_debug_renderer_info")}}</li>
+ <li>{{domxref("WEBGL_debug_shaders")}}</li>
+ <li>{{domxref("WEBGL_depth_texture")}}</li>
+ <li>{{domxref("WEBGL_draw_buffers")}}</li>
+ <li>{{domxref("WEBGL_lose_context")}}</li>
+</ul>
+</div>
+
+<h3 id="Події">Події</h3>
+
+<ul>
+ <li>{{Event("webglcontextlost")}}</li>
+ <li>{{Event("webglcontextrestored")}}</li>
+ <li>{{Event("webglcontextcreationerror")}}</li>
+</ul>
+
+<h3 id="Константи_і_типи">Константи і типи</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebGL_API/Constants">Константи WebGL</a></li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API/Types">Типи WebGL</a></li>
+</ul>
+
+<h2 id="Керівництва_і_навчальні_сторінки">Керівництва і навчальні сторінки</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebGL_API/Tutorial">Керівництво по WebGL</a>: Основні поняття WebGL для початківця. Гарний початок, якщо ви не маєте досвіду роботи з WebGL.</li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API/WebGL_best_practices">Кращі практики WebGL</a>: Підказки та поради для покращення контенту WebGL.</li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions">Використання розширень</a>: Як використовувати доступні для WebGL розширення.</li>
+</ul>
+
+<h3 id="Детальні_керівництва">Детальні керівництва</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection">WebGL model view projection</a>: Детальне пояснення трьох основних матриць, які переважно використовуються для представлення 3D виду об'єкту: матриця моделі, виду та проекції.</li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Matrix math for the web</a>: Корисне керівництво про те, як працюють матриці 3D перетворення, та як вони можуть бути використані в web - як для розрахунків WebGL, так і для CSS3 перетворень .</li>
+</ul>
+
+<h2 id="Ресурси">Ресурси</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage">Raw WebGL: An introduction to WebGL</a> Розмова Ніка Дізолнірс який знайомить з основами WebGL. Це відмінне місце, щоб почати, якщо ви ніколи не займались низькорівневим програмуванням графіки.</li>
+ <li><a href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Khronos WebGL site</a> Основний веб-сайт WebGL на Khronos Group.</li>
+ <li><a href="http://learningwebgl.com/blog/?page_id=1217" title="http://learningwebgl.com/blog/">Learning WebGL</a> Сайт з керівництвами про використання WebGL.</li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">WebGL Fundamentals</a> Базове керівництво про основи WebGL.</li>
+ <li><a href="http://webglplayground.net" title="http://webglplayground.net">WebGL playground</a> An online tool for creating and sharing WebGL projects. Good for quick prototyping and experimenting.</li>
+ <li><a href="http://www.webglacademy.com" title="http://www.webglacademy.com">WebGL Academy</a> Редактор HTML/JavaScript з керівництвами для вивчення основ програмування під WebGL.</li>
+ <li><a href="http://webglstats.com/">WebGL Stats</a> Сайт зі статистикою про можливості WebGL в веб-переглядачах на різних платформах.</li>
+</ul>
+
+<h3 id="Бібліотеки">Бібліотеки</h3>
+
+<ul>
+ <li><a class="link-https" href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix">glMatrix</a> JavaScript-бібліотека матриці і вектору для WebGL додатків з високою ефективністю.</li>
+ <li><a href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a> Бібліотека з відкритим початковим кодом для маніпулювання векторами і матрицями. Не оптимізована для WebGL але надзвичайно міцна.</li>
+</ul>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebGL')}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Початкове визначення. Базується на OpenGL ES 2.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL2')}}</td>
+   <td>{{Spec2('WebGL2')}}</td>
+   <td>Будується поверх WebGL1. На основі OpenGL ES 3.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0')}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0')}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність">Сумісність</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Функція</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базова підтримка</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9</td>
+   <td>11</td>
+   <td>12<sup>[1]</sup></td>
+   <td>5.1<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Функція</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Chrome for Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базова підтримка</td>
+   <td>4</td>
+   <td>25<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>12<sup>[1]</sup></td>
+   <td>8.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Реалізація цієї функції є експериментальною.</p>
+
+<h3 id="Зауваження_по_сумісності">Зауваження по сумісності</h3>
+
+<p>На додаток до веб-переглядача, сам графічний процесор також має підтримувати цю функцію. Так, наприклад, стиснення текстур S3 (S3TC) доступне тільки для планшетів на основі Tegra . Більшість браузерів роблять контекст WebGL доступним через контекстне ім'я <code>webgl</code>, але старішим також потрібно <code>experimental-webgl</code>. Крім того, майбутній WebGL 2 повністю сумісний і матиме ім'я контексту <code>webgl2</code>.</p>
+
+<h3 id="Зауваження_Gecko">Зауваження Gecko</h3>
+
+<h4 id="Налагодження_і_тестування_WebGL">Налагодження і тестування WebGL</h4>
+
+<p>Починаючи з Gecko 10.0 {{geckoRelease("10.0")}}, є дві доступні опції, які дозволяють контролювати можливості WebGL з метою тестування:</p>
+
+<dl>
+ <dt><code>webgl.min_capability_mode</code></dt>
+ <dd>Властивість типу Boolean яка, коли <code>true</code>, вмикає режим мінімальної сумісності. Коли WebGL знаходиться в даному режимі, він налаштований підтримувати тільки мінімальний набір функцій і можливостей, необхідних специфікації WebGL. Це дозволяє вам бути впевненими, що важ WebGL код буде працювати на будь-якому пристрої або веб-переглядачі, незалежно від інших можливостей. Має значення <code>false</code> за замовчування.</dd>
+ <dt><code>webgl.disable_extensions</code></dt>
+ <dd>Властивість типу Boolean яка, коли <code>true</code>, вимикає всі розширення WebGL. Має значення <code>false</code> за замовчуванням.</dd>
+</dl>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility">Інформація про сумісніть розширень WebGL</a></li>
+</ul>
diff --git a/files/uk/web/api/websocket/index.html b/files/uk/web/api/websocket/index.html
new file mode 100644
index 0000000000..e2dac93e8c
--- /dev/null
+++ b/files/uk/web/api/websocket/index.html
@@ -0,0 +1,330 @@
+---
+title: WebSocket
+slug: Web/API/WebSocket
+translation_of: Web/API/WebSocket
+---
+<div>{{APIRef("Web Sockets API")}}{{SeeCompatTable}}</div>
+
+<p>Об'єкт <code>WebSocket надає </code>API (інтерфейс) для створення і керування  <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket</a>-з'єднаннями з сервером connection to a server, а також для надсилання і отримання повідомлень з даними.</p>
+
+<p>Конструктор WebSocket приймає один обов'язковий і один опціональний параметр:</p>
+
+<pre class="syntaxbox">new WebSocket(
+  in DOMString url,
+  in optional DOMString protocols
+);
+</pre>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>Це адреса URL, до якої треба підключитись. Тобто адреса, з якої буде відповідати WebSocket на сервері.</dd>
+ <dt><code>protocols</code> {{optional_inline}}</dt>
+ <dd>Це один протокол або масив протоколів. Протокол - це текст. Ці протоколи потрібні, щоб вказати під-протоколи, щоб один сервер міг виконувати декілька під-протоколів WebSocket (на приклад, вам потрібен сервер, який здатний працювати з різними типами взаємодій залежно від протоколу). Якщо ви не вкажете протокол, то WebSocket буде вважати, що отримав пустий рядок.</dd>
+</dl>
+
+<p>Конструктор може повертати помилки. На прикладі нижче помилка про "порт, до якого була спроба підключитися, був заблокований":</p>
+
+<dl>
+ <dt><code>SECURITY_ERR</code></dt>
+ <dd>The port to which the connection is being attempted is being blocked.</dd>
+</dl>
+
+<h2 id="Method_overview">Method overview</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#close()">close</a>(in optional unsigned long code, in optional DOMString reason);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#send()">send</a>(in DOMString data);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes">Attributes</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Attribute</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>binaryType</code></td>
+   <td>{{DOMXref("DOMString")}}</td>
+   <td>A string indicating the type of binary data being transmitted by the connection. This should be either "blob" if DOM {{domxref("Blob")}} objects are being used or "arraybuffer" if {{jsxref("ArrayBuffer")}} objects are being used.</td>
+  </tr>
+  <tr>
+   <td><code>bufferedAmount</code></td>
+   <td><code>unsigned long</code></td>
+   <td>The number of bytes of data that have been queued using calls to {{manch("send")}} but not yet transmitted to the network. This value resets to zero once all queued data has been sent. This value does not reset to zero when the connection is closed; if you keep calling {{manch("send")}}, this will continue to climb. <strong>Read only</strong></td>
+  </tr>
+  <tr>
+   <td><code>extensions</code></td>
+   <td>{{DOMXref("DOMString")}}</td>
+   <td>The extensions selected by the server. This is currently only the empty string or a list of extensions as negotiated by the connection.</td>
+  </tr>
+  <tr>
+   <td><code>onclose</code></td>
+   <td>{{domxref("EventListener")}}</td>
+   <td>An event listener to be called when the WebSocket connection's <code>readyState</code> changes to <code>CLOSED</code>. The listener receives a <a href="/en-US/docs/Web/API/CloseEvent"><code>CloseEvent</code></a> named "close".</td>
+  </tr>
+  <tr>
+   <td><code>onerror</code></td>
+   <td>{{domxref("EventListener")}}</td>
+   <td>An event listener to be called when an error occurs. This is a simple event named "error".</td>
+  </tr>
+  <tr>
+   <td><code>onmessage</code></td>
+   <td>{{domxref("EventListener")}}</td>
+   <td>An event listener to be called when a message is received from the server. The listener receives a <a href="/en-US/docs/Web/API/MessageEvent"><code>MessageEvent</code></a> named "message".</td>
+  </tr>
+  <tr>
+   <td><code>onopen</code></td>
+   <td>{{domxref("EventListener")}}</td>
+   <td>An event listener to be called when the WebSocket connection's <code>readyState</code> changes to <code>OPEN</code>; this indicates that the connection is ready to send and receive data. The event is a simple one with the name "open".</td>
+  </tr>
+  <tr>
+   <td><code>protocol</code></td>
+   <td>{{DOMXref("DOMString")}}</td>
+   <td>A string indicating the name of the sub-protocol the server selected; this will be one of the strings specified in the <code>protocols</code> parameter when creating the WebSocket object.</td>
+  </tr>
+  <tr>
+   <td><code>readyState</code></td>
+   <td><code>unsigned short</code></td>
+   <td>The current state of the connection; this is one of the {{anch("Ready state constants")}}. <strong>Read only.</strong></td>
+  </tr>
+  <tr>
+   <td><code>url</code></td>
+   <td>{{DOMXref("DOMString")}}</td>
+   <td>The URL as resolved by the constructor. This is always an absolute URL. <strong>Read only.</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constants">Constants</h2>
+
+<h3 id="Ready_state_constants">Ready state constants</h3>
+
+<p>These constants are used by the <code>readyState</code> attribute to describe the state of the WebSocket connection.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Constant</td>
+   <td class="header">Value</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>CONNECTING</code></td>
+   <td><code>0</code></td>
+   <td>The connection is not yet open.</td>
+  </tr>
+  <tr>
+   <td><code>OPEN</code></td>
+   <td><code>1</code></td>
+   <td>The connection is open and ready to communicate.</td>
+  </tr>
+  <tr>
+   <td><code>CLOSING</code></td>
+   <td><code>2</code></td>
+   <td>The connection is in the process of closing.</td>
+  </tr>
+  <tr>
+   <td><code>CLOSED</code></td>
+   <td><code>3</code></td>
+   <td>The connection is closed or couldn't be opened.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods">Methods</h2>
+
+<h3 id="close()">close()</h3>
+
+<p>Closes the WebSocket connection or connection attempt, if any. If the connection is already <code>CLOSED</code>, this method does nothing.</p>
+
+<pre class="syntaxbox">void close(
+  in optional unsigned short code,
+  in optional DOMString reason
+);
+</pre>
+
+<h4 id="Parameters">Parameters</h4>
+
+<dl>
+ <dt><code>code</code> {{optional_inline}}</dt>
+ <dd>A numeric value indicating the status code explaining why the connection is being closed. If this parameter is not specified, a default value of 1000 (indicating a normal "transaction complete" closure) is assumed. See the <a href="/en-US/docs/Web/API/CloseEvent#Status_codes">list of status codes</a> on the <a href="/en-US/docs/Web/API/CloseEvent"><code>CloseEvent</code></a> page for permitted values.</dd>
+ <dt><code>reason</code> {{optional_inline}}</dt>
+ <dd>A human-readable string explaining why the connection is closing. This string must be no longer than 123 bytes of UTF-8 text (<strong>not</strong> characters).</dd>
+</dl>
+
+<h4 id="Exceptions_thrown">Exceptions thrown</h4>
+
+<dl>
+ <dt><code>INVALID_ACCESS_ERR</code></dt>
+ <dd>An invalid <code>code</code> was specified.</dd>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>The <code>reason</code> string is too long or contains unpaired surrogates.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> In Gecko, this method didn't support any parameters prior to Gecko 8.0 {{geckoRelease("8.0")}}.</p>
+</div>
+
+<h3 id="send()">send()</h3>
+
+<p>Transmits data to the server over the WebSocket connection.</p>
+
+<pre class="syntaxbox">void send(
+  in DOMString data
+);
+
+void send(
+  in ArrayBuffer data
+);
+
+void send(
+  in Blob data
+);
+</pre>
+
+<h4 id="Parameters_2">Parameters</h4>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>A text string to send to the server.</dd>
+</dl>
+
+<h4 id="Exceptions_thrown_2">Exceptions thrown</h4>
+
+<dl>
+ <dt><code>INVALID_STATE_ERR</code></dt>
+ <dd>The connection is not currently <code>OPEN</code>.</dd>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>The data is a string that has unpaired surrogates.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> Gecko's implementation of the <code>send()</code> method differs somewhat from the specification in {{Gecko("6.0")}}; Gecko returns a <code>boolean</code> indicating whether or not the connection is still open (and, by extension, that the data was successfully queued or transmitted); this is corrected in {{Gecko("8.0")}}.</p>
+
+<p>As of {{Gecko("11.0")}}, support for {{jsxref("ArrayBuffer")}} is implemented but not {{domxref("Blob")}} data types.</p>
+</div>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">// Create WebSocket connection.
+const socket = new WebSocket('ws://localhost:8080');
+
+// Connection opened
+socket.addEventListener('open', function (event) {
+    socket.send('Hello Server!');
+});
+
+// Listen for messages
+socket.addEventListener('message', function (event) {
+    console.log('Message from server', event.data);
+});</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Websockets", "#the-websocket-interface", "WebSocket")}}</td>
+   <td>{{Spec2("Websockets")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Sub-protocol support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("7.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Sub-protocol support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("7.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Starting in Gecko 6.0 {{geckoRelease("6.0")}}, the constructor is prefixed; you will need to use <code>MozWebSocket()</code>: <code>var mySocket = new MozWebSocket("http://www.example.com/socketserver");</code></p>
+
+<p>The <code>extensions</code> attribute was not supported in Gecko until Gecko 8.0.</p>
+
+<p>Prior to Gecko 11.0 {{geckoRelease("11.0")}}, outbound messages sent using the <a href="#send()">send()</a> method were limited to 16 MB. They can now be up to 2 GB in size.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></li>
+</ul>
diff --git a/files/uk/web/api/window/confirm/index.html b/files/uk/web/api/window/confirm/index.html
new file mode 100644
index 0000000000..61da2b0042
--- /dev/null
+++ b/files/uk/web/api/window/confirm/index.html
@@ -0,0 +1,69 @@
+---
+title: Window.confirm()
+slug: Web/API/Window/confirm
+tags:
+  - API
+  - DOM
+  - Window
+  - confirm
+  - Посилання
+  - метод
+translation_of: Web/API/Window/confirm
+---
+<div>{{ApiRef("Window")}}</div>
+
+<p>Метод <code><strong>Window.confirm()</strong></code> показує модальний діалог з необов’язковим текстом та двома кнопками, Так та Відміна.</p>
+
+<h2 id="Syntax" name="Syntax">Синтакс</h2>
+
+<pre><em>result</em> = window.confirm(<em>message</em>);
+</pre>
+
+<ul>
+ <li><code>message</code> це необов’язковий текст, що показується в діалозі.</li>
+ <li><code>result</code> це бульове значення, яке показує, яку кнопку було натиснуто (<code>true</code> значить Так).</li>
+</ul>
+
+<h2 id="Example" name="Example">Приклад</h2>
+
+<pre>if (window.confirm("Do you really want to leave?")) {
+  window.open("exit.html", "Thanks for Visiting!");
+}
+</pre>
+
+<p>Результат:</p>
+
+<p><img alt="firefox confirm" src="https://mdn.mozillademos.org/files/7163/firefoxcomfirmdialog_zpsf00ec381.png" style="height: 119px; width: 354px;"><br>
+  </p>
+
+<h2 id="Notes" name="Notes">Нотатки</h2>
+
+<p><span class="comment">The following text is shared between this article, DOM:window.prompt and DOM:window.alert</span>Діалоги є модальними вікнами - вони запобігають доступу користувача до іншої частини програмного інтерфейсу аж до моменту закриття діалогу. Саме тому ви не маєте занадто часто використовувати жодну функцію, яка створює діалоги (чи модальні вікна). В будь якому разі, є хороші підстави <a href="http://alistapart.com/article/neveruseawarning">не використовувати діалоги для підтверджень</a>.</p>
+
+<p>Починаючи з Chrome {{CompatChrome(46.0)}} цей етод заблокований в межах {{htmlelement("iframe")}} доти, доки атрибут sandbox айфрейму не має значення <code>allow-modal</code>.</p>
+
+<p>{{gecko_minversion_inline("23.0")}} Цей аргумент є необов’язковим і не вимагається специфікацією.</p>
+
+<h2 id="Specification" name="Specification">Специфікація</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-confirm', 'confirm()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Дивіться також</h2>
+
+<ul>
+ <li>{{domxref("window.alert","alert")}}</li>
+ <li>{{domxref("window.prompt","prompt")}}</li>
+</ul>
diff --git a/files/uk/web/api/window/console/index.html b/files/uk/web/api/window/console/index.html
new file mode 100644
index 0000000000..bb1cc673b9
--- /dev/null
+++ b/files/uk/web/api/window/console/index.html
@@ -0,0 +1,56 @@
+---
+title: Window.console
+slug: Web/API/Window/console
+tags:
+  - API
+  - Property
+  - Read-only
+  - Window
+  - console
+  - Посилання
+translation_of: Web/API/Window/console
+---
+<p>{{ APIRef }}</p>
+
+<p><strong><code>Window.console</code></strong> — це незмінювана (read-only) властивість, що повертає посилання на об’єкт {{domxref("Console")}}, який надає методи для логування інформацію до консолі браузера. Ці методи призначені для відлагоджування і не мають використовуватися для передачі інформації кінцевому користувачу.</p>
+
+<h2 id="Syntax" name="Syntax">Синтакс</h2>
+
+<pre class="syntaxbox"><em>var consoleObj</em> = <em>window</em>.console;
+</pre>
+
+<h2 id="Example" name="Example">Приклад</h2>
+
+<h3 id="Логування_до_консолі">Логування до консолі</h3>
+
+<p>Перший приклад відправляє текст до консолі браузера.</p>
+
+<pre class="brush: js">console.log("An error occurred while loading the content");
+</pre>
+
+<p>Наступний приклад відправляє текст до консолі браузера, разом з полями об’єкта, які можуть розкриватися:</p>
+
+<pre class="brush: js">console.dir(someObject);</pre>
+
+<p>Дивіться {{SectionOnPage("/en-US/docs/Web/API/Console", "Usage")}} для перегляду інших прикладів.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Console API')}}</td>
+   <td>{{Spec2('Console API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p>Наразі існує багато імплементацій, що відрізняються залежно від браузера, однак триває робота щодо уніфікації і міжбраузерної  консистентності.</p>
+</div>
diff --git a/files/uk/web/api/window/history/index.html b/files/uk/web/api/window/history/index.html
new file mode 100644
index 0000000000..208b453c09
--- /dev/null
+++ b/files/uk/web/api/window/history/index.html
@@ -0,0 +1,63 @@
+---
+title: Window.history
+slug: Web/API/Window/history
+tags:
+  - API
+  - History API
+  - Property
+  - Reference
+  - Window
+translation_of: Web/API/Window/history
+---
+<p>{{ APIRef }}</p>
+
+<p><code><strong>Window</strong>.<strong>history</strong></code> - це незмінювана (read-only) властивість, що повертає посилання на <span class="tlid-translation translation"><span title="">об'єкт</span></span> {{domxref("History")}}, <span class="tlid-translation translation"><span title="">який надає інтерфейс для керування історією сеансу браузера (сторінки, відвіданій на вкладці або фреймі, в якому завантажена поточна сторінка</span> <span title="">).</span></span></p>
+
+<p>Дивіться <a href="/en-US/docs/Web/API/History_API">Manipulating the browser history</a> <span class="tlid-translation translation"><span title="">для прикладів і деталей</span></span>. Зокрема, у цій статті пояснюються особливості безпеки методів <code>pushState()</code> та <code>replaceState()</code>, з якими вам варто ознайомитися, перш ніж їх використовувати.</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox">var <var>historyObj</var> = <var>window</var>.history;
+</pre>
+
+<h2 id="Example" name="Example">Приклад</h2>
+
+<pre class="brush: js">history.back();     // еквівалентно настиканню кнопки назад
+history.go(-1);     // еквівалентно history.back();
+</pre>
+
+<h2 id="Примітки">Примітки</h2>
+
+<p><span class="tlid-translation translation"><span title="">Для сторінок верхнього рівня ви можете побачити список сторінок в історії сеансу, доступних через об'єкт</span></span> <code>History</code>, <span class="tlid-translation translation"><span title="">у випадаючих списках браузера поруч із кнопками вперед і назад.</span></span></p>
+
+<p>З міркуваннь безпеки, об'єкт <code>History</code> не дає доступу <span class="tlid-translation translation"><span title="">непривілейованого коду до URL-адрес інших сторінок в історії сеансів, але дозволяє переміщатися по історії сеансу</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Неможливо очистити історію сеансу або вимкнути навігацію кнопок вперед/назад з непривілейованого коду.</span> <span title="">Найближчим доступним рішенням є метод </span></span><code><a href="/en/DOM/window.location#replace" title="en/DOM/window.location#replace">location.replace()</a></code><span class="tlid-translation translation"><span title="">, який замінює поточний елемент історії сеансу наданим URL.</span></span></p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'browsers.html#the-history-interface', 'The History interface')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#the-history-interface', 'The History interface')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+
+
+<p>{{Compat("api.Window.history")}}</p>
diff --git a/files/uk/web/api/window/index.html b/files/uk/web/api/window/index.html
new file mode 100644
index 0000000000..a27230e343
--- /dev/null
+++ b/files/uk/web/api/window/index.html
@@ -0,0 +1,460 @@
+---
+title: Window
+slug: Web/API/Window
+tags:
+  - API
+  - DOM
+  - Interface
+  - JavaScript
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Window
+translation_of: Web/API/Window
+---
+<p>{{APIRef}}</p>
+
+<p><span class="seoSummary">The <code>window</code> object represents a window containing a DOM document; the <code>document</code> property points to the <a href="/en-US/docs/DOM/document">DOM document</a> loaded in that window.</span> A window for a given document can be obtained using the {{Domxref("document.defaultView")}} property.</p>
+
+<p>This section provides a brief reference for all of the methods, properties, and events available through the DOM <code>window</code> object. The <code>window</code> object implements the <code>Window</code> interface, which in turn inherits from the <code><a href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a></code> interface. Some additional global functions, namespaces, objects, interfaces, and constructors, not typically associated with the window, but available on it, are listed in the <a href="/en-US/docs/JavaScript/Reference">JavaScript Reference</a> and <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a>.</p>
+
+<p>In a tabbed browser, such as Firefox, each tab contains its own <code>window</code> object (and if you're writing an extension, the browser window itself is a separate window too - see <a href="/en-US/docs/Working_with_windows_in_chrome_code#Content_windows">Working with windows in chrome code</a> for more information). That is, the <code>window</code> object is not shared between tabs in the same window. Some methods, namely {{Domxref("window.resizeTo")}} and {{Domxref("window.resizeBy")}} apply to the whole window and not to the specific tab the <code>window</code> object belongs to. Generally, anything that can't reasonably pertain to a tab pertains to the window instead.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from the {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.</em></p>
+
+<p>Note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below.</p>
+
+<dl>
+ <dt>{{domxref("Window.applicationCache")}}  {{readOnlyInline}} {{gecko_minversion_inline("1.9")}}</dt>
+ <dd>An {{domxref("OfflineResourceList")}} object providing access to the offline resources for the window.</dd>
+ <dt>{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}</dt>
+ <dd>This property indicates whether the current window is closed or not.</dd>
+ <dt>{{domxref("Window.Components")}} {{Non-standard_inline}}</dt>
+ <dd>The entry point to many <a href="/en-US/docs/XPCOM">XPCOM</a> features. Some properties, e.g. <a href="/en-US/docs/Components.classes">classes</a>, are only available to sufficiently privileged code. <strong>Web code should not use this property.</strong></dd>
+ <dt>{{domxref("Window.console")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the console object which provides access to the browser's debugging console.</dd>
+ <dt>{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the content element in the current window. The obsolete variant with underscore is no longer available from Web content.</dd>
+ <dt>{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Returns the XUL controller objects for the current chrome window.</dd>
+ <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt>
+ <dd>Returns the browser crypto object.</dd>
+ <dt>{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}</dt>
+ <dd>Gets/sets the status bar text for the given window.</dd>
+ <dt>{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Returns the ratio between physical pixels and device independent pixels in the current display.</dd>
+ <dt>{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}</dt>
+ <dd>Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.</dd>
+ <dt>{{domxref("Window.directories")}} {{obsolete_inline}}</dt>
+ <dd>Synonym of {{domxref("window.personalbar")}}</dd>
+ <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the document that the window contains.</dd>
+ <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt>
+ <dd>Returns the element in which the window is embedded, or null if the window is not embedded.</dd>
+ <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt>
+ <dd>Returns an array of the subframes in the current window.</dd>
+ <dt>{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}</dt>
+ <dd>This property indicates whether the window is displayed in full screen or not.</dd>
+ <dt>{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}</dt>
+ <dd>Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.<br>
+ Was: Multiple storage objects that are used for storing data across multiple pages.</dd>
+ <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the history object.</dd>
+ <dt>{{domxref("Window.innerHeight")}}</dt>
+ <dd>Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.</dd>
+ <dt>{{domxref("Window.innerWidth")}}</dt>
+ <dd>Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.</dd>
+ <dt>{{domxref("Window.isSecureContext")}} {{readOnlyInline}}</dt>
+ <dd>Indicates whether a context is capable of using features that require secure contexts.</dd>
+ <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt>
+ <dd>Returns the number of frames in the window. See also {{domxref("window.frames")}}.</dd>
+ <dt>{{domxref("Window.location")}} {{ReadOnlyInline}}</dt>
+ <dd>Gets/sets the location, or current URL, of the window object.</dd>
+ <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the locationbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd>Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.</dd>
+ <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the menubar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Returns the <a href="/en-US/docs/The_message_manager">message manager</a> object for this window.</dd>
+ <dt>{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}}</dt>
+ <dd>The time in milliseconds since epoch at which the current animation cycle began.</dd>
+ <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.</dd>
+ <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> for a conversion factor to adapt to screen pixels if needed.</dd>
+ <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.</dd>
+ <dt>{{domxref("Window.name")}}</dt>
+ <dd>Gets/sets the name of the window.</dd>
+ <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the navigator object.</dd>
+ <dt>{{domxref("Window.opener")}}</dt>
+ <dd>Returns a reference to the window that opened this current window.</dd>
+ <dt>{{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}}</dt>
+ <dd>Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.</dd>
+ <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt>
+ <dd>Gets the height of the outside of the browser window.</dd>
+ <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt>
+ <dd>Gets the width of the outside of the browser window.</dd>
+ <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt>
+ <dd>An alias for {{domxref("window.scrollX")}}.</dd>
+ <dt>{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}</dt>
+ <dd>An alias for {{domxref("window.scrollY")}}</dd>
+ <dt>{{domxref("Window.sessionStorage")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.</dd>
+ <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the parent of the current window or subframe.</dd>
+ <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt>
+ <dd>Provides a hosting area for <a href="/en-US/docs/Navigation_timing">performance related</a> attributes.</dd>
+ <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt>
+ <dd>Returns the personalbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}</dt>
+ <dd>Formerly provided access to install and remove PKCS11 modules.</dd>
+ <dt>{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}</dt>
+ <dd>The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.</dd>
+ <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the screen object associated with the window.</dd>
+
+ <dt>{{domxref("Window.screenX")}} {{readOnlyInline}}</dt>
+ <dd>Returns the horizontal distance of the left border of the user's browser from the left side of the screen.</dd>
+ <dt>{{domxref("Window.screenY")}} {{readOnlyInline}}</dt>
+ <dd>Returns the vertical distance of the top border of the user's browser from the top side of the screen.</dd>
+ <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt>
+ <dd>Returns the scrollbars object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.</dd>
+ <dt>{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).</dd>
+ <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt>
+ <dd>Returns the number of pixels that the document has already been scrolled horizontally.</dd>
+ <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt>
+ <dd>Returns the number of pixels that the document has already been scrolled vertically.</dd>
+ <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns an object reference to the window object itself.</dd>
+ <dt>{{domxref("Window.sessionStorage")}} {{Fx_minversion_inline("2.0")}}</dt>
+ <dd>Returns a storage object for storing data within a single page session.</dd>
+ <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the window object of the sidebar.</dd>
+ <dt>{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a {{domxref("SpeechSynthesis")}} object, which is the entry point into using <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> speech synthesis functionality.</dd>
+ <dt>{{domxref("Window.status")}}</dt>
+ <dd>Gets/sets the text in the statusbar at the bottom of the browser.</dd>
+ <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt>
+ <dd>Returns the statusbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt>
+ <dd>Returns the toolbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the topmost window in the window hierarchy. This property is read only.</dd>
+ <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the current window.</dd>
+ <dt><code>window[0]</code>,<code> window[1]</code>, etc.</dt>
+ <dd>Returns a reference to the <code>window</code> object in the frames. See {{domxref("Window.frames")}} for more details.</dd>
+</dl>
+
+<h3 id="Properties_implemented_from_elsewhere">Properties implemented from elsewhere</h3>
+
+<dl>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt>
+ <dd>Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt>
+ <dd>Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt>
+ <dd>Returns a boolean indicating whether the current context is secure (<code>true</code>) or not (<code>false</code>).</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt>
+ <dd>Returns the global object's origin, serialized as a string. (This does not yet appear to be implemented in any browser.)</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Window.alert()")}}</dt>
+ <dd>Displays an alert dialog.</dd>
+
+ <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Moves back one in the window history.</dd>
+ <dt>{{domxref("Window.blur()")}}</dt>
+ <dd>Sets focus away from the window.</dd>
+ <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt>
+ <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.</dd>
+ <dt>{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}</dt>
+ <dd>Registers the window to capture all events of the specified type.</dd>
+ <dt>{{domxref("Window.clearImmediate()")}}</dt>
+ <dd>Cancels the repeated execution set using <code>setImmediate</code>.</dd>
+ <dt>{{domxref("Window.close()")}}</dt>
+ <dd>Closes the current window.</dd>
+ <dt>{{domxref("Window.confirm()")}}</dt>
+ <dd>Displays a dialog with a message that the user needs to respond to.</dd>
+ <dt>{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.dispatchEvent()")}}</dt>
+ <dd>Used to trigger an event.</dd>
+ <dt>{{domxref("Window.dump()")}}</dt>
+ <dd>Writes a message to the console.</dd>
+ <dt>{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.find()")}}</dt>
+ <dd>Searches for a given string in a window.</dd>
+ <dt>{{domxref("Window.focus()")}}</dt>
+ <dd>Sets focus on the current window.</dd>
+ <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Moves the window one document forward in the history.</dd>
+ <dt>{{domxref("Window.getAttention()")}}</dt>
+ <dd>Flashes the application icon.</dd>
+ <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.getComputedStyle()")}}</dt>
+ <dd>Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.</dd>
+ <dt>{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}</dt>
+ <dd>Gets default computed style for the specified element, ignoring author stylesheets.</dd>
+ <dt>{{domxref("Window.getSelection()")}}</dt>
+ <dd>Returns the selection object representing the selected item(s).</dd>
+ <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Returns the browser to the home page.</dd>
+ <dt>{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.</dd>
+ <dt>{{domxref("Window.maximize()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt>
+ <dd>Minimizes the window.</dd>
+ <dt>{{domxref("Window.moveBy()")}}</dt>
+ <dd>Moves the current window by a specified amount.</dd>
+ <dt>{{domxref("Window.moveTo()")}}</dt>
+ <dd>Moves the window to the specified coordinates.</dd>
+ <dt>{{domxref("Window.mozRequestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame. This will cause a <code>MozBeforePaint</code> event to fire before that repaint occurs.</dd>
+ <dt>{{domxref("Window.open()")}}</dt>
+ <dd>Opens a new window.</dd>
+ <dt>{{domxref("Window.openDialog()")}}</dt>
+ <dd>Opens a new dialog window.</dd>
+ <dt>{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}</dt>
+ <dd>Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.</dd>
+ <dt>{{domxref("Window.print()")}}</dt>
+ <dd>Opens the Print Dialog to print the current document.</dd>
+ <dt>{{domxref("Window.prompt()")}}</dt>
+ <dd>Returns the text entered by the user in a prompt dialog.</dd>
+ <dt>{{domxref("Window.releaseEvents()")}} {{Deprecated_inline}}</dt>
+ <dd>Releases the window from trapping events of a specific type.</dd>
+ <dt>{{domxref("Window.requestIdleCallback()")}}  {{experimental_inline}}</dt>
+ <dd>Enables the scheduling of tasks during a browser's idle periods.</dd>
+ <dt>{{domxref("Window.resizeBy()")}}</dt>
+ <dd>Resizes the current window by a certain amount.</dd>
+ <dt>{{domxref("Window.resizeTo()")}}</dt>
+ <dd>Dynamically resizes window.</dd>
+ <dt>{{domxref("Window.restore()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.scroll()")}}</dt>
+ <dd>Scrolls the window to a particular place in the document.</dd>
+ <dt>{{domxref("Window.scrollBy()")}}</dt>
+ <dd>Scrolls the document in the window by the given amount.</dd>
+ <dt>{{domxref("Window.scrollByLines()")}}</dt>
+ <dd>Scrolls the document by the given number of lines.</dd>
+ <dt>{{domxref("Window.scrollByPages()")}}</dt>
+ <dd>Scrolls the current document by the specified number of pages.</dd>
+ <dt>{{domxref("Window.scrollTo()")}}</dt>
+ <dd>Scrolls to a particular set of coordinates in the document.</dd>
+ <dt>{{domxref("Window.setCursor()")}}</dt>
+ <dd>Changes the cursor for the current window</dd>
+ <dt>{{domxref("Window.setImmediate()")}}</dt>
+ <dd>Executes a function after the browser has finished other heavy tasks</dd>
+ <dt>{{domxref("Window.setResizable()")}}</dt>
+ <dd>Toggles a user's ability to resize a window.</dd>
+ <dt>{{domxref("Window.showModalDialog()")}} {{Fx_minversion_inline(3)}}</dt>
+ <dd>Displays a modal dialog.</dd>
+ <dt>{{domxref("Window.sizeToContent()")}}</dt>
+ <dd>Sizes the window according to its content.</dd>
+ <dt>{{domxref("Window.stop()")}}</dt>
+ <dd>This method stops window loading.</dd>
+ <dt>{{domxref("Window.updateCommands()")}}</dt>
+ <dd>Updates the state of commands of the current chrome window (UI).</dd>
+</dl>
+
+<h3 id="Methods_implemented_from_elsewhere">Methods implemented from elsewhere</h3>
+
+<dl>
+ <dt>{{domxref("EventTarget.addEventListener()")}}</dt>
+ <dd>Register an event handler to a specific event type on the window.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt>
+ <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt>
+ <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt>
+ <dd>Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt>
+ <dd>Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at <em>(sx, sy)</em> with width sw, and height sh.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt>
+ <dd>Starts the process of fetching a resource from the network.</dd>
+ <dt>{{domxref("EventTarget.removeEventListener")}}</dt>
+ <dd>Removes an event listener from the window.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt>
+ <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt>
+ <dd>Schedules a function to execute in a given amount of time.</dd>
+</dl>
+
+<h2 id="Event_handlers">Event handlers</h2>
+
+<p>These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.</p>
+
+<p><em>This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowEventHandlers")}}.</em></p>
+
+<div class="note">
+<p><strong>Note:</strong> Starting in {{Gecko("9.0")}}, you can now use the syntax <code>if ("onabort" in window)</code> to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See <a href="/en-US/docs/DOM/DOM_event_handlers">DOM event handlers</a> for details.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt>
+ <dd>Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress</dd>
+ <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
+ <dd>Called when the print dialog box is closed. See {{event("afterprint")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
+ <dd>Called when the print dialog box is opened. See {{event("beforeprint")}} event.</dd>
+ <dt>{{domxref("Window.onbeforeinstallprompt")}}</dt>
+ <dd>An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>An event handler property for before-unload events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt>
+ <dd>Called after the window loses focus, such as due to a popup.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt>
+ <dd>An event handler property for change events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt>
+ <dd>Called after the ANY mouse button is pressed &amp; released</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt>
+ <dd>Called when a double click is made with ANY mouse button.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt>
+ <dd>Called after the window is closed</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt>
+ <dd>Called when the RIGHT mouse button is pressed</dd>
+ <dt>{{domxref("Window.ondevicelight")}}</dt>
+ <dd>An event handler property for any ambient light levels changes</dd>
+ <dt>{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>Called if accelerometer detects a change (For mobile devices)</dd>
+ <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>Called when the orientation is changed (For mobile devices)</dd>
+ <dt>{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only</dt>
+ <dd>An event handler property for any device orientation changes.</dd>
+ <dt>{{domxref("Window.ondeviceproximity")}}</dt>
+ <dd>An event handler property for device proximity event</dd>
+ <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
+ <dd>Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt>
+ <dd>Called after the window receives or regains focus. See {{event("focus")}} events.</dd>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.</dd>
+ <dt>{{domxref("Window.onappinstalled")}}</dt>
+ <dd>Called when the page is installed as a webapp. See {{event('appinstalled')}} event.</dd>
+ <dt>{{domxref("Window.oninput")}}</dt>
+ <dd>Called when the value of an &lt;input&gt; element changes</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt>
+ <dd>Called when you begin pressing ANY key. See {{event("keydown")}} event.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt>
+ <dd>Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt>
+ <dd>Called when you finish releasing ANY key. See {{event("keyup")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt>
+ <dd>An event handler property for {{event("languagechange")}} events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onload")}}</dt>
+ <dd>Called after all resources and the DOM are fully loaded. WILL NOT get called when the page is loaded from cache, such as with back button.</dd>
+ <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt>
+ <dd>Called when ANY mouse button is pressed.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt>
+ <dd>Called continously when the mouse is moved inside the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt>
+ <dd>Called when the pointer leaves the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt>
+ <dd>Called when the pointer enters the window</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt>
+ <dd>Called when ANY mouse button is released</dd>
+ <dt>{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>An event handler property for the <code>MozBeforePaint</code> event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.</dd>
+ <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
+ <dd>Called when network connection is lost. See {{event("offline")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
+ <dd>Called when network connection is established. See {{event("online")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.</dd>
+ <dt>{{domxref("Window.onpaint")}}</dt>
+ <dd>An event handler property for paint events on the window.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Called when a back putton is pressed.</dd>
+ <dt>{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}</dt>
+ <dd>An event handler for handled {{jsxref("Promise")}} rejection events.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt>
+ <dd>Called when a form is reset</dd>
+ <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt>
+ <dd>Called continuously as you are resizing the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt>
+ <dd>Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked</dd>
+ <dt>{{domxref("GlobalEventHandlers.onwheel")}}</dt>
+ <dd>Called when the mouse wheel is rotated around any axis</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt>
+ <dd>Called after text in an input field is selected</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt>
+ <dd>Called when there is a change in session storage or local storage. See {{event("storage")}} event</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt>
+ <dd>Called when a form is submitted</dd>
+ <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt>
+ <dd>An event handler for unhandled {{jsxref("Promise")}} rejection events.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunload")}}</dt>
+ <dd>Called when the user navigates away from the page.</dd>
+ <dt>{{domxref("Window.onuserproximity")}}</dt>
+ <dd>An event handler property for user proximity events.</dd>
+ <dt>{{domxref("Window.onvrdisplayconnected")}} {{experimental_inline}}</dt>
+ <dd>Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).</dd>
+ <dt>{{domxref("Window.onvrdisplaydisconnected")}} {{experimental_inline}}</dt>
+ <dd>Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).</dd>
+ <dt>{{domxref("Window.onvrdisplaypresentchange")}} {{experimental_inline}}</dt>
+ <dd>represents an event handler that will run when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("onvrdisplaypresentchange")}} event fires).</dd>
+</dl>
+
+<h2 id="Constructors">Constructors</h2>
+
+<p>See also the <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Interfaces</a>.</p>
+
+<dl>
+ <dt>{{domxref("Window.ConstantSourceNode")}}</dt>
+ <dd>Creates an instance of {{domxref("ConstantSourceNode")}}</dd>
+ <dt>{{domxref("Window.DOMParser")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.GeckoActiveXObject")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Image")}}</dt>
+ <dd>Used for creating an {{domxref("HTMLImageElement")}}.</dd>
+ <dt>{{domxref("Option")}}</dt>
+ <dd>Used for creating an {{domxref("HTMLOptionElement")}}</dd>
+ <dt>{{domxref("Window.QueryInterface")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.XMLSerializer")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Worker")}}</dt>
+ <dd>Used for creating a <a href="/en-US/docs/DOM/Using_web_workers">Web worker</a></dd>
+ <dt>{{domxref("Window.XPCNativeWrapper")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.XPCSafeJSObjectWrapper")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+</dl>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>See <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a></p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Working_with_windows_in_chrome_code">Working with windows in chrome code</a></li>
+</ul>
diff --git a/files/uk/web/api/window/localstorage/index.html b/files/uk/web/api/window/localstorage/index.html
new file mode 100644
index 0000000000..84401af92f
--- /dev/null
+++ b/files/uk/web/api/window/localstorage/index.html
@@ -0,0 +1,147 @@
+---
+title: Window.localStorage
+slug: Web/API/Window/localStorage
+tags:
+  - API
+  - Property
+  - Web Storage
+  - Window
+  - Довідка
+translation_of: Web/API/Window/localStorage
+---
+<p>{{APIRef()}}</p>
+
+<p>Властивість <code>localStorage</code> надає доступ до об’єкта {{domxref("Storage")}}, пов'язаного з джерелом поточного {{domxref("Document", "документа")}}. Сховище <code>localStorage</code> є схожим на <code><a href="/uk/docs/Web/API/Window.sessionStorage">sessionStorage</a></code>, але не має обмежень тривалості зберігання даних, тоді як дані <code>sessionStorage</code> видаляються по закритті сторінки (насправді, лише після закриття всіх сторінок з цього джерела, якщо їх кілька відкрито в переглядачі).</p>
+
+<p>Варто також зазначити, що сторінки, завантажені з різних джерел (важить все: <strong>ім'я хоста, порт, та навіть протокол — http/https</strong>), з міркувань безпеки мають незалежні окремі сховища, тож до даних одне одного доступу не мають.</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre><em>myStorage</em> = window.localStorage;</pre>
+
+<h3 id="Значення">Значення</h3>
+
+<p>Об’єкт типу {{domxref("Storage")}}, який можна використовувати для доступу до чинного для поточної сторінки сховища.</p>
+
+<h3 id="Винятки">Винятки</h3>
+
+<dl>
+ <dt><code><strong>SecurityError</strong></code></dt>
+ <dd>Виникає в разі порушення встановлених правил або коли джерелом сторінки є неприйнятний протокол/хост/порт (наприклад, коли протоколом джерела є <code>file:</code> чи <code>data:</code>). Зокрема, користувач може заборонити збереження даних з окремих джерел в налаштуваннях переглядача.</dd>
+</dl>
+
+<h2 id="Приклад">Приклад</h2>
+
+<p>Розгляньмо основні дії зі сховищем: запис, читання, видалення окремого ключа та повне очищення всього сховища.</p>
+
+<p>Цей приклад створює (чи змінює, якщо такий ключ вже існує) запис в чинному для поточної сторінки сховищі (через об'єкт типу {{domxref("Storage")}}) за допомогою метода {{domxref("Storage.setItem()", "setItem()")}}:</p>
+
+<pre class="brush: js">localStorage.setItem('Кіт', 'Барсик');</pre>
+
+<p>Дістати значення за ключем дозволяє метод {{domxref("Storage.getItem()", "getItem()")}}:</p>
+
+<pre class="brush: js">var cat = localStorage.getItem('Кіт');</pre>
+
+<p>Для видалення раніше створеного запису за його ключем існує метод {{domxref("Storage.removeItem()", "removeItem()")}}:</p>
+
+<pre class="brush: js">localStorage.removeItem('Кіт');</pre>
+
+<p>А для очищення сховища (видалення всіх створених записів) призначено метод {{domxref("Storage.clear()", "clear()")}}:</p>
+
+<pre class="brush: js">localStorage.clear();</pre>
+
+<div class="note">
+<p><strong>Заувага</strong>: повний приклад див. у статті <a href="/uk/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Використання Web Storage API</a>.</p>
+</div>
+
+<p>А тепер розгляньмо дещо змістовніший приклад:</p>
+
+<pre class="brush: js">function clearCart() {
+  var count = parseInt(localStorage.getItem('cart-size')) || 0;
+  for (var i = 1; i &lt;= count; i++) {
+    localStorage.removeItem('cart-item-' + i)
+  }
+  localStorage.removeItem('cart-size');
+}
+
+
+function addCartItem(itemId) {
+  var count = parseInt(localStorage.getItem('cart-size')) || 0;
+  localStorage.setItem('cart-item-' + (count + 1), itemId);
+  localStorage.setItem('cart-size', count + 1);
+}
+
+function getCartItems() {
+  var items = [];
+  var count = parseInt(localStorage.getItem('cart-size')) || 0;
+
+  for (var i = 1; i &lt;= count; i++) {
+    var itemId = localStorage.getItem('cart-item-' + i);
+    items.push(parseInt(itemId));
+  }
+
+  return items;
+}
+
+
+addCartItem(111);
+addCartItem(222);
+
+console.log(getCartItems());  // виводить [111, 222]
+clearCart();
+console.log(getCartItems());  // виводить []
+</pre>
+
+<p>Варто зауважити, що сховище працює лише з рядками (як ключ, так і значення мусить бути рядком, або його буде перетворено на рядок неявним викликом {{jsxref("Object.prototype.toString()", "toString()")}}). Тому для зберігання структурованих даних доведеться спершу подбати про їх перетворення в текстовий рядок — наприклад, JSON:</p>
+
+<pre class="brush: js">function setLocalStorageObjectItem(key, value) {
+  if (value === undefined) {
+    localStorage.removeItem(key);
+  } else {
+    localStorage.setItem(key, JSON.stringify(value));
+  }
+}
+
+function getLocalStorageObjectItem(key) {
+  var json = localStorage.getItem(key);
+  if (json === undefined) {
+    return undefined;
+  }
+  return JSON.parse(json);
+}
+
+setLocalStorageObjectItem('foo', {a: {x: 123}});
+console.log(getLocalStorageObjectItem('foo'));  // виводить {a: {x: 123}}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-localstorage', 'localStorage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("api.Window.localStorage")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Використання Web Storage API</a></li>
+ <li>{{domxref("LocalStorage")}}</li>
+ <li>{{domxref("SessionStorage")}}</li>
+ <li>{{domxref("Window.sessionStorage")}}</li>
+</ul>
diff --git a/files/uk/web/api/window/rejectionhandled_event/index.html b/files/uk/web/api/window/rejectionhandled_event/index.html
new file mode 100644
index 0000000000..f725917a75
--- /dev/null
+++ b/files/uk/web/api/window/rejectionhandled_event/index.html
@@ -0,0 +1,85 @@
+---
+title: 'Window: подія rejectionhandled'
+slug: Web/API/Window/rejectionhandled_event
+tags:
+  - API
+  - Event
+  - HTML DOM
+  - JavaScript
+  - Promise
+  - Window
+  - Worker
+  - global
+  - onrejectionhandled
+  - rejectionhandled
+  - Проміс
+  - подія
+translation_of: Web/API/Window/rejectionhandled_event
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">Подія <strong><code>rejectionhandled</code></strong> посилається у глобальну область видимості скрипта (зазвичай, {{domxref("window")}}, але також {{domxref("Worker")}}), коли відхиляється об'єкт JavaScript {{jsxref("Promise")}}, але після того, як відбулась обробка відхилення.</span> Це можна використовувати для відлагодження та для загальної стійкості застосунка, в тандемі з подією {{domxref("Window.unhandledrejection_event", "unhandledrejection")}}, яка посилається, коли проміс був відхилений, але не існує обробника відхилення.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Спливає</th>
+   <td>Ні</td>
+  </tr>
+  <tr>
+   <th scope="row">Скасовується</th>
+   <td>Ні</td>
+  </tr>
+  <tr>
+   <th scope="row">Інтерфейс</th>
+   <td>{{domxref("PromiseRejectionEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Обробник події</th>
+   <td>{{domxref("WindowEventHandlers.onrejectionhandled", "onrejectionhandled")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Приклад">Приклад</h2>
+
+<p>Ви можете використовувати подію <code>rejectionhandled</code>, щоб залогувати проміси, які було відхилено, у консоль, разом з причинами відхилення:</p>
+
+<pre class="brush: js">window.addEventListener("rejectionhandled", event =&gt; {
+  console.log("Проміс відхилено; причина: " + event.reason);
+}, false);
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#unhandled-promise-rejections', 'rejectionhandled')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("api.Window.rejectionhandled_event")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{SectionOnPage("/uk/docs/Web/JavaScript/Guide/Using_promises", "Події відхилення промісів")}}</li>
+ <li>{{domxref("PromiseRejectionEvent")}}</li>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{domxref("Window.unhandledrejection_event", "unhandledrejection")}}</li>
+</ul>
diff --git a/files/uk/web/api/window/self/index.html b/files/uk/web/api/window/self/index.html
new file mode 100644
index 0000000000..70c58d6faf
--- /dev/null
+++ b/files/uk/web/api/window/self/index.html
@@ -0,0 +1,70 @@
+---
+title: Window.self
+slug: Web/API/Window/self
+tags:
+  - API
+  - HTML DOM
+  - Window
+  - Властивість
+translation_of: Web/API/Window/self
+---
+<div>{{APIRef}}</div>
+
+<p>Властивість <code><strong>Window.self</strong></code>, доступна лише для читання, повертає window як {{domxref("WindowProxy")}}. Її можна використовувати через крапку на об'єкті <code>window</code> (а саме, <code>window.self</code>) або автономно (<code>self</code>). Перевага автономного запису в тому, що схожий запис існує для не window контексту, наприклад у {{domxref("Worker", "Web Workers", "", 1)}}. Використовуючи <code>self</code>, ви можете звертатись до глобальної області видимості таким чином, що звернення працюватиме не лише в контексті window (<code>self</code> дорівнюватиме <code>window.self</code>), але також у контексті worker (тоді <code>self</code> дорівнюватиме {{domxref("WorkerGlobalScope.self")}}).</p>
+
+<h2 id="Notes" name="Notes">Приклад</h2>
+
+<p>Наступне використання <code>window.self</code> можна також замінити на <code>window</code>.</p>
+
+<pre class="brush:js">if (window.parent.frames[0] != window.self) {
+    // це вікно не є першим фреймом у списку
+}
+</pre>
+
+<p>Більше того, при використанні у активному документі контексту перегляду <code>window</code> - це посилання на поточний глобальний об'єкт, і таким чином, усе перечислене є еквівалентним:</p>
+
+<pre class="brush:js">var w1 = window;
+var w2 = self;
+var w3 = window.window;
+var w4 = window.self;
+// w1, w2, w3, w4 є строго рівними, та лише w2 функціонуватиме у workers
+</pre>
+
+<h2 id="Specification" name="Specification">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-self', 'Window.self')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Немає змін від останнього знімку {{SpecName("HTML5.1")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'browsers.html#dom-self', 'Window.self')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Немає змін від {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-self', 'Window.self')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Перший знімок, що містить визначення <code>Window.self</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("api.Window.self")}}</p>
+
+<h2 class="noinclude" id="Див._також">Див. також</h2>
+
+<ul>
+ <li>Еквівалент властивості <code>Worker</code>, {{domxref("WorkerGlobalScope.self")}}.</li>
+</ul>
diff --git a/files/uk/web/api/window/unhandledrejection_event/index.html b/files/uk/web/api/window/unhandledrejection_event/index.html
new file mode 100644
index 0000000000..8f621c5ea9
--- /dev/null
+++ b/files/uk/web/api/window/unhandledrejection_event/index.html
@@ -0,0 +1,120 @@
+---
+title: 'Window: подія unhandledrejection'
+slug: Web/API/Window/unhandledrejection_event
+tags:
+  - API
+  - Event
+  - HTML DOM
+  - JavaScript
+  - Promise
+  - Window
+  - Worker
+  - unhandledrejection
+  - Проміс
+  - відхилення
+  - подія
+translation_of: Web/API/Window/unhandledrejection_event
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">Подія <strong><code>unhandledrejection</code></strong> посилається у глобальну область видимості скрипта, коли об'єкт JavaScript {{jsxref("Promise")}}, що не має обробника відхилення, відхиляється; зазвичай, це {{domxref("window")}}, але також може бути {{domxref("Worker")}}.</span> Це корисно для відлагодження та для надання резервної обробки помилок у неочікуваних ситуаціях.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Спливає</th>
+   <td>Ні</td>
+  </tr>
+  <tr>
+   <th scope="row">Скасовується</th>
+   <td>Так</td>
+  </tr>
+  <tr>
+   <th scope="row">Інтерфейс</th>
+   <td>{{domxref("PromiseRejectionEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Обробник подій</th>
+   <td>{{domxref("WindowEventHandlers.onunhandledrejection", "onunhandledrejection")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примітки_щодо_використання">Примітки щодо використання</h2>
+
+<p>Дозвіл події <code>unhandledrejection</code> спливати зрештою призведе до виводу повідомлення помилки у консолі. Ви можете запобігти цьому, викликавши {{domxref("Event.preventDefault", "preventDefault()")}} на інтерфейсі {{domxref("PromiseRejectionEvent")}}; дивіться приклад {{anch("Запобігання обробці за замовчуванням")}} нижче.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Тут ми маємо кілька прикладів, які демонструють, як ви можете скористатись подією <code>unhandledrejection</code>. Подія містить деяку корисну інформацію:</p>
+
+<dl>
+ <dt><code>promise</code></dt>
+ <dd>Власне, {{jsxref("Promise","проміс")}}, який був відхилений, не маючи обробника, який зреагував би на відхилення.</dd>
+ <dt><code>reason</code></dt>
+ <dd>Причина, яка була б передана у обробник відхилення, якби він існував. Дивіться більше інформації у {{jsxref("Promise.catch", "catch()")}}.</dd>
+</dl>
+
+<h3 id="Базове_логування_помилки">Базове логування помилки</h3>
+
+<p>Цей приклад просто логує інформацію щодо необробленого відхилення проміса у консоль.</p>
+
+<pre class="brush:js;">window.addEventListener("unhandledrejection", event =&gt; {
+  console.warn(`НЕОБРОБЛЕНЕ ВІДХИЛЕННЯ ПРОМІСА: ${event.reason}`);
+});
+</pre>
+
+<p>Ви також можете скористатись обробником подій {{domxref("WindowEventHandlers.onunhandledrejection", "onunhandledrejection")}}, щоб налаштувати прослуховувач подій:</p>
+
+<pre class="brush: js">window.onunhandledrejection = event =&gt; {
+  console.warn(`НЕОБРОБЛЕНЕ ВІДХИЛЕННЯ ПРОМІСА: ${event.reason}`);
+};
+</pre>
+
+<h3 id="Запобігання_обробці_за_замовчуванням">Запобігання обробці за замовчуванням</h3>
+
+<p>Багато середовищ (таких як {{Glossary("Node.js")}}) за замовчуванням виводять необроблені відхилення промісів у консоль. Ви можете запобігти цьому, додавши обробник для подій <code>unhandledrejection</code>, що — на додачу до будь-яких інших задач, які ви бажаєте виконати — викликає {{domxref("Event.preventDefault()", "preventDefault()")}}, щоб скасувати подію, запобігаючи її спливанню та обробці кодом логування під час виконання. Це працює, тому що <code>unhandledrejection</code> скасовується.</p>
+
+<pre class="brush:js;">window.addEventListener('unhandledrejection', function (event) {
+  // ...тут ваш код, який обробляє необроблені відхилення...
+
+  // Запобігти обробці за замовчуванням (наприклад, виводу
+  // помилки у консоль)
+
+  event.preventDefault();
+});
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#unhandled-promise-rejections', 'unhandledrejection')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("api.Window.unhandledrejection_event")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{SectionOnPage("/uk/docs/Web/JavaScript/Guide/Using_promises", "Події відхилення промісів")}}</li>
+ <li>Обробник подій {{domxref("WindowEventHandlers.onunhandledrejection", "onunhandledrejection")}}<sup><a href="#seealso-footnote-1">1</a></sup></li>
+ <li>Подія <a href="/uk/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a></li>
+ <li>{{jsxref("Promise")}}</li>
+</ul>
+
+<p><a id="seealso-footnote-1" name="seealso-footnote-1">[1]</a> Відповідний обробник подій визначений як властивість у домішці {{domxref("WindowEventHandlers")}}, яка доступна як у інтерфейсі {{domxref("Window")}}, так і в усіх типах інтерфейсів {{domxref("Worker")}}.</p>
diff --git a/files/uk/web/api/windoweventhandlers/index.html b/files/uk/web/api/windoweventhandlers/index.html
new file mode 100644
index 0000000000..cb37cc2a2c
--- /dev/null
+++ b/files/uk/web/api/windoweventhandlers/index.html
@@ -0,0 +1,105 @@
+---
+title: WindowEventHandlers
+slug: Web/API/WindowEventHandlers
+tags:
+  - API
+  - HTML-DOM
+  - Interface
+  - Mixin
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - WindowEventHandlers
+translation_of: Web/API/WindowEventHandlers
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>The <strong><code>WindowEventHandlers</code></strong> mixin describes the event handlers common to several interfaces like {{domxref("Window")}}, or {{domxref("HTMLBodyElement")}} and {{domxref("HTMLFrameSetElement")}}. Each of these interfaces can implement additional specific event handlers.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: <code>WindowEventHandlers</code> is a mixin and not an interface; you can't actually create an object of type <code>WindowEventHandlers</code>.</p>
+</div>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>The events properties, of the form <code>onXYZ</code>, are defined on the {{domxref("WindowEventHandlers")}}, and implemented by {{domxref("Window")}}, and {{domxref("WorkerGlobalScope")}} for Web Workers.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("afterprint")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeprint")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeunload")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("hashchange")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("languagechange")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onmessageerror")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("MessageError")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("offline")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("online")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pagehide")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pageshow")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("popstate")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onrejectionhandled")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("rejectionhandled")}} event is raised, indicating that a {{jsxref("Promise")}} was rejected and the rejection has been handled.</dd>
+ <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("storage")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("unhandledrejection")}} event is raised, indicating that a {{jsxref("Promise")}} was rejected but the rejection was not handled.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunload")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("unload")}} event is raised.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface defines no method.</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#windoweventhandlers', 'WindowEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'WindowEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Added <code>onlanguage</code> since the {{SpecName("HTML5 W3C")}} snapshot.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "WindowEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowEventHandlers</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.WindowEventHandlers")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/uk/web/api/windoweventhandlers/onrejectionhandled/index.html b/files/uk/web/api/windoweventhandlers/onrejectionhandled/index.html
new file mode 100644
index 0000000000..81cabc79bd
--- /dev/null
+++ b/files/uk/web/api/windoweventhandlers/onrejectionhandled/index.html
@@ -0,0 +1,52 @@
+---
+title: WindowEventHandlers.onrejectionhandled
+slug: Web/API/WindowEventHandlers/onrejectionhandled
+tags:
+  - API
+  - HTML DOM
+  - JavaScript
+  - Promise
+  - WindowEventHandlers
+  - onrejectionhandled
+  - Обробник подій
+  - Проміс
+  - події
+translation_of: Web/API/WindowEventHandlers/onrejectionhandled
+---
+<div>{{APIRef}}</div>
+
+<p>Властивість <strong><code>onrejectionhandled</code></strong> домішки {{domxref("WindowEventHandlers")}} - це {{domxref("EventHandler")}} для обробки подій <a href="/uk/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a>. Ці події виникають, коли відхиляються об'єкти {{jsxref("Promise")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">window.addEventListener("rejectionhandled", function(event) { ... });
+window.onrejectionhandled = function(event) { ...};</pre>
+
+<h2 id="Приклад">Приклад</h2>
+
+<pre class="brush: js">window.onrejectionhandled = function(e) {
+  console.log(e.reason);
+}</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#handler-window-onrejectionhandled', 'onrejectionhandled')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("api.WindowEventHandlers.onrejectionhandled")}}</p>
diff --git a/files/uk/web/api/windoweventhandlers/onunhandledrejection/index.html b/files/uk/web/api/windoweventhandlers/onunhandledrejection/index.html
new file mode 100644
index 0000000000..888297c406
--- /dev/null
+++ b/files/uk/web/api/windoweventhandlers/onunhandledrejection/index.html
@@ -0,0 +1,56 @@
+---
+title: WindowEventHandlers.onunhandledrejection
+slug: Web/API/WindowEventHandlers/onunhandledrejection
+tags:
+  - API
+  - HTML DOM
+  - Promise
+  - WindowEventHandlers
+  - onunhandledrejection
+  - Властивість
+  - події
+  - проміси
+translation_of: Web/API/WindowEventHandlers/onunhandledrejection
+---
+<div>{{APIRef}}</div>
+
+<p>Властивість <strong><code>onunhandledrejection</code></strong> домішки {{domxref("WindowEventHandlers")}} - це {{domxref("EventHandler")}} для обробки подій <a href="/uk/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a>. Ці події виникають для необроблених відхилень об'єктів {{jsxref("Promise")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">window.onunhandledrejection = <em>function</em>;</pre>
+
+<h3 id="Значення">Значення</h3>
+
+<p><code>function</code> - це {{domxref("EventHandler")}} або функція, яку треба викликати, коли вікно отримує події <code>unhandledrejection</code>. Обробник подій отримує вхідний параметр як {{domxref("PromiseRejectionEvent")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Цей приклад просто виводить у консоль значення <code>reason</code> (причина) необроблених відхилень.</p>
+
+<pre class="brush: js">window.onunhandledrejection = function(e) {
+  console.log(e.reason);
+}</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#handler-window-onunhandledrejection', 'onunhandledrejection')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("api.WindowEventHandlers.onunhandledrejection")}}</p>
diff --git a/files/uk/web/api/windoworworkerglobalscope/index.html b/files/uk/web/api/windoworworkerglobalscope/index.html
new file mode 100644
index 0000000000..0c8177dbaa
--- /dev/null
+++ b/files/uk/web/api/windoworworkerglobalscope/index.html
@@ -0,0 +1,189 @@
+---
+title: WindowOrWorkerGlobalScope
+slug: Web/API/WindowOrWorkerGlobalScope
+tags:
+  - API
+  - DOM
+  - DOM API
+  - NeedsTranslation
+  - Service Worker
+  - TopicStub
+  - Window
+  - WindowOrWorkerGlobalScope
+  - Worker
+  - WorkerGlobalScope
+translation_of: Web/API/WindowOrWorkerGlobalScope
+---
+<div>{{ApiRef()}}</div>
+
+<p>The <strong><code>WindowOrWorkerGlobalScope</code></strong> mixin describes several features common to the {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}} interfaces. Each of these interfaces can, of course, add more features in addition to the ones listed below.</p>
+
+<div class="note">
+<p><strong>Note</strong>: <code>WindowOrWorkerGlobalScope</code> is a mixin and not an interface; you can't actually create an object of type <code>WindowOrWorkerGlobalScope</code>.</p>
+</div>
+
+<h2 id="Properties_2">Properties</h2>
+
+<p>These properties are defined on the {{domxref("WindowOrWorkerGlobalScope")}} mixin, and implemented by {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}.</p>
+
+<div id="Properties">
+<dl>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt>
+ <dd>Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt>
+ <dd>Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt>
+ <dd>Returns a boolean indicating whether the current context is secure (<code>true</code>) or not (<code>false</code>).</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt>
+ <dd>Returns the origin of the global scope, serialized as a string.</dd>
+</dl>
+</div>
+
+<h2 id="Methods">Methods</h2>
+
+<p>These properties are defined on the {{domxref("WindowOrWorkerGlobalScope")}} mixin, and implemented by {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}.</p>
+
+<dl>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt>
+ <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt>
+ <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt>
+ <dd>Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt>
+ <dd>Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at <em>(sx, sy)</em> with width sw, and height sh.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt>
+ <dd>Starts the process of fetching a resource from the network.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt>
+ <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt>
+ <dd>Schedules a function to execute in a given amount of time.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG",'webappapis.html#windoworworkerglobalscope-mixin', '<code>WindowOrWorkerGlobalScope</code> mixin')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>This is where the main mixin is defined.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Definition of the <code>fetch()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#self-caches', 'caches')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Definition of the <code>caches</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}</td>
+   <td>{{Spec2('IndexedDB 2')}}</td>
+   <td>Definition of the <code>indexedDB</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Secure Contexts', 'webappapis.html#dom-origin', 'isSecureContext')}}</td>
+   <td>{{Spec2('Secure Contexts')}}</td>
+   <td>Definition of the <code>isSecureContext</code> property.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop(52)}}</td>
+   <td>54</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin</code></td>
+   <td>{{CompatGeckoDesktop(54)}}</td>
+   <td>59</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(52)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>54</td>
+  </tr>
+  <tr>
+   <td><code>origin</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(54)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>59</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Window")}}</li>
+ <li>{{domxref("WorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/uk/web/api/windowtimers/index.html b/files/uk/web/api/windowtimers/index.html
new file mode 100644
index 0000000000..8e3b6dfd47
--- /dev/null
+++ b/files/uk/web/api/windowtimers/index.html
@@ -0,0 +1,125 @@
+---
+title: WindowTimers
+slug: Web/API/WindowTimers
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - Intervals
+  - Mixin
+  - NeedsTranslation
+  - Reference
+  - Timers
+  - TopicStub
+  - Workers
+translation_of: Web/API/WindowOrWorkerGlobalScope
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><code><strong>WindowTimers</strong></code> is a mixin used to provide utility methods which set and clear timers. No objects of this type exist; instead, its methods are available on {{domxref("Window")}} for the standard browsing scope, or on {{domxref("WorkerGlobalScope")}} for workers.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface neither inherits nor provides any properties.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface does not inherit any methods. It offers the following methods.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowTimers.clearInterval()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt>
+ <dd>Cancels the delayed execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd>
+ <dt>{{domxref("WindowTimers.setInterval()")}}</dt>
+ <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd>
+ <dt>{{domxref("WindowTimers.setTimeout()")}}</dt>
+ <dd>Schedules a function to execute in a given amount of time.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop(1)}}</td>
+   <td>1.0</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoMobile(1)}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/uk/web/api/windowtimers/settimeout/index.html b/files/uk/web/api/windowtimers/settimeout/index.html
new file mode 100644
index 0000000000..19c90148ce
--- /dev/null
+++ b/files/uk/web/api/windowtimers/settimeout/index.html
@@ -0,0 +1,428 @@
+---
+title: WindowTimers.setTimeout()
+slug: Web/API/WindowTimers/setTimeout
+translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<div> </div>
+
+<div>Метод <code>setTimeout()</code>, що належить об'єкту {{domxref("WindowOrWorkerGlobalScope")}}, та наслідується від window.setTimeout,  встановлює таймер, що виконує функцію або вказаний фрагмент коду один раз, щойно спливе заданий час.</div>
+
+<div> </div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>var timeoutID</em> = window.setTimeout(<em>func</em>[, <em>delay</em>, <em>param1</em>, <em>param2</em>, ...]);
+<em>var timeoutID</em> = window.setTimeout(<em>code</em>[, <em>delay</em>]);
+</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>func</code></dt>
+ <dd>{{jsxref("function")}} котру необхідно виконати після того, як вийде заданий час.</dd>
+ <dt><code>code</code></dt>
+ <dd>Опційний синтаксис, котрий дозволяє задавати рядок замість функції, котра компілюється і виконується при спрацюванні таймера. Використання цього синтаксису <strong>не рекомендовано</strong> з тих же ж причин, котрі роблять застосування {{jsxref("eval()")}} загрозою безпеці.</dd>
+ <dt><code>delay</code> {{optional_inline}}</dt>
+ <dt> </dt>
+ <dd>Час у мілісекундах (тисячних секунди), котрий таймер має зачекати перед тим, як виконати вказану функцію або код. Якщо цей параметр пропустити, буде використано значення 0. Варто зазначити, що справжній час затримки, може бути довшим. Дивіться розділ {{anch("Reasons for delays longer than specified","Причини, з яких затримка є фактично довшою ніж задано")}}</dd>
+ <dt><code>param1, ..., paramN</code> {{optional_inline}}</dt>
+ <dd>Додаткові параметри, що передаються до <em>func </em>або <em>code</em>, щойно час таймера спливе.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Зверніть увагу: </strong> Internet Explorer 9 та більш ранні версії не підтримують додаткові параметри. Застосовуйте поліфіл, щобл уможливити цей функціонал (див. розділ <a href="#Callback_arguments">Callback arguments</a>).  </p>
+</div>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p><br>
+ Після виклику <code>setTimeout()</code>, повертається <code>timeoutID</code>  - це не нульове цифрове значення, що використовується для ідентифікації створеного таймера. Цей ідентифікатор можна передати як параметр до {{domxref("Window.clearTimeout()")}} щоб відмінити таймер.</p>
+
+<p>Корисно знати, що <code>setTimeout()</code> та {{domxref("WindowTimers.setInterval", "setInterval()")}} використовують спільну колекцію ID ідентифікаторів, а також що  <code>clearTimeout()</code> та {{domxref("WindowTimers.clearInterval", "clearInterval()")}} технічно можуть бути взаємозамінними. Тим не менше, задля ясності, варто завжди зіставляти їх, аби не допускати помилок під час розробки коду. </p>
+
+<h2 id="Приклад">Приклад</h2>
+
+<p>У наступному прикладі створено дві кнопки на веб сторінці, що прив'язані до <code>setTimeout()</code> та <code>clearTimeout()</code> процесів. Після натискання на першу кнопку встановлюється таймер, що викликає діалогове вікно alert через дві секунди та зберігає ID таймера для подальшого використання у <code>clearTimeout()</code>. За бажанням ви можете відмінити цей таймер, якщо натисните другу кнопку.</p>
+
+<h3 id="HTML_код">HTML код</h3>
+
+<pre class="brush: html">&lt;p&gt;Live Example&lt;/p&gt;
+&lt;button onclick="delayedAlert();"&gt;Відобразити діалогове вікно alert через дві секунди.&lt;/button&gt;
+&lt;p&gt;&lt;/p&gt;
+&lt;button onclick="clearAlert();"&gt;Відмінити відображення діалогового вікна.&lt;/button&gt;
+</pre>
+
+<h3 id="JavaScript_код">JavaScript код</h3>
+
+<pre class="brush: js">var timeoutID;
+
+function delayedAlert() {
+  timeoutID = window.setTimeout(slowAlert, 2000);
+}
+
+function slowAlert() {
+  alert("Це було дійсно повільно!");
+}
+
+function clearAlert() {
+  window.clearTimeout(timeoutID);
+}
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Example', 'Приклад')}}</p>
+
+<p>Дивіться також <a href="/en-US/docs/Web/API/WindowTimers/clearTimeout#Example"><code>clearTimeout()</code> example</a>.</p>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Якщо вам необхідно передати один чи декілька аргументів до колбек функції, а також потрібно, щоб цей функціонал працював у браузерах, що не підтримують передачу додаткових аргументів для <code>setTimeout()</code> чи <code>setInterval()</code> (наприклад, версії Internet Explorer 9 чи нижче), ви можете застосувати цей поліфіл, який активує стандартну HTML5 функціональність. Просто додайте цей код на початку вашого скрипта: </p>
+
+<pre class="brush: js">/*\
+|*|
+|*|  Polyfill which enables the passage of arbitrary arguments to the
+|*|  callback functions of JavaScript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+(function() {
+  setTimeout(function(arg1) {
+    if (arg1 === 'test') {
+      // feature test is passed, no need for polyfill
+      return;
+    }
+    var __nativeST__ = window.setTimeout;
+    window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeST__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+
+  var interval = setInterval(function(arg1) {
+    clearInterval(interval);
+    if (arg1 === 'test') {
+      // feature test is passed, no need for polyfill
+      return;
+    }
+    var __nativeSI__ = window.setInterval;
+    window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeSI__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+}())
+</pre>
+
+<h2 id="Фікс_для_IE">Фікс для IE</h2>
+
+<p>Якщо вам потрібен фікс, який не впливатиме на роботу жодного іншого мобільного чи десктопного браузера, окрім IE9 та нижче, ви можете скористатись умовними коментарями JavaScript:</p>
+
+<pre class="brush: js">/*@cc_on
+  // conditional IE &lt; 9 only fix
+  @if (@_jscript_version &lt;= 9)
+  (function(f){
+     window.setTimeout=f(window.setTimeout);
+     window.setInterval=f(window.setInterval);
+  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}});
+  @end
+@*/
+</pre>
+
+<p>Або використати умовні коментарі HTML для IE9 та нижче:</p>
+
+<pre class="brush: html">&lt;!--[if lte IE 9]&gt;&lt;script&gt;
+(function(f){
+window.setTimeout=f(window.setTimeout);
+window.setInterval=f(window.setInterval);
+})(function(f){return function(c,t){
+var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}
+});
+&lt;/script&gt;&lt;![endif]--&gt;
+</pre>
+
+<h2 id="Тимчасові_рішення">Тимчасові рішення</h2>
+
+<p>Ще одне можливе рішення - використання анонімної функції для виклику колбека, але це вартісне рішення. Приклад:</p>
+
+<pre class="brush: js">var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000);
+</pre>
+
+<p>Приклад, наведений вище, може бути також написаний за допомогою   <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function</a>:</p>
+
+<pre class="brush: js">var intervalID = setTimeout(() =&gt; { myFunc("one", "two", "three"); }, 1000);
+</pre>
+
+<p>Ще одне рішення - використання   <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">function's <code>bind</code></a>. Приклад:</p>
+
+<pre class="brush: js">setTimeout(function(arg1){}.bind(undefined, 10), 1000);
+</pre>
+
+<h2 id="Проблема_this">Проблема "<code>this</code>"</h2>
+
+<p>Коли ви передаєте до <code>setTimeout()</code> метод або будь-яку іншу функцію, ймовірно вона буде викликана не з тим значенням <code>this</code>, на яке ви очікуєте. Ця проблема детально описана у <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method">JavaScript reference</a>.</p>
+
+<h3 id="Пояснення">Пояснення</h3>
+
+<p>Код, що виконується всередині <code>setTimeout()</code>, викликається із  іншого контекста виконання (<em>execution context</em>), ніж у функції, яка викликала <code>setTimeout</code>. До функції, яку викликають всередині <code>setTimeout</code> застосовуються звичайні правила призначення <code>this</code>. І, якщо ви не встановили <code>this</code> під час виклику або за допомогою <code>bind</code>, його значенням за замовчуванням буде об'єкт  <code>global</code> (або <code>window</code>) у нестрогому режимі, або <code>undefined</code> у строгому режимі. Значення <code>this</code> буде іншим, аніж у функції, яка викликала <code>setTimeout</code>. Розгляньте наступний приклад:</p>
+
+<pre class="brush: js">myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // prints "zero,one,two"
+myArray.myMethod(1); // prints "one"</pre>
+
+<p>Приклад вище працює тому, що <code>myMethod</code> викликано, як метод масиву <code>myArray</code>. Тому його <code>this</code> дорівнює <code>myArray</code>, а значення <code>this[sProperty]</code> всередині метода дорівнює <code>myArray[sProperty]</code>. Тим не менше, у наступному прикладі:</p>
+
+<pre class="brush: js">setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
+setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1.5 seconds</pre>
+
+<p>Метод <code>myArray.myMethod</code> передано до <code>setTimeout</code>, як звичайну функцію, якій не задано значення <code>this</code>. І коли вона викликається, її <code>this</code> за замовчуванням дорівнює об'єкту <code>window</code>. У  <code>setTimeout</code> неможливо передати <code>this</code> аргументом, як, наприклад, у методи Array (forEach, reduce, тощо), або через використання  <code>call</code>, як показано у прикладі нижче:</p>
+
+<pre class="brush: js">setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
+</pre>
+
+<h3 id="Можливі_рішення">Можливі рішення</h3>
+
+<p>Типовий спосіб вирішення цієї проблеми - використання функції обгортки, яка встановлює <code>this</code> із необхідним значенням: </p>
+
+<pre class="brush: js">setTimeout(function(){myArray.myMethod()}, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout(function(){myArray.myMethod('1')}, 2500); // prints "one" after 2.5 seconds</pre>
+
+<p>Стрілочна функція також є прийнятною альтернативою:</p>
+
+<pre class="brush: js">setTimeout(() =&gt; {myArray.myMethod()}, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout(() =&gt; {myArray.myMethod('1')}, 2500); // prints "one" after 2.5 seconds</pre>
+
+<p>Ще одне можливе рішення проблеми <code>this</code> - замінити нативні глобальні функції <code>setTimeout()</code> та <code>setInterval()</code> кастомними функціями, які можуть приймати об'єкт <code>this</code> і застосовувати його у колбек функції, використовуючи  <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a>. Наприклад: </p>
+
+<pre class="brush: js">// Enable setting 'this' in JavaScript timers
+
+var __nativeST__ = window.setTimeout,
+    __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this,
+      aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this,
+      aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};</pre>
+
+<div class="note"><strong>Зверніть увагу:  </strong>Подібний підхід дозволяє передавати будь-яку кількість аргументів у колбек функцію таймерів навіть для IE. Таким чином, цей спосіб може також бути використаний як поліфіл. Перегляньте параграф <a href="#Callback_arguments">Callback arguments</a> .</div>
+
+<p>Випробування нового підхода:</p>
+
+<pre class="brush: js">myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
+setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 seconds
+</pre>
+
+<div class="note"><strong>Зверніть увагу:  </strong>JavaScript 1.8.5 впровадив метод   <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code>, який встановлює значення <code>this</code> для кожного виклику вказаної функції. Це допомагає уникнути використання функції обгортки для призначення <code>this</code> колбека.</div>
+
+<p>Приклад використання <code>bind()</code>:</p>
+
+<pre class="brush: js">myArray = ["zero", "one", "two"];
+myBoundMethod = (function (sProperty) {
+    console.log(arguments.length &gt; 0 ? this[sProperty] : this);
+}).bind(myArray);
+
+myBoundMethod(); // prints "zero,one,two" because 'this' is bound to myArray in the function
+myBoundMethod(1); // prints "one"
+setTimeout(myBoundMethod, 1000); // still prints "zero,one,two" after 1 second because of the binding
+setTimeout(myBoundMethod, 1500, "1"); // prints "one" after 1.5 seconds
+</pre>
+
+<h2 id="Примітки">Примітки</h2>
+
+<p>Таймер можна скасувати за допомогою {{domxref("Window.clearTimeout()")}}. Щоб викликати функцію повторно (наприклад, через кожні N мілісекунди), використовуйте  {{domxref("Window.setInterval()")}}.</p>
+
+<p>Важливо пам'ятати, що функція або фрагмент коду не можуть бути виконані, допоки не буде завершено поток функції, яка викликала <code>setTimeout()</code>. Наприклад. </p>
+
+<pre class="brush: js">function foo(){
+  console.log('foo has been called');
+}
+setTimeout(foo, 0);
+console.log('After setTimeout');</pre>
+
+<p>Виведе в консоль:</p>
+
+<pre class="brush: js">After setTimeout
+foo has been called</pre>
+
+<p>Тому що, навіть не зважаючи на те, що <code>setTimeout</code> було викликано із нульовою затримкою, вона переміщується у чергу і її виконання відбудеться у найближчому наступному циклі, тобто не відразу. Код, що в данний момент виконується, повинен бути завершений. Тільки після цього функції, переміщені в чергу, будуть виконані. Тому порядок виконання може бути іншим, аніж очікувалось.</p>
+
+<h3 id="Passing_string_literals">Passing string literals</h3>
+
+<p>Passing a string instead of a function to <code>setTimeout()</code> suffers from the same hazards as using <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21">eval</a>. </code></p>
+
+<pre class="brush: js">// Recommended
+window.setTimeout(function() {
+    alert("Hello World!");
+}, 500);
+
+// Not recommended
+window.setTimeout("alert('Hello World!');", 500);
+</pre>
+
+<p>A string passed to <code>setTimeout</code> is evaluated in the global context, so local symbols in the context where <code>setTimeout()</code> was called will not be available when the string is evaluated as code.</p>
+
+<h3 id="Причини_чому_затримка_є_фактично_довшою_ніж_вказано">Причини чому затримка є фактично довшою ніж вказано</h3>
+
+<p>There are a number of reasons why a timeout may take longer to fire than anticipated. This section describes the most common reasons.</p>
+
+<h4 id="Nested_timeouts_forced_to_>4ms">Nested timeouts forced to &gt;=4ms</h4>
+
+<p><a class="external" href="http://code.google.com/p/chromium/issues/detail?id=792#c10">Historically</a> browsers implement <code>setTimeout()</code> "clamping": successive <code>setTimeout()</code> calls with <code>delay</code> smaller than the "minimum delay" limit are forced to use at least the minimum delay. The minimum delay, <code>DOM_MIN_TIMEOUT_VALUE</code>, is 4 ms (stored in a preference in Firefox: <code>dom.min_timeout_value</code>), with a <code>DOM_CLAMP_TIMEOUT_NESTING_LEVEL</code> of 5.</p>
+
+<p>In fact, 4 ms is <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">specified by the HTML5 spec</a> and is consistent across browsers released in 2010 and onward. Prior to {{geckoRelease("5.0")}}, the minimum timeout value for nested timeouts was 10 ms.</p>
+
+<p>To implement a 0 ms timeout in a modern browser, you can use {{domxref("window.postMessage()")}} as <a class="external" href="http://dbaron.org/log/20100309-faster-timeouts">described here</a>.</p>
+
+<h4 id="Timeouts_in_inactive_tabs_clamped_to_>1000ms">Timeouts in inactive tabs clamped to &gt;=1000ms</h4>
+
+<p>To reduce the load (and associated battery usage) from background tabs, timeouts are often clamped to firing no more often than once per second (1000 ms) in inactive tabs.</p>
+
+<p>Firefox implements this behavior since version 5 (see {{bug(633421)}}, the 1000ms constant can be tweaked through the <span class="comment-copy"><code>dom.min_background_timeout_value</code> preference).</span> Chrome implements this behavior since version 11 (<a class="external" href="http://crbug.com/66078">crbug.com/66078</a>).</p>
+
+<p>Firefox for Android uses a timeout value of 15 minutes for background tabs since {{bug(736602)}} in Firefox 14, and background tabs can also be unloaded entirely.</p>
+
+<div class="note">
+<p>Firefox 50 no longer throttles background tabs if a Web Audio API {{domxref("AudioContext")}} is actively playing sound. Firefox 51 further amends this such that background tabs are no longer throttled if an {{domxref("AudioContext")}} is present in the tab at all, even if no sound is being played. These resolve a number of issues with apps which play note-based music not being able to time or synchronize the music properly when the tab is in the background.</p>
+</div>
+
+<h4 id="Late_timeouts">Late timeouts</h4>
+
+<p>In addition to "clamping", the timeout can also fire later when the page (or the OS/browser itself) is busy with other tasks</p>
+
+<h3 id="Maximum_delay_value">Maximum delay value</h3>
+
+<p>Browsers including Internet Explorer, Chrome, Safari, and Firefox store the delay as a 32-bit signed integer internally. This causes an integer overflow when using delays larger than 2147483647, resulting in the timeout being executed immediately.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-settimeout", "WindowTimers.setTimeout()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition (DOM Level 0)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Supports parameters for callback<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Supports parameters for callback<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Whether it supports the optional parameters when in its first form or not.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/Add-ons/Code_snippets/Timers">JavaScript timers</a></li>
+ <li><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm">Timer.jsm</a></li>
+ <li>{{domxref("WindowTimers.setInterval")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+ <li><a href="/en-US/Add-ons/Code_snippets/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/uk/web/api/xmlhttprequest/index.html b/files/uk/web/api/xmlhttprequest/index.html
new file mode 100644
index 0000000000..11828836cf
--- /dev/null
+++ b/files/uk/web/api/xmlhttprequest/index.html
@@ -0,0 +1,178 @@
+---
+title: XMLHttpRequest
+slug: Web/API/XMLHttpRequest
+tags:
+  - AJAX
+  - API
+  - HTTP
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web
+  - XHR
+translation_of: Web/API/XMLHttpRequest
+---
+<div>{{APIRef("XMLHttpRequest")}}</div>
+
+<div></div>
+
+<p>Об'єкти <span class="seoSummary"><code>XMLHttpRequest</code> використовуються для взаємодії з серверами. Ти можеш отримати дані за URL без повної перезагрузки сторінки. Це дозволяє веб-сторінці оновити частину вмісту, не перешкоджаючи роботі користувача</span> <code>XMLHttpRequest</code> часто використовуюється в програмуванні з використанням технології <a href="/en-US/docs/AJAX">Ajax</a>.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h5 id="Історія">Історія</h5>
+
+<p><code>XMLHttpRequest</code> був спочатку розроблений компанією Microsoft десь у 1999 році і пізніше прийнятий компаніями Mozilla, Apple та Google. З жовтня 2014 року він був <a class="external" href="https://xhr.spec.whatwg.org/">стандартизований в <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr></a>, разом з новим методом {{domxref("WindowOrWorkerGlobalScope.fetch()", "fetch()")}} на основі промісів.</p>
+
+<p>Не зважаючи на своє ім'я, <code>XMLHttpRequest</code> може використовуватись для отримання будь-якого типу даних, не лише XML, і підтримує інші протоколи окрім <a href="/en-US/docs/Web/HTTP">HTTP</a> (включаючи <code>file</code> і <code>ftp</code>).</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}</dt>
+ <dd>Конструктор ініціалізує об'єкт XMLHttpRequest. Він має бути викликаний перед використанням будь-яких з його методів.</dd>
+</dl>
+
+<h2 id="Властивості">Властивості</h2>
+
+<p><em>Успадковує властивості {{domxref("XMLHttpRequestEventTarget")}} і {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt id="xmlhttprequest-onreadystatechange">{{domxref("XMLHttpRequest.onreadystatechange")}}</dt>
+ <dd>{{domxref("EventHandler")}} викликається щоразу, коли атрибут <code>readyState</code> змінюється.</dd>
+ <dt id="xmlhttprequest-readystate">{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}</dt>
+ <dd>Повертає <code>unsigned short</code>, the state запиту.</dd>
+ <dt>{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}</dt>
+ <dd>Повертає {{domxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}}, об'єкт JavaScript, або ж {{domxref("DOMString")}}, залежить від значення {{domxref("XMLHttpRequest.responseType")}}, що містить тіло відповіді.</dd>
+ <dt id="xmlhttprequest-responsetext">{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}</dt>
+ <dd>Повертає {{domxref("DOMString")}}, що містить відповідь на запит в якості тексту, або <code>null</code>, якщо запит завершився помилкою або не був надісланим досі.</dd>
+ <dt id="xmlhttprequest-responsetype">{{domxref("XMLHttpRequest.responseType")}}</dt>
+ <dd>Вказує на тип відповіді.</dd>
+ <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}</dt>
+ <dd>Повертає the serialized URL відповіді або ж пустий рядок, якщо URL — <code>null</code>.</dd>
+ <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}</dt>
+ <dd>Повертає {{domxref("Document")}}, що містить відповідь на запит або <code>null</code>, якщо запит завершився помилкою, досі не був надісланий, або не може бути розпізнаний, як XML чи HTML. Not available in workers.</dd>
+ <dt id="xmlhttprequest-status">{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}</dt>
+ <dd>Повертає <code>unsigned short</code> з статусом відповіді на запит.</dd>
+ <dt id="xmlhttprequest-statustext">{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}</dt>
+ <dd>Повертає {{domxref("DOMString")}}, що містить стрічку відповіді, повернену HTTP-сервером. Навідміну від {{domxref("XMLHTTPRequest.status")}}, що включає цілісний текст відповіді (наприклад, "<code>200 OK</code>").</dd>
+</dl>
+
+<div class="note">
+<p><strong>Увага:</strong> починаючи від специфікації HTTP/2 (<a href="https://http2.github.io/http2-spec/#rfc.section.8.1.2.4">8.1.2.4 Поля пседо-заголовку відповіді</a>), HTTP/2 не визначає шляху передачі версії чи reason phrase, що включається в стрічку статусу HTTP/1.1.</p>
+</div>
+
+<dl>
+ <dt id="xmlhttprequest-timeout">{{domxref("XMLHttpRequest.timeout")}}</dt>
+ <dd>Має тип <code>unsigned long</code>. Являє собою час у мілісекундах, відведений на запит перед тим, як буде автоматично перерваний.</dd>
+ <dt id="xmlhttprequesteventtarget-ontimeout">{{domxref("XMLHttpRequestEventTarget.ontimeout")}}</dt>
+ <dd>{{domxref("EventHandler")}}, що викликається щоразу після спливання часу, відведенного на запит. {{gecko_minversion_inline("12.0")}}</dd>
+ <dt id="xmlhttprequest-upload">{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}</dt>
+ <dd>{{domxref("XMLHttpRequestUpload")}}, що являє собою процес завантаження.</dd>
+ <dt id="xmlhttprequest-withcredentials">{{domxref("XMLHttpRequest.withCredentials")}}</dt>
+ <dd>{{domxref("Boolean")}}, що вказує, чи слід робити запити <code>Access-Control</code> використовуючи такі облікові дані, як файли cookie або заголовки авторизації.</dd>
+</dl>
+
+<h3 id="Нестандартні_властивості">Нестандартні властивості</h3>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}</dt>
+ <dd>{{Interface("nsIChannel")}}. Канал, що використовується об'єктом коли виконується запит.</dd>
+ <dt>{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}</dt>
+ <dd>Логічна змінна. Якщо її значення — істина, запит буде надісланий без кукі та заголовків аутентифікації.</dd>
+ <dt>{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}</dt>
+ <dd>Логічна змінна. Якщо її значення — істина, оригінальна політика не буде застосована до запиту.</dd>
+ <dt>{{domxref("XMLHttpRequest.mozBackgroundRequest")}}</dt>
+ <dd>Логічна змінна. Вказує чи представляє об'єкт сервіс фонового запиту.</dd>
+ <dt>{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}</dt>
+ <dd>Є <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer"><code>ArrayBuffer</code></a>. Відповідь на запит у вигляді масиву JavaScript.</dd>
+ <dt>{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}</dt>
+ <dd><strong>Це особливість Gecko, логічна змінна, що була видалена з Firefox/Gecko 22.</strong> Будь ласка, використовуйте натомість <a href="/en-US/docs/Web/API/Server-sent_events">Server-Sent Events</a>, <a href="/en-US/docs/Web/API/WebSockets_API">Web Sockets</a>, або <code>responseText</code>.</dd>
+</dl>
+
+<h3 id="Обробники_подій">Обробники подій</h3>
+
+<p><code>onreadystatechange</code> підримується у всіх браузерах, як властивість <code>XMLHttpRequest</code>.</p>
+
+<p>З тих пір у різних браузерах було впроваджено ряд додаткових обробників подій (<code>onload</code>, <code>onerror</code>, <code>onprogress</code> тощо). Вони підтримуються у Firefox. Зокрема, дивіться <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequestEventTarget" title="">nsIXMLHttpRequestEventTarget</a></code> та <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a>.</p>
+
+<p>Більш нові браузери, включаючи Firefox, також підтримують прослуховування подій <code>XMLHttpRequest</code> починаючи від стандарту API <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> в розширені на встановлення властивостей функцій обробника <code>on*</code>.</p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.abort()")}}</dt>
+ <dd>Aborts the request if it has already been sent.</dd>
+ <dt>{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}</dt>
+ <dd>Returns all the response headers, separated by <a href="https://developer.mozilla.org/en-US/docs/Glossary/CRLF">CRLF</a>, as a string, or <code>null</code> if no response has been received.</dd>
+ <dt>{{domxref("XMLHttpRequest.getResponseHeader()")}}</dt>
+ <dd>Returns the string containing the text of the specified header, or <code>null</code> if either the response has not yet been received or the header doesn't exist in the response.</dd>
+ <dt>{{domxref("XMLHttpRequest.open()")}}</dt>
+ <dd>Initializes a request. This method is to be used from JavaScript code; to initialize a request from native code, use <a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#openRequest()"><code>openRequest()</code></a> instead.</dd>
+ <dt>{{domxref("XMLHttpRequest.overrideMimeType()")}}</dt>
+ <dd>Overrides the MIME type returned by the server.</dd>
+ <dt>{{domxref("XMLHttpRequest.send()")}}</dt>
+ <dd>Sends the request. If the request is asynchronous (which is the default), this method returns as soon as the request is sent.</dd>
+ <dt>{{domxref("XMLHttpRequest.setRequestHeader()")}}</dt>
+ <dd>Sets the value of an HTTP request header. You must call <code>setRequestHeader()</code>after <a href="#open"><code>open()</code></a>, but before <code>send()</code>.</dd>
+</dl>
+
+<h3 id="Non-standard_methods">Non-standard methods</h3>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.init()")}}</dt>
+ <dd>Initializes the object for use from C++ code.</dd>
+</dl>
+
+<div class="warning"><strong>Warning:</strong> This method must <em>not</em> be called from JavaScript.</div>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.openRequest()")}}</dt>
+ <dd>Initializes a request. This method is to be used from native code; to initialize a request from JavaScript code, use <a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#open()"><code>open()</code></a> instead. See the documentation for <code>open()</code>.</dd>
+ <dt>{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}</dt>
+ <dd>A variant of the <code>send()</code> method that sends binary data.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Live standard, latest version</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<div>{{Compat("api.XMLHttpRequest")}}</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>MDN tutorials covering XMLHttpRequest:
+  <ul>
+   <li><a href="/en-US/docs/AJAX/Getting_Started">Ajax — Getting Started</a></li>
+   <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
+   <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li>
+   <li><a href="/en-US/docs/Web/API/FormData"><code>FormData</code></a></li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks — New Tricks in XMLHttpRequest2</a></li>
+ <li><code>Chrome scope availability</code> — how to access XMLHttpRequest from JSM modules etc., which do not have access to DOM
+  <ul>
+   <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+   <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest">nsIXMLHttpRequest</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/uk/web/api/подія/index.html b/files/uk/web/api/подія/index.html
new file mode 100644
index 0000000000..e1aab3dfde
--- /dev/null
+++ b/files/uk/web/api/подія/index.html
@@ -0,0 +1,188 @@
+---
+title: Подія
+slug: Web/API/Подія
+translation_of: Web/API/Event
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><font color="#333333" face="consolas, Liberation Mono, courier, monospace"><code><strong>Event</strong></code> інтерфейс представляє подію, що відбувається в DOM. Подія може бути ініційована дією користувача, наприклад, кліком мишки або натисканням клавіши на клавіатурі, або згенерована API, щоб показати прогрес асинхронного завдання, тощо. Це може бути також ініційовано програмно викликом <code><a href="https://developer.mozilla.org/uk/docs/Web/API/HTMLElement/click">HTMLElement.click()</a></code> методу елемента, або створенням екземпляру події, потім відправленням його до вказаного цільового елементу, використовуючи <code><a href="https://developer.mozilla.org/uk/docs/Web/API/EventTarget/dispatchEvent">EventTarget.dispatchEvent()</a></code>.</font></p>
+
+<p><font color="#333333" face="consolas, Liberation Mono, courier, monospace">Існує багато різновидів подій, деякі з котрих використовують інші інтерфейси, основані на головному інтерфейсі <code>Event</code>. Сам по собі <code>Event</code> вміщає можливості та методи, спільні для всіх подій.</font></p>
+
+<p><font face="consolas, Liberation Mono, courier, monospace">Багато елементів DOM можуть бути налаштовані прийняти (або "почути") ці події та виконати код у відповідь на процес їхньої обробки. Хендлери подій звичайно пов'язані або додаються до різноманітних <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element">HTML elements</a> (таких як <code>&lt;button&gt;</code>, <code>&lt;div&gt;</code>, <code>&lt;span&gt;</code>, і т.п.) при використанні <code><a href="https://developer.mozilla.org/uk/docs/Web/API/EventTarget/addEventListener">EventTarget.addEventListener()</a></code>, а це, як правило, замінює використання <a href="https://developer.mozilla.org/uk/docs/HTML/Global_attributes">атрибутів хендлера подій </a>старого HTML. Надалі за необхідності додавання, такі хендлери також можна відключати, якщо потрібно, використовуючи <code><a href="https://developer.mozilla.org/uk/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>.  </font></p>
+
+<p><font face="consolas, Liberation Mono, courier, monospace">Примітка: один елемент може мати декілька таких хендлерів, навіть для однієї й тієї ж події - особливо якщо окремо, незалежні модулі коду прикріплять їх, кожний для власних незалежних цілей. (Наприклад, вебсторінка з рекламним модулем та статичним модулем,</font><font face="consolas, Liberation Mono, courier, monospace"> обидва з яких забезпечують моніторинг перегляду відео.) </font></p>
+
+<p><font face="consolas, Liberation Mono, courier, monospace">Коли є багато вкладених елементів, кожний зі своїм особистим хендлером (хендлерами), обробка подій може стати дуже складною - особливо там, де батьківський елемент отримує ту ж саму подію, що й її дочірній елемент, тому що "просторово" вони перетинаються і таким чином подія технічно з'являється в них обох, а порядок обробки таких подій залежить від параметрів вспливаючих подій та захоплення кожного обробника.</font></p>
+
+<h2 id="Introduction" name="Introduction">Інтерфейси на основі Event</h2>
+
+<p>Нижче надано список інтерфейсів, які існують на основі головного <code>Event</code> інтерфейсу, із ссилками на відповідну документацію в довіднику MDN API.</p>
+
+<p>Зверніть увагу, що всі інтерфейси подій мають назви із закінченням "Event".</p>
+
+
+
+<div class="index">
+<ul>
+ <li>{{domxref("AnimationEvent")}}</li>
+ <li>{{domxref("AudioProcessingEvent")}}</li>
+ <li>{{domxref("BeforeInputEvent")}}</li>
+ <li>{{domxref("BeforeUnloadEvent")}}</li>
+ <li>{{domxref("BlobEvent")}}</li>
+ <li>{{domxref("ClipboardEvent")}}</li>
+ <li>{{domxref("CloseEvent")}}</li>
+ <li>{{domxref("CompositionEvent")}}</li>
+ <li>{{domxref("CSSFontFaceLoadEvent")}}</li>
+ <li>{{domxref("CustomEvent")}}</li>
+ <li>{{domxref("DeviceLightEvent")}}</li>
+ <li>{{domxref("DeviceMotionEvent")}}</li>
+ <li>{{domxref("DeviceOrientationEvent")}}</li>
+ <li>{{domxref("DeviceProximityEvent")}}</li>
+ <li>{{domxref("DOMTransactionEvent")}}</li>
+ <li>{{domxref("DragEvent")}}</li>
+ <li>{{domxref("EditingBeforeInputEvent")}}</li>
+ <li>{{domxref("ErrorEvent")}}</li>
+ <li>{{domxref("FetchEvent")}}</li>
+ <li>{{domxref("FocusEvent")}}</li>
+ <li>{{domxref("GamepadEvent")}}</li>
+ <li>{{domxref("HashChangeEvent")}}</li>
+ <li>{{domxref("IDBVersionChangeEvent")}}</li>
+ <li>{{domxref("InputEvent")}}</li>
+ <li>{{domxref("KeyboardEvent")}}</li>
+ <li>{{domxref("MediaStreamEvent")}}</li>
+ <li>{{domxref("MessageEvent")}}</li>
+ <li>{{domxref("MouseEvent")}}</li>
+ <li>{{domxref("MutationEvent")}}</li>
+ <li>{{domxref("OfflineAudioCompletionEvent")}}</li>
+ <li>{{domxref("PageTransitionEvent")}}</li>
+ <li>{{domxref("PointerEvent")}}</li>
+ <li>{{domxref("PopStateEvent")}}</li>
+ <li>{{domxref("ProgressEvent")}}</li>
+ <li>{{domxref("RelatedEvent")}}</li>
+ <li>{{domxref("RTCDataChannelEvent")}}</li>
+ <li>{{domxref("RTCIdentityErrorEvent")}}</li>
+ <li>{{domxref("RTCIdentityEvent")}}</li>
+ <li>{{domxref("RTCPeerConnectionIceEvent")}}</li>
+ <li>{{domxref("SensorEvent")}}</li>
+ <li>{{domxref("StorageEvent")}}</li>
+ <li>{{domxref("SVGEvent")}}</li>
+ <li>{{domxref("SVGZoomEvent")}}</li>
+ <li>{{domxref("TimeEvent")}}</li>
+ <li>{{domxref("TouchEvent")}}</li>
+ <li>{{domxref("TrackEvent")}}</li>
+ <li>{{domxref("TransitionEvent")}}</li>
+ <li>{{domxref("UIEvent")}}</li>
+ <li>{{domxref("UserProximityEvent")}}</li>
+ <li>{{domxref("WebGLContextEvent")}}</li>
+ <li>{{domxref("WheelEvent")}}</li>
+</ul>
+</div>
+
+<h2 id="Constructor" name="Constructor">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("Event.Event", "Event()")}}</dt>
+ <dd>Створює  <code>Event</code> об'єкт та повертає його абоненту.</dd>
+</dl>
+
+<h2 id="Properties" name="Properties">Властивості</h2>
+
+<dl>
+ <dt>{{domxref("Event.bubbles")}} {{readonlyinline}}</dt>
+ <dd>Булевий вираз вказує на те, чи вспливає подія через DOM.</dd>
+ <dt>{{domxref("Event.cancelBubble")}}</dt>
+ <dd>Історичний псевдонім {{domxref("Event.stopPropagation()")}}. Встановлення його значення <code>true</code>  перед поверненням з обробника події запобігає поширенню події.</dd>
+ <dt>{{domxref("Event.cancelable")}} {{readonlyinline}}</dt>
+ <dd>Булевий вираз вказує на те, чи скасовується подія.</dd>
+ <dt>{{domxref("Event.composed")}} {{ReadOnlyInline}}</dt>
+ <dd>Булевий вираз вказує на те, чи може подія всплити через межу між  тінню DOM та черговим DOM.</dd>
+ <dt>{{domxref("Event.currentTarget")}} {{readonlyinline}}</dt>
+ <dd>Посилання на зареєстровану зараз ціль події. Це об'єкт, на котрий наразі планується відіслати подію. Можливо, це змінилося по дорозі через <em>retargeting</em>.</dd>
+ <dt>{{domxref("Event.deepPath")}} {{non-standard_inline}}</dt>
+ <dd> {{jsxref("Array")}} of DOM {{domxref("Node")}}, через який всплила подія.</dd>
+ <dt>{{domxref("Event.defaultPrevented")}} {{readonlyinline}}</dt>
+ <dd>Вказує, чи виклик {{domxref("event.preventDefault()")}}  скасував подію.</dd>
+ <dt>{{domxref("Event.eventPhase")}} {{readonlyinline}}</dt>
+ <dd>Вказує, яка фаза потоку подій обробляється.</dd>
+ <dt>{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Явна оригінальна мета події (Mozilla-specific).</dd>
+ <dt>{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Початкова ціль події перед будь-якими ретаргетингами. (Mozilla-specific).</dd>
+ <dt>{{domxref("Event.returnValue")}}</dt>
+ <dd>Історична властивість, представлена Internet Explorer і згодом прийнята в специфікацію DOM для того, щоб забезпечити продовження  роботи існуючих сайтів. В ідеалі, вам слід спробувати використати {{domxref(''Event.preventDefault()")}} та {{domxref("Event.defaultPrevented")}} замість нього, але ви можете використовувати <code>returnValue</code>, якщо ви  вирішите це зробити.</dd>
+ <dt>{{domxref("Event.returnValue")}} {{non-standard_inline}}</dt>
+ <dd>Нестандартний псевдонім (зі старої версії Microsoft Internet Explorer) для {{domxref("Event.target")}}. Деякі інші браузери починають підтримувати його для веб-сумісності.</dd>
+ <dt>{{domxref("Event.target")}} {{readonlyinline}}</dt>
+ <dd>Посилання на ціль, до якої спочатку була відправлена подія.</dd>
+ <dt>{{domxref("Event.timeStamp")}} {{readonlyinline}}</dt>
+ <dd>Час, коли було створено подію (в мілісекундах).  За специфікацією, це значення - час з епохи - але насправді визначення браузерів різняться.Крім того, ведеться робота, щоб змінити його на {{domxref("DOMHighResTimeStamp")}} .</dd>
+ <dt>{{domxref("Event.isTrusted")}} {{readonlyinline}}</dt>
+ <dd>Вказує, чи  була подія ініційована браузером (наприклад, після натискання клавіши на клавіатурі користувачем) або за сценарієм (використовуючи метод створення подій, наприклад {{domxref("Event.initEvent")}}).</dd>
+ <dt>Застарілі властивості</dt>
+</dl>
+
+<p><strong>{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}</strong></p>
+
+<p>Застарілі; використовуйте замість них {{domxref("Event.composed", "composed")}}. ({{jsxref("Boolean")}} вказує, чи вспливе дана подія через тіньовий корінь у стандарт DOM.)</p>
+
+<h2 id="Methods" name="Methods">Методи</h2>
+
+<dl>
+ <dt>{{domxref("Event.createEvent()")}} {{deprecated_inline}}</dt>
+ <dd>Створює нову подію, котра повинна бути ініційована викликом її  <code>initEvent() </code>методу.</dd>
+ <dt>{{domxref("Event.composedPath()")}}</dt>
+ <dd>Повертає шлях події (об'єкти, на які слухачі будуть викликані). Це не включає вузли через тіньові дерева, якщо тіньовий корінь було створено із закритим {{domxref("ShadowRootmode")}}.</dd>
+ <dt>{{domxref("Event.preventDefault()")}}</dt>
+ <dd>Скасовує подію, (якщо її можливо скасувати).</dd>
+ <dt>{{domxref("Event.stopImmediatePropagation()")}}</dt>
+ <dd>Для цієї конкретної події не дозволяйте викликати всіх інших слухачів. Сюди входять слухачі, приєднані до одного й того ж елемента, а також ті, що додаються до елементів, які буде прищеплено пізніше (наприклад, під час фази введення).</dd>
+ <dt>{{domxref("Event.stopPropagation()")}}</dt>
+ <dd>Зупиняє розповсюдження подій далі у DOM.</dd>
+ <dt>Застарілі методи</dt>
+ <dt>{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}</dt>
+ <dd>Нестандартний. Використовуйте замість нього {{domxref("Event.defaultPrevented")}}.  (Повертає значення {{domxref("Event.defaultPrevented")}}.)</dd>
+ <dt>{{domxref("Event.preventBubble()"}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt>
+ <dd>Застарілий; використовуйте замість нього {{domxref("event.stopPropagation")}}. (Захищає подію від вспливання).</dd>
+ <dt>{{domxref("Event.preventcapture()"}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt>
+ <dd>Застарілий; використовуйте замість нього {{domxref("event.stopPropagation"}}.</dd>
+</dl>
+
+<h2 id="Технічні_характеристики">Технічні характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Характеристика</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузером">Сумісність з браузером</h2>
+
+<p>приховано</p>
+
+<p>Таблиця сумісності на цій сторінці формується із структурованих даних. Якщо ви захочете побачити її, будь ласка, перевірте та відправте нам запит <a href="/uk/docs/">https://github/com/mdn/browser-compat-data</a></p>
+
+
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>Види подій доступні: <a href="/en-US/docs/Web/Reference/Events">Event reference</a></li>
+ <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparison of Event Targets</a> (<code>target</code> vs <code>currentTarget</code> vs <code>relatedTarget</code> vs <code>originalTarget</code>)</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Creating and triggering custom events</a></li>
+ <li>Для розробників Firefox add-on:
+  <ul>
+   <li><a href="/en-US/docs/Listening_to_events_in_Firefox_extensions">Listening to events in Firefox extensions</a></li>
+   <li><a href="/en-US/docs/Listening_to_events_on_all_tabs">Listening to events on all tabs</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/uk/web/api/подія/target/index.html b/files/uk/web/api/подія/target/index.html
new file mode 100644
index 0000000000..20c17f2d31
--- /dev/null
+++ b/files/uk/web/api/подія/target/index.html
@@ -0,0 +1,134 @@
+---
+title: Event.target
+slug: Web/API/Подія/target
+translation_of: Web/API/Event/target
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>Властивість <code><strong>target</strong></code> інтерфейсу {{domxref("Event")}} є посиланням на об'єкт який відправив подію. Він відрізняється від {{domxref("Event.currentTarget")}} коли обробник події викликається в фазі спливання або фіксації події.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="notranslate">var <em>theTarget</em> = <em>event</em>.target;</pre>
+
+<h2 id="Приклад">Приклад</h2>
+
+<p>Властивість <code>event.target</code> може бути використана для реалізації <strong>делегування події</strong>.</p>
+
+<pre class="brush: js notranslate">// Зробити список
+var ul = document.createElement('ul');
+document.body.appendChild(ul);
+
+var li1 = document.createElement('li');
+var li2 = document.createElement('li');
+ul.appendChild(li1);
+ul.appendChild(li2);
+
+function hide(e){
+  // e.target вказує на елемент &lt;li&gt; на якому було натиснуто
+  // Це відрізняється від e.currentTarget який буде посилатися на батьківський &lt;ul&gt; в даному контексті
+  e.target.style.visibility = 'hidden';
+}
+
+// Приєднання слухача подій до списка
+// Він запуститься при натисканні кожного &lt;li&gt;
+ul.addEventListener('click', hide, false);
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-event-target", "Event.target")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Нотатки_про_сумісність">Нотатки про сумісність</h2>
+
+<p>В браузерах IE 6-8 використовується інша модель подій. Слухачі подій приєднуються з використанням нестандартного методу {{domxref('EventTarget.attachEvent')}}. В цій моделі, об'єкт події має {{domxref('Event.srcElement')}} властивість, замість властивості <code>target</code>, і воно має ту ж саму семантику як <code>event.target</code>.</p>
+
+<pre class="brush: js notranslate">function hide(e) {
+  // Підтримка IE6-8
+  var target = e.target || e.srcElement;
+  target.style.visibility = 'hidden';
+}
+</pre>
+
+<h2 id="Читати_також">Читати також</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Порівняння Event Targets</a></li>
+</ul>
diff --git a/files/uk/web/css/-moz-orient/index.html b/files/uk/web/css/-moz-orient/index.html
new file mode 100644
index 0000000000..fbed678743
--- /dev/null
+++ b/files/uk/web/css/-moz-orient/index.html
@@ -0,0 +1,153 @@
+---
+title: '-moz-orient'
+slug: Web/CSS/-moz-orient
+translation_of: Web/CSS/-moz-orient
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><code>-moz-orient</code> <a href="/en-US/docs/Web/CSS">CSS</a> властивість, що задає орієнтацію обраного елемента.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h3 id="Значення">Значення</h3>
+
+<dl>
+ <dt><code>inline</code></dt>
+ <dd>The element is rendered in the same direction as the axis of the text: horizontally for horizontal writing modes, vertically for vertical writing modes.</dd>
+ <dt><code>block</code></dt>
+ <dd>The element is rendered orthogonally to the axis of the text: vertically for horizontal writing modes, horizontal for vertical writing modes.</dd>
+ <dt><code>horizontal</code></dt>
+ <dd>The element is rendered horizontally.</dd>
+ <dt><code>vertical</code></dt>
+ <dd>The element is rendered vertically.</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  The following progress meter
+  is horizontal (the default):
+&lt;/p&gt;
+&lt;progress max="100" value="75"&gt;&lt;/progress&gt;
+
+&lt;p&gt;
+ The following progress meter
+ is vertical:
+&lt;/p&gt;
+&lt;progress class="vert" max="100" value="75"&gt;&lt;/progress&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.vert {
+  -moz-orient: vertical;
+  width: 16px;
+  height: 150px;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Examples","200","360")}}</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Though <a href="https://lists.w3.org/Archives/Public/www-style/2014Jun/0396.html">submitted</a> to the W3C, with positive initial feedback, this property is not yet part of any specification; currently, this is a Mozilla-specific extension (that is, <code>-moz-orient</code>).</p>
+
+<h2 id="Браузерна_сумісність">Браузерна сумісність</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}{{property_prefix("-moz")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>auto</code> value</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("21.0")}}<sup>[2]</sup><br>
+    {{CompatNo}}{{CompatGeckoDesktop(40)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>inline</code> and <code>block</code> values</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(40)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}{{property_prefix("-moz")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>auto</code> value</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("21.0")}}<sup>[2]</sup><br>
+    {{CompatNo}}{{CompatGeckoDesktop(40)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>inline</code> and <code>block</code> values</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(40)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In Gecko 6.0 {{geckoRelease("6.0")}}, there was a bug that causes vertical {{HTMLElement("progress")}} elements to render with the dimensions of a horizontal bar. This is fixed in Gecko 7.0 {{geckoRelease("7.0")}}.</p>
+
+<p>[2] The <code>auto</code> value was equivalent to <code>horizontal</code>.</p>
+
+<h2 id="Дивитися_також">Дивитися також</h2>
+
+<ul>
+ <li>{{cssxref("box-orient")}}</li>
+</ul>
diff --git a/files/uk/web/css/@font-face/font-display/index.html b/files/uk/web/css/@font-face/font-display/index.html
new file mode 100644
index 0000000000..d11214dcbc
--- /dev/null
+++ b/files/uk/web/css/@font-face/font-display/index.html
@@ -0,0 +1,87 @@
+---
+title: font-display
+slug: Web/CSS/@font-face/font-display
+translation_of: Web/CSS/@font-face/font-display
+---
+<div>{{CSSRef}}</div>
+
+<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Властивість </span></font>font-display</code> визначає як font face відображаєтся стосовно як він завантижився і готовий до використання.</p>
+
+<h2 id="Хронологія_відображення_шрифта">Хронологія відображення шрифта</h2>
+
+<p>Хронологія відображення шрифта залежить від часу на початку завантаження шрифта та його використання. Типи хронології поділені на три частини які вказують поведінку відображення усих елементів які використовують цей шрифт.</p>
+
+<dl>
+ <dt>Блокування шрифту(block)</dt>
+ <dd>Якщо шрифт не завантажений, усі елементи які очікують на його використання мають відображатись невидимими(<em>invisible</em>). Якщо шрифт успішно завантажений за цей період, вони відображаются за замовчуванням.</dd>
+ <dt>Заміна шрифту(swap)</dt>
+ <dd>Якщо шрифт не завантажений, усі елементи що очікують на його використання , мають використати запасний шрифт. Якщо шрифт успішно завантажений за цей період, вони відображаются за замовчуванням.</dd>
+ <dt>Невдача(failure)</dt>
+ <dd>Якщо шрифт не був завантажений, клієнт відображає його як невдачно завантажений, що викликає звичайне резервування шрифту.</dd>
+</dl>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css;">/* Keyword values */
+font-display: auto;
+font-display: block;
+font-display: swap;
+font-display: fallback;
+font-display: optional;</pre>
+
+<h3 id="Значення">Значення</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Відображення шрифту виконуєтся автоматично клієнтом.</dd>
+ <dt><code>block</code></dt>
+ <dd>Надає елементам короткий період блокування і нескінченний swap період.</dd>
+ <dt><code>swap</code></dt>
+ <dd>Надає надзвичайно малий період блокування і нескінченний період підміни шрифту.</dd>
+ <dt><code>fallback</code></dt>
+ <dd>Надає надзвичайно малий період блокування і малий період підміни шрифту.</dd>
+ <dt><code>optional</code></dt>
+ <dd>Надає надзвичайно малий період блокування без підміни шрифту.</dd>
+</dl>
+
+<h3 id="Формальний_синтаксис">Формальний синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Приклад">Приклад</h2>
+
+<pre class="brush: css; highlight[7]">@font-face {
+  font-family: ExampleFont;
+  src: url(/path/to/fonts/examplefont.woff) format('woff'),
+       url(/path/to/fonts/examplefont.eot) format('eot');
+  font-weight: 400;
+  font-style: normal;
+  font-display: fallback;
+}</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+
+
+<p>{{Compat("css.at-rules.font-face.font-display")}}</p>
diff --git a/files/uk/web/css/@font-face/index.html b/files/uk/web/css/@font-face/index.html
new file mode 100644
index 0000000000..6a872bcb8f
--- /dev/null
+++ b/files/uk/web/css/@font-face/index.html
@@ -0,0 +1,197 @@
+---
+title: '@font-face'
+slug: Web/CSS/@font-face
+tags:
+  - '@-правила'
+  - '@font-face'
+  - CSS
+  - CSS Шрифти
+  - Посилання
+  - типографія
+  - шрифти
+translation_of: Web/CSS/@font-face
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>@font-face</code></strong> <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/CSS/At-rule">@-правило</a> вказує спеціальний шрифт для відображення текста. Шрифт може бути завантажений з зовнішнього сервера або встановлено локально на комп'ютері користувача. Якщо функція </span><code>local()</code> вказує ім'я шрифта то його пошук буде відбуватися  на комп'ютері користувача. Інакше ресурси шрифти вказані з використанням функції <code>url()</code> будуть завантажені і використані</p>
+
+<p>Дозвіл авторам впроваджувати їх власні шрифти дає можливість стилізувати контент без обмежень в так званих "безпечних" шрифтах (Це такі шрифти,що широко використовуються та визнані як загальнодоступні). Можливість вказувати ім'я локально встановлених шрифтів дає можливість налаштовувати шрифт більш гнучко без залежності від інтернет з'єднання.</p>
+
+<p>Поширеним випадком є використання <code>url()</code> і <code>local()</code> разом, що дає змогу використовувати втановлений користувачем шрифт і завантажувати шрифт у разі його відсутності на користувацькому пристрої.</p>
+
+<p><code>@font-face</code> @-правило може бути використане не лише на вищому рівні CSS, а й всередині будь-якого <a href="/en-US/docs/Web/CSS/At-rule#Conditional_group_rules">@-правила</a>.</p>
+
+<pre class="brush: css no-line-numbers">@font-face {
+  font-family: "Open Sans";
+  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+}</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Опис">Опис</h3>
+
+<dl>
+ <dt>{{cssxref("@font-face/font-display", "font-display")}}</dt>
+ <dd>Вказує як шрифт відображатиметься в залежності від того чи він завантажений та готовий до використання.</dd>
+ <dt>{{cssxref("@font-face/font-family", "font-family")}}</dt>
+ <dd>Задає ім'я, що буде використовуватися для задання властивостей шрифта.</dd>
+ <dt>{{cssxref("@font-face/font-stretch", "font-stretch")}}</dt>
+ <dd>Значення {{cssxref("font-stretch")}} . Починаючи з Firefox 61 (та інших сучасних браузерів)  {{cssxref("font-stretch")}} також допускає задання двох значень для вказання діапазону, що підтримується шрифтом, наприклад: <code>font-stretch: 50% 200%;</code></dd>
+ <dt>{{cssxref("@font-face/font-style", "font-style")}}</dt>
+ <dd>Значення {{cssxref("font-style")}}. Починаючи з Firefox 61 (і інших сучасних браузерів) {{cssxref("font-style")}}.також допускає задання двох значень для вказання діапазону, що підтримується шрифтом, наприклад: <code>font-style: oblique 20deg 50deg;</code></dd>
+ <dt>{{cssxref("@font-face/font-weight", "font-weight")}}</dt>
+ <dd>Значення {{cssxref("font-weight")}}. Починаючи з Firefox 61 (і інших сучасних браузерів) {{cssxref("font-weight")}} також допускає задання двох значень для вказання діапазону, що підтримується шрифтом, наприклад: <code>font-weight: 100 400;</code></dd>
+ <dt>{{cssxref("@font-face/font-variant", "font-variant")}}</dt>
+ <dd>Значення {{cssxref("font-variant")}}.</dd>
+ <dt>{{cssxref("font-feature-settings", "font-feature-settings")}}</dt>
+ <dd>Дозволяє контролювати інші розширені можлифості OpenType шрифтів.</dd>
+ <dt>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</dt>
+ <dd>Дозволяє здійснювати низькорівневий контроль над варіаціями шрифтів OpenType чи TrueType, вказуючи назви осей з чотирьох букв для зміни разом з їх значеннями.</dd>
+ <dt>{{cssxref("@font-face/src", "src")}}</dt>
+ <dd>
+ <p>Вказує ресурс, що містить дані шрифта.  Це може бути URL для віддаленого файлу шрифта чи ім'я для шрифта на комп'ютері користувача.</p>
+
+ <p>Щоб дати браузеру підказку який вибрати формат ресурсу шрифта, формат можна вказати в середині функції <code>format()</code>:</p>
+
+ <pre class="brush: css">src: url(ideal-sans-serif.woff) <strong>format("woff")</strong>,
+     url(basic-sans-serif.ttf) <strong>format("truetype")</strong>;</pre>
+
+ <p>Достіпні типи: <code>"woff"</code>, <code>"woff2"</code>, <code>"truetype"</code>, <code>"opentype"</code>, <code>"embedded-opentype"</code>, і <code>"svg"</code>.</p>
+ </dd>
+ <dt>{{cssxref("@font-face/unicode-range", "unicode-range")}}</dt>
+ <dd>Діапазон  Unicode кодів, що буде використовуватись в шрифті.</dd>
+</dl>
+
+<h3 id="Формальний_синтаксис">Формальний синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Цей приклад просто вказує завантажуваний шрифт для використання і застосовує його до всього тіла документа:</p>
+
+<p><a href="https://mdn.mozillademos.org/files/7775/webfont-sample.html">Дивитися live приклад</a></p>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Web Font Sample&lt;/title&gt;
+  &lt;style type="text/css" media="screen, print"&gt;
+    @font-face {
+      font-family: "Bitstream Vera Serif Bold";
+      src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
+    }
+
+    body { font-family: "Bitstream Vera Serif Bold", serif }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  This is Bitstream Vera Serif Bold.
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>В цьому прикладі використовується локальний шрифт користувача "Helvetica Neue Bold"; якщо у користувача цей шрифт не встановлений тоді натомість використовується завантажуваний шрифт "MgOpenModernaBold.ttf":</p>
+
+<pre class="brush: css">@font-face {
+  font-family: MyHelvetica;
+  src: local("Helvetica Neue Bold"),
+       local("HelveticaNeue-Bold"),
+       url(MgOpenModernaBold.ttf);
+  font-weight: bold;
+}
+</pre>
+
+<h2 id="MIME-типи_шрифтів">MIME-типи шрифтів</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th>Формат</th>
+   <th>MIME-тип</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>TrueType</td>
+   <td><code>font/ttf</code></td>
+  </tr>
+  <tr>
+   <td>OpenType</td>
+   <td><code>font/otf</code></td>
+  </tr>
+  <tr>
+   <td>Web Open File Format</td>
+   <td><code>font/woff</code></td>
+  </tr>
+  <tr>
+   <td>Web Open File Format 2</td>
+   <td><code>font/woff2</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Нотатки">Нотатки</h2>
+
+<ul>
+ <li>Веб шрифти підлягають одному і тому ж обмеженню доменів (файли шрифтів повинні знаходитись на тому ж домен, що і сторінка на яких вони використовуться) ,  <a href="/en-US/docs/HTTP_access_control">HTTP контроль доступу</a> використовується для полегшення цього обмеження.</li>
+ <li><code>@font-face</code> не може бути оголошеним в CSS селекторі. Наприклад наступне не працюватиме:
+  <pre class="brush: css; example-bad">.className {
+  @font-face {
+    font-family: MyHelvetica;
+    src: local("Helvetica Neue Bold"),
+         local("HelveticaNeue-Bold"),
+         url(MgOpenModernaBold.ttf);
+    font-weight: bold;
+  }
+}</pre>
+ </li>
+</ul>
+
+<h2 id="Специфікація">Специфікація</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WOFF2.0', '', 'WOFF2 font format')}}</td>
+   <td>{{Spec2('WOFF2.0')}}</td>
+   <td>Специфікація фомату шрифта з новим алгоритмом стиснення</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WOFF1.0', '', 'WOFF font format')}}</td>
+   <td>{{Spec2('WOFF1.0')}}</td>
+   <td>Специфікація формата шрифта</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Початкове визначення</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_браузерів">Підтримка браузерів </h2>
+
+<div class="hidden">Таблиця підтримки на цій сторінці згенерована з структурованих даних будь ласка прогляньте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і надішлінть нам pull request.</div>
+
+<p>{{Compat("css.at-rules.font-face")}}</p>
+
+<h2 id="Прогляньте_також">Прогляньте також</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WOFF"> Про WOFF</a></li>
+ <li><a href="https://everythingfonts.com/font-face">Everythingfonts font-face generator</a></li>
+ <li><a class="external" href="http://www.fontsquirrel.com/fontface/generator">FontSquirrel @font-face generator</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Гарні шрифти @font-face</a></li>
+ <li><a class="external" href="http://openfontlibrary.org/">Open Font Library</a></li>
+ <li><a class="external" href="http://caniuse.com/woff">Коли я можу використовувати WOFF?</a></li>
+ <li><a class="external" href="http://caniuse.com/svg-fonts">Коли я можу використовувати SVG Fonts?</a></li>
+ <li><a href="https://coolfont.org">Безкоштовні круті шрифти</a></li>
+</ul>
diff --git a/files/uk/web/css/@page/bleed/index.html b/files/uk/web/css/@page/bleed/index.html
new file mode 100644
index 0000000000..f937f5dfaf
--- /dev/null
+++ b/files/uk/web/css/@page/bleed/index.html
@@ -0,0 +1,83 @@
+---
+title: bleed
+slug: Web/CSS/@page/bleed
+tags:
+  - '@сторінка'
+  - CSS
+  - Web
+translation_of: Web/CSS/@page/bleed
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p> <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><strong>bleed </strong>це пропускний дескриптор правил css</span></font>, використовується  з {{cssxref("@page")}} за правилом , визначає ступінь області пропуску сторінки за межами сторінки. Ця властивість має тільки ефект  якщо позначки обрізання   увімкнено за допомогою властивості {{cssxref("@page/marks", "marks")}} property.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css notranslate">/* Keyword values */
+bleed: auto;
+
+/* &lt;length&gt; values */
+bleed: 8pt;
+bleed: 1cm;
+</pre>
+
+<h3 id="Значення">Значення</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Обчислюється до 6pt якщо  значення в {{cssxref("@page/marks", "marks")}} є обрізаним. В іншому випадку він обчислюється до нуля.</dd>
+ <dt><code>{{cssxref("&lt;довжина&gt;")}}</code></dt>
+ <dd><br>
+ Вказує, наскільки назовні, в кожному напрямку, область випуску простягається поза полем сторінки. Значення можуть бути від’ємними, але можуть бути певні обмеження щодо реалізації.</dd>
+</dl>
+
+<h2 id="Формальне_визначення">Формальне визначення</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Формальний_синтаксис">Формальний синтаксис</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Встановлення_кровоточення_сторінки_в_1см.">Встановлення кровоточення сторінки  в 1см.</h3>
+
+<pre class="brush: css notranslate">@page {
+  bleed: 1cm;
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Стан</th>
+   <th scope="col">Коментарі</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Paged Media", "#bleed", "bleed")}}</td>
+   <td>{{Spec2("CSS3 Paged Media")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сувмістність_з_браузерами">Сувмістність з браузерами</h2>
+
+<div class="hidden"> Таблиця сувмістності на цій сторінці  on згенерована зі структорованих даних . Якщо ви хочете зробити свій внесок інформації</div>
+
+<div class="hidden"><a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і надішліть нам запит на висвітлення.</div>
+
+<p>{{Compat("css.at-rules.page.bleed")}}</p>
+
+<h2 id="Зазвичай_переглядають">Зазвичай переглядають</h2>
+
+<ul>
+ <li>{{cssxref("@page/marks", "marks")}}</li>
+ <li>{{cssxref("@page/size", "size")}}</li>
+</ul>
diff --git a/files/uk/web/css/@page/index.html b/files/uk/web/css/@page/index.html
new file mode 100644
index 0000000000..7704892bfb
--- /dev/null
+++ b/files/uk/web/css/@page/index.html
@@ -0,0 +1,112 @@
+---
+title: '@page'
+slug: Web/CSS/@page
+tags:
+  - '@page'
+  - At-rule
+  - CSS
+  - Layout
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web
+translation_of: Web/CSS/@page
+---
+<div>{{CSSRef}}</div>
+
+<p>The <strong><code>@page</code></strong> CSS at-rule is used to modify some CSS properties when printing a document.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers notranslate">@page {
+  margin: 1cm;
+}
+
+@page :first {
+  margin: 2cm;
+}</pre>
+
+<h3 id="Descriptors">Descriptors</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/@page/size"><code>size</code></a></dt>
+ <dd>Specifies the target size and orientation of the page box’s containing block. In the general case, where one page box is rendered onto one page sheet, it also indicates the size of the destination page sheet.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/@page/marks"><code>marks</code></a></dt>
+ <dd>Adds crop and/or registration marks to the document.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/@page/bleed"><code>bleed</code></a></dt>
+ <dd>Specifies the extent beyond the page box at which the page rendering is clipped.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>You can't change all CSS properties with <code>@page</code>. You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.</p>
+
+<p>The <code>@page</code> at-rule can be accessed via the CSS object model interface {{domxref("CSSPageRule")}}.</p>
+
+<div class="note"><strong>Note:</strong> The W3C is discussing how to handle viewport-related {{cssxref("&lt;length&gt;")}} units, <code>vh</code>, <code>vw</code>, <code>vmin</code>, and <code>vmax</code>. Meanwhile do not use them within a <code>@page</code> at-rule.</div>
+
+<h2 id="Formal_syntax">Formal syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="page_pseudo-class_examples">@page pseudo-class examples</h3>
+
+<p>Please refer to the various <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-classes</a> of <code>@page</code> for examples.</p>
+
+<ul>
+ <li>{{Cssxref(":blank")}}</li>
+ <li>{{Cssxref(":first")}}</li>
+ <li>{{Cssxref(":left")}}</li>
+ <li>{{Cssxref(":right")}}</li>
+ <li>{{Cssxref(":recto")}} {{experimental_inline}}</li>
+ <li>{{Cssxref(":verso")}} {{experimental_inline}}</li>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties', '#page', ':recto and :verso')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Adds the <code>:recto</code> and <code>:verso</code> page selectors</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>No change from {{SpecName('CSS2.1')}}, though more CSS at-rules can be used inside a <code>@page</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.at-rules.page")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>See the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=286443">[META] CSS Paged Media Module Level 3</a> ticket in Bugzilla for tracking progress on the subject (page-based counters, etc.)</li>
+</ul>
diff --git a/files/uk/web/css/_colon_active/index.html b/files/uk/web/css/_colon_active/index.html
new file mode 100644
index 0000000000..f85ba17940
--- /dev/null
+++ b/files/uk/web/css/_colon_active/index.html
@@ -0,0 +1,129 @@
+---
+title: ':active'
+slug: 'Web/CSS/:active'
+tags:
+  - CSS
+  - Веб
+  - Довідка
+  - Макет
+  - Псевдоклас
+translation_of: 'Web/CSS/:active'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS псевдо-клас</a> <strong><code>:active</code></strong>  відображає елемент (наприклад, кнопку), який в даний момент активовано користувачем. У випадку застосування миші, "активація" зазвичай починається в момент натискання основної клавіші.</p>
+
+<pre class="brush: css no-line-numbers">/* Вибирає будь-який &lt;a&gt;, що активується */
+a:active {
+  color: red;
+}</pre>
+
+<p>Псевдоклас <code>:active</code> частіш за все використовується на елементах {{HTMLElement("a")}} і {{HTMLElement("button")}}. Інші поширені варіанти застосування цього селектору включають елементи, що <em>містять</em> активований елемент, а також елементи форм, які активуються через асоційований із ними  {{HTMLElement("label")}}.</p>
+
+<p>Стилі, задані псевдокласом <code>:active</code> будуть перевизначені будь-яким наступним спорідненим із посиланнями псевдокласом ({{cssxref(":link")}}, {{cssxref(":hover")}}, чи {{cssxref(":visited")}}), що має хоча б таку ж специфічність. Для правильної стилізації посилань помістіть правила <code>:active</code> після всіх інших споріднених із посиланнями правил, як визначено порядком <em>LVHA</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p>
+
+<div class="note"><strong>Зауважте, що:</strong> на системах із багатокнопковими мишами CSS3 вказує, що псевдоклас <code>:active</code> повинен застосовуватись лише для основної кнопки; у випадку правосторонньої миші це зазвичай крайня ліва кнопка.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Активні_посилання">Активні посилання</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Цей абзац містить посилання:
+  &lt;a href="#"&gt;Це посилання буде забарвлено у червоний при натисканні на нього.&lt;/a&gt;
+  Цей абзац отримає сірий фон при натисканні на посилання.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">a:link { color: blue; }          /* Невідвідані посилання */
+a:visited { color: purple; }     /* Відвідані посилання */
+a:hover { background: yellow; }  /* Посилання із наведеним курсором */
+a:active { color: red; }         /* Активні посилання */
+
+p:active { background: #eee; }   /* Активні абзаци */</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Активні_посилання')}}</p>
+
+<h3 id="Активні_елементи_форм">Активні елементи форм</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="my-button"&gt;Моя кнопка: &lt;/label&gt;
+  &lt;button id="my-button" type="button"&gt;Спробуйте натиснути на мене чи на мою мітку!&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">form :active {
+  color: red;
+}
+
+form button {
+  background: white;
+}</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample('Активні_елементи_форм')}}</p>
+
+<h2 id="Специфікації"><span>Специфікації</span></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Примітка</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Без змін.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Без змін.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Без змін.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первинне визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<div>
+<div class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</div>
+
+<p>{{Compat("css.selectors.active")}}</p>
+</div>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>Споріднені з посиланнями псевдокласи: {{cssxref(":link")}}, {{cssxref(":visited")}}, та {{cssxref(":hover")}}</li>
+</ul>
diff --git a/files/uk/web/css/_colon_root/index.html b/files/uk/web/css/_colon_root/index.html
new file mode 100644
index 0000000000..b7b20a01d9
--- /dev/null
+++ b/files/uk/web/css/_colon_root/index.html
@@ -0,0 +1,100 @@
+---
+title: ':root'
+slug: 'Web/CSS/:root'
+tags:
+  - Псевдо-клас
+translation_of: 'Web/CSS/:root'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Опис">Опис</h2>
+
+<p><a href="/en-US/docs/Web/CSS/Pseudo-classes">Псевдо-клас</a> <code>:root</code> вказує на кореневий елемент дерева документа. Якщо застосувати його до HTML, <code>:root</code> відображає {{HTMLElement("html")}} і є ідентичним селектору <code>html</code>, та не зважаючи на це, його <a href="/en-US/docs/Web/CSS/Specificity">вага</a> є більшою.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Приклад">Приклад</h2>
+
+<p>Використання <code>:root</code> може бути корисним при декларуванні глобальних <a href="/en-US/docs/Web/CSS/Using_CSS_variables">змінних CSS</a></p>
+
+<pre class="brush: css">:root {
+  --main-color: hotpink;
+  --pane-padding: 5px 42px;
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Стан</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Селектори', '#root-pseudo', ':root')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Без змін</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Селектори', '#root-pseudo', ':root')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Початкове визначення</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерна_сумісність">Браузерна сумісність</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Підтримка</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базова</td>
+   <td>1</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>9</td>
+   <td>9.5</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Підтримка</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базова</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/uk/web/css/_doublecolon_before/index.html b/files/uk/web/css/_doublecolon_before/index.html
new file mode 100644
index 0000000000..ec3560be1f
--- /dev/null
+++ b/files/uk/web/css/_doublecolon_before/index.html
@@ -0,0 +1,237 @@
+---
+title: '::before (:before)'
+slug: 'Web/CSS/::before'
+tags:
+  - CSS
+  - Web
+  - Псевдо-елемент
+  - Розмытка
+translation_of: 'Web/CSS/::before'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">В CSS, <strong><code>::before</code></strong> створює <a href="/en-US/docs/Web/CSS/Pseudo-elements">псевдо-елемент</a>, що є першим дочірнім елементом вибраного елемента. Це часто використовується для косметичного вмісту елемента з властивістю {{cssxref("content")}}.</span> Він за замовчуванням лінійний</p>
+
+<pre class="brush: css"><code class="language-css"><span class="comment token">/* Додає серце перед посиланнями */</span>
+<span class="selector token">a<span class="pseudo-class token">::before</span> </span><span class="punctuation token">{
+</span>  <span class="property token">content: "</span></code>♥<code class="language-css"><span class="property token">";</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="note">
+<p><strong>Нотатка:</strong> Псевдо-елемент згенерований за допомогою <code>::before</code> і<code>::after</code> <a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">міститься в вікні форматування об'єкта</a>, і таким чином не приймає <em><a href="/en-US/docs/Web/CSS/Replaced_element">замінювані елементи</a> як </em> {{htmlelement("img")}}, або {{htmlelement("br")}} елементи.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<div class="note">
+<p><strong>Нотатка:</strong> CSS3 представляє позначення <code>::before</code> (з двома двокрапками) щоб розрізняти <a href="/en-US/docs/Web/CSS/Pseudo-classes">псевдо-класи</a> і <a href="/en-US/docs/Web/CSS/Pseudo-elements">псевдо-елементи</a>. Браузер також приймає  <code>:before</code>, представлений в CSS2.</p>
+</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Додавання_лапок">Додавання лапок</h3>
+
+<p>Простий приклад використання псевдо-елемента <code>::before</code> додає лапки. Тут ми використовуємо і <code>::before</code> і <code>{{Cssxref("::after")}}</code> замість символів лапок.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html">&lt;q&gt;Деякі цитати,&lt;/q&gt; сказав він, &lt;q&gt; кращі за інші.&lt;/q&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css">q::before {
+  content: "«";
+  color: blue;
+}
+
+q::after {
+  content: "»";
+  color: red;
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Adding_quotation_marks', '500', '50', '')}}</p>
+
+<h3 id="Декоративний_приклад">Декоративний приклад</h3>
+
+<p>Ми можемо стилізувати текст чи зображення у властивості  {{cssxref("content")}} майже як завгодно.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;span class="ribbon"&gt;Зверніть увагу де помаранчевий блок&lt;/span&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::before {
+  content: "Подивіться на цей помаранчевий блок.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample('Decorative_example', 450, 60)}}</p>
+
+<h3 id="Список_завдань">Список завдань</h3>
+
+<p>В цьому прикладі ми створимо простий список завдань, використовуючи псевдо-елемент. Цей метод може часто використовуватись щоб додавати невеликі штрихи до  UI щоб покращити user experience.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Купити молоко&lt;/li&gt;
+  &lt;li&gt;Вигуляти собаку&lt;/li&gt;
+  &lt;li&gt;Вправи&lt;/li&gt;
+  &lt;li&gt;Писати код&lt;/li&gt;
+  &lt;li&gt;Грати музику&lt;/li&gt;
+  &lt;li&gt;Відпочити&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">li {
+  list-style-type: none;
+  position: relative;
+  margin: 2px;
+  padding: 0.5em 0.5em 0.5em 2em;
+  background: lightgrey;
+  font-family: sans-serif;
+}
+
+li.done {
+  background: #CCFF99;
+}
+
+li.done::before {
+  content: '';
+  position: absolute;
+  border-color: #009933;
+  border-style: solid;
+  border-width: 0 0.3em 0.25em 0;
+  height: 1em;
+  top: 1.3em;
+  left: 0.6em;
+  margin-top: -1em;
+  transform: rotate(45deg);
+  width: 0.5em;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var list = document.querySelector('ul');
+list.addEventListener('click', function(ev) {
+  if (ev.target.tagName === 'LI') {
+     ev.target.classList.toggle('done');
+  }
+}, false);
+</pre>
+
+<p>Вище - код живого прикладу. Відмітьте, що ми не використовуємо іконки, а галочкою являється псевдо-елемент <code>::before</code>  які стилізовані за допомогою CSS.</p>
+
+<h4 id="Результат_3">Результат</h4>
+
+<p>{{EmbedLiveSample('To-do_list', 400, 300)}}</p>
+
+<h2 id="Нотатки">Нотатки</h2>
+
+<p>Також виправлення позиціонування в Firefox 3.5 не дозволяють вмісту бути згенерованим як окремий попередній елемент (відповідно до <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content">специфікації CSS</a> "Псевдо-елемент :before і :after впливають на інші блоки так як вони були б справжніми елементами"), Вони можуть використовуватись, щоб впроваджувати незначні поліпшення для  не табличних розміток.  (наприклад, щоб досягти центрування) в випадку  доки вміст, що має центруватись  поміщений в дочірній наступний , колонка до і після контенту може бути представлена без додавання попереднього чи наступного сусіднього блоку (наприклад, це, можливо, найбільш семантично правильніше, додавати допоміжний span як нижче, чим додавати  &lt;div/&gt;  перед і після). (І завжди пам'ятайте додавати ширину до  float об'єкта, інакше він не буде обтікати!)</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;div class="example"&gt;
+&lt;span id="floatme"&gt;"Floated Before" має згенеруватись ліворуч від
+вікна перегляду і не виносити за межі рядка на потік нижче. Аналогічно
+"Floated After" має з'являтись праворуч&lt;/span&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css">#floatme { float: left; width: 50%; }
+
+/* Щоб отримати пусту колонку просто позначте в hex коді
+  нерозривний пробіл: \a0 у якості контенту
+(Використовуйте \0000a0 коли іде після такого символа як пробіл )
+*/
+.example::before {
+  content: "Floated Before";
+  float: left;
+  width: 25%;
+}
+.example::after {
+  content: "Floated After";
+  float: right;
+  width: 25%;
+}
+
+/* For styling */
+.example::before, .example::after {
+  background: yellow;
+  color: red;
+}</pre>
+
+<h4 id="Результат_4">Результат</h4>
+
+<p>{{EmbedLiveSample("Notes")}}</p>
+
+<h2 id="Специфікація">Специфікація</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>No significant changes to the previous specification.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Transitions", "#animatable-properties", "")}}</td>
+   <td>{{Spec2("CSS3 Transitions")}}</td>
+   <td>Allows transitions on properties defined on pseudo-elements.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Animations", "", "")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td>Allows animations on properties defined on pseudo-elements.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Introduces the two-colon syntax.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition, using the one-colon syntax</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_браузерів">Підтримка браузерів</h2>
+
+<div>
+<div class="hidden">Таблиця підтримки на цій сторінці згенерована з структурованих даних будь ласка прогляньте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і надішлінть нам pull request.</div>
+
+<p>{{Compat("css.selectors.before")}}</p>
+</div>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{Cssxref("::after")}}</li>
+ <li>{{Cssxref("content")}}</li>
+</ul>
diff --git a/files/uk/web/css/_doublecolon_slotted/index.html b/files/uk/web/css/_doublecolon_slotted/index.html
new file mode 100644
index 0000000000..56b3e5e86d
--- /dev/null
+++ b/files/uk/web/css/_doublecolon_slotted/index.html
@@ -0,0 +1,104 @@
+---
+title: '::slotted()'
+slug: 'Web/CSS/::slotted'
+translation_of: 'Web/CSS/::slotted'
+---
+<div>{{ CSSRef }}</div>
+
+<p><a href="/en-US/docs/Web/CSS/Pseudo-elements">Псевдо-елемент </a><code><strong>::slotted()</strong></code> являє собою будь-який елемент, поміщений в слот всередині шаблону HTML (додаткову інформацію див. в розділі <a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Використання шаблонів і слотів</a>).</p>
+
+<p>Це працює тільки при використанні всередині CSS, поміщеного в <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">тіньовий DOM</a>. Зверніть увагу, що цей селектор не буде вибирати текстовий вузол, поміщений в слот; він призначений тільки для фактичних елементів.</p>
+
+<pre class="brush: css no-line-numbers">/* Вибір будь-якого елемента, поміщеного в слот */
+::slotted(*) {
+  font-weight: bold;
+}
+
+/* Вибір будь-якого &lt;span&gt; елемента, поміщеного в слот */
+::slotted(span) {
+  font-weight: bold;
+}
+</pre>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Наступні фрагменти коду взяті з демо-версії застосування псевдо-елемента <a href="https://github.com/mdn/web-components-examples/tree/master/slotted-pseudo-element">:slotted</a> (<a href="https://mdn.github.io/web-components-examples/slotted-pseudo-element/">див. демо</a>).</p>
+
+<p>У цьому демо ми використовуємо простий шаблон з трьома слотами:</p>
+
+<pre class="brush: html">&lt;template id="person-template"&gt;
+  &lt;div&gt;
+    &lt;h2&gt;Personal ID Card&lt;/h2&gt;
+    &lt;slot name="person-name"&gt;NAME MISSING&lt;/slot&gt;
+    &lt;ul&gt;
+      &lt;li&gt;&lt;slot name="person-age"&gt;AGE MISSING&lt;/slot&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;slot name="person-occupation"&gt;OCCUPATION MISSING&lt;/slot&gt;&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/div&gt;
+&lt;/template&gt;</pre>
+
+<p>Кастомний веб-компонент— <code>&lt;person-details&gt;</code> —  визначений, як:</p>
+
+<pre class="brush: js">customElements.define('person-details',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      let template = document.getElementById('person-template');
+      let templateContent = template.content;
+
+      const shadowRoot = this.attachShadow({mode: 'open'});
+
+      let style = document.createElement('style');
+      style.textContent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' +
+                           'h2 { margin: 0 0 10px; }' +
+                           'ul { margin: 0; }' +
+                           'p { margin: 10px 0; }' +
+                           '::slotted(*) { color: gray; font-family: sans-serif; } ';
+
+      shadowRoot.appendChild(style);
+      shadowRoot.appendChild(templateContent.cloneNode(true));
+  }
+})</pre>
+
+<p>Ви побачите, що при заповненні елемента <code>стилю</code>  певними значеннями, ми вибираємо всі слотовані елементи  (<code>::slotted(*)</code>) і надаємо їм інший шрифт і колір. Це дозволяє їм краще виділятися поруч зі слотами, які не були успішно заповнені. </p>
+
+<p>Для вибору конкретних елементів, вказуєм необхідний тип елементу замість *.  Для прикладу - селектор, який застосує стилі лише для <code>div</code> елементів, матиме наступний вигляд (<code>::slotted(div)</code>). Більше інформації про стилізацію <code>slot</code> елементів та розробку кастомних веб компонентів, ви можете знайти на <a href="https://github.com/Halochkin/Components/blob/master/Articles/CSS/How%20to%20style%20slot.childNodes%3F.md">моєму github</a>.</p>
+
+<p>При вставці на сторінку елемент виглядає наступним чином:</p>
+
+<p>&lt;person-details&gt; &lt;p slot="person-name"&gt;Dr. Shazaam&lt;/p&gt; &lt;span slot="person-age"&gt;Immortal&lt;/span&gt; &lt;span slot="person-occupation"&gt;Superhero&lt;/span&gt; &lt;/person-details&gt;</p>
+
+<h2 id="Cпецифікації">Cпецифікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS Scope', '#slotted-pseudo', '::slotted') }}</td>
+   <td>{{ Spec2('CSS Scope') }}</td>
+   <td>Початкове визначення</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Сумісність браузерами</h2>
+
+
+
+<p>{{Compat("css.selectors.slotted")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Web_Components">Веб компоненти</a></li>
+</ul>
diff --git a/files/uk/web/css/animation-name/index.html b/files/uk/web/css/animation-name/index.html
new file mode 100644
index 0000000000..1f53e12cf4
--- /dev/null
+++ b/files/uk/web/css/animation-name/index.html
@@ -0,0 +1,141 @@
+---
+title: animation-name
+slug: Web/CSS/animation-name
+translation_of: Web/CSS/animation-name
+---
+<div>{{CSSRef}}</div>
+
+<div><strong><code>Animation-name </code></strong><code>- це</code> властивість <a href="/en-US/docs/CSS" title="CSS">CSS</a>, яка визначає одну або декілька анімацій, які повинні бути застосовані на елементі. Кожне animation-name вказує на {{cssxref("@keyframes")}} правило, яке визначає значення властивостей для анімаційного ряду.</div>
+
+<div> </div>
+
+<pre class="brush:css no-line-numbers">/* Single animation */
+animation-name: none;
+animation-name: test_05;
+animation-name: -specific;
+animation-name: sliding-vertically;
+
+/* Multiple animations */
+animation-name: test1, animation4;
+animation-name: none, -moz-specific, sliding;
+
+/* Global values */
+animation-name: <a href="/en-US/docs/Web/CSS/initial">initial</a>
+animation-name: <a href="/en-US/docs/Web/CSS/inherit">inherit</a>
+animation-name: <a href="/en-US/docs/Web/CSS/unset">unset</a></pre>
+
+<p>Часто, буде зручно користуватися коротким варіантом  {{cssxref("animation")}} для встановлення усіх властивостей анімації за один раз.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Значення, яке вказує на відсутність основних кадрів (keyframes). Може бути використано для деактивації анімації без зміни інших параметрів анімації, or to deactivate animations coming from the cascade.</dd>
+ <dt>{{cssxref("&lt;custom-ident&gt;")}}</dt>
+ <dd>Ім'я анімації. Цей ідентифікатора складається з комбінаціїThis identifier is composed of a combination of літер <code>a<font face="Open Sans, arial, x-locale-body, sans-serif">-</font></code><code>z (без врахування регістру літер)</code>, цифр <code>0-</code><code>9</code>, підкреслення (<code>_</code>), і/або дефісу (<code>-</code>). The first non-dash character must be a letter. Also, two dashes are forbidden at the beginning of the identifier. Furthermore, the identifier can't be <code>none</code>, <code>unset</code>, <code>initial</code>, or <code>inherit</code>.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: When you specify multiple comma-separated values on an <code>animation-*</code> property, they will be assigned to the animations specified in the {{cssxref("animation-name")}} property in different ways depending on how many there are. For more information, see <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">Setting multiple animation property values</a>.</p>
+</div>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p>See <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS/CSS_animations">CSS animations</a> for examples.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation-name', 'animation-name')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatChrome(43.0)}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}<sup>[1]</sup></td>
+   <td>10 </td>
+   <td>12 {{property_prefix("-o")}}<br>
+    12.10</td>
+   <td>4.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a <code>-webkit</code>- prefixed version of the property for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li>
+ <li>JavaScript {{domxref("AnimationEvent")}} API</li>
+</ul>
diff --git a/files/uk/web/css/attr()/index.html b/files/uk/web/css/attr()/index.html
new file mode 100644
index 0000000000..1a484489b4
--- /dev/null
+++ b/files/uk/web/css/attr()/index.html
@@ -0,0 +1,265 @@
+---
+title: attr()
+slug: Web/CSS/attr()
+tags:
+  - CSS
+  - CSS функція
+  - Web
+  - attr
+  - Макет
+translation_of: Web/CSS/attr()
+---
+<div>{{CSSRef}}</div>
+
+<div></div>
+
+<div></div>
+
+<div class="blockIndicator note"><strong>Примітка:</strong> Функція <code>attr()</code> може буті використана з будь-якою властивісттю CSS, але підтримка для властивостей інших ніж {{CSSxRef("content")}} є експериментальною, і підтримка для параметру type-or-unit обмежена.</div>
+
+<div></div>
+
+<p>Функція <strong><code>attr()</code></strong> в <a href="/en-US/docs/Web/CSS">CSS</a> використовується для повернення значення атрибуту вибраного елементу і використання його в таблиці стилів. Вона може бути використана на псевдоелементах, і в цьому випадку повертається значення атрибута для використання в якості тексту псевдоелемента.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Просте застосування */
+attr(data-count);
+attr(title);
+
+/* З параметром type */
+attr(src url);
+attr(data-count number);
+attr(data-width px);
+
+/* З параметром  fallback */
+attr(data-count number, 0);
+attr(src url, "");
+attr(data-width px, inherit);
+attr(data-something, "default");
+
+</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Значення">Значення</h3>
+
+<dl>
+ <dt><code>attribute-name</code></dt>
+ <dd>Це ім'я атрибута елемента HTML, на який функція посилається у CSS.</dd>
+ <dt><code style="white-space: nowrap;">&lt;type-or-unit&gt;</code> {{Experimental_Inline}}</dt>
+ <dd>Це ключове слово, що представляє або тип значення атрибута, або його одиницю, оскільки в HTML деякі атрибути мають неявні одиниці. Якщо використання &lt;type-or-unit&gt; як значення для даного атрибуту недійсне, вираз з attr() також буде недійсним. Якщо пропущено, за замовчуванням використовується string. Список дійсних значень:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Ключове слово</th>
+    <th scope="col">Асоційований тип</th>
+    <th scope="col">Коментар</th>
+    <th scope="col">Значення за замовчуванням</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>string</code></td>
+    <td style="white-space: nowrap;">{{CSSxRef("&lt;string&gt;")}}</td>
+    <td>Значення атрибута трактується як CSS {{CSSxRef("&lt;string&gt;")}}. Воно НЕ буде оброблюватися, і зокрема символи будуть використані як-є замість того, щоб маскування CSS перетворювалися на інші символи.</td>
+    <td>Пустий рядок.</td>
+   </tr>
+   <tr>
+    <td><code>color</code> {{Experimental_Inline}}</td>
+    <td style="white-space: nowrap;">{{CSSxRef("&lt;color&gt;")}}</td>
+    <td>Значення атрибуту аналізується як хеш (3- або 6-значні хеші) або як ключове слово. Повінне бути дійсним значенням CSS {{CSSxRef("&lt;string&gt;")}}.<br>
+     Провідні і кінцеві прогалини будуть прибрані.</td>
+    <td><code>currentColor</code></td>
+   </tr>
+   <tr>
+    <td><code>url</code> {{Experimental_Inline}}</td>
+    <td style="white-space: nowrap;">{{CSSxRef("&lt;url&gt;")}}</td>
+    <td>Значення атрибута аналізується як CSS рядок що використовується всередині CSS функції <code>url()</code>.<br>
+     Відносна URL-адреса вирішується відносно оригінального документа, а не щодо таблиці стилів.<br>
+     Провідні і кінцеві прогалини будуть прибрані.</td>
+    <td>The url <code>about:invalid</code> that points to a non-existent document with a generic error condition.</td>
+   </tr>
+   <tr>
+    <td><code>integer</code> {{Experimental_Inline}}</td>
+    <td style="white-space: nowrap;">{{CSSxRef("&lt;integer&gt;")}}</td>
+    <td>Значення атрибута аналізується як CSS {{CSSxRef("&lt;integer&gt;")}}. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br>
+     Провідні і кінцеві прогалини будуть прибрані.</td>
+    <td><code>0</code>, або, якщо <code>0</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td>
+   </tr>
+   <tr>
+    <td><code>number</code> {{Experimental_Inline}}</td>
+    <td style="white-space: nowrap;">{{CSSxRef("&lt;number&gt;")}}</td>
+    <td>Значення атрибута аналізується як CSS {{CSSxRef("&lt;number&gt;")}}. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br>
+     Провідні і кінцеві прогалини будуть прибрані.</td>
+    <td><code>0</code>, або, якщо <code>0</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td>
+   </tr>
+   <tr>
+    <td><code>length</code> {{Experimental_Inline}}</td>
+    <td style="white-space: nowrap;">{{CSSxRef("&lt;length&gt;")}}</td>
+    <td>Значення атрибута аналізується як CSS {{CSSxRef("&lt;length&gt;")}} вимір, що вміщує одиниці виміру (наприклад, <code>12.5em</code>). Якщо воно не є дійсним значенням, тобто не є довжиною або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br>
+     Якщо дана одиниця виміру є відносною довжиною, attr () обчислює її до абсолютної довжини<br>
+     Провідні і кінцеві прогалини будуть прибрані.</td>
+    <td><code>0</code>, або, якщо <code>0</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td>
+   </tr>
+   <tr>
+    <td><code>em</code>, <code>ex</code>, <code>px</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, <code>mm</code>, <code>cm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code> {{Experimental_Inline}}</td>
+    <td style="white-space: nowrap;">{{CSSxRef("&lt;length&gt;")}}</td>
+    <td>Значення атрибута аналізується як CSS {{CSSxRef("&lt;number&gt;")}}, що не містить одиниць виміру (e.g. <code>12.5</code>), і трактується як {{CSSxRef("&lt;length&gt;")}} з вказаними одиницями виміру. Якщо воно не є дійсним значенням, тобто не є довжиною або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br>
+     Якщо дана одиниця виміру є відносною довжиною, attr () обчислює її до абсолютної довжини<br>
+     Провідні і кінцеві прогалини будуть прибрані.</td>
+    <td><code>0</code>, або, якщо <code>0</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td>
+   </tr>
+   <tr>
+    <td><code>angle</code> {{Experimental_Inline}}</td>
+    <td style="white-space: nowrap;">{{CSSxRef("&lt;angle&gt;")}}</td>
+    <td>Значення атрибута аналізується як CSS {{CSSxRef("&lt;angle&gt;")}} вимір, із зазначеними одиницями віміру (наприклад, <code>30.5deg</code>). Якщо воно не є дійсним значенням, тобто не є мірою кута або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br>
+     Провідні і кінцеві прогалини будуть прибрані.</td>
+    <td><code>0deg</code>, або, якщо <code>0deg</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td>
+   </tr>
+   <tr>
+    <td><code>deg</code>, <code>grad</code>, <code>rad</code> {{Experimental_Inline}}</td>
+    <td style="white-space: nowrap;">{{CSSxRef("&lt;angle&gt;")}}</td>
+    <td>Значення атрибута аналізується як CSS {{CSSxRef("&lt;number&gt;")}}, тобто без одиниць виміру (наприклад, <code>12.5</code>), і трактується як  {{CSSxRef("&lt;angle&gt;")}} із зазначеними одиницями віміру. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br>
+     Провідні і кінцеві прогалини будуть прибрані.</td>
+    <td><code>0deg</code>, або, якщо <code>0deg</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td>
+   </tr>
+   <tr>
+    <td><code>time</code> {{Experimental_Inline}}</td>
+    <td style="white-space: nowrap;">{{CSSxRef("&lt;time&gt;")}}</td>
+    <td>Значення атрибута аналізується як CSS {{CSSxRef("&lt;time&gt;")}} вимір, із зазначеними одиницями віміру (наприклад, <code>30.5ms</code>). Якщо воно не є дійсним значенням, тобто не є значенням часу або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br>
+     Провідні і кінцеві прогалини будуть прибрані.</td>
+    <td><code>0s</code>, або, якщо <code>0s</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td>
+   </tr>
+   <tr>
+    <td><code>s</code>, <code>ms</code> {{Experimental_Inline}}</td>
+    <td style="white-space: nowrap;">{{CSSxRef("&lt;time&gt;")}}</td>
+    <td>Значення атрибута аналізується як CSS {{CSSxRef("&lt;number&gt;")}}, що не містить одиниць виміру (наприклад, <code>12.5</code>), і трактується як {{CSSxRef("&lt;time&gt;")}} із зазначеними одиницями віміру. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br>
+     Провідні і кінцеві прогалини будуть прибрані..</td>
+    <td><code>0s</code>, або, якщо <code>0s</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td>
+   </tr>
+   <tr>
+    <td><code>frequency</code> {{Experimental_Inline}}</td>
+    <td style="white-space: nowrap;">{{CSSxRef("&lt;frequency&gt;")}}</td>
+    <td>Значення атрибута аналізується як CSS {{CSSxRef("&lt;frequency&gt;")}} вимір, із зазначеними одиницями віміру (наприклад, <code>30.5kHz</code>). Якщо воно не є дійсним значенням, тобто не є частотою або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.</td>
+    <td><code>0Hz</code>, або, якщо <code>0Hz</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td>
+   </tr>
+   <tr>
+    <td><code>Hz</code>, <code>kHz</code> {{Experimental_Inline}}</td>
+    <td style="white-space: nowrap;">{{CSSxRef("&lt;frequency&gt;")}}</td>
+    <td>Значення атрибута аналізується як CSS {{CSSxRef("&lt;number&gt;")}}, тобто без одиниць виміру (наприклад, <code>12.5</code>), і трактується як {{CSSxRef("&lt;frequency&gt;")}} із зазначеними одиницями віміру. Якщо воно не є дійсним значенням, тобто не є частотою або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br>
+     Провідні і кінцеві прогалини будуть прибрані.</td>
+    <td><code>0Hz</code>, або, якщо <code>0Hz</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td>
+   </tr>
+   <tr>
+    <td><code>%</code> {{Experimental_Inline}}</td>
+    <td style="white-space: nowrap;">{{CSSxRef("&lt;percentage&gt;")}}</td>
+    <td>Значення атрибута аналізується як CSS {{CSSxRef ("&lt;number&gt;")}}, тобто без одиниць виміру (наприклад, 12.5), і інтерпретується як {{CSSxRef ("&lt;percentage&gt;")}}. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br>
+     Якщо дане значення використовується як довжина, attr () обчислює його до абсолютної довжини.<br>
+     Провідні і кінцеві прогалини будуть прибрані.</td>
+    <td><code>0%</code>, або, якщо <code>0%</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>&lt;fallback&gt;</code> {{Experimental_Inline}}</dt>
+ <dd>Значення, яке буде використовуватися, якщо пов'язаний атрибут відсутній або містить неприпустиме значення. Резервне значення має бути допустимим, якщо вказано attr(), навіть якщо воно не використовується, і не повинно містити іншого виразу attr(). Якщо attr() не є єдиним значенням компонента властивості, його значення &lt;fallback&gt; повинно мати тип, визначений &lt;type-or-unit&gt;. Якщо не встановлено, CSS буде використовувати значення за замовчуванням, визначений для кожного &lt;type-or-unit&gt;.</dd>
+</dl>
+
+<h3 id="Формальний_синтаксис">Формальний синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Властивість_content">Властивість content</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p data-foo="hello"&gt;world&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css highlight[2] notranslate">[data-foo]::before {
+  content: attr(data-foo) " ";
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample("content_property", "100%", 50)}}</p>
+
+<h3 id="&lt;color>_значення">&lt;color&gt; значення</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<div id="color-value">
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="background" data-background="lime"&gt;background expect to be red if your browser does not support adavanced usage of attr()&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css notranslate">.background {
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css highlight[6] notranslate">.background {
+  background-color: red;
+}
+
+.background[data-background] {
+  background-color: attr(data-background color, red);
+}</pre>
+</div>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample("color-value", "100%", 50)}}</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Values", "#attr-notation", "attr()")}}</td>
+   <td>{{Spec2("CSS4 Values")}}</td>
+   <td>Без змін.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Values", "#attr-notation", "attr()")}}</td>
+   <td>{{Spec2("CSS3 Values")}}</td>
+   <td>
+    <p>Додано два не обов'язкові параметри;<br>
+     може використовуватися зі всіма властивостями;<br>
+     може повертати інші значення, крім {{CSSxRef("&lt;string&gt;")}}.</p>
+    Ці зміни експериментальні і можуть бути скасовані під час фази CR, якщо підтримка браузерів занадто мала.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "generate.html#x18", "attr()")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Обмежено властивісттю {{CSSxRef("content")}};<br>
+    завжди повертає {{CSSxRef("&lt;string&gt;")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_браузерів">Сумісність браузерів</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці формується із структурованих даних. Якщо Ви хочете зробити свій внесок у дані перегляньте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> та надішліть нам запит на отримання.</div>
+
+<p>{{Compat("css.types.attr")}}</p>
+
+<h2 id="Також_перегляньте">Також перегляньте</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Global_attributes/data-*">HTML <code>data-*</code> attributes</a></li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute/data-*">SVG <code>data-*</code> attributes</a></li>
+</ul>
diff --git a/files/uk/web/css/backdrop-filter/index.html b/files/uk/web/css/backdrop-filter/index.html
new file mode 100644
index 0000000000..ca4da47ee3
--- /dev/null
+++ b/files/uk/web/css/backdrop-filter/index.html
@@ -0,0 +1,136 @@
+---
+title: backdrop-filter
+slug: Web/CSS/backdrop-filter
+translation_of: Web/CSS/backdrop-filter
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Властивість backdrop-filter дозволяє застосувати графічні ефекти, такі як розмиття або зміщення кольорів до області позаду елемента. Оскільки це стосується всього, що стоїть поза елементом, щоб побачити ефект, ви повинні зробити елемент або його фон принаймні частково прозорим.</p>
+
+<pre class="brush: css no-line-numbers">/* Значення ключового слова */
+backdrop-filter: none;
+
+/* URL до SVG фільтру */
+backdrop-filter: url(commonfilters.svg#filter);
+
+/* Значення фільтру функцій */
+backdrop-filter: blur(2px);
+backdrop-filter: brightness(60%);
+backdrop-filter: contrast(40%);
+backdrop-filter: drop-shadow(4px 4px 10px blue);
+backdrop-filter: grayscale(30%);
+backdrop-filter: hue-rotate(120deg);
+backdrop-filter: invert(70%);
+backdrop-filter: opacity(20%);
+backdrop-filter: sepia(90%);
+backdrop-filter: saturate(80%);
+
+/* Кілька фільтрів */
+backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
+
+/* Глобальні значення */
+backdrop-filter: inherit;
+backdrop-filter: initial;
+backdrop-filter: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Значення">Значення</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Фільтр відключений для фону</dd>
+ <dt><code>&lt;filter-function-list&gt;</code></dt>
+ <dd>Перелік фільтрів, розділених пробілами які застосовані для фону. Список фільтрів такий же як і для властивості <a href="/en-US/docs/Web/SVG/Element/filter">filter</a>.</dd>
+</dl>
+
+<h3 id="Формальний_синтаксис">Формальний синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Приклад">Приклад</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.box {
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 5px;
+  font-family: sans-serif;
+  text-align: center;
+  line-height: 1;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  max-width: 50%;
+  max-height: 50%;
+  padding: 20px 40px;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  background-image: url('https://lorempixel.com/400/200/');
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;div class="box"&gt;
+    &lt;p&gt;backdrop-filter: blur(10px)&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Example", 600, 400)}}</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікаця</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}</td>
+   <td>{{Spec2('Filters 2.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.backdrop-filter")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{cssxref("filter")}}</li>
+ <li><a href="http://www.domneill.com/blog/posts/2015/07/28/my-favourite-new-features-in-webkit-and-safari/">Blog post by Dom Neill with examples</a></li>
+ <li><a href="http://product.voxmedia.com/til/2015/2/17/8053347/css-ios-transparency-with-webkit-backdrop-filter">Building iOS-like transparency effects in CSS with backdrop-filter</a></li>
+</ul>
diff --git a/files/uk/web/css/css_animations/index.html b/files/uk/web/css/css_animations/index.html
new file mode 100644
index 0000000000..9b1af6c15e
--- /dev/null
+++ b/files/uk/web/css/css_animations/index.html
@@ -0,0 +1,140 @@
+---
+title: CSS Animations
+slug: Web/CSS/CSS_Animations
+tags:
+  - CSS
+  - CSS анімації
+  - Довідка
+  - Огляд
+translation_of: Web/CSS/CSS_Animations
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS-анімації</strong> - це модуль CSS, який дозволяє вам змінювати значення CSS-правил впродовж певного часу, використовуючи ключові кадри (keyframes). Поведінка цих анімацій може контролюватися шляхом встановлення їх функцій синхронізації, тривалості, числа повторів, та інших атрибутів.</p>
+
+<h2 id="Довідка">Довідка</h2>
+
+<h3 id="CSS_Властивості">CSS Властивості</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("animation")}}</li>
+ <li>{{cssxref("animation-delay")}}</li>
+ <li>{{cssxref("animation-direction")}}</li>
+ <li>{{cssxref("animation-duration")}}</li>
+ <li>{{cssxref("animation-fill-mode")}}</li>
+ <li>{{cssxref("animation-iteration-count")}}</li>
+ <li>{{cssxref("animation-name")}}</li>
+ <li>{{cssxref("animation-play-state")}}</li>
+ <li>{{cssxref("animation-timing-function")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_-правила">CSS @-правила</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@keyframes")}}</li>
+</ul>
+</div>
+
+<h2 id="Посібники">Посібники</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support">Виявлення підтримки CSS-анімації</a></dt>
+ <dd>Описує техніку виявлення підтримки браузером CSS-анімації.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Використання CSS анімацій</a></dt>
+ <dd>Покроковий підручник про те, як створити анімацію засобами CSS. Дана стаття описує кожне відповідне CSS властивість і at-правило, та пояснює, як вони взаємодіють між собою.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Tips">Підказки і хитрощі для CSS анімацій</a></dt>
+ <dd>Підказки і хитрощі, які допоможуть вам досягти якнайкращих результатів у CSS-анімаціях. В даний момент описує техніку, що дозволяє програти спочатку уже запущену анімацію (API не підтримує напряму такий функціонал).</dd>
+</dl>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Властивість</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базова підтримка</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    43.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>12{{property_prefix("-o")}}<br>
+    12.10<sup>[2]</sup></td>
+   <td>4.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Властивість</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1 {{property_prefix("-webkit")}} [1]<br>
+    4.0 {{property_prefix("-webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Часткова підтримка: властивість {{cssxref("animation-fill-mode")}} не підтримується в Android браузері до версії 2.3.</p>
+
+<p>[2] Ознайомтесь із <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">release notes to Opera 12.50</a>.</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>Подібно до CSS-анімацій, <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a> можуть запускати анімації на підставі дій користувача.</li>
+</ul>
+
+<p> </p>
diff --git a/files/uk/web/css/css_animations/використання_css_анімацій/index.html b/files/uk/web/css/css_animations/використання_css_анімацій/index.html
new file mode 100644
index 0000000000..f8b8466ef4
--- /dev/null
+++ b/files/uk/web/css/css_animations/використання_css_анімацій/index.html
@@ -0,0 +1,357 @@
+---
+title: Використання CSS анімацій
+slug: Web/CSS/CSS_Animations/Використання_CSS_анімацій
+tags:
+  - CSS Animations
+  - Довідка
+translation_of: Web/CSS/CSS_Animations/Using_CSS_animations
+---
+<p>{{SeeCompatTable}}{{CSSRef}}</p>
+
+<p><span class="seoSummary"><strong>CSS анімації</strong> роблять можливим анімацію переходів (<em>transitions</em>) з однєї конфігурації CSS стилю до іншої.</span> Анімації складаються з двох компонентів, а власне - стилю, котрий описує CSS анімацію та набір ключових кадрів (<em>keyframes</em>), які задають початковий та кінцевий стан стилю анімації, а також є можливим задання точок проміжного стану.</p>
+
+<p>В CSS анімацій є три ключові переваги перед традиційними скриптовими техніками анімації:</p>
+
+<ol>
+ <li>Вони легкі у використанні для простих анімацій; ви можете створити їх навіть без знань JavaScript.</li>
+ <li>Анімації добре функціонують, навіть при помірному навантаженні на систему. Прості анімації на JavaScript можуть працювати не дуже добре (в разі, якщо вони не ідеально зроблені). Движок рендера може використовувати техніку пропуску кадрів та інші засоби для підтримки гладкої анімації.</li>
+ <li>Надаючи таким чином браузеру контроль над послідовністю анімації ви надаєте можливість брауцзеру оптимізувати свою роботу та ефективність, наприклад, завдяки зупинці анімації у вкладках, які не є відкриті для перегляду.</li>
+</ol>
+
+<h2 id="Конфігурування_анімації">Конфігурування анімації</h2>
+
+<p>Щоб створити CSS-анімаційну послідвність, ви стилізуєте анімований елемент {{ cssxref("animation") }} властивістю чи її підвластивостями. Це дозвоялє вам коригувати таймінг, тривалість та інші деталі анімації згідно з вашими потребами. Це <strong>не</strong> конфігурує актуальний вигляд анімації, яка здійснюється проходом через {{ cssxref("@keyframes") }} at-правила, як це описано в {{ anch("Визначення послідовності анімації через ключові кадри") }} нижче.</p>
+
+<p>Підвластивостями властивості {{ cssxref("animation") }} є:</p>
+
+<dl>
+ <dt>{{ cssxref("animation-delay") }}</dt>
+ <dd>Змінює час затримки між часом з моменту завантаження елемента та початком анімаційної послідовності.</dd>
+ <dt>{{ cssxref("animation-direction") }}</dt>
+ <dd>Визначає зміну напрямку анімації та його чергування в залежності від кількості проходів анімації, а також може задавати повернення в початковий стан і починати прохід заново.</dd>
+ <dt>{{ cssxref("animation-duration") }}</dt>
+ <dd>Визначає тривалість циклу анімації.</dd>
+ <dt>{{ cssxref("animation-iteration-count") }}</dt>
+ <dd>Визначає кількість проходів (повторів) анімації; ви можете також обрати значення <strong><em><code>infinite</code></em></strong> для нескінченного повтору анімації.</dd>
+ <dt>{{ cssxref("animation-name") }}</dt>
+ <dd>Задає ім'я для анімації {{ cssxref("@keyframes") }} через at-правило, яке описує анімаційні ключові кадри.</dd>
+ <dt>{{ cssxref("animation-play-state") }}</dt>
+ <dd>Дозволяє вам призупиняти та відновлювати анімацію.</dd>
+ <dt>{{ cssxref("animation-timing-function") }}</dt>
+ <dd>Задає конфігурацію таймінгу анімації; інакше кажучи, як саме буде анімація робити прохід через ключові кадри, це можливо завдяки кривим прискорення.</dd>
+ <dt>{{ cssxref("animation-fill-mode") }}</dt>
+ <dd>Визначає, які значення будуть застосовані для анімації перед початком та після її закінчення.</dd>
+</dl>
+
+<h2 id="Визначення_послідовності_анімації_через_ключові_кадри">Визначення послідовності анімації через ключові кадри</h2>
+
+<p>Опісля того, як ви задали анімації таймінг, вам потрібно задати вигляд анімації. Це робиться завдяки одному чи більше  ключовому кадру шляхом застосування at-правила {{ cssxref("@keyframes") }}. Кожен ключовий кадр описує, як саме повинен відображатися анімований елемент у певний момент під час проходження анімаційної послідовності.</p>
+
+<p>Після того, як таймінг анімації був заданий в CSS стилі, який конгфігурує анімацію, ключові кадри використовують {{ cssxref("percentage") }} для відображення моменту під час анімації, в якому буде розміщений той чи інший ключовий кадр. 0% вказує на сам початок анімаціїйної послідовності, тоді як 100% вказує на завершальний етап анімації. Оскільки ці два моменти є такими важливими, вони мають свої спеціальні імена: <em><strong><code>from</code></strong></em> і <em><strong><code>to</code></strong></em><code> відповідно</code>. Обидва ці імені є необов'язковими. Якщо <em><strong><code>from</code></strong></em>/<code>0%</code> чи <em><strong><code>to</code></strong></em>/<code>100%</code> не є задано, то браузер починає чи зупиняє анімацію використовуючи середньообраховані значення всіх атрибутів.</p>
+
+<p>Ви також можете на свій розсуд додавати проміжні кадри до анімації, аби описати стан анімації в проміжні періоди.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<div class="note"><strong>Примітка:</strong> Подані приклади не використовують вендорних префіксів. WebKit-браузери та старіші версії інших браузерів можуть потребувати цих префіксів; приклади, на які ви можете клацнути для перегляду у вашому браузері також включають <code>-webkit</code>-префіксовані версії.</div>
+
+<h3 id="Текст_що_ковзає_у_вікні_браузера">Текст, що ковзає у вікні браузера</h3>
+
+<p>Цей простий приклад стилізує елемент {{ HTMLElement("p") }} так, що текст "зісковзує" в вікно браузера з-поза його правого краю.</p>
+
+<p>Майте на увазі, що такі анімації можуть робити сторінку ширшою, аніж вікно браузера. Аби уникнути такої проблеми, потрібно помістити анімований елемент в контейнер і встановити для останнього {{cssxref("overflow")}}<code>:hidden</code>.</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<p>В цьому прикладі стиль для {{ HTMLElement("p") }}-елемента визначає, що тривалість анімації становить 3 секунди від початку до кінця, використовуючи властивість {{ cssxref("animation-duration") }}, а також присвоює ім'я цій анімації, яке використано у ключових кадрах {{ cssxref("@keyframes") }} . Їхні at-правила визначили, що це ключові кадри для анімації, яка називається “slidein”.</p>
+
+<p>Якщо нам потрібно ще якусь додаткову стилізацію елемента {{ HTMLElement("p") }} для відобаження в браузерах, які не підтримують CSS анімацій, то ми б її включили туди ж; однак, в цьому випадку ми не потребуємо додаткової стилізації, крім анімації елемента.</p>
+
+<p>Ключові кадри визначені через  at-правила {{ cssxref("@keyframes") }}. В даному випадку є лише два ключових кадри. Перший ключовий кадр наступає в 0% (вжито спеціальне ім'я <em><strong><code>from</code></strong></em>). Тут, ми змінюємо лівий маргін елемента як 100% (тобто це відраховується, як відстань від правого краю контейнера), і встановили 300% ширини для елемента (Втричі ширше за контейнер). Завдяки цьому на першому ключовому кадрі анімований елемент буде знаходитися поза межами контейнера (вікна браузера).</p>
+
+<p>Другий ключовий кадр (він же завершальний) розміщений на завершенні анімації, 100% (спеціальне ім'я <strong><em><code>to</code></em></strong>). Лівий маргін встановлено як 0% і ширину елемента ми встановили як 100%. Це спричиняє "приклеювання" елемента до лівого краю вікна браузера.</p>
+
+<pre class="brush: html">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>(Перезавантажте сторінку, аби побачити анімацію, або ж клікніть на кнопку CodePen, щоб побачити анімацію в середовищі CodePen)</p>
+
+<p>{{EmbedLiveSample("Making_text_slide_across_the_browser_window","100%","250")}}</p>
+
+<h3 id="Додавання_інших_ключових_кадрів">Додавання інших ключових кадрів</h3>
+
+<p>Давайте додамо ще один ключовий кадр до анімації з попереднього прикладу. Припустимо, нам потрібно трішки збільшити шрифт, коли текст рухається вліво, а потім ми його повертаємо до попередніх параметрів. Це просто, як додавання ось такого ключового кадру:</p>
+
+<pre class="brush: css">75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+</pre>
+
+<pre class="brush: css hidden">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  75% {
+    font-size: 300%;
+    margin-left: 25%;
+    width: 150%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html hidden">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>Це повідомляє браузеру, що елемент, при виконанні 75% анімації, повинен мати лівий маргін 25% і ширину 150%.</p>
+
+<p>(Перезавантажте сторінку, аби побачити анімацію, або ж клікніть на конпку CodePen, щоб побачити анімацію в середовищі CodePen)</p>
+
+<p>{{EmbedLiveSample("Adding_another_keyframe","100%","250")}}</p>
+
+<h3 id="Making_it_repeat">Making it repeat</h3>
+
+<p>Якщо вам потрібно, аби анімація повторювалась, просто використайте властивість  {{ cssxref("animation-iteration-count") }} , щоб зазначити, скільки разів повинна повторитися анімація. В даному випадку давайте використаємо значення <em><strong><code>infinite</code></strong></em> для отримання постійної анімації:</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+</pre>
+
+<pre class="brush: css hidden">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html hidden">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Making_it_repeat","100%","250")}}</p>
+
+<h3 id="Змінюємо_напрямки_анімації">Змінюємо напрямки анімації</h3>
+
+<p>Отже, анімація повторювана, але це виглядає дивно: текст по завершенню циклу, з початком нового знову стрибає вбік. Отже нам треба зробити, аби текст плавно повертався назад, на початкову позицію. Це просто: прописуємо у {{ cssxref("animation-direction") }} значення <em><strong><code>alternate</code></strong></em>:</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+</pre>
+
+<pre class="brush: css hidden">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html hidden">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Making_it_move_back_and_forth","100%","250")}}</p>
+
+<h3 id="Використання_скорочень_для_правил_анімації">Використання скорочень для правил анімації</h3>
+
+<p>{{ cssxref("animation") }} скорочення є вигідним для економії місця. От, для прикладу, правила анімації, які ми вже використали в статті:</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+</pre>
+
+<p>Їх можна замінити ось таким чином</p>
+
+<pre>p {
+  animation: 3s infinite alternate slideIn;
+}</pre>
+
+<div class="note">
+<p><strong>Примітка</strong>: Ви можете дізнатися про це більше на сторінці довідки {{ cssxref("animation") }} :</p>
+</div>
+
+<h3 id="Задання_множинних_значень_властивостей_анімації">Задання множинних значень властивостей анімації</h3>
+
+<p>Нескорочені значення CSS анімації можуть приймати множинні значення, розділені комами — таку особливість можна використати, якщо вам потрібно задати множинні анімації єдиним набором правил і відповідно задати різні тривалості, повтори і так далі для різних анімацій. Давайте глянемо на кілька швидких прикладів, аби пояснити різні зміни:</p>
+
+<p>В першому прикладі у нас є набір з трьох різних імен анімації, але одна й та ж тривалість і кількість повторів:</p>
+
+<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 3s;
+animation-iteration-count: 1;</pre>
+
+<p>В другому прикладі в нас є набір з 3х значень для кожної властивості. В цьому випадку кожна анімація буде здійснюватися з відповідними значеннями, згідно з їх розміщенням у властивостях, то ж, приміром, <code>fadeInOut</code> має тривалість в 2.5s і кількість повторів 2,  і т.д..</p>
+
+<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s, 1s;
+animation-iteration-count: 2, 1, 5;</pre>
+
+<p>У цьому третьому випадку є три різні анімації, але лише дві різні тривалості та кількості повторів. У таких випадках наборів значень недостатньо, то ж кожна анімація отримає свій набір значень шляхом перебору від початку до кінця. Наприклад, fadeInOut отримає тривалість в 2.5s і moveLeft300px матиме тривалість 5s. Набори значень на цьому закінчились, тому все починається з початку і третя анімація bounce отримає тривалість знову в 2.5s. Кількість повторів (та й будь-які інші значення властивостей, які ви задасте) будуть присвоєні такими самим чином.</p>
+
+<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s;
+animation-iteration-count: 2, 1;</pre>
+
+<h3 id="Використання_подій_анімації">Використання подій анімації</h3>
+
+<p>Ви можете отримати додатковий контроль над анімаціями, як і корисну інформацію про них шляхом використання подій анімації. Ці події, представлені об'єктом {{ domxref("AnimationEvent") }}, можуть бути використані, аби визначити, коли починаються, закінчуються і починають новий повтор різні анімації. Кожна подія містить час, о котрій вона сталась та ім'я анімації, яка її запустила.</p>
+
+<p>Зараз ми змінимо приклад з ковзаючим текстом, аби вивести певну інформацію про кожну анімаційну подію, тобто її час, то ж ми можемо розібратися, як вони працюють.</p>
+
+<h4 id="Додавання_CSS">Додавання CSS</h4>
+
+<p>Починаємо зі створення CSS для анімації. Дана анімація триватиме 3 секунди, назвемо її “slidein”, задамо повтор 3 рази, і напрям анімації <em><strong>alternate</strong></em> кожного разу. В {{ cssxref("@keyframes") }}, ширина і лівий маргін змінюються, щоб текст ковзав по екрану.</p>
+
+<pre class="brush: css">.slidein {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: 3;
+  animation-direction: alternate;
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+    margin-left:0%;
+    width:100%;
+  }
+}</pre>
+
+<h4 id="Встановлення_animation_event_listeners_-_прослуховування_подій_анімації">Встановлення animation event listeners - прослуховування подій анімації</h4>
+
+<p>Ми використаємо код JavaScript для прослуховування всіх трьох можливих подій анімації. Даний код задає наші <strong>event listeners</strong>; ми викликаємо його, коли документ вперше завантажений, для того, щоб отримати впорядковані дані.</p>
+
+<pre class="brush: js">var e = document.getElementById("watchme");
+e.addEventListener("animationstart", listener, false);
+e.addEventListener("animationend", listener, false);
+e.addEventListener("animationiteration", listener, false);
+
+e.className = "slidein";
+</pre>
+
+<p>Це цілком звичайний код, аби дізнатися більше, ви можете звіритися з документацією {{ domxref("eventTarget.addEventListener()") }}. Останнє, що робить код - він задає клас анімованого елемента як “slidein”; це нам потрібно для запуску анімації.</p>
+
+<p>Чому? Тому що подія <strong><code>animationstart</code></strong> запускається одразу ж, як стартує анімація; в даному випадку це стається до того, як починає діяти наш код. То ж ми починаємо анімацію самі, задаючи клас елементу для стиля, котрий буде анімований по факту.</p>
+
+<h4 id="Отримання_подій">Отримання подій</h4>
+
+<p>Події надсилаються до функції <em><code>listener()</code></em>, як це показано нижче.</p>
+
+<pre class="brush: js">function listener(e) {
+  var l = document.createElement("li");
+  switch(e.type) {
+    case "animationstart":
+      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "New loop started at time " + e.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+</pre>
+
+<p>Даний код також дуже простий. Він просто дивиться в {{ domxref("event.type") }}, аби визначити, який власне тип події анімації трапився, тоді додає відповідну примітку в {{ HTMLElement("ul") }} (невпорядкований список), який ми використовуємо для виводу звіту про ці події.</p>
+
+<p>Звіт після завершення роботи буде виглядати якось от так:</p>
+
+<ul>
+ <li>Started: elapsed time is 0</li>
+ <li>New loop started at time 3.01200008392334</li>
+ <li>New loop started at time 6.00600004196167</li>
+ <li>Ended: elapsed time is 9.234000205993652</li>
+</ul>
+
+<p>Зауважте, що часи подій досить точні щодо тих, які ми очікували відповідно до таймінгу, який ми задали, коли створювали анімацію. Візьміть до уваги також і те, що після завершального проходу анімації подія <strong><code>animationiteration</code></strong> не була надіслана; натомість надіслало подію <strong><code>animationend</code></strong>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<p>Чисто для повної завершеності огляду ось код, який відображає контент сторіки, включно зі списком звіту про події анімації, який створився завдяки вищеописаному скрипту:</p>
+
+<pre class="brush: html">&lt;h1 id="watchme"&gt;Watch me move&lt;/h1&gt;
+&lt;p&gt;
+  This example shows how to use CSS animations to make &lt;code&gt;H1&lt;/code&gt;
+  elements move across the page.
+&lt;/p&gt;
+&lt;p&gt;
+  In addition, we output some text each time an animation event fires,
+  so you can see them in action.
+&lt;/p&gt;
+&lt;ul id="output"&gt;
+&lt;/ul&gt;
+&lt;/body&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Using_animation_events', '600', '300')}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
+ <li><a href="/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support" title="en/CSS/CSS animations/Detecting CSS animation support">Визначення підтримки CSS анімації</a></li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Використання CSS transitions</a></li>
+</ul>
diff --git a/files/uk/web/css/css_box_model/згортання_відступів/index.html b/files/uk/web/css/css_box_model/згортання_відступів/index.html
new file mode 100644
index 0000000000..b47325c5bf
--- /dev/null
+++ b/files/uk/web/css/css_box_model/згортання_відступів/index.html
@@ -0,0 +1,90 @@
+---
+title: Згортання відступів
+slug: Web/CSS/CSS_Box_Model/Згортання_відступів
+tags:
+  - CSS
+  - Коробчаста модель CSS
+  - Посібник
+translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+---
+<div dir="ltr">{{CSSRef}}</div>
+
+<p dir="ltr">The <a href="/en-US/docs/Web/CSS/margin-top">top</a> and <a href="/en-US/docs/Web/CSS/margin-bottom">bottom</a> margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as <strong>margin collapsing</strong>. Note that the margins of <a href="/en-US/docs/Web/CSS/float">floating</a> and <a href="/en-US/docs/Web/CSS/position">absolutely positioned</a> elements never collapse.</p>
+
+<p dir="ltr">Margin collapsing occurs in three basic cases:</p>
+
+<dl>
+ <dt dir="ltr">Безпосередні (прилеглі) сусіди</dt>
+ <dd dir="ltr">The margins of adjacent siblings are collapsed (except when the latter sibling needs to be <a href="/en-US/docs/Web/CSS/clear">cleared</a> past floats).</dd>
+ <dt dir="ltr">Батько та перший/останній дочірній елемент</dt>
+ <dd dir="ltr">If there is no border, padding, inline part, {{cssxref("Block_formatting_context")}} created, or <em><a href="/en-US/docs/Web/CSS/clear">clearance</a></em> to separate the {{cssxref("margin-top")}} of a block from the {{cssxref("margin-top")}} of its first child block; or no border, padding, inline content, {{cssxref("height")}}, {{cssxref("min-height")}}, or {{cssxref("max-height")}} to separate the {{cssxref("margin-bottom")}} of a block from the {{cssxref("margin-bottom")}} of its last child, then those margins collapse. The collapsed margin ends up outside the parent.</dd>
+</dl>
+
+<dl>
+ <dt dir="ltr">Порожні блоки</dt>
+ <dd dir="ltr">If there is no border, padding, inline content, {{cssxref("height")}}, or {{cssxref("min-height")}} to separate a block's {{cssxref("margin-top")}} from its {{cssxref("margin-bottom")}}, then its top and bottom margins collapse.</dd>
+</dl>
+
+<p dir="ltr">More complex margin collapsing (of more than two margins) occurs when these cases are combined.</p>
+
+<p dir="ltr">These rules apply even to margins that are zero, so the margin of a first/last child ends up outside its parent (according to the rules above) whether or not the parent's margin is zero.</p>
+
+<p dir="ltr">When negative margins are involved, the size of the collapsed margin is the sum of the largest positive margin and the smallest (most negative) negative margin.</p>
+
+<p dir="ltr">When all margins are negative, the size of the collapsed margin is the smallest (most negative) margin. This applies to both adjacent elements and nested elements.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;The bottom margin of this paragraph is collapsed...&lt;/p&gt;
+&lt;p&gt;...with the top margin of this paragraph, yielding a margin of &lt;code&gt;1.2rem&lt;/code&gt; in between.&lt;/p&gt;
+
+&lt;div&gt;This parent element contains two paragraphs!
+  &lt;p&gt;This paragraph has a &lt;code&gt;.4rem&lt;/code&gt; margin between it and the text above.&lt;/p&gt;
+  &lt;p&gt;My bottom margin collapses with my parent, yielding a bottom margin of &lt;code&gt;2rem&lt;/code&gt;.&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;p&gt;Blah blah blah.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  margin: 2rem 0;
+  background: lavender;
+}
+
+p {
+  margin: .4rem 0 1.2rem 0;
+  background: yellow;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Examples','100%',250)}}</p>
+
+<h2 dir="ltr" id="Специфікації">Специфікації</h2>
+
+<table class="standard-table" dir="ltr">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Первинне визначення</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 dir="ltr" id="Див._також">Див. також</h2>
+
+<ul>
+ <li dir="ltr"><a href="/en-US/docs/Web/CSS/CSS_Reference">CSS Reference</a></li>
+ <li dir="ltr">{{css_key_concepts}}</li>
+</ul>
diff --git a/files/uk/web/css/css_flexible_box_layout/index.html b/files/uk/web/css/css_flexible_box_layout/index.html
new file mode 100644
index 0000000000..3520d3040d
--- /dev/null
+++ b/files/uk/web/css/css_flexible_box_layout/index.html
@@ -0,0 +1,132 @@
+---
+title: CSS Flexible Box Layout
+slug: Web/CSS/CSS_Flexible_Box_Layout
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Reference
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/CSS/CSS_Flexible_Box_Layout
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>CSS Flexible Box Layout</strong> це модуль CSS що реалізує можливість розмітки макета за допомогою оптимізованої коробочної моделі, що використовується для створення дизайну інтерфейса користувача, та проводити вирівнювання елементів в одному із вимірів. В цій моделі (flex layout), потомки flex контейнера можуть бути розміщені відносно будь якої осі, і можуть "гнучко" змінювати свій розмір, можуть рости, щоб зайняти весь відведений простір або зменшуватись щоб не переповнити своїми поточними розмірами контейнер, що їх містить. Наявне і горизонтальне і вертикальне вирівнювання потомків, і до того-ж проводити будь-які маніпуляції дуже легко.</p>
+
+<p> </p>
+
+<p class="summary"> </p>
+
+<h2 id="Простий_Приклад">Простий Приклад</h2>
+
+<p>В наступному прикладі у контейнерa встановлено властивість <code>display: flex</code>, що означає - три його вкладені елементи є  flex елементами. Значення <code>justify-content</code> має значення <code>space-between</code> для того щоб порожній простір між елементами рівномірно розподілився по головній осі. Однаковий простір буде виділений між кожним елементом, але при цьому крайні елементи(перший та останній) не будуть мати  справа та зліва відповідно відступів від контейнера. Ви можете бачити що елементи будуть розподілені по поточній направляючій вісі, бо на це впливають виставлені по замовчуванню значення властивості <code>align-items</code> рівний <code>stretch</code>. Елементи розтягуються по висоті flex контейнера, і кожен стане такої висоти як самий вищий елемент.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p>
+
+<h2 id="Reference">Reference</h2>
+
+<p class="summary"> </p>
+
+<h2 id="Reference_2">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("flex")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+ <li>{{cssxref("flex-direction")}}</li>
+ <li>{{cssxref("flex-flow")}}</li>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-wrap")}}</li>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("order")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></dt>
+ <dd>Step-by-step tutorial about how to build layouts using this feature.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Using flexbox to lay out Web applications</a></dt>
+ <dd>Tutorial explaining how to use flexbox in the specific context of Web applications.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("20.0")}}</td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>10.0{{property_prefix("-ms")}}<br>
+    11.0</td>
+   <td>12.10</td>
+   <td>6.1{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>4.4</td>
+   <td>11</td>
+   <td>12.10</td>
+   <td><span style="font-size: 12px; line-height: 18px;">7.1{{property_prefix("-webkit")}}</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/uk/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html b/files/uk/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html
new file mode 100644
index 0000000000..cdb8ea92c1
--- /dev/null
+++ b/files/uk/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html
@@ -0,0 +1,390 @@
+---
+title: Використання CSS flexible-боксів
+slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">CSS3 <strong>flex-бокс</strong>, або <strong>flexbox</strong>, це <a href="/en-US/docs/Web/CSS/Layout_mode">режим розмітки</a> створений для упорядкування елементів на сторінці таким чином, щоб вони поводилися передбачувано у випадках, коли розмітка сторінки адаптована під різні розміри екрану і різні девайси.</span>  В багатьох випадках flexible box є вдосконаленням блокової моделі розмітки, яка не використовує обтікання (floats) і не виконує схлопування відступів flex контейнера і  його контенту (margins collapse).</p>
+
+<p>Для багатьох дизайнерів модель використання flex-боксів буде більш простою для застосування. Дочірні елементи всередині flex-боксу можуть розміщуватись у будь-якому напрямку і можуть мати змінні виміри щоб адаптовуватись до різних розмірів дисплею. Позиціонування елементів у такому разі є простішим і комплексна розмітка досягається значно легше і з чистішим кодом, оскільки порядок відображення елементів не пов'язаний із їх порядком в коді. Ця незалежність навмисне стосується лише візуального рендерингу, залишаючи порядок інтерпритації і навігацію залежними від порядку у сорсі.</p>
+
+<div class="note"><strong>Увага:</strong> Де-які броузери все ще можуть частково або повністю не підтримувати flex боксів. Ознайомтесь із  <a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes#Browser_compatibility">таблицею сумісності</a> для flex боксів</div>
+
+<h2 id="Концепція_flex-боксів">Концепція flex-боксів</h2>
+
+<p>Головною концепцією flex-боксів є можливість зміни висоти та/або ширини його елементів шоб найкраше заповнювати простір будь-якого дисплею. Flex-контейнер збільшує елементи, щоб заповнити доступний простір чи зменшує щоб запобігти перекриванню.</p>
+
+<p>Алгоритм розмітки flex-боксами є напрямно-агностичним на противагу блоковій розмітці, яка вертикально-орієнтована, чи горизонтально-орієнтованій інлайн-розмітці. Не зважаючи на те що розмітка блоками добре підходить для сторінки, їй не вистачає об'єктивного механізму для підтримки компонентів, що повинні змінювати орієнтацію, розміри а також розтягуватись чи стискатись при змінах юзер-агента, змінах з вертикальної на горизонтальну орієнтацію і таке інше. Розмітка flex-боксами найбільш бажана для компонентів додатку і шаблонів, що мало масштабуються, тоді як grid-розмітка створена для великих шаблонів, що масштабуються. Обидві технології є частиною розробки CSS Working Group яка має сприяти сумісності web-аплікацій з різними юзер-агентами, режимами а також більшій гнучкості.</p>
+
+<h2 id="Словник_Flexible_box_термінів">Словник Flexible box термінів  </h2>
+
+<p>Оскільки опис flexible-боксів не включає таких словосполучень, як горизонтальна/інлайн і вертикальна/блокова осі, пояснення моделі передбачає нову термінологію. Використовуйте наступну діаграму під час перегляду словника термінів. Вона зображає flex-контейнер, що має  flex-напрямок ряду, що означає, що кожен flex item розміщений горизонтально, один за одним по головній осі (main axis) відповідно до встановленного режиму написання, напрямку тексту елементу. Зліва-направо у данному випадку.</p>
+
+<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png"></p>
+
+<dl>
+ <dt>Flex-контейнер</dt>
+ <dd>Батьківський елемент, у якому містяться flex-айтеми. Flex-контейнер визначається <code>flex</code> або <code>inline-flex</code> значеннями {{Cssxref("display")}} властивості.</dd>
+ <dt>Flex-айтем</dt>
+ <dd>
+ <p>Кожен дочірній елемент flex-контейнеру стає flex-айтемом. Текст, що напряму міститься в flex-контейнері обгортається анонімним flex-айтемом.</p>
+ </dd>
+ <dt>Осі</dt>
+ <dd>
+ <p>Кожен flexible-бокс шаблон будується по двох осях. Головна вісь (<strong>main axis)</strong> - вісь, вздовж якої flex-айтеми слідують один за одним. Перехресна вісь (<strong>cross axis)</strong> вісь, що перпендикулярна до <strong>main axis</strong>.</p>
+
+ <ul>
+  <li>Властивість <code><a href="/en-US/docs/Web/CSS/flex-direction">flex-direction</a></code> встановлює main axis.</li>
+  <li>Властивість <a href="/en-US/docs/Web/CSS/justify-content"><code>justify-content</code></a> визначає як flex-айтеми розташовані вздовж main axis на поточній лінії.</li>
+  <li>Властивість <a href="/en-US/docs/Web/CSS/align-items"><code>align-items</code></a> визначає замовчування для розташування flex-айтемів вздовж cross axis на поточній лінії.</li>
+  <li>Властивість <a href="/en-US/docs/Web/CSS/align-self"><code>align-self</code></a> встановлює, як кожен окремий flex-айтем вирівняний по cross axis і переписує замовчування, встановлене за допомогою <code>align-items.</code></li>
+ </ul>
+ </dd>
+ <dt>Напрямки</dt>
+ <dd>
+ <p>Головний початок/головний кінець(<strong>main start</strong>/<strong>main end) </strong>і перехресний початок/перехресний кінець(<strong>cross start</strong>/<strong>cross end)</strong> це сторони flex-контейнера, що визначають початок і закінчення потоку flex-айтемів. Вони слідують за головною і перехресною осями flex-контейнера у векторі, встановленому режимом написання (зліва-направо, зправа-наліво і т.д.).</p>
+
+ <ul>
+  <li>Властивість <a href="/en-US/docs/Web/CSS/order"><code>order</code></a> присвоює елементи порядковим групам і визначає, який елемент є першим.</li>
+  <li>Властивість <a href="/en-US/docs/Web/CSS/flex-flow"><code>flex-flow</code></a> це скорочена форма для <a href="/en-US/docs/Web/CSS/flex-direction"><code>flex-direction</code></a> та <a href="/en-US/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a> властивостей.</li>
+ </ul>
+ </dd>
+ <dt>Лінії</dt>
+ <dd>
+ <p>Flex-айтеми можуть бути розміщені на одній чи кількох лініях відповідно до <a href="/en-US/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a> властивості, яка контролює напрямок перехресних ліній і напрямок у якому складаються нові лінії.</p>
+ </dd>
+ <dt>Виміри</dt>
+ <dd>Еквівалентами для height і width для flex-айтемів є <strong>main size</strong> та <strong>cross size,</strong> які відповідно стосуються main axis і cross axis flex-контейнера.</dd>
+ <dd>
+ <ul>
+  <li>Початковим значенням для <code><a href="/en-US/docs/Web/CSS/min-height">min-height</a></code> і <code><a href="/en-US/docs/Web/CSS/min-width">min-width</a></code> є 0.</li>
+  <li>Властивість <a href="/en-US/docs/Web/CSS/flex"><code>flex</code></a> виступає скороченням для <a href="/en-US/docs/Web/CSS/flex-grow"><code>flex-grow</code></a>, <a href="/en-US/docs/Web/CSS/flex-shrink"><code>flex-shrink</code></a>, а також <code><a href="/en-US/docs/Web/CSS/flex-basis">flex-basis</a> </code>властивостей для встановлення гнучкості flex-айтема.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Робимо_елемент_flexible-боксом">Робимо елемент flexible-боксом</h2>
+
+<p>Щоб зробити елемент flexible-боксом, вкажіт занчення <a href="/en-US/docs/Web/CSS/display">display</a> властивості наступним чином:</p>
+
+<pre class="brush: css">display : flex</pre>
+
+<p>або</p>
+
+<pre class="brush: css">display : inline-flex</pre>
+
+<p>Роблячи таким чином, ми визначаєм елемент як flexible-бокс, а його нащадків- як flexible-айтеми. Значення <code>flex</code> робить контейнер блоковим елементом. А <code>inline-flex</code> значення перетворює його на інлайн-елемент.</p>
+
+<div class="note"><strong>Увага:</strong> Для вказання префіксу вендора, додайте рядок до значення атрибуту, а не до самого атрибуту. Наприклад, <code>display : -webkit-flex</code>.</div>
+
+<h2 id="Характеристики_flex-айтема">Характеристики flex-айтема</h2>
+
+<p>Текст, що напряму поміщений до flex-контейнера автоматично обгортається в анонімний flex-айтем. Тим не менше анонімний flex-айтем, що містить лише пробільні симфоли не рендериться, так ніби йому було встановлене правило <code>display: none</code>.</p>
+
+<p>Абсолютно-позиціоновані дочірні елементи flex-контейнера позиціонуються так, що іхня статична позиція визначається відносно головного стартового кута контент-боксу їхнього flex-контейнера.</p>
+
+<p>У сусідніх flex-айтемів марджіни не накладаються один на інший. Використовуючи auto марджіни можна поглинути зайві відстані у вертикальному чи горизонтальному напрямках тим самим досягнувши вирівнювання чи розмежування сусідніх flex-айтемів.  Для детальної інформації прочитайте  <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">вирівнювання з допомогою 'auto' марджінів</a> у W3C специфікації "модель Flexible-бокс розмітки" (англ.).</p>
+
+<p><s>Для забезпечення адекватного замовчування мінімальних розмірів flex-айтема, використовуйте <code>min-width:auto</code> і/або <code>min-height:auto</code>. Для flex-айтемів, значення атрибуту <code>auto</code> вираховує мінімальну ширину/висоту айтема щоб не були меншими за ширину/висоту їхнього контенту, гарантуючи, що айтем відрендерений достатньо великим, для того, щоб вмістити контент. Дивіться {{cssxref("min-width")}} і {{cssxref("min-height")}} для більш детальної інформації.</s></p>
+
+<p>Атрибути вирівнювання flex-боксів виконують справжнє центрування, на відміну від інших методів центрування у CSS. Це означає, що flex-айтеми залишаться відцентрованими навіть коли вони виходять за межі flex-контейнера. Хоча така ситуація де-коли можи бути проблемою, оскільки якщо вони виходять за межі верхнього чи лівого (для LTR мов , таких, як англійська чи українська; проблема актуальна для правого краю для RTL мов, таких, як арабська) країв сторінки, вам не вдасться проскролити до цієї частини, не зважаючи на те, що там є контент! В майбутньому релізі властивості вирівнювання мають бути розширені для підтримаки безпечного режиму також. Зараз, якщо це проблема, Ви можете використовувати відступи (margin), щоб досягнути центрування.</p>
+
+<p>For now, if this is a concern, you can instead use margins to achieve centering, as they'll respond in a "safe" way and stop centering if they overflow. Instead of using the <code>align-</code> properties, just put auto margins on the flex items you wish to center. Instead of the <code>justify-</code> properties, put auto margins on the outside edges of the first and last flex items in the flex container. The auto margins will "flex" and assume the leftover space, centering the flex items when there is leftover space, and switching to normal alignment when not. However, if you're trying to replace <code>justify-content</code> with margin-based centering in a multi-line flexbox, you're probably out of luck, as you need to put the margins on the first and last flex item on each line. Unless you can predict ahead of time which items will end up on which line, you can't reliably use margin-based centering in the main axis to replace the <code>justify-content</code> property.</p>
+
+<p>Recall that while the display order of the elements is independent of their order in the source code, this independence affects only the visual rendering, leaving speech order and navigation based on the source order. Even the {{cssxref("order")}} property does not affect speech or navigation sequence. Thus developers must take care to order elements properly in the source so as not to damage the document's accessibility.</p>
+
+<h2 id="Flexible_box_properties">Flexible box properties</h2>
+
+<h3 id="Properties_not_affecting_flexible_boxes">Properties not affecting flexible boxes</h3>
+
+<p>Because flexible boxes use a different layout algorithm, some properties do not make sense on a flex container:</p>
+
+<ul>
+ <li><code>column-*</code> properties of the <a href="/en-US/docs/Web/CSS/Using_CSS_multi-column_layouts">multiple column module</a> have no effect on a flex item.</li>
+ <li>{{cssxref("float")}} and {{cssxref("clear")}} have no effect on a flex item. Using <code>float</code> causes the <code>display</code> property of the element to compute to <code>block</code>.</li>
+ <li>{{cssxref("vertical-align")}} has no effect on the alignment of flex items.</li>
+</ul>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Basic_flex_example">Basic flex example</h3>
+
+<p>This basic example shows how to apply "flexibility" to an element and how sibling elements behave in a flexible state.</p>
+
+<pre class="brush: html">​&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;style&gt;
+
+   .flex
+   {
+      /* basic styling */
+      width: 350px;
+      height: 200px;
+      border: 1px solid #555;
+      font: 14px Arial;
+
+      /* flexbox setup */
+      display: -webkit-flex;
+      -webkit-flex-direction: row;
+
+      display: flex;
+      flex-direction: row;
+   }
+
+   .flex &gt; div
+   {
+      -webkit-flex: 1 1 auto;
+      flex: 1 1 auto;
+
+      width: 30px; /* To make the transition work nicely.  (Transitions to/from
+                      "width:auto" are buggy in Gecko and Webkit, at least.
+                      See http://bugzil.la/731886 for more info.) */
+
+      -webkit-transition: width 0.7s ease-out;
+      transition: width 0.7s ease-out;
+   }
+
+   /* colors */
+   .flex &gt; div:nth-child(1){ background : #009246; }
+   .flex &gt; div:nth-child(2){ background : #F1F2F1; }
+   .flex &gt; div:nth-child(3){ background : #CE2B37; }
+
+   .flex &gt; div:hover
+   {
+        width: 200px;
+   }
+
+   &lt;/style&gt;
+
+ &lt;/head&gt;
+ &lt;body&gt;
+  &lt;p&gt;Flexbox nuovo&lt;/p&gt;
+  &lt;div class="flex"&gt;
+    &lt;div&gt;uno&lt;/div&gt;
+    &lt;div&gt;due&lt;/div&gt;
+    &lt;div&gt;tre&lt;/div&gt;
+  &lt;/div&gt;
+ &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="Holy_Grail_Layout_example">Holy Grail Layout example</h3>
+
+<p>This example demonstrates how flexbox provides the ability to dynamically change the layout for different screen resolutions. The following diagram illustrates the transformation.</p>
+
+<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p>
+
+<p>Illustrated here is the case where the page layout suited to a browser window must be optimized for a smart phone window. Not only must the elements reduce in size, but the order in which they are presented must change. Flexbox makes this very simple.</p>
+
+<pre class="brush: html">​&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;style&gt;
+
+  body {
+   font: 24px Helvetica;
+   background: #999999;
+  }
+
+  #main {
+   min-height: 800px;
+   margin: 0px;
+   padding: 0px;
+   display: -webkit-flex;
+   display:         flex;
+   -webkit-flex-flow: row;
+           flex-flow: row;
+   }
+
+  #main &gt; article {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #cccc33;
+   border-radius: 7pt;
+   background: #dddd88;
+   -webkit-flex: 3 1 60%;
+           flex: 3 1 60%;
+   -webkit-order: 2;
+           order: 2;
+   }
+
+  #main &gt; nav {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 1;
+           order: 1;
+   }
+
+  #main &gt; aside {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 3;
+           order: 3;
+   }
+
+  header, footer {
+   display: block;
+   margin: 4px;
+   padding: 5px;
+   min-height: 100px;
+   border: 1px solid #eebb55;
+   border-radius: 7pt;
+   background: #ffeebb;
+   }
+
+  /* Too narrow to support three columns */
+  @media all and (max-width: 640px) {
+
+   #main, #page {
+    -webkit-flex-flow: column;
+            flex-direction: column;
+   }
+
+   #main &gt; article, #main &gt; nav, #main &gt; aside {
+    /* Return them to document order */
+    -webkit-order: 0;
+            order: 0;
+   }
+
+   #main &gt; nav, #main &gt; aside, header, footer {
+    min-height: 50px;
+    max-height: 50px;
+   }
+  }
+
+ &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+ &lt;header&gt;header&lt;/header&gt;
+ &lt;div id='main'&gt;
+    &lt;article&gt;article&lt;/article&gt;
+    &lt;nav&gt;nav&lt;/nav&gt;
+    &lt;aside&gt;aside&lt;/aside&gt;
+ &lt;/div&gt;
+ &lt;footer&gt;footer&lt;/footer&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Playground">Playground</h2>
+
+<p>There are a few flexbox playgrounds available online for experimenting:</p>
+
+<ul>
+ <li><a href="http://demo.agektmr.com/flexbox/">Flexbox Playground</a></li>
+ <li><a href="http://the-echoplex.net/flexyboxes">Flexy Boxes</a></li>
+ <li><a href="http://codepen.io/justd/pen/yydezN">Flexbox Properties Demonstration</a></li>
+</ul>
+
+<h2 id="Things_to_keep_in_mind">Things to keep in mind</h2>
+
+<p>The algorithm describing how flex items are laid out can be pretty tricky at times. Here are a few things to consider to avoid bad surprises when designing using flexible boxes.</p>
+
+<p>Flexible boxes are laid out in conformance of the <a href="https://developer.mozilla.org/en-US/docs/CSS/writing-mode">writing mode</a>, which means that <strong>main start</strong> and <strong>main end</strong> are laid out according to the position of <strong>start</strong> and <strong>end</strong>.</p>
+
+<p><strong>cross start</strong> and <strong>cross end</strong> rely on the definition of the <strong>start</strong> or <strong>before</strong> position that depends on the value of <a href="/en-US/docs/Web/CSS/direction"><code>direction</code></a>.</p>
+
+<p>Page breaks are possible in flexible boxes layout as long as <code>break-</code> property allows it. CSS3 <code>break-after</code>, <code>break-before</code>, and <code>break-inside</code> as well as CSS 2.1 <code>page-break-before</code>, <code>page-break-after</code>, and <code>page-break-inside</code> properties are accepted on a flex container, flex items, and inside flex items.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (single-line flexbox)</td>
+   <td>{{CompatGeckoDesktop("18.0")}}<sup>[6]</sup>{{property_prefix("-moz")}}<sup>[2]</sup><br>
+    {{CompatGeckoDesktop("22.0")}}</td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>11<sup>[3]</sup></td>
+   <td>12.10{{property_prefix("-webkit")}}<sup>[5]</sup></td>
+   <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>Multi-line flexbox</td>
+   <td>{{CompatGeckoDesktop("28.0")}}</td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>11<sup>[3]</sup></td>
+   <td>12.10<sup>[5]</sup><br>
+    15 {{property_prefix("-webkit")}}</td>
+   <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (single-line flexbox)</td>
+   <td>{{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}<sup>[2]</sup><br>
+    {{CompatGeckoMobile("22.0")}}</td>
+   <td>
+    <p>1.0{{property_prefix("-moz")}}<sup>[2]</sup><br>
+     1.1</p>
+   </td>
+   <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br>
+    4.4</td>
+   <td>11</td>
+   <td>12.10<sup>[5]</sup><br>
+    15{{property_prefix("-webkit")}}</td>
+   <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>Multi-line flexbox</td>
+   <td>{{CompatGeckoMobile("28.0")}}</td>
+   <td>1.3</td>
+   <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br>
+    4.4</td>
+   <td>11</td>
+   <td>12.10<sup>[5]</sup><br>
+    15{{property_prefix("-webkit")}}</td>
+   <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Safari up to version  6.0 (iOS.1) supported an old incompatible draft version of the specification. Safari 6.1 (and Safari on iOS 7) has been updated to support the final version.</p>
+
+<p>[2] Up to Firefox 22, to activate flexbox support, the user has to change the <code>about:config</code> preference <code>layout.css.flexbox.enabled</code> to <code>true</code>. From Firefox 22 to Firefox 27, the preference is <code>true</code> by default, but the preference has been removed in Firefox 28.</p>
+
+<p>[3] Internet Explorer 10 supports an old incompatible draft version of the specification; Internet Explorer 11 <a href="http://msdn.microsoft.com/en-us/library/ie/dn265027%28v=vs.85%29.aspx">has been updated</a> to support the final version.</p>
+
+<p>[4] Android browser up to 4.3 supported an old incompatible draft version of the specification. Android 4.4 has been updated to support the final version.</p>
+
+<p>[5] While in the initial implementation in Opera 12.10 <code>flexbox</code> was not prefixed, it got prefixed in versions 15 to 16 of Opera and 15 to 19 of Opera Mobile with {{property_prefix("-webkit")}}. The prefix was removed again in Opera 17 and Opera Mobile 24.</p>
+
+<p>[6] Up to Firefox 29, specifying <code>visibility: collapse</code> on a flex item causes it to be treated as if it were <code>display: none</code> instead of the intended behavior, treating it as if it were <code>visibility: hidden</code>. The suggested workaround is to use <code>visibility:hidden</code> for flex items that should behave as if they were designated <code>visibility:collapse</code>. For more information, see {{bug(783470)}}</p>
diff --git a/files/uk/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/uk/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
new file mode 100644
index 0000000000..84c95201bb
--- /dev/null
+++ b/files/uk/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
@@ -0,0 +1,699 @@
+---
+title: Основна концепція макета grid
+slug: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
+tags:
+  - CSS Grid
+  - Посібник
+translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
+---
+<p><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> вводить двовимірну сітку до CSS. Сітки можуть бути використані для виділення основних областей сторінки або невеликих елементів інтерфейсу користувача. У цій статті надана схема CSS Grid Layout та нова термінологія, що є частиною специфікації CSS Grid Layout Level 1. Функції, наведені в цьому огляді, будуть більш детально пояснені далі в цьому посібнику.</p>
+
+<h2 id="Що_таке_grid">Що таке grid?</h2>
+
+<p>Grid є перехресним набором  горизонтальних і вертикальних ліній, що перетинаються - один набір визначає стовпці,  інший рядки. Елементи можуть бути розміщені на сітці, дотримуючись цих стовпців та рядків. Макет сітки CSS має такі особливості:</p>
+
+<h3 id="Фіксовані_та_гнучкі_розміри_смуг">Фіксовані та гнучкі розміри смуг</h3>
+
+<p>Ви можете створити сітку з фіксованими розмірами смуг – наприклад, використовуючи пікселі. Це встановлює сітку на певні пікселі, що відповідають бажаному макету. Ви також можете створити сітку з використанням гнучких розмірів у відсотках або з новою одиницею <code>fr</code>, яку розроблену саме для цієї мети.</p>
+
+<h3 id="Розміщення_елементів">Розміщення елементів</h3>
+
+<p>Ви можете розміщувати елементи у точному місці сітки, використовуючи номери рядків, імена або орієнтуючись на область сітки. Сітка також містить алгоритм для контролю розміщення елементів, які не мають явного положення на сітці.</p>
+
+<h3 id="Створення_додаткових_смуг_для_вмісту">Створення додаткових смуг для вмісту</h3>
+
+<p>Ви можете визначати сітку явно в макеті сітки, але специфікація також стосується вмісту, доданого за межами оголошеної сітки, додаючи додаткові рядки та стовпчики за потребою. Спрацьовує принцип додавання " стільки стовпчиків, скільки вміститься в контейнер".</p>
+
+<h3 id="Управління_вирівнюванням">Управління вирівнюванням</h3>
+
+<p>Сітка містить функції вирівнювання для того, щоб ми могли контролювати, як вирівнюються розміщені в області сітки елементи  та як вирівнюється вся Grid-сітка.</p>
+
+<h3 id="Управління_вмістом_що_перекривається">Управління вмістом, що перекривається</h3>
+
+<p>У секцію сітки можна додати більш ніж один елемент. Також області можуть частково перекривати одна одну. Цим накладенням можна керувати за допомогою {{cssxref("z-index")}} властивості.</p>
+
+<p>Grid - це потужна специфікація, яка у поєднанні з іншими можливостями CSS такими, як <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a>, дозволяє вам створювати макети, які раніше неможливо було створити за допомогою CSS. Все починається шляхом створення сітки у <strong>grid-контейнері</strong>.</p>
+
+<h2 id="Grid-контейнер">Grid-контейнер</h2>
+
+<p>Ми створюємо <em>grid-контейнер </em>оголошуючи <code>display: grid</code> або <code>display: inline-grid</code> на елементі. Як тільки ми це зробимо, всі <em>прямі діти </em>елементу стають <em>grid-елементами</em>.</p>
+
+<p>У цьому прикладі, у мене div-елемент з класом <em>wrapper</em>, що містить в собі п'ять дочірніх елементів.</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Я роблю з класу <code>.wrapper</code> grid-контейнер.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css line-numbers  language-css"><code class="language-css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}</code></pre>
+</div>
+
+<p>{{ EmbedLiveSample('The_Grid_container', '200', '330') }}</p>
+
+<p>Всі прямі нащадки тепер є grid-елементами. В браузері ви не помітите ніякої різниці між виглядом елементів до і після створення grid-контейнеру. З цієї точки зору вам буде корисно працювати в редакторі Firefox Developer Edition, який має <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a>, доступний як частина інструментів розробника. Якщо ви розглянете цей приклад в  Firefox і перевірите grid, ви побачите маленький значок біля значення <code>grid</code>. Клікніть його і сітка накладеться на цей елемент у вікні браузера.</p>
+
+<p><img alt="Using the Grid Highlighter in DevTools to view a grid" src="https://mdn.mozillademos.org/files/14631/1-grid-inspector.png" style="height: 753px; width: 900px;"></p>
+
+<p>Як вийде - працюйте з  CSS Grid Layout, це інструмент надасть вам краще розуміння того що відбувається з вашою grid-сіткою візуально. </p>
+
+<p>Якщо ми хочемо щоб це було більше grid-орієнтовано, треба додавати більше смуг-стовбців.</p>
+
+<h2 id="Grid_Смуги">Grid Смуги</h2>
+
+<p>Ми визначаємо рядки і стовпчики на нашій grid-сітці  властивостями {{cssxref("grid-template-columns")}} та {{cssxref("grid-template-rows")}}. Вони визначають grid смуги. Grid-смуга – це простір будь якими двома лініями на grid-сітці. На зображенні нижче кольорова смуга – перша смуга-рядок на нашій grid-сітці.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14637/1_Grid_Track.png" style="height: 261px; width: 392px;"></p>
+
+<p>До попереднього прикладу можна додати властивість  <code>grid-template-columns</code>, визначаючи розмір смуг-стовпчиків.</p>
+
+<p>Таким чином створено grid-сітку з трьома смугами-стовпчиками шириною по 200 рх. Дочірні елементи вкладатимуться в цю grid-сітку в кожну клітинку. </p>
+
+<div id="grid_first">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css line-numbers  language-css"><code class="language-css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}</code></pre>
+</div>
+
+<p>{{ EmbedLiveSample('grid_first', '610', '140') }}</p>
+</div>
+
+<h3 id="Одиниця_fr">Одиниця fr </h3>
+
+<p>Смуги визначаються одиницями довжини. Grid-сітка має додаткову одиницю довжини яка допомагає створювати гнучкі grid-смуги. Одиниця <code>fr</code>  являє собою частку вільного простору в  grid-контейнері. Наступна сітка створює три рівних по ширині смуги які  стають більше і менше відповідно наявному простору. </p>
+
+<div id="fr_unit_ls">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css line-numbers  language-css"><code class="language-css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}</code></pre>
+</div>
+
+<p>{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}</p>
+</div>
+
+<p>В наступному прикладі ми створюємо визначення з <code>2fr</code> смугою і дві <code>1fr</code> смуги. Доступний простір розділений на чотири частини, дві з яких надаються першій смузі і по одній частині кожній з наступних двох.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+}
+</pre>
+
+<p>В останньому прикладі ми комбінуємо абсолютні одиниці ширини смуг з фракційними. Перша смуга  500 px, фіксована ширина відбирається з доступного простору. Решта простору ділиться на три і призначається двом гнучким смугам пропорційно. </p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 500px 1fr 2fr;
+}
+</pre>
+
+<h3 id="Визначення_смуг_зі_значенням_repeat()"><code>Визначення смуг зі значенням repeat()</code></h3>
+
+<p>Великі grid-сітки з багатьма стугами можуть використовувати значення <code>repeat()</code> для скорочення при визначенні стовпчиків: </p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+</pre>
+
+<p>Також може бути записано як:</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+</pre>
+
+<p>Значення repeat може використовуватись лише для частини стовпчиків. В наступному прикладі ініційовано смугу 20 рх, секцію з 6 смуг шириною <code>1fr,</code> і смугу 20 рх. </p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 20px repeat(6, 1fr) 20px;
+}
+</pre>
+
+<p>Значення repeat визначає смуги, тобто його можливо використовувати для створення цілих шаблонів стовпчиків. В наступному прикладі grid-сітка складається з 10 смуг. Смуга <code>1fr</code> , смуга <code>2fr</code> і так п'ять разів.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr 2fr);
+}
+</pre>
+
+<h3 id="Неявна_і_явна_Grid-сітка">Неявна і явна Grid-сітка</h3>
+
+<p>Cтворюючи Grid-сітку нашого прикладу, ми визначили стовпчики-смуги властивістю {{cssxref("grid-template-columns")}}, але дозволимо grid-сітці створювати рядки так, як краще для контенту. Такі рядки створюються в неявній grid-сітці. Явна grid-сітка складається з рядків і стовпчиків, які визначаються властивостями  {{cssxref("grid-template-columns")}} та {{cssxref("grid-template-rows")}}.</p>
+
+<p>Якщо ми розташовуємо щось поза цією grid-сіткою, або кількість вмісту потребує більше grid смуг, тоді  grid-сітка створює рядки і стовпчики в неявній  grid-сітці. Такі смуги матимуть авторозмір за замовчуванням якраз щоб вмістити свій контент.</p>
+
+<p>Ви також можете визначити встановлений розмір для смуг, створених в неявній grid-сітці властивостями {{cssxref("grid-auto-rows")}} та {{cssxref("grid-auto-columns")}}.</p>
+
+<p>В прикладі нижче ми використовуємо <code>grid-auto-rows</code>  щоб забезпечити неявне створення смуги висотою 200 рх.</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 200px;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css line-numbers  language-css"><code class="language-css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}</code></pre>
+</div>
+
+<p>{{ EmbedLiveSample('The_implicit_and_explicit_grid', '230', '420') }}</p>
+
+<h3 id="Розміри_смуги_і_minmax()">Розміри смуги і <code>minmax()</code></h3>
+
+<p>Встановлюючи явну grid-сітку або визначаючи розміри для автоматично створених рядків або стовпчиків може виникнути необхідність надання смугам мінімального розміру. Але треба переконатись що розширюючись, вони відповідатимуть будь якому доданому контенту. Наприклад ми хочемо щоб рядки ніколи не були менше 100 рх, але якщо контент розширюється до 300 рх, ми б хотіли щоб рядок розширився до такої висоти. </p>
+
+<p>Grid для таких випадків має функцію {{cssxref("minmax", "minmax()")}}. В наступному прикладі я використовую <code>minmax()</code>в значенні {{cssxref("grid-auto-rows")}}. Це означає, що автоматично створені рядки матимуть мінімальну висоту 100 рх, а максимальну <code>auto</code>. Використання <code>auto</code> означає, що розмір буде підлаштовуватись під розмір контенту таким чином, щоб вмістити найвищий елемент в цьому рядку.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css line-numbers  language-css"><code class="language-css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}</code></pre>
+</div>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two
+    &lt;p&gt;I have some more content in.&lt;/p&gt;
+    &lt;p&gt;This makes me taller than 100 pixels.&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+<p>{{ EmbedLiveSample('Track_sizing_and_minmax()', '240', '470') }}</p>
+
+<h2 id="Grid_Лінії">Grid Лінії</h2>
+
+<p>Варто зауважити що коли ми визначаємо Grid, ми визначаємо grid-смуги (але не grid-лінії). В такому випадку Grid дає нам нумеровані лінії для позиціонування елементів. В прикладі нижче Grid має 3 стовпчика, 2 рядки і 4 вертикальних лінії.</p>
+
+<p><img alt="Diagram showing numbered grid lines." src="https://mdn.mozillademos.org/files/14761/1_diagram_numbered_grid_lines.png" style="height: 456px; width: 764px;"></p>
+
+<p>Лінії пронумеровано згідно способу нумерації документа: зліва направо і зверху вниз (якщо на мові що викоричтовується пишуть справа наліво, то і нумерація ліній справа наліво). Лінії також можуть бути поіменовані.</p>
+
+<h3 id="Позиціонування_елементів_по_лініях">Позиціонування елементів по лініях</h3>
+
+<p>Наступний приклад демонструє просте позиціонування елементів по лініях. При розміщенні елементів ми надаємо перевагу більше лініям ніж смугам.</p>
+
+<p>В наступному прикладі ми розміщуємо перші два елементи на Grid-cітці, яка складається з трьох смуг-стовпчиків, застосовуючи властивості {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} та {{cssxref("grid-row-end")}}.  Рухаючись зліва направо, перший елемент починається з вертикальної лініі 1 і простягається до вертикальної лініі 4, що праворуч нашої Grid-сітки. Він починається на горизонтальній лінії 1 і закінчується на горизонтальній лінії 3, тобто займає два рядка смуг.</p>
+
+<p>Другий елемент починається з вертикальної лініі 1, і простягається на одну смугу. Це за замовчуванням, тому можна не вказувати кінцеву лінію. Також по рядках він простягається з горизонтальній лінії 3 до горизонтальній лінії 5. Інші елементи розміщуються в порожніх просторах на Grid-сітці.</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css line-numbers  language-css"><code class="language-css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}</code></pre>
+</div>
+
+<p>{{ EmbedLiveSample('Positioning_items_against_lines', '230', '420') }}</p>
+
+<p>Не забуваймо, що можна використовувати <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> в Firefox Developer Tools щоб побачити як елементи позиціонуються на лініях Grid-сітки.</p>
+
+<h2 id="Grid-клітини">Grid-клітини</h2>
+
+<p><em>Grid-клітина</em> – найменша одиниця Grid-сітки, по аналогії з чарунком таблиці. Як ми бачили в попередніх прикладах, якщо Grid-сітка визначена як батьківська, дочірні елементи лежатимуть по одному в кожній її клітині. На зображенні кольором позначено першу клітину Grid-сітки.</p>
+
+<p><img alt="The first cell of the grid highlighted" src="https://mdn.mozillademos.org/files/14643/1_Grid_Cell.png" style="height: 233px; width: 350px;"></p>
+
+<h2 id="Grid-ділянки">Grid-ділянки</h2>
+
+<p>Елементи можуть розташовуватись на одній або декількох клітинках як в рядок так і в стовпчик, і це створює Grid-ділянки. Grid-ділянки завжди прямокутні, неможлива, наприклад, L-подібна Grid-ділянка. На зображенні Grid-ділянка займає два рядки і два стовпчики.</p>
+
+<p><img alt="A grid area" src="https://mdn.mozillademos.org/files/14645/1_Grid_Area.png" style="height: 238px; width: 357px;"></p>
+
+<h2 id="Розриви">Розриви</h2>
+
+<p><em>Розриви</em> між Grid-клітинами створюються властивістями {{cssxref("grid-column-gap")}} та {{cssxref("grid-row-gap")}}, або скорочено {{cssxref("grid-gap")}}. В наступному прикладі створюється проміжок у 10рх між стовпчиками та проміжок <code>1em</code> між рядками. </p>
+
+<pre class="brush: css line-numbers  language-css"><code class="language-css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  column-gap: 10px;
+  row-gap: 1em;
+}</code></pre>
+
+<div class="note">
+<p><strong>Примітка:</strong> Коли гріди тільки почали використовуватись браузерами {{cssxref("column-gap")}}, {{cssxref("row-gap")}} та {{cssxref("gap")}} мали префікси <code>grid-</code> як от {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} та {{cssxref("grid-gap")}} відповідно.</p>
+
+<p>Браузери наразі оновлюються, щоб видалити цей префікс, проте попередньо встановлені версії також будуть підтримуватися як псевдоніми, що робить їх безпечними для використання. В даний час деякі веб-переглядачі не підтримують безпрефіксний варіант, тому в прикладах цього посібника використовуюється версія з grid- префіксом.</p>
+</div>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+<div class="hidden">
+<pre class="brush: css line-numbers  language-css"><code class="language-css">* {box-sizing: border-box;}
+
+.wrapper {
+  grid-column-gap: 10px;
+  grid-row-gap: 1em;
+
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}</code></pre>
+</div>
+
+<p>{{ EmbedLiveSample('Gutters') }}</p>
+
+<p>Будь-який простір, відведений на розриви, буде враховуватись до відведення простору для гнучких <code>fr</code> довжин смуг. Розриви використовуваються в розмітці, як звичайні grid-смуги, за виключенням того, що ви не зможете в них нічого помістити. З точки зору лінійного позиціонування розрив діє як товста лінія.</p>
+
+<h2 id="Вкладені_Grid-сітки">Вкладені Grid-сітки</h2>
+
+<p>Grid-елементи можуть ставати Grid-контейнерами. В попередньому прикладі ми створили Grid-сітку з трьох стовпчиків з двома позиціонованими елементами.  Перший з них має піделементи. Оскільки ці елементи не є прямими нащадками, вони не беруть участі в  Grid-розкладці і відображаються в нормальному потоці. </p>
+
+<div id="nesting">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;
+    &lt;div class="nested"&gt;a&lt;/div&gt;
+    &lt;div class="nested"&gt;b&lt;/div&gt;
+    &lt;div class="nested"&gt;c&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="box box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p><img alt="Nested grid in flow" src="https://mdn.mozillademos.org/files/14641/1_Nested_Grids_in_flow.png" style="height: 512px; width: 900px;"></p>
+
+<p>Якщо застосувати <code>display: grid</code> до <code>box1</code>, то ця Grid-смуга також стане Grid-сіткою. А елементи, що в ній містяться, надалі розташовуватимуться на цій новій Grid-сітці.</p>
+
+<pre class="brush: css line-numbers  language-css"><code class="language-css">.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}</code></pre>
+
+<div class="hidden">
+<pre class="brush: css line-numbers  language-css"><code class="language-css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.box {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+
+.box1 {
+  grid-column: 1 / 4;
+}
+
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}</code></pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('nesting', '600', '340') }}</p>
+
+<p>В цьому випадку, дочірня сітка немає відношення до батьківської. Як ви можете бачити на прикладі, вона не наслідує батьківськи {{cssxref("grid-gap")}}, а також лінії дочірньої сітки не вирівнюються по лініях батьківської сітки.</p>
+
+<h3 id="Під-сітка">Під-сітка</h3>
+
+<p>У робочій чорнетці специфікації Grid Level 2 є функція під назвою <em>subgrid</em>, яка має дозволити нам створювати вкладені сітки, які б використовували визначення смуги батьківської сітки.</p>
+
+<div class="note">
+<p><strong>Примітка:</strong> під-сітки ще не реалізовані в жодному браузері, і їхня специфікація ще може змінюватися.</p>
+</div>
+
+<p>У поточній специфікації ми відредагуємо вищезгаданий приклад вкладеної Grid-сітки, змінивши визначення смуги з <code>grid-template-columns: repeat(3, 1fr)</code> , на <code>grid-template-columns: subgrid</code>. Вкладена сітка надалі використовуватиме батьківські Grid-смуги до елементів макета.</p>
+
+<pre class="brush: css line-numbers  language-css"><code class="language-css">.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  display: grid;
+  grid-template-columns: subgrid;
+}</code></pre>
+
+<h2 id="Нашарування_елементів_за_допомогою_z-index">Нашарування елементів за допомогою <code>z-index</code></h2>
+
+<p>Grid-елементи можуть займати одну і ту ж саму клітину. Якщо повернутись до нашого прикладу з елементами, що розташовані за номером рядка, ми можемо змінити його так, щоб два елементи перекривали один одного.</p>
+
+<div id="l_ex">
+<pre class="brush: html line-numbers  language-html"><code class="language-html">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;One&lt;/div&gt;
+  &lt;div class="box box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+<pre class="brush: css line-numbers  language-css"><code class="language-css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+}</code></pre>
+
+<div class="hidden">
+<pre class="brush: css line-numbers  language-css"><code class="language-css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.box {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}</code>
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('l_ex', '230', '420') }}</p>
+
+<p>Елемент <code>box2</code> тепер перекриває <code>box1</code>, він відображається зверху, тому що пізніше трапляеться в коді документу.</p>
+
+<h3 id="Керування_послідовністю">Керування послідовністю</h3>
+
+<p>Ми можемо контролювати порядок, в якому елементи накладаються один на одного, використовуючи властивість <code>z-index</code>. Якщо надати <code>box2</code> нижчий <code>z-index</code>, ніж в <code>box1</code>, то він і буде показаний нижче у стеці.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  z-index: 2;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+  z-index: 1;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;One&lt;/div&gt;
+  &lt;div class="box box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css line-numbers  language-css"><code class="language-css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.box {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}</code></pre>
+</div>
+
+<p>{{ EmbedLiveSample('Controlling_the_order', '230', '420') }}</p>
+
+<h2 id="Наступні_кроки">Наступні кроки</h2>
+
+<p>У цій статті ми швидко переглянули специфікацію Grid Layout. Пограйте з прикладами коду, а потім переходьте до <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">наступної частини цього посібника, де ми насправді почнемо заглиблюватись в деталі CSS Grid Layout</a>.</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/uk/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/uk/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/uk/web/css/css_grid_layout/index.html b/files/uk/web/css/css_grid_layout/index.html
new file mode 100644
index 0000000000..e403f8364f
--- /dev/null
+++ b/files/uk/web/css/css_grid_layout/index.html
@@ -0,0 +1,245 @@
+---
+title: CSS Grid Layout
+slug: Web/CSS/CSS_Grid_Layout
+tags:
+  - CSS
+  - Grid Layout
+  - Grids
+  - Layout
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/CSS_Grid_Layout
+---
+<p><strong>CSS Grid layout</strong> відзначається тим, що розділяє сторінку на ділянки чи задає співвідношення між елементами, побудованими з HTML примітивів, з точки зору розміру, положення та слоїв.</p>
+
+<p>Подібно до таблиць, CSS Grid дозволяє автору вирівнювати елементи у стовпчиках та рядках. Однак, CSS Grid, в порівнянні з таблицями, надає більше можливостей і полегшує створення макетів. Наприклад, дочірні елементи Grid-контейнера можуть перекривати один одного і нашаровуватись, подібно до позиційованих CSS елементів.</p>
+
+<h2 id="Basic_Example" name="Basic_Example">Базовий приклад</h2>
+
+<p><span id="result_box" lang="uk"><span>У наведеному нижче прикладі показана сітка з трьома стовпчиками, в якій нові рядки мають мінімальну висоту 100 пікселів, а максимальна висота вираховується автоматично.</span> <span>Елементи розміщені в сітці використовуючи лінійне розташування .</span></span></p>
+
+<div id="example">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+.wrapper {
+  max-width: 940px;
+  margin: 0 auto;
+}
+
+.wrapper &gt; div {
+  border: 2px solid rgb(233,171,88);
+  border-radius: 5px;
+  background-color: rgba(233,171,88,.5);
+  padding: 1em;
+  color: #d9480f;
+}</pre>
+</div>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="one"&gt;One&lt;/div&gt;
+  &lt;div class="two"&gt;Two&lt;/div&gt;
+  &lt;div class="three"&gt;Three&lt;/div&gt;
+  &lt;div class="four"&gt;Four&lt;/div&gt;
+  &lt;div class="five"&gt;Five&lt;/div&gt;
+  &lt;div class="six"&gt;Six&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+.one {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+.two {
+  grid-column: 2 / 4;
+  grid-row: 1 / 3;
+}
+.three {
+  grid-column: 1;
+  grid-row: 2 / 5;
+}
+.four {
+  grid-column: 3;
+  grid-row: 3;
+}
+.five {
+  grid-column: 2;
+  grid-row: 4;
+}
+.six {
+  grid-column: 3;
+  grid-row: 4;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('example', '500', '440') }}</p>
+</div>
+
+<h2 id="Посилання">Посилання</h2>
+
+<h3 id="CSS_властивості">CSS властивості</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-template-areas")}}</li>
+ <li>{{cssxref("grid-template")}}</li>
+ <li>{{cssxref("grid-auto-columns")}}</li>
+ <li>{{cssxref("grid-auto-rows")}}</li>
+ <li>{{cssxref("grid-auto-flow")}}</li>
+ <li>{{cssxref("grid")}}</li>
+ <li>{{cssxref("grid-row-start")}}</li>
+ <li>{{cssxref("grid-column-start")}}</li>
+ <li>{{cssxref("grid-row-end")}}</li>
+ <li>{{cssxref("grid-column-end")}}</li>
+ <li>{{cssxref("grid-row")}}</li>
+ <li>{{cssxref("grid-column")}}</li>
+ <li>{{cssxref("grid-area")}}</li>
+ <li>{{cssxref("grid-row-gap")}}</li>
+ <li>{{cssxref("grid-column-gap")}}</li>
+ <li>{{cssxref("grid-gap")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_функції">CSS функції</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("repeat", "repeat()")}}</li>
+ <li>{{cssxref("minmax", "minmax()")}}</li>
+ <li>{{cssxref("fit-content", "fit-content()")}}</li>
+</ul>
+</div>
+
+<h3 id="Глосарій">Глосарій</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Lines">Grid Lines</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Tracks">Grid Tracks</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Cell">Grid Cell</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Areas">Grid Area</a></li>
+ <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Rows">Grid row</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Column">Grid column</a></li>
+</ul>
+</div>
+
+<h2 id="Посібники">Посібники</h2>
+
+<div class="index">
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of Grid Layout</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship of Grid Layout to other layout methods</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Layout using line-based placement</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in CSS Grid Layout</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid Layout</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Grid, Logical Values and Writing Modes</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and accessibility</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid and progressive enhancement</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">Realising common layouts using CSS Grid</a></li>
+</ul>
+</div>
+
+<h2 id="Зовнішні_ресурси">Зовнішні ресурси</h2>
+
+<ul>
+ <li><a href="http://labs.jensimmons.com/">Examples from Jen Simmons</a></li>
+ <li><a href="http://gridbyexample.com/">Grid by Example - a collection of usage examples and video tutorials</a></li>
+ <li><a href="https://tympanus.net/codrops/css_reference/grid/">Codrops Grid Reference</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox DevTools CSS Grid Inspector</a></li>
+ <li><a href="https://mozilladevelopers.github.io/playground/">CSS Grid Playground</a></li>
+ <li><a href="http://cssgridgarden.com">Grid Garden</a> - Гра для вивчення CSS grid</li>
+</ul>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Grid') }}</td>
+   <td>{{ Spec2('CSS3 Grid') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/uk/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/uk/web/css/css_grid_layout/relationship_of_grid_layout/index.html
new file mode 100644
index 0000000000..7f715c0986
--- /dev/null
+++ b/files/uk/web/css/css_grid_layout/relationship_of_grid_layout/index.html
@@ -0,0 +1,628 @@
+---
+title: Relationship of grid layout to other layout methods
+slug: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
+translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
+---
+<p>CSS Grid Layout has been designed to work alongside other parts of CSS, as part of a complete system for doing the layout. In this guide, I will explain how a grid fits together with other techniques you may already be using.</p>
+
+<h2 id="Grid_and_flexbox">Grid and flexbox</h2>
+
+<p>The basic difference between CSS Grid Layout and <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexbox Layout</a> is that flexbox was designed for layout in one dimension - either a row <em>or</em> a column. Grid was designed for two-dimensional layout - rows, and columns at the same time. The two specifications share some common features, however, and if you have already learned how to use flexbox, the similarities should help you get to grips with Grid.</p>
+
+<h3 id="Одновимірні_макети_проти_двовимірних">Одновимірні макети проти двовимірних</h3>
+
+<p>A simple example can demonstrate the difference between one- and two-dimensional layouts.</p>
+
+<p>In this first example, I am using flexbox to lay out a set of boxes. I have five child items in my container, and I have given the flex properties values so that they can grow and shrink from a flex-basis of 200 pixels.</p>
+
+<p>I have also set the {{cssxref("flex-wrap")}} property to <code>wrap</code>, so that if the space in the container becomes too narrow to maintain the flex basis, items will wrap onto a new row.</p>
+
+<div id="onedtwod">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+.wrapper &gt; div {
+  flex: 1 1 200px;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('onedtwod', '500', '230') }}</p>
+
+<p>In the image, you can see that two items have wrapped onto a new line. These items are sharing the available space and not lining up underneath the items above. This is because when you wrap flex items, each new row (or column when working by column) becomes a new flex container. Space distribution happens across the row.</p>
+
+<p>A common question then is how to make those items line up. This is where you want a two-dimensional layout method: You want to control the alignment by row and column, and this is where grid comes in.</p>
+
+<h3 id="The_same_layout_with_CSS_grids">The same layout with CSS grids</h3>
+
+<p>In this next example, I create the same layout using Grid. This time we have three <code>1fr</code> column tracks. We do not need to set anything on the items themselves; they will lay themselves out one into each cell of the created grid. As you can see they stay in a strict grid, lining up in rows and columns. With five items, we get a gap on the end of row two.</p>
+
+<div class="Two_Dimensional_With_Grid">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}</p>
+</div>
+
+<p>A simple question to ask yourself when deciding between grid or flexbox is:</p>
+
+<ul>
+ <li>do I only need to control the layout by row <u><em>or</em></u> column – use a flexbox</li>
+ <li>do I need to control the layout by row <u><em>and</em></u> column – use a grid</li>
+</ul>
+
+<h3 id="Content_out_or_layout_in">Content out or layout in?</h3>
+
+<p>In addition to the one-dimensional versus two-dimensional distinction, there is another way to decide if you should use flexbox or grid for a layout. Flexbox works from the content out. An ideal use case for flexbox is when you have a set of items and want to space them out evenly in a container. You let the size of the content decide how much individual space each item takes up. If the items wrap onto a new line, they will work out their spacing based on their size and the available space <em>on that line</em>.</p>
+
+<p>Grid works from the layout in. When you use CSS Grid Layout you create a layout and then you place items into it, or you allow the auto-placement rules to place the items into the grid cells according to that strict grid. It is possible to create tracks that respond to the size of the content, however, they will also change the entire track.</p>
+
+<p>If you are using flexbox and find yourself disabling some of the flexibility, you probably need to use CSS Grid Layout. An example would be if you are setting a percentage width on a flex item to make it line up with other items in a row above. In that case, a grid is likely to be a better choice.</p>
+
+<h3 id="Box_alignment">Box alignment</h3>
+
+<p>The feature of flexbox that was most exciting to many of us was that it gave us proper alignment control for the first time. It made it easy to center a box on the page. Flex items can stretch to the height of the flex container, meaning that equal height columns were possible. These were things we have wanted to do for a very long time, and have come up with all kinds of hacks to at least create the visual effect of.</p>
+
+<p>The alignment properties from the flexbox specification have been added to a new specification called <a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a>. This means that they can be used in other specifications, including Grid Layout. In the future, they may well apply to other layout methods as well.</p>
+
+<p>In a later guide in this series, I’ll be taking a proper look at Box Alignment and how it works in Grid Layout. For now, here is a comparison between simple examples of flexbox and grid.</p>
+
+<p>In the first example, which uses flexbox, I have a container with three items inside. The wrapper {{cssxref("min-height")}} is set, so it defines the height of the flex container. I have set {{cssxref("align-items")}} on the flex container to <code>flex-end</code> so the items will line up at the end of the flex container. I have also set the {{cssxref("align-self")}} property on <code>box1</code> so it will override the default and stretch to the height of the container and on <code>box2</code> so it aligns to the start of the flex container.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: flex;
+  align-items: flex-end;
+  min-height: 200px;
+}
+.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: flex-start;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Box_alignment', '300', '230') }}</p>
+
+<h3 id="Alignment_in_CSS_Grids">Alignment in CSS Grids</h3>
+
+<p>This second example uses a grid to create the same layout. This time we are using the box alignment properties as they apply to a grid layout. So we align to <code>start</code> and <code>end</code> rather than <code>flex-start</code> and <code>flex-end</code>. In the case of a grid layout, we are aligning the items inside their grid area. In this case that is a single grid cell, but it could be an area made up of several grid cells.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  align-items: end;
+  grid-auto-rows: 200px;
+}
+.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: start;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310') }}</p>
+
+<h3 id="The_fr_unit_and_flex-basis">The <code>fr</code> unit and <code>flex-basis</code></h3>
+
+<p>We have already seen how the <code>fr</code> unit works to assign a proportion of available space in the grid container to our grid tracks. The <code>fr</code> unit, when combined with the {{cssxref("minmax", "minmax()")}} function can give us very similar behavior to the <code>flex</code> properties in flexbox while still enabling the creation of a layout in two dimensions.</p>
+
+<p>If we look back at the example where I demonstrated the difference between one and two-dimensional layouts, you can see there is a difference between the way of the two layouts work responsively. With the flex layout, if we drag our window wider and smaller, the flexbox does a nice job of adjusting the number of items in each row according to the available space. If we have a lot of space all five items can fit on one row. If we have a very narrow container we may only have space for one.</p>
+
+<p>In comparison, the grid version always has three column tracks. The tracks themselves will grow and shrink, but there are always three since we asked for three when defining our grid.</p>
+
+<h4 id="Auto-filling_grid_tracks">Auto-filling grid tracks</h4>
+
+<p>We can create a similar effect to flexbox, while still keeping the content arranged in strict rows and columns, by creating our track listing using repeat notation and the <code>auto-fill</code> and <code>auto-fit</code> properties.</p>
+
+<p>In this next example, I have used the <code>auto-fill</code> keyword in place of an integer in the repeat notation and set the track listing to 200 pixels. This means that grid will create as many 200 pixels column tracks as will fit in the container.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 200px);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }}</p>
+
+<h3 id="A_flexible_number_of_tracks">A flexible number of tracks</h3>
+
+<p>This isn’t quite the same as flexbox. In the flexbox example, the items are larger than the 200 pixel basis before wrapping. We can achieve the same in grid by combining <code>auto-fill</code> and the {{cssxref("minmax", "minmax()")}} function. In this next example, I create auto filled tracks with <code>minmax</code>. I want my tracks to be a minimum of 200 pixels, so I set the maximum to be <code>1fr</code>. Once the browser has worked out how many times 200 pixels will fit into the container–also taking account of grid gaps–it will treat the <code>1fr</code> maximum as an instruction to share out the remaining space between the items.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+</pre>
+
+<p>{{ EmbedLiveSample('A_flexible_number_of_tracks', '500', '170') }}</p>
+
+<p>We now have the ability to create a grid with a flexible number of flexible tracks, but see items laid out on the grid aligned by rows and columns at the same time.</p>
+
+<h2 id="Grid_and_absolutely_positioned_elements">Grid and absolutely positioned elements</h2>
+
+<p>Grid interacts with absolutely positioned elements, which can be useful if you want to position an item inside a grid or grid area. The specification defines the behavior when a grid container is a containing block and a parent of the absolutely positioned item.</p>
+
+<h3 id="A_grid_container_as_containing_block">A grid container as containing block</h3>
+
+<p>To make the grid container a containing block you need to add the position property to the container with a value of relative, just as you would make a containing block for any other absolutely positioned items. Once you have done this, if you give a grid item <code>position: absolute</code> it will take as its containing block the grid container or, if the item also has a grid position, the area of the grid it is placed into.</p>
+
+<p>In the below example I have a wrapper containing four child items. Item three is absolutely positioned and also placed on the grid using line-based placement. The grid container has <code>position: relative</code> and so becomes the positioning context of this item.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;
+   This block is absolutely positioned. In this example the grid container is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the area it has been placed into.
+  &lt;/div&gt;
+  &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-auto-rows: 200px;
+  grid-gap: 20px;
+  position: relative;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  position: absolute;
+  top: 40px;
+  left: 40px;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('A_grid_container_as_containing_block', '500', '330') }}</p>
+
+<p>You can see that the item is taking the area from grid row line 2 to 4, and starting after line 1. Then it is offset in that area using the top and left properties. However, it has been taken out of flow as is usually for absolutely positioned items and so the auto-placement rules now place items into the same space. The item also doesn’t cause the additional row to be created to span to row line 3.</p>
+
+<p>If we remove <code>position:</code> <code>absolute</code> from the rules for <code>.box3</code> you can see how it would display without the positioning.</p>
+
+<h3 id="A_grid_container_as_parent">A grid container as parent</h3>
+
+<p>If the absolutely positioned child has a grid container as a parent but that container does not create a new positioning context, then it is taken out of flow as in the previous example. The positioning context will be whatever element creates a positioning context as is common to other layout methods. In our case, if we remove <code>position:</code> <code>relative</code> from the wrapper above, positioning context is from the viewport, as shown in this image.</p>
+
+<p><img alt="Image of grid container as parent" src="https://mdn.mozillademos.org/files/14661/2_abspos_example.png" style="height: 408px; width: 1702px;"></p>
+
+<p>Once again the item no longer participates in the grid layout in terms of sizing or when other items are auto-placed.</p>
+
+<h3 id="With_a_grid_area_as_the_parent">With a grid area as the parent</h3>
+
+<p>If the absolutely positioned item is nested inside a grid area then you can create a positioning context on that area. In the below example we have our grid as before but this time I have nested an item inside <code>.box3</code> of the grid.</p>
+
+<p>I have given <code>.box3</code> position relative and then positioned the sub-item with the offset properties. In this case, the positioning context is the grid area.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three
+    &lt;div class="abspos"&gt;
+     This block is absolutely positioned. In this example the grid area is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the grid area.
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-auto-rows: 200px;
+  grid-gap: 20px;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  position: relative;
+}
+.abspos {
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  background-color: rgba(255,255,255,.5);
+  border: 1px solid rgba(0,0,0,0.5);
+  color: #000;
+  padding: 10px;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('With_a_grid_area_as_the_parent', '500', '420') }}</p>
+
+<h2 id="Grid_and_display_contents">Grid and <code>display: contents</code></h2>
+
+<p>A final interaction with another layout specification that is worth noting is the interaction between CSS Grid Layout and <code>display: contents</code>. The <code>contents</code> value of the display property is a new value that is described in the <a href="https://drafts.csswg.org/css-display/#box-generation">Display specification</a> as follows:</p>
+
+<blockquote>
+<p>“The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.”</p>
+</blockquote>
+
+<p>If you set an item to <code>display:</code> <code>contents</code> the box it would normally create disappears, and the boxes of the child elements appear as if they have risen up a level. This means that children of a grid item can become grid items. Sound odd? Here is a simple example. In the following markup, I have a grid and the first item on the grid is set to span all three column tracks. It contains three nested items. As these items are not direct children, they don’t become part of the grid layout and so display using regular block layout.</p>
+
+<div id="Display_Contents_Before">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.box {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;
+    &lt;div class="nested"&gt;a&lt;/div&gt;
+    &lt;div class="nested"&gt;b&lt;/div&gt;
+    &lt;div class="nested"&gt;c&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="box box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+}
+
+</pre>
+
+<p>{{ EmbedLiveSample('Display_Contents_Before', '400', '420') }}</p>
+</div>
+
+<p>If I now add <code>display:</code> <code>contents</code> to the rules for <code>box1</code>, the box for that item vanishes and the sub-items now become grid items and lay themselves out using the auto-placement rules.</p>
+
+<div id="Display_Contents_After">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.box {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;
+    &lt;div class="nested"&gt;a&lt;/div&gt;
+    &lt;div class="nested"&gt;b&lt;/div&gt;
+    &lt;div class="nested"&gt;c&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="box box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  display: contents;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Display_Contents_After', '400', '330') }}</p>
+</div>
+
+<p>This can be a way to get items nested into the grid to act as if they are part of the grid, and is a way around some of the issues that would be solved by subgrids once they are implemented. You can also use <code>display:</code> <code>contents</code> in a similar way with flexbox to enable nested items to become flex items.</p>
+
+<p>As you can see from this guide, CSS Grid Layout is just one part of your toolkit. Don’t be afraid to mix it with other methods of doing layout to get the different effects you need.</p>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox Guides</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Columns">Multiple-column Layout Guides</a></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values, and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/uk/web/css/css_selectors/index.html b/files/uk/web/css/css_selectors/index.html
new file mode 100644
index 0000000000..20f89ab44f
--- /dev/null
+++ b/files/uk/web/css/css_selectors/index.html
@@ -0,0 +1,116 @@
+---
+title: CSS селектори
+slug: Web/CSS/CSS_Selectors
+translation_of: Web/CSS/CSS_Selectors
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p class="summary"><span class="seoSummary"><strong>CSS селектори </strong> означують елемнти до яких застосовується набір правил CSS. </span></p>
+
+<h2 id="Прості_селектори">Прості селектори</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/Type_selectors">Селектор за типом (Type selector)</a></dt>
+ <dd>Вибирає всі елементи, що відповідають вказаному імені вузла.<br>
+ <strong>Syntax:</strong> <code><var>eltname</var></code><br>
+ <strong>Example:</strong> <code>input</code> буде відповідати будь-якому елементу {{HTMLElement("input")}} .</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Class_selectors">Селектор за класом (Class selector)</a></dt>
+ <dd>Вибирає всі елементи, що відповідають вказаному атрибуту <code>class</code>.<br>
+ <strong>Syntax:</strong> <code>.<var>classname</var></code><br>
+ <strong>Example:</strong> <code>.index</code> буде відповідати будь-якому елементу, що має клас "index".</dd>
+ <dt><a href="/en-US/docs/Web/CSS/ID_selectors">Селектор за ID (ID selector)</a></dt>
+ <dd>Вибирає елемент, відповідно до його значення атрибуту <code>id</code>. В документі повинен бути тільки один елемент з вказаним ID.<br>
+ <strong>Syntax:</strong> <code>#<var>idname</var></code><br>
+ <strong>Example:</strong> <code>#toc</code> буде відповідати елементу, що має ID зі значенням "toc".</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Universal_selectors">Універсальний селектор (Universal selector)</a></dt>
+ <dd>Вибирає усі елементи. <span class="tlid-translation translation"><span title="">За бажанням, він може бути обмежений певним простором імен або всім простором імен.</span></span><br>
+ <strong>Syntax:</strong> <code>*</code> <code><var>ns</var>|*</code> <code>*|*</code><br>
+ <strong>Example:</strong> <code>*</code> буде відповідати усім елементам документу.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Attribute_selectors">Селектор за атрибутом (Attribute selector)</a></dt>
+ <dd>Вибирає елементи, відповідно до його значення вказаного атрибуту.<br>
+ <strong>Syntax:</strong> <code>[<var>attr</var>]</code> <code>[<var>attr</var>=<var>value</var>]</code> <code>[<var>attr</var>~=<var>value</var>]</code> <code>[<var>attr</var>|=<var>value</var>]</code> <code>[<var>attr</var>^=<var>value</var>]</code> <code>[<var>attr</var>$=<var>value</var>]</code> <code>[<var>attr</var>*=<var>value</var>]</code><br>
+ <strong>Example:</strong> <code>[autoplay]</code> буде відповідати всім елементам що мають виставлений атрибут <code>autoplay</code> (в будь яке значення).</dd>
+</dl>
+
+<h2 id="Комбінатори">Комбінатори</h2>
+
+<dl>
+ <dt><a href="/uk/docs/Web/CSS/Adjacent_sibling_combinator">Комбінатор прилеглого елемента</a></dt>
+ <dd>Комбінатор <code>+</code> вибирає прилеглі  елементи, що мають спільного нащадка (рівноправні). Це означає, що наступний елемент слідує безпосередньо за попереднім, і в обидвох спільний предок (обидва класи знаходятся в одному старшому класі).<br>
+ <strong>Синтаксис:</strong> <code style="white-space: nowrap;"><var>A</var> + <var>B</var></code><br>
+ <strong>Приклад: </strong> під дію <code>h2 + p</code> підпадуть усі випадки, у яких елемент  {{HTMLElement("p")}} знаходиться безпосередньо після елемента  {{HTMLElement("h2")}}.</dd>
+ <dt><a href="/uk/docs/Web/CSS/General_sibling_combinator">Загальний комбінатор прилеглих елементів</a></dt>
+ <dd>Комбінатор <code>~</code> обирає сусідні елементи. Це значить, що другий елемент слідує за першим (хоча і не обов'язково безпосередньо зразу після нього), і обидва елементи знаходяться в межах лдного предка.<br>
+ <strong>Синтаксис:</strong> <code style="white-space: nowrap;"><var>A</var> ~ <var>B</var></code><br>
+ <strong>Приклад:</strong> <code>p ~ span</code> відповідатиме усім випадкам, коли елемент {{HTMLElement("span")}} слідує за елементом {{HTMLElement("p")}}.</dd>
+ <dt><a href="/uk/docs/Web/CSS/Child_combinator">Комбінатор прямого нащадка</a></dt>
+ <dd>Комбінатор <code>&gt;</code> обирає усі вузли (теги одного класу), які є прямими нащадками елемента, вказзаного першим.<br>
+ <strong>Синтаксис:</strong> <code style="white-space: nowrap;"><var>A</var> &gt; <var>B</var></code><br>
+ <strong>Приклад:</strong> <code>ul &gt; li</code> відповідатиме усім випадкам, коли елемент  {{HTMLElement("li")}} буде вкладеним прямо в елемент {{HTMLElement("ul")}} (елемент  {{HTMLElement("ul")}} складається з {{HTMLElement("li")}}, що значить, що {{HTMLElement("li")}} є його прямим нащадком.</dd>
+ <dt><a href="/uk/docs/Web/CSS/Descendant_combinator">Комбінатор за нащадками (Descendant combinator)</a></dt>
+ <dd>Комбінатор <code> </code> (space) обирає всі вузли, що є нащадками першого елемента.<br>
+ <strong>Синтаксис:</strong> <code style="white-space: nowrap;"><var>A</var> <var>B</var></code><br>
+ <strong>Приклад:</strong> <code>div span</code> обиратиме усі елементи {{HTMLElement("span")}}, що знаходяться всередині елемента {{HTMLElement("div")}}, хоча і необов'язково напряму (елемент {{HTMLElement("span")}} може бути всередині {{HTMLElement("table")}}, яка знаходиться в {{HTMLElement("div")}}).</dd>
+ <dt><a href="/uk/docs/Web/CSS/Column_combinator">Стовпчиковий комбінатор</a> {{Experimental_Inline}}</dt>
+ <dd>Комбінатор <code>||</code> вибирає усі вузли, що належать стовпчику.<br>
+ <strong>Синтаксис:</strong> <code style="white-space: nowrap;"><var>A</var> || <var>B</var></code><br>
+ <strong>Приклад:</strong> <code>col || td</code> застосовуватиметься до усіх елементів {{HTMLElement("td")}}, що потрапляють в зону застосування {{HTMLElement("col")}}.</dd>
+</dl>
+
+<h2 id="Псевдо-класи">Псевдо-класи</h2>
+
+<dl>
+ <dt><a href="/uk/docs/Web/CSS/Pseudo-classes">Псевдо-класи</a> роблятть можливим вибір елементів, базуючись на інформаціїї, що не знаходиться в дереві елементів.</dt>
+ <dd><strong>Приклад:</strong> <code>a:visited</code> застосовуватиметься для усіх {{HTMLElement("a")}}, що були відвідані користувачем.</dd>
+</dl>
+
+<h2 id="Псевдо-елементи">Псевдо-елементи</h2>
+
+<dl>
+ <dt><a href="/uk/docs/Web/CSS/Pseudo-elements">Псевдо-елементи</a> представляють собою об'єкти, що не включені до HTML.</dt>
+ <dd><strong>Приклад:</strong> <code>p::first-line</code> застосовуватиметься лише до першої стрічки елементів {{HTMLElement("p")}}.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Added the <code>||</code> column combinator, grid structural selectors, logical combinators, location, time-demensional, resource state, linguistic and UI pseudo-classes</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td>Added the <code>~</code> general sibling combinator and tree-structural pseudo-classes.<br>
+    Made pseudo-elements use a <code>::</code> double-colon prefix. Additional attribute selectors</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "selector.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Added the <code>&gt;</code> child and <code>+</code> adjacent sibling combinators.<br>
+    Added the <strong>universal</strong> and <strong>attribute</strong> selectors.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>See the <a href="/en-US/docs/Web/CSS/Pseudo-classes#Specifications">pseudo-class</a> and <a href="/en-US/docs/Web/CSS/Pseudo-elements#Specifications">pseudo-element</a> specification tables for details on those.</p>
+
+<h2 id="Див_також">Див також</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Specificity">CSS Specificity</a></li>
+</ul>
diff --git a/files/uk/web/css/filter/index.html b/files/uk/web/css/filter/index.html
new file mode 100644
index 0000000000..9339974d94
--- /dev/null
+++ b/files/uk/web/css/filter/index.html
@@ -0,0 +1,1184 @@
+---
+title: filter
+slug: Web/CSS/filter
+translation_of: Web/CSS/filter
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Опис">Опис</h2>
+
+<p><span class="seoSummary"><code><font face="Open Sans, Arial, sans-serif">Властивість </font><strong>filter</strong></code> дає можливість застосувати до елементів такі графічні ефекти, як розмиття (blurring), збільшення чіткості (sharpening), зміна кольорів (color shifting). Зазвичай фільтри викорустовуються для налаштування рендерингу зображень, фонів (backgrounds) та границь (borders).</span></p>
+
+<p>У CSS стандарт включені декілька функцій, які досягають визначених ефектів. Ви можете також посилатися на SVG-фільтр за допомогою посилання(URL) на <a href="/en-US/docs/Web/SVG/Element/filter">SVG filter element</a>.</p>
+
+<div class="note"><strong>Примітка: </strong>Більш старі версії браузера Windows Internet Explorer (4.0 - 9.0) підтримували нестандартний <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532853(v=vs.85).aspx">"filter"</a>, який з того часу є застарілим.</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">filter: url("filters.svg#filter-id");
+filter: blur(5px);
+filter: brightness(0.4);
+filter: contrast(200%);
+filter: drop-shadow(16px 16px 20px blue);
+filter: grayscale(50%);
+filter: hue-rotate(90deg);
+filter: invert(75%);
+filter: opacity(25%);
+filter: saturate(30%);
+filter: sepia(60%);
+
+/* Apply multiple filters */
+filter: contrast(175%) brightness(3%);
+
+/* Global values */
+filter: inherit;
+filter: initial;
+filter: unset;
+</pre>
+
+<p>З функцією використовуйте наступне:</p>
+
+<pre class="syntaxbox">filter: &lt;filter-function&gt; [&lt;filter-function&gt;]* | none
+</pre>
+
+<p>Для посилання на SVG {{SVGElement("filter")}} елемент використовуйте наступне:</p>
+
+<pre class="syntaxbox">filter: url(file.svg#filter-element-id)
+</pre>
+
+<h3 id="Формальний_синтаксис">Формальний синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Приклади використання визначених функцій подаються нижче. Дивіться кожну функцію для конкретного прикладу.</p>
+
+<pre class="brush: css">.mydiv { filter: grayscale(50%) }
+
+/* зробить сірим на 50% та розмиє на 10px */
+img {
+  filter: grayscale(0.5) blur(10px);
+}</pre>
+
+<p>Приклади використання URL функції з SVG ресурсом наведені нижче.</p>
+
+<pre class="brush: css">.target { filter: url(#c1); }
+
+.mydiv { filter: url(commonfilters.xml#large-blur) }
+</pre>
+
+<h2 id="Функції">Функції</h2>
+
+<p>Для того, щоб використовувати CSS властивість <code>filter</code>, необхідно вказати значення (value) для однієї з наступних функцій. Якщо значення не є валідним, функція повертає "none". За винятком зазначених випадків, функції, які приймають значення, виражені у відсотках (наприклад, 34%), також приймають і ті значення, що виражені десятковим дробом (наприклад, 0.34).</p>
+
+<h3 id="url()"><code>url()</code></h3>
+
+<p>Функція url() приймає місцезнаходження XML-файлу, який визначає SVG-фільтр і має містити якір(anchor) до конкретного фільтр-елемента.</p>
+
+<pre class="brush: css">filter: url(resources.svg#c1)
+</pre>
+
+<h3 id="blur()"><code>blur()</code></h3>
+
+<p>Розмиття. Застосовує гаусове (Gaussian) розмиття до вхідного зображення. Значення радіусу (‘radius’) встановлює значення стандартного відхилення до гауссової (Gaussian) функції, або на скільки пікселі екрану мають зливатися один з одним. Тому більше значення забеспечить більше розмиття. Якщо жоден параметр не вказаний, використовується значення "0". Параметр визначений, як CSS довжина, але не приймає значень у відсотках.</p>
+
+<pre class="brush: css">filter: blur(5px)
+</pre>
+
+<div id="blur_example" style="display: none;">
+<pre class="brush: html">  &lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg id="img3" viewbox="0 0 233 176"&gt;
+  &lt;filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%" &gt;
+    &lt;feGaussianBlur in="SourceGraphic" stdDeviation="5" /&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3710/Test_Form_2.jpeg" filter="url(#svgBlur)" x="5%" y="5%" width="212px" height="161px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3711/Test_Form_2_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida, Arial, Helvetica, sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -webkit-filter:blur(5px);
+  -ms-filter:blur(5px);
+  filter:blur(5px); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0;
+  margin: 0 0 1.286em;
+  height: 100%;
+  width: 85%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"&gt;
+    &lt;feGaussianBlur in="SourceGraphic" stdDeviation="5"/&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('blur_example','100%','236px','')}}</p>
+
+<h3 id="brightness()"><code>brightness()</code></h3>
+
+<p>Яскравість. Застосовує лінійний множник(мультиплікатор) до вхідного зображення, щоб зробити його більш або менш яскравим. Значення "<code>0%" </code>створить абсолютно чорне зображення. Значення "100%" залишить зображення без змін. Інші значення є лінійними мультиплікаторами, що застосовуються до ефекту. Значення, більші за "100%", дозволяються і дають більш яскраві результати. Якщо параметр ‘amount’ не вказаний, використовується значення "1".</p>
+
+<pre class="brush: css">filter: brightness(0.5)</pre>
+
+<pre class="brush: html">&lt;svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"&gt;
+ &lt;filter id="brightness"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncR type="linear" slope="[amount]"/&gt;
+        &lt;feFuncG type="linear" slope="[amount]"/&gt;
+        &lt;feFuncB type="linear" slope="[amount]"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;</pre>
+
+<div id="brightness_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217"&gt;
+ &lt;filter id="brightness"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncR type="linear" slope="2"/&gt;
+        &lt;feFuncG type="linear" slope="2"/&gt;
+        &lt;feFuncB type="linear" slope="2"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3708/Test_Form.jpg" filter="url(#brightness)" width="286px" height="217px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3709/Test_Form_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:brightness(2);
+  -webkit-filter:brightness(2);
+  -o-filter:brightness(2);
+  -ms-filter:brightness(2);
+  filter:brightness(2); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  height:100%;
+  width: 85%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('brightness_example','100%','231px','')}}</p>
+
+<h3 id="contrast()"><code>contrast()</code></h3>
+
+<p>Контрастність. Налаштовує контраст зображення. Значення "<code>0%"</code> створить абсолютно сіре зображення. Значення "100%" залишить зображення без змін. Значення, більші за "100%", дозволяються і дають більш контрастні результати. Якщо параметр ‘amount’ не вказаний, використовується значення "1". </p>
+
+<pre class="brush: css">filter: contrast(200%)
+</pre>
+
+<pre class="brush: html">&lt;svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="contrast"&gt;
+    &lt;feComponentTransfer&gt;
+      &lt;feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
+      &lt;feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
+      &lt;feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;
+</pre>
+
+<div id="contrast_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_3.jpeg" id="img1" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_3.jpg" id="img2" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151"&gt;
+ &lt;filter id="contrast"&gt;
+    &lt;feComponentTransfer&gt;
+      &lt;feFuncR type="linear" slope="2" intercept="-0.5"/&gt;
+      &lt;feFuncG type="linear" slope="2" intercept="-0.5"/&gt;
+      &lt;feFuncB type="linear" slope="2" intercept="-0.5"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3712/Test_Form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3713/Test_Form_3_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:contrast(200%);
+  -webkit-filter:contrast(200%);
+  -o-filter:contrast(200%);
+  -ms-filter:contrast(200%);
+  filter:contrast(200%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('contrast_example','100%','203px','')}}</p>
+
+<h3 id="drop-shadow()"><code>drop-shadow()</code></h3>
+
+<p>Відкидання тіні. Застосовує відкидання тіні до вхідного зображення. Це фактично розмита, зміщена версія альфа-маски вхідного зображення,  намальована певним кольором та створена під зображенням. Функція приймає параметр типу &lt;shadow&gt; (визначена у CSS3 Backgrounds), за винятком того, що ключове слово ‘inset’ не дозволене. Дана функція дуже схода на більш укорінену властивість {{cssxref("box-shadow")}}; різниця у тому, що у випадку з фільтрами деякі браузери забезпечують апаратне прискорення для більш високої продуктивності. Нижче наведені параметри параметра &lt;shadow&gt;.</p>
+
+<dl>
+ <dt><code>&lt;offset-x&gt;</code> <code>&lt;offset-y&gt;</code> <small>(required)</small></dt>
+ <dd>Ці два обов'язкові {{cssxref("&lt;length&gt;")}} значення вказують зміщення тіні. &lt;offset-x&gt; визначає горизонтальну відстань. Від’ємні значення розміщують тінь лівіше елемента. &lt;offset-y&gt; визначає вертикальну відстань. Від’ємні значення розміщують тінь вище елемента. Дивіться {{cssxref("&lt;length&gt;")}} можливі одиниці. Якщо обидва значення "0", тінь розміщується за елементом (і може створювати ефект ромиття, якщо вказані &lt;blur-radius&gt; та/або &lt;spread-radius&gt;).</dd>
+ <dt><code>&lt;blur-radius&gt;</code> <small>(optional)</small></dt>
+ <dd>Це необов'язкове третє {{cssxref("&lt;length&gt;")}} значення. Чим більше значення, тим більше розмиття, тим більшою і світлішою стає тінь. Від’ємні значення не дозволені. Якщо значення не визначене, воно буде "0" (межі тіні будуть чіткими).</dd>
+ <dt><code>&lt;spread-radius&gt;</code> <small>(optional)</small></dt>
+ <dd>Це необов'язкове четверте {{cssxref("&lt;length&gt;")}} значення. Додатні значення розширять тінь і зроблять її більшою, а від'ємні - зменшать. Якщо значення не визначено, воно буде "0" (тінь буде мати какий розмір, як зображення). <br>
+ Примітка: Webkit та, можливо, інші браузери, не підтримують цей четвертий параметр; він не виконається, якщо його додати.</dd>
+ <dt><code>&lt;color&gt;</code> <small>(optional)</small></dt>
+ <dd>Дивіться {{cssxref("&lt;color&gt;")}} значення, щоб дізнатися можливі ключові слова та умовні позначення. Якщо значення не вказано, колір залежить від браузера. У Gecko (Firefox), Presto (Opera) та Trident (Internet Explorer), значення {{cssxref("color")}} властивості використовується. З іншого боку, тінь WebKit є прозорою, тому вона є марою, даремною, якщо значення &lt;color&gt; не вказане.</dd>
+</dl>
+
+<pre class="brush: css">filter: drop-shadow(16px 16px 10px black)</pre>
+
+<pre class="brush: html">&lt;svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"&gt;
+ &lt;filter id="drop-shadow"&gt;
+    &lt;feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/&gt;
+    &lt;feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/&gt;
+    &lt;feFlood flood-color="[color]"/&gt;
+    &lt;feComposite in2="offsetblur" operator="in"/&gt;
+    &lt;feMerge&gt;
+      &lt;feMergeNode/&gt;
+      &lt;feMergeNode in="SourceGraphic"/&gt;
+    &lt;/feMerge&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;
+</pre>
+
+<div id="shadow_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4.jpeg" id="img1" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4.jpg" id="img2" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 239 187"&gt;
+ &lt;filter id="drop-shadow"&gt;
+    &lt;feGaussianBlur in="SourceAlpha" stdDeviation="5"/&gt;
+    &lt;feOffset dx="16" dy="16"/&gt;
+    &lt;feMerge&gt;
+      &lt;feMergeNode/&gt;
+      &lt;feMergeNode in="SourceGraphic"/&gt;
+    &lt;/feMerge&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3714/Test_Form_4.jpeg" filter="url(#drop-shadow)" width="213px" height="161px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4_s.jpg" id="img4" class="internal default" src="/files/3715/Test_Form_4_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border - Original image" id="img11" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border - Live example" id="img12" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;
+        &lt;div class="svg-container"&gt;
+          &lt;svg xmlns="http://www.w3.org/2000/svg" id="img13" viewbox="0 0 239 187"&gt;
+            &lt;filter id="drop-shadow2"&gt;
+              &lt;feGaussianBlur in="SourceAlpha" stdDeviation="4"/&gt;
+              &lt;feOffset dx="8" dy="10"/&gt;
+              &lt;feMerge&gt;
+                &lt;feMergeNode/&gt;
+                &lt;feMergeNode in="SourceGraphic"/&gt;
+              &lt;/feMerge&gt;
+            &lt;/filter&gt;
+            &lt;image xlink:href="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png<span style="font-size: 1rem;">" filter="url(#drop-shadow2)" width="213px" height="161px" /&gt;</span>
+          &lt;/svg&gt;
+        &lt;div&gt;
+      &lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border drop shadow - Static example" id="img14" class="internal default" src="/files/8469/Test_Form_4_irregular-shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: drop-shadow(16px 16px 10px black);
+  -webkit-filter: drop-shadow(16px 16px 10px black);
+  -o-filter: drop-shadow(16px 16px 10px black);
+  -ms-filter: drop-shadow(16px 16px 10px black);
+  filter: drop-shadow(16px 16px 10px black);
+}
+#img12 {
+  width:100%;
+  height:auto;
+  -moz-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  -webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  -o-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  -ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+}
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+#irregular-shape {
+  width: 64%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3, #img13 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('shadow_example','100%','300px','')}}</p>
+
+<h3 id="grayscale()"><code>grayscale()</code></h3>
+
+<p>Конвертує вхідне зображення у відтінках сірого. Значення ‘amount’ визначає пропорцію конвертації. Значення "100%" повністю конвертує зображення у відтінки сірого. Значення "0%" залишає зобращення без змін. Значення між "0%" та "100%" є лінійними множниками(мультиплікаторами) ефекта. Якщо парамент ‘amount’  не вказаний, використовується значення "0".</p>
+
+<pre class="brush: css">filter: grayscale(100%)</pre>
+
+<div id="grayscale_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_5.jpeg" id="img1" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_5.jpg" id="img2" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184"&gt;
+ &lt;filter id="grayscale"&gt;
+    &lt;feColorMatrix type="matrix"
+               values="0.2126 0.7152 0.0722 0 0
+                       0.2126 0.7152 0.0722 0 0
+                       0.2126 0.7152 0.0722 0 0
+                       0 0 0 1 0"/&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3716/Test_Form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_5_s.jpg" id="img4" class="internal default" src="/files/3717/Test_Form_5_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:grayscale(100%);
+  -webkit-filter:grayscale(100%);
+  -o-filter:grayscale(100%);
+  -ms-filter:grayscale(100%);
+  filter:grayscale(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('grayscale_example','100%','209px','')}}</p>
+
+<h3 id="hue-rotate()"><code>hue-rotate()</code></h3>
+
+<p>Зміна відтінків. Застосовує зміну відтінків до вхідного зображення. Значення ‘angle’ визначає кількість градусів на колірному крузі (color circle), які будуть застосовані до вхідного зображення. Значення (0deg) залишає зображення без змін. Якщо параметр  ‘angle’  відсутній, використовується значення "0deg". Хоча і не існує максимального значення, ефект значень, більших за "360deg", буде обертатися навколо.</p>
+
+<pre class="brush: css">filter: hue-rotate(90deg)</pre>
+
+<div id="huerotate_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_6.jpeg" id="img1" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_6.jpg" id="img2" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190"&gt;
+ &lt;filter id="hue-rotate"&gt;
+    &lt;feColorMatrix type="hueRotate"
+               values="90"/&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3718/Test_Form_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_6_s.jpg" id="img4" class="internal default" src="/files/3719/Test_Form_6_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:hue-rotate(90deg);
+  -webkit-filter:hue-rotate(90deg);
+  -o-filter:hue-rotate(90deg);
+  -ms-filter:hue-rotate(90deg);
+  filter:hue-rotate(90deg); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="svgHueRotate" &gt;
+    &lt;feColorMatrix type="hueRotate" values="[angle]" /&gt;
+  &lt;filter /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('huerotate_example','100%','221px','')}}</p>
+
+<h3 id="invert()"><code>invert()</code></h3>
+
+<p>Інвертування. Інвертує зразки (samples) у вхідному зображенні. Значення ‘<code class="property">amount</code>’ визначає пропорцію конвертації. Значення "<code>100%"</code> інвертує зображення повністю. Значення "<code>0%"</code> залишає зображення без змін. Значення між "<code>0%"</code> та "<code>100%"</code> є лінійними множниками (мультиплікаторами) ефекта. Якщо параметр ‘<code class="property">amount</code>’  відсутній, використовується значення "<code>0"</code>.</p>
+
+<pre class="brush: css">filter: invert(100%)</pre>
+
+<div id="invert_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_7.jpeg" id="img1" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_7.jpg" id="img2" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276"&gt;
+ &lt;filter id="invert"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncR type="table" tableValues="1 0"/&gt;
+        &lt;feFuncG type="table" tableValues="1 0"/&gt;
+        &lt;feFuncB type="table" tableValues="1 0"/&gt;
+    &lt;/feComponentTransfer&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3720/Test_Form_7.jpeg" filter="url(#invert)" width="183px" height="276px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_7_s.jpg" id="img4" class="internal default" src="/files/3721/Test_Form_7_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: invert(100%);
+  -webkit-filter: invert(100%);
+  -o-filter: invert(100%);
+  -ms-filter: invert(100%);
+  filter: invert(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('invert_example','100%','407px','')}}</p>
+
+<h3 id="opacity()"><code>opacity()</code></h3>
+
+<p>Непрозорість. Застосовує прозорість до вхідного зображення. Значення ‘<code class="property">amount</code>’ визначає пропорцію конвертації. Зі значенням "<code>0%"</code> зображення стає повністю прозорим. Значення "<code>100%"</code> залишає зображення без змін. Значення між "0%" та "100%" є лінійними множниками (мультиплікаторами) ефекта. Це еквівалентно множенню зразків (samples) зображення на  ‘<code class="property">amount</code>’. Якщо параметр ‘amount’  відсутній, використовується значення "1". Ця функція схожа на більш укорінену властивість {{Cssxref("opacity")}}; ріниця полягає у тому,  що у випадку з фільтрами деякі браузери забезпечують апаратне прискорення для більш високої продуктивності.</p>
+
+<pre class="brush: css">filter: opacity(50%)</pre>
+
+<div id="opacity_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_14.jpeg" id="img1" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_14.jpg" id="img2" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183"&gt;
+ &lt;filter id="opacity"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncA type="table" tableValues="0 0.5"&gt;
+    &lt;/feComponentTransfer&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3725/Test_Form_14.jpeg" filter="url(#opacity)" width="276px" height="183px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_14_s.jpg" id="img4" class="internal default" src="/files/3726/Test_Form_14_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: opacity(50%);
+  -webkit-filter: opacity(50%);
+  -o-filter: opacity(50%);
+  -ms-filter: opacity(50%);
+  filter: opacity(50%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('opacity_example','100%','210px','')}}</p>
+
+<h3 id="saturate()"><code>saturate()</code></h3>
+
+<p>Насичення. Робить зображення більш насиченими. Значення ‘<code class="property">amount</code>’ визначає пропорцію конвертації. Зі значенням "<code>0%</code>" зображення стає повністю ненасиченим. Значення "<code>100%</code>" залишає зображення без змін. Інші значення є лінійними множниками (мультиплікаторами) ефекта. Значення, більші за "<code>100%"</code> дозволяються і забеспечують більш насиченими результатами. Якщо параметр ‘<code class="property">amount</code>’ відсутній, використовується значення "1".</p>
+
+<pre class="brush: css">filter: saturate(200%)</pre>
+
+<div id="saturate_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_9.jpeg" id="img1" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_9.jpg" id="img2" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 201 239"&gt;
+ &lt;filter id="saturate"&gt;
+    &lt;feColorMatrix type="saturate"
+               values="2"/&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3722/Test_Form_9.jpeg" filter="url(#saturate)" width="201px" height="239px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_9_s.jpg" id="img4" class="internal default" src="/files/3724/Test_Form_9_s.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: saturate(200%);
+  -webkit-filter: saturate(200%);
+  -o-filter: saturate(200%);
+  -ms-filter: saturate(200%);
+  filter: saturate(200%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('saturate_example','100%','332px','')}}</p>
+
+<h3 id="sepia()"><code>sepia()</code></h3>
+
+<p>Сепія. Конвертує зображення до сепії. Значення ‘<code class="property">amount</code>’ визначає пропорцію конвертації. Значення "<code>100%</code>" конвертує зображення повністю. Значення "<code>0%"</code> залишає зображення без змін. Значення між "<code>0%</code>" та "<code>100%</code>" є лінійними множниками (мультиплікаторами) ефекта. Якщо параметр ‘amount’ відсутній, використовується значення "<code>0</code>".</p>
+
+<pre class="brush: css">filter: sepia(100%)</pre>
+
+<div id="sepia_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_12.jpeg" id="img1" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_12.jpg" id="img2" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 259 194"&gt;
+ &lt;filter id="sepia"&gt;
+    &lt;feColorMatrix type="matrix"
+               values="0.393 0.769 0.189 0 0
+                       0.349 0.686 0.168 0 0
+                       0.272 0.534 0.131 0 0
+                       0 0 0 1 0"/&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3727/Test_Form_12.jpeg" filter="url(#sepia)" width="259px" height="194px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_12_s.jpg" id="img4" class="internal default" src="/files/3728/Test_Form_12_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: sepia(100%);
+  -webkit-filter: sepia(100%);
+  -o-filter: sepia(100%);
+  -ms-filter: sepia(100%);
+  filter: sepia(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('sepia_example','100%','229px','')}}</p>
+
+<h2 id="Combining_functions">Combining functions</h2>
+
+<p>Можна комбінувати будь-яку кількість функцій для маніпулювання рендерингом. Наступні приклади посилюють контрастність та яскравість зображення.</p>
+
+<pre class="brush: css">filter: contrast(175%) brightness(103%)</pre>
+
+<div id="combination_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_8.jpeg" id="img1" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_8.jpg" id="img2" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_8_s.jpg" id="img4" class="internal default" src="/files/3730/Test_Form_8_s.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: contrast(175%) brightness(103%);
+  -webkit-filter: contrast(175%) brightness(103%);
+  -o-filter: contrast(175%) brightness(103%);
+  -ms-filter: contrast(175%) brightness(103%);
+  filter: contrast(175%) brightness(103%);
+}
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('combination_example','100%','209px','')}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Filters 1.0', '#FilterProperty', 'filter') }}</td>
+   <td>{{ Spec2('Filters 1.0') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("18.0")}}{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop(35)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatOpera("15.0")}}{{property_prefix("-webkit")}}</td>
+   <td>{{CompatSafari("6.0")}}{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td>On SVG Elements</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>{{CompatGeckoDesktop(35)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatAndroid("4.4")}}{{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoDesktop(35)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>22.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+   <td>
+    <p>6.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>On SVG Elements</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>{{CompatGeckoDesktop(35)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] У Chrome 18 to 19, функція <code>saturate()</code> приймає тільки цілі десяткові числа та відсоткові значання. Цей баг виправлений у Chrome 20 та наступних.</p>
+
+<p>[2] До Firefox 34, Gecko виконував тільки <code>{{anch("url()")}}</code> форму властивості <code>filter</code>; так як формування ланцюжка (chaining) тоді не було реалізовано, було дозволено тільки одне <code>url()</code> (або коли <code>layout.css.filters.enabled</code> pref було встановлене як <code>false</code>).</p>
+
+<p>Функціональні значення <code>filter</code> контролюються <code>layout.css.filters.enabled</code> pref і був доступним, але заборонений за замовчуванням у Firefox 34.</p>
+
+<p>[3] Internet Explorer з 4.0 по 9.0 виконував нестандартну властивіст <code>filter</code>. Синтаксис сильно відрізняється і не був тут задокументований.</p>
+
+<p>[4] У даний момент Blink не виконує дану властивість(feature). Дивіться <a href="https://crbug.com/109224">bug 109224</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="internal" href="/en-US/docs/Applying_SVG_effects_to_HTML_content">Applying SVG effects to HTML content</a></li>
+ <li>The {{Cssxref("mask")}} property</li>
+ <li><a class="internal" href="/en-US/docs/Web/SVG">SVG</a></li>
+ <li><a class="external" href="http://www.html5rocks.com/en/tutorials/filters/understanding-css/">Understanding CSS filters</a>, HTML5Rocks! article</li>
+ <li><a class="external" href="http://techstream.org/Web-Design/CSS3-Image-Filters">CSS 3 filters</a> Tech Stream article</li>
+ <li><a class="external" href="http://davidwalsh.name/css-filters">CSS filters</a> By David Walsh</li>
+</ul>
diff --git a/files/uk/web/css/flex-grow/index.html b/files/uk/web/css/flex-grow/index.html
new file mode 100644
index 0000000000..05bf7ed70b
--- /dev/null
+++ b/files/uk/web/css/flex-grow/index.html
@@ -0,0 +1,194 @@
+---
+title: flex-grow
+slug: Web/CSS/flex-grow
+translation_of: Web/CSS/flex-grow
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Властивість <strong><code>flex-grow</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> визначає яку частину вільного простору може зайняти дочірній flex елемент. Ця властивість встановлюється в одиницях відносних до інших контейнерів.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Можете більш детальніше довідатся як користуватись властивостями <strong>flex </strong>з наступної статті <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">/* &lt;number&gt; values */
+flex-grow: 3;
+flex-grow: 0.6;
+
+/* Global values */
+flex-grow: inherit;
+flex-grow: initial;
+flex-grow: unset;
+</pre>
+
+<h3 id="Значення">Значення</h3>
+
+<dl>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Дивись {{cssxref("&lt;number&gt;")}}. Значення менші за <code>0</code> є недійсними.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Приклад">Приклад</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<div id="Live_Sample">
+<pre class="brush: html">&lt;h4&gt;This is a Flex-Grow&lt;/h4&gt;
+&lt;h5&gt;A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .&lt;/h5&gt;
+&lt;div id="content"&gt;
+  &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
+  &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
+  &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
+  &lt;div class="box1" style="background-color:brown;"&gt;D&lt;/div&gt;
+  &lt;div class="box1" style="background-color:lightgreen;"&gt;E&lt;/div&gt;
+  &lt;div class="box" style="background-color:brown;"&gt;F&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#content {
+  -ms-box-orient: horizontal;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -moz-flex;
+  display: -webkit-flex;
+  display: flex;
+
+  -webkit-justify-content: space-around;
+  justify-content: space-around;
+  -webkit-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-align-items: stretch;
+  align-items: stretch;
+}
+
+.box {
+  flex-grow: 1;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box1 {
+  flex-grow: 2;
+  border: 3px solid rgba(0,0,0,.2);
+}
+</pre>
+</div>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Example', '750px', '400px', '', 'Web/CSS/flex-grow')}}</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox','#flex-grow','flex-grow')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_браузерів">Підтримка браузерів</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базова підтримка</td>
+   <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup></td>
+   <td>21.0{{property_prefix("-webkit")}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}}</td>
+   <td>11</td>
+   <td>12.10</td>
+   <td>6.1{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td>&lt; 0 animate</td>
+   <td>{{CompatGeckoDesktop("32.0")}}<sup>[2]</sup></td>
+   <td>49.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базова підтримка</td>
+   <td>{{CompatGeckoMobile("18.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>12.10</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>&lt; 0 animate</td>
+   <td>{{CompatGeckoDesktop("32.0")}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox підтримує лише однострочні flexbox конструкції до версії Firefox 27. Щоб активувати підтримку flexbox властивостей, для Firefox 18 та 19, користувачу потрібно змінити параметр <code>layout.css.flexbox.enabled на true </code>у файлі налаштувань about:config.</p>
+
+<p>В додаток до непрефіксної підтримки, Gecko 48.0 {{geckoRelease("48.0")}} додана підтримка для <code>-webkit префіксних варіацій властивостей для підтримки веб-сумісності, для цього потрібно змінити властивість layout.css.prefixes.webkit на true, яка за замовченням встановлена - false. Але з релізу </code>Gecko 49.0 {{geckoRelease("49.0")}} ця властивість набуває значення true за замовченням.</p>
+
+<p>[2] До того як вийшла версія Firefox 32, Gecko не був в змозі анімувати знаяення які починалися чи закінчувалися на <code>0</code><code>(<a href="https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths">Spec</a>, <a href="https://jsbin.com/zacifexuke/edit?html,css,output">Demo</a>)</code>.</p>
+
+<h2 id="Дивись_також">Дивись також</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li>
+</ul>
diff --git a/files/uk/web/css/flex/index.html b/files/uk/web/css/flex/index.html
new file mode 100644
index 0000000000..763924bf80
--- /dev/null
+++ b/files/uk/web/css/flex/index.html
@@ -0,0 +1,209 @@
+---
+title: flex
+slug: Web/CSS/flex
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Властивість
+  - flexbox
+translation_of: Web/CSS/flex
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Загальний_огляд">Загальний огляд</h2>
+
+<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> параметр <strong>flex </strong>є <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">скороченим записом</a> властивості, котра визначає здатність flex елемента змінювати свої розміри аби заповнити наявний простір. Flex елементи можна розтягнути аби використати увесь наявний простір пропорційно до вказаного параметра flex-grow, або flex-shrink аби запобігти виходу за межі батьківського контейнера.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Перегляньте <a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Використання гнучких CSS контейнерів</a> для більш детальної інформації та опису властивостей.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush:css">/* 0 0 auto */
+flex: none;
+
+/* Одне значення, ціле число: flex-grow (flex-basis змінюється на 0) */
+flex: 2;
+
+/* Одне значення, width/height: flex-basis */
+flex: 10em;
+flex: 30px;
+flex: auto;
+flex: content;
+
+/* Два значення: flex-grow | flex-basis */
+flex: 1 30px;
+
+/* Два значення: flex-grow | flex-shrink (flex-basis змінюється на 0) */
+flex: 2 2;
+
+/* Три значення: flex-grow | flex-shrink | flex-basis */
+flex: 2 2 10%;
+
+/* Глобальні значення */
+flex: inherit;
+flex: initial;
+flex: unset;
+</pre>
+
+<h3 id="Values" name="Values">Значення</h3>
+
+<dl>
+ <dt><code>&lt;'flex-grow'&gt;</code></dt>
+ <dd>Визначає <code><a href="/en-US/docs/CSS/flex-basis" title="CSS/flex-basis">ширину</a> </code>flex елемента відносно ширин всіх сусідніх елементів. Перегляньте {{cssxref("&lt;number&gt;")}} задля детального опису. Від'ємні значення вважаються невірними. Приймає значення 1, коли воно не вказується явно.</dd>
+ <dt><code>&lt;'flex-shrink'&gt;</code></dt>
+ <dd>Визначає <code><a href="/en-US/docs/Web/CSS/flex-shrink">flex-shrink</a></code> flex елемента. Перегляньте {{cssxref("&lt;number&gt;")}} задля детального опису. Від'ємні значення вважаються невірними. Приймає значення 1, коли воно не вказується явно.</dd>
+ <dt><code>&lt;'flex-basis'&gt;</code></dt>
+ <dd>Визначає  <code><a href="/en-US/docs/CSS/flex-basis" title="CSS/flex-basis">базис</a> </code>flex елемента. Може приймати будь-яке значення, з тих, що можуть приймати параметри <code>width і</code> <code>height</code>. Значення <code>0</code> має мати одиницю виміру, аби уникнути трактування його, як значення гнучкості. Приймає значення <code>0%,</code> коли воно не вказується явно.</dd>
+ <dt><code>none</code></dt>
+ <dd>Ключове слово, котре по значенню рівне <code>0 0 auto</code>.</dd>
+ <dt>
+ <h3 id="Формальний_синтаксис">Формальний синтаксис</h3>
+ </dt>
+</dl>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Приклад">Приклад</h2>
+
+<pre class="brush: css">#flex-container {
+	display: -webkit-flex;
+	display: flex;
+	-webkit-flex-direction: row;
+	flex-direction: row;
+}
+
+#flex-container &gt; .flex-item {
+	-webkit-flex: auto;
+	flex: auto;
+}
+
+#flex-container &gt; .raw-item {
+	width: 5rem;
+}
+</pre>
+
+<pre class="brush: html">&lt;div id="flex-container"&gt;
+    &lt;div class="flex-item" id="flex"&gt;Flex box (click to toggle raw box)&lt;/div&gt;
+    &lt;div class="raw-item" id="raw"&gt;Raw box&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: js">var flex = document.getElementById("flex");
+var raw = document.getElementById("raw");
+flex.addEventListener("click", function() {
+	raw.style.display = raw.style.display == "none" ? "block" : "none";
+});
+</pre>
+
+<pre class="brush: css">#flex-container {
+	width: 100%;
+	font-family: Consolas, Arial, sans-serif;
+}
+
+#flex-container &gt; div {
+	border: 1px solid #f00;
+	padding: 1rem;
+}
+
+#flex-container &gt; .raw-item {
+	border: 1px solid #000;
+}
+</pre>
+</div>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Example','100%','60')}}</p>
+
+<h2 id="Specifications" name="Specifications">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Специфікація</th>
+   <th>Стан</th>
+   <th>Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Загальне визначення</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Підтримка</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базова підтримка</td>
+   <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("20.0")}}<br>
+    {{CompatGeckoDesktop("28.0")}}<sup>[2]</sup></td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>10.0{{property_prefix("-ms")}}<sup>[3]</sup><br>
+    11.0<sup>[3]</sup></td>
+   <td>12.10</td>
+   <td>
+    <p>6.1{{property_prefix("-webkit")}}<br>
+     9.0</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Підтримка</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базова підтримка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>4.4</td>
+   <td>11</td>
+   <td>12.10</td>
+   <td>7.1{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] В Gecko 18.0 {{geckoRelease("18.0")}} та 19.0 {{geckoRelease("19.0")}} підтримка flexbox прихована за налаштуванням <code>about:config</code> пунктом <code>layout.css.flexbox.enabled</code>, котрий по замовчуванню - <code>false</code>. </p>
+
+<p>[2] Багатостроковий flexbox підтримується починаючи з Gecko 28.0 {{geckoRelease("28.0")}}.</p>
+
+<p>В додаток до підтримки непрефіксованого flexbox, у Gecko 48.0 {{geckoRelease("48.0")}} додано підтримку <code>-webkit</code> префіксованої версії властивості з огляду на веб-сумісність з налаштуванням <code>layout.css.prefixes.webkit</code>, котре по замовчуванню дорівнює <code>false.</code> Починаючи з версії Gecko 49.0 {{geckoRelease("49.0")}} це налаштування дорівнює <code>true</code>.</p>
+
+<p>[3] Internet Explorer 10-11 (але не 12+) ігнорує вживання <a href="/en-US/docs/Web/CSS/calc"><code>calc()</code></a> у частині <code>flex </code>синтаксису, що відповідає за властивість <code>flex-basis</code>. Це можна обійти використанням не сокроченого, а повного запису цієї властивості. Перегляньте <a href="https://github.com/philipwalton/flexbugs#8-flex-basis-doesnt-support-calc">Flexbug #8</a> задля більш детального опису. Визначення <code>flex</code> зі значенням без одиниці виміру у частині, що відповідає за <code>flex-basis</code> вважається синтаксично не вірною у цих версіях, а тому її буде проігноровано. Виправити це можна - завжди додаючи одиницю виміру у частині властивості, що відповідає за <code>flex-basis</code>, скороченого запису <code>flex</code>. Перегляньте <a href="https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored">Flexbug #4</a> задля більш детільного опису.</p>
+
+<h2 id="See_also" name="See_also">Також варто переглянути</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Використання гнучких CSS блоків</a></li>
+</ul>
diff --git a/files/uk/web/css/font-smooth/index.html b/files/uk/web/css/font-smooth/index.html
new file mode 100644
index 0000000000..97344e55bf
--- /dev/null
+++ b/files/uk/web/css/font-smooth/index.html
@@ -0,0 +1,85 @@
+---
+title: font-smooth
+slug: Web/CSS/font-smooth
+translation_of: Web/CSS/font-smooth
+---
+<div>{{ CSSRef }} {{ Non-standard_header }}</div>
+
+<p><strong><code>font-smooth</code></strong> <a href="/en/CSS" title="CSS">CSS</a> властивість контролює застосування антиалайзингу коли відбувається рендеринг шрифта.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{ Xref_cssinitial() }}</strong></td>
+   <td><code>auto</code></td>
+  </tr>
+  <tr>
+   <td><strong>Застосовується до</strong></td>
+   <td>всіх елементів і згенерованого контенту</td>
+  </tr>
+  <tr>
+   <td><strong>{{ Xref_cssinherited() }}</strong></td>
+   <td>yes</td>
+  </tr>
+  <tr>
+   <td><strong>Відсотки</strong></td>
+   <td>відносно розмірів шрифта батьківського елемента</td>
+  </tr>
+  <tr>
+   <td><strong>Media</strong></td>
+   <td>{{ Xref_cssvisual() }}</td>
+  </tr>
+  <tr>
+   <td><strong>{{ Xref_csscomputed() }}</strong></td>
+   <td>як зазначено в специфікації</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">/* Keyword values */
+font-smooth: auto;
+font-smooth: never;
+font-smooth: always;
+
+/* &lt;length&gt; value */
+font-smooth: 2em;
+</pre>
+
+<div class="note">
+<p><strong>WebKit</strong> <span class="tlid-translation translation" lang="uk"><span title="">реалізує подібну властивість, але з різними значеннями</span></span>: <strong><code>-webkit-font-smoothing</code></strong>. <span class="tlid-translation translation" lang="uk"><span title="">Це працює тільки на</span></span> Mac OS X/macOS.</p>
+
+<ul>
+ <li><code>auto</code> - <span class="tlid-translation translation" lang="uk"><span title="">веб-переглядач працює в даному режимі за замовчуванням (Використовує субпіксель для згладжування, коли він доступний)</span></span></li>
+ <li><code>none</code> - <span class="tlid-translation translation" lang="uk"><span title="">відсутність згладжування шрифту;</span> <span title="">відображення тексту з нерівними гострими краями.</span></span></li>
+ <li><code>antialiased</code> - згладжує текст на піксельному рівні, на відміну від субпіксельного. Перехід від субпіксельного рендерингу до антиалайзингу для світлого тексту на темному тлі (бекграунді) робить жирність тексту (<code><strong>font-weight</strong></code>) меншою.</li>
+ <li><code>subpixel-antialiased</code> - на більшості не Retina дисплеях, результатом буде найчіткіший текст.</li>
+</ul>
+</div>
+
+<div class="note">
+<p><strong>Firefox</strong> <span class="tlid-translation translation" lang="uk"><span title="">реалізує подібну властивість, але з різними значеннями</span></span>: <strong><code>-moz-osx-font-smoothing</code></strong>. Це працює тільки на Mac OS X/macOS.</p>
+
+<ul>
+ <li><code>auto</code> - <span class="tlid-translation translation" lang="uk"><span title="">дозволяє браузеру вибирати оптимізацію для вирівнювання шрифту, як правило</span></span> <code>grayscale</code>.</li>
+ <li><code>grayscale</code> - рендер тексту з використанням відтінків сірого, на відміну від субпіксельного. Перехід від субпіксельного рендерингу до антиалайзингу для світлого тексту на темному тлі (бекграунді) робить жирність тексту (<code><strong>font-weight</strong></code>) меншою.</li>
+</ul>
+</div>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>В ранніх версіях згладжування (2002) шрифтів <a href="http://www.w3.org/TR/WD-font/#font-smooth">CSS3 Fonts було присутнє</a>, але на даний момент <code>font-smooth</code> його було видалено і ця специфікація не відповідає стандартам.</p>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+<div class="hidden"><span class="tlid-translation translation" lang="uk"><span title="">Таблиця сумісності на цій сторінці формується із структурованих даних.</span> <span title="">Якщо ви хочете зробити свій внесок у дані, будь ласка, ознайомтесь</span></span> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і відправте нам pull запит.</div>
+
+<p>{{Compat("css.properties.font-smooth")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li><a href="http://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/">Please Stop "Fixing" Font Smoothing – UsabilityPost</a></li>
+ <li><a href="https://www.zachleat.com/web/font-smooth/">Laissez-faire font smoothing and anti-aliasing</a></li>
+</ul>
diff --git a/files/uk/web/css/font-weight/index.html b/files/uk/web/css/font-weight/index.html
new file mode 100644
index 0000000000..df6e507224
--- /dev/null
+++ b/files/uk/web/css/font-weight/index.html
@@ -0,0 +1,271 @@
+---
+title: font-weight
+slug: Web/CSS/font-weight
+translation_of: Web/CSS/font-weight
+---
+<div>{{CSSRef}}</div>
+
+<p>The <strong><code>font-weight</code></strong> <a href="/uk/docs/CSS" title="CSS">CSS</a> property specifies the weight (or boldness) of the font. The font weights available to you will depend on the {{cssxref("font-family")}} you are using. Some fonts are only available in <code>normal</code> and <code>bold</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-weight.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css no-line-numbers">/* Keyword values */
+font-weight: normal;
+font-weight: bold;
+
+/* Keyword values relative to the parent */
+font-weight: lighter;
+font-weight: bolder;
+
+/* Numeric keyword values */
+font-weight: 100;
+font-weight: 200;
+font-weight: 300;
+font-weight: 400;
+font-weight: 500;
+font-weight: 600;
+font-weight: 700;
+font-weight: 800;
+font-weight: 900;
+
+/* Global values */
+font-weight: inherit;
+font-weight: initial;
+font-weight: unset;
+</pre>
+
+<p>The <code>font-weight</code> property is specified using a single keyword value from the list below.</p>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Normal font weight. Same as <code>400</code>.</dd>
+ <dt><code>bold</code></dt>
+ <dd>Bold font weight. Same as <code>700</code>.</dd>
+ <dt><code>lighter</code></dt>
+ <dd>One font weight lighter than the parent element (among the available weights of the font).</dd>
+ <dt><code>bolder</code></dt>
+ <dd>One font weight heavier than the parent element (among the available weights of the font).</dd>
+ <dt><code>100</code>, <code>200</code>, <code>300</code>, <code>400</code>, <code>500</code>, <code>600</code>, <code>700</code>, <code>800</code>, <code>900</code></dt>
+ <dd>Numeric font weights for fonts that provide more than just <code>normal</code> and <code>bold</code>.</dd>
+</dl>
+
+<h3 id="Fallback_weights">Fallback weights</h3>
+
+<p>If the exact weight given is unavailable, then the following heuristic is used to determine the weight actually rendered:</p>
+
+<ul>
+ <li>If a weight greater than <code>500</code> is given, the closest available heavier weight is used (or, if there is none, the closest available lighter weight).</li>
+ <li>If a weight less than <code>400</code> is given, the closest available lighter weight is used (or, if there is none, the closest available heavier weight).</li>
+ <li>If a weight of exactly <code>400</code> is given, then <code>500</code> is used. If <code>500</code> is not available, then the heuristic for font weights less than 400 is used.</li>
+ <li>If a weight of exactly <code>500</code> is given, then <code>400</code> is used. If <code>400</code> is not available, then the heuristic for font weights less than 400 is used.</li>
+</ul>
+
+<p>This means that for fonts that provide only <code style="font-style: normal;">normal</code> and <code style="font-style: normal;">bold</code>, <code style="font-style: normal;">100</code>-<code>500</code> are <code>normal</code>, and <code style="font-style: normal;">600</code>-<code style="font-style: normal;">900</code> are <code>bold</code>.</p>
+
+<h3 id="Meaning_of_relative_weights">Meaning of relative weights</h3>
+
+<p>When <code>lighter</code> or <code>bolder</code> is specified, the following chart shows how the absolute font weight of the element is determined:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Inherited value</th>
+   <th><code>bolder</code></th>
+   <th><code>lighter</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th>100</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>200</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>300</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>400</th>
+   <td>700</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>500</th>
+   <td>700</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>600</th>
+   <td>900</td>
+   <td>400</td>
+  </tr>
+  <tr>
+   <th>700</th>
+   <td>900</td>
+   <td>400</td>
+  </tr>
+  <tr>
+   <th>800</th>
+   <td>900</td>
+   <td>700</td>
+  </tr>
+  <tr>
+   <th>900</th>
+   <td>900</td>
+   <td>700</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Common_weight_name_mapping">Common weight name mapping</h3>
+
+<p>The numerical values (<code>100</code> to <code>900</code>) roughly correspond to the following common weight names:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Value</th>
+   <th scope="col">Common weight name</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>100</td>
+   <td>Thin (Hairline)</td>
+  </tr>
+  <tr>
+   <td>200</td>
+   <td>Extra Light (Ultra Light)</td>
+  </tr>
+  <tr>
+   <td>300</td>
+   <td>Light</td>
+  </tr>
+  <tr>
+   <td>400</td>
+   <td>Normal (Regular)</td>
+  </tr>
+  <tr>
+   <td>500</td>
+   <td>Medium</td>
+  </tr>
+  <tr>
+   <td>600</td>
+   <td>Semi Bold (Demi Bold)</td>
+  </tr>
+  <tr>
+   <td>700</td>
+   <td>Bold</td>
+  </tr>
+  <tr>
+   <td>800</td>
+   <td>Extra Bold (Ultra Bold)</td>
+  </tr>
+  <tr>
+   <td>900</td>
+   <td>Black (Heavy)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Interpolation">Interpolation</h3>
+
+<p>A <code>font-weight</code> value is interpolated via discrete steps (multiples of 100). The interpolation happens in real number space and is converted to an integer by rounding to the nearest multiple of 100, with values halfway between multiples of 100 rounded towards positive infinity.</p>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Examples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Alice was beginning to get very tired of sitting by her sister on the
+  bank, and of having nothing to do: once or twice she had peeped into the
+  book her sister was reading, but it had no pictures or conversations in
+  it, 'and what is the use of a book,' thought Alice 'without pictures or
+  conversations?'
+&lt;/p&gt;
+
+&lt;div&gt;I'm heavy&lt;br/&gt;
+  &lt;span&gt;I'm lighter&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">/* Set paragraph text to be bold. */
+p {
+  font-weight: bold;
+}
+
+/* Set div text to two steps heavier than
+   normal but less than a standard bold. */
+div {
+ font-weight: 600;
+}
+
+/* Set span text to be one step lighter
+   than its parent. */
+span {
+  font-weight: lighter;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Examples","400","300")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Defines <code>font-weight</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-weight', 'font-weight')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.font-weight")}}</p>
diff --git a/files/uk/web/css/grid-template-areas/index.html b/files/uk/web/css/grid-template-areas/index.html
new file mode 100644
index 0000000000..4f082d3cff
--- /dev/null
+++ b/files/uk/web/css/grid-template-areas/index.html
@@ -0,0 +1,181 @@
+---
+title: grid-template-areas
+slug: Web/CSS/grid-template-areas
+translation_of: Web/CSS/grid-template-areas
+---
+<p><strong><code>grid-template-areas</code></strong> CSS властивість, що визначає іменовані {{glossary("grid areas")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}</div>
+
+
+
+<p>Ці області не відносяться до певного грід-елемента, але можуть посилатися з властивостей грід-розташування{{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, та їх скорочень {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, і {{cssxref("grid-area")}}.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers">/* Keyword value */
+grid-template-areas: none;
+
+/* &lt;string&gt; values */
+grid-template-areas: "a b";
+grid-template-areas: "a b b"
+                     "a c d";
+
+/* Global values */
+grid-template-areas: inherit;
+grid-template-areas: initial;
+grid-template-areas: unset;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Грід-контейнер не визначає жодні іменовані грід-області.</dd>
+ <dt><code>{{cssxref("&lt;string&gt;")}}+</code></dt>
+ <dd>Ряд створюється для кожного окремого рядка, а колонка для кожної клітинки рядка. Декілька іменованих клітинок у рядках та поміж ними створюють одну іменовану грід-область, що об'єднує відповідні клітинки. Оголошення непридатне, якщо ці клітинки утворюють прямокутник.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;section id="page"&gt;
+  &lt;header&gt;Header&lt;/header&gt;
+  &lt;nav&gt;Navigation&lt;/nav&gt;
+  &lt;main&gt;Main area&lt;/main&gt;
+  &lt;footer&gt;Footer&lt;/footer&gt;
+&lt;/section&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css; highlight[5-7]">#page {
+  display: grid;
+  width: 100%;
+  height: 250px;
+  grid-template-areas: "head head"
+                       "nav  main"
+                       "nav  foot";
+  grid-template-rows: 50px 1fr 30px;
+  grid-template-columns: 150px 1fr;
+}
+
+#page &gt; header {
+  grid-area: head;
+  background-color: #8ca0ff;
+}
+
+#page &gt; nav {
+  grid-area: nav;
+  background-color: #ffa08c;
+}
+
+#page &gt; main {
+  grid-area: main;
+  background-color: #ffff64;
+}
+
+#page &gt; footer {
+  grid-area: foot;
+  background-color: #8cffa0;
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p><em>{{EmbedLiveSample("Example", "100%", "250px")}}</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-template-areas", "grid-template-areas")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.grid-template-areas")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></em></li>
+ <li>Video tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/uk/web/css/index.html b/files/uk/web/css/index.html
new file mode 100644
index 0000000000..50e7a47f9c
--- /dev/null
+++ b/files/uk/web/css/index.html
@@ -0,0 +1,92 @@
+---
+title: CSS
+slug: Web/CSS
+tags:
+  - CSS
+  - CSS3
+  - Layout
+  - Reference
+  - Веб
+  - Дизайн
+  - Стиль
+  - ЦСС
+  - каскадна
+  - оформлення
+  - сайтів
+  - сторінок
+  - таблиця
+translation_of: Web/CSS
+---
+<p><span class="seoSummary"><strong>Каскадні таблиці стилів</strong> (<strong>CSS</strong>) - це мова стилів, яка використовується для опису представлення документу, написаного на <a href="/uk/docs/Web/HTML" title="HyperText Markup Language">HTML</a></span> чи <a href="/uk/docs/XML">XML</a> (включаючи XML діалекти такі, як <a href="/uk/docs/SVG">SVG</a> або <a href="/uk/docs/XHTML">XHTML</a>). CSS описує як елементи повинні відображатися на екрані, на папері, при озвученні, або на інших пристроях.</p>
+
+<p>CSS є одною з основних мов <em>відкритої мережі</em> і має стандартизовану <a class="external" href="http://w3.org/Style/CSS/#specs">W3C специфікацію</a>. Розроблена по рівнях, CSS1 в даний час застаріла, CSS2.1 є рекомендованою, і CSS3, яка тепер розділена на більш дрібні модулі та розвивається шляхом стандартизації.</p>
+
+<section id="sect1">
+<ul class="card-grid">
+ <li><span>CSS Посилання</span>
+
+  <p><a href="/uk/docs/Web/CSS/Reference">Ексклюзивні посилання</a> для загартованих Web розробників, які описують кожний параметр і поняття CSS.</p>
+ </li>
+ <li><span>CSS Посібник</span>
+  <p>Наша <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS сфера навчання</a> складається з безлічі посібників, щоб підняти ваш рівень з початкового, до такого, на якому ви будете себе комфортно почувати в CSS, охоплюючи всі основні принципи.</p>
+ </li>
+ <li><span>Знайомство з CSS</span>
+  <p>Якщо ви початківець у веб програмуванні, переконайтеся, що ви прочитали нашу статтю <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS Основи</a>, щоб дізнатися що таке є CSS і як їх використовувати.</p>
+ </li>
+</ul>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 id="Посібники">Посібники</h2>
+
+<p>Наша <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS сфера навчання</a> має декілька модулів, які дозволяють вивчити CSS з нуля — знання мови не вимагається.</p>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Вступ в CSS</a></dt>
+ <dd>Цей модуль дозволяє вам почати вивчення з базових понять як CSS працює, включаючи селектори і параметри, написання правил CSS, застосування CSS до HTML, як вказати довжину, колір та інші одиниці виміру в CSS, каскади і успадкування, основи блочної моделі та відлагоджування CSS.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text">Стилізація тексту</a></dt>
+ <dd>В даному модулі ми розглянемо основи стилізації тексту, включаючи налаштування шрифтів, товщини, курсиву, відстані між рядками і буквами, а також застосування тіней та інших можливостей стилізації тексту. Ми розглянемо в даному модулі використання власних шрифтів на вашій веб-сторінці, і стилізацію списків і посилань.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_boxes">Стилізація блоків</a></dt>
+ <dd>Далі ми розглянемо стилізацію блоків, один з базових кроків у напрямку розбивання веб-сторінки на блоки. У данаму модулі ми підсумуємо блокову модель і тоді розглянемо методи контролю блоків, застосовуючи внутрішні відступи (padding), рамки (borders) і зовнішні відступи, застосування власних заливок фону, картинок та інших можливостей, і такої можливості, як падіння тіней і фільтрів на блоках.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout">Макети CSS</a></dt>
+ <dd>До цього моменту ми вже розглянули базові поняття CSS, як стилізувати текст, я як стилізувати і маніпулювати блоками, щоб ваш контент поміщався в середину даних блоків. Тепер час розглянути розташування ваших блоків у правильному місці, по відношенню до точки огляду, і відносно один одного. Ми розкрили необхідні передумови, тому тепер ми можемо заглибитися в шаблони CSS детальніше, подивитися на налаштування для різних дисплеїв, традиційні методи шаблонів, включаючи плавання елементів по сторінці (float) і позиціонування (positioning), і нові сучасні інструменти для шаблонів такі, як флексбокс (flexbox).</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 id="Посилання">Посилання</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference">CSS Посилання</a>: Вичерпний довідник для досвідчених веб-розробників, який описує кожний параметр і кожне поняття CSS.</li>
+ <li>CSS ключові поняття:
+  <ul>
+   <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Syntax">Синтаксис і форми даної мови</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Specificity">Особливість</a> і <a href="https://developer.mozilla.org/en-US/docs/CSS/inheritance">успадкування</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/CSS/box_model">Блочна модель</a> і <a href="https://developer.mozilla.org/en-US/docs/CSS/margin_collapsing">margin collapse</a></li>
+   <li>Контексти <a href="https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">stacking</a> і <a href="https://developer.mozilla.org/en-US/docs/CSS/block_formatting_context" title="block formatting context">форматування блоку</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/CSS/initial_value">Початкові</a>, <a href="https://developer.mozilla.org/en-US/docs/CSS/computed_value">обчислені</a>, <a href="https://developer.mozilla.org/en-US/docs/CSS/actual_value">фактичні</a> і <a href="https://developer.mozilla.org/en-US/docs/CSS/used_value">ті, які використовуються</a> значення</li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Shorthand_properties">CSS скорочені параметри</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Інструменти_для_CSS_розробки">Інструменти для CSS розробки</h2>
+
+<ul>
+ <li><a href="http://jigsaw.w3.org/css-validator/">W3C CSS Сервіс Валідації</a> перевіряє чи CSS є валідним. Даний сервіс на <a href="http://www.onlinewebcheck.com/">OnlineWebCheck.com</a> робить те ж саме. Це безцінні інструменти розробки.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools">Firefox інструменти розробки</a> дозволяють переглядати і редагувати наживо CSS на сторінці за допомогою <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Iнспектора</a> і інструментів <a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor">Редагування Стилів</a>.</li>
+ <li><a href="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug розширення</a> для Firefox, це популярне розширення, яке дозволяє наживо редагувати CSS на переглянутих сайтах. Дуже практично тестувати деякі зміни, хоча це розширення робить набагато більше.</li>
+ <li><a href="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer розширення</a> для Firefox також дозволяє переглядати і наживо редагувати CSS на переглянутих сайтах. Простіше ніж Firebug, хоча й має менше можливостей.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Tools">Miscellaneous CSS інструменти.</a></li>
+</ul>
+</div>
+</div>
+</section>
+
+<h2 id="Дивитися_також">Дивитися також</h2>
+
+<ul>
+ <li>Mozilla's <a href="/uk/Learn/CSS">Розділ вивчення CSS</a></li>
+ <li>Веб мови CSS часто застосовуються до: <a href="/uk/docs/HTML">HTML</a>, <a href="/uk/docs/SVG">SVG</a>, <a href="/uk/docs/XHTML">XHTML</a> і <a href="/uk/docs/XML">XML</a>.</li>
+ <li>Технології Mozilla, які широко використовують CSS: <a href="/uk/docs/Mozilla/Tech/XUL">XUL</a>, <a href="/uk/Firefox">Firefox</a>, і <a href="/uk/docs/Mozilla/Thunderbird">Thunderbird</a> <a href="/uk/docs/Extensions">розширення</a> і <a href="/uk/Add-ons/Themes">теми</a>.</li>
+</ul>
diff --git a/files/uk/web/css/linear-gradient()/index.html b/files/uk/web/css/linear-gradient()/index.html
new file mode 100644
index 0000000000..cf11a60ebc
--- /dev/null
+++ b/files/uk/web/css/linear-gradient()/index.html
@@ -0,0 +1,208 @@
+---
+title: linear-gradient()
+slug: Web/CSS/linear-gradient()
+translation_of: Web/CSS/linear-gradient()
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>linear-gradient()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> функція створює зображення, що складається з прогресивного переходу між двома або більше кольорами по прямій лінії. Резултатом буде об`єкт типу {{CSSxRef("&lt;gradient&gt;")}} , що є спеціальним видом {{CSSxRef("&lt;image&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Як і будь-який градієнт, лінійний градієнт не має внутрішніх розмірів;</span> <span title="">тобто він не має природного або бажаного розміру, а також кращого співвідношення.</span> <span title="">Його розмір буде відповідати розміру елемента, до якого він застосовується.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Щоб створити лінійний градієнт, який повторюється так, щоб заповнити його контейнер, скористайтеся функцією </span></span> {{CSSxRef("repeating-linear-gradient")}}.</p>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Оскільки</span></span> <code>&lt;gradient&gt;</code> <span class="tlid-translation translation" lang="uk"><span title="">належить до типу даних</span></span> <code>&lt;image&gt;</code>,  <span class="tlid-translation translation" lang="uk"><span title="">вони можуть використовуватися лише там, де можна використовувати</span></span> <code>&lt;image&gt;</code>. <span class="tlid-translation translation" lang="uk"><span title="">З цієї причини </span></span><code>linear-gradient()</code> не працюватиме там де застосовуються такі властивості як {{CSSxRef("background-color")}} і інших властивостях, що використовують тип даних  {{CSSxRef("&lt;color&gt;")}}.</p>
+
+<h2 id="Композиція_лінійного_градієнту">Композиція лінійного градієнту</h2>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Лінійний градієнт визначається віссю - градієнтною лінією та двома або більше точками зупинки кольорів.</span> <span title="">Кожна точка на осі - виразний колір;</span> <span title="">щоб створити плавний градієнт, функція</span></span> <code>linear-gradient()</code> <span class="tlid-translation translation" lang="uk"><span title="">малює серію кольорових ліній, перпендикулярних лінії градієнта, кожна з яких відповідає кольору точки, де вона перетинає лінію градієнта.</span></span></p>
+
+<p><img alt="linear-gradient.png" src="/files/3537/linear-gradient.png" style="float: left; height: 383px; width: 309px;"></p>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Лінія градієнта визначається центром коробки, що містить зображення градієнта, і кутом.</span> <span title="">Кольори градієнта визначаються двома або більше точками: початковою точкою, кінцевою точкою та між ними необов’язковими кольоровими точками зупинки.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Початковою точкою є місце на лінії градієнта, де починається перший колір.</span> <span title="">Кінцевою точкою є точка, в якій закінчується останній колір.</span> <span title="">Кожна з цих двох точок визначається перетином лінії градієнта з перпендикулярною лінією, що проходить від кута коробки, який знаходиться в одному квадраті.</span> <span title="">Кінцеву точку можна просто зрозуміти як симетричну точку відліку.</span> <span title="">Ці дещо складні визначення призводять до цікавого ефекту, який іноді називають магічними кутами: кути, найближчі до початкової та кінцевої точок, мають той же колір, що і їхні відповідні початкові або кінцеві точки.</span></span></p>
+
+<h3 id="Налаштування_градієнтів"><span class="tlid-translation translation" lang="uk"><span title="">Налаштування градієнтів</span></span></h3>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Додавши більше точок зупинки кольорів у лінії градієнта, ви можете створити модифікований перехід між декількома кольорами.</span> <span title="">Позицію зупинки кольору можна чітко визначити, використовуючи</span></span> {{CSSxRef("&lt;length&gt;")}} <span class="tlid-translation translation" lang="uk"><span title="">або </span></span> {{CSSxRef("&lt;percentage&gt;")}}. <span class="tlid-translation translation" lang="uk"><span title="">Якщо ви не вказали розташування кольору, він розміщується на півдорозі між тим, що йому передує, і тим, що слідує за ним.</span> <span title="">Наступні два градієнти рівнозначні.</span></span></p>
+
+<pre class="brush: css">linear-gradient(red, orange, yellow, green, blue);
+linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);</pre>
+
+<p>By default, colors transition smoothly from the color at one color stop to the color at the subsequent color stop, with the midpoint between the colors being the half way point between the color transition. You can move this midpoint to any position between two color stops by adding an unlabelled % color hint between the two colors to indicate where the middle of the color transition should be. The following example is solid red from the start to the 10% mark and solid blue from 90% to the end. Between 10% and 90% the color transitions from red to blue, however the midpoint of the transition is at the 30% mark rather than 50% as would have happened without the 30% color hint.</p>
+
+<pre class="brush: css">linear-gradient(red 10%, 30%, blue 90%);</pre>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Якщо дві або більше кольорових зупинки знаходяться в одному місці, переходом буде суцільна лінія між першим і останнім кольорами, задекларованими в цьому місці.</span></span>  </p>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Кольорові зупинки повинні бути вказані у порядку зростання.</span> <span title="">Подальші зупинки кольорів з меншим значенням замінять значення попередньої зупинки кольору, створюючи жорсткий перехід.</span> <span title="">Наступні зміни від червоного до жовтого на позначці 30%, а потім переходи від жовтого до синього понад 35% градієнта</span></span></p>
+
+<pre class="brush: css">linear-gradient(red 40%, yellow 30%, blue 65%);
+</pre>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Допускається багатопозиційна зупинка кольору.</span> <span title="">Колір можна оголосити двома суміжними зупинками кольорів, задекларувавши обидві позиції в CSS.</span> <span title="">Наступні три градієнти еквівалентні:</span></span></p>
+
+<pre class="brush: css">linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
+linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
+linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);</pre>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">За замовчуванням, якщо немає кольору із зупинкою 0%, перший заявлений колір буде в цій точці.</span> <span title="">Аналогічно, останній колір буде продовжуватись до позначки 100%, або буде на позначці 100%, якщо на останній зупинці не було оголошено жодної довжини.</span></span></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="language-css" id="css">/* A gradient tilted 45 degrees,
+   starting blue and finishing red */
+linear-gradient(45deg, blue, red);
+
+/* A gradient going from the bottom right to the top left corner,
+   starting blue and finishing red */
+linear-gradient(to left top, blue, red);
+
+/* Color stop: A gradient going from the bottom to top,
+   starting blue, turning green at 40% of its length,
+   and finishing red */
+linear-gradient(0deg, blue, green 40%, red);
+
+/* Color hint: A gradient going from the left to right,
+   starting red, getting to the midpoint color
+   10% of the way across the length of the gradient,
+   taking the rest of the 90% of the length to change to blue */
+linear-gradient(.25turn, red, 10%, blue);
+
+/* Multi-position color stop: A gradient tilted 45 degrees,
+   with a red bottom-left half and a blue top-right half,
+   with a hard line where the gradient changes from red to blue */
+linear-gradient(45deg, red 0 50%, blue 50% 100%);</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>&lt;side-or-corner&gt;</code></dt>
+ <dd>Позиція стартової точки градієнта. Якщо її вказано починається зі слова <code>to</code> і до двох ключових слів: <span class="tlid-translation translation" lang="uk"><span title="">одне вказує горизонтальну сторону</span></span> (<code>left</code> or <code>right</code>), а інше вертикальну сторону (<code>top</code> or <code>bottom</code>). <span class="tlid-translation translation" lang="uk"><span title="">Порядок бічних ключових слів не має значення.</span> <span title="">Якщо не вказано, він за замовчуванням буде </span></span> <code>to bottom</code> .</dd>
+ <dd>Значення <code>to top</code>, <code>to bottom</code>, <code>to left</code>, і <code>to right</code> еквівалентні <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, і <code>90deg</code>, відповідно. Інші значення конвертуються в значення кутів.</dd>
+ <dt>{{CSSxRef("&lt;angle&gt;")}}</dt>
+ <dd><span class="tlid-translation translation" lang="uk"><span title="">Кут нахилу лінії градієнта</span></span> . <span class="tlid-translation translation" lang="uk"><span title="">Значення</span></span> <code>0deg</code> еквівалентне <code>to top</code>; <span class="tlid-translation translation" lang="uk"><span title="">зростаючі значення обертаються за годинниковою стрілкою</span></span> .</dd>
+ <dt><code>&lt;linear-color-stop&gt;</code></dt>
+ <dd><span class="tlid-translation translation" lang="uk"><span title="">Кольорові зупинки</span></span> {{CSSxRef("&lt;color&gt;")}} значення, <span class="tlid-translation translation" lang="uk"><span title="">з подальшим одним або двома опціональними положеннями точок зупинки</span></span>, ( <span class="tlid-translation translation" lang="uk"><span title="">кожен з яких є або</span></span> {{CSSxRef("&lt;percentage&gt;")}} або {{CSSxRef("&lt;length&gt;")}} <span class="tlid-translation translation" lang="uk"><span title="">по осі градієнта</span></span> ).</dd>
+ <dt><code>&lt;color-hint&gt;</code></dt>
+ <dd>The color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.</dd>
+ <dd>
+ <div class="note">
+ <p><strong>Примітка:</strong> Rendering of <a href="#Gradient_with_multiple_color_stops">color stops in CSS gradients</a> follows the same rules as color stops in <a href="/en-US/docs/Web/SVG/Tutorial/Gradients">SVG gradients</a>.</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">linear-gradient(
+  [ <a href="/en-US/CSS/angle">&lt;angle&gt;</a> | to &lt;side-or-corner&gt; ,]? &lt;color-stop-list&gt; )
+  \---------------------------------/ \----------------------------/
+    Definition of the gradient line        List of color stops
+
+where &lt;side-or-corner&gt; = [ left | right ] || [ top | bottom ]
+  and &lt;color-stop-list&gt; = [ &lt;linear-color-stop&gt; [, &lt;color-hint&gt;? ]? ]#, &lt;linear-color-stop&gt;
+  and &lt;linear-color-stop&gt; = &lt;color&gt; [ &lt;color-stop-length&gt; ]?
+  and &lt;color-stop-length&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]{1,2}
+  and &lt;color-hint&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Градієнт_під_кутом_45_градусів"><span class="tlid-translation translation" lang="uk"><span title="">Градієнт під кутом 45 градусів</span></span></h3>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  width: 100vw;
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css">body {
+  background: linear-gradient(45deg, red, blue);
+}</pre>
+
+<p>{{EmbedLiveSample("Градієнт_під_кутом_45_градусів", 120, 120)}}</p>
+
+<h3 id="Gradient_that_starts_at_60_of_the_gradient_line">Gradient that starts at 60% of the gradient line</h3>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  width: 100vw;
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css">body {
+  background: linear-gradient(135deg, orange, orange 60%, cyan);
+}</pre>
+
+<p>{{EmbedLiveSample("Gradient_that_starts_at_60_of_the_gradient_line", 120, 120)}}</p>
+
+<h3 id="Градієнт_з_багатопозиційними_точками_зупинки"><span class="tlid-translation translation" lang="uk"><span title="">Градієнт з багатопозиційними точками зупинки</span></span></h3>
+
+<p>У цьому прикладі використовуються багатопозиційні кольорові зупинки, причому сусідні кольори мають однакове значення стоп кольору, створюючи смугастий ефект.</p>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  width: 100vw;
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css">body {
+  background: linear-gradient(to right,
+     red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
+}</pre>
+
+<p>{{EmbedLiveSample("Градієнт_з_багатопозиційними_точками_зупинки", 120, 120)}}</p>
+
+<div class="note">
+<p><strong>Примітка:</strong> Please see <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Using CSS gradients</a> for more examples.</p>
+</div>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>Adds interpolation hints.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+<div class="hidden"><span class="tlid-translation translation" lang="uk"><span title="">Таблиця сумісності на цій сторінці формується із структурованих даних</span></span> . If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<div>{{Compat("css.types.image.gradient.linear-gradient")}}</div>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Using CSS gradients</a></li>
+ <li>Other gradient functions: {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("repeating-conic-gradient")}}</li>
+ <li>{{CSSxRef("&lt;image&gt;")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/uk/web/css/mozilla_extensions/index.html b/files/uk/web/css/mozilla_extensions/index.html
new file mode 100644
index 0000000000..c41a46f2d7
--- /dev/null
+++ b/files/uk/web/css/mozilla_extensions/index.html
@@ -0,0 +1,680 @@
+---
+title: CSS-розширення для Mozilla
+slug: Web/CSS/Mozilla_Extensions
+tags:
+  - CSS-розширення для Mozilla
+  - 'CSS: розширення Mozilla'
+  - нестандартні властивості
+  - нестандартні властивості CSS для Mozilla
+translation_of: Web/CSS/Mozilla_Extensions
+---
+<div>{{CSSRef}}</div>
+
+<div></div>
+
+<p class="summary"><span class="seoSummary">У таких додатках Mozilla, як Firefox, підтримується ряд спеціальних <strong>розширень Mozilla</strong> до </span><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS">CSS</a></strong>,<span class="seoSummary"> включаючи властивості, значення, псевдо-елементи і псевдо-класи, at-правила і медіа-запити. Ці розширення мають префікс</span><code style="white-space: nowrap;">-moz-</code>.</p>
+
+<h2 id="Властивості_і_псевдокласи_тільки_для_Mozilla_уникайте_використання_на_веб-сайтах">Властивості і псевдокласи тільки для Mozilla (уникайте використання на веб-сайтах)</h2>
+
+<div class="blockIndicator note">
+<p><strong>Нотаток:</strong> Ці властивості і псевдокласи працюватимуть тільки в додатках Mozilla, таких як Firefox, і не працюють на стандартних технологічних схемах. Деякі з них можуть застосовуватися тільки до елементів XUL.</p>
+</div>
+
+<div class="index">
+<h3 id="B">B</h3>
+
+<ul>
+ <li>{{CSSxRef("-moz-binding")}} {{Deprecated_Inline}}</li>
+ <li>{{CSSxRef("-moz-border-bottom-colors")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-moz-border-left-colors")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-moz-border-right-colors")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-moz-border-top-colors")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-moz-box-align")}}</li>
+ <li>{{CSSxRef("-moz-box-direction")}}</li>
+ <li>{{CSSxRef("-moz-box-flex")}}</li>
+ <li>{{CSSxRef("-moz-box-ordinal-group")}}</li>
+ <li>{{CSSxRef("-moz-box-orient")}}</li>
+ <li>{{CSSxRef("-moz-box-pack")}}</li>
+</ul>
+
+<h3 id="C–I">C–I</h3>
+
+<ul>
+ <li>{{CSSxRef("-moz-context-properties")}}</li>
+ <li>{{CSSxRef("-moz-float-edge")}}</li>
+ <li>{{CSSxRef("-moz-force-broken-image-icon")}}</li>
+ <li>{{CSSxRef("-moz-image-region")}}</li>
+</ul>
+
+<h3 id="O">O</h3>
+
+<ul>
+ <li>{{CSSxRef("-moz-orient")}}</li>
+ <li>{{CSSxRef("-moz-osx-font-smoothing")}}</li>
+ <li>{{CSSxRef("-moz-outline-radius")}}</li>
+ <li>{{CSSxRef("-moz-outline-radius-bottomleft")}}</li>
+ <li>{{CSSxRef("-moz-outline-radius-bottomright")}}</li>
+ <li>{{CSSxRef("-moz-outline-radius-topleft")}}</li>
+ <li>{{CSSxRef("-moz-outline-radius-topright")}}</li>
+ <li>{{CSSxRef("overflow-clip-box")}}</li>
+ <li>{{CSSxRef("overflow-clip-box-block")}}</li>
+ <li>{{CSSxRef("overflow-clip-box-inline")}}</li>
+</ul>
+
+<h3 id="S–Z">S–Z</h3>
+
+<ul>
+ <li>{{CSSxRef("-moz-stack-sizing")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(images-in-menus)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(mac-graphite-theme)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.1")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(scrollbar-end-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(scrollbar-end-forward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(scrollbar-start-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(scrollbar-start-forward)")}} {{Obsolete_Inline}}{{Fx_minversion_inline(3)}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(touch-enabled)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(windows-default-theme)")}} {{Obsolete_Inline}}{{Fx_minversion_inline(3)}}</li>
+ <li>{{CSSxRef("-moz-user-focus")}}</li>
+ <li>{{CSSxRef("-moz-user-input")}}</li>
+ <li>{{CSSxRef("-moz-user-modify")}}</li>
+ <li>{{CSSxRef("-moz-window-dragging")}}</li>
+ <li>{{CSSxRef("-moz-window-shadow")}}</li>
+</ul>
+</div>
+
+<h2 id="Колись_патентовані_властивості_які_на_даний_час_є_стандартними"><span class="highlight-span">Колись патентовані властивості, які на даний час є стандартними</span></h2>
+
+<div class="blockIndicator note">
+<p><strong>Нотаток:</strong> Даби максимізувати сумісність вашого CSS, ви повинні використовувати непрефіксние стандартні властивості, а не префіксні, перераховані нижче. Як тільки задану властивість стандартизовано і реалізовано без префікса, префиксная версія, як правило, через деякий час видаляється.</p>
+</div>
+
+<div class="index">
+<ul>
+ <li>
+  <h3 id="A">A</h3>
+ </li>
+ <li>{{CSSxRef("animation", "-moz-animation")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("animation-delay", "-moz-animation-delay")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("animation-direction", "-moz-animation-direction")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("animation-duration", "-moz-animation-duration")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("animation-fill-mode", "-moz-animation-fill-mode")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("animation-iteration-count", "-moz-animation-iteration-count")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("animation-name", "-moz-animation-name")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("animation-play-state", "-moz-animation-play-state")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("animation-timing-function","-moz-animation-timing-function")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("appearance","-moz-appearance")}} {{Experimental_Inline}}</li>
+ <li>
+  <h3 id="B_2">B</h3>
+ </li>
+ <li>{{CSSxRef("backface-visibility", "-moz-backface-visibility")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("background-clip", "-moz-background-clip")}}{{Obsolete_Inline(2)}}</li>
+ <li>{{CSSxRef("background-origin", "-moz-background-origin")}}{{Obsolete_Inline(2)}}</li>
+ <li>{{CSSxRef("-moz-background-inline-policy")}}{{Obsolete_Inline(32)}} [Замінено на стандартну версію {{CSSxRef("box-decoration-break")}}]</li>
+ <li>{{CSSxRef("background-size", "-moz-background-size")}}{{Obsolete_Inline(2)}}</li>
+ <li>{{CSSxRef("border-inline-end","-moz-border-end")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("border-inline-end")}}]</li>
+ <li>{{CSSxRef("border-inline-color","-moz-border-end-color")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("border-inline-end-color")}}]</li>
+ <li>{{CSSxRef("border-inline-style","-moz-border-end-style")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("border-inline-end-style")}}]</li>
+ <li>{{CSSxRef("border-inline-width","-moz-border-end-width")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("border-inline-end-width")}}]</li>
+ <li>{{CSSxRef("border-image","-moz-border-image")}} {{Deprecated_Inline}}</li>
+ <li>{{CSSxRef("border-inline-start","-moz-border-start")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("border-inline-start")}}]</li>
+ <li>{{CSSxRef("border-inline-start-color","-moz-border-start-color")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("border-inline-start-color")}}]</li>
+ <li>{{CSSxRef("border-inline-start-style","-moz-border-start-style")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("border-inline-start-style")}}]</li>
+ <li>{{CSSxRef("border-inline-start-width","-moz-border-start-width")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("border-inline-start-width")}}]</li>
+ <li>{{CSSxRef("box-sizing", "-moz-box-sizing")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>
+  <h3 id="C">C</h3>
+ </li>
+ <li>{{CSSxRef("clip-path")}} {{Experimental_Inline}} [Застосовується більше до SVG]</li>
+ <li>{{CSSxRef("column-count","-moz-column-count")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("column-fill","-moz-column-fill")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("column-gap","-moz-column-gap")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("column-width","-moz-column-width")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("column-rule","-moz-column-rule")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("column-rule-width","-moz-column-rule-width")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("column-rule-style","-moz-column-rule-style")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("column-rule-color","-moz-column-rule-color")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("-moz-context-properties")}} {{Experimental_Inline}}</li>
+ <li>
+  <h3 id="F–M">F–M</h3>
+ </li>
+ <li>{{CSSxRef("filter")}} {{Experimental_Inline}} [Застосовується більше до SVG]</li>
+ <li>{{CSSxRef("font-feature-settings","-moz-font-feature-settings")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("font-language-override","-moz-font-language-override")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("hyphens","-moz-hyphens")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("margin-inline-end","-moz-margin-end")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("margin-inline-end")}}]</li>
+ <li>{{CSSxRef("margin-inline-start","-moz-margin-start")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("margin-inline-start")}}]</li>
+ <li>{{CSSxRef("mask")}} {{Experimental_Inline}} [Застосовується більше до SVG]</li>
+ <li>
+  <h3 id="O_2">O</h3>
+ </li>
+ <li>{{CSSxRef("opacity","-moz-opacity")}}{{Obsolete_Inline("1.9.1")}}</li>
+ <li>{{CSSxRef("outline","-moz-outline")}}{{Obsolete_Inline("1.9.2")}}</li>
+ <li>{{CSSxRef("outline-color","-moz-outline-color")}}{{Obsolete_Inline("1.9.2")}}</li>
+ <li>{{CSSxRef("outline-offset","-moz-outline-offset")}}{{Obsolete_Inline("1.9.2")}}</li>
+ <li>{{CSSxRef("outline-style","-moz-outline-style")}}{{Obsolete_Inline("1.9.2")}}</li>
+ <li>{{CSSxRef("outline-width","-moz-outline-width")}}{{Obsolete_Inline("1.9.2")}}</li>
+ <li>
+  <h3 id="P">P</h3>
+ </li>
+ <li>{{CSSxRef("padding-inline-end","-moz-padding-end")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("padding-inline-start")}}]</li>
+ <li>{{CSSxRef("padding-inline-start","-moz-padding-start")}} {{Deprecated_Inline}} [Замінено на стандартну версію {{CSSxRef("padding-inline-end")}}]</li>
+ <li>{{CSSxRef("perspective", "-moz-perspective")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("perspective-origin","-moz-perspective-origin")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("pointer-events")}} {{Experimental_Inline}} [Застосовується більше до SVG]</li>
+ <li>
+  <h3 id="T–U">T–U</h3>
+ </li>
+ <li>{{CSSxRef("tab-size","-moz-tab-size")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("text-align-last","-moz-text-align-last")}}{{Obsolete_Inline("53")}}</li>
+ <li>{{CSSxRef("text-decoration-color","-moz-text-decoration-color")}}{{Obsolete_Inline("39")}}</li>
+ <li>{{CSSxRef("text-decoration-line","-moz-text-decoration-line")}}{{Obsolete_Inline("39")}}</li>
+ <li>{{CSSxRef("text-decoration-style","-moz-text-decoration-style")}}{{Obsolete_Inline("39")}}</li>
+ <li>{{CSSxRef("text-size-adjust","-moz-text-size-adjust")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("transform", "-moz-transform")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("transform-origin", "-moz-transform-origin")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("transform-style", "-moz-transform-style")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("transition", "-moz-transition")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("transition-delay", "-moz-transition-delay")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("transition-duration", "-moz-transition-duration")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("transition-property", "-moz-transition-property")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("transition-timing-function", "-moz-transition-timing-function")}} {{Deprecated_Inline}} [Префіксная версія все ще доступна]</li>
+ <li>{{CSSxRef("user-select","-moz-user-select")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h2 id="Значення_властивостей">Значення властивостей</h2>
+
+<h3 id="Глобальні_значення">Глобальні значення</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("initial","-moz-initial")}}</li>
+</ul>
+</div>
+
+<h3 id="-moz-appearance" name="-moz-appearance">{{CSSxRef("-moz-appearance")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>button</code></li>
+ <li><code>button-arrow-down</code></li>
+ <li><code>button-arrow-next</code></li>
+ <li><code>button-arrow-previous</code></li>
+ <li><code>button-arrow-up</code></li>
+ <li><code>button-bevel</code></li>
+ <li><code>checkbox</code></li>
+ <li><code>checkbox-container</code></li>
+ <li><code>checkbox-label</code></li>
+ <li><code>checkmenuitem</code></li>
+ <li><code>dialog</code></li>
+ <li><code>groupbox</code></li>
+ <li><code>listbox</code></li>
+ <li><code>menuarrow</code></li>
+ <li><code>menucheckbox</code></li>
+ <li><code>menuimage</code></li>
+ <li><code>menuitem</code></li>
+ <li><code>menuitemtext</code></li>
+ <li><code>menulist</code></li>
+ <li><code>menulist-button</code></li>
+ <li><code>menulist-text</code></li>
+ <li><code>menulist-textfield</code></li>
+ <li><code>menupopup</code></li>
+ <li><code>menuradio</code></li>
+ <li><code>menuseparator</code></li>
+ <li><code>-moz-mac-unified-toolbar</code>{{Fx_MinVersion_Inline(3.5)}}</li>
+ <li><code>-moz-win-borderless-glass</code></li>
+ <li><code>-moz-win-browsertabbar-toolbox</code>{{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-win-communications-toolbox</code>{{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-win-glass</code></li>
+ <li><code>-moz-win-media-toolbox</code>{{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-window-button-box</code></li>
+ <li><code>-moz-window-button-box-maximized</code></li>
+ <li><code>-moz-window-button-close</code></li>
+ <li><code>-moz-window-button-maximize</code></li>
+ <li><code>-moz-window-button-minimize</code></li>
+ <li><code>-moz-window-button-restore</code></li>
+ <li><code>-moz-window-titlebar</code></li>
+ <li><code>-moz-window-titlebar-maximized</code></li>
+ <li><code>progressbar</code></li>
+ <li><code>progresschunk</code></li>
+ <li><code>radio</code></li>
+ <li><code>radio-container</code></li>
+ <li><code>radio-label</code></li>
+ <li><code>radiomenuitem</code></li>
+ <li><code>resizer</code></li>
+ <li><code>resizerpanel</code></li>
+ <li><code>scale-horizontal</code></li>
+ <li><code>scalethumb-horizontal</code></li>
+ <li><code>scalethumb-vertical</code></li>
+ <li><code>scale-vertical</code></li>
+ <li><code>scrollbarbutton-down</code></li>
+ <li><code>scrollbarbutton-left</code></li>
+ <li><code>scrollbarbutton-right</code></li>
+ <li><code>scrollbarbutton-up</code></li>
+ <li><code>scrollbar-small</code></li>
+ <li><code>scrollbarthumb-horizontal</code></li>
+ <li><code>scrollbarthumb-vertical</code></li>
+ <li><code>scrollbartrack-horizontal</code></li>
+ <li><code>scrollbartrack-vertical</code></li>
+ <li><code>separator</code></li>
+ <li><code>spinner</code></li>
+ <li><code>spinner-downbutton</code></li>
+ <li><code>spinner-textfield</code></li>
+ <li><code>spinner-upbutton</code></li>
+ <li><code>statusbar</code></li>
+ <li><code>statusbarpanel</code></li>
+ <li><code>tab</code></li>
+ <li><code>tabpanels</code></li>
+ <li><code>tab-scroll-arrow-back</code></li>
+ <li><code>tab-scroll-arrow-forward</code></li>
+ <li><code>textfield</code></li>
+ <li><code>textfield-multiline</code></li>
+ <li><code>toolbar</code></li>
+ <li><code>toolbarbutton-dropdown</code></li>
+ <li><code>toolbox</code></li>
+ <li><code>tooltip</code></li>
+ <li><code>treeheadercell</code></li>
+ <li><code>treeheadersortarrow</code></li>
+ <li><code>treeitem</code></li>
+ <li><code>treetwisty</code></li>
+ <li><code>treetwistyopen</code></li>
+ <li><code>treeview</code></li>
+ <li><code>window</code></li>
+</ul>
+</div>
+
+<h3 id="background-image" name="background-image">{{CSSxRef("background-image")}}</h3>
+
+<div class="index">
+<ul>
+ <li>
+  <h4 id="Gradients" name="Gradients">Градієнти{{Gecko_minversion_inline("1.9.2")}}</h4>
+
+  <ul>
+   <li>{{CSSxRef("linear-gradient","-moz-linear-gradient")}} {{Deprecated_Inline}}</li>
+   <li>{{CSSxRef("radial-gradient","-moz-radial-gradient")}} {{Deprecated_Inline}}</li>
+  </ul>
+ </li>
+ <li>
+  <h4 id="Elements" name="Elements">Елементи{{gecko_minversion_inline("2.0")}}</h4>
+
+  <ul>
+   <li>{{CSSxRef("element","-moz-element")}}</li>
+  </ul>
+ </li>
+ <li>
+  <h4 id="Sub-images" name="Sub-images">Sub-зображення{{gecko_minversion_inline("2.0")}}</h4>
+
+  <ul>
+   <li>{{CSSxRef("-moz-image-rect")}}</li>
+  </ul>
+ </li>
+</ul>
+</div>
+
+<h3 id="border-color" name="border-color">{{CSSxRef("border-color")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-use-text-color</code>{{Obsolete_Inline(52)}} (видалено в {{bug(1306214)}}); використовуйте {{CSSxRef("color_value#currentColor_keyword","currentcolor")}} замість цього.</li>
+</ul>
+</div>
+
+<h3 id="border-style_and_outline-style" name="border-style_and_outline-style">{{CSSxRef("border-style")}} and {{CSSxRef("outline-style")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-bg-inset</code>{{Obsolete_Inline(1.9)}}</li>
+ <li><code>-moz-bg-outset</code>{{Obsolete_Inline(1.9)}}</li>
+ <li><code>-moz-bg-solid</code>{{Obsolete_Inline(1.9)}}</li>
+</ul>
+</div>
+
+<h3 id="color_keywords" name="color_keywords">{{CSSxRef("&lt;color&gt;")}} keywords</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-activehyperlinktext</code></li>
+ <li><code>-moz-hyperlinktext</code></li>
+ <li><code>-moz-visitedhyperlinktext</code></li>
+ <li><code>-moz-buttondefault</code></li>
+ <li><code>-moz-buttonhoverface</code></li>
+ <li><code>-moz-buttonhovertext</code></li>
+ <li><code>-moz-default-background-color</code>{{Gecko_minversion_inline("5.0")}}</li>
+ <li><code>-moz-default-color</code>{{Gecko_minversion_inline("5.0")}}</li>
+ <li><code>-moz-cellhighlight</code></li>
+ <li><code>-moz-cellhighlighttext</code></li>
+ <li><code>-moz-field</code></li>
+ <li><code>-moz-fieldtext</code></li>
+ <li><code>-moz-dialog</code></li>
+ <li><code>-moz-dialogtext</code></li>
+ <li><code>-moz-dragtargetzone</code></li>
+ <li><code>-moz-mac-accentdarkestshadow</code></li>
+ <li><code>-moz-mac-accentdarkshadow</code></li>
+ <li><code>-moz-mac-accentface</code></li>
+ <li><code>-moz-mac-accentlightesthighlight</code></li>
+ <li><code>-moz-mac-accentlightshadow</code></li>
+ <li><code>-moz-mac-accentregularhighlight</code></li>
+ <li><code>-moz-mac-accentregularshadow</code></li>
+ <li><code>-moz-mac-chrome-active</code>{{Gecko_minversion_inline("1.9.1")}}</li>
+ <li><code>-moz-mac-chrome-inactive</code>{{Gecko_minversion_inline("1.9.1")}}</li>
+ <li><code>-moz-mac-focusring</code></li>
+ <li><code>-moz-mac-menuselect</code></li>
+ <li><code>-moz-mac-menushadow</code></li>
+ <li><code>-moz-mac-menutextselect</code></li>
+ <li><code>-moz-menuhover</code></li>
+ <li><code>-moz-menuhovertext</code></li>
+ <li><code>-moz-win-communicationstext</code>{{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-win-mediatext</code>{{gecko_minversion_inline(1.9)}}</li>
+ <li><code>-moz-nativehyperlinktext</code>{{Gecko_minversion_inline("1.9.1")}}</li>
+</ul>
+</div>
+
+<h3 id="display" name="display">{{CSSxRef("display")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-box</code> {{Deprecated_Inline}}</li>
+ <li><code>-moz-inline-block</code> {{Obsolete_Inline}}</li>
+ <li><code>-moz-inline-box</code> {{Deprecated_Inline}}</li>
+ <li><code>-moz-inline-grid</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-inline-stack</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-inline-table</code> {{Obsolete_Inline}}</li>
+ <li><code>-moz-grid</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-grid-group</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-grid-line</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-groupbox</code>{{Obsolete_Inline}}</li>
+ <li><code>-moz-deck</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-popup</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-stack</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-marker</code>{{Obsolete_Inline(62)}}</li>
+</ul>
+</div>
+
+<h3 id="empty-cells" name="empty-cells">{{CSSxRef("empty-cells")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-show-background</code> <span style="white-space: nowrap;">(за замовчуванням в режимі сумісності)</span></li>
+</ul>
+</div>
+
+<h3 id="font" name="font">{{CSSxRef("font")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-button</code></li>
+ <li><code>-moz-info</code></li>
+ <li><code>-moz-desktop</code></li>
+ <li><code>-moz-dialog</code> (як color)</li>
+ <li><code>-moz-document</code></li>
+ <li><code>-moz-workspace</code></li>
+ <li><code>-moz-window</code></li>
+ <li><code>-moz-list</code></li>
+ <li><code>-moz-pull-down-menu</code></li>
+ <li><code>-moz-field</code> <span style="white-space: nowrap;">(як color)</span></li>
+</ul>
+</div>
+
+<h3 id="font-family" name="font-family">{{CSSxRef("font-family")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-fixed</code></li>
+</ul>
+</div>
+
+<h3 id="image-rendering" name="image-rendering">{{CSSxRef("image-rendering")}}</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("image-rendering","-moz-crisp-edges")}}{{Gecko_minversion_inline("1.9.2")}}</li>
+</ul>
+</div>
+
+<h3 id="length" name="length">{{CSSxRef("&lt;length&gt;")}}</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("-moz-calc")}}{{gecko_minversion_inline("2.0")}}</li>
+</ul>
+</div>
+
+<h3 id="list-style-type" name="list-style-type">{{CSSxRef("list-style-type")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-arabic-indic</code></li>
+ <li><code>-moz-bengali</code></li>
+ <li><code>-moz-cjk-earthly-branch</code></li>
+ <li><code>-moz-cjk-heavenly-stem</code></li>
+ <li><code>-moz-devanagari</code></li>
+ <li><code>-moz-ethiopic-halehame</code></li>
+ <li><code>-moz-ethiopic-halehame-am</code></li>
+ <li><code>-moz-ethiopic-halehame-ti-er</code></li>
+ <li><code>-moz-ethiopic-halehame-ti-et</code></li>
+ <li><code>-moz-ethiopic-numeric</code></li>
+ <li><code>-moz-gujarati</code></li>
+ <li><code>-moz-gurmukhi</code></li>
+ <li><code>-moz-hangul</code></li>
+ <li><code>-moz-hangul-consonant</code></li>
+ <li><code>-moz-japanese-formal</code></li>
+ <li><code>-moz-japanese-informal</code></li>
+ <li><code>-moz-kannada</code></li>
+ <li><code>-moz-khmer</code></li>
+ <li><code>-moz-lao</code></li>
+ <li><code>-moz-malayalam</code></li>
+ <li><code>-moz-myanmar</code></li>
+ <li><code>-moz-oriya</code></li>
+ <li><code>-moz-persian</code></li>
+ <li><code>-moz-simp-chinese-formal</code></li>
+ <li><code>-moz-simp-chinese-informal</code></li>
+ <li><code>-moz-tamil</code></li>
+ <li><code>-moz-telugu</code></li>
+ <li><code>-moz-thai</code></li>
+ <li><code>-moz-trad-chinese-formal</code></li>
+ <li><code>-moz-trad-chinese-informal</code></li>
+ <li><code>-moz-urdu</code></li>
+</ul>
+</div>
+
+<h3 id="overflow" name="overflow">{{CSSxRef("overflow")}}</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("-moz-scrollbars-none")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-moz-scrollbars-horizontal")}} {{Deprecated_Inline}}</li>
+ <li>{{CSSxRef("-moz-scrollbars-vertical")}} {{Deprecated_Inline}}</li>
+ <li>{{CSSxRef("-moz-hidden-unscrollable")}}</li>
+</ul>
+</div>
+
+<h3 id="text-align" name="text-align">{{CSSxRef("text-align")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-center</code></li>
+ <li><code>-moz-left</code></li>
+ <li><code>-moz-right</code></li>
+</ul>
+</div>
+
+<h3 id="text-decoration" name="text-decoration">{{CSSxRef("text-decoration")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-anchor-decoration</code></li>
+</ul>
+</div>
+
+<h3 id="-moz-user-select" name="-moz-user-select">{{CSSxRef("-moz-user-select")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-all</code></li>
+ <li><code>-moz-none</code></li>
+</ul>
+</div>
+
+<h3 id="width_min-width_and_max-width" name="width_min-width_and_max-width">{{CSSxRef("width")}}, {{CSSxRef("min-width")}}, and {{CSSxRef("max-width")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-min-content</code> {{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-fit-content</code> {{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-max-content</code> {{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-available</code> {{Fx_minversion_inline(3)}}</li>
+</ul>
+</div>
+
+<h2 id="Псевдоелементи_та_псевдокласи">Псевдоелементи та псевдокласи</h2>
+
+<div class="index">
+<ul>
+ <li>
+  <h3 id="A_–_D">A – D</h3>
+ </li>
+ <li>{{CSSxRef("::-moz-anonymous-block")}} <span class="comment">eg@:- bug 331432</span></li>
+ <li>{{CSSxRef("::-moz-anonymous-positioned-block")}}</li>
+ <li>{{CSSxRef(":-moz-any")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef(":-moz-any-link")}} [Matches <code>:link</code> and <code>:visited</code>]</li>
+ <li>{{CSSxRef(":-moz-broken")}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef("::-moz-canvas")}}</li>
+ <li>{{CSSxRef("::-moz-color-swatch")}}</li>
+ <li>{{CSSxRef("::-moz-cell-content")}}</li>
+ <li>{{CSSxRef(":-moz-drag-over")}}</li>
+ <li>
+  <h3 id="F_–_I">F – I</h3>
+ </li>
+ <li>{{CSSxRef(":-moz-first-node")}}</li>
+ <li>{{CSSxRef("::-moz-focus-inner")}}</li>
+ <li>{{CSSxRef("::-moz-focus-outer")}}</li>
+ <li>{{CSSxRef(":-moz-focusring")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef(":-moz-full-screen")}}{{gecko_minversion_inline("9.0")}}</li>
+ <li>{{CSSxRef(":-moz-full-screen-ancestor")}}{{gecko_minversion_inline("10.0")}}</li>
+ <li>{{CSSxRef(":-moz-handler-blocked")}}{{gecko_minversion_inline("1.9.1")}}</li>
+ <li>{{CSSxRef(":-moz-handler-crashed")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef(":-moz-handler-disabled")}}{{gecko_minversion_inline("1.9.1")}}</li>
+ <li>{{CSSxRef("::-moz-inline-table")}}</li>
+ <li>
+  <h3 id="L">L</h3>
+ </li>
+ <li>{{CSSxRef(":-moz-last-node")}}</li>
+ <li>{{CSSxRef(":-moz-list-bullet")}}</li>
+ <li>{{CSSxRef(":-moz-list-number")}}</li>
+ <li>{{CSSxRef(":-moz-loading")}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-locale-dir(ltr)")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef(":-moz-locale-dir(rtl)")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef(":-moz-lwtheme")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef(":-moz-lwtheme-brighttext")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef(":-moz-lwtheme-darktext")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>
+  <h3 id="N_–_R">N – R</h3>
+ </li>
+ <li>{{CSSxRef(":-moz-native-anonymous")}}{{gecko_minversion_inline("36")}}</li>
+ <li>{{CSSxRef(":-moz-only-whitespace")}}</li>
+ <li>{{CSSxRef("::-moz-page")}}</li>
+ <li>{{CSSxRef("::-moz-page-sequence")}}</li>
+ <li>{{CSSxRef("::-moz-pagebreak")}}</li>
+ <li>{{CSSxRef("::-moz-pagecontent")}}</li>
+ <li>{{CSSxRef(":-moz-placeholder")}}{{gecko_minversion_inline("1.9")}}{{Obsolete_Inline("51")}}</li>
+ <li>{{CSSxRef("::-moz-placeholder")}}{{gecko_minversion_inline("19")}}{{Deprecated_Inline("51")}}</li>
+ <li>{{CSSxRef("::-moz-progress-bar")}}</li>
+ <li>{{CSSxRef("::-moz-range-progress")}}</li>
+ <li>{{CSSxRef("::-moz-range-thumb")}}</li>
+ <li>{{CSSxRef("::-moz-range-track")}}</li>
+ <li>{{CSSxRef(":-moz-read-only")}}</li>
+ <li>{{CSSxRef(":-moz-read-write")}}</li>
+ <li>
+  <h3 id="S">S</h3>
+ </li>
+ <li>{{CSSxRef("::-moz-scrolled-canvas")}}</li>
+ <li>{{CSSxRef("::-moz-scrolled-content")}}</li>
+ <li>{{CSSxRef("::-moz-scrolled-page-sequence")}}</li>
+ <li>{{CSSxRef("::selection","::-moz-selection")}}{{Deprecated_Inline(62)}}</li>
+ <li>{{CSSxRef(":-moz-submit-invalid")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef(":-moz-suppressed")}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef("::-moz-svg-foreign-content")}}</li>
+ <li>
+  <h3 id="T">T</h3>
+ </li>
+ <li>{{CSSxRef("::-moz-table")}}</li>
+ <li>{{CSSxRef("::-moz-table-cell")}}</li>
+ <li>{{CSSxRef("::-moz-table-column")}}</li>
+ <li>{{CSSxRef("::-moz-table-column-group")}}</li>
+ <li>{{CSSxRef("::-moz-table-outer")}}</li>
+ <li>{{CSSxRef("::-moz-table-row")}}</li>
+ <li>{{CSSxRef("::-moz-table-row-group")}}</li>
+ <li>{{CSSxRef(":-moz-tree-cell")}}</li>
+ <li>{{CSSxRef(":-moz-tree-cell-text")}}</li>
+ <li>{{CSSxRef(":-moz-tree-cell-text(hover)")}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-tree-checkbox")}}</li>
+ <li>{{CSSxRef(":-moz-tree-column")}}</li>
+ <li>{{CSSxRef(":-moz-tree-drop-feedback")}}</li>
+ <li>{{CSSxRef(":-moz-tree-image")}}</li>
+ <li>{{CSSxRef(":-moz-tree-indentation")}}</li>
+ <li>{{CSSxRef(":-moz-tree-line")}}</li>
+ <li>{{CSSxRef(":-moz-tree-progressmeter")}}</li>
+ <li>{{CSSxRef(":-moz-tree-row")}}</li>
+ <li>{{CSSxRef(":-moz-tree-row(hover)")}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-tree-separator")}}</li>
+ <li>{{CSSxRef(":-moz-tree-twisty")}}</li>
+ <li>
+  <h3 id="U_–_X">U – X</h3>
+ </li>
+ <li>{{CSSxRef(":-moz-ui-invalid")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef(":-moz-ui-valid")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef(":-moz-user-disabled")}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef("::-moz-viewport")}}</li>
+ <li>{{CSSxRef("::-moz-viewport-scroll")}}</li>
+ <li>{{CSSxRef(":-moz-window-inactive")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef("::-moz-xul-anonymous-block")}}</li>
+</ul>
+</div>
+
+<h2 id="At-правила">At-правила</h2>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("@-moz-document")}}</li>
+</ul>
+</div>
+
+<h2 id="Компоненти_медіа_запитів">Компоненти медіа запитів</h2>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("@media/-moz-mac-graphite-theme", "-moz-mac-graphite-theme")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-maemo-classic", "-moz-maemo-classic")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-device-pixel-ratio", "-moz-device-pixel-ratio")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef("@media/-moz-os-version", "-moz-os-version")}}</li>
+ <li>{{CSSxRef("@media/-moz-scrollbar-end-backward", "-moz-scrollbar-end-backward")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-scrollbar-end-forward", "-moz-scrollbar-end-forward")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-scrollbar-start-backward", "-moz-scrollbar-start-backward")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-scrollbar-start-forward", "-moz-scrollbar-start-forward")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-scrollbar-thumb-proportional", "-moz-scrollbar-thumb-proportional")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-touch-enabled", "-moz-touch-enabled")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-accent-color-in-titlebar", "-moz-windows-accent-color-in-titlebar")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-classic", "-moz-windows-classic")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-compositor", "-moz-windows-compositor")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-glass", "-moz-windows-glass")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-theme", "-moz-windows-theme")}}{{gecko_minversion_inline("2.0")}}</li>
+</ul>
+</div>
+
+<h2 id="Інше">Інше</h2>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("-moz-alt-content")}} (дивіться {{Bug(11011)}})</li>
+</ul>
+</div>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Gecko/Chrome/CSS"><span style="white-space: nowrap;">Довідник CSS тільки для Chrome</span></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Microsoft_Extensions">CSS-розширення для Microsoft</a></li>
+ <li><a href="/en-US/docs/Web/CSS/WebKit_Extensions">CSS-розширення для WebKit</a></li>
+</ul>
diff --git a/files/uk/web/css/order/index.html b/files/uk/web/css/order/index.html
new file mode 100644
index 0000000000..147009e8f1
--- /dev/null
+++ b/files/uk/web/css/order/index.html
@@ -0,0 +1,170 @@
+---
+title: order
+slug: Web/CSS/order
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - Порядок
+translation_of: Web/CSS/order
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Загальний_огляд">Загальний огляд</h2>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> параметр <strong><code>order</code></strong> визначає порядок розташування flex елементів відносно їхнього батьківського flex контейнера. Елементи розташовуються у порядку зростання значення order. Елементи з однаковим значенням параметра <code>order</code> розташовуються в такому порядку, в якому вони розташовані в основному коді.</p>
+
+<div class="note">
+<p><strong>Примітка</strong>: параметр <code>order</code> лише впливає на <strong>візуальний порядок</strong> елементів і не впливає на їх логічний порядок або порядок табуляції. <code><strong>order</strong></code> не повинен використовуватися на невізуальних носіях, таких як голосові читалки.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<p>Дивіться <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Використання CSS flexible boxes</a> для більш детальної інформації, а також опису інших параметрів.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">/* Числові значення включаючи від'ємні числа */
+order: 5;
+order: -5;
+
+/* Глобальні значення */
+order: inherit;
+order: initial;
+order: unset;
+</pre>
+
+<h3 id="Значення">Значення</h3>
+
+<dl>
+ <dt><code>&lt;integer&gt;</code></dt>
+ <dd>Відображає порядковий номер групи, до якої flex елемент був присвоєний.</dd>
+</dl>
+
+<h3 id="Офіційний_синтаксис">Офіційний синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Тут є базовий уривок HTML:</p>
+
+<pre class="brush:html;">&lt;!DOCTYPE html&gt;
+&lt;header&gt;...&lt;/header&gt;
+&lt;div id='main'&gt;
+   &lt;article&gt;Article&lt;/article&gt;
+   &lt;nav&gt;Nav&lt;/nav&gt;
+   &lt;aside&gt;Aside&lt;/aside&gt;
+&lt;/div&gt;
+&lt;footer&gt;...&lt;/footer&gt;</pre>
+
+<p>Наступний CSS код повинен створити класичний шаблон з двома бічними панелями, які оточують блок з контентом. Flexible Box Layout Module автоматично створює блоки з однаковими вертикальними розмірами і буде займати стільки горизонтального простору, скільки буде доступно.</p>
+
+<pre class="brush:css;">#main { display: flex;  text-align:center; }
+#main &gt; article { flex:1;        order: 2; }
+#main &gt; nav     { width: 200px;  order: 1; }
+#main &gt; aside   { width: 200px;  order: 3; }</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Examples' ,'','','','Web/CSS/order') }}</p>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#order-property', 'order')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Початкове визначення</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особливість</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базова підтримка</td>
+   <td>{{CompatChrome(21.0)}}{{property_prefix("-webkit")}}<br>
+    29</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("20.0")}}<sup>[2]</sup></td>
+   <td>
+    <p>10.0{{property_prefix("-ms")}}<sup>[3]</sup><br>
+     11</p>
+   </td>
+   <td>12.10</td>
+   <td>7 {{property_prefix("-webkit")}}<br>
+    9</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особливість</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базова підтримка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("18.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoMobile("20.0")}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>12.10</td>
+   <td>7 {{property_prefix("-webkit")}}<br>
+    9</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Щоб активувати підтримку Flexbox для Firefox 18 або 19, користувач повинен змінити about:config preference <code>layout.css.flexbox.enabled</code> на <code>true</code>. Багаторядкові flexible boxes підтримуються з Firefox 28.</p>
+
+<p>Firefox на даний час неправильно змінює порядок табуляції елементів. Дивитися {{bug("812687")}}.</p>
+
+<p>[2] На додаток до підтримки без префікса, Gecko 48.0 {{geckoRelease("48.0")}} добавила підтримку для <code>-webkit</code> префіксної версії даного параметра, for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p>
+
+<p>[3] В Internet Explorer 10, flexible контейнер декларуєтсья з використанням префікса '-ms' <code>display:-ms-flexbox,</code> а не <code>display:flex</code>. Даний параметр реалізований під нестандартним іменем <code>-ms-flex-order</code>.</p>
+
+<h2 id="Дивитися_також">Дивитися також</h2>
+
+<ul>
+ <li><a href="/docs/Web/Guide/CSS/Flexible_boxes">Використання CSS flexible boxes</a></li>
+</ul>
diff --git a/files/uk/web/css/position/index.html b/files/uk/web/css/position/index.html
new file mode 100644
index 0000000000..7a31f56b89
--- /dev/null
+++ b/files/uk/web/css/position/index.html
@@ -0,0 +1,461 @@
+---
+title: position
+slug: Web/CSS/position
+tags:
+  - CSS
+  - CSS-властивість
+  - Розміщення
+translation_of: Web/CSS/position
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/uk/docs/CSS">CSS</a>-властивість <strong><code>position</code></strong> вказує, як елемент розміщено в документі. А властивості {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, та {{Cssxref("left")}} визначають остаточне положення елемента.</p>
+
+<pre class="brush: css no-line-numbers">/* Keyword values */
+position: static;
+position: relative;
+position: absolute;
+position: fixed;
+position: sticky;
+
+/* Global values */
+position: inherit;
+position: initial;
+position: unset;
+</pre>
+
+<div id="position">
+<div class="hidden">
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div class="box"&gt;&lt;strong&gt;static&lt;/strong&gt;&lt;/div&gt;
+  &lt;div class="box relative"&gt;&lt;strong&gt;relative&lt;/strong&gt;&lt;br/&gt;&lt;br/&gt;top: 30px;&lt;br/&gt;right: 20px;&lt;/div&gt;
+  &lt;div class="box sticky"&gt;&lt;strong&gt;sticky&lt;/strong&gt;&lt;br/&gt;&lt;br/&gt;top: 20px;&lt;/div&gt;
+  &lt;div class="box fixed"&gt;&lt;strong&gt;fixed&lt;/strong&gt;&lt;br/&gt;&lt;br/&gt;left: 280px;&lt;/div&gt;
+
+  &lt;div class="text"&gt;
+    &lt;p&gt;Try scrolling this example to see the effect of
+        &lt;strong&gt;&lt;code&gt;fixed&lt;/code&gt;&lt;/strong&gt; or
+        &lt;strong&gt;&lt;code&gt;sticky&lt;/code&gt;&lt;/strong&gt; positioning.&lt;/p&gt;
+    &lt;p&gt;With &lt;strong&gt;&lt;code&gt;fixed&lt;/code&gt;&lt;/strong&gt; positioning, the
+        element does not move as the viewport scrolls.&lt;/p&gt;
+    &lt;p&gt;With &lt;strong&gt;&lt;code&gt;sticky&lt;/code&gt;&lt;/strong&gt; positioning, the
+        element moves until it reaches a threshold:
+        in this case 20 pixels from the top of the container.&lt;/p&gt;
+    &lt;p&gt;The other two boxes show the effect of
+        &lt;strong&gt;&lt;code&gt;static&lt;/code&gt;&lt;/strong&gt; and
+        &lt;strong&gt;&lt;code&gt;relative&lt;/code&gt;&lt;/strong&gt; positioning.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<div class="hidden">
+<pre class="brush: css">#container {
+  border: 5px solid #F4F7F8;
+  width: 100%;
+  height: 300px;
+  display: flex;
+  overflow: scroll;
+  box-sizing: border-box;
+}
+
+.box {
+  height: 80px;
+  margin: 5px;
+  padding: 5px;
+  margin-top: 100px;
+  background-color: yellow;
+  border: 2px solid red;
+  color: red;
+  font-family: monospace;
+}
+
+.text {
+  max-width: 120px;
+  padding: 0 0.5em 0 120px;
+  font-family: sans-serif;
+}
+
+
+.relative {
+  position: relative;
+  top: 30px;
+  right: 20px;
+}
+
+.sticky {
+  position: sticky;
+  top: 20px;
+}
+
+.fixed {
+  position: fixed;
+  left: 280px;
+}
+</pre>
+</div>
+{{EmbedLiveSample("position", 1200, 300, "", "", "example-outcome-frame")}}</div>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Види_розміщення">Види розміщення</h3>
+
+<ul>
+ <li><strong>Розміщеним елементом</strong> називають елемент, чиє {{cssxref("computed_value", "обчислене значення")}} властивості <code>position</code> — <code>relative</code>, <code>absolute</code>, <code>fixed</code>, або <code>sticky</code>. Інакше кажучи, все окрім <code>static</code>.</li>
+ <li>Елементом з <strong>відносним розміщенням </strong>називають елемент, чиє {{cssxref("computed_value", "обчислене значення")}} властивості <code>position</code> — <code style="font-size: 14px;">relative</code>. Властивості {{Cssxref("top")}} і {{Cssxref("bottom")}} вказують доземний (вертикальний) зсув від початкового положення; натомість властивості {{Cssxref("left")}} і {{Cssxref("right")}} визначають поземний (горизонтальний) зсув.</li>
+ <li>Елементом з <strong>абсолютним розміщенням</strong> називають елемент, чиє {{cssxref("computed_value", "обчислене значення")}} властивості <code>position</code> — <code>absolute</code> або <code>fixed</code>. Властивості {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}} та {{Cssxref("left")}} вказують зсуви від країв блока, що містить елемент (себто той блок є батьківським і відносно нього здійснюється розміщення елемента). Якщо елемент має {{cssxref("margin", "відступи")}}, то вони додаються до зсувів.</li>
+ <li>Елементом з <strong>«липким» розміщенням</strong> називають елемент, чиє {{cssxref("computed_value", "обчислене значення")}} властивості <code>position</code> — <code>sticky</code>. До певної межі (поки блок, всередині якого той елемент розташовано, не перетинає зазначеного порогового значення) це працює так само, як відносне розміщення, а тоді — як нерухоме (fixed).</li>
+</ul>
+
+<p><span style="line-height: 1.5;">Most of the time, absolutely positioned elements that have</span><span style="line-height: 1.5;"> {{Cssxref("height")}} and {{Cssxref("width")}} set to <code>auto</code> are sized so as to fit their contents. However, non-replaced absolutely positioned elements can be made to fill the available vertical space by specifying </span><span style="line-height: 1.5;">both {{Cssxref("top")}} and {{Cssxref("bottom")}} and leaving {{Cssxref("height")}} unspecified (that is, </span><code style="font-size: 14px;">auto</code><span style="line-height: 1.5;">). They can likewise be made to fill the available horizontal space by specifying </span><span style="line-height: 1.5;">both {{Cssxref("left")}} and {{Cssxref("right")}} and leaving {{Cssxref("width")}} as <code>auto</code>.</span></p>
+
+<p>Except for the case just described of absolutely positioned elements filling the available space:</p>
+
+<ul>
+ <li>If both <code>top</code> and <code>bottom</code> are specified (technically, not <code>auto</code>), <code>top</code> wins.</li>
+ <li>If both <code>left</code> and <code>right</code> are specified, <code>left</code> wins when {{Cssxref("direction")}} is <code>ltr</code> (English, horizontal Japanese, etc.) and <code>right</code> wins when {{Cssxref("direction")}} is <code>rtl</code> (Persian, Arabic, Hebrew, etc.).</li>
+</ul>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Значення властивості <code>position</code> може бути одним із ключових слів, що їх перелік наведено нижче.</p>
+
+<h3 id="Значення">Значення</h3>
+
+<dl>
+ <dt><code>static</code></dt>
+ <dd>The element is positioned according to the normal flow of the document. The {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("z-index")}} properties have <em>no effect</em>. This is the default value.</dd>
+ <dt><code>relative</code></dt>
+ <dd>The element is positioned according to the normal flow of the document, and then offset <em>relative to itself</em> based on the values of <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were <code>static</code>. This value creates a new <a href="https://developer.mozilla.org/en/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a> when the value of <code>z-index</code> is not <code>auto</code>. The effect of <code>relative</code> on <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code>, and <code>table-caption</code> elements is undefined.</dd>
+ <dt><code>absolute</code></dt>
+ <dd>The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to its closest positioned ancestor if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. This value creates a new <a href="https://developer.mozilla.org/en/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a> when the value of <code>z-index</code> is not <code>auto</code>. Absolutely positioned boxes can have margins, and they do not collapse with any other margins.</dd>
+ <dt><span style="font-family: courier new,andale mono,monospace; font-weight: inherit; line-height: normal;">fixed</span></dt>
+ <dd>The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to the screen's viewport and doesn't move when scrolled. Its final position is determined by the values of <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. This value always creates a new <a href="https://developer.mozilla.org/en/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a>. When an ancestor has the <code>transform</code> property set to something other than <code>none</code>, that ancestor is used as the container instead of the viewport (see <a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a>). In printed documents, the element is placed in the same position on <em>every page</em>.</dd>
+</dl>
+
+<dl>
+ <dt><code style="font-size: 14px;">sticky</code> {{experimental_inline}}</dt>
+ <dd>The element is positioned according to the normal flow of the document, and then offset relative to <em>its flow root and containing block</em> based on the values of <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. The offset does not affect the position of any other elements. This value always creates a new <a href="https://developer.mozilla.org/en/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a>. The effect of <code style="font-size: 14px;">sticky</code> on table-related elements is the same as <code style="font-size: 14px;">relative</code>. Note that sticky, by specification, will not work inside element with overflow: hidden or auto. (ref: <a href="https://github.com/w3c/csswg-drafts/issues/865">Github issue on W3C CSSWG</a>)</dd>
+</dl>
+
+<h3 id="Формальний_синтаксис">Формальний синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Relative_positioning" name="Relative_positioning">Відносне розміщення</h3>
+
+<p>Relatively positioned elements are offset a given amount from their normal position within the document, but without the offset affecting other elements. In the example below, note how the other elements are placed as if "Two" were taking up the space of its normal location.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="box" id="one"&gt;One&lt;/div&gt;
+&lt;div class="box" id="two"&gt;Two&lt;/div&gt;
+&lt;div class="box" id="three"&gt;Three&lt;/div&gt;
+&lt;div class="box" id="four"&gt;Four&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.box {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
+}
+
+#two {
+  position: relative;
+  top: 20px;
+  left: 20px;
+  background: blue;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Relative_positioning', '600px', '200px') }}</p>
+
+<h3 id="Absolute_positioning" name="Absolute_positioning">Абсолютне розміщення</h3>
+
+<p>Elements that are relatively positioned remain in the normal flow of the document. In contrast, an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its <em>nearest positioned ancestor</em> (i.e., the nearest ancestor that is not <code>static</code>). If a positioned ancestor doesn't exist, the initial container is used. In the example below, box "Two" has no positioned ancestor, so it is positioned relative to the the <code>&lt;body&gt;</code> of the document.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div class="box" id="one"&gt;One&lt;/div&gt;
+&lt;div class="box" id="two"&gt;Two&lt;/div&gt;
+&lt;div class="box" id="three"&gt;Three&lt;/div&gt;
+&lt;div class="box" id="four"&gt;Four&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.box {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
+}
+
+#two {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  background: blue;
+}</pre>
+
+<p>{{ EmbedLiveSample('Absolute_positioning', '800px', '200px') }}</p>
+
+<h3 id="Fixed_positioning" name="Fixed_positioning">Нерухоме розміщення</h3>
+
+<p>Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the <em>viewport</em>. This can be used to create a floating element that stays in the same position regardless of scrolling. In the example below, box "One" is fixed at 80 pixels from the top of the page and 10 pixels from the left. Even after scrolling, it remains in the same place relative to the viewport.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  &lt;/p&gt;
+  &lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  &lt;/p&gt;
+  &lt;div class="box" id="one"&gt;One&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">.box {
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
+}
+
+#one {
+  position: fixed;
+  top: 80px;
+  left: 10px;
+  background: blue;
+}
+
+.outer {
+  width: 500px;
+  height: 300px;
+  overflow: scroll;
+  padding-left: 150px;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Fixed_positioning', '800px', '300px') }}</p>
+
+<h3 id="Sticky_positioning" name="Sticky_positioning">«Липке» розміщення</h3>
+
+<p>Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed. For instance...</p>
+
+<pre class="brush: css">#one { position: sticky; top: 10px; }</pre>
+
+<p>...would position the element with id <em>one</em> relatively until the viewport were scrolled such that the element would be less than 10 pixels from the top. Beyond that threshold, the element would be fixed to 10 pixels from the top.</p>
+
+<div>A common use for sticky positioning is for the headings in an alphabetized list. The "B" heading will appear just below the items that begin with "A" until they are scrolled offscreen. Rather than sliding offscreen with the rest of the content, the "B" heading will then remain fixed to the top of the viewport until all the "B" items have scrolled offscreen, at which point it will be covered up by the "C" heading, and so on.</div>
+
+<div> </div>
+
+<div>You must specify a threshold with at least one of <span style="line-height: 1.5;"><code>top</code>, <code>right</code>, <code>bottom</code>, or <code>left</code> for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning.</span></div>
+
+<div> </div>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;dl&gt;
+  &lt;div&gt;
+    &lt;dt&gt;A&lt;/dt&gt;
+    &lt;dd&gt;Andrew W.K.&lt;/dd&gt;
+    &lt;dd&gt;Apparat&lt;/dd&gt;
+    &lt;dd&gt;Arcade Fire&lt;/dd&gt;
+    &lt;dd&gt;At The Drive-In&lt;/dd&gt;
+    &lt;dd&gt;Aziz Ansari&lt;/dd&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;dt&gt;C&lt;/dt&gt;
+    &lt;dd&gt;Chromeo&lt;/dd&gt;
+    &lt;dd&gt;Common&lt;/dd&gt;
+    &lt;dd&gt;Converge&lt;/dd&gt;
+    &lt;dd&gt;Crystal Castles&lt;/dd&gt;
+    &lt;dd&gt;Cursive&lt;/dd&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;dt&gt;E&lt;/dt&gt;
+    &lt;dd&gt;Explosions In The Sky&lt;/dd&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;dt&gt;T&lt;/dt&gt;
+    &lt;dd&gt;Ted Leo &amp;amp; The Pharmacists&lt;/dd&gt;
+    &lt;dd&gt;T-Pain&lt;/dd&gt;
+    &lt;dd&gt;Thrice&lt;/dd&gt;
+    &lt;dd&gt;TV On The Radio&lt;/dd&gt;
+    &lt;dd&gt;Two Gallants&lt;/dd&gt;
+  &lt;/div&gt;
+&lt;/dl&gt;
+</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css">* {
+  box-sizing: border-box;
+}
+
+dl &gt; div {
+  background: #FFF;
+  padding: 24px 0 0 0;
+}
+
+dt {
+  background: #B8C1C8;
+  border-bottom: 1px solid #989EA4;
+  border-top: 1px solid #717D85;
+  color: #FFF;
+  font: bold 18px/21px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 2px 0 0 12px;
+  position: -webkit-sticky;
+  position: sticky;
+  top: -1px;
+}
+
+dd {
+  font: bold 20px/45px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 0 0 0 12px;
+  white-space: nowrap;
+}
+
+dd + dd {
+  border-top: 1px solid #CCC;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Sticky_positioning', '500px', '300px') }}</p>
+
+<ul>
+</ul>
+
+<h2 id="Specifications" name="Specifications">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Positioning','#position-property','position')}}</td>
+   <td>{{Spec2('CSS3 Positioning')}}</td>
+   <td>Adds <code>sticky</code> property value.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Підтримка веб-переглядачами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0 (1.0) [1]</td>
+   <td>4.0 [3]</td>
+   <td>4.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td><code>fixed </code>value</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0 (1.0) [4]</td>
+   <td>7.0</td>
+   <td>4.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td><code>sticky</code> value</td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{CompatUnknown}} [5]</td>
+   <td>32 (32.0) [2]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>6.1 {{ property_prefix("-webkit-") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0 (1.0) [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>7.0 {{ property_prefix("-webkit-") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Since Firefox 30, Gecko allows {{HTMLElement("tr")}}, {{HTMLElement("thead")}}, and  {{HTMLElement("tfoot")}} elements with a <code>position: relative;</code> style to act as absolute positioning containers. This means that a <code>position: absolute;</code> styled element inside the table can be positioned relative to these elements. In other browsers and in older versions of Firefox, setting <code>position: relative;</code> on a table row or row group has no effect. Firefox helps developers transition to the new behavior and detect any rendering issues it may cause on their sites by printing a warning to the JavaScript console if you use this feature: Relative positioning of table rows and row groups is now supported. This site may need to be updated because it may depend on this feature having no effect.</p>
+
+<p>[2] In Firefox 26 to Firefox 31 (inclusive), sticky positioning only works when the <code>about:config</code> preference <code>layout.css.sticky.enabled</code> is set to <code>true</code>. From Firefox 27 to 31, <code>true</code> is the default value for Nightly and Aurora versions of the browser. The preference has been removed in Firefox 48.</p>
+
+<p>[3] In Internet Explorer, fixed positioning doesn't work if the document is in <a href="http://msdn.microsoft.com/en-us/library/ie/ms531140(v=vs.85).aspx" title="position Property - MSDN">quirks mode</a>.</p>
+
+<p>[4] Prior to Firefox 44, <code>position: fixed</code> didn't create a stacking context in most cases. The specification, and Gecko implementation, have been modified to mimic Chrome and Safari's long-time behavior.</p>
+
+<p>[5] Sticky positioning is <a href="https://dev.modern.ie/platform/status/positionsticky/">in preview</a> for Edge.</p>
diff --git a/files/uk/web/css/resize/index.html b/files/uk/web/css/resize/index.html
new file mode 100644
index 0000000000..de5246e7ba
--- /dev/null
+++ b/files/uk/web/css/resize/index.html
@@ -0,0 +1,212 @@
+---
+title: resize
+slug: Web/CSS/resize
+tags:
+  - CSS
+  - CSS Властивість
+  - Зміна розміру
+  - Розмір
+translation_of: Web/CSS/resize
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Зведення">Зведення</h2>
+
+<p>The <strong><code>resize</code></strong> CSS property lets you control the resizability of an element.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">/* Keyword values */
+resize: none;
+resize: both;
+resize: horizontal;
+resize: vertical;
+resize: block;
+resize: inline;
+
+/* Global values */
+resize: inherit;
+resize: initial;
+resize: unset;
+</pre>
+
+<h3 id="Значення">Значення</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>The element offers no user-controllable method for resizing the element.</dd>
+ <dt><code>both</code></dt>
+ <dd>The element displays a mechanism for allowing the user to resize the element, which may be resized both horizontally and vertically.</dd>
+ <dt><code>horizontal</code></dt>
+ <dd>The element displays a mechanism for allowing the user to resize the element, which may only be resized horizontally.</dd>
+ <dt><code>vertical</code></dt>
+ <dd>The element displays a mechanism for allowing the user to resize the element, which may only be resized vertically.</dd>
+ <dt><code>block</code> {{experimental_inline}}</dt>
+ <dd>Depending on the {{cssxref("writing-mode")}} and {{cssxref("direction")}} value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in block direction.</dd>
+ <dt><code>inline</code> {{experimental_inline}}</dt>
+ <dd>Depending on the {{cssxref("writing-mode")}} and {{cssxref("direction")}} value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in inline direction.</dd>
+</dl>
+
+<div class="note"><strong>Note:</strong> <code>resize</code> does not apply to blocks for which the {{cssxref("overflow")}} property is set to <code>visible</code>.</div>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Disabling_resizability_of_textareas">Disabling resizability of textareas</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<p>By default, {{HTMLElement("textarea")}} elements are resizable in {{gecko("2.0")}} (Firefox 4). You may override this behavior with the CSS shown below:</p>
+
+<pre class="brush: css">textarea.example {
+  resize: none; /* disables resizability */
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;textarea class="example"&gt;Type some text here.&lt;/textarea&gt;</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Disabling_resizability_of_textareas","200","100")}}</p>
+
+<h3 id="Using_resize_with_arbitrary_elements">Using resize with arbitrary elements</h3>
+
+<p>You can use the resize property to make any element resizable. In the example below, a resizable {{HTMLElement("div")}} box contains a resizable paragraph ({{HTMLElement("p")}} element):</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.resizable {
+  resize: both;
+  overflow: scroll;
+  border: 1px solid black;
+}
+
+div {
+  height: 300px;
+  width: 300px;
+}
+
+p {
+  height: 200px;
+  width: 200px;
+}
+</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div class="resizable"&gt;
+  &lt;p class="resizable"&gt;
+    This paragraph is resizable, because the CSS resize property is set to 'both' on this
+    element.
+  &lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Result_2">Result</h4>
+
+<p>{{EmbedLiveSample("Using_resize_with_arbitrary_elements","450","450")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties', '#resize', 'resize')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Adds the values <code>block</code> and <code>inline</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#resize', 'resize')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{HTMLElement("textarea")}})</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}{{property_prefix("-moz")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>12.1</td>
+   <td>3.0 (522)</td>
+  </tr>
+  <tr>
+   <td>On any block-level and replaced element, table cell, and inline block element (unless {{cssxref("overflow")}} is <code>visible</code>)</td>
+   <td>4.0</td>
+   <td>{{CompatGeckoDesktop("5.0")}}[1]</td>
+   <td>{{CompatNo}}</td>
+   <td>15</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{HTMLElement("textarea")}})</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>On any block-level and replaced element, table cell, and inline block element (unless {{cssxref("overflow")}} is <code>visible</code>)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>resize</code> doesn't have any effect on {{HTMLElement("iframe")}} (cf. {{bug(680823)}})</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
diff --git a/files/uk/web/css/z-index/index.html b/files/uk/web/css/z-index/index.html
new file mode 100644
index 0000000000..364b1044a2
--- /dev/null
+++ b/files/uk/web/css/z-index/index.html
@@ -0,0 +1,134 @@
+---
+title: z-index
+slug: Web/CSS/z-index
+translation_of: Web/CSS/z-index
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS властивість <strong><code>z-index</code></strong> встановлює порядок осі Z <a href="/en-US/docs/Web/CSS/position">спозицйонованого</a> елементу, його нащадків або елементів з властивістю flex. Елементи з більшим z-index перекривають такі, в яких ця величина менша.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/z-index.html")}}</div>
+
+<p class="hidden">Вихідний код цього інтерактивного прикладу знаходиться в репозиторії GitHub. Якщо бажаєш зробити внесок до проекту інтерактивних прикладів, склонуй <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та вишли нам pull request.</p>
+
+<p>В спозицйонованому елементі (такому, в якому властивість <code>position</code> є будь-якою окрім <code>static</code>) властивість <code>z-index</code> вказує:</p>
+
+<ol>
+ <li>Рівень накладання елемента в поточному <a href="/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context">контексті накладання</a>.</li>
+ <li>Чи створює цей елемент локальний контекст накладання.</li>
+</ol>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Властивість, зазначена ключовим словом */
+z-index: auto;
+
+/* Цифрові значення &lt;integer&gt; */
+z-index: 0;
+z-index: 3;
+z-index: 289;
+z-index: -1; /* Цифри менше нуля зменьшують приорітет */
+
+/* Глобальні значення */
+z-index: inherit;
+z-index: initial;
+z-index: unset;
+</pre>
+
+<p>Властивість <code>z-index</code> вказується або ключовим словом <code><a href="#auto">auto</a></code> або цифрою <code><a href="#&lt;integer>">&lt;integer&gt;</a></code>.</p>
+
+<h3 id="Вартості">Вартості</h3>
+
+<dl>
+ <dt><a id="auto" name="auto"><code>auto</code></a></dt>
+ <dd>Контейнер не визначає нового локального контексту накладання. Рівень накладання створеного контейнеру в поточному контексті накладання є такий самий як і батьківський.</dd>
+ <dt><a id="&lt;integer>" name="&lt;integer>"><code>&lt;integer&gt;</code></a></dt>
+ <dd>{{cssxref("&lt;integer&gt;")}} вказує рівень накладання створеного контейнеру в поточному контексті накладання. Контейнер також створює локальний контекст накладання в якому його рівень накладання дорівнює <code>0</code>. Це означає що вартість z-index елементів-нащадків не порівнюється з z-index елементів поза цим елементем.</dd>
+</dl>
+
+<h3 id="Формальний_синтаксис">Формальний синтаксис</h3>
+
+<pre class="syntaxbox">auto <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> {{cssxref("&lt;integer&gt;")}}</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="dashed-box"&gt;Коробка з пунктиром
+  &lt;span class="gold-box"&gt;Золота коробка&lt;/span&gt;
+  &lt;span class="green-box"&gt;Зелена коробка&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[3,11,19]">.dashed-box {
+  position: relative;
+  z-index: 1;
+  border: dashed;
+  height: 8em;
+  margin-bottom: 1em;
+  margin-top: 2em;
+}
+.gold-box {
+  position: absolute;
+  z-index: 3; /* розташуй .gold-box над .green-box та .dashed-box */
+  background: gold;
+  width: 80%;
+  left: 60px;
+  top: 3em;
+}
+.green-box {
+  position: absolute;
+  z-index: 2; /* розташуй .green-box над .dashed-box */
+  background: lightgreen;
+  width: 20%;
+  left: 65%;
+  top: -25px;
+  height: 7em;
+  opacity: 0.9;
+}
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Examples', '550', '200', '') }}</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'поводження анімації z-index')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Означає <code>z-index</code> як такий, який можна анімувати.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Початкове визначення</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Браузерна_сумісність">Браузерна сумісність</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці створена за допомогою структурованих даних. Якщо хочеш зробити свій внесок до цих даних, звернися до сторінки <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і вишли нам pull request.</div>
+
+<p>{{Compat("css.properties.z-index")}}</p>
+
+<h2 id="Дивись_також">Дивись також</h2>
+
+<ul>
+ <li>Властивість CSS {{Cssxref("position")}}</li>
+ <li><a href="/en-US/docs/CSS/Understanding_z-index">Зрозуміти CSS z-index</a></li>
+</ul>
diff --git a/files/uk/web/css/альтернативні_таблиці_стилів/index.html b/files/uk/web/css/альтернативні_таблиці_стилів/index.html
new file mode 100644
index 0000000000..1dd1b5a510
--- /dev/null
+++ b/files/uk/web/css/альтернативні_таблиці_стилів/index.html
@@ -0,0 +1,80 @@
+---
+title: Альтернативні таблиці стилів
+slug: Web/CSS/Альтернативні_таблиці_стилів
+tags:
+  - Стилі
+  - Теми
+translation_of: Web/CSS/Alternative_style_sheets
+---
+<p>Specifying <strong>alternative style sheets</strong> in a web page provides a way for users to see multiple versions of a page, based on their needs or preferences.</p>
+
+<p>Firefox lets the user select the stylesheet using the View &gt; Page Style submenu, Internet Explorer also supports this feature (beginning with IE 8), also accessed from View &gt; Page Style (at least as of IE 11), but Chrome requires an extension to use the feature (as of version 48). The web page can also provide its own user interface to let the user switch styles.</p>
+
+<h2 id="An_example_specifying_the_alternative_stylesheets">An example: specifying the alternative stylesheets</h2>
+
+<p>The alternate stylesheets are commonly specified using a {{HTMLElement("link")}} element with <code>rel="stylesheet alternate"</code> and <code>title="..."</code> attributes, for example:</p>
+
+<pre class="eval">&lt;link href="reset.css" rel="stylesheet" type="text/css"&gt;
+
+&lt;link href="default.css" rel="stylesheet" type="text/css" title="Default Style"&gt;
+&lt;link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy"&gt;
+&lt;link href="basic.css" rel="alternate stylesheet" type="text/css" title="Basic"&gt;
+</pre>
+
+<p>In this example, the styles "Default Style", "Fancy", and "Basic" will be listed in the Page Style submenu, with the Default Style pre-selected. When the user selects a different style, the page will immediately be re-rendered using that style sheet.</p>
+
+<p>No matter what style is selected, the rules from the reset.css stylesheet will always be applied.</p>
+
+<h3 id="Try_it_out">Try it out</h3>
+
+<p><a href="/samples/cssref/altstyles/index.html">Click here</a> for a working example you can try out.</p>
+
+<h2 id="Details">Details</h2>
+
+<p>Any stylesheet in a document falls into one of the following categories:</p>
+
+<ul>
+ <li><strong>Persistent</strong> (no <code>rel="alternate"</code>, no <code>title=""</code>): always applies to the document.</li>
+ <li><strong>Preferred</strong> (no <code>rel="alternate"</code>, with <code>title="..."</code> specified): applied by default, but {{domxref("StyleSheet.disabled", "disabled", "", 1)}} if an alternate stylesheet is selected. <strong>There can only be one preferred stylesheet</strong>, so providing stylesheets with different title attributes will cause some of them to be ignored. See <a href="/en-US/docs/Correctly_Using_Titles_With_External_Stylesheets">Correctly Using Titles With External Stylesheets</a> for a more detailed discussion.</li>
+ <li><strong>Alternate</strong> (<code>rel="stylesheet alternate"</code>, <code>title="..."</code> must be specified): disabled by default, can be selected.</li>
+</ul>
+
+<p>When style sheets are referenced with a <code>title</code> attribute on the {{HTMLElement("link", "&lt;link rel=\"stylesheet\"&gt;")}} or {{HTMLElement("style")}} element, the title becomes one of the choices offered to the user. Style sheets linked with the same <code>title</code> are part of the same choice. Style sheets linked without a <code>title</code> attribute are always applied.</p>
+
+<p>Use <code>rel="stylesheet"</code> to link to the default style, and <code>rel="alternate stylesheet"</code> to link to alternative style sheets. This tells the browser which style sheet title should be selected by default, and makes that default selection apply in browsers that do not support alternate style sheets.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM', '#css-style-sheet-collections', 'CSS Style Sheet Collections')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>The CSS OM specification defines the concepts of the <strong>style sheet set name</strong>, its <strong>disabled flag</strong>, and the <strong>preferred CSS style sheet set name</strong>.<br>
+    It defines how these are determined, and lets the HTML specification define the HTML-specific behaviors by requiring it to define when to <strong><dfn>create a CSS style sheet</dfn></strong>.</td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{SpecName('HTML WHATWG', 'semantics.html#link-type-stylesheet', 'Link type "stylesheet"')}}<br>
+     {{SpecName('HTML WHATWG', 'semantics.html#attr-style-title', 'The style element')}}<br>
+     {{SpecName('HTML WHATWG', 'semantics.html#attr-meta-http-equiv-default-style', 'Default style state (http-equiv="default-style")')}}</p>
+   </td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>The HTML specification defines when and how the <strong><dfn>create a CSS style sheet</dfn></strong><dfn> algorithm is invoked while handling &lt;link&gt; and &lt;style&gt; elements, and also defines the behavior of <code>&lt;meta </code></dfn><code>http-equiv="default-style"&gt;</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML4.01", "present/styles.html#h-14.3", "Alternative style sheets")}}</td>
+   <td>{{Spec2("HTML4.01")}}</td>
+   <td>Earlier, the HTML specification itself defined the concept of preferred and alternate stylesheets.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/uk/web/css/довідник/index.html b/files/uk/web/css/довідник/index.html
new file mode 100644
index 0000000000..ba325fe7da
--- /dev/null
+++ b/files/uk/web/css/довідник/index.html
@@ -0,0 +1,188 @@
+---
+title: CSS довідник
+slug: Web/CSS/Довідник
+translation_of: Web/CSS/Reference
+---
+<p><span class="seoSummary">This <em>CSS Reference</em> shows the basic syntax of a CSS rule; lists all standard <a href="/uk/docs/CSS">CSS</a> properties, <a href="/uk/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> and <a href="/uk/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>, <a href="/uk/docs/Web/CSS/At-rule">@-rules</a>, <a href="/uk/docs/Web/CSS/length">units</a>, and <a href="/uk/docs/Web/Guide/CSS/Getting_Started/Selectors">selectors</a>, all together in <a href="#Keyword_index">alphabetical order</a>, as well as just the <a href="#Selectors">selectors by type</a>; and allows you to quickly access detailed information for each of them. It not only lists the CSS 1 and CSS 2.1 properties, but also is a CSS3 reference that links to any <a href="/uk/docs/Web/CSS/CSS3">CSS3</a> property and concept standardized, or already stabilized.  Also included is a brief <a href="#DOM_CSS">DOM-CSS / CSSOM reference</a>.</span></p>
+
+<p>Note that CSS rule-definitions are entirely (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">text-based</a>, whereas DOM-CSS / CSSOM, the rule-management system, is <a href="https://www.w3.org/TR/cssom/#introduction">object-based</a>.</p>
+
+<p>See also <a href="/uk/docs/Web/CSS/Reference/Mozilla_Extensions">Mozilla CSS Extensions</a> for Gecko-specific properties prefixed with <code>-moz</code>; and <a href="/uk/docs/Web/CSS/CSS_Reference/Webkit_Extensions">WebKit CSS Extensions</a> for WebKit-specific properties. See <a href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">Vendor-prefixed CSS Property Overview</a> by Peter Beverloo for all prefixed properties.</p>
+
+<h2 id="Basic_rule_syntax">Basic rule syntax</h2>
+
+<p>Be warned that any syntax error in a rule definition will invalidate the entire rule.</p>
+
+<h3 id="Style_rules">Style rules</h3>
+
+<pre class="syntaxbox"><strong><var>selectorlist</var> { <var>property</var>: <var>value</var>;</strong> <var>[more property:value; pairs]</var> <strong>}</strong>
+
+...where <var>selectorlist</var> is: <var>selector[:pseudo-class] [::pseudo-element] [, more selectorlists]</var>
+
+See <a href="#Selectors"><em>selector</em></a>, <a href="#pelm"><em>pseudo-element</em></a>, <a href="#pcls"><em>pseudo-class</em></a> lists below.
+</pre>
+
+<h4 id="Examples">Examples</h4>
+
+<pre class="brush: css">strong { color: red;}
+div.menu-bar li:hover &gt; ul { display: block; }
+</pre>
+
+<p>More about examples: <a href="/uk/docs/Web/Guide/CSS/Getting_started/Selectors#Information_Selectors">#1</a>, <a href="/uk/docs/Web/Guide/CSS/Getting_started/Selectors#Action_Using_selectors_based_on_relationships_and_pseudo-classes">#2</a></p>
+
+<h3 id="rules">@rules</h3>
+
+<p>As these have so many different structure-formats, see the desired <a href="/uk/docs/Web/CSS/At-rule">At-rule</a> for syntax.</p>
+
+<h2 id="Keyword_index">Keyword index</h2>
+
+<div>{{CSS_Ref}}</div>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="Selectors">Selectors</h2>
+
+<ul>
+ <li>Basic Selectors
+  <ul>
+   <li><a href="/uk/docs/Web/CSS/Type_selectors">Type selectors</a><code> elementname</code></li>
+   <li><a href="/uk/docs/Web/CSS/Class_selectors">Class selectors</a> <code>.classname</code></li>
+   <li><a href="/uk/docs/Web/CSS/ID_selectors">ID selectors</a> <code>#idname</code></li>
+   <li><a href="/uk/docs/Web/CSS/Universal_selectors">Universal selectors</a><code> * ns|* *|*</code></li>
+   <li><a href="/uk/docs/Web/CSS/Attribute_selectors">Attribute selectors</a><code> [attr=value]</code></li>
+  </ul>
+ </li>
+ <li>Combinators    <a href="/uk/docs/Web/Guide/CSS/Getting_started/Selectors#Information_Selectors_based_on_relationships">(more info)</a>
+  <ul>
+   <li><a href="/uk/docs/Web/CSS/Adjacent_sibling_selectors">Adjacent sibling selectors</a> <code>A + B</code></li>
+   <li><a href="/uk/docs/Web/CSS/General_sibling_selectors">General sibling selectors</a> <code>A ~ B</code></li>
+   <li><a href="/uk/docs/Web/CSS/Child_selectors">Child selectors</a> <code>A &gt; B</code></li>
+   <li><a href="/uk/docs/Web/CSS/Descendant_selectors">Descendant selectors</a> <code>A B</code></li>
+  </ul>
+ </li>
+ <li id="pelm">Pseudo-elements    <a href="/uk/docs/Web/CSS/Pseudo-elements">(more info)</a>
+  <ul>
+   <li>{{ Cssxref("::after") }}</li>
+   <li>{{ Cssxref("::before") }}</li>
+   <li>{{ Cssxref("::first-letter") }}</li>
+   <li>{{ Cssxref("::first-line") }}</li>
+   <li>{{ Cssxref("::selection") }}</li>
+   <li>{{ Cssxref("::backdrop") }}</li>
+   <li>{{ Cssxref("::placeholder") }} {{experimental_inline}}</li>
+   <li>{{ Cssxref("::marker") }} {{experimental_inline}}</li>
+   <li>{{ Cssxref("::spelling-error") }} {{experimental_inline}}</li>
+   <li>{{ Cssxref("::grammar-error") }} {{experimental_inline}}</li>
+  </ul>
+ </li>
+ <li id="pcls">Standard pseudo-classes    <a href="/uk/docs/Web/CSS/Pseudo-classes">(more info)</a>
+  <div class="index">
+  <ul>
+   <li>{{ Cssxref(":active") }}</li>
+   <li>{{ cssxref(':any')}}</li>
+   <li>{{ Cssxref(":checked") }}</li>
+   <li>{{ Cssxref(":default") }}</li>
+   <li>{{ Cssxref(":dir", ":dir()")}}</li>
+   <li>{{ Cssxref(":disabled") }}</li>
+   <li>{{ Cssxref(":empty") }}</li>
+   <li>{{ Cssxref(":enabled") }}</li>
+   <li>{{ Cssxref(":first") }}</li>
+   <li>{{ Cssxref(":first-child") }}</li>
+   <li>{{ Cssxref(":first-of-type") }}</li>
+   <li>{{ Cssxref(":fullscreen") }}</li>
+   <li>{{ Cssxref(":focus") }}</li>
+   <li>{{ Cssxref(":hover") }}</li>
+   <li>{{ Cssxref(":indeterminate") }}</li>
+   <li>{{ Cssxref(":in-range") }}</li>
+   <li>{{ Cssxref(":invalid") }}</li>
+   <li>{{ Cssxref(":lang", ":lang()") }}</li>
+   <li>{{ Cssxref(":last-child") }}</li>
+   <li>{{ Cssxref(":last-of-type") }}</li>
+   <li>{{ Cssxref(":left") }}</li>
+   <li>{{ Cssxref(":link") }}</li>
+   <li>{{ Cssxref(":not", ":not()") }}</li>
+   <li>{{ Cssxref(":nth-child", ":nth-child()") }}</li>
+   <li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li>
+   <li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li>
+   <li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li>
+   <li>{{ Cssxref(":only-child") }}</li>
+   <li>{{ Cssxref(":only-of-type") }}</li>
+   <li>{{ Cssxref(":optional") }}</li>
+   <li>{{ Cssxref(":out-of-range") }}</li>
+   <li>{{ Cssxref(":read-only") }}</li>
+   <li>{{ Cssxref(":read-write") }}</li>
+   <li>{{ Cssxref(":required") }}</li>
+   <li>{{ Cssxref(":right") }}</li>
+   <li>{{ Cssxref(":root") }}</li>
+   <li>{{ Cssxref(":scope") }}</li>
+   <li>{{ Cssxref(":target") }}</li>
+   <li>{{ Cssxref(":valid") }}</li>
+   <li>{{ Cssxref(":visited") }}</li>
+  </ul>
+  </div>
+ </li>
+</ul>
+
+<p>A complete <a href="https://www.w3.org/TR/selectors/#selectors">list of selectors</a> in the Selectors Level 3 specification.</p>
+
+<h2 id="CSS3_Tutorials">CSS3 Tutorials</h2>
+
+<p>These small how-to pages describe new technologies appeared in CSS3, or in CSS2.1 but with low support until recently:</p>
+
+<ul>
+ <li><a href="/uk/docs/Web/Guide/CSS/Media_queries">Using CSS media queries</a></li>
+ <li><a href="/uk/docs/Web/Guide/CSS/Counters">Using CSS counters</a></li>
+ <li><a href="/uk/docs/Web/Guide/CSS/Using_CSS_gradients">Using CSS gradients</a></li>
+ <li><a href="/uk/docs/Web/Guide/CSS/Using_CSS_transforms">Using CSS transforms</a></li>
+ <li><a href="/uk/docs/Web/Guide/CSS/Using_CSS_animations">Using CSS animations</a></li>
+ <li><a href="/uk/docs/Web/Guide/CSS/Using_CSS_transitions">Using CSS transitions</a></li>
+ <li><a href="/uk/docs/Web/Guide/CSS/Using_multiple_backgrounds">Using CSS multiple backgrounds</a></li>
+ <li><a href="/uk/docs/Web/Guide/CSS/Flexible_boxes">Using CSS flexible boxes</a></li>
+ <li><a href="/uk/docs/Web/Guide/CSS/Using_multi-column_layouts">Using CSS multi-column layouts</a></li>
+</ul>
+
+<h2 id="Concepts">Concepts</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/CSS/Syntax">CSS syntax</a></li>
+ <li><a href="/uk/docs/Web/CSS/At-rule">At-rule</a></li>
+ <li><a href="/uk/docs/Web/CSS/Comments">Comments</a></li>
+ <li><a href="/uk/docs/Web/CSS/Specificity">Specificity</a></li>
+ <li><a href="/uk/docs/Web/CSS/initial_value">Initial value</a></li>
+ <li><a href="/uk/docs/Web/CSS/inheritance">Inheritance</a></li>
+ <li><a href="/uk/docs/Web/CSS/specified_value">Specified value</a></li>
+ <li><a href="/uk/docs/Web/CSS/computed_value">Computed value</a></li>
+ <li><a href="/uk/docs/Web/CSS/used_value">Used value</a></li>
+ <li><a href="/uk/docs/Web/CSS/actual_value">Actual value</a></li>
+ <li><a href="/uk/docs/Web/CSS/resolved_value">Resolved value</a></li>
+ <li><a href="/uk/docs/Web/CSS/box_model">Box model</a></li>
+ <li><a href="/uk/docs/Web/CSS/Replaced_element">Replaced element</a></li>
+ <li><a href="/uk/docs/Web/CSS/Value_definition_syntax">Value definition syntax</a></li>
+ <li><a href="/uk/docs/Web/CSS/Shorthand_properties">Shorthand properties</a></li>
+ <li><a href="/uk/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Mastering margin collapsing</a></li>
+ <li><a href="/uk/docs/Web/Guide/CSS/Visual_formatting_model">Visual formatting model</a></li>
+ <li><a href="/uk/docs/Web/CSS/Layout_mode">Layout mode</a></li>
+</ul>
+
+<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2>
+
+<p>Major object types:</p>
+
+<ul>
+ <li>document . <a href="/uk/docs/Web/API/Document/styleSheets">styleSheets</a></li>
+ <li>styleSheets[x] . <a href="/uk/docs/Web/API/CSSRuleList">cssRules</a></li>
+ <li>cssRules[x] . <a href="/uk/docs/Web/API/CSSRule/cssText">cssText</a> (selector &amp; style)</li>
+ <li>cssRules[x] . <a href="/uk/docs/Web/API/CSSStyleRule/selectorText">selectorText</a></li>
+ <li>elem . <a href="/uk/docs/Web/API/HTMLElement/style">style</a></li>
+ <li>elem . style . <a href="/uk/docs/Web/API/CSSStyleDeclaration/cssText">cssText</a> (just style)</li>
+ <li>elem . <a href="/uk/docs/Web/API/Element/className">className</a></li>
+ <li>elem . <a href="/uk/docs/Web/API/Element/classList">classList</a></li>
+</ul>
+
+<p>Important methods:</p>
+
+<ul>
+ <li>{{domxref("CSSStyleSheet.insertRule")}}</li>
+ <li>{{domxref("CSSStyleSheet.deleteRule")}}</li>
+</ul>
+</div>
+</div>
diff --git a/files/uk/web/css/коробчаста_модель_css/index.html b/files/uk/web/css/коробчаста_модель_css/index.html
new file mode 100644
index 0000000000..4920b7ceb9
--- /dev/null
+++ b/files/uk/web/css/коробчаста_модель_css/index.html
@@ -0,0 +1,161 @@
+---
+title: Коробчаста модель CSS
+slug: Web/CSS/Коробчаста_модель_CSS
+tags:
+  - CSS
+  - Довідка
+  - Коробчаста модель CSS
+translation_of: Web/CSS/CSS_Box_Model
+---
+<div><strong>Коробчаста модель</strong> (box model) — це алгоритм CSS, що подає елементи (включно з їх {{cssxref("margin", "відступами")}} та {{cssxref("padding", "полями")}}) у вигляді прямокутних «коробок» та компонує їх відповідно до {{cssxref("Visual_formatting_model", "моделі візуального формування")}}.</div>
+
+<h2 id="Довідка">Довідка</h2>
+
+<h3 id="Властивості">Властивості</h3>
+
+<h4 id="Властивості_що_визначають_потік_(flow)_вмісту">Властивості, що визначають потік (flow) вмісту</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("box-decoration-break")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("overflow")}}</li>
+ <li>{{cssxref("overflow-x")}}</li>
+ <li>{{cssxref("overflow-y")}}</li>
+</ul>
+</div>
+
+<h4 id="Властивості_що_визначають_розміри">Властивості, що визначають розміри</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("width")}}</li>
+ <li>{{cssxref("max-height")}}</li>
+ <li>{{cssxref("max-width")}}</li>
+ <li>{{cssxref("min-height")}}</li>
+ <li>{{cssxref("min-width")}}</li>
+</ul>
+</div>
+
+<h4 id="Властивості_що_визначають_відступи">Властивості, що визначають відступи</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+</ul>
+</div>
+
+<h4 id="Властивості_що_визначають_поля">Властивості, що визначають поля</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("padding")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+</ul>
+</div>
+
+<h4 id="Інші_властивості">Інші властивості</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("visibility")}}</li>
+</ul>
+</div>
+
+<h2 id="Посібники">Посібники</h2>
+
+<dl>
+ <dt><a href="/uk/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Вступ до коробчастої моделі CSS</a></dt>
+ <dd>Описує та пояснює одне з ґрунтовних понять в CSS — коробчасту модель. Ця модель визначає, як CSS розташовує елементи, їх вміст, {{cssxref("padding", "поля")}}, {{cssxref("border", "обрамок")}} та {{cssxref("margin", "відступи")}}.</dd>
+ <dt><a href="/uk/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Згортання відступів</a></dt>
+ <dd>Два прилеглі відступи інколи згортаються в один. Ця стаття наводить правила, за якими це відбувається, та пояснює, як цим керувати.</dd>
+ <dt><a href="/uk/docs/Web/CSS/Visual_formatting_model">Модель візуального формування</a></dt>
+ <dd>Описує та пояснює модель візуального формування.</dd>
+</dl>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box")}}</td>
+   <td>{{Spec2("CSS3 Box")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Первинне визначення</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/uk/web/css/модель_візуального_формування/index.html b/files/uk/web/css/модель_візуального_формування/index.html
new file mode 100644
index 0000000000..fb25e2d60a
--- /dev/null
+++ b/files/uk/web/css/модель_візуального_формування/index.html
@@ -0,0 +1,225 @@
+---
+title: Модель візуального формування
+slug: Web/CSS/Модель_візуального_формування
+tags:
+  - CSS
+  - NeedsUpdate
+  - Коробчаста модель CSS
+translation_of: Web/CSS/Visual_formatting_model
+---
+<p class="summary"><em>Модель візуального форматування</em> (visual formatting model) у CSS являє собою алгоритм, що обробляє документ та подає його на візуальному носії. Ця модель є основним поняттям CSS.</p>
+
+<p>Кожен елемент в документі зазнає перетворення згідно з моделлю візуального формування і породжує нуль (жодного), один або кілька прямокутників відповідно до {{cssxref("CSS_Box_Model/Introduction_to_the_CSS_box_model", "коробчастої моделі")}} CSS. Компонування кожного такого прямокутника визначається низкою чинників:</p>
+
+<ul>
+ <li>Розміри прямокутника: точно зазначені, обмежені, або ні;</li>
+ <li>Тип компонування: рядковий (inline), рядкового рівня (inline-level), неподільний рядкового рівня чи блоковий;</li>
+ <li>Схема розміщення: в нормальному потоці (flow), {{cssxref("float", "рухомий")}}, чи абсолютно розміщений;</li>
+ <li>Решта елементів у дереві: нащадки та сусідські елементи;</li>
+ <li>Розмір {{glossary("viewport", "вікна")}} та розміщення в ньому;</li>
+ <li>Справжні (первинні) розміри зображень, що їх містять елементи;</li>
+ <li>Інша інформація ззовні.</li>
+</ul>
+
+<p>Відповідно до моделі, прямокутник розміщується й малюється відносно краю блока, всередині якого він міститься. Зазвичай прямокутник утворює такий блок для своїх нащадків. Втім, розмір прямокутника не обмежено розмірами блока, що його містить; коли компонування прямокутника передбачає вихід за межі блока, це зветься {{cssxref("overflow", "переповненням")}}.</p>
+
+<h2 id="Утворення_прямокутників">Утворення прямокутників</h2>
+
+<p>Генерація блоків, це частина візуального форматування CSS, що створює прямокутники з елементів документу. Сгенеровані блоки є різних типів, що вплиає на те, як виконується візуальне формування. Тип згенерованого блоку залежить від значення CSS {{ cssxref("display") }}.</p>
+
+<h3 id="Block-level_elements_and_block_boxes">Block-level elements and block boxes</h3>
+
+<p>Елемент  називається <em>блочним</em>, коли його вираховане значення  {{ cssxref("display") }} CSS property is: <code>block</code>, <code>list-item</code>, or <code>table</code>. Елемент рівня блоку візуально форматується, як блок (наприклад абзац), приздачений для вертикальної компановки.</p>
+
+<p>Each block-level box participates in a <a href="/en-US/docs/CSS/block_formatting_context" title="block formatting context">block formatting context</a>. Each block-level element generates at least one block-level box, called the <em>principal block-level</em><em> box</em>. Some elements, like a list-item element, generating further boxes to handle bullets and other typographic elements introducing the list item, may generate more boxes. Most generate only the principal, block-level box.</p>
+
+<p>The principal block-level box contains descendant-generated boxes and generated content. It is also the box involved in the <a href="/en-US/docs/CSS/Positioning_scheme" title="CSS/Positioning scheme">positioning scheme</a>.</p>
+
+<p><img alt="venn_blocks.png" class="internal lwrap" src="/@api/deki/files/5995/=venn_blocks.png" style="float: left;">A block-level box may also be a block container box. A <em>block container box</em> is a box that contains only other block-level boxes, or creates an <a href="/en-US/docs/CSS/Inline_formatting_context" title="CSS/Inline formatting context">inline formatting context</a>, thus containing only inline boxes.</p>
+
+<p>It is important to note that the notions of a block-level box and block container box are disjoined. The first, describes how the box behaves with its parents and sibling. The second, how it interacts with its descendants. Some block-level boxes, like tables, aren't block container boxes. Reciprocally, some block container boxes, like non-replaced inline blocks and non-replaced table cells, aren't block-level boxes.</p>
+
+<p>Block-level boxes that also are block container boxes are called <em>block boxes</em>.</p>
+
+<h4 id="Anonymous_block_boxes">Anonymous block boxes</h4>
+
+<p>In some cases, the visual formatting algorithm needs to add supplementary boxes. Because CSS selectors cannot style or name these boxes, they are called <em>anonymous boxes</em>.</p>
+
+<p>Because selectors do not work with anonymous boxes, they cannot be styled via a stylesheet. This means that all inheritable CSS properties have the <code>inherit</code> value, and all non-inheritable CSS properties, have the <code>initial</code> value.</p>
+
+<p>Block containing boxes contain only inline-level boxes, or only block-level boxes. But often the document contains a mix of both. In that case, anonymous block boxes are created around adjacent inline-level boxes.</p>
+
+<h3 id="Example">Example</h3>
+
+<p>If we take the following HTML code (with default styling applied to it, that is {{ HTMLElement("div") }} and {{ HTMLElement("p") }} elements have <code>display:block</code> :</p>
+
+<pre class="syntaxbox"><code>&lt;div&gt;Some inline text &lt;p&gt;followed by a paragraph&lt;/p&gt; followed by more inline text.&lt;/div&gt;</code></pre>
+
+<p>Two anonymous block boxes are created: one for the text before the paragraph (<code>Some inline text</code>), and another for the text after it (<code>followed by more inline text</code>). This builds the following block structure:</p>
+
+<p style="text-align: center;"><img alt="anonymous_block-level_boxes.png" class="default internal" src="/@api/deki/files/5996/=anonymous_block-level_boxes.png"></p>
+
+<p>Leading to:</p>
+
+<pre>Some inline text
+followed by a paragraph
+followed by more inline text.
+</pre>
+
+<p>Unlike the {{ HTMLElement("p") }} element's box, Web developers cannot control the style of the two anonymous boxes. Inheritable properties take the value from the {{ HTMLElement("div") }}'s property value, like {{ cssxref("color") }} to define the color of the text, and set the others to the <code>initial</code> value. For example, they won't have a specific {{ cssxref("background-color") }}, it is always transparent, the<code> initial</code> value for that property, and thus the background of the <code>&lt;div&gt;</code> is visible. A specific background color can be applied to the <code>&lt;p&gt;</code> box. Similarly, the two anonymous boxes always use the same color for their text.</p>
+
+<p>Another case that leads to the creation of anonymous block boxes, is an inline box that contains one or several block boxes. In that case, the box containing the block box is split into two inline boxes: one before, and one after the block box. All the inline boxes before the block box are then enclosed into an <em>anonymous block box</em>, so are the inline boxes following the block box. Therefore, the block box becomes the sibling of the two anonymous block boxes containing the inline elements.</p>
+
+<p>If there are several block boxes, without inline content in-between, the anonymous block boxes are created before, and after the set of boxes.</p>
+
+<h3 id="Example_2">Example</h3>
+
+<p>If we take the following HTML code, with {{ HTMLElement("p") }} have <code>display:inline</code> and {{ HTMLElement("span") }} have <code>display:block</code> :</p>
+
+<pre class="syntaxbox"><code>&lt;p&gt;Some &lt;em&gt;inline&lt;/em&gt; text &lt;span&gt;followed by a paragraph&lt;/span&gt; followed by more inline text.&lt;/p&gt;</code></pre>
+
+<p>Two anonymous block boxes are created, one for the text before the span Element (<code>Some <em>inline</em> text</code>) and one for the text after it (<code>followed by more inline text</code>), which gives the following block structure:</p>
+
+<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/13625/anonymous_block_box_break.png" style="height: 137px; width: 597px;"></p>
+
+<p>Which leads to:</p>
+
+<pre>Some inline text
+followed by a paragraph
+followed by more inline text.
+</pre>
+
+<h3 id="Inline-level_elements_and_inline_boxes">Inline-level elements and inline boxes</h3>
+
+<p>An element is said to be <em>inline-level</em> when the calculated value of its {{ cssxref("display") }} CSS property is: <code>inline</code>, <code>inline-block</code> or <code>inline-table</code>. Visually, it doesn't constitute blocks of contents, but is distributed in lines with other inline-level content. Typically, the content of a paragraph with different formatting, like emphasis or images, is made from inline-level elements.</p>
+
+<p><img alt="venn_inlines.png" class="internal lwrap" src="/@api/deki/files/6008/=venn_inlines.png" style="float: left;"></p>
+
+<div class="warning">
+<p>This diagram uses outdated terminology; see note below. Besides that, it is incorrect because the yellow ellipsis on the right side is per definition either identical to the one on the left side, or bigger than that (it could be a mathematical superset), because the spec says "Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context", see CSS 2.2, chapter 9.2.2</p>
+</div>
+
+<p>Inline-level elements generate <em>inline-level boxes</em> that are defined as boxes participating to an <a href="/en-US/docs/CSS/Inline_formatting_context" title="CSS/Inline formatting context">inline formatting context</a>. <em>Inline boxes</em> are both inline-level boxes and boxes, whose contents participate in their container's inline formatting context. This is the case, for example, for all non-replaced boxes with <code>display:inline</code>. Inline-level boxes, whose contents do not participate in an inline formatting context, are called <em>atomic inline-level boxes</em>. These boxes, generated by replaced inline-level elements or by elements with a calculated {{ cssxref("display") }} value of <code>inline-block</code> or <code>inline-table</code>, are never split into several boxes, as is possible with inline boxes.</p>
+
+<div class="note"><strong>Note:</strong> Initially, atomic inline-level boxes were called atomic inline boxes. This was unfortunate, as they are <strong>not</strong> inline boxes. This was corrected in an erratum to the spec. Nevertheless, you can harmlessly read atomic inline-level box each time you meet atomic inline box in the literature, as this is only a name change.</div>
+
+<div class="note">Atomic inline boxes cannot be split into several lines in an inline formatting context.
+<div style="">
+<pre>&lt;style&gt;
+  span {
+    display:inline; /* default value*/
+  }
+&lt;/style&gt;
+&lt;div style="width:20em;"&gt;
+   The text in the span &lt;span&gt;can be split in several
+   lines as it&lt;/span&gt; is an inline box.
+&lt;/div&gt;
+</pre>
+
+<p>which leads to:</p>
+
+<div style="width: 20em;">The text in the span <span>can be split into several lines as it</span> is an inline box.</div>
+
+<pre>&lt;style&gt;
+  span {
+    display:inline-block;
+  }
+&lt;/style&gt;
+&lt;div style="width:20em;"&gt;
+   The text in the span &lt;span&gt;cannot be split in several
+   lines as it&lt;/span&gt; is an inline-block box.
+&lt;/div&gt;
+</pre>
+
+<p>which leads to:</p>
+
+<div style="width: 20em;">The text in the span <span style="display: inline-block;">cannot be split into several lines as it</span> is an inline-block box.</div>
+</div>
+</div>
+
+<h4 id="Anonymous_inline_boxes">Anonymous inline boxes</h4>
+
+<p>As for block boxes, there are a few cases where inline boxes are created automatically by the CSS engine. These inline boxes are also anonymous as they cannot be named by selectors; they inherit the value of all inheritable properties, setting it to <code>initial</code> for all others.</p>
+
+<p>The most common case where an anonymous inline box is created, is when some text is found as a direct child of a block box creating an inline formatting context. In that case, this text is included in the largest possible anonymous inline box. Also, space content, which would be removed by the behavior set in the {{ cssxref("white-space") }} CSS property, does not generate anonymous inline boxes because they would end empty.</p>
+
+<div class="note">Example TBD</div>
+
+<h3 id="Other_types_of_boxes">Other types of boxes</h3>
+
+<h4 id="Line_boxes">Line boxes</h4>
+
+<p><em>Line boxes</em> are generated by the <a href="/en-US/docs/CSS/Inline_formatting_context" title="block formatting context">inline formatting context</a> to represent a line of text. Inside a block box, a line box extends from one border of the box to the other. When there are <a href="/en-US/docs/CSS/float" title="float">floats</a>, the line box starts at the rightmost border of the left floats and ends at the leftmost border of the right floats.</p>
+
+<p>These boxes are technical, and Web authors do not usually have to bother with them.</p>
+
+<h4 id="Run-in_boxes">Run-in boxes</h4>
+
+<p><em>Run-in boxes</em>, defined using <code>display:run-in</code>, are boxes that are either block boxes or inline boxes, depending on the type of the following box. They can be used to create a title that runs inside its first paragraph when possible.</p>
+
+<div class="note"><strong>Note:</strong> Run-in boxes were removed from the CSS 2.1 standard, as they were insufficiently specified to allow for interoperable implementation. They may reappear in CSS3, but meanwhile, are considered <em>experimental</em>. They should not be used in production.</div>
+
+<h4 class="note" id="Model-induced_boxes">Model-induced boxes</h4>
+
+<p>Besides the inline and block formatting contexts, CSS specifies several additional <em>content models</em> that may be applied to elements. These additional models, used to describe specific layouts, may define additional box types:</p>
+
+<ul>
+ <li>The <a href="/en-US/docs/CSS/table-layout" title="table-layout">table content model</a> may create a <em>table wrapper box</em> and a <em>table box</em>, but also specific boxes like <em>caption boxes</em>.</li>
+ <li>The <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="Using CSS multi-column layouts">multi-column content model</a> may create <em>column boxes</em> between the container box and the content<em>.</em></li>
+ <li>The experimental grid, or flex-box content models, also create additional types of boxes.</li>
+</ul>
+
+<h4 id="Positioning_schemes">Positioning schemes</h4>
+
+<p>Once boxes are generated, the CSS engine needs to position them on the layout. To do that, it uses one of the following algorithms:</p>
+
+<ul>
+ <li>The <em>normal flow</em> - positions each box one after the other.</li>
+ <li>The <em>floats</em> algorithm - extracts the box from the normal flow and put it to the side of the containing box.</li>
+ <li>The <em>absolute positioning</em> scheme - positions a box within an absolute coordinate system that is established by its containing element. An absolutely positioned element can cover other elements.</li>
+</ul>
+
+<h3 id="Normal_flow">Normal flow</h3>
+
+<p>In the <em>normal flow</em>, boxes are laid out one after the other. In a block formatting context, they are laid out vertically; in an inline formatting context, they are laid out horizontally. The normal flow is triggered when the CSS {{ cssxref("position") }} is set to the value <code>static</code> or <code>relative</code>, and if the CSS {{ cssxref("float") }} is set to the value <code>none</code>.</p>
+
+<h3 id="Example_3">Example</h3>
+
+<div class="note">When in the normal flow, in a block formatting context, boxes are laid vertically one after the other out:<br>
+<br>
+[image]<br>
+<br>
+When in the normal flow, in an inline formatting context, boxes are laid horizontally one after the other out:<br>
+<br>
+[image]</div>
+
+<p class="note">There are two sub-cases of the normal flow: static positioning and relative positioning:</p>
+
+<ul>
+ <li class="note">In <em>static positioning</em>, triggered by the value <code>static</code> of the {{ cssxref("position") }} property, the boxes are drawn at the exact position defined by the normal flow layout.<br>
+  [image]</li>
+ <li class="note">In <em>relative</em><em> positioning</em>, triggered by the value <code>relative</code> of the {{ cssxref("position") }} property, the boxes are drawn with an offset defined by the {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} CSS properties.</li>
+</ul>
+
+<h3 id="Floats">Floats</h3>
+
+<p>In the <em>float positioning scheme</em>, specific boxes (called <em>floating boxes</em> or simply <em>floats)</em> are positioned at the beginning, or end of the current line. This leads to the property that text (and more generally anything within the normal flow) flows along the edge of the floating boxes, except if told differently by the {{ cssxref("clear") }} CSS property.</p>
+
+<p>The float positioning scheme for a box is selected, by setting the {{ cssxref("float") }} CSS property on that box to a value different than <code>none</code> and {{ cssxref("position") }} to <code>static</code> or <code>relative</code>. If {{ cssxref("float") }} is set to <code>left</code>, the float is positioned at the beginning of the line box. If set to <code>right</code>, the float is positioned at the end of the line box. In either case, the line box is shrunk to fit alongside the float.</p>
+
+<p>[image]</p>
+
+<h3 id="Absolute_positioning">Absolute positioning</h3>
+
+<p>In the <em>absolute positioning scheme</em>, boxes are entirely removed from the flow and don't interact with it at all. They are positioned relative to their <a href="/en-US/docs/Web/CSS/All_About_The_Containing_Block" title="CSS/Containing block">containing block</a> using the {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} CSS properties.</p>
+
+<p>An element is absolutely positioned if the {{ cssxref("position") }} is set to <code>absolute</code> or <code>fixed</code>.</p>
+
+<p>With a <em>fixed positioned element</em>, the containing block is the viewport. The position of the element is absolute within the viewport. Scrolling does not change the position of the element.</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Reference">CSS Reference</a></li>
+ <li>{{css_key_concepts}}</li>
+</ul>
diff --git a/files/uk/web/css/розмітка_кулінарна-книга/index.html b/files/uk/web/css/розмітка_кулінарна-книга/index.html
new file mode 100644
index 0000000000..e6d7f61135
--- /dev/null
+++ b/files/uk/web/css/розмітка_кулінарна-книга/index.html
@@ -0,0 +1,80 @@
+---
+title: Кулінарна книга з CSS розмітки
+slug: Web/CSS/Розмітка_кулінарна-книга
+translation_of: Web/CSS/Layout_cookbook
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are new to CSS layout then you might first like to take a look at our <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout learning module</a>, as this will give you the basic grounding you need to make use of the recipes here.</p>
+</div>
+
+<h2 id="The_Recipes">The Recipes</h2>
+
+<table class="standard-table" style="height: 543px; width: 1188px;">
+ <thead>
+  <tr>
+   <th scope="col">Recipe</th>
+   <th scope="col">Description</th>
+   <th scope="col">Layout Methods</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Media_objects">Media objects</a></td>
+   <td>A two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, {{cssxref("float")}} fallback, {{cssxref("fit-content")}} sizing</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts">Columns</a></td>
+   <td>When to choose multi-column layout, flexbox or grid for your columns.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Columns">Multicol</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element">Center an element</a></td>
+   <td>How to center an item horizontally and vertically.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers">Sticky footers</a></td>
+   <td>Creating a footer which sits at the bottom of the container or viewport when the content is shorter. </td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Split_Navigation">Split navigation</a></td>
+   <td>A navigation pattern where some links are visually separated from the others.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, {{cssxref("margin")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation">Breadcrumb navigation</a></td>
+   <td>Creating a list of links to allow the visitor to navigate back up through the page hierarchy.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/List_group_with_badges">List group with badges</a></td>
+   <td>A list of items with a badge to display a count.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Pagination">Pagination</a></td>
+   <td>Links to pages of content (such as search results).</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Card">Card</a></td>
+   <td>A card component, which displays in a grid of cards.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Grid Layout</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Grid_wrapper">Grid wrapper</a></td>
+   <td>For aligning grid content within a central wrapper, while also allowing items to break out.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Contribute_a_Recipe">Contribute a Recipe</h2>
+
+<p>As with all of MDN we would love you to contribute a recipe in the same format as the ones shown above. <a href="/en-US/docs/user:chrisdavidmills/Layout_Cookbook_Home/Contribute_a_recipe">See this page</a> for a template and guidelines for writing your own example.</p>
diff --git a/files/uk/web/css/схема_компонування/index.html b/files/uk/web/css/схема_компонування/index.html
new file mode 100644
index 0000000000..5794b4c397
--- /dev/null
+++ b/files/uk/web/css/схема_компонування/index.html
@@ -0,0 +1,30 @@
+---
+title: Схема компонування
+slug: Web/CSS/Схема_компонування
+tags:
+  - CSS
+  - Компонування
+  - Розмітка
+  - Розташування
+translation_of: Web/CSS/Layout_mode
+---
+<div><strong>Схема компонування</strong> (layout mode) в <a href="/en-US/docs/Web/CSS">CSS</a> являє собою алгоритм, який визначає розташування та розміри елементів залежно від того, як вони взаємодіють із сусідніми та батьківськими елементами. Існує декілька таких схем:</div>
+
+<ul>
+ <li><em>Блокове компонування</em> (block), призначене для розмітки документів. Ця схема має відповідні засоби, як-от можливість зробити елементи <em><a href="/uk/docs/Web/CSS/float">рухомими</a></em> (плаваючими) або скомпонувати їх в <em><a href="/uk/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">кілька стовпчиків</a></em>.</li>
+ <li><em>Рядкове компонування</em> (inline), призначене насамперед для розмітки тексту.</li>
+ <li><em>Табличне компонування</em>, призначене для розмітки таблицею.</li>
+ <li><em><a href="/uk/docs/Web/CSS/position#Види_розташування">Компонування розміщенням</a></em> (positioned), призначене для застосування до елементів, що не надто взаємодіють з іншими.</li>
+ <li><em><a href="/uk/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Компонування flexbox</a></em>, призначене для створення складної розмітки сторінок, які можна плавно масштабувати.</li>
+ <li><em><a href="/uk/docs/Web/CSS/CSS_Grid_Layout">Компонування сіткою</a></em>, призначене для розташування елементів відносно нерухомої сітки. {{experimental_inline}}</li>
+</ul>
+
+<div class="note">
+<p><strong>Зауваження:</strong> Не всі <a href="/en-US/docs/Web/CSS/Reference">властивості CSS</a> застосовні до всіх <em>схем компонування</em>. Більшість із них вживаються разом з однією-двома схемами і жодним чином не діють, якщо відповідний елемент компонується за іншою схемою.</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/uk/web/events/abort/index.html b/files/uk/web/events/abort/index.html
new file mode 100644
index 0000000000..65e2d7e046
--- /dev/null
+++ b/files/uk/web/events/abort/index.html
@@ -0,0 +1,67 @@
+---
+title: abort
+slug: Web/Events/abort
+translation_of: Web/API/HTMLMediaElement/abort_event
+---
+<p>Подія <code>abort</code> спрацьовує коли завантаження ресурсу було <span id="result_box" lang="uk"><span>перервано</span></span>.</p>
+
+<h2 id="Загальна_інформація">Загальна інформація</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Специфікація</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">UIEvent if generated from a user interface, Event otherwise.</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">None</dd>
+</dl>
+
+<h2 id="Властивості">Властивості</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/uk/web/events/domcontentloaded/index.html b/files/uk/web/events/domcontentloaded/index.html
new file mode 100644
index 0000000000..96ca54cfb0
--- /dev/null
+++ b/files/uk/web/events/domcontentloaded/index.html
@@ -0,0 +1,152 @@
+---
+title: DOMContentLoaded
+slug: Web/Events/DOMContentLoaded
+translation_of: Web/API/Window/DOMContentLoaded_event
+---
+<p>Подія <code>DOMContentLoaded</code> викликається, коли вихідний HTML документ повністю завантажився та був розібраний (parse), без очікування повного завантаження стилів, зображень, сабфреймів (subframes). Зовсім інша подія - <a href="/en-US/docs/Mozilla_event_reference/load"><code>load</code></a> - має використовуватися лише для того, щоб визначити повне завантаження сторінки. Використання <code><a href="/en-US/docs/Mozilla_event_reference/load">load</a> </code>там, де застосування <code>DOMContentLoaded</code> є більш доречним, є дуже поширеною помилкою, тому будьте уважними.</p>
+
+<p>{{Note("Синхронний Javascript затримує парсинг DOM.")}}</p>
+
+<p>{{Note("Існує безліч універсальних та автономних бібліотек, які  попонують кроссбраузерні методи для визначення готовності DOM.")}}</p>
+
+<h2 id="Прискорення">Прискорення</h2>
+
+<p>Якщо ви хочете, щоб DOM був розібраним (got parsed) якомога швидше після того, як користувач зробив запит сторінки, ви можете зробити ваш <a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">JavaScript асинхронним</a> та <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">оптимізувати завантаження стилів</a>. Якщо цього не зробити, це сповільнить завантаження сторінки через те, що воно буде відбуватися паралельно і марнувати трафік у головного html документа.</p>
+
+<h2 id="Основна_інформація">Основна інформація</h2>
+
+<dl>
+ <dt style="width: 120px; text-align: right; float: left;">Специфікація</dt>
+ <dd style="margin: 0px 0px 0px 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></dd>
+ <dt style="width: 120px; text-align: right; float: left;">Інтерфейс</dt>
+ <dd style="margin: 0px 0px 0px 120px;">Подія</dd>
+ <dt style="width: 120px; text-align: right; float: left;">Спливання</dt>
+ <dd style="margin: 0px 0px 0px 120px;">Так</dd>
+ <dt style="width: 120px; text-align: right; float: left;">Можливість скасування</dt>
+ <dd style="margin: 0px 0px 0px 120px;">Так (однак скасування як простої події скасувати не можна)</dd>
+ <dt style="width: 120px; text-align: right; float: left;"> </dt>
+ <dt style="width: 120px; text-align: right; float: left;"> </dt>
+ <dt style="width: 120px; text-align: right; float: left;"> </dt>
+ <dt style="width: 120px; text-align: right; float: left;"> </dt>
+ <dt style="width: 120px; text-align: right; float: left;">Ціль</dt>
+ <dd style="margin: 0px 0px 0px 120px;">Документ</dd>
+ <dt style="width: 120px; text-align: right; float: left;">Типова дія</dt>
+ <dd style="margin: 0px 0px 0px 120px;">Немає.</dd>
+</dl>
+
+<h2 id="Властивості">Властивості</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Властивість</th>
+   <th scope="col">Тип</th>
+   <th scope="col">Опис</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Приклад">Приклад</h2>
+
+<pre class="brush: html">&lt;script&gt;
+  document.addEventListener("DOMContentLoaded", function(event) {
+    console.log("DOM fully loaded and parsed");
+  });
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: html">&lt;script&gt;
+  document.addEventListener("DOMContentLoaded", function(event) {
+    console.log("DOM fully loaded and parsed");
+  });
+
+for(var i=0; i&lt;1000000000; i++)
+{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later.
+&lt;/script&gt;
+</pre>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("1")}}<sup>[1]</sup></td>
+   <td>9.0<sup>[2]</sup></td>
+   <td>9.0</td>
+   <td>3.1<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoMobile("1")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Bubbling для цієї події підтримується принаймні Gecko 1.9.2, Chrome 6, and Safari 4.</p>
+
+<p>[2] Internet Explorer 8 підтримує подію <code>readystatechange</code> , яка може використовуватися для того, щоб визначити чи готовий DOM. У більш ранніх версіях Internet Explorer цей стан може бути визначений повторними спробами виконання <code>document.documentElement.doScroll("left");</code>,  так як цей фрагмент коду буде генерувати помилку, поки DOM не буде готовий.</p>
+
+<h2 id="Подібні_події">Подібні події</h2>
+
+<ul>
+ <li>{{event("DOMContentLoaded")}}</li>
+ <li>{{event("readystatechange")}}</li>
+ <li>{{event("load")}}</li>
+ <li>{{event("beforeunload")}}</li>
+ <li>{{event("unload")}}</li>
+</ul>
diff --git a/files/uk/web/events/index.html b/files/uk/web/events/index.html
new file mode 100644
index 0000000000..ff23bb9e4c
--- /dev/null
+++ b/files/uk/web/events/index.html
@@ -0,0 +1,2310 @@
+---
+title: Event reference
+slug: Web/Events
+tags:
+  - NeedsTranslation
+  - TopicStub
+  - events
+translation_of: Web/Events
+---
+<p>DOM Events are sent to notify code of interesting things that have taken place. Each event is represented by an object which is based on the {{domxref("Event")}} interface, and may have additional custom fields and/or functions used to get additional information about what happened. Events can represent everything from basic user interactions to automated notifications of things happening in the rendering model.</p>
+
+<p>This article offers a list of events that can be sent; some are standard events defined in official specifications, while others are events used internally by specific browsers; for example, Mozilla-specific events are listed so that <a href="/en-US/docs/Mozilla/Add-ons">add-ons</a> can use them to interact with the browser.</p>
+
+<h2 id="Standard_events">Standard events</h2>
+
+<p>These events are defined in official Web specifications, and should be common across browsers. Each event is listed along with the interface representing the object sent to recipients of the event (so you can find information about what data is provided with each event) as well as a link to the specification or specifications that define the event.</p>
+
+<table class="standard-table" style="width: 100%;">
+ <thead>
+  <tr>
+   <th class="header" style="width: 220px;">Event Name</th>
+   <th class="header" style="width: 90px;">Event Type</th>
+   <th class="header" style="width: 100px;">Specification</th>
+   <th class="header">Fired when...</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{event("abort")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort">DOM L3</a></td>
+   <td>The loading of a resource has been aborted.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/abort_(ProgressEvent)">abort</a></code></td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a> and <a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-abort">XMLHttpRequest</a></td>
+   <td>Progression has been terminated (not due to an error).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/abort_indexedDB">abort</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td>
+   <td>A transaction has been aborted.</td>
+  </tr>
+  <tr>
+   <td>{{event("afterprint")}}{{gecko_minversion_inline("6")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td>
+   <td>The associated document has started printing or the print preview has been closed.</td>
+  </tr>
+  <tr>
+   <td>{{event("animationend")}}</td>
+   <td>{{domxref("AnimationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td>
+   <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> has completed.</td>
+  </tr>
+  <tr>
+   <td>{{event("animationiteration")}}</td>
+   <td>{{domxref("AnimationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td>
+   <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> is repeated.</td>
+  </tr>
+  <tr>
+   <td>{{event("animationstart")}}</td>
+   <td>{{domxref("AnimationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td>
+   <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> has started.</td>
+  </tr>
+  <tr>
+   <td>{{event("audioprocess")}}</td>
+   <td>{{domxref("AudioProcessingEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Audio API', '#AudioProcessingEvent', 'audioprocess')}}</td>
+   <td>The input buffer of a {{domxref("ScriptProcessorNode")}} is ready to be processed.</td>
+  </tr>
+  <tr>
+   <td>{{event("audioend")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>The user agent has finished capturing audio for speech recognition.</td>
+  </tr>
+  <tr>
+   <td>{{event("audiostart")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>The user agent has started to capture audio for speech recognition.</td>
+  </tr>
+  <tr>
+   <td>{{event("beforeprint")}} {{gecko_minversion_inline("6")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td>
+   <td>The associated document is about to be printed or previewed for printing.</td>
+  </tr>
+  <tr>
+   <td>{{event("beforeunload")}}</td>
+   <td>{{domxref("BeforeUnloadEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/browsers.html#unloading-documents">HTML5 </a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{event("beginEvent")}}</td>
+   <td>{{domxref("TimeEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element begins.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code></td>
+   <td> </td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>An open connection to a database is blocking a <code>versionchange</code> transaction on the same database.</td>
+  </tr>
+  <tr>
+   <td>{{event("blur")}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-blur">DOM L3</a></td>
+   <td>An element has lost focus (does not bubble).</td>
+  </tr>
+  <tr>
+   <td>{{event("boundary")}}</td>
+   <td>{{domxref("SpeechSynthesisEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>The spoken utterance reaches a word or sentence boundary</td>
+  </tr>
+  <tr>
+   <td>{{event("cached")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>The resources listed in the manifest have been downloaded, and the application is now cached.</td>
+  </tr>
+  <tr>
+   <td>{{event("canplay")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplay">HTML5 media</a></td>
+   <td>The user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.</td>
+  </tr>
+  <tr>
+   <td>{{event("canplaythrough")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplaythrough">HTML5 media</a></td>
+   <td>The user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.</td>
+  </tr>
+  <tr>
+   <td>{{event("change")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-change">HTML5</a></td>
+   <td>The <code>change</code> event is fired for {{HTMLElement("input")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}} elements when a change to the element's value is committed by the user.</td>
+  </tr>
+  <tr>
+   <td>{{event("chargingchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td>
+   <td>The battery begins or stops charging.</td>
+  </tr>
+  <tr>
+   <td>{{event("chargingtimechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td>
+   <td>The <code>chargingTime</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{event("checking")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>The user agent is checking for an update, or attempting to download the cache manifest for the first time.</td>
+  </tr>
+  <tr>
+   <td>{{event("click")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-click">DOM L3</a></td>
+   <td>A pointing device button has been pressed and released on an element.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/close_websocket">close</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>A WebSocket connection has been closed.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/complete_indexedDB">complete</a></code></td>
+   <td> </td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#transaction">IndexedDB</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{event("complete")}}</td>
+   <td>{{domxref("OfflineAudioCompletionEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}</td>
+   <td>The rendering of an {{domxref("OfflineAudioContext")}} is terminated.</td>
+  </tr>
+  <tr>
+   <td>{{event("compositionend")}}{{gecko_minversion_inline("9")}}</td>
+   <td>{{domxref("CompositionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionend">DOM L3</a></td>
+   <td>The composition of a passage of text has been completed or canceled.</td>
+  </tr>
+  <tr>
+   <td>{{event("compositionstart")}}{{gecko_minversion_inline("9")}}</td>
+   <td>{{domxref("CompositionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionstart">DOM L3</a></td>
+   <td>The composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition).</td>
+  </tr>
+  <tr>
+   <td>{{event("compositionupdate")}}{{gecko_minversion_inline("9")}}</td>
+   <td>{{domxref("CompositionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionupdate">DOM L3</a></td>
+   <td>A character is added to a passage of text being composed.</td>
+  </tr>
+  <tr>
+   <td>{{event("contextmenu")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="https://html.spec.whatwg.org/multipage/forms.html#context-menus">HTML5</a></td>
+   <td>The right button of the mouse is clicked (before the context menu is displayed).</td>
+  </tr>
+  <tr>
+   <td>{{event("copy")}}</td>
+   <td>{{domxref("ClipboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#copy-event">Clipboard</a></td>
+   <td>The text selection has been added to the clipboard.</td>
+  </tr>
+  <tr>
+   <td>{{event("cut")}}</td>
+   <td>{{domxref("ClipboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#cut-event">Clipboard</a></td>
+   <td>The text selection has been removed from the document and added to the clipboard.</td>
+  </tr>
+  <tr>
+   <td>{{event("dblclick")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-dblclick">DOM L3</a></td>
+   <td>A pointing device button is clicked twice on an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("devicelight")}}</td>
+   <td>{{domxref("DeviceLightEvent")}}</td>
+   <td style="white-space: nowrap;"><a class="external" href="http://dvcs.w3.org/hg/dap/raw-file/tip/light/Overview.html" lang="en" title="The definition of 'Ambient Light Events' in that specification.">Ambient Light Events</a></td>
+   <td>Fresh data is available from a light sensor.</td>
+  </tr>
+  <tr>
+   <td>{{event("devicemotion")}}</td>
+   <td>{{domxref("DeviceMotionEvent")}}</td>
+   <td style="white-space: nowrap;"><a class="external" href="http://dev.w3.org/geo/api/spec-source-orientation.html" lang="en" title="The 'Device Orientation Events' specification">Device Orientation Events</a></td>
+   <td>Fresh data is available from a motion sensor.</td>
+  </tr>
+  <tr>
+   <td>{{event("deviceorientation")}}</td>
+   <td>{{domxref("DeviceOrientationEvent")}}</td>
+   <td style="white-space: nowrap;"><a class="external" href="http://dev.w3.org/geo/api/spec-source-orientation.html" lang="en" title="The 'Device Orientation Events' specification">Device Orientation Events</a></td>
+   <td>Fresh data is available from an orientation sensor.</td>
+  </tr>
+  <tr>
+   <td>{{event("deviceproximity")}}</td>
+   <td>{{domxref("DeviceProximityEvent")}}</td>
+   <td style="white-space: nowrap;"><a class="external" href="http://dvcs.w3.org/hg/dap/raw-file/tip/proximity/Overview.html" lang="en" title="The definition of 'Proximity Events' in that specification.">Proximity Events</a></td>
+   <td>Fresh data is available from a proximity sensor (indicates an approximated distance between the device and a nearby object).</td>
+  </tr>
+  <tr>
+   <td>{{event("dischargingtimechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td>
+   <td>The <code>dischargingTime</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td><code>DOMActivate</code> {{deprecated_inline}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMActivate">DOM L3</a></td>
+   <td>A button, link or state changing element is activated (use {{event("click")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttributeNameChanged</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationNameEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMAttributeNameChanged">DOM L3</a> Removed</td>
+   <td>The name of an attribute changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttrModified</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMAttrModified">DOM L3</a></td>
+   <td>The value of an attribute has been modified (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMCharacterDataModified">DOM L3</a></td>
+   <td>A text or another <a href="/en-US/docs/DOM/CharacterData">CharacterData</a> has changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td>{{event("DOMContentLoaded")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></td>
+   <td>The document has finished loading (but not its dependent resources).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMElementNameChanged</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationNameEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMElementNameChanged">DOM L3</a> Removed</td>
+   <td>The name of an element changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code>DOMFocusIn</code> {{deprecated_inline}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusIn">DOM L3</a></td>
+   <td>An element has received focus (use {{event("focus")}} or {{event("focusin")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code>DOMFocusOut</code> {{deprecated_inline}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusOut">DOM L3</a></td>
+   <td>An element has lost focus (use {{event("blur")}} or {{event("focusout")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInserted</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted">DOM L3</a></td>
+   <td>A node has been added as a child of another node (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInsertedIntoDocument">DOM L3</a></td>
+   <td>A node has been inserted into the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemoved</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemoved">DOM L3</a></td>
+   <td>A node has been removed from its parent node (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemovedFromDocument">DOM L3</a></td>
+   <td>A node has been removed from the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMSubtreeModified</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified">DOM L3</a></td>
+   <td>A change happened in the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td>{{event("downloading")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>The user agent has found an update and is fetching it, or is downloading the resources listed by the cache manifest for the first time.</td>
+  </tr>
+  <tr>
+   <td>{{event("drag")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drag">HTML5</a></td>
+   <td>An element or text selection is being dragged (every 350ms).</td>
+  </tr>
+  <tr>
+   <td>{{event("dragend")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragend">HTML5</a></td>
+   <td>A drag operation is being ended (by releasing a mouse button or hitting the escape key).</td>
+  </tr>
+  <tr>
+   <td>{{event("dragenter")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragenter">HTML5</a></td>
+   <td>A dragged element or text selection enters a valid drop target.</td>
+  </tr>
+  <tr>
+   <td>{{event("dragleave")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragleave">HTML5</a></td>
+   <td>A dragged element or text selection leaves a valid drop target.</td>
+  </tr>
+  <tr>
+   <td>{{event("dragover")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragover">HTML5</a></td>
+   <td>An element or text selection is being dragged over a valid drop target (every 350ms).</td>
+  </tr>
+  <tr>
+   <td>{{event("dragstart")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragstart">HTML5</a></td>
+   <td>The user starts dragging an element or text selection.</td>
+  </tr>
+  <tr>
+   <td>{{event("drop")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drop">HTML5</a></td>
+   <td>An element is dropped on a valid drop target.</td>
+  </tr>
+  <tr>
+   <td>{{event("durationchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-durationchange">HTML5 media</a></td>
+   <td>The <code>duration</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{event("emptied")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-emptied">HTML5 media</a></td>
+   <td>The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> method is called to reload it.</td>
+  </tr>
+  <tr>
+   <td>{{event("end_(SpeechRecognition)","end")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>The speech recognition service has disconnected.</td>
+  </tr>
+  <tr>
+   <td>{{event("end_(SpeechSynthesis)","end")}}</td>
+   <td>{{domxref("SpeechSynthesisEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName("Web Speech API")}}</td>
+   <td>The utterance has finished being spoken.</td>
+  </tr>
+  <tr>
+   <td>{{event("ended")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ended">HTML5 media</a></td>
+   <td>Playback has stopped because the end of the media was reached.</td>
+  </tr>
+  <tr>
+   <td>{{event("ended_(Web_Audio)", "ended")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{SpecName("Web Audio API")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{event("endEvent")}}</td>
+   <td>{{domxref("TimeEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element ends.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error">DOM L3</a></td>
+   <td>A resource failed to load.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> and </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-error">XMLHttpRequest</a></td>
+   <td>Progression has failed.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>An error occurred while downloading the cache manifest or updating the content of the application.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>A WebSocket connection has been closed with prejudice (some data couldn't be sent for example).</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td>
+   <td>An event source connection has been failed.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>A request caused an error and failed.</td>
+  </tr>
+  <tr>
+   <td>{{event("error_(SpeechRecognitionError)","error")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>A speech recognition error occurs.</td>
+  </tr>
+  <tr>
+   <td>{{event("error_(SpeechSynthesisError)","error")}}</td>
+   <td>{{domxref("SpeechSynthesisErrorEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>An error occurs that prevents the utterance from being succesfully spoken.</td>
+  </tr>
+  <tr>
+   <td>{{event("focus")}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focus">DOM L3</a></td>
+   <td>An element has received focus (does not bubble).</td>
+  </tr>
+  <tr>
+   <td>{{event("focusin")}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusIn">DOM L3</a></td>
+   <td>An element is about to receive focus (bubbles).</td>
+  </tr>
+  <tr>
+   <td>{{event("focusout")}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout">DOM L3</a></td>
+   <td>An element is about to lose focus (bubbles).</td>
+  </tr>
+  <tr>
+   <td>{{event("fullscreenchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td>
+   <td>An element was turned to fullscreen mode or back to normal mode.</td>
+  </tr>
+  <tr>
+   <td>{{event("fullscreenerror")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td>
+   <td>It was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.</td>
+  </tr>
+  <tr>
+   <td>{{event("gamepadconnected")}}</td>
+   <td>{{domxref("GamepadEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/gamepad/#the-gamepadconnected-event">Gamepad</a></td>
+   <td>A gamepad has been connected.</td>
+  </tr>
+  <tr>
+   <td>{{event("gamepaddisconnected")}}</td>
+   <td>{{domxref("GamepadEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/gamepad/#the-gamepaddisconnected-event">Gamepad</a></td>
+   <td>A gamepad has been disconnected.</td>
+  </tr>
+  <tr>
+   <td>{{event("gotpointercapture")}}</td>
+   <td>{{domxref("PointerEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-gotpointercapture-event">Pointer Events</a></td>
+   <td>Element receives pointer capture.</td>
+  </tr>
+  <tr>
+   <td>{{event("hashchange")}}</td>
+   <td>{{domxref("HashChangeEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-hashchange">HTML5</a></td>
+   <td>The fragment identifier of the URL has changed (the part of the URL after the #).</td>
+  </tr>
+  <tr>
+   <td>{{event("lostpointercapture")}}</td>
+   <td>{{domxref("PointerEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-lostpointercapture-event">Pointer Events</a></td>
+   <td>Element lost pointer capture.</td>
+  </tr>
+  <tr>
+   <td>{{event("input")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/forms.html#common-event-behaviors">HTML5</a></td>
+   <td>The value of an element changes or the content of an element with the attribute <a href="/en-US/docs/DOM/Element.contentEditable">contenteditable</a> is modified.</td>
+  </tr>
+  <tr>
+   <td>{{event("invalid")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#constraint-validation">HTML5</a></td>
+   <td>A submittable element has been checked and doesn't satisfy its constraints.</td>
+  </tr>
+  <tr>
+   <td>{{event("keydown")}}</td>
+   <td>{{domxref("KeyboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keydown">DOM L3</a></td>
+   <td>A key is pressed down.</td>
+  </tr>
+  <tr>
+   <td>{{event("keypress")}}</td>
+   <td>{{domxref("KeyboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress">DOM L3</a></td>
+   <td>A key is pressed down and that key normally produces a character value (use input instead).</td>
+  </tr>
+  <tr>
+   <td>{{event("keyup")}}</td>
+   <td>{{domxref("KeyboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keyup">DOM L3</a></td>
+   <td>A key is released.</td>
+  </tr>
+  <tr>
+   <td>{{event("languagechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{ SpecName('HTML5.1', '#dom-navigator-languages', 'NavigatorLanguage.languages') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{event("levelchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td>
+   <td>The <code>level</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{event("load")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></td>
+   <td>A resource and its dependent resources have finished loading.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)">load</a></code></td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-load">XMLHttpRequest</a></td>
+   <td>Progression has been successful.</td>
+  </tr>
+  <tr>
+   <td>{{event("loadeddata")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadeddata">HTML5 media</a></td>
+   <td>The first frame of the media has finished loading.</td>
+  </tr>
+  <tr>
+   <td>{{event("loadedmetadata")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadedmetadata">HTML5 media</a></td>
+   <td>The metadata has been loaded.</td>
+  </tr>
+  <tr>
+   <td>{{event("loadend")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadend">XMLHttpRequest</a></td>
+   <td>Progress has stopped (after "error", "abort" or "load" have been dispatched).</td>
+  </tr>
+  <tr>
+   <td>{{event("loadstart")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress </a><span>and </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadstart">XMLHttpRequest</a></td>
+   <td>Progress has begun.</td>
+  </tr>
+  <tr>
+   <td>{{event("mark")}}</td>
+   <td>{{domxref("SpeechSynthesisEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>The spoken utterance reaches a named SSML "mark" tag.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_websocket">message</a></code></td>
+   <td>{{domxref("MessageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>A message is received through a WebSocket.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_webworker">message</a></code></td>
+   <td>{{domxref("MessageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/workers/#communicating-with-a-dedicated-worker">Web Workers</a></td>
+   <td>A message is received from a Web Worker.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_webmessaging">message</a></code></td>
+   <td>{{domxref("MessageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/webmessaging/">Web Messaging</a></td>
+   <td>A message is received from a child (i)frame or a parent window.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_serversentevents">message</a></code></td>
+   <td>{{domxref("MessageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td>
+   <td>A message is received through an event source.</td>
+  </tr>
+  <tr>
+   <td>{{event("message_(ServiceWorker)","message")}}</td>
+   <td>{{domxref("ServiceWorkerMessageEvent")}} or {{domxref("ExtendableMessageEvent")}}, depending on context.</td>
+   <td style="white-space: nowrap;"><a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a></td>
+   <td>A message is received from a service worker, or a message is received in a service worker from another context.</td>
+  </tr>
+  <tr>
+   <td>{{event("mousedown")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousedown">DOM L3</a></td>
+   <td>A pointing device button (usually a mouse) is pressed on an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseenter")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseenter">DOM L3</a></td>
+   <td>A pointing device is moved onto the element that has the listener attached.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseleave")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseleave">DOM L3</a></td>
+   <td>A pointing device is moved off the element that has the listener attached.</td>
+  </tr>
+  <tr>
+   <td>{{event("mousemove")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousemove">DOM L3</a></td>
+   <td>A pointing device is moved over an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseout")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseout">DOM L3</a></td>
+   <td>A pointing device is moved off the element that has the listener attached or off one of its children.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseover")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseover">DOM L3</a></td>
+   <td>A pointing device is moved onto the element that has the listener attached or onto one of its children.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseup")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseup">DOM L3</a></td>
+   <td>A pointing device button is released over an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("nomatch")}}</td>
+   <td>{{domxref("SpeechRecognitionEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>The speech recognition service returns a final result with no significant recognition.</td>
+  </tr>
+  <tr>
+   <td>{{event("notificationclick")}}</td>
+   <td>{{domxref("NotificationEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Notifications','#dom-serviceworkerglobalscope-onnotificationclick','onnotificationclick')}}</td>
+   <td>A system notification<span style="line-height: 19.0909080505371px;"> spawned by {{domxref("ServiceWorkerRegistration.showNotification()")}} has been clicked.</span></td>
+  </tr>
+  <tr>
+   <td>{{event("noupdate")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>The manifest hadn't changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("obsolete")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>The manifest was found to have become a 404 or 410 page, so the application cache is being deleted.</td>
+  </tr>
+  <tr>
+   <td>{{event("offline")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-offline">HTML5 offline</a></td>
+   <td>The browser has lost access to the network.</td>
+  </tr>
+  <tr>
+   <td>{{event("online")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-online">HTML5 offline</a></td>
+   <td>The browser has gained access to the network (but particular websites might be unreachable).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/open_websocket">open</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>A WebSocket connection has been established.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/open_serversentevents">open</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td>
+   <td>An event source connection has been established.</td>
+  </tr>
+  <tr>
+   <td>{{event("orientationchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/screen-orientation/">Screen Orientation</a></td>
+   <td>The orientation of the device (portrait/landscape) has changed</td>
+  </tr>
+  <tr>
+   <td>{{event("pagehide")}}</td>
+   <td>{{domxref("PageTransitionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pagehide">HTML5</a></td>
+   <td>A session history entry is being traversed from.</td>
+  </tr>
+  <tr>
+   <td>{{event("pageshow")}}</td>
+   <td>{{domxref("PageTransitionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pageshow">HTML5</a></td>
+   <td>A session history entry is being traversed to.</td>
+  </tr>
+  <tr>
+   <td>{{event("paste")}}</td>
+   <td>{{domxref("ClipboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#paste-event">Clipboard</a></td>
+   <td>Data has been transfered from the system clipboard to the document.</td>
+  </tr>
+  <tr>
+   <td>{{event("pause")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-pause">HTML5 media</a></td>
+   <td>Playback has been paused.</td>
+  </tr>
+  <tr>
+   <td>{{event("pause_(SpeechSynthesis)", "pause")}}</td>
+   <td>{{domxref("SpeechSynthesisEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>The utterance is paused part way through.</td>
+  </tr>
+  <tr>
+   <td>{{event("pointercancel")}}</td>
+   <td>{{domxref("PointerEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointercancel-event">Pointer Events</a></td>
+   <td>The pointer is unlikely to produce any more events.</td>
+  </tr>
+  <tr>
+   <td>{{event("pointerdown")}}</td>
+   <td>{{domxref("PointerEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerdown-event">Pointer Events</a></td>
+   <td>The pointer enters the active buttons state.</td>
+  </tr>
+  <tr>
+   <td>{{event("pointerenter")}}</td>
+   <td>{{domxref("PointerEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerenter-event">Pointer Events</a></td>
+   <td>Pointing device is moved inside the hit-testing boundary.</td>
+  </tr>
+  <tr>
+   <td>{{event("pointerleave")}}</td>
+   <td>{{domxref("PointerEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerleave-event">Pointer Events</a></td>
+   <td>Pointing device is moved out of the hit-testing boundary.</td>
+  </tr>
+  <tr>
+   <td>{{event("pointerlockchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td>
+   <td>The pointer was locked or released.</td>
+  </tr>
+  <tr>
+   <td>{{event("pointerlockerror")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td>
+   <td>It was impossible to lock the pointer for technical reasons or because the permission was denied.</td>
+  </tr>
+  <tr>
+   <td>{{event("pointermove")}}</td>
+   <td>{{domxref("PointerEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointermove-event">Pointer Events</a></td>
+   <td>The pointer changed coordinates.</td>
+  </tr>
+  <tr>
+   <td>{{event("pointerout")}}</td>
+   <td>{{domxref("PointerEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerout-event">Pointer Events</a></td>
+   <td>The pointing device moved out of hit-testing boundary or leaves detectable hover range.</td>
+  </tr>
+  <tr>
+   <td>{{event("pointerover")}}</td>
+   <td>{{domxref("PointerEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerover-event">Pointer Events</a></td>
+   <td>The pointing device is moved into the hit-testing boundary.</td>
+  </tr>
+  <tr>
+   <td>{{event("pointerup")}}</td>
+   <td>{{domxref("PointerEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerup-event">Pointer Events</a></td>
+   <td>The pointer leaves the active buttons state.</td>
+  </tr>
+  <tr>
+   <td>{{event("play")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-play">HTML5 media</a></td>
+   <td>Playback has begun.</td>
+  </tr>
+  <tr>
+   <td>{{event("playing")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-playing">HTML5 media</a></td>
+   <td>Playback is ready to start after having been paused or delayed due to lack of data.</td>
+  </tr>
+  <tr>
+   <td>{{event("popstate")}}</td>
+   <td>{{domxref("PopStateEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate">HTML5</a></td>
+   <td>A session history entry is being navigated to (in certain cases).</td>
+  </tr>
+  <tr>
+   <td>{{event("progress")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-progress">XMLHttpRequest</a></td>
+   <td>In progress.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/progress_(appcache_event)">progress</a></code></td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>The user agent is downloading resources listed by the manifest.</td>
+  </tr>
+  <tr>
+   <td>{{event("push")}}</td>
+   <td>{{domxref("PushEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName("Push API")}}</td>
+   <td>A <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker</a> has received a push message.</td>
+  </tr>
+  <tr>
+   <td>{{event("pushsubscriptionchange")}}</td>
+   <td>{{domxref("PushEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName("Push API")}}</td>
+   <td>A <a href="/en-US/docs/Web/API/PushSubscription">PushSubscription</a> has expired.</td>
+  </tr>
+  <tr>
+   <td>{{event("ratechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ratechange">HTML5 media</a></td>
+   <td>The playback rate has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("readystatechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><span>HTML5 <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-readystatechange">XMLHttpRequest</a></td>
+   <td>The readyState attribute of a document has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("repeatEvent")}}</td>
+   <td>{{domxref("TimeEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element is repeated.</td>
+  </tr>
+  <tr>
+   <td>{{event("reset")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-0#resetting-a-form">HTML5</a></td>
+   <td>A form is reset.</td>
+  </tr>
+  <tr>
+   <td>{{event("resize")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-resize">DOM L3</a></td>
+   <td>The document view has been resized.</td>
+  </tr>
+  <tr>
+   <td>{{event("resourcetimingbufferfull")}}</td>
+   <td>{{domxref("Performance")}}</td>
+   <td style="white-space: nowrap;"><a href="https://w3c.github.io/resource-timing/#dom-performance-onresourcetimingbufferfull">Resource Timing</a></td>
+   <td>The browser's resource timing buffer is full.</td>
+  </tr>
+  <tr>
+   <td>{{event("result")}}</td>
+   <td>{{domxref("SpeechRecognitionEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>The speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app.</td>
+  </tr>
+  <tr>
+   <td>{{event("resume")}}</td>
+   <td>{{domxref("SpeechSynthesisEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>A paused utterance is resumed.</td>
+  </tr>
+  <tr>
+   <td>{{event("scroll")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-scroll">DOM L3</a></td>
+   <td>The document view or an element has been scrolled.</td>
+  </tr>
+  <tr>
+   <td>{{event("seeked")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeked">HTML5 media</a></td>
+   <td>A <em>seek</em> operation completed.</td>
+  </tr>
+  <tr>
+   <td>{{event("seeking")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeking">HTML5 media</a></td>
+   <td>A <em>seek</em> operation began.</td>
+  </tr>
+  <tr>
+   <td>{{event("select")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-select">DOM L3</a></td>
+   <td>Some text is being selected.</td>
+  </tr>
+  <tr>
+   <td>{{event("selectstart")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{ SpecName('Selection API')}}</td>
+   <td>A selection just started.</td>
+  </tr>
+  <tr>
+   <td>{{event("selectionchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{ SpecName('Selection API')}}</td>
+   <td>The selection in the document has been changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("show")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/interactive-elements.html#context-menus">HTML5</a></td>
+   <td>A contextmenu event was fired on/bubbled to an element that has a <a href="/en-US/docs/DOM/element.contextmenu">contextmenu</a> attribute</td>
+  </tr>
+  <tr>
+   <td>{{event("soundend")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>Any sound — recognisable speech or not — has stopped being detected.</td>
+  </tr>
+  <tr>
+   <td>{{event("soundstart")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>Any sound — recognisable speech or not — has been detected.</td>
+  </tr>
+  <tr>
+   <td>{{event("speechend")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>Speech recognised by the speech recognition service has stopped being detected.</td>
+  </tr>
+  <tr>
+   <td>{{event("speechstart")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>Sound that is recognised by the speech recognition service as speech has been detected.</td>
+  </tr>
+  <tr>
+   <td>{{event("stalled")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-stalled">HTML5 media</a></td>
+   <td>The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td>
+  </tr>
+  <tr>
+   <td>{{event("start_(SpeechRecognition)","start")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>The speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current <code>SpeechRecognition</code>.</td>
+  </tr>
+  <tr>
+   <td>{{event("start_(SpeechSynthesis)","start")}}</td>
+   <td>{{domxref("SpeechSynthesisEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>The utterance has begun to be spoken.</td>
+  </tr>
+  <tr>
+   <td>{{event("storage")}}</td>
+   <td>{{domxref("StorageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/webstorage/#the-storage-event">Web Storage</a></td>
+   <td>A storage area (<a href="/en-US/docs/DOM/Storage#localStorage">localStorage</a> or <a href="/en-US/docs/DOM/Storage#sessionStorage">sessionStorage</a>) has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("submit")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm">HTML5</a></td>
+   <td>A form is submitted.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/success_indexedDB">success</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>A request successfully completed.</td>
+  </tr>
+  <tr>
+   <td>{{event("suspend")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-suspend">HTML5 media</a></td>
+   <td>Media data loading has been suspended.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGAbort")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>Page loading has been stopped before the <a href="/en-US/docs/SVG">SVG</a> was loaded.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGError")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An error has occurred before the <a href="/en-US/docs/SVG">SVG</a> was loaded.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGLoad")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document has been loaded and parsed.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGResize")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document is being resized.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGScroll")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document is being scrolled.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGUnload")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document has been removed from a window or frame.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGZoom")}}</td>
+   <td>{{domxref("SVGZoomEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document is being zoomed.</td>
+  </tr>
+  <tr>
+   <td>{{event("timeout")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-timeout">XMLHttpRequest</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{event("timeupdate")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-timeupdate">HTML5 media</a></td>
+   <td>The time indicated by the <code>currentTime</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchcancel")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/">Touch Events</a></td>
+   <td>A touch point has been disrupted in an implementation-specific manners (too many touch points for example).</td>
+  </tr>
+  <tr>
+   <td>{{event("touchend")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchend-event">Touch Events</a></td>
+   <td>A touch point is removed from the touch surface.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchenter")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/">Touch Events</a> Removed</td>
+   <td>A touch point is moved onto the interactive area of an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchleave")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/">Touch Events</a> Removed</td>
+   <td>A touch point is moved off the interactive area of an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchmove")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchmove-event">Touch Events</a></td>
+   <td>A touch point is moved along the touch surface.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchstart")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchstart---------event">Touch Events</a></td>
+   <td>A touch point is placed on the touch surface.</td>
+  </tr>
+  <tr>
+   <td>{{event("transitionend")}}</td>
+   <td>{{domxref("TransitionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-transitions/#transition-events">CSS Transitions</a></td>
+   <td>A <a href="/en-US/docs/CSS/CSS_transitions">CSS transition</a> has completed.</td>
+  </tr>
+  <tr>
+   <td>{{event("unload")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-unload">DOM L3</a></td>
+   <td>The document or a dependent resource is being unloaded.</td>
+  </tr>
+  <tr>
+   <td>{{event("updateready")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/spec/offline.html">Offline</a></td>
+   <td>The resources listed in the manifest have been newly redownloaded, and the script can use <code>swapCache()</code> to switch to the new cache.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code></td>
+   <td> </td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>An attempt was made to open a database with a version number higher than its current version. A <code>versionchange</code> transaction has been created.</td>
+  </tr>
+  <tr>
+   <td>{{event("userproximity")}}</td>
+   <td>{{domxref("UserProximityEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName("Proximity Events")}}</td>
+   <td>Fresh data is available from a proximity sensor (indicates whether the nearby object is <code>near</code> the device or not).</td>
+  </tr>
+  <tr>
+   <td>{{event("voiceschanged")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>The list of {{domxref("SpeechSynthesisVoice")}} objects that would be returned by the {{domxref("SpeechSynthesis.getVoices()")}} method has changed (when the {{event("voiceschanged")}} event fires.)</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></td>
+   <td> </td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td>
+   <td>A <code>versionchange</code> transaction completed.</td>
+  </tr>
+  <tr>
+   <td>{{event("visibilitychange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/page-visibility/#sec-visibilitychange-event">Page visibility</a></td>
+   <td>The content of a tab has become visible or has been hidden.</td>
+  </tr>
+  <tr>
+   <td>{{event("volumechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-volumechange">HTML5 media</a></td>
+   <td>The volume has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("waiting")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-waiting">HTML5 media</a></td>
+   <td>Playback has stopped because of a temporary lack of data.</td>
+  </tr>
+  <tr>
+   <td>{{event("wheel")}}{{gecko_minversion_inline("17")}}</td>
+   <td>{{domxref("WheelEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-wheel">DOM L3</a></td>
+   <td>A wheel button of a pointing device is rotated in any direction.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Non-standard_events">Non-standard events</h2>
+
+<table class="standard-table" style="width: 100%;">
+ <thead>
+  <tr>
+   <th class="header" style="width: 220px;">Event Name</th>
+   <th class="header" style="width: 90px;">Event Type</th>
+   <th class="header" style="width: 100px;">Specification</th>
+   <th class="header">Fired when...</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{event("afterscriptexecute")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td><em>Mozilla Specific</em></td>
+   <td>A script has been executed.</td>
+  </tr>
+  <tr>
+   <td>{{event("beforescriptexecute")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td><em>Mozilla Specific</em></td>
+   <td>A script is about to be executed.</td>
+  </tr>
+  <tr>
+   <td>{{event("beforeinstallprompt")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td><em>Chrome specific</em></td>
+   <td>A user is prompted to save a web site to a home screen on mobile.</td>
+  </tr>
+  <tr>
+   <td>{{event("cardstatechange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.cardState")}} property changes value.</td>
+  </tr>
+  <tr>
+   <td>{{event("change")}}</td>
+   <td>{{domxref("DeviceStorageChangeEvent")}}</td>
+   <td><em>Firefox OS specific</em></td>
+   <td>This event is triggered each time a file is created, modified or deleted on a given storage area.</td>
+  </tr>
+  <tr>
+   <td>{{event("connectionInfoUpdate")}}</td>
+   <td> </td>
+   <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#176"><em>Firefox OS specific</em></a></td>
+   <td>The informations about the signal strength and the link speed have been updated.</td>
+  </tr>
+  <tr>
+   <td>{{event("cfstatechange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The call forwarding state changes.</td>
+  </tr>
+  <tr>
+   <td>{{event("datachange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.data")}} object changes values.</td>
+  </tr>
+  <tr>
+   <td>{{event("dataerror")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.data")}} object receive an error from the <abbr title="Radio Interface Layer">RIL</abbr>.</td>
+  </tr>
+  <tr>
+   <td>{{event("DOMMouseScroll")}}{{deprecated_inline}}</td>
+   <td> </td>
+   <td><em>Mozilla specific</em></td>
+   <td>The wheel button of a pointing device is rotated (detail attribute is a number of lines). (use {{event("wheel")}} instead)</td>
+  </tr>
+  <tr>
+   <td><code>dragdrop</code> {{deprecated_inline}}</td>
+   <td><code>DragEvent</code></td>
+   <td><em>Mozilla specific</em></td>
+   <td>An element is dropped (use {{event("drop")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code>dragexit</code> {{deprecated_inline}}</td>
+   <td><code>DragEvent</code></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A drag operation is being ended(use {{event("dragend")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code>draggesture</code> {{deprecated_inline}}</td>
+   <td><code>DragEvent</code></td>
+   <td><em>Mozilla specific</em></td>
+   <td>The user starts dragging an element or text selection (use {{event("dragstart")}} instead).</td>
+  </tr>
+  <tr>
+   <td>{{event("icccardlockerror")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>the {{domxref("MozMobileConnection.unlockCardLock()")}} or {{domxref("MozMobileConnection.setCardLock()")}} methods fails.</td>
+  </tr>
+  <tr>
+   <td>{{event("iccinfochange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.iccInfo")}} object changes.</td>
+  </tr>
+  <tr>
+   <td>{{event("localized")}}</td>
+   <td> </td>
+   <td><em><a href="https://github.com/fabi1cazenave/webL10n">Mozilla Specific</a></em></td>
+   <td>The page has been localized using data-l10n-* attributes.</td>
+  </tr>
+  <tr>
+   <td>{{event("mousewheel")}}{{deprecated_inline}}</td>
+   <td> </td>
+   <td><a href="http://msdn.microsoft.com/en-us/library/ie/ms536951%28v=vs.85%29.aspx"><em>IE invented</em></a></td>
+   <td>The wheel button of a pointing device is rotated.</td>
+  </tr>
+  <tr>
+   <td>{{event("MozAudioAvailable")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>The audio buffer is full and the corresponding raw samples are available.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozBeforeResize"><code>MozBeforeResize</code></a> {{obsolete_inline}}</td>
+   <td> </td>
+   <td><em>Mozilla specific</em></td>
+   <td>A window is about to be resized.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowseractivitydone")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when some activity has been completed (complete description TBD.)</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserasyncscroll")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the scroll position within a browser<code> </code>{{HTMLElement("iframe")}} changes.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowseraudioplaybackchange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when audio starts or stops playing within the browser {{HTMLElement("iframe")}} content.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsercaretstatechanged")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the text selected inside the browser {{HTMLElement("iframe")}} content changes.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserclose")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when window.close() is called within a browser {{HTMLElement("iframe")}}.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsercontextmenu")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when a browser {{HTMLElement("iframe")}} try to open a context menu.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserdocumentfirstpaint")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when a new paint occurs on any document in the browser {{HTMLElement("iframe")}}.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsererror")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when an error occured while trying to load a content within a browser iframe</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserfindchange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when a search operation is performed on the browser {{HTMLElement("iframe")}} content (see <a href="/en-US/docs/Web/API/HTMLIFrameElement#Search_methods">HTMLIFrameElement search methods</a>.)</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserfirstpaint")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the {{HTMLElement("iframe")}} paints content for the first time (this doesn't include the initial paint from <em>about:blank</em>.)</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsericonchange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the favicon of a browser iframe changes.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserlocationchange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when an browser iframe's location changes.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserloadend")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the browser iframe has finished loading all its assets.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserloadstart")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the browser iframe starts to load a new page.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsermanifestchange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when a the path to the app manifest changes, in the case of a browser {{HTMLElement("iframe")}} with an open web app embedded in it.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsermetachange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when a {{htmlelement("meta")}} elelment is added to, removed from or changed in the browser {{HTMLElement("iframe")}}'s content.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowseropensearch")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when a link to a search engine is found.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowseropentab")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when a new tab is opened within a browser {{HTMLElement("iframe")}} as a result of the user issuing a command to open a link target in a new tab (for example <kbd>ctrl</kbd>/<kbd>cmd</kbd> + click.)</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowseropenwindow")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when {{domxref("window.open()")}} is called within a browser iframe.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserresize")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the browser {{HTMLElement("iframe")}}'s window size has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserscroll")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the browser {{HTMLElement("iframe")}} content scrolls.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserscrollareachanged")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the available scrolling area  in the browser {{HTMLElement("iframe")}} changes. This can occur on resize and when the page size changes (while loading for example.)</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserscrollviewchange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when asynchronous scrolling (i.e. APCZ) starts or stops.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsersecuritychange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the SSL state changes within a browser iframe.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserselectionstatechanged")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the text selected inside the browser {{HTMLElement("iframe")}} content changes. Note that this is deprecated, and newer implementations use {{event("mozbrowsercaretstatechanged")}} instead.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsershowmodalprompt")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when {{domxref("window.alert","alert()")}}, {{domxref("window.confirm","confirm()")}} or {{domxref("window.prompt","prompt()")}} are called within a browser iframe</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsertitlechange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the document.title changes within a browser iframe.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserusernameandpasswordrequired")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when an HTTP authentification is requested.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowservisibilitychange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the visibility state of the current browser iframe {{HTMLElement("iframe")}} changes, for example due to a call to {{domxref("HTMLIFrameElement.setVisible","setVisible()")}}.</td>
+  </tr>
+  <tr>
+   <td>{{event("MozGamepadButtonDown")}}</td>
+   <td> </td>
+   <td><em>To be specified</em></td>
+   <td>A gamepad button is pressed down.</td>
+  </tr>
+  <tr>
+   <td>{{event("MozGamepadButtonUp")}}</td>
+   <td> </td>
+   <td><em>To be specified</em></td>
+   <td>A gamepad button is released.</td>
+  </tr>
+  <tr>
+   <td>{{event("MozMousePixelScroll")}} {{deprecated_inline}}</td>
+   <td> </td>
+   <td><em>Mozilla specific</em></td>
+   <td>The wheel button of a pointing device is rotated (detail attribute is a number of pixels). (use wheel instead)</td>
+  </tr>
+  <tr>
+   <td>{{event("MozOrientation")}} {{deprecated_inline}}</td>
+   <td> </td>
+   <td><em>Mozilla specific</em></td>
+   <td>Fresh data is available from an orientation sensor (see deviceorientation).</td>
+  </tr>
+  <tr>
+   <td>{{event("MozScrolledAreaChanged")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>The document view has been scrolled or resized.</td>
+  </tr>
+  <tr>
+   <td>{{event("moztimechange")}}</td>
+   <td> </td>
+   <td><em>Mozilla specific</em></td>
+   <td>The time of the device has been changed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchDown</a> {{deprecated_inline}}</td>
+   <td> </td>
+   <td><em>Mozilla specific</em></td>
+   <td>A touch point is placed on the touch surface (use touchstart instead).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchMove</a> {{deprecated_inline}}</td>
+   <td> </td>
+   <td><em>Mozilla specific</em></td>
+   <td>A touch point is moved along the touch surface (use touchmove instead).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchUp</a> {{deprecated_inline}}</td>
+   <td> </td>
+   <td><em>Mozilla specific</em></td>
+   <td>A touch point is removed from the touch surface (use touchend instead).</td>
+  </tr>
+  <tr>
+   <td>{{event("alerting")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The correspondent is being alerted (his/her phone is ringing).</td>
+  </tr>
+  <tr>
+   <td>{{event("busy")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The line of the correspondent is busy.</td>
+  </tr>
+  <tr>
+   <td>{{event("callschanged")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been added or removed from the list of current calls.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/DOM/onconnected">onconnected</a> {{event("connected")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been connected.</td>
+  </tr>
+  <tr>
+   <td>{{event("connecting")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to connect.</td>
+  </tr>
+  <tr>
+   <td>{{event("delivered")}}</td>
+   <td>{{domxref("SMSEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An SMS has been successfully delivered.</td>
+  </tr>
+  <tr>
+   <td>{{event("dialing")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The number of a correspondent has been dialed.</td>
+  </tr>
+  <tr>
+   <td>{{event("disabled")}}</td>
+   <td> </td>
+   <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#182"><em>Firefox OS specific</em></a></td>
+   <td>Wifi has been disabled on the device.</td>
+  </tr>
+  <tr>
+   <td>{{event("disconnected")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been disconnected.</td>
+  </tr>
+  <tr>
+   <td>{{event("disconnecting")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to disconnect.</td>
+  </tr>
+  <tr>
+   <td>{{event("enabled")}}</td>
+   <td> </td>
+   <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#182"><em>Firefox OS specific</em></a></td>
+   <td>Wifi has been enabled on the device.</td>
+  </tr>
+  <tr>
+   <td>{{event("error_(Telephony)","error")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An error occurred.</td>
+  </tr>
+  <tr>
+   <td>{{event("held")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been held.</td>
+  </tr>
+  <tr>
+   <td>{{event("holding")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to be held.</td>
+  </tr>
+  <tr>
+   <td>{{event("incoming")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is being received.</td>
+  </tr>
+  <tr>
+   <td>{{event("received")}}</td>
+   <td>{{domxref("SMSEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An SMS has been received.</td>
+  </tr>
+  <tr>
+   <td>{{event("resuming")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to resume.</td>
+  </tr>
+  <tr>
+   <td>{{event("sent")}}</td>
+   <td>{{domxref("SMSEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An SMS has been sent.</td>
+  </tr>
+  <tr>
+   <td>{{event("statechange")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The state of a call has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("statuschange")}}</td>
+   <td> </td>
+   <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#156"><em>Firefox OS specific</em></a></td>
+   <td>The status of the Wifi connection changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("overflow")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>An element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with <code>overflow</code> != <code>visible</code>).</td>
+  </tr>
+  <tr>
+   <td>{{event("smartcard-insert")}}</td>
+   <td> </td>
+   <td><em>Mozilla specific</em></td>
+   <td>A <a href="/en-US/docs/JavaScript_crypto">smartcard</a> has been inserted.</td>
+  </tr>
+  <tr>
+   <td>{{event("smartcard-remove")}}</td>
+   <td> </td>
+   <td><em>Mozilla specific</em></td>
+   <td>A <a href="/en-US/docs/JavaScript_crypto">smartcard</a> has been removed.</td>
+  </tr>
+  <tr>
+   <td>{{event("stkcommand")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The <abbr title="SIM Application Toolkit">STK</abbr> Proactive Command is issued from <abbr title="Integrated Circuit Card">ICC</abbr>.</td>
+  </tr>
+  <tr>
+   <td>{{event("stksessionend")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The <abbr title="SIM Application Toolkit">STK</abbr> Session is terminated by <abbr title="Integrated Circuit Card">ICC</abbr>.</td>
+  </tr>
+  <tr>
+   <td><code>text</code></td>
+   <td> </td>
+   <td><em>Mozilla Specific</em></td>
+   <td>A generic composition event occurred.</td>
+  </tr>
+  <tr>
+   <td>{{event("underflow")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>An element is no longer overflowed by its content (only works for elements styled with <code>overflow</code> != <code>visible</code>).</td>
+  </tr>
+  <tr>
+   <td><code>uploadprogress</code> {{deprecated_inline}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td><em>Mozilla Specific</em></td>
+   <td>Upload is in progress (see {{event("progress")}}).</td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{event("ussdreceived")}}</p>
+   </td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>A new <abbr title="Unstructured Supplementary Service Data">USSD</abbr> message is received</td>
+  </tr>
+  <tr>
+   <td>{{event("voicechange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.voice")}} object changes values.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Mozilla-specific_events">Mozilla-specific events</h2>
+
+<div class="note">
+<p><strong>Note:</strong> those events are never exposed to web content and can only be used in chrome content context.</p>
+</div>
+
+<h3 id="XUL_events">XUL events</h3>
+
+<table class="standard-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <th class="header" style="width: 220px;">Event Name</th>
+   <th class="header" style="width: 90px;">Event Type</th>
+   <th class="header" style="width: 100px;">Specification</th>
+   <th class="header">Fired when...</th>
+  </tr>
+  <tr>
+   <td>{{event("broadcast")}}</td>
+   <td> </td>
+   <td><a href="/en-US/docs/XUL/Tutorial/Broadcasters_and_Observers#Broadcast_event">XUL</a></td>
+   <td>An <code>observer</code> noticed a change to the attributes of a watched broadcaster.</td>
+  </tr>
+  <tr>
+   <td>{{event("CheckboxStateChange")}}</td>
+   <td> </td>
+   <td>XUL</td>
+   <td>The state of a <code>checkbox</code> has been changed either by a user action or by a script (useful for accessibility).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/close_event">close</a></td>
+   <td> </td>
+   <td>XUL</td>
+   <td>The close button of the window has been clicked.</td>
+  </tr>
+  <tr>
+   <td>{{event("command")}}</td>
+   <td> </td>
+   <td>XUL</td>
+   <td>An element has been activated.</td>
+  </tr>
+  <tr>
+   <td>{{event("commandupdate")}}</td>
+   <td> </td>
+   <td>XUL</td>
+   <td>A command update occurred on a <code>commandset</code> element.</td>
+  </tr>
+  <tr>
+   <td>{{event("DOMMenuItemActive")}}</td>
+   <td> </td>
+   <td>XUL</td>
+   <td>A menu or menuitem has been hovered or highlighted.</td>
+  </tr>
+  <tr>
+   <td>{{event("DOMMenuItemInactive")}}</td>
+   <td> </td>
+   <td><em>XUL</em></td>
+   <td>A menu or menuitem is no longer hovered or highlighted.</td>
+  </tr>
+  <tr>
+   <td>{{event("popuphidden")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip has been hidden.</td>
+  </tr>
+  <tr>
+   <td>{{event("popuphiding")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip is about to be hidden.</td>
+  </tr>
+  <tr>
+   <td>{{event("popupshowing")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip is about to become visible.</td>
+  </tr>
+  <tr>
+   <td>{{event("popupshown")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip has become visible.</td>
+  </tr>
+  <tr>
+   <td>{{event("RadioStateChange")}}</td>
+   <td> </td>
+   <td>XUL</td>
+   <td>The state of a <code>radio</code> has been changed either by a user action or by a script (useful for accessibility).</td>
+  </tr>
+  <tr>
+   <td>{{event("ValueChange")}}</td>
+   <td> </td>
+   <td>XUL</td>
+   <td>The value of an element has changed (a progress bar for example, useful for accessibility).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Add-on-specific_events">Add-on-specific events</h3>
+
+<table class="standard-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <th class="header" style="width: 220px;">Event Name</th>
+   <th class="header" style="width: 90px;">Event Type</th>
+   <th class="header" style="width: 100px;">Specification</th>
+   <th class="header">Fired when...</th>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozSwipeGesture">MozSwipeGesture</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A touch point is swiped across the touch surface</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureStart">MozMagnifyGestureStart</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points start to move away from each other.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureUpdate">MozMagnifyGestureUpdate</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points move away from each other (after a MozMagnifyGestureStart).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGesture">MozMagnifyGesture</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points moved away from each other (after a sequence of MozMagnifyGestureUpdate).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGestureStart">MozRotateGestureStart</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points start to rotate around a point.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGestureUpdate">MozRotateGestureUpdate</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points rotate around a point (after a MozRotateGestureStart).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGesture">MozRotateGesture</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points rotate around a point (after a sequence of MozRotateGestureUpdate).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozTapGesture">MozTapGesture</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points are tapped on the touch surface.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozPressTapGesture">MozPressTapGesture</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A "press-tap" gesture happened on the touch surface (first finger down, second finger down, second finger up, first finger up).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozEdgeUIGesture">MozEdgeUIGesture</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A touch point is swiped across the touch surface to invoke the edge UI (Win8 only).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozAfterPaint">MozAfterPaint</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Content has been repainted.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMPopupBlocked">DOMPopupBlocked</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A popup has been blocked</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMWindowCreated">DOMWindowCreated</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A window has been created.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMWindowClose">DOMWindowClose</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A window is about to be closed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMTitleChanged">DOMTitleChanged</a></td>
+   <td> </td>
+   <td><em>Addons specifc</em></td>
+   <td>The title of a window has changed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMLinkAdded">DOMLinkAdded</a></td>
+   <td> </td>
+   <td><em>Addons specifc</em></td>
+   <td>A link has been added a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMLinkRemoved">DOMLinkRemoved</a></td>
+   <td> </td>
+   <td><em>Addons specifc</em></td>
+   <td>A link has been removed inside from a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMMetaAdded">DOMMetaAdded</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A <code>meta</code> element has been added to a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMMetaRemoved">DOMMetaRemoved</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A <code>meta</code> element has been removed from a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMWillOpenModalDialog">DOMWillOpenModalDialog</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A modal dialog is about to open.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMModalDialogClosed">DOMModalDialogClosed</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A modal dialog has been closed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMAutoComplete">DOMAutoComplete</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>The content of an element has been auto-completed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMFrameContentLoaded">DOMFrameContentLoaded</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>The frame has finished loading (but not its dependent resources).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/AlertActive">AlertActive</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A <code><a href="/en-US/docs/XUL/notification">notification</a></code> element is shown.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/AlertClose">AlertClose</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A <code><a href="/en-US/docs/XUL/notification">notification</a></code> element is closed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/fullscreen">fullscreen</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Browser fullscreen mode has been entered or left.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/sizemodechange">sizemodechange</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Window has entered/left fullscreen mode, or has been minimized/unminimized.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozEnteredDomFullscreen">MozEnteredDomFullscreen</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td><a href="/en-US/docs/DOM/Using_full-screen_mode">DOM fullscreen</a> mode has been entered.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSWindowClosing">SSWindowClosing</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>The session store will stop tracking this window.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSTabClosing">SSTabClosing</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>The session store will stop tracking this tab.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSTabRestoring">SSTabRestoring</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A tab is about to be restored.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSTabRestored">SSTabRestored</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been restored.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSWindowStateReady">SSWindowStateReady</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A window state has switched to "ready".</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSWindowStateBusy">SSWindowStateBusy</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A window state has switched to "busy".</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/tabviewsearchenabled">tabviewsearchenabled</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>The search feature of Panorama has been activated</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/tabviewsearchdisabled">tabviewsearchdisabled</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>The search feature of Panorama has been deactivated</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/tabviewframeinitialized">tabviewframeinitialized</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>The frame container of Panorama has been initialized</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/tabviewshown">tabviewshown</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>The Panorama tab has been shown</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/tabviewhidden">tabviewhidden</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>The Panorama tab has been hidden</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabOpen">TabOpen</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been opened.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabClose">TabClose</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been closed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabSelect">TabSelect</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been selected.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabShow">TabShow</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been shown.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabHide">TabHide</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been hidden.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabPinned">TabPinned</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been pinned.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabUnpinned">TabUnpinned</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been unpinned.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Developer_tool-specific_events">Developer tool-specific events</h3>
+
+<table class="standard-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <th class="header" style="width: 220px;">Event Name</th>
+   <th class="header" style="width: 90px;">Event Type</th>
+   <th class="header" style="width: 100px;">Specification</th>
+   <th class="header">Fired when...</th>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewRefreshed">CssRuleViewRefreshed</a></td>
+   <td> </td>
+   <td><em>devtools specific</em></td>
+   <td>The "Rules" view of the style inspector has been updated.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewChanged">CssRuleViewChanged</a></td>
+   <td> </td>
+   <td><em>devtools specific</em></td>
+   <td>The "Rules" view of the style inspector has been changed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewCSSLinkClicked">CssRuleViewCSSLinkClicked</a></td>
+   <td> </td>
+   <td><em>devtools specific</em></td>
+   <td>A link to a CSS file has been clicked in the "Rules" view of the style inspector.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Categories">Categories</h2>
+
+<h3 id="Animation_events">Animation events</h3>
+
+<p>{{event("animationend")}}, {{event("animationiteration")}}, {{event("animationstart")}}, {{event("beginEvent")}}, {{event("endEvent")}}, {{event("repeatEvent")}}</p>
+
+<h3 id="Battery_events">Battery events</h3>
+
+<p>{{event("chargingchange")}} {{event("chargingtimechange")}}, {{event("dischargingtimechange")}} {{event("levelchange")}}</p>
+
+<h3 id="Call_events">Call events</h3>
+
+<p>{{event("alerting")}}, {{event("busy")}}, {{event("callschanged")}} {{event("cfstatechange")}}, {{event("connected")}}, {{event("connecting")}}, {{event("dialing")}}, {{event("disconnected")}}, {{event("disconnecting")}}, {{event("error_(Telephony)","error")}}, {{event("held")}}, {{event("holding")}}, {{event("incoming")}}, {{event("resuming")}}, {{event("statechange")}}, {{event("voicechange")}}</p>
+
+<h3 id="CSS_events">CSS events</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/CssRuleViewRefreshed">CssRuleViewRefreshed</a>, <a href="/en-US/docs/Web/Reference/Events/CssRuleViewChanged">CssRuleViewChanged</a>, <a href="/en-US/docs/Web/Reference/Events/CssRuleViewCSSLinkClicked">CssRuleViewCSSLinkClicked</a>, {{event("transitionend")}}</p>
+
+<h3 id="Database_events">Database events</h3>
+
+<p><code><a href="/en-US/docs/Web/Reference/Events/abort_indexedDB">abort</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/complete_indexedDB">complete</a></code>, {{event("error")}} (<a href="/en-US/docs/Web/Reference/Events/error">link</a>), <code><a href="/en-US/docs/Web/Reference/Events/success_indexedDB">success</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></p>
+
+<h3 id="Document_events">Document events</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/DOMLinkAdded">DOMLinkAdded</a>, <a href="/en-US/docs/Web/Reference/Events/DOMLinkRemoved">DOMLinkRemoved</a>, <a href="/en-US/docs/Web/Reference/Events/DOMMetaAdded">DOMMetaAdded</a>, <a href="/en-US/docs/Web/Reference/Events/DOMMetaRemoved">DOMMetaRemoved</a>, <a href="/en-US/docs/Web/Reference/Events/DOMWillOpenModalDialog">DOMWillOpenModalDialog</a>, <a href="/en-US/docs/Web/Reference/Events/DOMModalDialogClosed">DOMModalDialogClosed</a>, {{event("unload")}}</p>
+
+<h3 id="DOM_mutation_events">DOM mutation events</h3>
+
+<p><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttributeNameChanged</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMAttrModified</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code>, {{event("DOMContentLoaded")}}, <code><a href="/en-US/docs/DOM/Mutation_events">DOMElementNameChanged</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInserted</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemoved</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMSubtreeModified</a></code></p>
+
+<h3 id="Drag_events">Drag events</h3>
+
+<p>{{event("drag")}}, <code>dragdrop</code>, {{event("dragend")}}, {{event("dragenter")}}, <code>dragexit</code>, <code>draggesture</code>, {{event("dragleave")}}, {{event("dragover")}}, {{event("dragstart")}}, {{event("drop")}}</p>
+
+<h3 id="Element_events">Element events</h3>
+
+<p>{{event("invalid")}}, {{event("overflow")}}, {{event("underflow")}}, <a href="/en-US/docs/Web/Reference/Events/DOMAutoComplete">DOMAutoComplete</a>, {{event("command")}}, {{event("commandupdate")}}</p>
+
+<h3 id="Focus_events">Focus events</h3>
+
+<p>{{event("blur")}}, {{event("change")}}, <code>DOMFocusIn</code>, <code>DOMFocusOut</code>, {{event("focus")}}, {{event("focusin")}}, {{event("focusout")}}</p>
+
+<h3 id="Form_events">Form events</h3>
+
+<p>{{event("reset")}}, {{event("submit")}}</p>
+
+<h3 id="Frame_events">Frame events</h3>
+
+<p>{{event("mozbrowserclose")}}, {{event("mozbrowsercontextmenu")}}, {{event("mozbrowsererror")}}, {{event("mozbrowsericonchange")}}, {{event("mozbrowserlocationchange")}}, {{event("mozbrowserloadend")}}, {{event("mozbrowserloadstart")}}, {{event("mozbrowseropenwindow")}}, {{event("mozbrowsersecuritychange")}}, {{event("mozbrowsershowmodalprompt")}} (<a href="/en-US/docs/Web/Reference/Events/mozbrowsershowmodalprompt">link</a>), {{event("mozbrowsertitlechange")}}, <a href="/en-US/docs/Web/Reference/Events/DOMFrameContentLoaded">DOMFrameContentLoaded</a></p>
+
+<h3 id="Input_device_events">Input device events</h3>
+
+<p>{{event("click")}}, {{event("contextmenu")}}, {{event("DOMMouseScroll")}}, {{event("dblclick")}}, {{event("gamepadconnected")}}, {{event("gamepaddisconnected")}}, {{event("keydown")}}, {{event("keypress")}}, {{event("keyup")}}, {{event("MozGamepadButtonDown")}}, {{event("MozGamepadButtonUp")}}, {{event("mousedown")}}, {{event("mouseenter")}}, {{event("mouseleave")}}, {{event("mousemove")}}, {{event("mouseout")}}, {{event("mouseover")}}, {{event("mouseup")}}, {{event("mousewheel")}}, {{event("MozMousePixelScroll")}}, {{event("pointerlockchange")}}, {{event("pointerlockerror")}},{{event("wheel")}}</p>
+
+<h3 id="Media_events">Media events</h3>
+
+<p>{{event("audioprocess")}}, {{event("canplay")}}, {{event("canplaythrough")}}, {{event("durationchange")}}, {{event("emptied")}}, {{event("ended")}}, {{event("ended_(Web_Audio)", "ended")}}, {{event("loadeddata")}}, {{event("loadedmetadata")}}, {{event("MozAudioAvailable")}}, {{event("pause")}}, {{event("play")}}, {{event("playing")}}, {{event("ratechange")}}, {{event("seeked")}}, {{event("seeking")}}, {{event("stalled")}}, {{event("suspend")}}, {{event("timeupdate")}}, {{event("volumechange")}}, {{event("waiting")}}, {{event("complete")}}</p>
+
+<h3 id="Menu_events">Menu events</h3>
+
+<p>{{event("DOMMenuItemActive")}}, {{event("DOMMenuItemInactive")}}</p>
+
+<h3 id="Network_events">Network events</h3>
+
+<p>{{event("datachange")}}, {{event("dataerror")}}, {{event("disabled")}}, {{event("enabled")}}, {{event("offline")}}, {{event("online")}}, {{event("statuschange")}}, {{event("connectionInfoUpdate")}},</p>
+
+<h3 id="Notification_events">Notification events</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/AlertActive">AlertActive</a>, <a href="/en-US/docs/Web/Reference/Events/AlertClose">AlertClose</a></p>
+
+<h3 id="Pointer_events">Pointer events</h3>
+
+<p>{{event("pointerover")}}, {{event("pointerenter")}}, {{event("pointerdown")}}, {{event("pointermove")}}, {{event("pointerup")}}, {{event("pointercancel")}}, {{event("pointerout")}}, {{event("pointerleave")}}, {{event("gotpointercapture")}}, {{event("lostpointercapture")}}</p>
+
+<h3 id="Popup_events">Popup events</h3>
+
+<p>{{event("popuphidden")}}, {{event("popuphiding")}}, {{event("popupshowing")}}, {{event("popupshown")}}, <a href="/en-US/docs/Web/Reference/Events/DOMPopupBlocked">DOMPopupBlocked</a></p>
+
+<h3 id="Printing_events">Printing events</h3>
+
+<p>{{event("afterprint")}}, {{event("beforeprint")}}</p>
+
+<h3 id="Progress_events">Progress events</h3>
+
+<p><code><a href="/en-US/docs/Web/Reference/Events/abort_(ProgressEvent)">abort</a></code>, {{event("error")}}, <code><a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)">load</a></code>, {{event("loadend")}}, {{event("loadstart")}}, {{event("progress")}}, <code><a href="/en-US/docs/Web/Reference/Events/progress_(appcache_event)">progress</a></code>, {{event("timeout")}}, <code>uploadprogress</code></p>
+
+<h3 id="Resource_events">Resource events</h3>
+
+<p>{{event("abort")}}, {{event("cached")}}, {{event("error")}}, {{event("load")}}</p>
+
+<h3 id="Script_events">Script events</h3>
+
+<p>{{event("afterscriptexecute")}}, {{event("beforescriptexecute")}}</p>
+
+<h3 id="Sensor_events">Sensor events</h3>
+
+<p>{{event("compassneedscalibration")}}, {{event("devicelight")}}, {{event("devicemotion")}}, {{event("deviceorientation")}}, {{event("deviceproximity")}}, {{event("MozOrientation")}}, {{event("orientationchange")}}, {{event("userproximity")}}</p>
+
+<h3 id="Session_history_events">Session history events</h3>
+
+<p>{{event("pagehide")}}, {{event("pageshow")}}, {{event("popstate")}}</p>
+
+<h3 id="Smartcard_events">Smartcard events</h3>
+
+<p>{{event("icccardlockerror")}}, {{event("iccinfochange")}}, {{event("smartcard-insert")}}, {{event("smartcard-remove")}}, {{event("stkcommand")}}, {{event("stksessionend")}}, {{event("cardstatechange")}}</p>
+
+<h3 id="SMS_and_USSD_events">SMS and USSD events</h3>
+
+<p>{{event("delivered")}}, {{event("received")}}, {{event("sent")}}, {{event("ussdreceived")}}</p>
+
+<h3 id="Storage_events">Storage events</h3>
+
+<p>{{event("change")}} (see {{anch("Non-standard events")}}), {{event("storage")}}</p>
+
+<h3 id="SVG_events">SVG events</h3>
+
+<p>{{event("SVGAbort")}}, {{event("SVGError")}}, {{event("SVGLoad")}}, {{event("SVGResize")}}, {{event("SVGScroll")}}, {{event("SVGUnload")}}, {{event("SVGZoom")}}</p>
+
+<h3 id="Tab_events">Tab events</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/tabviewsearchenabled">tabviewsearchenabled</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewsearchdisabled">tabviewsearchdisabled</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewframeinitialized">tabviewframeinitialized</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewshown">tabviewshown</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewhidden">tabviewhidden</a>, <a href="/en-US/docs/Web/Reference/Events/TabOpen">TabOpen</a>, <a href="/en-US/docs/Web/Reference/Events/TabClose">TabClose</a>, <a href="/en-US/docs/Web/Reference/Events/TabSelect">TabSelect</a>, <a href="/en-US/docs/Web/Reference/Events/TabShow">TabShow</a>, <a href="/en-US/docs/Web/Reference/Events/TabHide">TabHide</a>, <a href="/en-US/docs/Web/Reference/Events/TabPinned">TabPinned</a>, <a href="/en-US/docs/Web/Reference/Events/TabUnpinned">TabUnpinned</a>, <a href="/en-US/docs/Web/Reference/Events/SSTabClosing">SSTabClosing</a>, <a href="/en-US/docs/Web/Reference/Events/SSTabRestoring">SSTabRestoring</a>, <a href="/en-US/docs/Web/Reference/Events/SSTabRestored">SSTabRestored</a>, {{event("visibilitychange")}}</p>
+
+<h3 id="Text_events">Text events</h3>
+
+<p>{{event("compositionend")}}, {{event("compositionstart")}}, {{event("compositionupdate")}}, {{event("copy")}}, {{event("cut")}}, {{event("paste")}}, {{event("select")}}, <code>text</code></p>
+
+<h3 id="Touch_events">Touch events</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/MozEdgeUIGesture">MozEdgeUIGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGesture">MozMagnifyGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureStart">MozMagnifyGestureStart</a>, <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureUpdate">MozMagnifyGestureUpdate</a>, <a href="/en-US/docs/Web/Reference/Events/MozPressTapGesture">MozPressTapGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozRotateGesture">MozRotateGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozRotateGestureStart">MozRotateGestureStart</a>, <a href="/en-US/docs/Web/Reference/Events/MozRotateGestureUpdate">MozRotateGestureUpdate</a>, <a href="/en-US/docs/Web/Reference/Events/MozSwipeGesture">MozSwipeGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozTapGesture">MozTapGesture</a>, <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchDown</a>, <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchMove</a>, <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchUp</a>, {{event("touchcancel")}}, {{event("touchend")}}, {{event("touchenter")}}, {{event("touchleave")}}, {{event("touchmove")}}, {{event("touchstart")}}</p>
+
+<h3 id="Update_events">Update events</h3>
+
+<p>{{event("checking")}}, {{event("downloading")}}, {{event("error")}}, {{event("noupdate")}}, {{event("obsolete")}}, {{event("updateready")}}</p>
+
+<h3 id="Value_change_events">Value change events</h3>
+
+<p>{{event("broadcast")}}, {{event("CheckboxStateChange")}}, {{event("hashchange")}}, {{event("input")}}, {{event("RadioStateChange")}}, {{event("readystatechange")}}, {{event("ValueChange")}}</p>
+
+<h3 id="View_events">View events</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/fullscreen">fullscreen</a>, {{event("fullscreenchange")}}, {{event("fullscreenerror")}}, <a href="/en-US/docs/Web/Reference/Events/MozEnteredDomFullscreen">MozEnteredDomFullscreen</a>, {{event("MozScrolledAreaChanged")}}, {{event("resize")}}, {{event("scroll")}}, <a href="/en-US/docs/Web/Reference/Events/sizemodechange">sizemodechange</a></p>
+
+<h3 id="Websocket_events">Websocket events</h3>
+
+<p><code><a href="/en-US/docs/Web/Reference/Events/close_websocket">close</a></code>, {{event("error")}}, <code><a href="/en-US/docs/Web/Reference/Events/message_websocket">message</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/open_websocket">open</a></code></p>
+
+<h3 id="Window_events">Window events</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/DOMWindowCreated">DOMWindowCreated</a>, <a href="/en-US/docs/Web/Reference/Events/DOMWindowClose">DOMWindowClose</a>, <a href="/en-US/docs/Web/Reference/Events/DOMTitleChanged">DOMTitleChanged</a>, <a href="/en-US/docs/Web/Reference/Events/MozBeforeResize">MozBeforeResize</a> {{obsolete_inline}}, <a href="/en-US/docs/Web/Reference/Events/SSWindowClosing">SSWindowClosing</a>, <a href="/en-US/docs/Web/Reference/Events/SSWindowStateReady">SSWindowStateReady</a>, <a href="/en-US/docs/Web/Reference/Events/SSWindowStateBusy">SSWindowStateBusy</a>, <a href="/en-US/docs/Web/Reference/Events/close_event">close</a></p>
+
+<h3 id="Uncategorized_events">Uncategorized events</h3>
+
+<p>{{event("beforeunload")}}, {{event("localized")}}, <code><a href="/en-US/docs/Web/Reference/Events/message_webworker">message</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/message_webmessaging">message</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/message_serversentevents">message</a></code>, <a href="/en-US/docs/Web/Reference/Events/MozAfterPaint">MozAfterPaint</a>, {{event("moztimechange")}}, <code><a href="/en-US/docs/Web/Reference/Events/open_serversentevents">open</a></code>, {{event("show")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Event")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Events">Event developer guide</a></li>
+</ul>
diff --git a/files/uk/web/guide/css/getting_started/index.html b/files/uk/web/guide/css/getting_started/index.html
new file mode 100644
index 0000000000..d273ec9d69
--- /dev/null
+++ b/files/uk/web/guide/css/getting_started/index.html
@@ -0,0 +1,46 @@
+---
+title: Getting started with CSS
+slug: Web/Guide/CSS/Getting_started
+translation_of: Learn/CSS/First_steps
+---
+<p><span class="seoSummary">Це керівництво ознайомить Вас з основними функціями та мовою (синтаксисом) каскадних таблиць стилів (<a href="/uk/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS"><strong>Cascading Style Sheets</strong></a> - CSS). Ви використовуєте CSS, щоб змінити зовнішній вигляд структурованого документу, такого як веб-сторінка. Урок також включає приклади вправ, які ви можете спробувати виконати на власному комп’ютері, щоб побачити ефекти CSS і функції, що реалізуються в сучасних браузерах.</span></p>
+
+<p>Посібник призначений для початківців і будь-кого, хто б хотів повторити основи CSS. Якщо ви маєте більше досвіду з CSS, основна сторінка CSS містить <a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS">списки</a> більш просуненого рівня.</p>
+
+<nav class="fancyTOC"><a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/What_is_CSS" rel="next" title="Chapter 'What is CSS' of the CSS tutorial">що таке CSS</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="Chapter 'Why use CSS' of the CSS tutorial">Навіщо використовувати CSS</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/How_CSS_works" title="Chapter 'Як працює CSS' of the CSS tutorial">Як працює CSS</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="Chapter 'Cascading and inheritance' of the CSS tutorial">каскадування та успадковування</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Selectors" title="Chapter 'Selectors' of the CSS tutorial">Селектори</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="Chapter 'Readable_CSS' of the CSS tutorial">Читабельний CSS</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">Текстові стилі</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Color" title="Chapter 'Color' of the CSS tutorial">Колір</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">Контент</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Lists" title="Chapter 'Lists' of the CSS tutorial">Списки</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">Boxes</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">Layout</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Tables" title="Chapter 'Tables' of the CSS tutorial">Таблиці</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">Медіа</a></nav>
+
+<h2 id="Що_потрібно_для_початку_роботи">Що потрібно для початку роботи</h2>
+
+<ul>
+ <li>Текстовий редактор</li>
+ <li>Сучасний браузер</li>
+ <li>Певний досвід роботи з текстовим редактором і браузером</li>
+</ul>
+
+<p>Не зважаючи на те, що вправи можуть допомогти тобі в навчанні, ти не зобов’язаний хз виконувати. Ти можеш просто читати керівництво та розглядати зображення.</p>
+
+<p><strong>На замітку:</strong> Керівництво розглядає тему як CSS працює з кольором. Буде простіше завершити ці секції з кольоровим дисплеєм та нормальним кольоровим зором.  </p>
+
+<h2 id="Як_використовувати_це_керівництво">Як використовувати це керівництво</h2>
+
+<p>В опрацюванні цього керівництва читай сторінки уважно і в визначеній послідовності. Якщо ти пропустиш сторінку, надалі може бути важко зрозуміти наступні сторінки підручника. </p>
+
+<h3 id="Частина_І_основи_CSS">Частина І: основи CSS</h3>
+
+<p>На кожній сторінці переглянь відділ <em>Інформація,</em> щоб зрозуміти як працює CSS. Спробуй  секцію <em>Дія,</em> щоб випробувати CSS на власному комп’ютері.</p>
+
+<p>To test your understanding, take the challenge at the end of each page. Solutions to the challenges are linked under the challenges, so you don't need to look at them if you don't want to.</p>
+
+<p>Щоб глибше зрозуміти CSS, прочитай інформацію, яку ти знайдеш в блоці з заголовком <em>Детальніше</em>. Використай лінки у них, щоб знайти довідникову інформацію про CSS.</p>
+
+<h3 id="Частина_II_Сфера_CSS">Частина II: Сфера CSS</h3>
+
+<p>Друга частина підручника надає приклади, які показують сферу CSS з іншими веб- і Mozilla технологіями.</p>
+
+<ol>
+ <li><a href="/uk/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></li>
+ <li><a href="/uk/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS" title="en/CSS/Getting_Started/SVG_graphics">SVG-графіка</a></li>
+ <li><a href="/uk/docs/Web/Guide/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">XML дані</a></li>
+ <li><a href="/uk/docs/Web/Guide/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL сполучення</a></li>
+ <li><a href="/uk/docs/Web/Guide/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">Користувацбкі інтерфейси ХUL</a></li>
+</ol>
diff --git a/files/uk/web/guide/css/getting_started/what_is_css/index.html b/files/uk/web/guide/css/getting_started/what_is_css/index.html
new file mode 100644
index 0000000000..dfaba8a76d
--- /dev/null
+++ b/files/uk/web/guide/css/getting_started/what_is_css/index.html
@@ -0,0 +1,113 @@
+---
+title: What is CSS?
+slug: Web/Guide/CSS/Getting_started/What_is_CSS
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<div>{{CSSTutorialTOC}}</div>
+
+<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started", "Getting started")}} <span class="seoSummary">This first section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en/CSS/Getting Started">CSS Getting Started</a> tutorial briefly explains Cascading Style Sheets (CSS). You'll also create a simple document to use for CSS exercises in subsequent sections.</span></p>
+
+<h2 class="clearLeft" id="Інформація_Що_таке_CSS">Інформація: Що таке CSS?</h2>
+
+<p>Каскадні таблиці стилів (англ. - <em>Cascading Style Sheets </em> <dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>) - мова, що визначає як вміст сторінки буде візуально офрмлений та представлений користувачам. Складові документу ж описують мовою розмітки, на зразок <a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML">HTML</a>.</p>
+
+<p><em>Документ</em> являє собою інформацію, структуровану для подання з використанням <em>мови розмітки</em>.</p>
+
+<p><em>Presenting</em> a document to a user means converting it into a usable form for your audience. Browsers, like Firefox, Chrome or Internet Explorer, are designed to present documents visually, for example, on a computer screen, projector or printer.</p>
+
+<div class="tuto_example">
+<p><strong>Приклади</strong></p>
+
+<ul>
+ <li>A web page like the one you are reading is a document.<br>
+  The information that you see in a web page is usually structured using the markup language HTML (HyperText Markup Language).</li>
+ <li>Dialogs in an application, also called modal windows, are often documents.<br>
+  Such dialogs may also be structured using a markup language, like XUL (XML User Interface Language), which you will find in some Mozilla applications.</li>
+</ul>
+</div>
+
+<p>In this tutorial, boxes captioned <strong>Детальніше</strong> like the one below contain optional information and links to more resources on a concept or topic covered in a section. Read them as you see them, follow the links, or skip these boxes and return to read them later.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">Детальніше</div>
+
+<p>Документ- це не те ж саме, що і файл. Втім, ти можеш зберегти документ у файлі.</p>
+
+<p>Документ, який ти зараз читаєш не збережений окремим файлом. Коли твій веб-браузер переходить на цю сторінку, сервер робить запит до бази данних та генерує документ, зібравши частини документу з різних фалів. Однак, в цьому уроці ти будеш працювати також і з  документами, збереженими у файлах.</p>
+
+<p>Більше інформації про документи та мови розміток ти можеш знайти в фнших розділах цього веб-сайту:</p>
+
+<table style="background-color: inherit; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a></td>
+   <td>для веб-сторінок</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/XML" title="/en-US/docs/XML">XML</a></td>
+   <td>для структурованих документів в загальному</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/SVG" title="/en-US/docs/Web/SVG">SVG</a></td>
+   <td>для графіки</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a></td>
+   <td>для інтерфейсів користувачів у браузері Mozilla</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>У другій частині ціього навчального посібника ти знайдеш приклади цих мов розміток.</p>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">Детальніше</div>
+
+<p>In formal CSS terminology, the program that presents a document to a user is called a <em>user agent</em> (UA). A browser is just one kind of UA. CSS is not just for browsers or visual presentation, but for Part I of this tutorial, you'll only work with CSS in a browser.</p>
+
+<p>For formal definitions of terminology relating to CSS, see <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definitions</a> in the CSS Specification from the World Wide Web Consortium (W3C), an international community that sets open standards for the web.</p>
+</div>
+
+<h2 id="До_роботи_Створення_документу">До роботи: Створення документу</h2>
+
+<ol>
+ <li>Створи нову паку на своєму комп'ютері для того, щоб зберігати та упорядковувати вправи з наших уроків.</li>
+ <li>Open your text editor and create a new text file. This file will contain the document for the next few tutorial exercises.</li>
+ <li>Copy and paste the HTML shown below. Save the file using the name <code>doc1.html</code>
+  <pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;/head&gt;
+
+  &lt;body&gt;
+    &lt;p&gt;
+      &lt;strong&gt;C&lt;/strong&gt;ascading
+      &lt;strong&gt;S&lt;/strong&gt;tyle
+      &lt;strong&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+  <p>{{ LiveSampleLink('Action_Creating_a_document', 'View above Demo') }}</p>
+ </li>
+ <li>Open a new tab or a new window in your browser, then open the file you just created.
+  <p>You should see the text with the initial letters bold, like this:</p>
+
+  <table style="border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+
+  <p>What you see in your browser might not look exactly the same because of settings in your browser and in this wiki. Some differences in the font, spacing and colors are not important.</p>
+ </li>
+</ol>
+
+<h2 id="Що_далі">Що далі?</h2>
+
+<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Your document does not yet use CSS. In the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS">next section</a> you'll use CSS to style your document.</p>
diff --git a/files/uk/web/guide/html/content_categories/index.html b/files/uk/web/guide/html/content_categories/index.html
new file mode 100644
index 0000000000..4ec3c5ecbc
--- /dev/null
+++ b/files/uk/web/guide/html/content_categories/index.html
@@ -0,0 +1,168 @@
+---
+title: Категорії вмісту
+slug: Web/Guide/HTML/Content_categories
+tags:
+  - Веб
+  - Навчальний
+  - ПотребуєОновлення
+  - Просунутий
+translation_of: Web/Guide/HTML/Content_categories
+---
+<p><span class="seoSummary">Кожен елемент HTML має дотримуватись правил, що визначають який тип вмісту він може мати. Такі правила згруповано у моделі вмісту, котрі є такими самими по відношенню до кількох елементів. Кожен елемент HTML належить до жодного, одного, або кількох моделей вмісту, кожна з котрих визначає правила, котрих має дотримуватись вміст елемента у документі, написаного за допомогою HTML.</span></p>
+
+<p>Існує три типи категорій вмісту:</p>
+
+<ul>
+ <li>Основні категорії вмісту, котрі визначають основні правила, котрими користується велика кількість елементів;</li>
+ <li>Категорії вмісту для форм, котрі визначають правила вмісту для елементів в межах форм;</li>
+ <li>Особливі категорії вмісту, котрі описують рідкісні категорії, що використовуються лише кількома елементами, інколи лише у специфічних випадках.</li>
+</ul>
+
+<div class="note">
+<p><strong>Примітка: </strong><span id="result_box" lang="uk"><span>Більш докладне обговорення цих категорій вмісту та їх порівняльних функцій виходить за межі цієї статті;</span> <span>для цього ви можете прочитати </span></span><a href="https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content">відповідні частини специфікації HTML.</a></p>
+</div>
+
+<div style="width: 50%;"><a href="/@api/deki/files/6244/=Content_categories_venn.png" title="Content_categories_venn.png"><img alt="Content_categories_venn.png" class="default internal" src="/@api/deki/files/6244/=Content_categories_venn.png?size=webview" style="height: 200px; width: 350px;"></a></div>
+
+<h2 id="Основні_категорії_вмісту">Основні категорії вмісту</h2>
+
+<h3 id="Вміст_метаданих">Вміст метаданих</h3>
+
+<p>Елементи, що належать до категорії вмісту метаданих, змінюють презентацію або поведінку цілого документу, налаштовують посилання на інші документи, або ж передають несуть, незалежну інформацію.</p>
+
+<p>Елементи, що належать до цієї категорії {{HTMLElement("base")}}, {{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} і {{HTMLElement("title")}}.</p>
+
+<h3 id="Потоковий_вміст">Потоковий вміст</h3>
+
+<p>До елементів, що належать до потокового вмісту, типовим є текстовий або ж вбудований вміст. Такими елементами є: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} і текст.</p>
+
+<p>Є іще кілька елементів, що належать до цієї категорії, та лише за певних умов:</p>
+
+<ul>
+ <li>{{HTMLElement("area")}}, якщо він є нащадком елемента {{HTMLElement("map")}}</li>
+ <li>{{HTMLElement("link")}}, якщо присутній атрибут <a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a></li>
+ <li>{{HTMLElement("meta")}}, якщо присутній атрибут <a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a></li>
+ <li>{{HTMLElement("style")}}, якщо присутній атрибут {{htmlattrxref("scoped","style")}}</li>
+</ul>
+
+<h3 id="Секційний_вміст">Секційний вміст</h3>
+
+<p>Елементи, що належать до секційної моделі вмісту, створюють <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">секцію в заданому документі</a>, котра визначає межі елементів у {{HTMLElement("header")}}, {{HTMLElement("footer")}} і <a href="#Heading_content" title="#heading content">вмісту заголовків</a>.</p>
+
+<p>Елементами, котрі належать цій категорії є: {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} та {{HTMLElement("section")}}. </p>
+
+<div class="note">
+<p><em>Примітка: </em> Не сплутайте цю модель вмісту з <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#sectioning_root" title="Sections and Outlines of an HTML5 document#sectioning root">кореневою секційною</a> категорією, котра ізолює свій вміст від загального обрису документу.</p>
+</div>
+
+<h3 id="Вміст_заголовку">Вміст заголовку</h3>
+
+<p>Контент заголовку визначає назву секції, котра явно визначена елементом <a href="#Sectioning_content" title="#sectioning content">секційного вмісту</a> або ж неявно визначена самим елементом вмісту заголовку.</p>
+
+<p>Елементами, що належать до заданої категорії є: {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} та {{HTMLElement("hgroup")}}.</p>
+
+<div class="note">
+<p><em>Примітка:</em> попри те, що {{HTMLElement("header")}} елемент швидше за все матиме "вміст заголовку", сам він не відноситься до елементів вмісту заголовку.</p>
+</div>
+
+<h3 id="Фразовий_вміст">Фразовий вміст</h3>
+
+<p>Фразовий вміст визначає текст та розмітку, котру він вміщує. Фразовий вміст формує абзаци.</p>
+
+<p>Елементами, що належать до цієї категорії є {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} також чистий текст (в тому числі котрий складається з пробілів).</p>
+
+<p>Іще кілька елементів, що належать до цієї категорії, та лише за певних умов:</p>
+
+<ul>
+ <li>{{HTMLElement("a")}}, якщо вміщує лише фразовий вміст</li>
+ <li>{{HTMLElement("area")}}, якщо є нащадком елемента {{HTMLElement("map")}}</li>
+ <li>{{HTMLElement("del")}}, якщо вміщує лише фразовий вміст</li>
+ <li>{{HTMLElement("ins")}}, якщо вміщує лише фразовий вміст</li>
+ <li>{{HTMLElement("link")}}, якщо присутній атрибут <a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a></li>
+ <li>{{HTMLElement("map")}}, якщо вміщує лише фразовий вміст</li>
+ <li>{{HTMLElement("meta")}}, якщо присутній атрибут <a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a></li>
+</ul>
+
+<h3 id="Вбудований_вміст">Вбудований вміст</h3>
+
+<p>Вбудований вміст імпортує інші ресурси, або ж вставляє вміст з інших мов розмітки або простору імен у документ. Елементи, що належать до цієї категорії включають: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, {{HTMLElement("video")}}.</p>
+
+<h3 id="Інтерактивний_вміст">Інтерактивний вміст</h3>
+
+<p>Інтерактивний вміст включає елементи, котрі спроектовано виключно для взаємодії з користувачем. Елементи, котрі належать до цієї категорії: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</p>
+
+<p>Декотрі елементи належать до цієї категорії лише за певних обставин:</p>
+
+<ul>
+ <li>{{HTMLElement("audio")}}, якщо присутній атрибут {{htmlattrxref("controls", "audio")}}</li>
+ <li>{{HTMLElement("img")}}, якщо присутній атрибут {{htmlattrxref("usemap", "img")}}</li>
+ <li>{{HTMLElement("input")}}, якщо атрибут {{htmlattrxref("type", "input")}} не у прихованому стані</li>
+ <li>{{HTMLElement("menu")}}, якщо атрибут {{htmlattrxref("type", "menu")}} у стані "панелі інструментів"</li>
+ <li>{{HTMLElement("object")}}, якщо присутній атрибут {{htmlattrxref("usemap", "object")}}</li>
+ <li>{{HTMLElement("video")}}, якщо присутній атрибут {{htmlattrxref("controls", "video")}}</li>
+</ul>
+
+<h3 id="Видимий_вміст">Видимий вміст</h3>
+
+<p>Вміст є видимим коли він не пустий і не прихований. Елементи чиєю моделлю є потоковий міст або фразовий вміст, повинні мати принаймні один вузол видимого вмісту.</p>
+
+<h3 id="Вміст_форм">Вміст форм</h3>
+
+<p>Вміст форм вміщує елементи, котрі мають власника форми, визначеного атрибутом <strong>form</strong>. Власником форми є елемент {{HTMLElement("form")}}, або ж елемент, чий ідентифікатор (id), вказано у атрибуті <strong>form</strong>.</p>
+
+<ul>
+ <li>{{HTMLElement("button")}}</li>
+ <li>{{HTMLElement("fieldset")}}</li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("keygen")}}</li>
+ <li>{{HTMLElement("label")}}</li>
+ <li>{{HTMLElement("meter")}}</li>
+ <li>{{HTMLElement("object")}}</li>
+ <li>{{HTMLElement("output")}}</li>
+ <li>{{HTMLElement("progress")}}</li>
+ <li>{{HTMLElement("select")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
+
+<p>  <span class="short_text" id="result_box" lang="uk"><span>Ця категорія містить кілька підкатегорій</span></span>:</p>
+
+<dl>
+ <dt><a name="Form_listed">listed</a></dt>
+ <dd><span class="short_text" id="result_box" lang="uk"><span>Елементи, перелічені в</span></span> <a href="/en-US/docs/DOM/form.elements" title="DOM/form.elements">form.elements</a> та fieldset.elements IDL колекціях. Містять {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, та {{HTMLElement("textarea")}}.</dd>
+ <dt><a name="Form_labelable">labelable</a></dt>
+ <dd><span class="short_text" id="result_box" lang="uk"><span>Елементи, що можна пов'язати</span></span> з {{HTMLElement("label")}} елементами. Містять {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, та {{HTMLElement("textarea")}}.</dd>
+ <dt><a name="Form_submittable">submittable</a></dt>
+ <dd><span id="result_box" lang="uk"><span>Елементи, які можуть бути використані для побудови набору даних форми, коли відправляється форма</span></span>. Містять {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, та {{HTMLElement("textarea")}}.</dd>
+ <dt><a name="Form_resettable">resettable</a></dt>
+ <dd><span id="result_box" lang="uk"><span>Елементи, які можуть бути скинуті при зміні форми.</span></span> Містять {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}}, та {{HTMLElement("textarea")}}.</dd>
+</dl>
+
+<h2 id="Додаткові_категорії">Додаткові категорії</h2>
+
+<p><span id="result_box" lang="uk"><span>Є деякі вторинні класифікації елементів, які можуть бути корисними та про які вам треба знати.</span></span></p>
+
+<h3 id="Елементи_підтримки_скрипту">Елементи підтримки скрипту</h3>
+
+<p><span id="result_box" lang="uk"><span><strong>Елементи підтримки скрипту</strong> є елементами, які безпосередньо не беруть участі у виводі документа.</span> <span>Замість цього вони виконують роль підтримки скриптів, або безпосередньо містять код, або вказувають на нього, або шляхом визначення даних, які будуть використовуватися скриптом.</span></span></p>
+
+<p>Елементами підтримки скрипту є:</p>
+
+<p>{{HTMLElement("script")}} {{HTMLElement("template")}}</p>
+
+<h2 id="Прозора_модель_вмісту">Прозора модель вмісту</h2>
+
+<p><span id="result_box" lang="uk"><span>Якщо елемент має прозору модель вмісту, його вміст має бути структурований таким чином, щоб він був дійсним HTML5 кодом, навіть якщо прозорий елемент було вилучено і замінено дочірними елементами.</span></span></p>
+
+<p>Наприклад, {{HTMLElement("del")}} і {{HTMLELement("ins")}} елементи є прозорими:</p>
+
+<pre>&lt;p&gt;We hold these truths to be &lt;del&gt;&lt;em&gt;sacred &amp;amp; undeniable&lt;/em&gt;&lt;/del&gt; &lt;ins&gt;self-evident&lt;/ins&gt;.&lt;/p&gt;
+</pre>
+
+<p>Навіть якщо ці елементи було вилучено, <span id="result_box" lang="uk"><span>цей фрагмент як і раніше буде дійсним HTML</span></span>.</p>
+
+<pre>&lt;p&gt;We hold these truths to be &lt;em&gt;sacred &amp;amp; undeniable&lt;/em&gt; self-evident.&lt;/p&gt;
+</pre>
+
+<h2 id="Інші_моделі_вмісту">Інші моделі вмісту</h2>
+
+<p>Секціонування кореню.</p>
diff --git a/files/uk/web/guide/html/html5/index.html b/files/uk/web/guide/html/html5/index.html
new file mode 100644
index 0000000000..8ae6ab8dcf
--- /dev/null
+++ b/files/uk/web/guide/html/html5/index.html
@@ -0,0 +1,164 @@
+---
+title: HTML5
+slug: Web/Guide/HTML/HTML5
+translation_of: Web/Guide/HTML/HTML5
+---
+<p><span class="seoSummary"><strong>HTML5</strong> є найновішим стандартом,що описує <a href="/en-US/docs/HTML" title="HTML">HTML</a>. </span>Цей термін представляє дві різні концепції:</p>
+
+<ul>
+ <li><span class="seoSummary">Це нова версія <em>мови </em>HTML, з новими елементами, атрибутами і поведінкою</span></li>
+ <li><span class="seoSummary">Це великий стек <strong>технологій, </strong>котрі надають більшого<strong> </strong>різноманіття та потужності Веб-сайтам та додаткам. </span>Цей набір інколи називають <em>HTML5 &amp; friends, </em>але часто скорочують до <em>HTML5</em>.</li>
+</ul>
+
+<p>Спроектована, для використання всіма розробниками Відкритого Вебу (Open Web), ця сторінка надає посилання до численних ресурсів про HTML5 технологї, розсортованні в декілька груп, в залежності від їх функцій.</p>
+
+<ul>
+ <li><em>Семантика</em>:  дозволяє описати якомога точніше з чого складається ваш контент.</li>
+ <li><em>Зв'язок</em>:  дозволяє вам взаємодіяти з сервером новим та інноваційним шляхом.</li>
+ <li><em>Оффлайн та сховище</em>:  надає можливість веб-сторінкам зберігати дані на стороні клієнта локально та оперувати оффлайном ефективніше.</li>
+ <li><em>Мультимедіа</em>: робить відео та аудіо першокласними мешканцями Відкритого Вебу.</li>
+ <li><em>2D/3D графіка та ефекти</em>: дозволяє безліч презентаційних варіантів.</li>
+ <li><em>Ефективність та інтеграція</em>:  надає більшу оптимізацію швидкості та кращого використання заліза (hardware) комп'ютера. </li>
+ <li><em>Доступ до пристрою</em>: дозволяє використання різноманітних пристроїв вводу/виводу</li>
+ <li><em>Стилі</em>: Дозволяє авторам створювати більш складні і витончені теми.</li>
+</ul>
+
+<div class="cleared row topicpage-table">
+<div class="section">
+<h2 id="сЕМАНТиКА" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">сЕМАНТиКА</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines in HTML5</a></dt>
+ <dd>Огляд нових елементів HTML5 для структуризації контенту: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} and {{HTMLElement("aside")}}.</dd>
+ <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Використання відео та аудіо в HTML5</a></dt>
+ <dd>Елементи {{HTMLElement("audio")}} та {{HTMLElement("video")}}  вбудовують та дозволяють керування новим мультимедійним контентом.</dd>
+ <dt><a href="/en-US/docs/HTML/Forms_in_HTML" title="Forms in HTML5">Форми в HTML5</a></dt>
+ <dd>Огляд <span class="gt-baf-term-text"><span class="gt-baf-cell gt-baf-word-clickable">вдосконален</span></span>ь для веб-форм в HTML5: перевірка обмежень API, декілька нових атрибутів, нові значення для атрибуту {{HTMLElement("input")}}  {{htmlattrxref("type", "input")}} а також новий елемент {{HTMLElement("output")}} .</dd>
+ <dt>Нові семантичні елементи</dt>
+ <dd><span class="tlid-translation translation" lang="uk"><span title="">Поруч із розділами, носіями(медіа) та елементами форм</span></span>, в HTML5 є численні нові елементи: {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, або {{HTMLElement("meter")}} та {{HTMLElement("main")}}, що збільшують кількість <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">чинних елементів HTML5</a>.</dd>
+ <dt><span class="gt-baf-term-text"><span class="gt-baf-cell gt-baf-word-clickable">Вдосконалення в</span></span> {{HTMLElement("iframe")}}</dt>
+ <dd>Використовуючи атрибути {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, та {{htmlattrxref("srcdoc", "iframe")}}, автори зараз можуть бути певними щодо рівня безпеки та бажаної візуалізації елементу {{HTMLElement("iframe")}}.</dd>
+ <dt><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt>
+ <dd>Дозволяє безпосередньо вставлені математичні формули.</dd>
+ <dt><a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Знайомство з HTML5</a></dt>
+ <dd><span class="tlid-translation translation" lang="uk"><span title="">У цьому розділі показано, як вказати браузеру, що ви використовуєте HTML5 у своєму веб-дизайні чи веб-програмі.</span></span></dd>
+ <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5-сумісний парсер</a></dt>
+ <dd>The parser, which turns the bytes of an HTML document into a DOM, has been extended and now precisely defines the behavior to use in all cases, even when faced with invalid HTML. This leads to far greater predictability and interoperability between HTML5-compliant browsers.</dd>
+</dl>
+
+<h2 id="Звязок" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Зв'язок</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt>
+ <dd>Allows creating a permanent connection between the page and the server and to exchange non-HTML data through that means.</dd>
+ <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-sent events</a></dt>
+ <dd>Allows a server to push events to a client, rather than the classical paradigm where the server could send data only in response to a client's request.</dd>
+ <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
+ <dd>This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.</dd>
+</dl>
+
+<h2 id="Оффлайн_та_сховище" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Оффлайн та сховище</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Offline resources: The application cache</a></dt>
+ <dd>Firefox fully supports the HTML5 offline resource specification. Most others have offline resource support at some level.</dd>
+ <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt>
+ <dd>Firefox 3 supports WHATWG online and offline events, which let applications and extensions detect whether or not there's an active Internet connection, as well as to detect when the connection goes up and down.</dd>
+ <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG client-side session and persistent storage (aka DOM storage)</a></dt>
+ <dd>Client-side session and persistent storage allows web applications to store structured data on the client side.</dd>
+ <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt>
+ <dd>IndexedDB is a web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes.</dd>
+ <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Using files from web applications</a></dt>
+ <dd>Support for the new HTML5 File API has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the <span style="font-family: monospace;">{{HTMLElement("input")}}</span> of <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> HTML element's new <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> attribute. There also is <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd>
+</dl>
+
+<h2 id="Мультимедіа" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Мультимедіа</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Using HTML5 audio and video</a></dt>
+ <dd>The {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements embed and allow the manipulation of new multimedia content.</dd>
+ <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
+ <dd>This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.</dd>
+ <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Using the Camera API</a></dt>
+ <dd>Allows using, manipulating, and storing an image from the computer's camera.</dd>
+ <dt>Track and WebVTT</dt>
+ <dd>The {{HTMLElement("track")}} element allows subtitles and chapters. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> is a text track format.</dd>
+</dl>
+
+<h2 id="3D_Графіка_та_ефекти" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D Графіка та ефекти </h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas tutorial</a></dt>
+ <dd>Learn about the new <code>{{HTMLElement("canvas")}}</code> element and how to draw graphs and other objects in Firefox.</dd>
+ <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 Text API for <code>&lt;canvas&gt;</code> elements</a></dt>
+ <dd>The HTML5 text API is now supported by {{HTMLElement("canvas")}} elements.</dd>
+ <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt>
+ <dd>WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 {{HTMLElement("canvas")}} elements.</dd>
+ <dt><a href="/en-US/docs/SVG" title="SVG">SVG</a></dt>
+ <dd>An XML-based format of vectorial images that can directly be embedded in the HTML.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 id="Ефективність_та_Інтеграція" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Ефективність та Інтеграція</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt>
+ <dd>Allows delegation of JavaScript evaluation to background threads, allowing these activities to prevent slowing down interactive events.</dd>
+ <dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> level 2</dt>
+ <dd>Allows fetching asynchronously some parts of the page, allowing it to display dynamic content, varying according to the time and user actions. This is the technology behind <a href="/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd>
+ <dt>JIT-compiling JavaScript engines</dt>
+ <dd>The new generation of JavaScript engines is much more powerful, leading to greater performance.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt>
+ <dd>Allows the manipulation of the browser history. This is especially useful for pages loading interactively new information.</dd>
+ <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">The contentEditable Attribute: Transform your website to a wiki!</a></dt>
+ <dd>HTML5 has standardized the contentEditable attribute. Learn more about this feature.</dd>
+ <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag and drop</a></dt>
+ <dd>The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.</dd>
+ <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Focus management in HTML</a></dt>
+ <dd>The new HTML5 <code>activeElement</code> and <code>hasFocus</code> attributes are supported.</dd>
+ <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Web-based protocol handlers</a></dt>
+ <dd>You can now register web applications as protocol handlers using the <code>navigator.registerProtocolHandler()</code> method.</dd>
+ <dt><a href="/en-US/docs/Web/API/Window/requestAnimationFrame" style="font-weight: bold;" title="Web-based_protocol_handlers">requestAnimationFrame</a></dt>
+ <dd>Allows control of animations rendering to obtain optimal performance.</dd>
+ <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Fullscreen API</a></dt>
+ <dd>Controls the usage of the whole screen for a Web page or application, without the browser UI displayed.</dd>
+ <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt>
+ <dd>Allows locking the pointer to the content, so games and similar applications don't lose focus when the pointer reaches the window limit.</dd>
+ <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt>
+ <dd>In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.</dd>
+</dl>
+
+<h2 id="Доступ_до_пристрою" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 66px; padding-right: 0.5em; vertical-align: middle; width: 77px;">Доступ до пристрою</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Using the Camera API</a></dt>
+ <dd>Allows using, manipulating, and storing an image from the computer's camera.</dd>
+ <dt><a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Touch events</a></dt>
+ <dd>Handlers to react to events created by a user pressing touch screens.</dd>
+ <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Using geolocation</a></dt>
+ <dd>Let browsers locate the position of the user using geolocation.</dd>
+ <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Detecting device orientation</a></dt>
+ <dd>Get the information when the device on which the browser runs changes orientation. This can be used as an input device (e.g., to make games that react to the position of the device) or to adapt the layout of a page to the orientation of the screen (portrait or landscape).</dd>
+ <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt>
+ <dd>Allows locking the pointer to the content, so games and similar application don't lose focus when the pointer reaches the window limit.</dd>
+</dl>
+
+<h2 id="Стилі" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Стилі</h2>
+
+<p id="CSS_has_been_extended_to_be_able_to_style_elements_in_a_much_more_complex_way._This_is_often_referred_as_CSS3_though_CSS_is_not_a_monolithic_specification_any_more_and_the_different_modules_are_not_all_at_level_3_some_are_at_level_1_and_others_at_level_4_with_all_the_intermediate_levels_covered."><a href="/en-US/docs/CSS" title="CSS">CSS</a> has been extended to be able to style elements in a much more complex way. This is often referred as <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, though CSS is not a monolithic specification any more and the different modules are not all at level 3: some are at level 1 and others at level 4, with all the intermediate levels covered.</p>
+
+<dl>
+ <dt>New background styling features</dt>
+ <dd>It is now possible to put a shadow to a box, using {{cssxref("box-shadow")}} and <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">multiple backgrounds</a> can be set.</dd>
+ <dt>More fancy borders</dt>
+ <dd>Not only it is now possible to use images to style borders, using {{cssxref("border-image")}} and its associated longhand properties, but rounded borders are supported via the {{cssxref("border-radius")}} property.</dd>
+ <dt>Animating your style</dt>
+ <dd>Using <a href="/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> to animate between different states or using <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a> to animate parts of the page without a triggering event, you can now control mobile elements on your page.</dd>
+ <dt>Typography improvement</dt>
+ <dd>Authors have better control to reach better typography. They can control {{cssxref("text-overflow")}} and <a href="/en-US/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>, but also can add a <a href="/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">shadow</a> to it or control more precisely its <a href="/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>. Custom typefaces can be downloaded and applied thanks to the new {{cssxref("@font-face")}} at-rule.</dd>
+ <dt>New presentational layouts</dt>
+ <dd>In order to improve the flexibility of designs, two new layouts have been added: the <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS multi-column layouts</a> and <a href="/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">CSS flexible box layout</a>.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/uk/web/guide/html/використання_html-секцій_та_структура_документу/index.html b/files/uk/web/guide/html/використання_html-секцій_та_структура_документу/index.html
new file mode 100644
index 0000000000..84db2e6a76
--- /dev/null
+++ b/files/uk/web/guide/html/використання_html-секцій_та_структура_документу/index.html
@@ -0,0 +1,337 @@
+---
+title: Використання HTML-секцій та структура документу
+slug: Web/Guide/HTML/Використання_HTML-секцій_та_структура_документу
+translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines
+---
+<div class="note">
+<p> В перекладі наводяться терміни <em>схема документу</em> та<em> алгоритм схематизації</em> у відповідності до англійських <em>outline </em>та <em>outline algorithm</em>, оскільки на думку перекладача найбільш точно відповідають змісту, вкладеному в поняття на мові оригінлу.</p>
+
+<p>Також у відповідності до <em>section</em> та <em>subsection</em> використано <em>розділ </em>та <em>підрозділ</em>, так як в змісті даного документу йдеться більше про великі веб-сторінки, порівнювані із книжками.</p>
+</div>
+
+<div class="warning">
+<p><strong>Зверніть увагу</strong>: На даний момент немає відомих реалізацій алгоритму побудови <em>схеми документа</em> в браузерах чи інших агентах користувачів (assistive technology user agents), проте алгоритм реалізований в  ішому програмному забезпеченні, наприклад, в засобах перевірки стандартів (conformance checkers). Therefore the <a href="http://www.w3.org/TR/html5/sections.html#outline">outline</a> algorithm cannot be relied upon to convey document structure to users. Автори рекомендують використовувати <a href="http://www.w3.org/TR/html5/sections.html#rank">ранг</a> заголовку (<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>-<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code>) для опису структури документу.</p>
+</div>
+
+<p>Специфікація HTML 5 вводить ряд нових елементів, що дозволяють веб-розробникам краще описувати структуру веб-документу використовуючи стандартну семантику. Даний документ описує ці елементи та способи їх використання для створення бажаної схеми документу.</p>
+
+<h2 id="Структура_документу_в_HTML_4">Структура документу в HTML 4</h2>
+
+<p>Структура документу, тобто семантична структура, що знаходиться між <code>&lt;body&gt;</code> і <code>&lt;/body&gt;</code>, — основа представлення сторінки. В HTML4 для опису структури документу використовується форма запису із розділів та підрозділів. Розділ визначається за допомогою елемента ({{HTMLElement("div")}}), в який включаються елементи заголовків ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, або {{HTMLElement("h6")}}), які, власне, і слугують заголовками секцій чи підсекцій. Взаєморозміщення даних елементів утворює структуру документу та будує його схему.</p>
+
+<p>Таким чином наступна розмітка:</p>
+
+<div style="overflow: hidden;">
+<pre class="brush:xml">&lt;div class="section" id="forest-elephants" &gt;
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  &lt;div class="subsection" id="forest-habitat" &gt;
+    &lt;h2&gt;Habitat&lt;/h2&gt;
+    &lt;p&gt;Forest elephants do not live in trees but among them.
+     ...this subsection continues...
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>зводиться до наступної схеми:</p>
+
+<pre>1. Forest elephants
+   1.1 Habitat
+</pre>
+
+<p>Елемент {{HTMLElement("div")}} не оголошує нову секцію. Для цього достатньо наявності тегу заголовка. Таким чином фрамент:</p>
+
+<pre class="brush:xml">&lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  &lt;h2&gt;Habitat&lt;/h2&gt;
+  &lt;p&gt;Forest elephants do not live in trees but among them.
+    ...this subsection continues...
+  &lt;h2&gt;Diet&lt;/h2&gt;
+&lt;h1&gt;Mongolian gerbils&lt;/h1&gt;
+</pre>
+
+<p>зумовлює наступну схему:</p>
+
+<pre>1. Forest elephants
+   1.1 Habitat
+   1.2 Diet
+2. Mongolian gerbils
+</pre>
+
+<h2 id="Проблеми_розв'зані_за_допомогою_HTML5">Проблеми, розв'зані за допомогою HTML5</h2>
+
+<p>Спосіб визначення структури документу в HTML 4 та обробка її алгоритмом схематизації є досить складнм та зумовлює наступні проблеми:</p>
+
+<ol>
+ <li>Використання елементу {{HTMLElement("div")}}  для оголошення секцій (розділів) без використання спеціальних класів (значень атрибуту <strong>class</strong>) робить неможливим застосування алгоритму схематизації ("Цей {{HTMLElement("div")}} — частина схеми сторінки, що визначає секцію чи підсекцію?" Чи "це звичайний {{HTMLElement("div")}}-елемент, використаний для стилізації?"). Іншими словами, специфікація HTML 4 дуже неточно визначає межі початку та закінчення розділів. Автоматична генерація схеми документу досить важлива, зокрема для <a href="https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D1%85%D0%BD%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5_%D1%81%D1%80%D0%B5%D0%B4%D1%81%D1%82%D0%B2%D0%B0_%D1%80%D0%B5%D0%B0%D0%B1%D0%B8%D0%BB%D0%B8%D1%82%D0%B0%D1%86%D0%B8%D0%B8">реабілітаційних технологій</a>, які адаптують та доносять інформацію до людей (<em>від перекл.:</em> як правило, з обмеженими можливостями) базуючись на структурі документу. HTML 5 усуває труднощі обробки елементу {{HTMLElement("div")}} алгоритмом схематизації, оскільки вводить новий елемент для <em>розділів</em>, {{HTMLElement("section")}}, HTML Section Element.</li>
+ <li>Merging several documents is hard: inclusion of a sub-document in a main document means changing the level of the HTML Headings Element so that the outline is kept. This is solved in HTML5 as the newly introduced sectioning elements ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} and {{HTMLElement("aside")}}) are always subsections of their nearest ancestor section, regardless of what sections are created by internal headings.</li>
+ <li>In HTML4, every section is part of the document outline. But documents are often not that linear. A document can have special sections containing information that is not part of, though it is related to, the main flow, like an advertisement block or an explanation box. HTML5 introduces the {{HTMLElement("aside")}} element allowing such sections to not be part of the main outline.</li>
+ <li>Again, in HTML4, because every section is part of the document outline, there is no way to have sections containing information related not to the document but to the whole site, like logos, menus, table of contents, or copyright information and legal notices. For that purpose, HTML5 introduces three new elements: {{HTMLElement("nav")}} for collections of links, such as a table of contents, {{HTMLElement("footer")}} and {{HTMLElement("header")}} for site-related information. Note that {{HTMLElement("header")}} and {{HTMLElement("footer")}} are not sectioning content like {{HTMLElement("section")}}, rather, they exist to semantically mark up parts of a section.</li>
+</ol>
+
+<p>More generally, HTML5 brings precision to the sectioning and heading features, allowing document outlines to be predictable and used by the browser to improve the user experience.</p>
+
+<h2 id="Алгоритм_схематизації_HTML_5">Алгоритм схематизації HTML 5</h2>
+
+<p>Let's consider the algorithms  underlying the way HTML handles sections and outlines.</p>
+
+<h3 id="Defining_sections">Defining sections</h3>
+
+<p>All content lying inside the {{HTMLElement("body")}} element is part of a section. Sections in HTML5 can be nested. Beside the main section, defined by the {{HTMLElement("body")}} element, section limits are defined either explicitly or implicitly. Explicitly-defined sections are the content within {{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} tags. </p>
+
+<div class="note">Each section can have its own heading hierarchy. Therefore, even a nested section can have an {{HTMLElement("h1")}}. See {{anch("Defining headings")}}</div>
+
+<p>Let's look at an example — here we have a document with a top level section and a footer defined. Inside the top level section we have three subsections, defined by two {{htmlelement("section")}} elements and an {{htmlelement("aside")}} element:</p>
+
+<pre class="brush:xml">&lt;section&gt;
+
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+
+  &lt;section&gt;
+    &lt;h1&gt;Introduction&lt;/h1&gt;
+    &lt;p&gt;In this section, we discuss the lesser known forest elephants.&lt;/p&gt;
+  &lt;/section&gt;
+
+  &lt;section&gt;
+    &lt;h1&gt;Habitat&lt;/h1&gt;
+    &lt;p&gt;Forest elephants do not live in trees but among them.&lt;/p&gt;
+  &lt;/section&gt;
+
+  &lt;aside&gt;
+    &lt;p&gt;advertising block&lt;/p&gt;
+  &lt;/aside&gt;
+
+&lt;/section&gt;
+
+&lt;footer&gt;
+  &lt;p&gt;(c) 2010 The Example company&lt;/p&gt;
+&lt;/footer&gt;</pre>
+
+<p>This leads to the following outline:</p>
+
+<pre>1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat
+</pre>
+
+<h3 id="Defining_headings">Defining headings</h3>
+
+<p>While the HTML Sectioning elements define the structure of the document, an outline also needs headings to be useful. The basic rule is simple: the first HTML heading element (one of {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) defines the heading of the current section.</p>
+
+<p>The heading elements have a <em>rank</em> given by the number in the element name, where {{HTMLElement("h1")}} has the <em>highest</em> rank, and {{HTMLElement("h6")}} has the <em>lowest</em> rank. Relative ranking matters only within a section; the structure of the sections determines the outline, not the heading rank of the sections. For example, consider this code:</p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  &lt;section&gt;
+    &lt;h2&gt;Habitat&lt;/h2&gt;
+    &lt;p&gt;Forest elephants do not live in trees but among them.
+        ...this subsection continues...
+  &lt;/section&gt;
+&lt;/section&gt;
+&lt;section&gt;
+  &lt;h3&gt;Mongolian gerbils&lt;/h3&gt;
+  &lt;p&gt;In this section, we discuss the famous mongolian gerbils.
+     ...this section continues...
+&lt;/section&gt;</pre>
+
+<p>This creates the following outline:</p>
+
+<pre>1. Forest elephants
+   1.1 Habitat
+2. Mongolian gerbils</pre>
+
+<p>Note that the rank of the heading element (in the example {{HTMLElement("h1")}} for the first top-level section, {{HTMLElement("h2")}} for the subsection and {{HTMLElement("h3")}} for the second top-level section) is not important. (Any rank can be used as the heading of an explicitly-defined section, although this practice is not recommended.)</p>
+
+<h3 id="Implicit_sectioning">Implicit sectioning</h3>
+
+<p>Because the HTML5 Sectioning Elements aren't mandatory to define an outline, to keep compatibility with the existing web dominated by HTML4, there is a way to define sections without them. This is called <em>implicit sectioning</em>.</p>
+
+<p>The heading elements ({{HTMLElement("h1")}} to {{HTMLElement("h6")}}) define a new, implicit, section when they aren't the first heading of their parent, explicit, sections. The way this implicit section is positioned in the outline is defined by its relative rank with the previous heading in their parent section. If it is of a lower rank than the previous heading, it opens an implicit sub-section of the section. This code:</p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  &lt;h3 class="implicit subsection"&gt;Habitat&lt;/h3&gt;
+  &lt;p&gt;Forest elephants do not live in trees but among them.
+    ...this subsection continues...
+&lt;/section&gt;</pre>
+
+<p>leading to the following outline:</p>
+
+<pre>1. Forest elephants
+   1.1 Habitat <em>(implicitly defined by the h3 element)</em>
+</pre>
+
+<p>If it is of the same rank as the previous heading, it closes the previous section (which may have been explicit!) and opens a new implicit one at the same level: </p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  &lt;h1 class="implicit section"&gt;Mongolian gerbils&lt;/h1&gt;
+  &lt;p&gt;Mongolian gerbils are cute little mammals.
+    ...this section continues...
+&lt;/section&gt;</pre>
+
+<p>leading to the following outline: </p>
+
+<pre>1. Forest elephants
+2. Mongolian gerbils <em>(implicitly defined by the h1 element, which closed the previous section at the same time)</em>
+</pre>
+
+<p>If it is of a higher rank than the previous heading, it closes the previous section and opens a new implicit one at the higher level:</p>
+
+<pre class="brush:xml">&lt;body&gt;
+  &lt;h1&gt;Mammals&lt;/h1&gt;
+  &lt;h2&gt;Whales&lt;/h2&gt;
+  &lt;p&gt;In this section, we discuss the swimming whales.
+    ...this section continues...
+  &lt;section&gt;
+    &lt;h3&gt;Forest elephants&lt;/h3&gt;
+    &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+      ...this section continues...
+    &lt;h3&gt;Mongolian gerbils&lt;/h3&gt;
+      &lt;p&gt;Hordes of gerbils have spread their range far beyond Mongolia.
+         ...this subsection continues...
+    &lt;h2&gt;Reptiles&lt;/h2&gt;
+      &lt;p&gt;Reptiles are animals with cold blood.
+          ...this section continues...
+  &lt;/section&gt;
+&lt;/body&gt;</pre>
+
+<p>leading to the following outline:</p>
+
+<pre>1. Mammals
+   1.1 Whales <em>(implicitly defined by the h2 element)</em>
+   1.2 Forest elephants <em>(explicitly defined by the section element)</em>
+   1.3 Mongolian gerbils <em>(implicitly defined by the h3 element, which closes the previous section at the same time)</em>
+2. Reptiles <em>(implicitly defined by the h2 element, which closes the previous section at the same time)</em>
+</pre>
+
+<p>This is not the outline that one might expect by quickly glancing at the heading tags. To make your markup human-understandable, it is a good practice to use explicit tags for opening and closing sections, and to match the heading rank to the intended section nesting level. However, this is not required by the HTML5 specification. If you find that browsers are rendering your document outline in unexpected ways, check whether you have sections that are implicitly closed by heading elements.</p>
+
+<p>An exception to the rule of thumb that heading rank should match the section nesting level is for sections that may be reused in multiple documents. For example, a section might be stored in a content-management system and assembled into documents at run time. In this case, a good practice is to start at {{HTMLElement("h1")}} for the top heading level of the reusable section. The nesting level of the reusable section will be determined by the section hierarchy of the document in which it appears. Explicit section tags are still helpful in this case.</p>
+
+<h3 id="Sectioning_roots"><a name="sectioning_root">Sectioning roots</a></h3>
+
+<p> A <a id="sectioning root" name="sectioning root">sectioning root</a> is an HTML element that can have its own outline, but the sections and headings inside it does not contribute to the outline of its ancestor. Beside {{HTMLElement("body")}} which is the logical sectioning root of a document, these are often elements that introduce external content to the page: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} and {{HTMLElement("td")}}.</p>
+
+<p>Example:</p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;section&gt;
+    &lt;h2&gt;Introduction&lt;/h2&gt;
+    &lt;p&gt;In this section, we discuss the lesser known forest elephants&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;section&gt;
+    &lt;h2&gt;Habitat&lt;/h2&gt;
+    &lt;p&gt;Forest elephants do not live in trees but among them. Let's
+       look what scientists are saying in "&lt;cite&gt;The Forest Elephant in Borneo&lt;/cite&gt;":&lt;/p&gt;
+    &lt;blockquote&gt;
+       &lt;h1&gt;Borneo&lt;/h1&gt;
+       &lt;p&gt;The forest element lives in Borneo...&lt;/p&gt;
+    &lt;/blockquote&gt;
+  &lt;/section&gt;
+&lt;/section&gt;
+</pre>
+
+<p>This example results in the following outline:</p>
+
+<pre>1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat</pre>
+
+<p>This outline doesn't contain the internal outline of the {{HTMLElement("blockquote")}} element, which, being an external citation, is a sectioning root and isolates its internal outline.</p>
+
+<h3 id="Sections_outside_the_outline">Sections outside the outline</h3>
+
+<p> HTML5 introduces two new elements that allow defining sections that don't belong to the main outline of a web document:</p>
+
+<ol>
+ <li>The HTML Aside Section Element ({{HTMLElement("aside")}}) defines a section that, though related to the main element, doesn't belong to the main flow, like an explanation box or an advertisement. It has its own outline, but doesn't belong to the main one.</li>
+ <li>The HTML Navigational Section Element ({{HTMLElement("nav")}}) defines a section that contains navigation links. There can be several of them in a document, for example one with page internal links like a table of contents, and another with site navigational links. These links are not part of the main document flow and outline, and are generally not initially rendered by screen readers and similar assistive technologies.</li>
+</ol>
+
+<h3 id="Headers_and_Footers">Headers and Footers</h3>
+
+<p>HTML5 also introduces two new elements that can be used to mark up the header and the footer of a section:</p>
+
+<ol>
+ <li>The HTML Header Element ({{HTMLElement("header")}}) defines a page header — typically containing the logo and name of the site and possibly a horizontal menu — or section header, containing perhaps the section's heading, author name, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("header")}}. Despite its name, it is not necessarily positioned at the beginning of the page or section.</li>
+ <li>The HTML Footer Element ({{HTMLElement("footer")}}) defines a page footer — typically containing the copyright and legal notices and sometimes some links — or section footer, containing perhaps the section's publication date, license information, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("footer")}}. Despite its name, it is not necessarily positioned at the end of the page or section.</li>
+</ol>
+
+<p>These do not create new sections in the outline, rather, they mark up content inside sections of the page.</p>
+
+<h2 id="Addresses_in_sectioning_elements">Addresses in sectioning elements</h2>
+
+<p>The author of a document often wants to publish some contact information, such as the author's name and address. HTML4 allowed this via the {{HTMLElement("address")}} element, which has been extended in HTML5.</p>
+
+<p>A document can be made of different sections from different authors. A section from another author than the one of the main page is defined using the {{HTMLElement("article")}} element. Consequently, the {{HTMLElement("address")}} element is now linked to its nearest {{HTMLElement("body")}} or {{HTMLElement("article")}} ancestor.</p>
+
+<h2 id="Using_HTML5_elements_in_non-HTML5_browsers">Using HTML5 elements in non-HTML5 browsers</h2>
+
+<p>Sections and headings elements should work in most non-HTML5 browsers. Though unsupported, they don't need a special DOM interface and they only need a specific CSS styling as unknown elements are styled as <code>display:inline</code> by default:</p>
+
+<pre class="brush: css">section, article, aside, footer, header, nav, hgroup {
+  display:block;
+}
+</pre>
+
+<p>Of course the web developer can style them differently, but keep in mind that in a non-HTML5 browser, the default styling is different from what is expected for such elements. Also note that the {{HTMLElement("time")}} element has not been included, because the default styling for it in a non-HTML5 browser is the same as the one in an HTML5-compatible one.</p>
+
+<p>This method has its limitation though, as some browsers do not allow styling of unsupported elements. That is the case of the Internet Explorer (version 8 and earlier), which need a specific script to allow this:</p>
+
+<pre class="brush:xml">&lt;!--[if lt IE 9]&gt;
+  &lt;script&gt;
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  &lt;/script&gt;
+&lt;![endif]--&gt;</pre>
+
+<p>This script means that, in the case of Internet Explorer (8 and earlier), scripting should be enabled in order to display HTML5 sectioning and headings elements properly. If not, they won't be displayed, which may be problematic as these elements are likely defining the structure of the whole page. That's why an explicit {{HTMLElement("noscript")}} element should be added for this case:</p>
+
+<pre class="brush:xml">&lt;noscript&gt;
+   &lt;strong&gt;Warning !&lt;/strong&gt;
+   Because your browser does not support HTML5, some elements are simulated using JScript.
+   Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
+&lt;/noscript&gt;</pre>
+
+<p>This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:</p>
+
+<pre class="brush:xml">&lt;!--[if lt IE 9]&gt;
+  &lt;script&gt;
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  &lt;/script&gt;
+  &lt;noscript&gt;
+     &lt;strong&gt;Warning !&lt;/strong&gt;
+     Because your browser does not support HTML5, some elements are created using JavaScript.
+     Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
+  &lt;/noscript&gt;
+&lt;![endif]--&gt;</pre>
+
+<h2 id="Підсумок">Підсумок</h2>
+
+<p>Нові семантичні елементи, що були введені стандартом HTML5 забезпечили можливість описувати структуру документу єдиним стандартеризованим способом. They bring a big advantage for people having HTML5 browsers and needing the structure to help them understand the page, for instance people needing the help of some assistive technology. These new semantic elements are simple to use and, with very few burdens, can be made to work also in non-HTML5 browsers. Therefore they should be used without restrictions.</p>
+
+<div>{{HTML5ArticleTOC()}}</div>
diff --git a/files/uk/web/guide/index.html b/files/uk/web/guide/index.html
new file mode 100644
index 0000000000..c11dfa4089
--- /dev/null
+++ b/files/uk/web/guide/index.html
@@ -0,0 +1,66 @@
+---
+title: Довідник веб-розробника
+slug: Web/Guide
+tags:
+  - Guide
+  - Landing
+  - TopicStub
+  - Web
+translation_of: Web/Guide
+---
+<p><strong>Ці статті нададуть Вам практичні рекомендації, що допоможуть з ефективністю використовувати специфічні технології та АРІ. </strong></p>
+
+<div>
+<div>
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/Guide/HTML">Довідник розробника HTML</a></dt>
+ <dd class="landingPageList"><strong>Мова розмітки гіпертексту (англ. <em>HyperText Markup Language</em> - HTML)</strong> - основна мова майже всього веб-контенту. Більша частина того, що ти бачиш на екрані, описано, в основному, з використанням HTML.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS">Довідник розробника CSS</a></dt>
+ <dd class="landingPageList">Каскадні таблиці стилів (англ. <em>Cascading Style Sheets</em> - CSS) - мова таблиць стилів, що використовується для опису відображення документу, написанного мовою HTML.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Events">Довідник розробника з подій</a></dt>
+ <dd class="landingPageList">Події відносяться як до шаблонів дизайну, які застосовують для асинхронного регулювання різних інцидентів, що виникають протягом терміну експлуатації веб-сторінки, так і для означення імен, характеристик та застосування великої кількості інцидентів різних типів.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Graphics">Графіка в Мережі</a></dt>
+ <dd class="landingPageList">Сучасні веб-сайти та додатки часто потребують відобразити графіку різної складності.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API">Путівник до Веб API</a></dt>
+ <dd class="landingPageList">Список усіх Веб АРІ та що вони роблять.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt>
+ <dd>JavaScript є потужною скриптовою мовою для створення веб-додатків.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Localizations_and_character_encodings">Локалізація та кодування символів</a></dt>
+ <dd class="landingPageList">Браузери внутрішньо обробляють текст як Unicode. Однак, спосіб представлення символів в бітовому значенні (кодування символів) використовується для передачі тексту через мережу до браузера. <a class="external external-icon" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset">HTML специфікація рекомендує</a> використання кодування UTF-8 (яке здатне відображати Unicode цілком) і не залежно від того, яке кодування було використано, вимагає від Веб-контенту оголошення цього кодування.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Mobile">Розробка мобільного інтернету</a></dt>
+ <dd class="landingPageList">Ця сторінка представляє огляд деяких з основних технік, необхідних для оформлення веб-сайтів, що будуть добре працювати на мобільних пристроях. Якщо ви шукаєте інформацію про проект Mozilla's Firefox OS, відвідайте сторінку <a href="https://developer.mozilla.org/en/Mozilla/Firefox_OS" title="Boot to Gecko">Firefox OS</a>.  Або ж вас може зацікавити <a href="https://developer.mozilla.org/en/Mozilla/Firefox_for_Android" title="Firefox for Android">Firefox для Android</a>.</dd>
+</dl>
+
+<dl>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance">Оптимізація та продуктивність</a></dt>
+ <dd class="landingPageList">Розробляючи сучасні веб-додатки та сайти, важливо забезпечити їх високу продуктивність. Тобто, зробити так, щоб все у них працювало швидко та ефективно. Це дозволяє їм оптимально працювати як у користувачів потужних десктопних систем та і на менш потужних мобільних пристроях. </dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Parsing_and_serializing_XML">Парсування та серіалізація XML</a></dt>
+ <dd class="landingPageList">Веб-платформи надають наступні об’єкти для парсування та серіалізації XML:</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/SVG-in-OpenType">SVG-in-OpenType</a></dt>
+ <dd class="landingPageList">Формат SVG-in-OpenType на даний момент працює в руках <a class="external external-icon" href="http://mpeg.chiariglione.org/">MPEG group</a>. Як тільки ми будемо готові для ширшого затвердження, інформація з <a class="external external-icon" href="https://wiki.mozilla.org/SVGOpenTypeFonts">wiki.mozilla.org</a> буде переміщена сюди, оновлена і розширена.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/WOFF">The Web Open Font Format (WOFF)</a></dt>
+ <dd class="landingPageList"><strong>Відкритий формат шрифту для Веб (англ. </strong><em>the <strong>Web Open Font Format - WOFF</strong></em>) відкритий формат шрифтів, розроблений Mozilla спільно з Type Supply, LettError, та іншими організаціями.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience">Користувацький досвід</a></dt>
+ <dd class="landingPageList">Якщо ви хочете, щоб користувачі повертались і використовували ваш додаток чи веб-сайт знову і знову, для вас важливо зробити досвід користування ним приємним. Тут ви зможете знайти статті, що зможуть допомогти в цьому.  </dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects">Використання об’єктів форм даних</a></dt>
+ <dd class="landingPageList">Об’єкти <a href="https://developer.mozilla.org/en/DOM/XMLHttpRequest/FormData" title="en/DOM/XMLHttpRequest/FormData"><code>FormData</code></a> дозволяють вам поєднувати набір ключ/значення для відправки з використанням <code>XMLHttpRequest (запитів)</code>. Спершу призначені для використання в надсиланні форм даних, але можуть бути використані незалежно від форм для передачі зашифрованих даних. Дані, що передаються, мають такий же формат, як і у методі форми <code>submit(), </code>яка була б використана для відправки даних якби кодування форми було визначено як "multipart/form-data".</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Glossary">Глоссарій</a></dt>
+ <dd class="landingPageList">Дає визначення численним технічним термінам, пов’язаним з Мережею та інтернетом.</dd>
+</dl>
+</div>
+</div>
+</div>
+</div>
+
+<h2 id="Дивись_також">Дивись також</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">Web Developer Reference</a></li>
+</ul>
diff --git a/files/uk/web/guide/графіка/index.html b/files/uk/web/guide/графіка/index.html
new file mode 100644
index 0000000000..57af0fdbc3
--- /dev/null
+++ b/files/uk/web/guide/графіка/index.html
@@ -0,0 +1,49 @@
+---
+title: Графіка для Web
+slug: Web/Guide/Графіка
+tags:
+  - 2D
+  - 3D
+  - Canvas
+  - HTML5
+  - SVG
+  - WebGL
+  - WebRTC
+  - Веб
+  - Графіка
+translation_of: Web/Guide/Graphics
+---
+<p><span class="seoSummary">Сучасним сайтам і веб-додаткам потрібне відображення графіки.</span> Статичні зображення легко зобразити використовуючи елемент {{HTMLElement("img")}}, чи налаштувати фон HTML елементів використовуючи властивість {{cssxref("background-image")}}. Ви також можете конструювати графіку на льоту, або модифікувати її після. <span class="seoSummary">В статтях далі сказано як це можна зробити.</span></p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="2D_Графіка">2D Графіка</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/HTML/Canvas">Canvas</a></dt>
+ <dd>Елемент {{HTMLElement("canvas")}} надає зручні API для малювання 2D графіки використовуючи JavaScript.</dd>
+ <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt>
+ <dd>Scalable Vector Graphics (SVG) дозволяє використовувати лінії, криві, та інші геометричні фігури для рендерингу графіки. З векторів, ви можете створювати зображення які не втрачають якості при маштабуванні.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/Graphics">Переглянути все...</a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="3D_Графіка">3D Графіка</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt>
+ <dd>Посібник для початку роботи з WebGL, API для роботи з 3D графікою в веб. Ця технологія дає вам можливість використовувати стандартний OpenGL ES в Web контенті.</dd>
+</dl>
+
+<h2 id="Відео">Відео</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">Використання HTML5 аудіо і відео</a></dt>
+ <dd>Вбудовування відео і/або аудіо в веб-сторінки і керування відтворенням.</dd>
+ <dt><a href="/en-US/docs/WebRTC">WebRTC</a></dt>
+ <dd>RTC в WebRTC означає Real-Time Communications (комунікація в реальному часі), технологія яка дозволяє передавати потокове аудіо/відео і дані між кліентами браузера (пірами).</dd>
+</dl>
+</div>
+</div>
diff --git a/files/uk/web/html/attributes/index.html b/files/uk/web/html/attributes/index.html
new file mode 100644
index 0000000000..f7499d1bf4
--- /dev/null
+++ b/files/uk/web/html/attributes/index.html
@@ -0,0 +1,654 @@
+---
+title: HTML attribute reference
+slug: Web/HTML/Attributes
+translation_of: Web/HTML/Attributes
+---
+<p>Елементи в HTML можуть мати <strong>атрибути; </strong>це додаткові величини, які певним чином змінюють безпосередньо елементи або їх поведінку для отримання необхідного користувачеві ефекту.</p>
+
+<h2 id="Список_атрибутів">Список атрибутів</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Назва атрибуту</th>
+   <th>Елементи</th>
+   <th>Опис</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>accept</code></td>
+   <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
+   <td>Список типів даних, що приймає сервер, зазвичай, типів файлів.</td>
+  </tr>
+  <tr>
+   <td><code>accept-charset</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>Список кодувань, які підтримуються.</td>
+  </tr>
+  <tr>
+   <td><code>accesskey</code></td>
+   <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td>
+   <td>Визначає комбінацію клавіш швидкого доступу для активації або фокусування на елементі.</td>
+  </tr>
+  <tr>
+   <td><code>action</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>URI програми, яка обробляє інформацію, передану формою.</td>
+  </tr>
+  <tr>
+   <td><code>align</code></td>
+   <td>{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }},  {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }},  {{ HTMLElement("td") }},  {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}</td>
+   <td>Визначає вирівнювання елементу по горизогталі</td>
+  </tr>
+  <tr>
+   <td><code>alt</code></td>
+   <td>{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}</td>
+   <td>Показує альтарнативний текст у разі неможливості відобразити зображення.</td>
+  </tr>
+  <tr>
+   <td><code>async</code></td>
+   <td>{{ HTMLElement("script") }}</td>
+   <td>Вказуєна те, що скрипт повинен виконуватися асинхронно.</td>
+  </tr>
+  <tr>
+   <td><code>autocomplete</code></td>
+   <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
+   <td>Вказує чи дозволено автозаповнення полів браузером.</td>
+  </tr>
+  <tr>
+   <td><code>autofocus</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Після завантаження сторінки, відбуватиметься автоматичне фокусування на цьому елементі.</td>
+  </tr>
+  <tr>
+   <td><code>autoplay</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td>Відтворює аудіо чи відео одразу, коли це стає можливим.</td>
+  </tr>
+  <tr>
+   <td><code>autosave</code></td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>Попередні значення повинні зберігатися у випадному списку, щоб можна було обрати значення з різних завантажень сторніки.</td>
+  </tr>
+  <tr>
+   <td><code>bgcolor</code></td>
+   <td>{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }}</td>
+   <td>
+    <p>Визначає колір заднього фону елементу.</p>
+
+    <div class="note">
+    <p><strong>Примітка:</strong> Це застарілий атрибут. Натомість краще використовувати CSS-властивість {{ Cssxref("background-color") }}.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>border</code></td>
+   <td>{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }}</td>
+   <td>
+    <p>Ширина границі.</p>
+
+    <div class="note">
+    <p><strong>Примітка:</strong> Це застарілий атрибут. Натомість краще використовувати CSS-властивість {{ Cssxref("border") }}.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>buffered</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td>Містить тривалість часу буферованого медіафайлу.</td>
+  </tr>
+  <tr>
+   <td><code>challenge</code></td>
+   <td>{{ HTMLElement("keygen") }}</td>
+   <td>A challenge string that is submitted along with the public key.</td>
+  </tr>
+  <tr>
+   <td><code>charset</code></td>
+   <td>{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}</td>
+   <td>Оголошує кодування символів сторінки або скрипту.</td>
+  </tr>
+  <tr>
+   <td><code>checked</code></td>
+   <td>{{ HTMLElement("command") }}, {{ HTMLElement("input") }}</td>
+   <td>Вказує чи слід перевіряти елемент при завантаженні сторінки.</td>
+  </tr>
+  <tr>
+   <td><code>cite</code></td>
+   <td>{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}</td>
+   <td>Містить URI, що вказує на джерело цитати або зміни.</td>
+  </tr>
+  <tr>
+   <td><code>class</code></td>
+   <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td>
+   <td>Часто використовують з CSS для задання стилю елементів зі спільними властивостями.</td>
+  </tr>
+  <tr>
+   <td><code>code</code></td>
+   <td>{{ HTMLElement("applet") }}</td>
+   <td>Вказує URL файла класу аплету для завантаження та виконання.</td>
+  </tr>
+  <tr>
+   <td><code>codebase</code></td>
+   <td>{{ HTMLElement("applet") }}</td>
+   <td>Цей атрибут надає абсолютну чи відносну URL директорії, де зберігаються файли .class аплету.</td>
+  </tr>
+  <tr>
+   <td><code>color</code></td>
+   <td>{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }}</td>
+   <td>
+    <p>Цей атрибут задає колір тексту за назвою кольору або його кодом у шістнадцятковому форматі RRGGBB.</p>
+
+    <div class="note">
+    <p><strong>Примітка:</strong> Це застарілий атрибут. Натомість краще використовувати CSS-власивість {{ Cssxref("color") }}</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>cols</code></td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>Задає кількість колонок в текстовому полі.</td>
+  </tr>
+  <tr>
+   <td><code>colspan</code></td>
+   <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td>
+   <td>Цей атрибут задає кількість стовпців, яку займає одна комірка таблиці вширину.</td>
+  </tr>
+  <tr>
+   <td><code>content</code></td>
+   <td>{{ HTMLElement("meta") }}</td>
+   <td>Знаення, пов'язане з <code>http-equiv</code> або <code>name</code> залежно від контексту.</td>
+  </tr>
+  <tr>
+   <td><code>contenteditable</code></td>
+   <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td>
+   <td>Вказує чи можна змінювати вміст елементу.</td>
+  </tr>
+  <tr>
+   <td><code>contextmenu</code></td>
+   <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td>
+   <td>Визначає ID елементу {{ HTMLElement("menu") }}, який слугуватиме контекстним меню елемента.</td>
+  </tr>
+  <tr>
+   <td><code>controls</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td>Вказує чи браузер відображатиме панель управління медіа користувачеві.</td>
+  </tr>
+  <tr>
+   <td><code>coords</code></td>
+   <td>{{ HTMLElement("area") }}</td>
+   <td>Набір значень, що задають координати активної області.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}, {{ HTMLElement("video") }}</td>
+   <td>Визначає як елемент поводиться з запитами до різних джерел.</td>
+  </tr>
+  <tr>
+   <td><code>data</code></td>
+   <td>{{ HTMLElement("object") }}</td>
+   <td>Задає URL джерела.</td>
+  </tr>
+  <tr>
+   <td><code>data-*</code></td>
+   <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td>
+   <td>Дозволяє вам застосовувати до HTML-елемента користувацькі атрибути.</td>
+  </tr>
+  <tr>
+   <td><code>datetime</code></td>
+   <td>{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}</td>
+   <td>Вказує час та дату, пов'язані з елементтом.</td>
+  </tr>
+  <tr>
+   <td><code>default</code></td>
+   <td>{{ HTMLElement("track") }}</td>
+   <td>Indicates that the track should be enabled unless the user's preferences indicate something different.</td>
+  </tr>
+  <tr>
+   <td><code>defer</code></td>
+   <td>{{ HTMLElement("script") }}</td>
+   <td>Indicates that the script should be executed after the page has been parsed.</td>
+  </tr>
+  <tr>
+   <td><code>dir</code></td>
+   <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td>
+   <td>Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)</td>
+  </tr>
+  <tr>
+   <td><code>dirname</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>disabled</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Вказує на можливість взаємодії користувача з елементом.</td>
+  </tr>
+  <tr>
+   <td><code>download</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td>
+   <td>Вказує на те, що посилання використовується для завантаження.</td>
+  </tr>
+  <tr>
+   <td><code>draggable</code></td>
+   <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td>
+   <td>Визначає чи можна перетягувати елемент.</td>
+  </tr>
+  <tr>
+   <td><code>dropzone</code></td>
+   <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td>
+   <td>Вказує чи може елемент приймати перетягування на нього контенту.</td>
+  </tr>
+  <tr>
+   <td><code>enctype</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>Defines the content type of the form date when the <code>method</code> is POST.</td>
+  </tr>
+  <tr>
+   <td><code>for</code></td>
+   <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td>
+   <td>Описує елементи, які належать до цього елементу.</td>
+  </tr>
+  <tr>
+   <td><code>form</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Визначає форму, яка є батьківською для цього елементу.</td>
+  </tr>
+  <tr>
+   <td><code>formaction</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("button") }}</td>
+   <td>Indicates the action of the element, overriding the action defined in the {{ HTMLElement("form") }}.</td>
+  </tr>
+  <tr>
+   <td><code>headers</code></td>
+   <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td>
+   <td>IDs of the <code>&lt;th&gt;</code> elements which applies to this element.</td>
+  </tr>
+  <tr>
+   <td><code>height</code></td>
+   <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td>
+   <td>
+    <p>Задає висоту перелічених елементів. Для інших елементів краще використовувати CSS-властивість {{cssxref("height")}}.</p>
+
+    <div class="note">
+    <p><strong>Примітка:</strong> У деяких випадках, зокрема для {{ HTMLElement("div") }}, це застарілий атрибут. Натомість для нього краще застосовувати CSS-властивість {{ Cssxref("height") }}.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>hidden</code></td>
+   <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td>
+   <td>Не дозволяє рендеринг певного елемента, але не скасовує рендеринг дочірніх елементів, наприклад, скриптових і активних.</td>
+  </tr>
+  <tr>
+   <td><code>high</code></td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>Вказує нижню межу верхнього діапазону.</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}</td>
+   <td> URL посилання на певне джерело.</td>
+  </tr>
+  <tr>
+   <td><code>hreflang</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td>
+   <td>Вказує на мову сторінки, на яку буде перейдено за посиланням.</td>
+  </tr>
+  <tr>
+   <td><code>http-equiv</code></td>
+   <td>{{ HTMLElement("meta") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>icon</code></td>
+   <td>{{ HTMLElement("command") }}</td>
+   <td>Задає картинку, яка відображає команду.</td>
+  </tr>
+  <tr>
+   <td><code>id</code></td>
+   <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td>
+   <td>Часто використовується з CSS для задання стилю конкретному елементу. Значення цього атрибути повинно бути унікальним.</td>
+  </tr>
+  <tr>
+   <td><code>integrity</code></td>
+   <td>{{ HTMLElement("link") }}, {{ HTMLElement("script") }} </td>
+   <td>
+    <p>Додатковий рівень захисту, дає змогу браузеру ідентифікувати, чи він стягує потрібний файл.</p>
+
+    <p><a href="/en-US/docs/">Посилання MDN</a></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>ismap</code></td>
+   <td>{{ HTMLElement("img") }}</td>
+   <td>Вказує на те, що зображення є частиною заображення серверної карти.</td>
+  </tr>
+  <tr>
+   <td><code>itemprop</code></td>
+   <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>keytype</code></td>
+   <td>{{ HTMLElement("keygen") }}</td>
+   <td>Визначає тип генерованого ключа.</td>
+  </tr>
+  <tr>
+   <td><code>kind</code></td>
+   <td>{{ HTMLElement("track") }}</td>
+   <td>Specifies the kind of text track.</td>
+  </tr>
+  <tr>
+   <td><code>label</code></td>
+   <td>{{ HTMLElement("track") }}</td>
+   <td>Specifies a user-readable title of the text track.</td>
+  </tr>
+  <tr>
+   <td><code>lang</code></td>
+   <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td>
+   <td>Defines the language used in the element.</td>
+  </tr>
+  <tr>
+   <td><code>language</code></td>
+   <td>{{ HTMLElement("script") }}</td>
+   <td>Defines the script language used in the element.</td>
+  </tr>
+  <tr>
+   <td><code>list</code></td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>Identifies a list of pre-defined options to suggest to the user.</td>
+  </tr>
+  <tr>
+   <td><code>loop</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}</td>
+   <td>Indicates whether the media should start playing from the start when it's finished.</td>
+  </tr>
+  <tr>
+   <td><code>low</code></td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>Indicates the upper bound of the lower range.</td>
+  </tr>
+  <tr>
+   <td><code>manifest</code></td>
+   <td>{{ HTMLElement("html") }}</td>
+   <td>Specifies the URL of the document's cache manifest.</td>
+  </tr>
+  <tr>
+   <td><code>max</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td>
+   <td>Indicates the maximum value allowed.</td>
+  </tr>
+  <tr>
+   <td><code>maxlength</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Defines the maximum number of characters allowed in the element.</td>
+  </tr>
+  <tr>
+   <td><code>media</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}</td>
+   <td>Specifies a hint of the media for which the linked resource was designed.</td>
+  </tr>
+  <tr>
+   <td><code>method</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>Defines which <a href="/en-US/docs/Web/HTTP">HTTP</a> method to use when submitting the form. Can be <code>GET</code> (default) or <code>POST</code>.</td>
+  </tr>
+  <tr>
+   <td><code>min</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td>
+   <td>Indicates the minimum value allowed.</td>
+  </tr>
+  <tr>
+   <td><code>multiple</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
+   <td>Indicates whether multiple values can be entered in an input of the type <code>email</code> or <code>file</code>.</td>
+  </tr>
+  <tr>
+   <td><code>muted</code></td>
+   <td>{{ HTMLElement("video") }}</td>
+   <td>Indicates whether the audio will be initially silenced on page load.</td>
+  </tr>
+  <tr>
+   <td><code>name</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}</td>
+   <td>Name of the element. For example used by the server to identify the fields in form submits.</td>
+  </tr>
+  <tr>
+   <td><code>novalidate</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>This attribute indicates that the form shouldn't be validated when submitted.</td>
+  </tr>
+  <tr>
+   <td><code>open</code></td>
+   <td>{{ HTMLElement("details") }}</td>
+   <td>Indicates whether the details will be shown on page load.</td>
+  </tr>
+  <tr>
+   <td><code>optimum</code></td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>Indicates the optimal numeric value.</td>
+  </tr>
+  <tr>
+   <td><code>pattern</code></td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>Defines a regular expression which the element's value will be validated against.</td>
+  </tr>
+  <tr>
+   <td><code>ping</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>placeholder</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Дає підказку користувачу про те, які дані треба вводити в поле.</td>
+  </tr>
+  <tr>
+   <td><code>poster</code></td>
+   <td>{{ HTMLElement("video") }}</td>
+   <td>URL, що відображає рамку постера під час програвання або пошуку.</td>
+  </tr>
+  <tr>
+   <td><code>preload</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td>Вказує, чи потребує попереднього завантаження контент або його частина.</td>
+  </tr>
+  <tr>
+   <td><code>radiogroup</code></td>
+   <td>{{ HTMLElement("command") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>readonly</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Вказує чи можна редагувати цей елемент.</td>
+  </tr>
+  <tr>
+   <td><code>rel</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td>
+   <td>Визнчає взаємозв'язок даного об'єкту та об'єкту посилання.</td>
+  </tr>
+  <tr>
+   <td><code>required</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Вказує чи заповнення цього елементу є обов'язковим.</td>
+  </tr>
+  <tr>
+   <td><code>reversed</code></td>
+   <td>{{ HTMLElement("ol") }}</td>
+   <td>Вказує як відображати елементи списку: у порядку зростання чи спадання.</td>
+  </tr>
+  <tr>
+   <td><code>rows</code></td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>Визначає кількість рядків у текстовому полі.</td>
+  </tr>
+  <tr>
+   <td><code>rowspan</code></td>
+   <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td>
+   <td>Визначає кількість рядків, які займає одна комірка таблиці.</td>
+  </tr>
+  <tr>
+   <td><code>sandbox</code></td>
+   <td>{{ HTMLElement("iframe") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scope</code></td>
+   <td>{{ HTMLElement("th") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scoped</code></td>
+   <td>{{ HTMLElement("style") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>seamless</code></td>
+   <td>{{ HTMLElement("iframe") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>selected</code></td>
+   <td>{{ HTMLElement("option") }}</td>
+   <td>Задає значення, яке буде обрано при звантаженні сторінки.</td>
+  </tr>
+  <tr>
+   <td><code>shape</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>size</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
+   <td>Задає ширину елементу (у пікселях). Якщо елемент є стрічкою або текстом чи паролем, то цей атрибут задає кількість символів в ширину.</td>
+  </tr>
+  <tr>
+   <td><code>sizes</code></td>
+   <td>{{ HTMLElement("link") }}, {{ HTMLElement("img") }}, {{ HTMLElement("source") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>slot</code></td>
+   <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td>
+   <td>Відводить елементу місце у тіньовій моделі документу.</td>
+  </tr>
+  <tr>
+   <td><code>span</code></td>
+   <td>{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>spellcheck</code></td>
+   <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td>
+   <td>Вказує чи дозволена для цього елемента перевірка правопису.</td>
+  </tr>
+  <tr>
+   <td><code>src</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}</td>
+   <td>URL вбудованого контенту.</td>
+  </tr>
+  <tr>
+   <td><code>srcdoc</code></td>
+   <td>{{ HTMLElement("iframe") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>srclang</code></td>
+   <td>{{ HTMLElement("track") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>srcset</code></td>
+   <td>{{ HTMLElement("img") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>start</code></td>
+   <td>{{ HTMLElement("ol") }}</td>
+   <td>Задає значення початку відліку, якщо воно повинно бутит відмінним від "1".</td>
+  </tr>
+  <tr>
+   <td><code>step</code></td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>style</code></td>
+   <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td>
+   <td>Визначає CSS-стилі, які переписуюють попередньо задані властивості.</td>
+  </tr>
+  <tr>
+   <td><code>summary</code></td>
+   <td>{{ HTMLElement("table") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>tabindex</code></td>
+   <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td>
+   <td>Переписує порядок шарів сторінки за замовчуванням та встановлює свій.</td>
+  </tr>
+  <tr>
+   <td><code>target</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>title</code></td>
+   <td><a href="/en-US/docs/HTML/Global_attributes">Глобальний атрибут</a></td>
+   <td>Текст, який показується при наведенні курсору на елемент.</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}</td>
+   <td>Визначає тип даних елементу.</td>
+  </tr>
+  <tr>
+   <td><code>usemap</code></td>
+   <td>{{ HTMLElement("img") }},  {{ HTMLElement("input") }}, {{ HTMLElement("object") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>value</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}</td>
+   <td>Задає величину, що буде відображатись за замовчуванням після завантаження сторінки.</td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td>
+   <td>
+    <p>Задає ширину для всіх зазначених у списку елементів.</p>
+
+    <div class="note">
+    <p><strong>Примітка:</strong> У інших випадках, наприклад для елементу  {{ HTMLElement("div") }}, цей атрибут застарілий, і краще використовувати CSS-властивість {{ Cssxref("width") }}.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>wrap</code></td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>Вказує, чи потрібно додавати нові рядки до тексту.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Content_versus_IDL_attributes">Content versus IDL attributes</h2>
+
+<p>In HTML, most attributes have two faces: the <strong>content attribute</strong> and the <strong>IDL attribute</strong>.</p>
+
+<p>The content attribute is the attribute as you set it from the content (the HTML code) and you can set it or get it via {{domxref("element.setAttribute()")}} or {{domxref("element.getAttribute()")}}. The content attribute is always a string even when the expected value should be an integer. For example, to set an {{HTMLElement("input")}} element's <code>maxlength</code> to 42 using the content attribute, you have to call <code>setAttribute("maxlength", "42")</code> on that element.</p>
+
+<p>The IDL attribute is also known as a JavaScript property. These are the attributes you can read or set using JavaScript properties like <code class="moz-txt-verticalline">element.foo</code>. The IDL attribute is always going to use (but might transform) the underlying content attribute to return a value when you get it and is going to save something in the content attribute when you set it. In other words, the IDL attributes, in essence, reflect the content attributes.</p>
+
+<p>Most of the time, IDL attributes will return their values as they are really used. For example, the default <code>type</code> for {{HTMLElement("input")}} elements is "text", so if you set <code>input.type="foobar"</code>, the <code>&lt;input&gt;</code> element will be of type text (in the appearance and the behavior) but the "type" content attribute's value will be "foobar". However, the <code>type</code> IDL attribute will return the string "text".</p>
+
+<p>IDL attributes are not always strings; for example, <code>input.maxlength</code> is a number (a signed long). When using IDL attributes, you read or set values of the desired type, so <code>input.maxlength</code> is always going to return a number and when you set <code>input.maxlength</code> ,it wants a number. If you pass another type, it is automatically converted to a number as specified by the standard JavaScript rules for type conversion.</p>
+
+<p>IDL attributes can <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">reflect other types</a> such as unsigned long, URLs, booleans, etc. Unfortunately, there are no clear rules and the way IDL attributes behave in conjunction with their corresponding content attributes depends on the attribute. Most of the time, it will follow <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">the rules laid out in the specification</a>, but sometimes it doesn't. HTML specifications try to make this as developer-friendly as possible, but for various reasons (mostly historical), some attributes  behave oddly (<code>select.size</code>, for example) and you should read the specifications to understand how exactly they behave.</p>
+
+<h2 id="Також_читай">Також читай</h2>
+
+<ul>
+ <li><a href="/en-US/docs/HTML/Element">HTML elements</a></li>
+</ul>
diff --git a/files/uk/web/html/block-level_elements/index.html b/files/uk/web/html/block-level_elements/index.html
new file mode 100644
index 0000000000..2e1b9eef0f
--- /dev/null
+++ b/files/uk/web/html/block-level_elements/index.html
@@ -0,0 +1,133 @@
+---
+title: Блокові елементи
+slug: Web/HTML/Block-level_elements
+tags:
+  - HTML
+  - HTML5
+translation_of: Web/HTML/Block-level_elements
+---
+<p><span class="seoSummary">В HTML (<strong>Hypertext Markup Language </strong>— мові гіпертекстової розмітки) елементи зазвичай бувають або блокові, або <a href="/en-US/docs/HTML/Inline_elements">рядкові</a>. Блокові елементи, або блок-елементи, займають всю ширину батьківського блока (контейнера), утворюючи таким чином блок. У цій статті пояснюється, як це працює. </span></p>
+
+<p>Браузери зазвичай відображають кожний блоковий елемент з нового рядка. Це можна уявити як стопку блоків, у якій всі блоки розміщуються над або один під одним. </p>
+
+<div class="note">
+<p>Блокові елементи завжди починаються з нового рядка та займають всю доступну ширину (розтягуються ліворуч та праворуч настільки, наскільки це дозволяє ширина вікна браузера).</p>
+</div>
+
+<p>Приклади нижче показують, як працюють блокові елементи: </p>
+
+<h2 id="Block-level_Example" name="Block-level_Example">Блокові елементи</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Цей параграф є блоковим елементом; колір його бекграунду змінений, щоб показати батьківський елемент параграфа.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p { background-color: #8ABB55; }
+</pre>
+
+<p>{{ EmbedLiveSample('Block-level_Example') }}</p>
+
+<h2 id="Застосування">Застосування</h2>
+
+<ul>
+ <li>Блокові елементи можуть існувати тільки всередині елементу {{ HTMLElement("body") }}.</li>
+</ul>
+
+<h2 id="Блокові_проти_рядкових">Блокові проти рядкових</h2>
+
+<p>Є кілька ключових відмінностей між блоковими і рядковими елементами:</p>
+
+<dl>
+ <dt>Форматування</dt>
+ <dd>Типово, блоковий елемент починається з нового рядка, тоді як рядковий елемент може починатися будь-де в рядку. </dd>
+ <dt>Модель контенту</dt>
+ <dd>Зазвичай блокові елементи можуть містити в собі рядкові елементи, а також інші блокові елементи. Ця структурна відмінність відображає ідею, що блокові елементи утворюють "більші" структури, ніж рядкові елементи.</dd>
+</dl>
+
+<p>Розрізнення "блокові елементи vs. рядкові елементи" вживається в специфікаціях HTML до версії 4.01. В HTML5 це протиставлення заміщене більш складними поняттями <a href="/en-US/docs/HTML/Content_categories">категорій контенту</a>. Блокові елементи здебільшого відповідають категорії <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a> (розміщення контенту) в HTML5, тоді як рядкові — категорії <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a> (текст і його розмітка), з декількома додатковими категоріями.</p>
+
+<h2 id="Елементи">Елементи</h2>
+
+<p>Нижче подається повний перелік усіх блокових елементів HTML (технічно, у нових елементів, представлених у HTML5, "блоковість" вже не визначається). </p>
+
+<div class="threecolumns">
+<dl>
+ <dt>{{ HTMLElement("address") }}</dt>
+ <dd>Контактна інформація.</dd>
+ <dt>{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Вміст статті.</dd>
+ <dt>{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Бічний контент.</dd>
+ <dt>{{ HTMLElement("blockquote") }}</dt>
+ <dd>Довга блок-цитата.</dd>
+ <dt>{{ HTMLElement("canvas") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Канва для малюнків.</dd>
+ <dt>{{ HTMLElement("dd") }}</dt>
+ <dd>Описує термін в переліку визначень.</dd>
+ <dt>{{ HTMLElement("div") }}</dt>
+ <dd>Поділ документа.</dd>
+ <dt>{{ HTMLElement("dl") }}</dt>
+ <dd>Перелік визначень.</dd>
+ <dt>{{ HTMLElement("dt") }}</dt>
+ <dd>Термін в переліку визначень.</dd>
+ <dt>{{ HTMLElement("fieldset") }}</dt>
+ <dd>Лейбл (назва) для набору полів.</dd>
+</dl>
+
+<dl>
+ <dt>{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Підпис зображення.</dd>
+ <dt>{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Групує медіаконтент з підписом (див. {{ HTMLElement("figcaption") }}).</dd>
+ <dt>{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Секція або футер сторінки. </dd>
+ <dt>{{ HTMLElement("form") }}</dt>
+ <dd>Форма введення.</dd>
+ <dt>{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}</dt>
+ <dd>Заголовки рівнів 1-6.</dd>
+ <dt>{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Секція або хедер сторінки.</dd>
+ <dt>{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Групує контент хедера.</dd>
+ <dt>{{ HTMLElement("hr") }}</dt>
+ <dd>Горизонтальна роздільна лінія.</dd>
+ <dt>{{ HTMLElement("li") }}</dt>
+ <dd>Пункт переліку.</dd>
+ <dt>{{ HTMLElement("main") }}</dt>
+ <dd>Містить основний контент, унікальний для цього документу.</dd>
+ <dt>{{ HTMLElement("nav") }}</dt>
+ <dd>Містить навігацію посилань. </dd>
+</dl>
+
+<dl>
+ <dt>{{ HTMLElement("noscript") }}</dt>
+ <dd>Контент, який буде відображатися, якщо скрипт не підтримується або вимкнений. </dd>
+ <dt>{{ HTMLElement("ol") }}</dt>
+ <dd>Нумерований список (перелік).</dd>
+ <dt>{{ HTMLElement("output") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Вихідні дані форми.</dd>
+ <dt>{{ HTMLElement("p") }}</dt>
+ <dd>Параграф.</dd>
+ <dt>{{ HTMLElement("pre") }}</dt>
+ <dd>Попередньо відформатований текст.</dd>
+ <dt>{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Секція веб-сторінки.</dd>
+ <dt>{{ HTMLElement("table") }}</dt>
+ <dd>Таблиця.</dd>
+ <dt>{{ HTMLElement("tfoot") }}</dt>
+ <dd>Футер таблиці.</dd>
+ <dt>{{ HTMLElement("ul") }}</dt>
+ <dd>Ненумерований список (перелік).</dd>
+ <dt>{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Відеоплеєр.</dd>
+</dl>
+</div>
+
+<h3 id="See_also" name="See_also"><br>
+ Також дивися:</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Inline_elements">Рядкові елементи</a></li>
+</ul>
diff --git a/files/uk/web/html/element/input/date/index.html b/files/uk/web/html/element/input/date/index.html
new file mode 100644
index 0000000000..1737d7786a
--- /dev/null
+++ b/files/uk/web/html/element/input/date/index.html
@@ -0,0 +1,510 @@
+---
+title: <input type="date">
+slug: Web/HTML/Element/input/date
+translation_of: Web/HTML/Element/input/date
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} елементи типу <strong><code>date</code></strong> створюють поле вводу дати з вбудованим інтерфейсом вибору.</span> Результатом вибору будуть рік, місяць та день, без часу. <code><a href="/en-US/docs/Web/HTML/Element/input/time">time</a></code> та <code><a href="/en-US/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code> поля підтримують вибір часу та дати і часу.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Ісходний код цих прикладів зберігається на GitHub. Якщо ви хотілиби присвятити час розвитку данних прикладів, клонуйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> і відправте нам pull-запит.</p>
+
+<p>UI віджет змінюється від оглядача к оглядачу; для перегляду сумісності дивіться {{anch("Browser compatibility")}}. Якщо оглядач не підтримує такий віджет, він буде відображений просто як <code><a href="/en-US/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;.</a></code></p>
+
+<p>Серед оглядачів які підтримуюсь кастомний інтерфейс вибору дати є Chrome/Opera, який виглядає наступним чином:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14909/date-picker-chrome.png" style="display: block; height: 220px; margin: 0px auto; width: 275px;"></p>
+
+<p>Edge вибор дати виглядає так:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14911/date-picker-edge.png" style="display: block; margin: 0 auto;"></p>
+
+<p>У Firefox вибір дати буде таким:</p>
+
+<p><img alt="Datepicker UI in firefox" src="https://mdn.mozillademos.org/files/15644/firefox_datepicker.png" style="display: block; margin: 0 auto;"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>{{domxref("DOMString")}} представляє дату у YYYY-MM-DD форматі, або пустим</td>
+  </tr>
+  <tr>
+   <td><strong>Події</strong></td>
+   <td>{{event("change")}} та {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Підримка атрибутів</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, та {{htmlattrxref("step", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL атрибути</strong></td>
+   <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>.</td>
+  </tr>
+  <tr>
+   <td><strong>Методи</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Значення">Значення</h2>
+
+<p>{{domxref("DOMString")}} представляє значення дати введенної у input. Формат дати описаний у {{SectionOnPage("/en-US/docs/Web/HTML/Date_and_time_formats", "Format of a valid date string")}}.</p>
+
+<p>Ви можете встановити значення за замовчуванням встановивши дату в атрибут {{htmlattrxref("value", "input")}} , наприклад:</p>
+
+<pre class="brush: html">&lt;input id="date" type="date" value="2017-06-01"&gt;</pre>
+
+<p>{{EmbedLiveSample('Value', 600, 40)}}</p>
+
+<p>Треба пам'ятати що відображений формат відрізняється від актуального <code>value</code> — відображення формату дати буде вибрано на основі вибраної локалі користувальницького оглядача, тоді як <code>value</code> дати завжди є у форматі <code>yyyy-mm-dd</code>.</p>
+
+<p>Ви також можете взяти чи встановити значення дати у JavaScript використовуючи властивість елементу {{domxref("HTMLInputElement.value", "value")}} , наприклад:</p>
+
+<pre class="brush: js">var dateControl = document.querySelector('input[type="date"]');
+dateControl.value = '2017-06-01';</pre>
+
+<p>Цей код знаходить перший {{HTMLElement("input")}} елемент <code>type</code> якого є <code>date</code> і встановлює його значення 2017-06-01 (June 1, 2017).</p>
+
+<h2 id="Додаткові_атрибути">Додаткові атрибути</h2>
+
+<p>Додатково з загальними атрибутами {{HTMLElement("input")}} <code>"date"</code> надає наступні додаткові атрибути:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Атрибут</th>
+   <th scope="col">Опис</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("max")}}</code></td>
+   <td>Максимальна дата яка може бути введена</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("min")}}</code></td>
+   <td>Мінімальна дата</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>Чи є у інпута контент чи нема, він лише для считування</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("step")}}</code></td>
+   <td>Інтервал </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3>
+
+<p>Остання дата. Якщо встановлена дата {{htmlattrxref("value", "input")}} більше ніж ця дата, елемент не пройде <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. Якщо значення <code>max</code> не валідна строка формату <code>yyyy-MM-dd</code>, тоді елемент не буде мати максимальне обмеження.</p>
+
+<p>Це значення має вказувати дату пізнішу або поточну вказанному атрибуту <code>min</code>.</p>
+
+<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3>
+
+<p>Мінімальна дата; дати раніші за вказану не пройдуть <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. Якщо значення  <code>min</code> атрибуту має неавлідний формат <code>yyyy-MM-dd</code>, тоді елемент не матиме мінімального обмеження.</p>
+
+<p>Це значення вказує меньшу або еквівалентну значенню атрибута <code>max</code>.</p>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+
+<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+
+<p>Для <code>date</code> інпутів, значення <code>step</code> вказується в днях, скалярні до 86,400,000 (мілісекунди). За замовчуванная <code>step</code> має 1, означаюче 1 день.</p>
+
+<div class="blockIndicator note">
+<p>Вказання <code>any</code> для <code>step</code> атрибуту робить той самий ефект як і <code>1</code>.</p>
+</div>
+
+<h2 id="Використання_date_інпутів">Використання date інпутів</h2>
+
+<p>Поле введення дати зручні на перший погляд — вони надають легкий UI(користувальницький інтерфейс) для вибору дати, і нормалізують формат даних для відправки на сервер, незважаючи на локаль користувача. Однак, існують проблеми підтримки деякими оглядачами <code>&lt;input type="date"&gt;</code>.</p>
+
+<p>Подивимось на базові та комлексні використання <code>&lt;input type="date"&gt;</code>, щодо сумісності оглядачів ви можете порадитись за посиланням (see {{anch("Handling browser support")}}). Звичайно, з часом підтримка в оглядачах розповсюдиться. і усі проблеми будуть вирішені.</p>
+
+<h3 id="Базові_використання_date">Базові використання date</h3>
+
+<p>Найпростіше використання <code>&lt;input type="date"&gt;</code> передбачає базову <code>&lt;input&gt;</code> і {{htmlelement("label")}} комбінацію елементів, як бачимо нижче:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="bday"&gt;Enter your birthday:&lt;/label&gt;
+    &lt;input type="date" id="bday" name="bday"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Basic_uses_of_date', 600, 40)}}</p>
+
+<h3 id="Встановлення_мінімальной_і_максимальної_дати">Встановлення мінімальной і максимальної дати</h3>
+
+<p>Ви можете використовувати {{htmlattrxref("min", "input")}} і {{htmlattrxref("max", "input")}} атрибути щоб обмежити дати які будуть вибрані користувачем. В наступному прикладі ми встановлюємо мінімальну дату <code>2017-04-01</code> і максимальну дату <code>2017-04-30</code>:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="party"&gt;Choose your preferred party date:&lt;/label&gt;
+    &lt;input type="date" id="party" name="party" min="2017-04-01" max="2017-04-30"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40)}}</p>
+
+<p>Результатом будуть лише дні в Квітні 2017го які можно буде вибрати — тільки "дні", частина текстового значення будуть можливі для зміни, дати поза Квітнем не будуть проскролюватись у віджеті.</p>
+
+<div class="note">
+<p><strong>Примітка</strong>: Ви можете використати {{htmlattrxref("step", "input")}} атрибут для того щоб вказати інтервал зміни днів (наприклад ви хотіли б щоб можно були вибрати лише Неділю). Однак, це не завжди ефективно в тих чи іншіх реалізаціях.</p>
+</div>
+
+<h3 id="Контроль_розміру_input">Контроль розміру input</h3>
+
+<p><code>&lt;input type="date"&gt;</code> не підтримує розмір форми атрибутами наприклад {{htmlattrxref("size", "input")}}. Зверніться до <a href="/en-US/docs/Web/CSS">CSS</a> для контролю розміру елементу.</p>
+
+<h2 id="Валідація">Валідація</h2>
+
+<p>За замовчуванням, <code>&lt;input type="date"&gt;</code> не додає жодної валідації на введення значення. UI реалізація загалом не дозволяє уведення будь чого що не є датою — що є добре — але ви всеодно можете лишати поле пустим чи (в оглядачах де інпут відображається простим типом <code>text</code>) ввести неправильну дату (наприклад 32ге Квітня).</p>
+
+<p>Якщо ви використовуєте {{htmlattrxref("min", "input")}} і {{htmlattrxref("max", "input")}} для обмеження введення дат (дивіться {{anch("Setting maximum and minimum dates")}}), підтримуючі оглядачі відобразять помилку якщо ви спробуєте відправити дату поза меж вказаних в атрибутах. Однак, перевірте результат щоб запевнитись що значення всередені цих дат, тому що вони можуть не підтримуватись пристрієм користувача.</p>
+
+<p>В додаток, ви можете використовувати {{htmlattrxref("required", "input")}} атрибут щоб зробити заповнення дати обьв'язковим — знову ж, буде відображена помилка якщо користувач захоче відправити пусте поле. Принаймні, це буде працювати у більшості оглядачів.</p>
+
+<p>Давайте розглянемо приклад — ми встановили мінімальну і максимальну дату, і також зробили його обов'язковим:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="party"&gt;Choose your preferred party date (required, April 1st to 20th):&lt;/label&gt;
+    &lt;input type="date" id="party" name="party" min="2017-04-01" max="2017-04-20" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Якщо ви спробуєте відправити форму з незаповненою датою(або з датою поза межами), оглядач відобразить помилку. Спробуйте це самі зробити для перевірки:</p>
+
+<p>{{EmbedLiveSample('Validation', 600, 100)}}</p>
+
+<p>Це скріншот приклади оглядача без підтримки віджету дати:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14913/date-picker-chrome-error-message.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>CSS використаний нижче в прикладі. Ми використовуєм правила {{cssxref(":valid")}} та {{cssxref(":invalid")}} CSS щоб стилізувати відображення валідного чи невалідного введенного значення поля. Ми встановлюємо іконку на {{htmlelement("span")}} біля інпуту, не на самий інпут, тому що у Chrome створений контент розміщений всередені контролю форми, і не може бути застилізований чи відображений коректно.</p>
+
+<pre class="brush: css">div {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+}
+
+label {
+  display: inline-block;
+  width: 300px;
+}
+
+input:invalid+span:after {
+    content: '✖';
+    padding-left: 5px;
+}
+
+input:valid+span:after {
+    content: '✓';
+    padding-left: 5px;
+}</pre>
+
+<div class="warning">
+<p><strong>Важливо</strong>: HTML валідація форми не замінює скрипти які перевіряють чи буле введена інформація у коректному форматі. Це достатньо простий метод щоб додати корекцію до HTML, їх можливо обійти , чи видалити зовсім. Якщо ваша серверна сторона не перевірить відправлені данні, це може бути катастрофа (данні можуть бути дуже великого розміру, або неправильного типу, вам можуть завантажити скрипт взлому і так далі).</p>
+</div>
+
+<h2 id="Обробка_підтримки_оглядачів">Обробка підтримки оглядачів</h2>
+
+<p>Як згадано раніше, більша частина проблем з використанням інпуту дати описани  у {{anch("Browser compatibility", "browser support")}}. Як приклад, дата пікер у Firefox для Android виглядає так:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14915/date-picker-fxa.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Непідтримуючи оглядачі точно деградують інпут, це створює проблеми у якості інтерфейсу користувача (представлеий віджет буде іншим), і обробкою даних.</p>
+
+<p>Наступна проблема це більш серьозна; як згадували раніше, за інпутом дати, данні завжди нормалізуються у формат <code>yyyy-mm-dd</code>. З текстовим інпутом оглядач не підтримує формат введених даних, і є багато прикладів як люди вводять дати, наприклад:</p>
+
+<ul>
+ <li><code>ddmmyyyy</code></li>
+ <li><code>dd/mm/yyyy</code></li>
+ <li><code>mm/dd/yyyy</code></li>
+ <li><code>dd-mm-yyyy</code></li>
+ <li><code>mm-dd-yyyy</code></li>
+ <li><code>Month dd yyyy</code></li>
+</ul>
+
+<p>Єдиний спосіб стосовно цього є лише введення атрибуту {{htmlattrxref("pattern", "input")}}. Якщо інпут дати не використовує цей атрибут, то текстовий буде. Наприклад, розгляньте код у непідтримуючих оглядачах:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="bday"&gt;Enter your birthday:&lt;/label&gt;
+    &lt;input type="date" id="bday" name="bday" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Handling_browser_support', 600, 100)}}</p>
+
+<p>Якщо ви спробуєте відправити це, ви побачете помилку (інпут підсвітеться як невалідний) якщо ви ввели данні які не збігаються з шаблоном <code>nnnn-nn-nn</code>, де <code>n</code> номер від 0 до 9. Звичайно, це не зупинить людей від введення неправильної дати, чи введення у неправильному форматі, як <code>yyyy-dd-mm</code> (де ми очикуємо <code>yyyy-mm-dd</code>). Тож всеж таки маємо проблему.</p>
+
+<div class="hidden">
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+}
+
+input:invalid + span {
+  position: relative;
+}
+
+input:invalid + span:after {
+  content: '✖';
+  position: absolute;
+  right: -18px;
+}
+
+input:valid + span {
+  position: relative;
+}
+
+input:valid + span:after {
+  content: '✓';
+  position: absolute;
+  right: -18px;
+}</pre>
+</div>
+
+<p>Найкращий шлях опрацьовувати дати в формах в крос-браузерному форматі на даний момент є введення користувачем дня, місяця, і року в окремих елементах ({{htmlelement("select")}}; (дивіться далі реалізацію), або використовуючи JavaScript бібліотеку <a href="https://jqueryui.com/datepicker/">jQuery date picker</a>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>В цьому прикладі ми створюємо два набори UI елементів для вибору дат: рідний <code>&lt;input type="date"&gt;</code> і набір із трьох {{htmlelement("select")}} елементів для вибору дати в тих оглядачах які не підтримують рідний date інпут.</p>
+
+<p>{{EmbedLiveSample('Examples', 600, 100)}}</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>HTML виглядає так:</p>
+
+<pre class="brush: html">&lt;form&gt;
+    &lt;div class="nativeDatePicker"&gt;
+      &lt;label for="bday"&gt;Enter your birthday:&lt;/label&gt;
+      &lt;input type="date" id="bday" name="bday"&gt;
+      &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;p class="fallbackLabel"&gt;Enter your birthday:&lt;/p&gt;
+    &lt;div class="fallbackDatePicker"&gt;
+      &lt;span&gt;
+        &lt;label for="day"&gt;Day:&lt;/label&gt;
+        &lt;select id="day" name="day"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;label for="month"&gt;Month:&lt;/label&gt;
+        &lt;select id="month" name="month"&gt;
+          &lt;option selected&gt;January&lt;/option&gt;
+          &lt;option&gt;February&lt;/option&gt;
+          &lt;option&gt;March&lt;/option&gt;
+          &lt;option&gt;April&lt;/option&gt;
+          &lt;option&gt;May&lt;/option&gt;
+          &lt;option&gt;June&lt;/option&gt;
+          &lt;option&gt;July&lt;/option&gt;
+          &lt;option&gt;August&lt;/option&gt;
+          &lt;option&gt;September&lt;/option&gt;
+          &lt;option&gt;October&lt;/option&gt;
+          &lt;option&gt;November&lt;/option&gt;
+          &lt;option&gt;December&lt;/option&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;label for="year"&gt;Year:&lt;/label&gt;
+        &lt;select id="year" name="year"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+    &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Назви місяців жорстко закодовані (тому що вони завжди однакові), коли дні і роки динамічно згенеровані залежно від того який місяць і рік вибраний, і поточний рік (дивіться коментарі коду нижче для детального пояснення як ці функції працюють).</p>
+
+<div class="hidden">
+<pre class="brush: css">input:invalid+span:after {
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+</div>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Друга частина коду розраховує чи підтримує оглядач <code>&lt;input type="date"&gt;</code>, ми створюєм {{htmlelement("input")}} елемент, із <code>type</code> <code>date</code>, потім одразу перевіряємо який тип було встановлено — непідтримуючі оглядачі автоматично повернуть тип <code>text</code>, тому що <code>date</code> тип автоматично перетворюється на <code>text</code>. Якщо <code>&lt;input type="date"&gt;</code> не підтримується, ми приховуємо рідний інпут і показуєм UI ({{htmlelement("select")}}) замість нього.</p>
+
+<pre class="brush: js">// define variables
+var nativePicker = document.querySelector('.nativeDatePicker');
+var fallbackPicker = document.querySelector('.fallbackDatePicker');
+var fallbackLabel = document.querySelector('.fallbackLabel');
+
+var yearSelect = document.querySelector('#year');
+var monthSelect = document.querySelector('#month');
+var daySelect = document.querySelector('#day');
+
+// hide fallback initially
+fallbackPicker.style.display = 'none';
+fallbackLabel.style.display = 'none';
+
+// test whether a new date input falls back to a text input or not
+var test = document.createElement('input');
+test.type = 'date';
+
+// if it does, run the code inside the if() {} block
+if(test.type === 'text') {
+  // hide the native picker and show the fallback
+  nativePicker.style.display = 'none';
+  fallbackPicker.style.display = 'block';
+  fallbackLabel.style.display = 'block';
+
+  // populate the days and years dynamically
+  // (the months are always the same, therefore hardcoded)
+  populateDays(monthSelect.value);
+  populateYears();
+}
+
+function populateDays(month) {
+  // delete the current set of &lt;option&gt; elements out of the
+  // day &lt;select&gt;, ready for the next set to be injected
+  while(daySelect.firstChild){
+    daySelect.removeChild(daySelect.firstChild);
+  }
+
+  // Create variable to hold new number of days to inject
+  var dayNum;
+
+  // 31 or 30 days?
+  if(month === 'January' || month === 'March' || month === 'May' || month === 'July' || month === 'August' || month === 'October' || month === 'December') {
+    dayNum = 31;
+  } else if(month === 'April' || month === 'June' || month === 'September' || month === 'November') {
+    dayNum = 30;
+  } else {
+  // If month is February, calculate whether it is a leap year or not
+    var year = yearSelect.value;
+    var isLeap = new Date(year, 1, 29).getMonth() == 1;
+    isLeap ? dayNum = 29 : dayNum = 28;
+  }
+
+  // inject the right number of new &lt;option&gt; elements into the day &lt;select&gt;
+  for(i = 1; i &lt;= dayNum; i++) {
+    var option = document.createElement('option');
+    option.textContent = i;
+    daySelect.appendChild(option);
+  }
+
+  // if previous day has already been set, set daySelect's value
+  // to that day, to avoid the day jumping back to 1 when you
+  // change the year
+  if(previousDay) {
+    daySelect.value = previousDay;
+
+    // If the previous day was set to a high number, say 31, and then
+    // you chose a month with less total days in it (e.g. February),
+    // this part of the code ensures that the highest day available
+    // is selected, rather than showing a blank daySelect
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 1;
+    }
+
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 2;
+    }
+
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 3;
+    }
+  }
+}
+
+function populateYears() {
+  // get this year as a number
+  var date = new Date();
+  var year = date.getFullYear();
+
+  // Make this year, and the 100 years before it available in the year &lt;select&gt;
+  for(var i = 0; i &lt;= 100; i++) {
+    var option = document.createElement('option');
+    option.textContent = year-i;
+    yearSelect.appendChild(option);
+  }
+}
+
+// when the month or year &lt;select&gt; values are changed, rerun populateDays()
+// in case the change affected the number of available days
+yearSelect.onchange = function() {
+  populateDays(monthSelect.value);
+}
+
+monthSelect.onchange = function() {
+  populateDays(monthSelect.value);
+}
+
+//preserve day selection
+var previousDay;
+
+// update what day has been set to previously
+// see end of populateDays() for usage
+daySelect.onchange = function() {
+  previousDay = daySelect.value;
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Remember that some years have 53 weeks in them (see <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">Weeks per year</a>)! You'll need to take this into consideration when developing production apps.</p>
+</div>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comments</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#date-state-(type=date)', '&lt;input type="date"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#date-state-(type=date)', '&lt;input type="date"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_оглядачами">Сумісність з оглядачами</h2>
+
+
+
+<p>{{Compat("html.elements.input.input-date")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">Date and Time picker tutorial</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Date_and_time_formats">Date and time formats used in HTML</a></li>
+</ul>
diff --git a/files/uk/web/html/element/input/datetime-local/index.html b/files/uk/web/html/element/input/datetime-local/index.html
new file mode 100644
index 0000000000..b8e88ea62e
--- /dev/null
+++ b/files/uk/web/html/element/input/datetime-local/index.html
@@ -0,0 +1,543 @@
+---
+title: <input type="datetime-local">
+slug: Web/HTML/Element/input/datetime-local
+translation_of: Web/HTML/Element/input/datetime-local
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">{{htmlelement("input")}} типу <strong><code>datetime-local</code></strong> створює елемент керування, який дозволяє користувачу легко вводити і дату, і час, включаючи рік, місяць, день і час у годинах і хвилинах. Застосовується часовий пояс користувача.</span> Вигляд елемента змінюється в загальному залежно від браузера; на даний час його підтримка є непостійною, для настільних пристроїв тільки Chrome/Opera й Edge, а для мобільних тільки найновіші браузери мають дієві його розробки. В інших браузерах вони занепали до простих елементів типу <code><a href="/en-US/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code>.</p>
+
+<p>Про підтримку секунд нема й мови.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-datetime-local.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Джерело цього інтерактивного прикладу зберегається в репозиторії GitHub. Якщо хочете зробити внесок у проект інтерактивних прикладів, будь ласка, зробіть клон <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>і відправте нам pull request.</p>
+
+<div class="note">
+<p><strong>Примітка:</strong> Через обмежену підтримку браузерами формату <code>datetime-local</code>, і відмінності в роботі елементів введення "input", на даний час, можливо, краще було би вживати якийсь фреймворк чи бібліотеку для їх відображення або використовувати ваш власний елемент введення. Іншим підходом може бути вживання окремих елементів <code>date</code> і <code>time</code>, кожен з яких підтримується ширше, ніж <code>datetime-local</code>.</p>
+</div>
+
+<p>Також деякі браузери для введення часу можуть вдаватися тільки до елемента текстового типу, що перевіряє, чи введені символи становлять правильні значення дати/часу перед відправленням їх на сервер, але небажано покладатися на цей підхід, оскільки його поведінку важко передбачити.</p>
+
+<p>Для тих із вас, хто не користується браузером із підтримкою <code>datetime-local</code>, елементи керування у Chrome/Opera виглядатимуть як на наступному знімку. Клацнувши справа значок стрілочки вниз, ви отримаєте вибирач дати, а час маєте ввести вручну.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14949/datetime-local-chrome.png" style="display: block; height: 224px; margin: 0px auto; width: 280px;"></p>
+
+<p>The Edge <code>datetime-local</code> control looks like the below; clicking the date and the time parts of the value bring up two separate pickers for you, so you can easily set both the date and the time. This is somewhat like having <code>date</code> and <code>time</code> widgets both created for you and merged into one.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14953/datetime-local-picker-edge1.png" style="display: block; height: 398px; margin: 0px auto; width: 320px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14955/datetime-local-picker-edge2.png" style="display: block; height: 394px; margin: 0px auto; width: 264px;"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>A {{domxref("DOMString")}} representing a date and time (in the local time zone), or empty.</td>
+  </tr>
+  <tr>
+   <td><strong>Events</strong></td>
+   <td>{{event("change")}} and {{event("input")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>Supported Common Attributes</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, and {{htmlattrxref("step", "input")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>IDL attributes</strong></td>
+   <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code>.</td>
+  </tr>
+  <tr>
+   <td><strong>Methods</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value">Value</h2>
+
+<p>A {{domxref("DOMString")}} representing the value of the date entered into the input. You can set a default value for the input by including a date and time inside the {{htmlattrxref("value", "input")}} attribute, like so:</p>
+
+<pre class="brush: html">&lt;label for="party"&gt;Enter a date and time for your party booking:&lt;/label&gt;
+&lt;input id="party" type="datetime-local" name="partydate" value="2017-06-01T08:30"&gt;</pre>
+
+<p>{{ EmbedLiveSample('Value', 600, 60) }}</p>
+
+<p>One thing to note is that the displayed date and time formats differ from the actual <code>value</code>; the displayed date and time are formatted according to the user's locale as reported by their operating system, whereas the date/time <code>value</code> is always formatted <code>yyyy-MM-ddThh:mm</code>. When the above value submitted to the server, for example, it will look like <code>"partydate=2017-06-01T08:30"</code>.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Also bear in mind that if such data is submitted via HTTP <code><a href="/en-US/docs/Web/HTTP/Methods/GET">GET</a></code>, the colon character will need to be escaped for inclusion in the URL parameters, e.g. <code>partydate=2017-06-01T08%3A30</code>. See {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} for one way to do this.</p>
+</div>
+
+<p>You can also get and set the date value in JavaScript using the {{domxref("HTMLInputElement.value")}} property, for example:</p>
+
+<pre class="brush: js">var dateControl = document.querySelector('input[type="datetime-local"]');
+dateControl.value = '2017-06-01T08:30';</pre>
+
+<p>There are several methods provided by JavaScript's {{jsxref("Date")}} that can be used to convert numeric date information into a properly-formatted string, or you can do it manually. For example, the {{jsxref("Date.toISOString()")}} method can be used for this purpose.</p>
+
+<h2 id="Using_datetime-local_inputs">Using datetime-local inputs</h2>
+
+<p>Date/time inputs sound convenient at first glance; they provide an easy UI for choosing dates and times, and they normalize the data format sent to the server, regardless of the user's locale. However, there are issues with <code>&lt;input type="datetime-local"&gt;</code> because of the limited browser support.</p>
+
+<p>We'll look at basic and more complex uses of <code>&lt;input type="datetime-local"&gt;</code>, then offer advice on mitigating the browser support issue later on (see {{anch("Handling browser support")}}).</p>
+
+<h3 id="Basic_uses_of_datetime-local">Basic uses of datetime-local</h3>
+
+<p>The simplest use of <code>&lt;input type="datetime-local"&gt;</code> involves a basic <code>&lt;input&gt;</code> and {{htmlelement("label")}} element combination, as seen below:</p>
+
+<pre class="brush: html">&lt;form&gt;
+    &lt;label for="party"&gt;Enter a date and time for your party booking:&lt;/label&gt;
+    &lt;input id="party" type="datetime-local" name="partydate"&gt;
+&lt;/form&gt;</pre>
+
+<p>{{ EmbedLiveSample('Basic_uses_of_datetime-local', 600, 40) }}</p>
+
+<h3 id="Setting_maximum_and_minimum_dates_and_times">Setting maximum and minimum dates and times</h3>
+
+<p>You can use the {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} attributes to restrict the dates/times that can be chosen by the user. In the following example we are setting a minimum datetime of <code>2017-06-01T08:30</code> and a maximum datetime of <code>2017-06-30T16:30</code>:</p>
+
+<pre class="brush: html">  &lt;form&gt;
+    &lt;label for="party"&gt;Enter a date and time for your party booking:&lt;/label&gt;
+    &lt;input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30"&gt;
+  &lt;/form&gt;</pre>
+
+<p>{{ EmbedLiveSample('Setting_maximum_and_minimum_dates_and_times', 600, 40) }}</p>
+
+<p>The result here is that:</p>
+
+<ul>
+ <li>Only days in June 2017 can be selected — only the "days" part of the date value will be editable, and dates outside June can't be scrolled to in the datepicker widget.</li>
+ <li>Depending on what browser you are using, you might find that times outside the specified values might not be selectable in the time picker (e.g. Edge), or invalid (see {{anch("Validation")}}) but still available (e.g. Chrome).</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: You should be able to use the {{htmlattrxref("step", "input")}} attribute to vary the number of days jumped each time the date is incremented (e.g. maybe you only want to make Saturdays selectable). However, this does not seem to work effectively in any implementation at the time of writing.</p>
+</div>
+
+<h3 id="Controlling_input_size">Controlling input size</h3>
+
+<p><code>&lt;input type="datetime-local"&gt;</code> doesn't support form control sizing attributes such as {{htmlattrxref("size", "input")}}. You'll have to resort to <a href="/en-US/docs/Web/CSS">CSS</a> for customizing the sizes of these elements.</p>
+
+<h3 id="Setting_timezones">Setting timezones</h3>
+
+<p>One thing the <code>datetime-local</code> input type doesn't provide is a way to set the time zone and/or locale of the date/time control. This was available in the <code><a href="/en-US/docs/Web/HTML/Element/input/datetime">datetime</a></code> input type, but this type is now obsolete, having been removed from the spec. The main reasons why this was removed are a lack of implementation in browsers, and concerns over the user interface/experience. It is easier to just have a control (or controls) for setting the date/time and then deal with the locale in a separate control.</p>
+
+<p>For example, if you are creating a system where the user is likely to already be logged in, with their locale already set, you could provide the timezone in a <code><a href="/en-US/docs/Web/HTML/Element/input/hidden">hidden</a></code> input type. For example:</p>
+
+<pre class="brush: html">&lt;input type="hidden" id="timezone" name="timezone" value="-08:00"&gt;</pre>
+
+<p>On the other hand, if you were required to allow the user to enter a timezone along with a date/time input, you could provide a means of inputting a timezone, such as a {{htmlelement("select")}} element:</p>
+
+<pre class="brush: html">&lt;select name="timezone_offset" id="timezone-offset" class="span5"&gt;
+    &lt;option value="-12:00"&gt;(GMT -12:00) Eniwetok, Kwajalein&lt;/option&gt;
+    &lt;option value="-11:00"&gt;(GMT -11:00) Midway Island, Samoa&lt;/option&gt;
+    &lt;option value="-10:00"&gt;(GMT -10:00) Hawaii&lt;/option&gt;
+    &lt;option value="-09:50"&gt;(GMT -9:30) Taiohae&lt;/option&gt;
+    &lt;option value="-09:00"&gt;(GMT -9:00) Alaska&lt;/option&gt;
+    &lt;option value="-08:00"&gt;(GMT -8:00) Pacific Time (US &amp;amp; Canada)&lt;/option&gt;
+
+  ...
+
+&lt;/select&gt;</pre>
+
+<p>In either case, the date/time and time zone values would be submitted to the server as separate data points, and then you'd need to store them appropriately in the database on the server-side.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The above code snippet is taken from <a href="https://gist.github.com/nodesocket/3919205">All world timezones in an HTML select element</a>.</p>
+</div>
+
+<h2 id="Validation">Validation</h2>
+
+<p>By default, <code>&lt;input type="datetime-local"&gt;</code> does not apply any validation to entered values. The UI implementations generally don't let you enter anything that isn't a date/time — which is helpful — but a user might still fill in no value and submit, or enter an invalid date and/or time (e.g. the 32nd of April).</p>
+
+<p>You can use {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} to restrict the available dates (see anch("Setting maximum and minimum dates")), and you can use the {{htmlattrxref("required", "input")}} attribute to make filling in the date/time mandatory. As a result, supporting browsers will display an error if you try to submit a date that is outside the set bounds, or an empty date field.</p>
+
+<p>Let's look at an example; here we've set minimum and maximum date/time values, and also made the field required:</p>
+
+<pre class="brush: html">&lt;form&gt;
+    &lt;div&gt;
+        &lt;label for="party"&gt;Choose your preferred party date and time (required, June 1st 8.30am to June 30th 4.30pm):&lt;/label&gt;
+        &lt;input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30" required&gt;
+        &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;input type="submit" value="Book party!"&gt;
+    &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>If you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error. Try playing with the example now:</p>
+
+<p>{{ EmbedLiveSample('Validation', 600, 120) }}</p>
+
+<p>Here's a screenshot for those of you who aren't using a supporting browser:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14957/datetime-local-error.png" style="display: block; height: 100px; margin: 0px auto; width: 558px;"></p>
+
+<p>Here's the CSS used in the above example. Here we make use of the {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS properties to style the input based on whether or not the current value is valid. We had to put the icons on a {{htmlelement("span")}} next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively.</p>
+
+<pre class="brush: css">div {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+}
+
+label {
+  display: inline-block;
+  width: 300px;
+}
+
+input:invalid+span:after {
+    content: '✖';
+    padding-left: 5px;
+}
+
+input:valid+span:after {
+    content: '✓';
+    padding-left: 5px;
+}</pre>
+
+<div class="warning">
+<p><strong>Important</strong>: HTML form validation is <em>not</em> a substitute for scripts that ensure that the entered data is in the proper format.  It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, is of the wrong type, and so forth).</p>
+</div>
+
+<h2 id="Handling_browser_support">Handling browser support</h2>
+
+<p>As mentioned above, the major problem with using date inputs at the time of writing is browser support — only Chrome/Opera and Edge support it on desktop, and most modern browsers on mobile. As an example, the <code>datetime-local</code> picker on Firefox for Android looks like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14951/datetime-local-fxa.png" style="display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+
+<p>Non-supporting browsers gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.</p>
+
+<p>The second problem is the most serious; as we mentioned earlier, with a <code>datetime-local</code> input, the actual value is always normalized to the format <code>yyyy-mm-ddThh:mm</code>. With a text input on the other hand, by default the browser has no recognition of what format the date should be in, and there are lots of different ways in which people write dates and times, for example:</p>
+
+<ul>
+ <li><code>ddmmyyyy</code></li>
+ <li><code>dd/mm/yyyy</code></li>
+ <li><code>mm/dd/yyyy</code></li>
+ <li><code>dd-mm-yyyy</code></li>
+ <li><code>mm-dd-yyyy</code></li>
+ <li><code>mm-dd-yyyy hh:mm</code> (12 hour clock)</li>
+ <li><code>mm-dd-yyyy hh:mm</code> (24 hour clock)</li>
+ <li>etc.</li>
+</ul>
+
+<p>One way around this is to put a {{htmlattrxref("pattern", "input")}} attribute on your <code>datetime-local</code> input. Even though the <code>datetime-local</code> input doesn't use it, the text input fallback will. For example, try viewing the following demo in a non-supporting browser:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="party"&gt;Choose your preferred party date and time (required, June 1st 8.30am to June 30th 4.30pm):&lt;/label&gt;
+    &lt;input id="party" type="datetime-local" name="partydate"
+           min="2017-06-01T08:30" max="2017-06-30T16:30"
+           pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit" value="Book party!"&gt;
+  &lt;/div&gt;
+  &lt;input type="hidden" id="timezone" name="timezone" value="-08:00"&gt;
+&lt;/form&gt;</pre>
+
+<p>{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}</p>
+
+<p>If you try submitting it, you'll see that the browser now displays an error message (and highlights the input as invalid) if your entry doesn't match the pattern <code>nnnn-nn-nnTnn:nn</code>, where <code>n</code> is a number from 0 to 9. Of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates and times.</p>
+
+<p>And what user is going to understand the pattern they need to enter the time and date in?</p>
+
+<p>We still have a problem.</p>
+
+<div class="hidden">
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+}
+
+input:invalid + span {
+  position: relative;
+}
+
+input:invalid + span:after {
+  content: '✖';
+  position: absolute;
+  right: -18px;
+}
+
+input:valid + span {
+  position: relative;
+}
+
+input:valid + span:after {
+  content: '✓';
+  position: absolute;
+  right: -18px;
+}</pre>
+</div>
+
+<p>The best way to deal with dates in forms in a cross-browser way at the moment is to get the user to enter the day, month, year, and time in separate controls ({{htmlelement("select")}} elements being popular — see below for an implementation), or use JavaScript libraries such as <a href="https://jqueryui.com/datepicker/">jQuery date picker</a>, and the <a href="http://timepicker.co/">jQuery timepicker plugin</a>.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In this example we create two sets of UI elements for choosing datetimes — a native <code>&lt;input type="datetime-local"&gt;</code> picker, and a set of five {{htmlelement("select")}} elements for choosing dates and times in older browsers that don't support the native input.</p>
+
+<p>{{ EmbedLiveSample('Examples', 600, 140) }}</p>
+
+<p>The HTML looks like so:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div class="nativeDateTimePicker"&gt;
+    &lt;label for="party"&gt;Choose a date and time for your party:&lt;/label&gt;
+    &lt;input type="datetime-local" id="party" name="bday"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;p class="fallbackLabel"&gt;Choose a date and time for your party:&lt;/p&gt;
+  &lt;div class="fallbackDateTimePicker"&gt;
+    &lt;div&gt;
+      &lt;span&gt;
+        &lt;label for="day"&gt;Day:&lt;/label&gt;
+        &lt;select id="day" name="day"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;label for="month"&gt;Month:&lt;/label&gt;
+        &lt;select id="month" name="month"&gt;
+          &lt;option selected&gt;January&lt;/option&gt;
+          &lt;option&gt;February&lt;/option&gt;
+          &lt;option&gt;March&lt;/option&gt;
+          &lt;option&gt;April&lt;/option&gt;
+          &lt;option&gt;May&lt;/option&gt;
+          &lt;option&gt;June&lt;/option&gt;
+          &lt;option&gt;July&lt;/option&gt;
+          &lt;option&gt;August&lt;/option&gt;
+          &lt;option&gt;September&lt;/option&gt;
+          &lt;option&gt;October&lt;/option&gt;
+          &lt;option&gt;November&lt;/option&gt;
+          &lt;option&gt;December&lt;/option&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;label for="year"&gt;Year:&lt;/label&gt;
+        &lt;select id="year" name="year"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;span&gt;
+        &lt;label for="hour"&gt;Hour:&lt;/label&gt;
+        &lt;select id="hour" name="hour"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;label for="minute"&gt;Minute:&lt;/label&gt;
+        &lt;select id="minute" name="minute"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>The months are hard-coded (as they are always the same), while the day and year values are dynamically generated depending on the currently selected month and year, and the current year respectively (see the code comments below for detailed explanations of how these functions work.) We also decided to dynamically generate the hours and minutes, as there are so many of them!</p>
+
+<div class="hidden">
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+</div>
+
+<p>The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <code>&lt;input type="datetime-local"&gt;</code>, we create a new {{htmlelement("input")}} element, set its <code>type</code> to <code>datetime-local</code>, then immediately check what its type is set to. Browsers that don't support <code>datetime-local</code> return <code>text</code>, since that's what <code>datetime-local</code> falls back to. If <code>&lt;input type="datetime-local"&gt;</code> is not supported, we hide the native picker and show the fallback picker UI ({{htmlelement("select")}}) instead.</p>
+
+<pre class="brush: js">// define variables
+var nativePicker = document.querySelector('.nativeDateTimePicker');
+var fallbackPicker = document.querySelector('.fallbackDateTimePicker');
+var fallbackLabel = document.querySelector('.fallbackLabel');
+
+var yearSelect = document.querySelector('#year');
+var monthSelect = document.querySelector('#month');
+var daySelect = document.querySelector('#day');
+var hourSelect = document.querySelector('#hour');
+var minuteSelect = document.querySelector('#minute');
+
+// hide fallback initially
+fallbackPicker.style.display = 'none';
+fallbackLabel.style.display = 'none';
+
+// test whether a new datetime-local input falls back to a text input or not
+var test = document.createElement('input');
+test.type = 'datetime-local';
+// if it does, run the code inside the if() {} block
+if(test.type === 'text') {
+  // hide the native picker and show the fallback
+  nativePicker.style.display = 'none';
+  fallbackPicker.style.display = 'block';
+  fallbackLabel.style.display = 'block';
+
+  // populate the days and years dynamically
+  // (the months are always the same, therefore hardcoded)
+  populateDays(monthSelect.value);
+  populateYears();
+  populateHours();
+  populateMinutes();
+}
+
+function populateDays(month) {
+  // delete the current set of &lt;option&gt; elements out of the
+  // day &lt;select&gt;, ready for the next set to be injected
+  while(daySelect.firstChild){
+    daySelect.removeChild(daySelect.firstChild);
+  }
+
+  // Create variable to hold new number of days to inject
+  var dayNum;
+
+  // 31 or 30 days?
+  if(month === 'January' | month === 'March' | month === 'May' | month === 'July' | month === 'August' | month === 'October' | month === 'December') {
+    dayNum = 31;
+  } else if(month === 'April' | month === 'June' | month === 'September' | month === 'November') {
+    dayNum = 30;
+  } else {
+  // If month is February, calculate whether it is a leap year or not
+    var year = yearSelect.value;
+    (year - 2016) % 4 === 0 ? dayNum = 29 : dayNum = 28;
+  }
+
+  // inject the right number of new &lt;option&gt; elements into the day &lt;select&gt;
+  for(i = 1; i &lt;= dayNum; i++) {
+    var option = document.createElement('option');
+    option.textContent = i;
+    daySelect.appendChild(option);
+  }
+
+  // if previous day has already been set, set daySelect's value
+  // to that day, to avoid the day jumping back to 1 when you
+  // change the year
+  if(previousDay) {
+    daySelect.value = previousDay;
+
+    // If the previous day was set to a high number, say 31, and then
+    // you chose a month with less total days in it (e.g. February),
+    // this part of the code ensures that the highest day available
+    // is selected, rather than showing a blank daySelect
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 1;
+    }
+
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 2;
+    }
+
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 3;
+    }
+  }
+}
+
+function populateYears() {
+  // get this year as a number
+  var date = new Date();
+  var year = date.getFullYear();
+
+  // Make this year, and the 100 years before it available in the year &lt;select&gt;
+  for(var i = 0; i &lt;= 100; i++) {
+    var option = document.createElement('option');
+    option.textContent = year-i;
+    yearSelect.appendChild(option);
+  }
+}
+
+function populateHours() {
+  // populate the hours &lt;select&gt; with the 24 hours of the day
+  for(var i = 0; i &lt;= 23; i++) {
+    var option = document.createElement('option');
+    option.textContent = (i &lt; 10) ? ("0" + i) : i;
+    hourSelect.appendChild(option);
+  }
+}
+
+function populateMinutes() {
+  // populate the minutes &lt;select&gt; with the 60 hours of each minute
+  for(var i = 0; i &lt;= 59; i++) {
+    var option = document.createElement('option');
+    option.textContent = (i &lt; 10) ? ("0" + i) : i;
+    minuteSelect.appendChild(option);
+  }
+}
+
+// when the month or year &lt;select&gt; values are changed, rerun populateDays()
+// in case the change affected the number of available days
+yearSelect.onchange = function() {
+  populateDays(monthSelect.value);
+}
+
+monthSelect.onchange = function() {
+  populateDays(monthSelect.value);
+}
+
+//preserve day selection
+var previousDay;
+
+// update what day has been set to previously
+// see end of populateDays() for usage
+daySelect.onchange = function() {
+  previousDay = daySelect.value;
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Remember that some years have 53 weeks in them (see <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">Weeks per year</a>)! You'll need to take this into consideration when developing production apps.</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comments</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#local-date-and-time-state-(type=datetime-local)', '&lt;input type="datetime-local"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html##local-date-and-time-state-(type=datetime-local)', '&lt;input type="datetime-local"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.input.input-datetime-local")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/date">&lt;input type="date"&gt;</a></code> and <code><a href="/en-US/docs/Web/HTML/Element/input/time">&lt;input type="time"&gt;</a></code></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">Date and Time picker tutorial</a></li>
+</ul>
diff --git a/files/uk/web/html/element/input/index.html b/files/uk/web/html/element/input/index.html
new file mode 100644
index 0000000000..3c0f2289b3
--- /dev/null
+++ b/files/uk/web/html/element/input/index.html
@@ -0,0 +1,753 @@
+---
+title: '<input>: The Input (Form Input) element'
+slug: Web/HTML/Element/input
+tags:
+  - Data entry
+  - Element
+  - Forms
+  - HTML
+  - HTML forms
+  - HTML input tag
+  - Input
+  - MakeBrowserAgnostic
+  - NeedsBrowserCompatibility
+  - NeedsMobileBrowserCompatibility
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web
+translation_of: Web/HTML/Element/input
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">The <strong>HTML <code>&lt;input&gt;</code> element</strong> is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and {{Glossary("user agent")}}.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-input.html", "tabbed-standard")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples
+&lt;https://github.com/mdn/interactive-examples>">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, listed, submittable, resettable, form-associated element, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>. If the {{htmlattrxref("type", "input")}} is not <code>hidden</code>, then labelable element, palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td>None, it is an {{Glossary("empty element")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>Must have a start tag and must not have an end tag.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parents</th>
+   <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>
+    <ul>
+     <li><code>type=button</code>: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</li>
+     <li><code>type=checkbox</code>: {{ARIARole("button")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("option")}}, {{ARIARole("switch")}}</li>
+     <li><code>type=image</code>: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}</li>
+     <li><code>type=radio</code>: {{ARIARole("menuitemradio")}}</li>
+     <li><code>type=color|date|datetime|datetime-local|email|file</code>: None</li>
+     <li><code>type=hidden|month|number|password|range|reset</code>: None</li>
+     <li><code>type=search|submit|tel|text|url|week</code>: None</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLInputElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Form_&lt;input>_types">Form <code>&lt;input&gt;</code> types</h2>
+
+<p>How an <code>&lt;input&gt;</code> works varies considerably depending on the value of its <code>type</code> attribute, hence the different types are covered in their own separate reference pages. If this attributes is not specified, the default type adopted is <code>text</code>.</p>
+
+<p>The available types are as follows:</p>
+
+<ul>
+ <li><code>{{HTMLElement("input/button", "button")}}</code>: A push button with no default behavior.</li>
+ <li><code>{{HTMLElement("input/checkbox", "checkbox")}}</code>: A check box allowing single values to be selected/deselected.</li>
+ <li><code>{{HTMLElement("input/color", "color")}}</code>: {{HTMLVersionInline("5")}} A control for specifying a color. A color picker's UI has no required features other than accepting simple colors as text (<a href="https://www.w3.org/TR/html5/forms.html#color-state-(type=color)">more info</a>).</li>
+ <li><code>{{HTMLElement("input/date", "date")}}</code>: {{HTMLVersionInline("5")}} A control for entering a date (year, month, and day, with no time).</li>
+ <li><code>{{HTMLElement("input/datetime-local", "datetime-local")}}</code>: {{HTMLVersionInline("5")}} A control for entering a date and time, with no time zone.</li>
+ <li><code>{{HTMLElement("input/email", "email")}}</code>: {{HTMLVersionInline("5")}} A field for editing an e-mail address.</li>
+ <li><code>{{HTMLElement("input/file", "file")}}</code>: A control that lets the user select a file. Use the <strong>accept</strong> attribute to define the types of files that the control can select.</li>
+ <li><code>{{HTMLElement("input/hidden", "hidden")}}</code>: A control that is not displayed but whose value is submitted to the server.</li>
+ <li><code>{{HTMLElement("input/image", "image")}}</code>: A graphical submit button. You must use the <strong>src</strong> attribute to define the source of the image and the <strong>alt</strong> attribute to define alternative text. You can use the <strong>height</strong> and <strong>width</strong> attributes to define the size of the image in pixels.</li>
+ <li><code>{{HTMLElement("input/month", "month")}}</code>: {{HTMLVersionInline("5")}} A control for entering a month and year, with no time zone.</li>
+ <li><code>{{HTMLElement("input/number", "number")}}</code>: {{HTMLVersionInline("5")}} A control for entering a number.</li>
+ <li><code>{{HTMLElement("input/password", "password")}}</code>: A single-line text field whose value is obscured. Use the <strong>maxlength</strong> and <strong>minlength</strong> attributes to specify the maximum length of the value that can be entered.
+  <div class="note"><strong>Note</strong>: Any forms involving sensitive information like passwords (e.g. login forms) should be served over HTTPS; Firefox now implements multiple mechanisms to warn against insecure login forms — see <a href="/en-US/docs/Web/Security/Insecure_passwords">Insecure passwords</a>. Other browsers are also implementing similar mechanisms.</div>
+ </li>
+ <li><code>{{HTMLElement("input/radio", "radio")}}</code>: A radio button, allowing a single value to be selected out of multiple choices.</li>
+ <li><code>{{HTMLElement("input/range", "range")}}</code>: {{HTMLVersionInline("5")}} A control for entering a number whose exact value is not important.</li>
+ <li><code>{{HTMLElement("input/reset", "reset")}}</code>: A button that resets the contents of the form to default values.</li>
+ <li><code>{{HTMLElement("input/search", "search")}}</code>: {{HTMLVersionInline("5")}} A single-line text field for entering search strings. Line-breaks are automatically removed from the input value.</li>
+ <li><code>{{HTMLElement("input/submit", "submit")}}</code>: A button that submits the form.</li>
+ <li><code>{{HTMLElement("input/tel", "tel")}}</code>: {{HTMLVersionInline("5")}} A control for entering a telephone number.</li>
+ <li><code>{{HTMLElement("input/text", "text")}}</code>: A single-line text field. Line-breaks are automatically removed from the input value.</li>
+ <li><code>{{HTMLElement("input/time", "time")}}</code>: {{HTMLVersionInline("5")}} A control for entering a time value with no time zone.</li>
+ <li><code>{{HTMLElement("input/url", "url")}}</code>: {{HTMLVersionInline("5")}} A field for entering a URL.</li>
+ <li><code>{{HTMLElement("input/week", "week")}}</code>: {{HTMLVersionInline("5")}} A control for entering a date consisting of a week-year number and a week number with no time zone.</li>
+</ul>
+
+<p>Some input types are now obsolete:</p>
+
+<ul>
+ <li><code>{{HTMLElement("input/datetime", "datetime")}}</code>: {{HTMLVersionInline("5")}} {{deprecated_inline}} {{obsolete_inline}} A control for entering a date and time (hour, minute, second, and fraction of a second) based on UTC time zone. <strong>This feature has been <a href="https://github.com/whatwg/html/issues/336">removed from WHATWG HTML.</a></strong></li>
+</ul>
+
+<h2 id="Attributes">Attributes</h2>
+
+<h3 id="Global_&lt;input>_attributes">Global <code>&lt;input&gt;</code> attributes</h3>
+
+<p>This section lists the attributes available to all form <code>&lt;input&gt;</code> types. Non-global attributes — and global attributes that behave differently when specified on different <code>&lt;input&gt;</code> types — are listed on those types' individual pages.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global HTML attributes</a>.</p>
+</div>
+
+<dl>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>The type of control to render. See {{anch("Form &lt;input&gt; types")}} for the individual types, with links to more information about each.</dd>
+ <dt>{{htmlattrdef("accept")}}</dt>
+ <dd>If the value of the <strong>type</strong> attribute is <code>file</code>, this attribute indicates the types of files that the server accepts — otherwise it's ignored. The value must be comma-separated unique “content type specifiers”:
+ <ul>
+  <li>A case-insensitive file extension starting with the STOP character (U+002E). (e.g. .jpg, .png, .doc).</li>
+  <li>A valid MIME type with no extensions.</li>
+  <li><code>audio/*</code> representing sound files. {{HTMLVersionInline("5")}}</li>
+  <li><code>video/*</code> representing video files. {{HTMLVersionInline("5")}}</li>
+  <li><code>image/*</code> representing image files. {{HTMLVersionInline("5")}}</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt>
+ <dd>Sets a keyboard key that the user can press to <a href="/en-US/docs/Mozilla/Tech/XUL/Tutorial/Focus_and_Selection">focus</a> the control. This attribute is global in HTML5 — see <a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">the <code>accesskey</code> page</a> for more info.</dd>
+ <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>This attribute indicates if the input can be automatically completed by the browser, usually by remembering previous values the user has entered. {{page("/en-US/docs/Web/HTML/Attributes/autocomplete", "Values")}}</dd>
+ <dd>See <a href="/en-US/docs/Web/HTML/Attributes/autocomplete">The HTML autocomplete attribute</a> for additional information.</dd>
+ <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>This Boolean attribute specifies that the input should have focus when the page loads, unless the user overrides it (e.g. by typing in a different control). Only one element in a document can have the <strong>autofocus</strong> attribute. It cannot be applied if the <strong>type</strong> attribute is <code>hidden</code>, because hidden inputs cannot be focused. Note that the input may be focused before the <a href="/en-US/docs/Web/Events/DOMContentLoaded"><code>DOMContentLoaded</code> event fires.</a>
+ <div class="warning"><strong>Warning</strong>: Automatically focusing a form control can confuse visually-impaired people who using screen-reading technology. When <code>autofocus</code> is assigned, screen-readers "teleport" their user to the form control without warning them beforehand.</div>
+ </dd>
+ <dt>{{htmlattrdef("capture")}}</dt>
+ <dd>
+ <p>If the value of the <strong>type</strong> attribute is <code>file</code>, this Boolean attribute indicates that capture of media directly from the device's sensors using a <a href="https://www.w3.org/TR/html-media-capture/#dfn-media-capture-mechanism">media capture mechanism</a> is preferred, such as a webcam or microphone.</p>
+ </dd>
+ <dt>{{htmlattrdef("checked")}}</dt>
+ <dd>
+ <p>If the value of the <strong>type</strong> attribute is <code>radio</code> or <code>checkbox</code>, this Boolean attribute pre-checks the control before the user interacts with it.</p>
+
+ <p>Unlike other browsers, Firefox by default <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persists the dynamic checked state</a> of an <code>&lt;input&gt;</code> across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.</p>
+ </dd>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>
+ <p>This Boolean attribute prevents the user from interacting with the input. In particular, the <code>click</code> event <a class="external" href="https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute">is not dispatched</a> on disabled controls, and disabled controls aren't submitted with their form.</p>
+
+ <p>Unlike other browsers, Firefox will by default <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of an <code>&lt;input&gt;</code> across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.</p>
+ </dd>
+ <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>The form element that the input element is associated with (its <em>form owner</em>). The value of the attribute must be an <strong>id</strong> of a {{HTMLElement("form")}} element in the same document. If this attribute isn't used, the <code>&lt;input&gt;</code> element is associated with its nearest ancestor {{HTMLElement("form")}} element, if any. This attribute lets you to place <code>&lt;input&gt;</code> elements anywhere within a document, not just as descendants of form elements. An input can be associated with at most one form.</dd>
+ <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>The URL that processes the data submitted by the input element, if it is a submit button or image. This attribute overrides the {{htmlattrxref("action","form")}} attribute of the element's form owner.</dd>
+ <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the input element is a submit button or image, this attribute specifies the content encoding that is used to submit the form data to the server. Possible values:
+ <ul>
+  <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li>
+  <li><code>multipart/form-data</code>: Use this value if you are using an <code>&lt;input&gt;</code> element with the {{htmlattrxref("type","input")}} attribute set to <code>file</code>.</li>
+  <li><code>text/plain</code>: This encoding is mostly for debugging.</li>
+ </ul>
+
+ <p>This attribute overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.</p>
+ </dd>
+ <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the input element is a submit button or image, this attribute specifies the <a href="/en-US/docs/Glossary/Method">HTTP method</a> that the browser uses to submit the form. Possible values:
+ <ul>
+  <li><code>post</code>: The data from the form is included in the body of the form and is sent to the server.</li>
+  <li><code>get</code>: The data from the form are appended to the <strong>form</strong> attribute URL, with a '?' as a separator, and the resulting URL is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.</li>
+ </ul>
+
+ <p>This attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.</p>
+ </dd>
+ <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the input element is a submit button or image, this Boolean attribute specifies that the form shouldn't be validated before submission. This attribute overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner.</dd>
+ <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received by submitting the form. This is a name of, or keyword for, a <em>browsing context</em> (e.g. tab, window, or <a href="/en-US/docs/Web/HTML/Element/iframe">inline frame</a>). This attribute overrides the {{htmlattrxref("target", "form")}} attribute of the elements's form owner. The following keywords have special meanings:
+ <ul>
+  <li>_<code>self</code>: Load the response into the same browsing context as the current one. This is the default if the attribute is not specified.</li>
+  <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li>
+  <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li>
+  <li><code>_top</code>: Load the response into the top-level browsing context (i.e. the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("height")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, defines the height of the image displayed for the button in pixels.</dd>
+ <dt>{{htmlattrdef("inputmode")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>A hint to browsers for which virtual keyboard to display. This attribute applies when the the <strong>type</strong> attribute is text, password, email, or url. Possible values:
+ <ul>
+  <li><code>none</code>: No virtual keyboard should be displayed.</li>
+  <li><code>text</code>: Text input in the user's locale.</li>
+  <li><code>decimal</code>: Fractional numeric input.</li>
+  <li><code>numeric</code>: Numeric input.</li>
+  <li><code>tel</code>: Telephone input, including asterisk and pound key. Prefer <code>&lt;input type="tel"&gt;</code>.</li>
+  <li><code>search</code>: A virtual keyboard optimized for search input.</li>
+  <li><code>email</code>: Email input. Prefer <code>&lt;input type="email"&gt;</code>.</li>
+  <li><code>url</code>: URL input. Prefer <code>&lt;input type="url"&gt;</code>.</li>
+ </ul>
+
+ <div class="warning">
+ <div class="important"><strong>Spec conflict</strong>: The <a href="https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode">WHATWG spec lists <code>inputmode</code></a>, and modern browsers are working towards supporting it. The <a href="https://www.w3.org/TR/html52/index.html#contents">W3C HTML 5.2 spec</a> however no longer lists it (i.e. marks it as obsolete). You should consider the WHATWG definition as correct, until a consensus is reached.</div>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("list")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Points to a {{HTMLElement("datalist")}} of predefined options to suggest to the user. The value must be the <strong>id</strong> of a <code>&lt;datalist&gt;</code> element in the same document. Browsers display only valid options for the input. This attribute is ignored when the <strong>type</strong> attribute is <code>hidden</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type.</dd>
+ <dt>{{htmlattrdef("max")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>The maximum (numeric or date-time) value for the input. Must not be less than its minimum (<strong>min</strong> attribute) value.</dd>
+ <dt>{{htmlattrdef("maxlength")}}</dt>
+ <dd>If the value of the <strong>type</strong> attribute is <code>text</code>, <code>email</code>,<code> search</code>, <code>password</code>, <code>tel</code>, or <code>url</code>, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter. For other control types, it is ignored.</dd>
+ <dt>{{htmlattrdef("min")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>The minimum (numeric or date-time) value for this input, which must not be greater than its maximum (<strong>max</strong> attribute) value.</dd>
+ <dt>{{htmlattrdef("minlength")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the value of the <strong>type</strong> attribute is <code>text</code>, <code>email</code>,<code> search</code>, <code>password</code>, <code>tel</code>, or <code>url</code>, this attribute specifies the minimum number of characters (in UTF-16 code points) that the user can enter. For other control types, it is ignored.</dd>
+ <dt>{{htmlattrdef("multiple")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>This Boolean attribute indicates whether the user can enter more than one value. This attribute only applies when the <strong>type</strong> attribute is set to <code>email</code> or <code>file</code>.</dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>The name of the control, which is submitted with the control's value as part of the form data. If no name is specified or it is empty, the control's value is not submitted with the form.</dd>
+ <dt>{{htmlattrdef("pattern")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>A regular expression that the control's value is checked against. The pattern must match the entire value. Use the <strong>title</strong> attribute to describe the pattern to help the user. This attribute only applies when the value of the <strong>type</strong> attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, or <code>password</code>. The regular expression language is the same as the JavaScript {{jsxref("RegExp")}} algorithm, with the <code>'u'</code> parameter that makes it treat the pattern as a sequence of unicode code points. The pattern is not surrounded by forward slashes.</dd>
+ <dt>{{htmlattrdef("placeholder")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>A hint to the user of what can be entered in the control, typically in the form of an example of the type of information that should be entered. The placeholder text <em>must not</em> contain carriage returns or line-feeds.
+ <div class="note"><strong>Note:</strong> Before using <code>placeholder</code>, please see the section {{anch("Labels and placeholders")}} to ensure that you use them correctly if at all. Placeholders can be confusing and can disrupt certain operations in unexpected ways.</div>
+ </dd>
+ <dt>{{htmlattrdef("readonly")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>This Boolean attribute prevents the user from modifying the value of the input. It is ignored if the value of the <strong>type</strong> attribute is <code>hidden</code>, <code>range</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type (such as <code>button</code> or <code>submit</code>).</dd>
+ <dt>{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the <strong>type</strong> attribute is <code>hidden</code>, <code>image</code>, or a button type (<code>submit</code>, <code>reset</code>, or <code>button</code>). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.</dd>
+ <dt>{{htmlattrdef("size")}}</dt>
+ <dd>The initial size of the control. Starting in HTML5, this attribute applies only when the <strong>type</strong> attribute is set to <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, or <code>password</code>, otherwise it is ignored. The size must be an integer greater than zero. The default value is 20.</dd>
+ <dd>HTML5 states "the user agent should ensure that at least that many characters are visible", but different characters have different widths in certain fonts. In some browsers, a certain string with <em>x</em> characters will not be entirely visible even if <code>size</code> is defined as <em>x</em>.</dd>
+ <dt>{{htmlattrdef("spellcheck")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Setting the value of this attribute to <code>true</code> indicates that the element needs to have its spelling and grammar checked. The value <code>default</code> indicates that the element is to act according to a default behavior, possibly based on the parent element's own <code>spellcheck</code> value. The value <code>false</code> indicates that the element should not be checked.</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute specifies the URL of the image file to display on the graphical submit button.</dd>
+ <dt>{{htmlattrdef("step")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Works with the <strong>min</strong> and <strong>max</strong> attributes to limit the increments at which a numeric or date-time value can be set. It can be the string <code>any</code> or a positive floating point number. If this attribute is not set to <code>any</code>, the control accepts only values at multiples of the step value greater than the minimum.</dd>
+ <dt>{{htmlattrdef("tabindex")}} element-specific in {{HTMLVersionInline(4)}}, global in {{HTMLVersionInline("5")}}</dt>
+ <dd>The position of the element in the tabbing navigation order for the current document.</dd>
+ <dt>{{htmlattrdef("usemap")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt>
+ <dd>The name of a {{HTMLElement("map")}} element to be used as an image map.</dd>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>The initial value of the control. This attribute is optional except when the value of the <strong>type</strong> attribute is <code>radio</code> or <code>checkbox</code>.</dd>
+ <dd>When reloading the page, Firefox and IE <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">will ignore the value specified in the HTML source</a>, if the value was changed before the reload.</dd>
+ <dt>{{htmlattrdef("width")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute defines the width of the image displayed for the button in pixels.</dd>
+</dl>
+
+<h3 id="Non-standard_&lt;input>_attributes">Non-standard <code>&lt;input&gt;</code> attributes</h3>
+
+<dl>
+ <dt>{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</dt>
+ <dd>This is a non-standard attribute supported by Safari that is used to control whether autocorrection should be enabled when the user is entering/editing the text value of the <code>&lt;input&gt;</code>. Possible attribute values are:
+ <ul>
+  <li><code>on</code>: Enable autocorrection.</li>
+  <li><code>off</code>: Disable autocorrection.</li>
+ </ul>
+ <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-autocorrect"><code>autocorrect</code> documentation</a> in the Safari HTML Reference.</dd>
+ <dt>{{htmlattrdef("incremental")}} {{non-standard_inline}}</dt>
+ <dd>This is a nonstandard attribute supported by WebKit (Safari) and Blink (Chrome) that only applies when the <strong>type</strong> is <code>search</code>. If the attribute is present, regardless of what its value is, the <code>&lt;input&gt;</code> fires <a href="/en-US/docs/Web/Events/search"><code>search</code></a> events as the user edits the text value. The event is only fired after an implementation-defined timeout has elapsed since the most recent keystroke, and new keystrokes reset the timeout. In other words, the event firing is debounced. If the attribute is absent, the <a href="/en-US/docs/Web/Events/search"><code>search</code></a> event is only fired when the user explicitly initiates a search (e.g. by pressing the Enter key while within field). <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-incremental"><code>incremental</code> documentation in the Safari HTML Reference</a></dd>
+ <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt>
+ <dd>Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values are <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code>, and <code>send</code>. These automatically get mapped to the appropriate string and are case-insensitive.</dd>
+ <dt>{{htmlattrdef("results")}} {{non-standard_inline}}</dt>
+ <dd>This is a nonstandard attribute supported by Safari that only applies when the <strong>type</strong> is <code>search</code>. It is used to control the maximum number of entries that should be displayed in the <code>&lt;input&gt;</code>'s native dropdown list of past search queries. Its value should be a nonnegative decimal integer.</dd>
+ <dt>{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</dt>
+ <dd>This Boolean attribute indicates if the selector used when the <strong>type</strong> attribute is <code>file</code> has to allow for the selection of directories only.</dd>
+ <dt>{{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}</dt>
+ <dd>This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.</dd>
+</dl>
+
+<h2 id="Styling_input_elements">Styling input elements</h2>
+
+<p>You can style <code>&lt;input&gt;</code> elements using various color-related attributes in particular. One unusual one that is specific to text entry-related elements is the CSS {{cssxref("caret-color")}} property, which lets you set the color used to draw the text input caret:</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;label for="textInput"&gt;Note the red caret:&lt;/label&gt;
+&lt;input id="textInput" class="custom" size="32"/&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input.custom {
+  caret-color: red;
+  font: 16px "Helvetica", "Arial", "sans-serif"
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Styling_input_elements', 500, 80)}}</p>
+
+<p>For more information about adding color to elements in HTML, see <a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a>.</p>
+
+<h2 id="Labels_and_placeholders">Labels and placeholders</h2>
+
+<div class="note">
+<p><strong>TL;DR:</strong> To save you time, here's the key point: don't use the {{htmlattrxref("placeholder", "input")}} attribute if you can avoid it. If you need to label an <code>&lt;input&gt;</code> element, use the {{HTMLElement("label")}} element.</p>
+</div>
+
+<p>There are three seemingly similar ways to associate assistive text with an <code>&lt;input&gt;</code>. However, they are actually quite different, and only one of them is always a good choice. Here we will look at each of them and learn best practices for providing the user with guidance when entering data into a form.</p>
+
+<h3 id="The_&lt;label>_element">The &lt;label&gt; element</h3>
+
+<p>The {{HTMLElement("label")}} element is the only way to provide explanatory information about a form field that is <em>always</em> appropriate (aside from any layout concerns you have). It's never a bad idea to use a <code>&lt;label&gt;</code> to explain what should be entered into an <code>&lt;input&gt;</code> or {{HTMLElement("textarea")}}.</p>
+
+<h3 id="The_placeholder_attribute">The placeholder attribute</h3>
+
+<p>The {{htmlattrxref("placeholder", "input")}} attribute lets you specify a prompt that appears within the <code>&lt;input&gt;</code> element's content area itself when empty. It's intended to be used to show an example input, rather than an explanation or prompt, but tends to be badly misused.</p>
+
+<p>Here are two inputs that take a password, each with a placeholder:</p>
+
+<p><img alt="Example of correct and incorrect placeholder usage" src="https://mdn.mozillademos.org/files/16094/placeholder-badgood.png" style="border-style: solid; border-width: 1px; height: 66px; width: 230px;"></p>
+
+<p>The first one uses a placeholder string <code>"MyGr8P@sswrd"</code>, demonstrating what a password might look like. And no, that's not <em>really</em> a great password.</p>
+
+<p>The second one uses a prompt string, <code>"Enter your password"</code> as a placeholder. The first, and most obvious, problem with doing this is that as soon as the user types their first character, they no longer have a prompt explaining what that field is for.</p>
+
+<p>That's why, instead, you should use the {{HTMLElement("label")}} element. The placeholder should never be required in order to understand your forms. While some people are able to remember what a given empty box is meant for after its only identifying text vanishes, others cannot.</p>
+
+<p>If the user can't understand your form if the placeholders are missing (say, in a browser that doesn't support <code>placeholder</code>, or in the case above where the user starts typing then gets confused), you're not using placeholders properly.</p>
+
+<p>In addition, browsers with automatic page translation features may skip over attributes when translating. That means the <code>placeholder</code> may not get translated, resulting in important information not being translated.</p>
+
+<p>If you feel like you need to use a placeholder, it's possible to use both a placeholder and a label:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16110/label-and-placeholder.png" style="border-style: solid; border-width: 1px; height: 48px; width: 234px;"></p>
+
+<ul>
+</ul>
+
+<h3 id="Unadorned_text_adjacent_to_the_&lt;input>_element">Unadorned text adjacent to the &lt;input&gt; element</h3>
+
+<p>You can also just have plain text adjacent to the <code>&lt;input&gt;</code> element, like this:</p>
+
+<pre class="brush: html">&lt;p&gt;Enter your name: &lt;input id="name" type="text" size="30"&gt;&lt;/p&gt;</pre>
+
+<p>Please don't do this. This doesn't create a relationship between the prompt and the <code>&lt;input&gt;</code> element, which is important for reasons we'll get into in the next section.</p>
+
+<h3 id="Why_you_should_use_labels">Why you should use labels</h3>
+
+<p>In addition to the information provided above, there are a number of other reasons why <code>&lt;label&gt;</code> is the best way to explain <code>&lt;input&gt;</code>s:</p>
+
+<ul>
+ <li>The semantic pairing of <code>&lt;input&gt;</code> and <code>&lt;label&gt;</code> elements is useful for assistive technologies such as screen readers. By pairing them using the <code>&lt;label&gt;</code>'s {{htmlattrxref("for", "label")}} attribute, you bond the label to the input in a way that lets screen readers describe inputs to users more precisely.</li>
+ <li>By pairing a <code>&lt;label&gt;</code> with an <code>&lt;input&gt;</code>, clicking on either one will focus the <code>&lt;input&gt;</code>. If you use plaintext to "label" your input, this won't happen. Having the prompt part of the activation area for the input is helpful for people with motor control conditions.</li>
+ <li>As web developers, it's important that we never assume that people will know all the things that we know. The diversity of people using the web—and by extension your web site—practically guarantees that some of your site's visitors will have some variation in thought processes and/or circumstances that leads them to interpret your forms very differently from you without clear and properly-presented labels.</li>
+</ul>
+
+<h2 id="Examples">Examples</h2>
+
+<p>You can find multiple examples of <code>&lt;input&gt;</code> element usage on the pages covering each individual type — see {{anch("Form &lt;input&gt; types")}}, and also see the {{anch("Live example")}} at the top of the article.</p>
+
+<ul>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#the-input-element', '&lt;input&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','&lt;input capture&gt;')}}</td>
+   <td>{{Spec2('HTML Media Capture')}}</td>
+   <td>Adds the <code>capture</code> element</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '&lt;input&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '&lt;form&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.input")}}</p>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>type="time"</code></td>
+   <td>20</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(57)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td><code>accept</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozactionhint</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>autocapitalize</code></td>
+   <td>43</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup> [3]</sup></td>
+  </tr>
+  <tr>
+   <td><code>autofocus</code>, <code>max</code>, <code>min</code>, <code>pattern</code>, <code>placeholder</code>, <code>required</code>, <code>step</code>, <code>list</code>, <code>multiple</code></td>
+   <td>5.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+   <td>9.6</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>capture</td>
+   <td>Chrome for Android (0.16)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly">fakepath</a> added to file input values</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("53")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>form</code></td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4</td>
+   <td>{{CompatNo}}<sup>[7]</sup></td>
+   <td>9.5</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td><code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code></td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.62</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>incremental</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>inputmode</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("17")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>minlength</code></td>
+   <td>40.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>readonly</code></td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>6<sup>[2] </sup></td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>spellcheck</code></td>
+   <td>10.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>10</td>
+   <td>11.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td><code>webkitdirectory</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("49.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>type="time"</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(57)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td><code>accept</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>autocapitalize</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+  </tr>
+  <tr>
+   <td><code>autofocus</code>, <code>max</code>, <code>min</code>, <code>pattern</code>, <code>placeholder</code>, <code>required</code>, <code>step</code>, <code>list</code>, <code>multiple</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[5]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>capture</code></td>
+   <td>3.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("10.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>6.0</td>
+  </tr>
+  <tr>
+   <td><a href="https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly">fakepath</a> added to file input values</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("53")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>form</code>, <code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>minlength</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>27.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>spellcheck</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>11.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>webkitdirectory</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("49.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] It is recognized but there is no UI.</p>
+
+<p>[2] Missing for <code>type="checkbox"</code> and <code>type="radio"</code>.</p>
+
+<p>[3] In Safari <code>autocapitalize="words"</code> capitalizes every word's second character.</p>
+
+<p>[4] <code>datetime</code> has been removed from the spec and browsers in favour of <code>datetime-local</code>.</p>
+
+<p>[5] see {{bug(1355389)}}</p>
+
+<p>[6] Not yet implemented. For progress, see {{bug("888320")}} and <a href="https://wiki.mozilla.org/TPE_DOM/Date_time_input_types">TPE DOM/Date time input types</a>.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<h3 id="File_inputs">File inputs</h3>
+
+<ol>
+ <li>
+  <p>Starting in {{Gecko("2.0")}}, calling the <code>click()</code> method on an <code>&lt;input&gt;</code> element of type <code>file</code> opens the file picker and lets the user select files. See <a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> for an example and more details.</p>
+ </li>
+ <li>
+  <p>You cannot set the value of a file picker from a script — doing something like the following has no effect:</p>
+
+  <pre class="brush: js">var e = getElementById("someFileInputElement");
+e.value = "foo";
+</pre>
+ </li>
+ <li>
+  <p>When a file is chosen using an <code>&lt;input type="file"&gt;</code>, the real path to the source file is not shown in the input's <code>value</code> attribute for obvious security reasons. Instead, the filename is shown, with <code>C:\fakepath\</code> appended to the beginning of it. There are some historical reasons for this quirk, but it is supported across all modern browsers, and in fact is <a href="https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly">defined in the spec</a>.</p>
+ </li>
+</ol>
+
+<h3 id="Error_messages">Error messages</h3>
+
+<p>If you want Firefox to present a custom error message when a field fails to validate, you can use the <code>x-moz-errormessage</code> attribute to do so:</p>
+
+<pre class="brush: html">&lt;input type="email"
+ x-moz-errormessage="Please specify a valid email address."&gt;
+</pre>
+
+<p>Note, however, that this is not standard and will not have an effect on other browsers.</p>
+
+<h3 id="Localization">Localization</h3>
+
+<p>The allowed inputs for certain &lt;input&gt; types depend on the locale. In some locales, 1,000.00 is a valid number, while in other locales the valid way to enter this number is 1.000,00.</p>
+
+<p>Firefox uses the following heuristics to determine the locale to validate the user's input (at least for <code>type="number"</code>):</p>
+
+<ul>
+ <li>Try the language specified by a <code>lang</code>/<code>xml:lang</code> attribute on the element or any of its parents.</li>
+ <li>Try the language specified by any Content-Language HTTP header or</li>
+ <li>If none specified, use the browser's locale.</li>
+</ul>
+
+<h3 id="Using_mozactionhint_on_Firefox_mobile">Using mozactionhint on Firefox mobile</h3>
+
+<p>You can use the {{htmlattrxref("mozactionhint", "input")}} attribute to specify the text for the label of the enter key on the virtual keyboard when your form is rendered on Firefox mobile. For example, to have a "Next" label, you can do this:</p>
+
+<pre class="brush: html">&lt;input type="text" mozactionhint="next"&gt;
+</pre>
+
+<p>The result is:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/3251/mozactionhint.png" style="border-style: solid; border-width: 1px; height: 400px; width: 240px;"></p>
+
+<p>Note the "Next" key in the lower-right corner of the keyboard.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Form constraint validation</a></li>
+ <li><a class="external" href="http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text">Cross-browser HTML5 placeholder text</a></li>
+ <li>The CSS {{cssxref("caret-color")}} property</li>
+ <li>In certain cases (typically involving non-textual inputs and specialized interfaces), the <code>&lt;input&gt;</code> element is a <a href="/en-US/docs/Web/CSS/Replaced_element">replaced element</a>. When it is, the position and size of the elemnt's size and positioning within its frame can be adjusted using the CSS {{cssxref("object-position")}} and {{cssxref("object-fit")}} properties</li>
+</ul>
diff --git a/files/uk/web/html/index.html b/files/uk/web/html/index.html
new file mode 100644
index 0000000000..3f865c915a
--- /dev/null
+++ b/files/uk/web/html/index.html
@@ -0,0 +1,91 @@
+---
+title: HTML
+slug: Web/HTML
+tags:
+  - HTML
+  - HTML5
+  - Landing
+  - WWW
+  - Гіпертекст
+  - Довідка
+translation_of: Web/HTML
+---
+<div>{{HTMLSidebar()}}</div>
+
+<p><span class="seoSummary">Мова гіпертекстової розмітки (HyperText Markup Language </span>— HTML<span class="seoSummary">) використовується для створення і візуального відображення веб-сторінок.</span></p>
+
+<p>Основу кожної веб-сторінки в мережі Інтернет становить HTML. Під терміном «гіпертекст» мається на увазі текст, сформований за допомогою мови розмітки і який містить гіперпосилання, якими зв'язані веб-сторінки одна з одною, роблячи Всесвітню павутину тим, чим вона є сьогодні. Створюючи і публікуючи веб-сторінки в мережі Інтернет, ви стаєте активними учасниками Всесвітньої павутини. HTML підтримує як візуальні зображення, так і інший медіаконтент. HTML є мовою, що описує структуру і семантику вмісту веб-документу. Контент веб-сторінки розмічений за допомогою тегів, що представляють HTML-елементи. Прикладами таких елементів є {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("picture")}}, і т.д. Ці елементи формують будівельні блоки для будь-якого веб-сайта.</p>
+
+<p>Статті, представлені тут, містять довідкові матеріали з веб-розробки.</p>
+
+<section class="cleared" id="sect1">
+<ul class="card-grid">
+ <li><span>HTML довідник</span>
+
+  <p>У нашому <a href="/uk/docs/Web/HTML/Reference">докладному довіднику</a> ви знайдете всю необхідну інформацію до кожного з елементів і атрибутів HTML.</p>
+ </li>
+ <li><span>HTML посібник</span>
+  <p>Для читання статтей, підручників і прикладів по HTML, зверніться до нашого <a href="/uk/docs/Web/Guide/HTML">посібника HTML розробника</a>.</p>
+ </li>
+ <li><span>Вступ до HTML</span>
+  <p>Якщо ви новачок в Web-розробці, то прочитайте наш <a href="https://developer.mozilla.org/uk/docs/Web/Guide/HTML/Introduction">вступ</a> про те, що таке HTML і як ним користуватись.</p>
+ </li>
+</ul>
+
+<div class="in-page-callout webdev">
+<h3 id="Бажаєте_стати_веб-розробником_фронтенду">Бажаєте стати веб-розробником фронтенду?</h3>
+
+<p>Ми уклали повний курс, що включає в себе всю необхідну інформацію задля досягнення вашої мети.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Розпочати</a></p>
+</div>
+
+<h2 class="Documentation" id="Довідники">Довідники</h2>
+
+<dl>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Block-level_elements">Блокові елементи</a></dt>
+ <dd class="landingPageList">В HTML (мові гіпертекстової розмітки — Hypertext Markup Language) елементи бувають блокові або <a href="/uk/docs/Web/HTML/Inline_elements">рядкові</a>. Блокові елементи займають всю ширину батьківського елемента (контейнера), таким чином утворюючи блок. У цій статті пояснюється, як це працює. </dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/CORS_enabled_image">CORS: включені зображення</a></dt>
+ <dd class="landingPageList">Специфікації HTML вводять атрибут <code><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element/img#attr-crossorigin">crossorigin</a></code>, що разом з відповідним заголовком <a class="glossaryLink" href="https://developer.mozilla.org/uk/docs/Glossary/CORS" title="CORS: It is insecure to allow a webpage to request any resources from any other domains without limitation. CORS (Cross-Origin Resource Sharing) is a system that determines whether to block or fulfill these requests.">CORS</a> дозволяють використовувати зображення через елемент <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element/img" title="The HTML Image Element (&lt;img>) represents an image of the document."><code>&lt;img&gt;</code></a> і завантаженому з інших джерел зображенням бути використаним в canvas так, як наче вони завантажуються з поточного джерела.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/CORS_settings_attributes">CORS: налаштування атрибутів</a></dt>
+ <dd class="landingPageList">В HTML5, деякі HTML-елементи, що підтримують <a href="https://developer.mozilla.org/uk/docs/HTTP/Access_control_CORS">CORS</a>, такі як <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element/img" title="The HTML Image Element (&lt;img>) represents an image of the document."><code>&lt;img&gt;</code></a> або <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element/video" title="The HTML &lt;video> element is used to embed video content. It may contain several video sources, represented using the src attribute or the &lt;source> element; the browser will choose the most suitable one."><code>&lt;video&gt;</code></a>, мають <code>crossorigin</code> атрибут (<code>crossOrigin</code> властивості), який дозволяє налаштувати запити CORS для отриманих даних елемента.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Controlling_spell_checking_in_HTML_formsControlling_spell_checking_in_HTML_forms">Контроль правопису в формах HTML</a></dt>
+ <dd class="landingPageList">Firefox 2 вводить підтримку перевірки правопису в текстових полях та полях веб-форм. Користувач може вказати використання інтерфейсу about:config незалежно від того, чи ввімкнено перевірку правопису, і чи потрібно перевіряти обидва текстові поля, чи лише текстові області.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/DASH_Adaptive_Streaming_for_HTML_5_Video">DASH Адаптивний потік для HTML 5 відео</a></dt>
+ <dd class="landingPageList">Dynamic Adaptive Streaming over HTTP (DASH) - це адаптивний потоковий (трансляційний) протокол. Це означає, що він дозволяє потоку відеозв'язку (трансляції) переключатися між швидкістю передачі даних (бітрейтом) на основі пропускної здатності мережі, щоб продовжувати відтворення відео.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Focus_management_in_HTML">Управління фокусом в HTML</a></dt>
+ <dd class="landingPageList">В робочому проекті HTML5 <code><a href="https://developer.mozilla.org/en/DOM/document.activeElement" title="en/DOM/document.activeElement">activeElement</a></code> DOM атрибут та <code><a href="https://developer.mozilla.org/en/DOM/document.hasFocus" title="en/DOM/document.hasFocus">hasFocus()</a></code> DOM метод дають програмісту можливість кращого контролю інтерактивності сторінки в результаті дій користувача. Наприклад, обидва вони можуть бути використані для складання статистики, відстеження кількості кліків на певних посиланнях сторінки, вимірювання часу, протягом якого активний елемент тощо. Крім того, у поєднанні з технологією AJAX, вони допомагають мінімізувати кількість запитів на сервер в залежності від активності користувача та розмітки сторінки.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Global_attributes">Глобальні атрибути</a></dt>
+ <dd class="landingPageList"><span id="result_box" lang="uk"><span>Глобальні атрибути можуть бути вказані на всіх елементах HTML, навіть тих, які не вказані в стандарті</span></span> . <span id="result_box" lang="uk"><span>Це означає, що будь-які нестандартні елементи, як і раніше, повинні дозволити ці атрибути, навіть якщо використання цих елементів означає, що документ більше не відповідає стандарту HTML5.</span></span> <span id="result_box" lang="uk"><span>Наприклад, HTML5-сумісні браузери приховують вміст, позначений як</span></span> <code>&lt;foo hidden&gt;...&lt;foo&gt;</code><code>, </code>хоча <code>&lt;foo&gt;</code> не є дійсним елементом HTML.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Attributes">Довідка по HTML атрибутам</a></dt>
+ <dd class="landingPageList">Елементи в HTML мають <strong>атрибути</strong>; <span id="result_box" lang="uk"><span>це додаткові значення, які налаштовують елементи або регулюють їх поведінку різними способами для задоволення критеріїв, які хочуть користувачі</span></span>.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element">Довідка по HTML елементам</a></dt>
+ <dd class="landingPageList">Ця сторінка містить усі <a class="glossaryLink" href="https://developer.mozilla.org/uk/docs/Glossary/HTML" title="HTML: HTML (HyperText Markup Language) is a descriptive language that specifies webpage structure.">HTML елементи</a>.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Reference">Довідка по HTML</a></dt>
+ <dd class="landingPageList"><span id="result_box" lang="uk"><span>HTML - це мова, яка описує структуру та семантичний вміст веб-документа;</span> <span>він складається з <strong>елементів</strong>, кожен з яких може бути змінений деякою кількістю <strong>атрибутів</strong></span></span>.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Inline_elemente">Рядкові елементи</a></dt>
+ <dd class="landingPageList">В HTML (мові гіпертекстової розмітки — Hypertext Markup Language) елементи бувають <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Block-level_elements">блокові</a> або рядкові. Рядковий елемент займає стільки місця в рядку, скільки вимагає розмір самого елемента, і його вплив обмежується тегами, які цей елемент визначають. Приклади у цій статті пояснюють, як працюють рядкові елементи.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Link_types">Типи посилань</a></dt>
+ <dd class="landingPageList"><span id="result_box" lang="uk"><span>У HTML наступні типи посилань вказують на зв'язок між двома документами, в яких одне посилання на інше використовується за допомогою елемента</span></span> <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element/a" title="The HTML &lt;a> Element (or the HTML Anchor Element) defines a hyperlink, the named target destination for a hyperlink, or both."><code>&lt;a&gt;</code></a>, <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element/area" title="The HTML &lt;area> element defines a hot-spot region on an image, and optionally associates it with a hypertext link. This element is used only within a &lt;map> element."><code>&lt;area&gt;</code></a>, або <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element/link" title="The HTML Link Element (&lt;link>) specifies relationships between the current document and an external resource. Possible uses for this element include defining a relational framework for navigation. This Element is most used to link to style sheets."><code>&lt;link&gt;</code></a>.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Supported_media_formats">Медіа формати, що підтримуються аудіо та відео елементами HTML</a></dt>
+ <dd class="landingPageList">Елементи <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element/audio" title="The HTML &lt;audio> element is used to embed sound content in documents. It may contain several audio sources, represented using the src attribute or the &lt;source> element; the browser will choose the most suitable one."><code>&lt;audio&gt;</code></a> та <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element/video" title="The HTML &lt;video> element is used to embed video content. It may contain several video sources, represented using the src attribute or the &lt;source> element; the browser will choose the most suitable one."><code>&lt;video&gt;</code></a> надають підтримку для відтворення аудіо та відео матеріалів, не вимагаючи плагінів.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/microformats">Мікроформати</a></dt>
+ <dd class="landingPageList"><span class="p-summary"><a class="external external-icon" href="http://microformats.org"><dfn>Мікроформати</dfn></a> (іноді використовується абревіатура <strong>μF</strong>) </span> <span id="result_box" lang="uk"><span>- це невеликі шаблони HTML для позначення таких об'єктів, як люди, організації, події, місця розташування, публікації в блозі, продукти, огляди, резюме, рецепти тощо</span></span><span class="p-summary">.</span><br>
+ Вони є простими для вставки семантики в HTML і швидко надають API, <span id="result_box" lang="uk"><span>який буде використовуватися пошуковими системами, агрегаторами та іншими інструментами</span></span>.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing">Оптимізація ваших сторінок для спекулятивного парсингу (аналізу)</a></dt>
+ <dd class="landingPageList">Традиційно в браузерах HTML-парсер (аналізатор) працює на головній гілці і блокується після тега <code>&lt;/script&gt;</code> доки сценарій не буде завантажено з мережі і не виконано. HTML парсер в Firefox 4 і новіших підтримує спекулятивний синтаксичний аналіз поза головної гілки. Він продовжує парсити, доки скрипти завантажуються і виконуються. Як і в Firefox 3.5 та 3.6, HTML парсер починає спекулятивні завантаження скриптів, стилів і зображень, коли він знаходить їх у початку потоку. <span id="result_box" lang="uk"><span>Проте в Firefox 4 і новіше HTML-парсер також спекулятивно виконує алгоритм побудови дерева HTML</span></span> . Та коли спекуляція (відстежування) вдається, немає необхідності переробляти частину вхідного файлу, який вже був сканований на скрипти, стилі та зображення. Недоліком є те, що більше роботи втрачається, коли спекуляція (відстежування) зазнала невдачі.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Using_the_application_cache">Використання кешу додатків</a></dt>
+ <dd class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/HTML/HTML5" title="HTML/HTML5">HTML5</a> <span id="result_box" lang="uk"><span>забезпечує механізм <em>кешування додатків</em>, який дозволяє веб-додаткам працювати в автономному режимі.</span></span> Розробники можуть використовувати інтерфейс <strong>Application Cache</strong> (<em>AppCache</em>) <span id="result_box" lang="uk"><span>щоб вказати ресурси, які браузер повинен кешувати та зробити доступними для офлайн-користувачів</span></span>. Додатки, які кешують завантаження, працюють коректно, навіть якщо користувачі клікають кнопку оновлення, коли вони знаходяться офлайн.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/uk/docs/tag/HTML" title="Article tagged: HTML">Переглянути все...</a></span></p>
+
+<div class="section">
+<h2 class="Tools" id="Tools" name="Tools">Інструкції та посібники</h2>
+
+<dl>
+ <dt><a href="/uk/docs/Web/Guide/HTML">Інструкція з HTML для розробників</a></dt>
+ <dd><span id="result_box" lang="uk"><span>Статті MDN, що демонструють конкретні методи, які ви можете використовувати при створенні веб-контенту за допомогою HTML, а також навчальні посібники та інші матеріали, які можуть бути вам корисними.</span> <span>Довідник може містити редакційні уроки, поради та інформацію щодо розробки HTML.</span></span></dd>
+</dl>
+</div>
+</section>
diff --git a/files/uk/web/html/inline_elements/index.html b/files/uk/web/html/inline_elements/index.html
new file mode 100644
index 0000000000..908a9b6263
--- /dev/null
+++ b/files/uk/web/html/inline_elements/index.html
@@ -0,0 +1,79 @@
+---
+title: Рядкові елементи
+slug: Web/HTML/Inline_elements
+tags:
+  - HTML
+translation_of: Web/HTML/Inline_elements
+---
+<h2 id="Summary" name="Summary">Вступ</h2>
+
+<p>В HTML (мові гіпертекстової розмітки — Hypertext Markup Language) елементи бувають <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Block-level_elements">блокові</a> або рядкові. Рядковий елемент займає стільки місця в рядку, скільки вимагає розмір самого елемента, і його вплив обмежується тегами, які цей елемент визначають. Приклади у цій статті пояснюють, як працюють рядкові елементи.</p>
+
+<h2 id="Inline_example" name="Inline_example">Приклад рядкового елемента</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Цей &lt;span&gt;span&lt;/span&gt; є рядковим елементом; колір його бекграунда змінений, щоб показати початок і кінець елемента.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">span { background-color: #8ABB55; }
+</pre>
+
+<p>{{ EmbedLiveSample('Inline_example') }}</p>
+
+<h2 id="Рядкові_vs._блокові">Рядкові vs. блокові</h2>
+
+<dl>
+ <dt>Модель контенту</dt>
+ <dd>Зазвичай рядкові елементи можуть містити лише дані та інші рядкові елементи.</dd>
+ <dt>Форматування</dt>
+ <dd>За замовчуванням, рядкові елементи не починаються з нового рядка.</dd>
+</dl>
+
+<h2 id="Elements" name="Elements">Елементи</h2>
+
+<p>Ці елементи є рядковими:</p>
+
+<div class="threecolumns">
+<dl>
+ <dt>{{ HTMLElement("a") }}</dt>
+ <dt>{{ HTMLElement("b") }}</dt>
+ <dt>{{ HTMLElement("big") }}</dt>
+ <dt>{{ HTMLElement("i") }}</dt>
+ <dt>{{ HTMLElement("small") }}</dt>
+ <dt>{{ HTMLElement("tt") }}</dt>
+ <dt>{{ HTMLElement("abbr") }}</dt>
+ <dt>{{ HTMLElement("acronym") }}</dt>
+ <dt>{{ HTMLElement("cite") }}</dt>
+ <dt>{{ HTMLElement("code") }}</dt>
+ <dt>{{ HTMLElement("dfn") }}</dt>
+ <dt>{{ HTMLElement("em") }}</dt>
+ <dt>{{ HTMLElement("kbd") }}</dt>
+ <dt>{{ HTMLElement("strong") }}</dt>
+ <dt>{{ HTMLElement("samp") }}</dt>
+ <dt>{{ HTMLElement("time") }}</dt>
+ <dt>{{ HTMLElement("var") }}</dt>
+ <dt>{{ HTMLElement("bdo") }}</dt>
+ <dt>{{ HTMLElement("br") }}</dt>
+ <dt>{{ HTMLElement("img") }}</dt>
+ <dt>{{ HTMLElement("map") }}</dt>
+ <dt>{{ HTMLElement("object") }}</dt>
+ <dt>{{ HTMLElement("q") }}</dt>
+ <dt>{{ HTMLElement("script") }}</dt>
+ <dt>{{ HTMLElement("span") }}</dt>
+ <dt>{{ HTMLElement("sub") }}</dt>
+ <dt>{{ HTMLElement("sup") }}</dt>
+ <dt>{{ HTMLElement("button") }}</dt>
+ <dt>{{ HTMLElement("input") }}</dt>
+ <dt>{{ HTMLElement("label") }}</dt>
+ <dt>{{ HTMLElement("select") }}</dt>
+ <dt>{{ HTMLElement("textarea") }}</dt>
+</dl>
+</div>
+
+<h2 id="See_also" name="See_also">Також дивися</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/uk/docs/Web/HTML/Block-level_elements">Блокові елементи</a></li>
+</ul>
diff --git a/files/uk/web/html/довідник/index.html b/files/uk/web/html/довідник/index.html
new file mode 100644
index 0000000000..2e4425a878
--- /dev/null
+++ b/files/uk/web/html/довідник/index.html
@@ -0,0 +1,27 @@
+---
+title: HTML довідник
+slug: Web/HTML/Довідник
+tags:
+  - HTML
+  - Landing
+  - WWW
+  - Довідка
+translation_of: Web/HTML/Reference
+---
+<div>{{HTMLSidebar}}</div>
+
+<p>Цей <a href="/en-US/docs/Web/HTML">HTML</a>-довідник описує всі <strong>елементи </strong>і <strong>атрибути</strong> HTML, включаючи <strong>глобальні атрибути,</strong> які застосовуються до всіх елементів.</p>
+
+<dl>
+ <dd></dd>
+ <dt><a href="/en-US/docs/Web/HTML/Element">Довідник HTML елементів</a></dt>
+ <dd>This page lists all the HTML elements.</dd>
+ <dt><a href="/en-US/docs/Web/HTML/Attributes">Довідник HTML атрибутів</a></dt>
+ <dd>Elements in HTML have attributes; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want.</dd>
+ <dt><a href="/en-US/docs/Web/HTML/Global_attributes">Глобальні атрибути</a></dt>
+ <dd>Global attributes may be specified on all HTML elements, even those not specified in the standard. That means that any non-standard elements must still permit these attributes, even though using those elements means that the document is no longer HTML5-compliant. For example, HTML5-compliant browsers hide content marked as &lt;foo hidden&gt;...&lt;foo&gt;, even though &lt;foo&gt; is not a valid HTML element.</dd>
+ <dt><a href="/en-US/docs/Web/HTML/Link_types">Типи посиланнь</a></dt>
+ <dd>In HTML, the following link types indicate the relationship between two documents, in which one links to the other using an &lt;a&gt;, &lt;area&gt;, or &lt;link&gt; element.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/HTML" title="Article tagged: HTML">Переглянути всі сторінки помічені "HTML"...</a></span></p>
diff --git a/files/uk/web/html/елемент/html/index.html b/files/uk/web/html/елемент/html/index.html
new file mode 100644
index 0000000000..22489d772f
--- /dev/null
+++ b/files/uk/web/html/елемент/html/index.html
@@ -0,0 +1,169 @@
+---
+title: <html>
+slug: Web/HTML/Елемент/html
+tags:
+  - Корінь
+  - Структура
+translation_of: Web/HTML/Element/html
+---
+<p>{{HTMLRef}}</p>
+
+<p>HTML-елемент<strong> <code>&lt;html&gt;</code></strong> являє собою корінь HTML-документа. Решта елементів мають бути його нащадками.</p>
+
+<p>Оскільки <strong><code>&lt;html&gt;</code></strong> є першим (за винятком коментарів) елементом документа, він зветься <em>кореневим елементом</em>. І хоча цей тег може бути відсутнім для {{glossary("HTML")}}, в {{glossary("XHTML")}} він має бути відкритий і закритий явно.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th><a href="/uk/docs/Web/Guide/HTML/Content_categories">Категорії вмісту</a></th>
+   <td>Відсутні.</td>
+  </tr>
+  <tr>
+   <th>Дозволений вміст</th>
+   <td>Один елемент {{HTMLElement("head")}} та один (наступний за ним) елемент {{HTMLElement("body")}}.</td>
+  </tr>
+  <tr>
+   <th>Обов'язковість тегів</th>
+   <td>
+    <p>Початковий тег можна опустити, якщо перша річ всередині елементу &lt;html&gt; — не коментар. Кінцевий тег можна опустити тоді, коли одразу після елементу &lt;html&gt;<code> немає коментаря</code>, і він містить елемент {{HTMLElement("body")}}, що має або вміст (непустий), або початковий тег.</p>
+   </td>
+  </tr>
+  <tr>
+   <th>Дозволені пращури</th>
+   <td>Як кореневий елемент документа, або як піддокумент складного документа там, де це дозволено.</td>
+  </tr>
+  <tr>
+   <th>Інтерфейс DOM</th>
+   <td>{{domxref("HTMLHtmlElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибути">Атрибути</h2>
+
+<p><span style="line-height: 21px;">Цей елемент має </span><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">глобальні атрибути</a><span style="line-height: 21px;">.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("manifest")}} {{obsolete_inline}}</dt>
+ <dd>Вказує URI manifest-файлу, що позначає ресурси, які підлягають локальному кешуванню. Детальніше див. <a href="/en-US/docs/Web/HTML/Using_the_application_cache" title="/en-US/docs/HTML/Using_the_application_cache">Using the application cache</a>.</dd>
+ <dt>{{htmlattrdef("version")}} {{obsolete_inline}}</dt>
+ <dd>Вказує версію HTML {{glossary("DTD", "Document Type Definition")}}  цього документа. Цей атрибут визнано застарілим, вживайте !DOCTYPE замість нього.</dd>
+ <dt>{{htmlattrdef("xmlns")}} </dt>
+ <dd>Вказує простір імен (XML) документа. Типове значення <code>"http://www.w3.org/1999/xhtml"</code>. Для XHTML то обов'язковий атрибут, а для HTML може бути відсутнім.</dd>
+</dl>
+
+<h2 id="Приклад">Приклад</h2>
+
+<div class="note">
+<p>Використаний в прикладі  {{glossary("DOCTYPE")}} вказує на {{glossary("HTML5")}}.</p>
+</div>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;...&lt;/head&gt;
+  &lt;body&gt;...&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-html-element', '&lt;html&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '&lt;html&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Додано підтримку атрибута <code>manifest</code> (згодом визнаний застарілим).<br>
+    Атрибут <code>version</code> визнано застарілим.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.3', '&lt;html&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Атрибут <code>version</code> визнано застарілим.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Підтримка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>manifest</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>manifest</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>Елемент MathML верхнього рівня: {{MathMLElement("math")}}</li>
+ <li>Елемент SVG верхнього рівня: {{SVGElement("svg")}}</li>
+</ul>
diff --git a/files/uk/web/html/елемент/iframe/index.html b/files/uk/web/html/елемент/iframe/index.html
new file mode 100644
index 0000000000..fc5b06a037
--- /dev/null
+++ b/files/uk/web/html/елемент/iframe/index.html
@@ -0,0 +1,260 @@
+---
+title: '<iframe>: The Inline Frame element'
+slug: Web/HTML/Елемент/iframe
+translation_of: Web/HTML/Element/iframe
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">Элемент <strong>встроенного фрейма HTML ( <code>&lt;iframe&gt;</code>)</strong> представляет собой вложенный {{Glossary("контекст просмотра")}}, встраивающий другую HTML-страницу в текущую.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/iframe.html", "tabbed-standard")}}</div>
+
+<div class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</div>
+
+<p>Каждый встроенный контекст просмотра имеет собственную <a href="/en-US/docs/Web/API/History">историю сеанса</a> и <a href="/en-US/docs/Web/API/Document">документ</a> . Контекст просмотра, в который встроены остальные, называется <em><dfn>родительским</dfn> контекстом просмотра</em> . Самый <em>верхний</em> контекст просмотра - тот, у которого нет родителя - обычно это окно браузера, представленное объектом {{domxref("Window")}}.</p>
+
+<div class="blockIndicator warning">
+<p>Поскольку каждый контекст просмотра представляет собой полную среду документа, каждый <code>&lt;iframe&gt;</code>элемент на странице требует увеличения памяти и других вычислительных ресурсов. Хотя теоретически вы можете использовать сколько <code>&lt;iframe&gt;</code>угодно s, проверьте, нет ли проблем с производительностью.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Контент потока</a> , <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a> , встроенный контент, интерактивный контент, осязаемый контент.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенный контент</th>
+   <td>Никто.</td>
+  </tr>
+  <tr>
+   <th scope="row">Отсутствие тега</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родители</th>
+   <td>Любой элемент, который принимает встроенный контент.</td>
+  </tr>
+  <tr>
+   <th scope="row">Неявная роль ARIA</th>
+   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Нет соответствующей роли</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные роли ARIA</th>
+   <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("img")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM интерфейс</th>
+   <td>{{domxref("HTMLIFrameElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент включает <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a> .</p>
+
+<dl>
+ <dt>{{htmlattrdef("allow")}}</dt>
+ <dd>Задает <a href="/en-US/docs/Web/HTTP/Feature_Policy">политику функций</a> для <code>&lt;iframe&gt;</code>. Политика определяет, какие функции доступны, в <code>&lt;iframe&gt;</code>зависимости от источника запроса (например, доступ к микрофону, камере, батарее, API общего доступа и т. Д.).<br>
+ <br>
+ Для получения дополнительной информации и примеров см .: <a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Использование политики функций</a>  &gt; <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy#The_iframe_allow_attribute">Атрибут разрешения iframe</a> .</dd>
+ <dt>{{htmlattrdef("allowfullscreen")}}</dt>
+ <dd>Установите значение, <code>true</code>если <code>&lt;iframe&gt;</code>можно активировать полноэкранный режим путем вызова метода {{domxref("Element.requestFullscreen", "requestFullscreen ()")}}.</dd>
+ <dd>
+ <div class="note">Этот атрибут считается устаревшим и переопределяется как <code>allow="fullscreen"</code>.</div>
+ </dd>
+ <dt>{{htmlattrdef("allowpaymentrequest")}}</dt>
+ <dd>Установите, <code>true</code>если <code>&lt;iframe&gt;</code>необходимо разрешить перекрестному источнику вызывать <a href="/en-US/docs/Web/API/Payment_Request_API">API запроса платежа</a> .</dd>
+ <dd>
+ <div class="note">Этот атрибут считается устаревшим и переопределяется как <code>allow="payment"</code>.</div>
+ </dd>
+ <dt>{{htmlattrdef("csp")}} {{experimental_inline}}</dt>
+ <dd><a href="/en-US/docs/Web/HTTP/CSP">Содержание политики безопасности</a> применяются для внедренного ресурса. Подробнее см. {{Domxref("HTMLIFrameElement.csp")}}.</dd>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>Высота фрейма в пикселях CSS. По умолчанию <code>150</code>.</dd>
+ <dt>{{htmlattrdef("loading")}} {{experimental_inline}}</dt>
+ <dd>Указывает, как браузер должен загружать iframe:
+ <ul>
+  <li><code>eager</code>: Немедленно загрузить iframe, независимо от того, находится ли он за пределами видимого окна просмотра (это значение по умолчанию).</li>
+  <li><code>lazy</code>: Отложить загрузку iframe до тех пор, пока он не достигнет расчетного расстояния от области просмотра, как определено браузером.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>Целевое имя для встроенного контекста просмотра. Его можно использовать в <code>target</code>атрибуте элементов {{HTMLElement("a")}}, {{HTMLElement("form")}} или {{HTMLElement("base")}}; <code>formtarget</code>атрибутом {{HTMLElement( "input")}} или {{HTMLElement("button")}} элементов; или <code>windowName</code>параметр в методе {{domxref("Window.open ()", "window.open ()")}}.</dd>
+ <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt>
+ <dd>Указывает, какой <a href="/en-US/docs/Web/API/Document/referrer">реферер</a> отправлять при выборке ресурса кадра:
+ <ul>
+  <li><code>no-referrer</code>: Заголовок {{HTTPHeader("Referer")}} не будет отправлен.</li>
+  <li><code>no-referrer-when-downgrade</code> (default): The {{HTTPHeader("Referer")}} header will not be sent to {{Glossary("origin")}}s without {{Glossary("TLS")}} ({{Glossary("HTTPS")}}).</li>
+  <li><code>origin</code>: The sent referrer will be limited to the origin of the referring page: its <a href="/en-US/docs/Archive/Mozilla/URIScheme">scheme</a>, {{Glossary("host")}}, and {{Glossary("port")}}.</li>
+  <li><code>origin-when-cross-origin</code>: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.</li>
+  <li><code>same-origin</code>: A referrer will be sent for {{Glossary("Same-origin policy", "same origin")}}, but cross-origin requests will contain no referrer information.</li>
+  <li><code>strict-origin</code>: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).</li>
+  <li><code>strict-origin-when-cross-origin</code>: Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).</li>
+  <li><code>unsafe-url</code>: The referrer will include the origin <em>and</em> the path (but not the <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/hash">fragment</a>, <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/password">password</a>, or <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/username">username</a>). <strong>This value is unsafe</strong>, because it leaks origins and paths from TLS-protected resources to insecure origins.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("sandbox")}}</dt>
+ <dd>Applies extra restrictions to the content in the frame. The value of the attribute can either be empty to apply all restrictions, or space-separated tokens to lift particular restrictions:
+ <ul>
+  <li><code>allow-downloads-without-user-activation</code> {{experimental_inline}}: Allows for downloads to occur without a gesture from the user.</li>
+  <li><code>allow-downloads</code>: Allows for downloads to occur with a gesture from the user.</li>
+  <li><code>allow-forms</code>: Allows the resource to submit forms. If this keyword is not used, form submission is blocked.</li>
+  <li><code>allow-modals</code>: Lets the resource <a href="https://html.spec.whatwg.org/multipage/origin.html#sandboxed-modals-flag">open modal windows</a>.</li>
+  <li><code>allow-orientation-lock</code>: Lets the resource <a href="/en-US/docs/Web/API/Screen/lockOrientation">lock the screen orientation</a>.</li>
+  <li><code>allow-pointer-lock</code>: Lets the resource use the <a href="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a>.</li>
+  <li><code>allow-popups</code>: Allows popups (such as <code>window.open()</code>, <code>target="_blank"</code>, or <code>showModalDialog()</code>). If this keyword is not used, the popup will silently fail to open.</li>
+  <li><code>allow-popups-to-escape-sandbox</code>: Lets the sandboxed document open new windows without those windows inheriting the sandboxing. For example, this can safely sandbox an advertisement without forcing the same restrictions upon the page the ad links to.</li>
+  <li><code>allow-presentation</code>: Lets the resource start a <a href="/en-US/docs/Web/API/PresentationRequest">presentation session</a>.</li>
+  <li><code>allow-same-origin</code>: If this token is not used, the resource is treated as being from a special origin that always fails the {{Glossary("same-origin policy")}}.</li>
+  <li><code>allow-scripts</code>: Lets the resource run scripts (but not create popup windows).</li>
+  <li><code>allow-storage-access-by-user-activation</code> {{experimental_inline}}: Lets the resource request access to the parent's storage capabilities with the <a href="/en-US/docs/Web/API/Storage_Access_API">Storage Access API</a>.</li>
+  <li><code>allow-top-navigation</code>: Lets the resource navigate the top-level browsing context (the one named <code>_top</code>).</li>
+  <li><code>allow-top-navigation-by-user-activation</code>: Lets the resource navigate the top-level browsing context, but only if initiated by a user gesture.</li>
+ </ul>
+
+ <div class="note"><strong>Notes about sandboxing:</strong>
+
+ <ul>
+  <li>When the embedded document has the same origin as the embedding page, it is <strong>strongly discouraged</strong> to use both <code>allow-scripts</code> and <code>allow-same-origin</code>, as that lets the embedded document remove the <code>sandbox</code> attribute — making it no more secure than not using the <code>sandbox</code> attribute at all.</li>
+  <li>Sandboxing is useless if the attacker can display content outside a sandboxed <code>iframe</code> — such as if the viewer opens the frame in a new tab. Such content should be also served from a <em>separate origin</em> to limit potential damage.</li>
+  <li>The <code>sandbox</code> attribute is unsupported in Internet Explorer 9 and earlier.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>The URL of the page to embed. Use a value of <code>about:blank</code> to embed an empty page that conforms to the <a href="/en-US/docs/Web/Security/Same-origin_policy#Inherited_origins">same-origin policy</a>. Also note that programatically removing an <code>&lt;iframe&gt;</code>'s src attribute (e.g. via {{domxref("Element.removeAttribute()")}}) causes <code>about:blank</code> to be loaded in the frame in Firefox (from version 65), Chromium-based browsers, and Safari/iOS.</dd>
+ <dt>{{htmlattrdef("srcdoc")}}</dt>
+ <dd>Inline HTML to embed, overriding the <code>src</code> attribute. If a browser does not support the <code>srcdoc</code> attribute, it will fall back to the URL in the <code>src</code> attribute.</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>The width of the frame in CSS pixels. Default is <code>300</code>.</dd>
+</dl>
+
+<h3 id="Deprecated_attributes">Deprecated attributes</h3>
+
+<p>These attributes are deprecated and may no longer be supported by all user agents. You should not use them in new content, and try to remove them from existing content.</p>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt>
+ <dd>The alignment of this element with respect to the surrounding context.</dd>
+ <dt>{{htmlattrdef("frameborder")}} {{deprecated_inline}}</dt>
+ <dd>The value <code>1</code> (the default) draws a border around this frame. The value <code>0</code> removes the border around this frame, but you should instead use the CSS property {{cssxref("border")}} to control <code>&lt;iframe&gt;</code> borders.</dd>
+ <dt>{{htmlattrdef("longdesc")}} {{deprecated_inline}}</dt>
+ <dd>A URL of a long description of the frame's content. Due to widespread misuse, this is not helpful for non-visual browsers.</dd>
+ <dt>{{htmlattrdef("marginheight")}} {{deprecated_inline}}</dt>
+ <dd>The amount of space in pixels between the frame's content and its top and bottom borders.</dd>
+ <dt>{{htmlattrdef("marginwidth")}} {{deprecated_inline}}</dt>
+ <dd>The amount of space in pixels between the frame's content and its left and right borders.</dd>
+ <dt>{{htmlattrdef("scrolling")}} {{deprecated_inline}}</dt>
+ <dd>Indicates when the browser should provide a scrollbar for the frame:
+ <ul>
+  <li><code>auto</code>: Only when the frame's content is larger than its dimensions.</li>
+  <li><code>yes</code>: Always show a scrollbar.</li>
+  <li><code>no</code>: Never show a scrollbar.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Non-standard_attributes">Non-standard attributes</h3>
+
+<dl>
+ <dt>{{htmlattrdef("mozbrowser")}} {{non-standard_inline}}</dt>
+ <dd>
+ <div class="note">See {{bug(1318532)}} for exposing this to WebExtensions in Firefox.</div>
+ Makes the <code>&lt;iframe&gt;</code> act like a top-level browser window. See <a href="/en-US/docs/Mozilla/Gecko/Chrome/API/Browser_API">Browser API</a> for details.<br>
+ <strong>Available only to <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd>
+</dl>
+
+<h2 id="Scripting">Scripting</h2>
+
+<p>Inline frames, like {{HTMLElement("frame")}} elements, are included in the {{domxref("window.frames")}} pseudo-array.</p>
+
+<p>With the DOM {{domxref("HTMLIFrameElement")}} object, scripts can access the {{domxref("window")}} object of the framed resource via the {{domxref("HTMLIFrameElement.contentWindow", "contentWindow")}} property. The {{domxref("HTMLIFrameElement.contentDocument", "contentDocument")}} property refers to the <code>document</code> inside the <code>&lt;iframe&gt;</code>, same as <code>contentWindow.document</code>.</p>
+
+<p>From the inside of a frame, a script can get a reference to its parent window with {{domxref("window.parent")}}.</p>
+
+<p>Script access to a frame's content is subject to the <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>. Scripts cannot access most properties in other <code>window</code> objects if the script was loaded from a different origin, including scripts inside a frame accessing the frame's parent. Cross-origin communication can be achieved using {{domxref("Window.postMessage()")}}.</p>
+
+<h2 id="Positioning_and_scaling">Positioning and scaling</h2>
+
+<p>As a <a href="/en-US/docs/Web/CSS/Replaced_element">replaced element</a>, the position, alignment, and scaling of the embedded document within the <code>&lt;iframe&gt;</code> element's box, can be adjusted with the {{cssxref("object-position")}} and {{cssxref("object-fit")}} properties.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Example1" name="Example1">A simple &lt;iframe&gt;</h3>
+
+<p>An <code>&lt;iframe&gt;</code> in action. After creating the frame, when the user clicks a button, its title is displayed in an alert.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<div id="htmlOutputWrapper">
+<pre class="brush: html notranslate">&lt;iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html"
+            title="iframe Example 1" width="400" height="300"&gt;
+&lt;/iframe&gt;</pre>
+</div>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample('Example1', 640,400)}}</p>
+
+<h2 id="Accessibility_concerns">Accessibility concerns</h2>
+
+<p>People navigating with assistive technology such as a screen reader can use the <a href="/en-US/docs/Web/HTML/Global_attributes/title"><code>title</code> attribute</a> on an <code>&lt;iframe&gt;</code> to label its content. The title's value should concisely describe the embedded content:</p>
+
+<div id="htmlOutputWrapper">
+<pre class="brush: html notranslate">&lt;iframe title="Wikipedia page for Avocados" src="https://en.wikipedia.org/wiki/Avocado"&gt;&lt;/iframe&gt;</pre>
+</div>
+
+<p>Without this title, they have to navigate into the <code>&lt;iframe&gt;</code> to determine what its embedded content is. This context shift can be confusing and time-consuming, especially for pages with multiple <code>&lt;iframe&gt;</code>s and/or if embeds contain interactive content like video or audio.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Added the <code>referrerpolicy</code> attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'iframe-embed-object.html#the-iframe-element', '&lt;iframe&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-iframe-element', '&lt;iframe&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'present/frames.html#h-16.5', '&lt;iframe&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Screen Orientation')}}</td>
+   <td>{{Spec2('Screen Orientation')}}</td>
+   <td>Adds <code>allow-orientation-lock</code> to the <code>sandbox</code> attribute.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.iframe", 3)}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Privacy">Конфиденциальность, разрешения и информационная безопасность</a></li>
+</ul>
diff --git a/files/uk/web/html/елемент/index.html b/files/uk/web/html/елемент/index.html
new file mode 100644
index 0000000000..47bdb3f0fb
--- /dev/null
+++ b/files/uk/web/html/елемент/index.html
@@ -0,0 +1,96 @@
+---
+title: Опис HTML елементів
+slug: Web/HTML/Елемент
+translation_of: Web/HTML/Element
+---
+<p>{{HTMLSidebar("Elements")}}</p>
+
+<p><span class="seoSummary">This page lists all the {{Glossary("HTML")}} {{Glossary("Element","elements")}}.</span> They are grouped by function to help you find what you have in mind easily. Although this guide is written for those who are newer to coding, we intend it to be useful for anyone.</p>
+
+<h2 id="Основні_елементи">Основні елементи</h2>
+
+<p>Основні елементи є основою будь-якого HTML-документа. You'll see these elements in the source code for all web pages, following the doctype declaration, which is on the first line of the page. The doctype specifies which version of (X)HTML that page is using. Elements comprising the contents of a Web page are placed between the opening {{HTMLElement("html")}} tag and the closing <code>&lt;/html&gt;</code> tag. The {{HTMLElement("html")}} element is also known as the root element.</p>
+
+<p>{{HTMLRefTable("HTML Root Element")}}</p>
+
+<h2 id="Метадані_документу" style="line-height: 30px; font-size: 2.14285714285714rem;">Метадані документу</h2>
+
+<p>Metadata contains information about the page. This includes information about styles, scripts and data to help software ({{Glossary("search engine", "search engines")}}, {{Glossary("Browser","browsers")}}, etc.) use and render the page. Metadata for styles and scripts may be defined in the page or link to another file that has the information. </p>
+
+<p>{{HTMLRefTable("HTML Document Metadata")}}</p>
+
+<h2 id="Поділ_вмісту" style="line-height: 30px; font-size: 2.14285714285714rem;">Поділ вмісту</h2>
+
+<p>Content sectioning elements allow you to organize the document content into logical pieces. Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content.   </p>
+
+<p>{{HTMLRefTable("HTML Sections")}}</p>
+
+<h2 id="Текстовий_вміст" style="line-height: 30px; font-size: 2.14285714285714rem;">Текстовий вміст</h2>
+
+<p>Use HTML text content elements to organize blocks or sections of content placed between the opening {{HTMLElement("body")}} and closing <code>&lt;/body&gt;</code> tags. Important for {{Glossary("accessibility")}} and {{Glossary("SEO")}}, these elements identify the purpose or structure of that content.     </p>
+
+<p>{{HTMLRefTable("HTML Grouping Content")}}</p>
+
+<h2 id="Вбудована_семантика_тексту" style="line-height: 30px; font-size: 2.14285714285714rem;">Вбудована семантика тексту</h2>
+
+<p>Використовуйте вбудованний семантичний текст HTML, щоб визначити значення, структуру чи стиль слова, рядка чи будь-якого довільного фрагмента тексту.</p>
+
+<p>{{HTMLRefTable("HTML Text-Level Semantics")}}</p>
+
+<h2 id="Зображення_та_мультимедіа" style="line-height: 30px; font-size: 2.14285714285714rem;">Зображення та мультимедіа</h2>
+
+<p>HTML підтримує різні мультименійні ресурси, такі як зображення, аудіо та відео.</p>
+
+<p>{{HTMLRefTable("multimedia")}}</p>
+
+<h2 id="Вкладений_контент" style="line-height: 30px; font-size: 2.14285714285714rem;">Вкладений контент</h2>
+
+<p>Окрім звичайного мультимедійного контенту, HTML може включати в себе ще й інший вміст, навіть якщо з ним не завжди легко взаємодіяти.</p>
+
+<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p>
+
+<h2 id="Сценарій" style="line-height: 30px; font-size: 2.14285714285714rem;">Сценарій</h2>
+
+<p>Для створення динамічного контенту та веб-додатків,HML підтримує використання мов сценаріїв, найбільш чітко JavaScript. Деякі елементи підтримують цю можливість.</p>
+
+<p>{{HTMLRefTable("HTML Scripting")}}</p>
+
+<h2 id="Розмежувальні_зміни" style="line-height: 30px; font-size: 2.14285714285714rem;">Розмежувальні зміни</h2>
+
+<p>Ці елементи дозволяють вказати, що конкретні частини тексту були змінені.</p>
+
+<p>{{HTMLRefTable("HTML Edits")}}</p>
+
+<h2 id="Зміст_таблиці" style="line-height: 30px; font-size: 2.14285714285714rem;">Зміст таблиці</h2>
+
+<p>Елементи які тут знаходяться, використовуються для створення та обробки табличних даних.</p>
+
+<p>{{HTMLRefTable("HTML tabular data")}}</p>
+
+<h2 id="Форми" style="line-height: 30px; font-size: 2.14285714285714rem;">Форми</h2>
+
+<p>HTML provides a number of elements which can be used together to create forms which the user can fill out and submit to the Web site or application. There's a great deal of further information about this available in the <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML forms guide</a>.</p>
+
+<p>{{HTMLRefTable("HTML forms")}}</p>
+
+<h2 id="Interactive_elements" style="line-height: 30px; font-size: 2.14285714285714rem;">Interactive elements</h2>
+
+<p>HTML offers a selection of elements which help to create interactive user interface objects.</p>
+
+<p>{{HTMLRefTable("HTML interactive elements")}}</p>
+
+<h2 id="Web_Components" style="line-height: 30px; font-size: 2.14285714285714rem;">Web Components</h2>
+
+<p>Web Components is an HTML-related technology which makes it possible to, essentially, create and use custom elements as if it were regular HTML. In addition, you can even create custom versions of standard HTML elements, as well.</p>
+
+<div class="note"><strong>Note: </strong>The elements for Web Components are are defined in the {{Glossary("W3C","World Wide Web Consortium")}} (W3C) <a href="http://www.w3.org/TR/components-intro/" title="http://www.w3.org/TR/components-intro/">Web Components collection of specifications</a> rather than the HTML specification. In addition, the Web Components specification has not been finalized and is subject to change.</div>
+
+<p>{{HTMLRefTable({"include":["Web Components"],"elements":["shadow"]})}}</p>
+
+<h2 id="Obsolete_and_deprecated_elements" style="line-height: 30px; font-size: 2.14285714285714rem;">Obsolete and deprecated elements</h2>
+
+<div class="warning" style="font-size: 14px;">
+<p><strong>Warning:</strong> These are old HTML elements which are deprecated and should not be used. <strong>You should never use them in new projects, and should replace them in old projects as soon as you can.</strong> They are listed here for informational purposes only.</p>
+</div>
+
+<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p>
diff --git a/files/uk/web/html/елемент/link/index.html b/files/uk/web/html/елемент/link/index.html
new file mode 100644
index 0000000000..27f4e1b487
--- /dev/null
+++ b/files/uk/web/html/елемент/link/index.html
@@ -0,0 +1,325 @@
+---
+title: '<link>: The External Resource Link element'
+slug: Web/HTML/Елемент/link
+translation_of: Web/HTML/Element/link
+---
+<div><font><font>{{HTMLRef}}</font></font></div>
+
+<p><font><font>Елемент </font></font><strong><font><font>посилання зовнішнього ресурсу HTML ( </font></font><code>&lt;link&gt;</code><font><font>)</font></font></strong><font><font> визначає відносини між поточним документом і зовнішнім ресурсом. </font><font>Цей елемент найчастіше використовується для посилання на {{Glossary ("CSS", "stylesheets")}}, але також використовується для встановлення значків сайтів (іконок стилів favicon і мобільного домашнього екрана / значків програм) .</font></font></p>
+
+<div><font><font>{{EmbedInteractiveExample ("сторінки / вкладки / link.html")}}</font></font></div>
+
+<div class="hidden"><font><font>Джерело для цього інтерактивного прикладу зберігається в сховищі GitHub. </font><font>Якщо ви хочете внести свій внесок до проекту інтерактивних прикладів, будь ласка, клонуйте </font></font><a href="https://github.com/mdn/interactive-examples"><font><font>https://github.com/mdn/interactive-examples</font></font></a><font><font> і надішліть нам запит pull.</font></font></div>
+
+<p><font><font>Щоб пов’язати зовнішню таблицю стилів, потрібно включити </font></font><code>&lt;link&gt;</code><font><font>елемент у {{HTMLElement ("head")}} так:</font></font></p>
+
+<pre class="brush: html no-line-numbers"><font><font>&lt;link href = "main.css" rel = "stylesheet"&gt;</font></font></pre>
+
+<p><font><font>Цей простий приклад надає шлях до таблиці стилів всередині </font></font><code>href</code><font><font>атрибута і </font></font><code>rel</code><font><font>атрибут зі значенням </font></font><code>stylesheet</code><font><font>. </font><font>Поняття </font></font><code>rel</code><font><font>"відносини", і, можливо, одна з ключових особливостей </font></font><code>&lt;link&gt;</code><font><font>елемента - значення позначає, як пов'язаний елемент пов'язаний з документом, що містить. </font><font>Як видно з </font></font><a href="/en-US/docs/Web/HTML/Link_types"><font><font>посилання на типи</font></font></a><font><font> посилань, існує багато різних типів відносин.</font></font></p>
+
+<p><font><font>Існує ряд інших поширених типів. </font><font>Наприклад, посилання на значок сайту:</font></font></p>
+
+<pre class="brush: html no-line-numbers"><font><font>&lt;link rel = "icon" href = "favicon.ico"&gt;</font></font></pre>
+
+<p><font><font>Існує ряд інших </font></font><code>rel</code><font><font>значень </font><font>значків </font><font>, які в основному використовуються для позначення спеціальних типів піктограм для використання на різних мобільних платформах, наприклад:</font></font></p>
+
+<pre class="brush: html no-line-numbers"><font><font>&lt;link rel = "розмір яблуко-значка-попередній" розмір = "114x114"</font></font><font><font>
+      href = "apple-icon-114.png" type = "image / png"&gt;</font></font></pre>
+
+<p><code>sizes</code><font><font>Атрибут вказує розмір значків, в </font><font>той час як </font></font><code>type</code><font><font>містить MIME - </font><font>тип ресурсу пов'язані між собою </font><font>. </font><font>Вони надають корисні поради, які дозволяють браузеру вибрати найбільш доступну піктограму.</font></font></p>
+
+<p><font><font>Ви також можете вказати тип або запит носія в </font></font><code>media</code><font><font>атрибуті; </font><font>цей ресурс буде завантажено лише в тому випадку, якщо умова носія є істинною. </font><font>Наприклад:</font></font></p>
+
+<pre class="brush: html no-line-numbers"><font><font>&lt;link href = "print.css" rel = "stylesheet" media = "print"&gt;</font></font><font><font>
+&lt;link href = "mobile.css" rel = "stylesheet" media = "екран і (max-width: 600px)</font></font></pre>
+
+<p><font><font>До </font></font><code>&lt;link&gt;</code><font><font>елемента також </font><font>додано кілька цікавих нових функцій продуктивності та безпеки </font><font>. </font><font>Візьміть цей приклад:</font></font></p>
+
+<pre class="brush: html no-line-numbers"><font><font>&lt;link rel = "preload" href = "myFont.woff2" як = "шрифт"</font></font><font><font>
+      type = "font / woff2" crossorigin = "anonymous"&gt;</font></font></pre>
+
+<p><code>rel</code><font><font>Значення </font></font><code>preload</code><font><font>вказує на те, </font><font>що браузер повинен попередньо завантажити цей ресурс (див </font></font><a href="/en-US/docs/Web/HTML/Preloading_content"><font><font>предзагрузкі зміст з отн = "переднавантаження»</font></font></a><font><font> для отримання </font><font>більш докладної інформації), з </font></font><code>as</code><font><font>атрибутом , </font><font>що вказує певний клас контенту, витягується. </font></font><code>crossorigin</code><font><font>Атрибут вказує , </font><font>чи повинен ресурс бути залучена з {{Глосарій ( «CORS»)}} запитом.</font></font></p>
+
+<p><font><font>Інші примітки щодо використання:</font></font></p>
+
+<ul>
+ <li><code>&lt;link&gt;</code><font><font>Елемент може відбуватися або в {{HTMLElement ( «голова»)}} або {HTMLElement} {( «тіло»)} елемента, в </font><font>залежності від того, </font><font>чи має він </font></font><a href="https://html.spec.whatwg.org/multipage/links.html#body-ok"><font><font>тип зв'язку</font></font></a><font><font> , який є </font></font><strong><font><font>тілом-ок</font></font></strong><font><font> . </font><font>Наприклад, </font></font><code>stylesheet</code><font><font>тип зв'язку - це тіло-ok, і тому </font></font><code>&lt;link rel="stylesheet"&gt;</code><font><font>дозволено в тілі. </font><font>Проте, це не хороша практика; </font><font>більше сенсу відокремлювати </font></font><code>&lt;link&gt;</code><font><font>елементи від вмісту тіла, розміщуючи їх у </font></font><code>&lt;head&gt;</code><font><font>.</font></font></li>
+ <li><font><font>При використанні </font></font><code>&lt;link&gt;</code><font><font>для створення значка Favicon для сайту, і ваш сайт використовує політику безпеки контенту (CSP) для підвищення своєї безпеки, політика застосовується до позначки. </font><font>Якщо у </font><font>вас виникли проблеми з Favicon не завантажується, переконайтеся , </font><font>що {{HTTPHeader ( «Content-Security-Policy»)}} заголовка по </font></font><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code><font><font>директиві</font></font></a><font><font> не запобігання доступу до нього.</font></font></li>
+ <li><font><font>Специфікації HTML і XHTML визначають обробники подій для </font></font><code>&lt;link&gt;</code><font><font>елемента, але незрозуміло, як вони будуть використовуватися.</font></font></li>
+ <li><font><font>Під XHTML 1.0, порожні елементи , </font><font>такі як </font></font><code>&lt;link&gt;</code><font><font>вимагають слеш: </font></font><code>&lt;link /&gt;</code><font><font>.</font></font></li>
+ <li><font><font>WebTV підтримує використання значення </font></font><code>next</code><font><font>для </font></font><code>rel</code><font><font>попереднього завантаження наступної сторінки в серії документів.</font></font></li>
+</ul>
+
+<h2 id="Атрибути"><font><font>Атрибути</font></font></h2>
+
+<p><font><font>Цей елемент включає </font></font><a href="/en-US/docs/Web/HTML/Global_attributes"><font><font>глобальні атрибути</font></font></a><font><font> .</font></font></p>
+
+<dl>
+ <dt><font><font>{{HTMLAttrDef ("as")}}</font></font></dt>
+ <dd><font><font>Цей атрибут використовується тільки тоді, коли </font></font><code>rel="preload"</code><font><font>або </font></font><code>rel="prefetch"</code><font><font>було встановлено на </font></font><code>&lt;link&gt;</code><font><font>елементі. </font><font>Вона визначає тип завантажуваного контенту </font></font><code>&lt;link&gt;</code><font><font>, який необхідний для визначення пріоритетів вмісту, відповідності запиту, застосування правильної </font></font><a href="/en-US/docs/Web/HTTP/CSP"><font><font>політики безпеки контенту</font></font></a><font><font> та встановлення правильного заголовка запиту {{HTTPHeader ("Accept")}}.</font></font></dd>
+ <dt><font><font>{{HTMLAttrDef ("crossorigin")}}</font></font></dt>
+ <dd><font><font>Цей перерахований атрибут вказує, чи слід використовувати {{Глосарій ("CORS")}} при отриманні ресурсу. </font></font><a href="/en-US/docs/Web/HTML/CORS_Enabled_Image"><font><font>Зображення з підтримкою CORS</font></font></a><font><font> можна повторно використовувати в елементі {{HTMLElement ("canvas")}}, не </font></font><em><font><font>засмучуючись</font></font></em><font><font> . </font><font>Дозволені значення:</font></font>
+ <dl>
+  <dt><code>anonymous</code></dt>
+  <dd><font><font>Запит на перехресне походження (тобто з HTTP-заголовком {{HTTPHeader ("Походження")}} виконується, але не надсилаються дані облікового запису (тобто, файли cookie, сертифікат X.509 або HTTP Basic). </font><font>Якщо сервер не надає облікових даних сайту (не встановлюючи заголовок HTTPHeader ("Access-Control-Allow-Origin")}} HTTPHeader, зображення буде заплямовано, а його використання обмежене.</font></font></dd>
+  <dt><code>use-credentials</code></dt>
+  <dd><font><font>Запит на перехресне походження (тобто з </font></font><code>Origin</code><font><font>заголовком HTTP) виконується разом із відправленими обліковими даними (тобто виконується cookie, сертифікат та / або HTTP Basic аутентифікація). </font><font>Якщо сервер не надає облікових даних сайту (через {{HTTPHeader ("Access-Control-Allow-Credentials")} HTTP-заголовок), ресурс буде </font></font><em><font><font>заплямовано</font></font></em><font><font> і його використання буде обмежене.</font></font></dd>
+ </dl>
+ <font><font>Якщо атрибут відсутній, ресурс вибирається без запиту {{Glossary ("CORS")}} (тобто без відправлення </font></font><code>Origin</code><font><font>заголовка HTTP), що запобігає його непрямому використанню. </font><font>Якщо він недійсний, він обробляється так, якби </font><font>було використано </font></font><strong><font><font>анонімне</font></font></strong><font><font> перераховане ключове слово </font><font>. </font><font>Див </font></font><a href="/en-US/docs/Web/HTML/CORS_settings_attributes"><font><font>настройки CORS атрибути</font></font></a><font><font> для отримання </font><font>додаткової інформації.</font></font></dd>
+ <dt><font><font>{{HTMLAttrDef ("href")}}</font></font></dt>
+ <dd><font><font>Цей атрибут визначає {{глосарій ("URL")}} пов'язаного ресурсу. </font><font>URL-адреса може бути абсолютною або відносною.</font></font></dd>
+ <dt><font><font>{{HTMLAttrDef ("hreflang")}}</font></font></dt>
+ <dd><font><font>Цей атрибут вказує мову пов'язаного ресурсу. </font><font>Це суто консультативний характер. </font><font>Дозволені значення визначаються </font></font><a href="https://www.ietf.org/rfc/bcp/bcp47.txt"><font><font>BCP47</font></font></a><font><font> . </font><font>Використовуйте цей атрибут, лише якщо присутній атрибут {{HTMLAttrxRef ("href", "a")}}.</font></font></dd>
+ <dt id="name-attribute"><font><font>{{HTMLAttrDef ("значення")}} {{Experimental_Inline}}</font></font></dt>
+ <dd><font><font>Вказує відносну важливість ресурсу. </font><font>Підказки щодо пріоритетів делегуються за допомогою значень:</font></font></dd>
+ <dd>
+ <p><strong><code>auto</code></strong><font><font>: Вказує на  </font></font><strong><font><font>відсутність уподобань</font></font></strong><font><font> . </font><font>Для визначення пріоритету ресурсу браузер може використовувати власну евристику.</font></font></p>
+
+ <p><strong><code>high</code></strong><font><font>: Вказує браузеру, що ресурс має  </font></font><strong><font><font>високий</font></font></strong><font><font> пріоритет.</font></font></p>
+
+ <p><strong><code>low</code></strong><font><font>: Вказує браузеру, що ресурс має  </font></font><strong><font><font>низький</font></font></strong><font><font> пріоритет.</font></font></p>
+
+ <div class="blockIndicator note">
+ <p><strong><font><font>Примітка:</font></font></strong><code>importance</code><font><font> атрибут може бути використаний тільки для </font></font><code>&lt;link&gt;</code><font><font>елемента , </font><font>якщо </font></font><code>rel="preload"</code><font><font>або </font></font><code>rel="prefetch"</code><font><font>присутній.</font></font></p>
+ </div>
+ </dd>
+ <dt><font><font>{{HTMLAttrDef ("цілісність")}} {{Experimental_Inline}}</font></font></dt>
+ <dd><font><font>Містить вбудовані метадані - криптографічний хеш-код, зашифрований за допомогою base64, який повідомляє веб-переглядачу. </font><font>Цей веб-переглядач може використовувати це, щоб переконатися, що отриманий ресурс доставлений без несподіваних маніпуляцій. </font><font>Див </font></font><a href="/en-US/docs/Web/Security/Subresource_Integrity"><font><font>Subresource цілісності</font></font></a><font><font> .</font></font></dd>
+ <dt><font><font>{{HTMLAttrDef ("медіа")}}</font></font></dt>
+ <dd><font><font>Цей атрибут визначає носій, до якого застосовується пов'язаний ресурс. </font><font>Його значення має бути тип </font></font><a href="/en-US/docs/Web/CSS/Media_queries"><font><font>медіа</font></font></a><font><font> / </font><a href="/en-US/docs/Web/CSS/Media_queries"><font>медіа-запит</font></a><font> . </font><font>Цей атрибут є в основному корисним при підключенні до зовнішніх таблиць стилів - це дозволяє користувальницькому агенту підібрати найбільш адаптований для пристрою, на якому він працює.</font></font>
+ <div class="blockIndicator note">
+ <p><strong><font><font>Примітки:</font></font></strong></p>
+
+ <ul>
+  <li><font><font>В HTML 4, це може бути тільки простий білий список розділених пробілами опису медіа - </font><font>литералов, тобто </font></font><a href="/en-US/docs/Web/CSS/@media"><font><font>типів і груп</font></font></a><font><font> , в </font><font>яких визначені і дозволені в </font><font>якості значень для цього атрибута, наприклад </font></font><code>print</code><font><font>, </font></font><code>screen</code><font><font>, </font></font><code>aural</code><font><font>, </font></font><code>braille</code><font><font>. </font><font>HTML5 розширив це до будь-яких типів </font></font><a href="/en-US/docs/Web/CSS/Media_queries"><font><font>медіа-запитів</font></font></a><font><font> , які є набором допустимих значень HTML 4.</font></font></li>
+  <li><font><font>Браузери, які не підтримують </font></font><a href="/en-US/docs/Web/CSS/Media_queries"><font><font>CSS3 Media Queries</font></font></a><font><font> , не обов'язково розпізнають адекватне посилання; </font><font>не забувайте встановлювати резервні посилання, обмежений набір медіа-запитів, визначених у HTML 4.</font></font></li>
+ </ul>
+ </div>
+ </dd>
+ <dt><font><font>{{HTMLAttrDef ("referrerpolicy")}} {{Experimental_Inline}}</font></font></dt>
+ <dd><font><font>Рядок, який вказує, який референт використовувати для отримання ресурсу:</font></font>
+ <ul>
+  <li><code>no-referrer</code><font><font> означає, що заголовок {{HTTPHeader ("Referer")}} не буде надіслано.</font></font></li>
+  <li><code>no-referrer-when-downgrade</code><font><font>означає, що заголовок {{HTTPHeader ("Referer")}} не буде надіслано при переміщенні до джерела без TLS (HTTPS). </font><font>Це поведінка користувача агента за замовчуванням, якщо інша політика не вказана.</font></font></li>
+  <li><code>origin</code><font><font> означає, що реферер буде походженням сторінки, що є приблизно схемою, хостом і портом.</font></font></li>
+  <li><code>origin-when-cross-origin</code><font><font> означає, що навігація до інших джерел буде обмежена схемою, хостом і портом, під час навігації за тим же походженням буде включено шлях реферера.</font></font></li>
+  <li><code>unsafe-url</code><font><font>означає, що реферер буде включати походження та шлях (але не фрагмент, пароль або ім'я користувача). </font><font>Цей випадок є небезпечним, оскільки може витікати джерела та шляхи від ресурсів, захищених TLS, до небезпечного походження.</font></font></li>
+ </ul>
+ </dd>
+ <dt><font><font>{{HTMLAttrDef ("rel")}}</font></font></dt>
+ <dd><font><font>Цей атрибут іменує відношення пов'язаного документа до поточного документа. </font><font>Атрибут повинен бути розділеним пробілами списком </font></font><a href="/en-US/docs/Web/HTML/Link_types"><font><font>значень типів посилань</font></font></a><font><font> .</font></font></dd>
+ <dt><font><font>{{HTMLAttrDef ("розміри")}}</font></font></dt>
+ <dd><font><font>Цей атрибут визначає розміри піктограм для візуальних медіа, що містяться в ресурсі. </font><font>Він повинен бути присутнім, лише якщо {{HTMLAttrxRef ("rel", "link")}} містить значення </font></font><code>icon</code><font><font>або нестандартний тип, наприклад, Apple </font></font><code>apple-touch-icon</code><font><font>. </font><font>Він може мати такі значення:</font></font>
+ <ul>
+  <li><code>any</code><font><font>, що означає, що іконку можна масштабувати до будь-якого розміру, як у векторному форматі, наприклад </font></font><code>image/svg+xml</code><font><font>.</font></font></li>
+  <li><font><font>список розмірів, розділений білим простором, кожен у форматі </font><font>або </font><font>. </font><font>Кожен з цих розмірів повинен міститися в ресурсі.</font></font><code><em>&lt;width in pixels&gt;</em>x<em>&lt;height in pixels&gt;</em></code><code><em>&lt;width in pixels&gt;</em>X<em>&lt;height in pixels&gt;</em></code></li>
+ </ul>
+
+ <div class="blockIndicator note">
+ <p><strong><font><font>Примітка.</font></font></strong><font><font> Більшість форматів піктограм можуть зберігати лише одну піктограму; </font><font>тому більшу частину часу {{HTMLAttrxRef ("розміри")}} містить тільки один запис. </font><font>Формат ICO MS, як і ICNS від Apple. </font><font>ICO є більш повсюдним; </font><font>Ви обов'язково повинні використовувати його.</font></font></p>
+ </div>
+ </dd>
+ <dt><font><font>{{HTMLAttrDef ("назва")}}</font></font></dt>
+ <dd><code>title</code><font><font>Атрибут має спеціальну семантику на </font></font><code>&lt;link&gt;</code><font><font>елементі. </font><font>При використанні на ньому </font></font><code>&lt;link rel="stylesheet"&gt;</code><font><font>він визначає </font></font><a href="/en-US/docs/Web/CSS/Alternative_style_sheets"><font><font>бажану або альтернативну таблицю стилів</font></font></a><font><font> . </font><font>Неправильне використання може </font></font><a href="/en-US/docs/Correctly_Using_Titles_With_External_Stylesheets"><font><font>призвести до ігнорування таблиці стилів</font></font></a><font><font> .</font></font></dd>
+ <dt><font><font>{{HTMLAttrDef ("type")}}</font></font></dt>
+ <dd><font><font>Цей атрибут використовується для визначення типу змісту, з яким пов'язаний. </font><font>Значення атрибута має бути типом MIME, таким як </font></font><strong><font><font>text / html</font></font></strong><font><font> , </font></font><strong><font><font>text / css</font></font></strong><font><font> і так далі. </font><font>Загальним використанням цього атрибуту є визначення типу стильової таблиці, на яку посилаються (наприклад, </font></font><strong><font><font>текст / css</font></font></strong><font><font> ), але враховуючи, що CSS є єдиною мовою таблиць стилів, що використовується в Інтернеті, не тільки можна опустити </font></font><code>type</code><font><font>атрибут, але й насправді тепер рекомендується практика. </font><font>Він також використовується для </font></font><code>rel="preload"</code><font><font>типів посилань, щоб переконатися, що браузер завантажує лише типи файлів, які він підтримує.</font></font></dd>
+</dl>
+
+<h3 id="Нестандартні_атрибути"><font><font>Нестандартні атрибути</font></font></h3>
+
+<dl>
+ <dt><font><font>{{HTMLAttrDef ("вимкнено")}} {{Нестандартний_Інтернет}}</font></font></dt>
+ <dd>This attribute is used to disable a link relationship. In conjunction with scripting, this attribute could be used to turn on and off various style sheet relationships.
+ <div class="blockIndicator note">
+ <p><strong>Note: </strong>While there is no <code>disabled</code> attribute in the HTML standard, there <strong>is</strong> a <code>disabled</code> attribute on the <code>HTMLLinkElement</code> DOM object.</p>
+ </div>
+ </dd>
+ <dt>{{HTMLAttrDef("methods")}} {{Non-standard_Inline}}</dt>
+ <dd>The value of this attribute provides information about the functions that might be performed on an object. The values generally are given by the HTTP protocol when it is used, but it might (for similar reasons as for the <strong>title</strong> attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4.</dd>
+ <dt>{{HTMLAttrDef("prefetch")}} {{Non-standard_Inline}} {{secureContext_inline}}</dt>
+ <dd>This attribute identifies a resource that might be required by the next navigation and that the user agent should retrieve it. This allows the user agent to respond faster when the resource is requested in the future.</dd>
+ <dt>{{HTMLAttrDef("target")}} {{Non-standard_Inline}}</dt>
+ <dd>Defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.</dd>
+</dl>
+
+<h3 id="Obsolete_attributes">Obsolete attributes</h3>
+
+<dl>
+ <dt>{{HTMLAttrDef("charset")}} {{Obsolete_Inline}}</dt>
+ <dd>This attribute defines the character encoding of the linked resource. The value is a space- and/or comma-delimited list of character sets as defined in {{rfc(2045)}}. The default value is <code>iso-8859-1</code>.
+ <div class="note"><strong>Usage note:</strong> To produce the same effect as this obsolete attribute, use the {{HTTPHeader("Content-Type")}} HTTP header on the linked resource.</div>
+ </dd>
+ <dt>{{HTMLAttrDef("rev")}} {{Obsolete_Inline}}</dt>
+ <dd>The value of this attribute shows the relationship of the current document to the linked document, as defined by the {{HTMLAttrxRef("href", "link")}} attribute. The attribute thus defines the reverse relationship compared to the value of the <code>rel</code> attribute. <a href="/en-US/docs/Web/HTML/Link_types">Link type values</a> for the attribute are similar to the possible values for {{HTMLAttrxRef("rel", "link")}}.</dd>
+ <dd>
+ <div class="blockIndicator note">
+ <p><strong>Note:</strong> This attribute is considered obsolete by the WHATWG HTML living standard (which is the specification MDN treats as canonical). However, it's worth noting that <code>rev</code> is <em>not</em> considered obsolete in the W3C specification. That said, given the uncertainty, relying on <code>rev</code> is unwise.</p>
+
+ <p>Instead, you should use the {{HTMLAttrxRef("rel", "link")}} attribute with the opposite <a href="/en-US/docs/Web/HTML/Link_types">link type value</a>. For example, to establish the reverse link for <code>made</code>, specify <code>author</code>. Also this attribute doesn't stand for "revision" and must not be used with a version number, even though many sites misuse it in this way.</p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Styling_with_CSS">Styling with CSS</h2>
+
+<p>The <code>&lt;link&gt;</code> element has no visual presence on a web document, therefore it has no styling considerations to worry about.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Including_a_stylesheet">Including a stylesheet</h3>
+
+<p>To include a stylesheet in a page, use the following syntax:</p>
+
+<pre class="brush: html no-line-numbers">&lt;link href="style.css" rel="stylesheet"&gt;
+</pre>
+
+<h3 id="Providing_alternative_stylesheets">Providing alternative stylesheets</h3>
+
+<p>You can also specify <a href="/en-US/docs/Web/CSS/Alternative_style_sheets">alternative style sheets</a>.</p>
+
+<p>The user can choose which style sheet to use by choosing it from the View &gt; Page Style menu. This provides a way for users to see multiple versions of a page.</p>
+
+<pre class="brush: html no-line-numbers">&lt;link href="default.css" rel="stylesheet" title="Default Style"&gt;
+&lt;link href="fancy.css" rel="alternate stylesheet" title="Fancy"&gt;
+&lt;link href="basic.css" rel="alternate stylesheet" title="Basic"&gt;
+</pre>
+
+<h3 id="Providing_icons_for_different_usage_contexts">Providing icons for different usage contexts</h3>
+
+<p>You can include links to several different icons on the same page, and the browser will choose which one works best for its particular context using the <code>rel</code> and <code>sizes</code> values as hints.</p>
+
+<pre class="brush: html no-line-numbers">&lt;!-- third-generation iPad with high-resolution Retina display: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png"&gt;
+&lt;!-- iPhone with high-resolution Retina display: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"&gt;
+&lt;!-- first- and second-generation iPad: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png"&gt;
+&lt;!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" href="favicon57.png"&gt;
+&lt;!-- basic favicon --&gt;
+&lt;link rel="icon" href="favicon32.png"&gt;</pre>
+
+<h3 id="Conditionally_loading_resources_with_media_queries">Conditionally loading resources with media queries</h3>
+
+<p>You can provide a media type or query inside a <code>media</code> attribute; this resource will then only be loaded if the media condition is true. For example:</p>
+
+<pre class="brush: html no-line-numbers">&lt;link href="print.css" rel="stylesheet" media="print"&gt;
+&lt;link href="mobile.css" rel="stylesheet" media="all"&gt;
+&lt;link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)"&gt;
+&lt;link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)"&gt;
+</pre>
+
+<h3 id="Stylesheet_load_events">Stylesheet load events</h3>
+
+<p>You can determine when a style sheet has been loaded by watching for a <code>load</code> event to fire on it; similarly, you can detect if an error has occurred while processing a style sheet by watching for an <code>error</code> event:</p>
+
+<pre class="brush: html">&lt;script&gt;
+var myStylesheet = document.querySelector('#my-stylesheet');
+
+myStylesheet.onload = function() {
+  // Do something interesting; the sheet has been loaded
+}
+
+myStylesheet.onerror = function() {
+  console.log("An error occurred loading the stylesheet!");
+}
+&lt;/script&gt;
+
+&lt;link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet"&gt;
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> The <code>load</code> event fires once the stylesheet and all of its imported content has been loaded and parsed, and immediately before the styles start being applied to the content.</p>
+</div>
+
+<h3 id="Preload_examples">Preload examples</h3>
+
+<p>You can find a number of &lt;link rel="preload"&gt; examples in <a href="/en-US/docs/Web/HTML/Preloading_content">Preloading content with rel="preload"</a>.</p>
+
+<h2 id="Technical_summary">Technical summary</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
+   <td>Metadata content. If <a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a> is present: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a> and <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th>Permitted content</th>
+   <td>None, it is an {{Glossary("empty element")}}.</td>
+  </tr>
+  <tr>
+   <th>Tag omission</th>
+   <td>As it is a void element, the start tag must be present and the end tag must not be present</td>
+  </tr>
+  <tr>
+   <th>Permitted parents</th>
+   <td>Any element that accepts metadata elements. If <a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a> is present: any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>None</td>
+  </tr>
+  <tr>
+   <th>DOM interface</th>
+   <td>{{DOMxRef("HTMLLinkElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Preload")}}</td>
+   <td>{{Spec2("Preload")}}</td>
+   <td>Defines <code>&lt;link rel="preload"&gt;</code>, and the <code>as</code> attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Subresource Integrity", "#HTMLLinkElement", "lt;link&gt;")}}</td>
+   <td>{{Spec2("Subresource Integrity")}}</td>
+   <td>Added the <code>integrity</code> attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "semantics.html#the-link-element", "&lt;link&gt;")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>No changes from latest snapshot</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "document-metadata.html#the-link-elemen", "&lt;link&gt;")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Added <code>crossorigin</code> and <code>sizes</code> attributes; extended values of <code>media</code> to any media queries; added numerous new values for <code>rel</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML4.01", "struct/links.html#h-12.3", "&lt;link&gt;")}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Resource Hints", "#prefetch", "prefetch")}}</td>
+   <td>{{Spec2("Resource Hints")}}</td>
+   <td>Added <code>dns-prefetch</code>, <code>preconnect</code>, <code>prefetch</code>, and <code>prerender</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden"><font><font>Таблиця сумісності на цій сторінці генерується зі структурованих даних. </font><font>Якщо ви хочете внести свій внесок до даних, зверніться до </font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>https://github.com/mdn/browser-compat-data</font></font></a><font><font> та надішліть нам запит pull.</font></font></div>
+
+<p><font><font>{{Compat ("html.elements.link", 3)}}</font></font></p>
+
+<h2 id="Дивіться_також"><font><font>Дивіться також</font></font></h2>
+
+<ul>
+ <li><font><font>Заголовок HTTPHeader ("Link")}} HTTP</font></font></li>
+ <li><a href="https://pie.gd/test/script-link-events/"><font><font>&lt;script&gt; і &lt;link&gt; графік сумісності подій у Ryan Grove</font></font></a></li>
+</ul>
diff --git a/files/uk/web/html/елемент/nav/index.html b/files/uk/web/html/елемент/nav/index.html
new file mode 100644
index 0000000000..4cda3e63f2
--- /dev/null
+++ b/files/uk/web/html/елемент/nav/index.html
@@ -0,0 +1,99 @@
+---
+title: <nav>
+slug: Web/HTML/Елемент/nav
+tags:
+  - HTML секції
+  - Веб
+  - Елемент
+  - Навігація
+  - Посилання
+translation_of: Web/HTML/Element/nav
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML-елемент <code>&lt;nav&gt;</code></strong> (<em>HTML елемент навігації</em>) являє собою секцію сторінки, котра має посилання на інші сторінки або блоки в межах поточної сторінки.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Категорії контенту</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Потоковий контент</a>, <a href="/en-US/docs/HTML/Content_categories#Sectioning_content" title="HTML/Content categories#Sectioning_content">секційний контент</a>, тактильний контент.</td>
+  </tr>
+  <tr>
+   <th scope="row">Дозволений контент</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Потоковий контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск закриваючого тега</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Дозволені батьківські елементи</th>
+   <td>Будь-який елемент, що приймає <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">потоковий контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM інтерфейс</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибути">Атрибути</h2>
+
+<p><span style="line-height: 21px;">Цей елемент може містити лише </span><a href="/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">глобальні атрибути</a><span style="line-height: 21px;">.</span></p>
+
+<h2 id="Зауваження_щодо_використання">Зауваження щодо використання</h2>
+
+<ul>
+ <li>Не всі посилання документа мають бути в елементі <code>&lt;nav&gt;</code>, бо він призначений для головних блоків навігаційних посилань. Наприклад, елемент {{HTMLElement("footer")}} зазвичай містить перелік посилань, які не потрібно розміщувати у елементі {{HTMLElement("nav")}};</li>
+ <li>Документ може містити кілька елементів {{HTMLElement("nav")}} (наприклад, один для навігації по сайту, а інший — для навігції в межах сторінки);</li>
+ <li>Деякі програмні засоби для людей з вадами зору, часто можуть використовувати цей елемент щоб визначити, чи слід пропускати початкове відтворення даного вмісту.</li>
+</ul>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: html">&lt;nav&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/nav&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'sections.html#the-nav-element', '&lt;nav&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Жодних змін після останнього W3C Snapshot.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-nav-element', '&lt;nav&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Первинне визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.nav")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>Інші секційні елементи: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li>
+ <li class="last"><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li>
+</ul>
diff --git a/files/uk/web/html/елемент/script/index.html b/files/uk/web/html/елемент/script/index.html
new file mode 100644
index 0000000000..10b6e5096d
--- /dev/null
+++ b/files/uk/web/html/елемент/script/index.html
@@ -0,0 +1,243 @@
+---
+title: '<script>: Елементи тега Script'
+slug: Web/HTML/Елемент/script
+translation_of: Web/HTML/Element/script
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;script&gt;</code> </strong>елемент використовується для вбудовування або посилання виконавчого коду; зазвичай використовується для вбудовування або посилання на код JavaScript.</span> Тег <code>&lt;script&gt; може</code> бути використаний для других мов програмування, такі як <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>'s GLSL та мов для створення шейдерів.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Категорія вмісту</th>
+   <td><a href="/uk/docs/https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Metadata_content">Мета дата</a>, <a href="/uk/docs/https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Плаваючий контент</a>, <a href="/uk/docs/https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Зміст фразування</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Дозволений вміст</th>
+   <td>Динамічний сценарій, такий як text/javascript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Опущення тегів</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Дозволені батьки</th>
+   <td>Будь-який елемент, який приймає вміст <a href="/uk/docs/https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Metadata_content">метаданих</a>, або будь-який елемент, який приймає <a href="/uk/docs/https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">вміст фраз</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Дозволені ролі ARIA</th>
+   <td>Немае</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-інтерфейс</th>
+   <td>{{domxref("HTMLScriptElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes">Attributes</h2>
+
+<p>Цей елемент включає <a href="/uk/docs/https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">глобальні атрибути</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("async")}}{{HTMLVersionInline(5)}}</dt>
+ <dd>
+ <p>This is a Boolean attribute indicating that the browser should, if possible, load the script asynchronously and then execute it as soon as it’s downloaded.</p>
+
+ <div class="warning">
+ <p>This attribute must not be used if the <code>src</code> attribute is absent (i.e. for inline scripts). If it is included in this case it will have no effect.</p>
+ </div>
+
+ <p>Browsers usually assume the worst case scenario and load scripts synchronously, (i.e. <code>async="false"</code>) during HTML parsing.</p>
+
+ <p>Dynamically inserted scripts (using {{domxref("document.createElement()")}}) load asynchronously by default, so to turn on synchronous loading (i.e. scripts load in the order they were inserted) set <code>async="false"</code>.</p>
+
+ <p>This attribute allows the elimination of <strong>render-blocking JavaScript</strong> where the page would have to load and execute scripts before finishing to render the page. <code>defer</code> has a similar effect in this case.</p>
+
+ <p>See {{anch("Browser compatibility")}} for notes on browser support. See also <a href="/en-US/docs/Games/Techniques/Async_scripts">Async scripts for asm.js</a>.</p>
+ </dd>
+ <dt>{{htmlattrdef("crossorigin")}}</dt>
+ <dd>Normal <code>script</code> elements pass minimal information to the {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}} for scripts which do not pass the standard {{Glossary("CORS")}} checks. To allow error logging for sites which use a separate domain for static media, use this attribute. See <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a> for a more descriptive explanation of its valid arguments.</dd>
+ <dt>{{htmlattrdef("defer")}}</dt>
+ <dd>
+ <p>This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing {{event("DOMContentLoaded")}}.</p>
+
+ <p>Scripts with the <code>defer</code> attribute will prevent the <code>DOMContentLoaded</code> event from firing until the script has loaded and finished evaluating.</p>
+
+ <div class="warning">
+ <p>This attribute must not be used if the <code>src</code> attribute is absent (i.e. for inline scripts), in this case it would have no effect.</p>
+ </div>
+
+ <p>To achieve a similar effect for dynamically inserted scripts use <code>async="false"</code> instead. Scripts with the <code>defer</code> attribute will execute in the order in which they appear in the document.</p>
+
+ <p>This attribute allows the elimination of <strong>render-blocking JavaScript</strong> where the page would have to load and execute scripts before finishing to render the page. <code>async</code> has a similar effect in this case.</p>
+ </dd>
+ <dt>{{htmlattrdef("integrity")}}</dt>
+ <dd>This attribute contains inline metadata that a user agent can use to verify that a fetched resource has been delivered free of unexpected manipulation. See <a href="/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>.</dd>
+ <dt>{{htmlattrdef("nomodule")}}</dt>
+ <dd>This Boolean attribute is set to indicate that the script should not be executed in browsers that support<a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/"> ES2015 modules</a> — in effect, this can be used to serve fallback scripts to older browsers that do not support modular JavaScript code.</dd>
+ <dt>{{htmlattrdef("nonce")}}</dt>
+ <dd>A cryptographic nonce (number used once) to whitelist inline scripts in a <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src">script-src Content-Security-Policy</a>. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.</dd>
+ <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt>
+ <dd>Indicates which <a href="/en-US/docs/Web/API/Document/referrer">referrer</a> to send when fetching the script, or resources fetched by the script:
+ <ul>
+  <li><code>no-referrer</code>: The {{HTTPHeader("Referer")}} header will not be sent.</li>
+  <li><code>no-referrer-when-downgrade</code> (default): The {{HTTPHeader("Referer")}} header will not be sent to {{Glossary("origin")}}s without {{Glossary("TLS")}} ({{Glossary("HTTPS")}}).</li>
+  <li><code>origin</code>: The sent referrer will be limited to the origin of the referring page: its <a href="/en-US/docs/Archive/Mozilla/URIScheme">scheme</a>, {{Glossary("host")}}, and {{Glossary("port")}}.</li>
+  <li><code>origin-when-cross-origin</code>: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.</li>
+  <li><code>same-origin</code>: A referrer will be sent for {{Glossary("Same-origin policy", "same origin")}}, but cross-origin requests will contain no referrer information.</li>
+  <li><code>strict-origin</code>: Only send the origin of the document as the referrer when the protocol security level stays the same (e.g. HTTPS→HTTPS), but don't send it to a less secure destination (e.g. HTTPS→HTTP).</li>
+  <li><code>strict-origin-when-cross-origin</code>: Send a full URL when performing a same-origin request, but only send the origin when the protocol security level stays the same (e.g.HTTPS→HTTPS), and send no header to a less secure destination (e.g. HTTPS→HTTP).</li>
+  <li><code>unsafe-url</code>: The referrer will include the origin <em>and</em> the path (but not the <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/hash">fragment</a>, <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/password">password</a>, or <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/username">username</a>). <strong>This value is unsafe</strong>, because it leaks origins and paths from TLS-protected resources to insecure origins.</li>
+ </ul>
+
+ <div class="blockIndicator note">
+ <p><strong>Note</strong>: An empty string value (<code>""</code>) is both the default value, and a fallback value if <code>referrerpolicy</code> is not supported. If <code>referrerpolicy</code> is not explicitly specified on the <code>&lt;script&gt;</code> element, it will adopt a higher-level referrer policy, i.e. one set on the whole document or domain. If a higher-level policy is not available, the empty string is treated as being equivalent to <code>no-referrer-when-downgrade</code>.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>
+ <p>This attribute specifies the <abbr>URI</abbr> of an external script; this can be used as an alternative to embedding a script directly within a document.</p>
+
+ <div class="warning">
+ <p>If a <code>script</code> element has a <code>src</code> attribute specified, it should not have a script embedded inside its tags since it can lead to unexpected behavior. The unexpected behavior is because it is only the JavaScript in the file referenced in the <code>src</code> attribute that will be added to the HTML page.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>
+ <p>This attribute indicates the type of script represented. The value of this attribute will be in one of the following categories:</p>
+
+ <ul>
+  <li><strong>Omitted or a JavaScript MIME type:</strong> This indicates the script is JavaScript. The HTML5 specification urges authors to omit the attribute rather than provide a redundant MIME type. In earlier browsers, this identified the scripting language of the embedded or imported (via the <code>src</code> attribute) code. JavaScript MIME types are <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types">listed in the specification</a>.</li>
+  <li><strong><code>module</code>:</strong> Causes the code to be treated as a JavaScript module. The processing of the script contents is not affected by the <code>charset</code> and <code>defer</code> attributes. For information on using <code>module</code>, see our <a href="/en-US/docs/Web/JavaScript/Guide/Modules">JavaScript modules</a> guide.</li>
+  <li><strong>Any other value:</strong> The embedded content is treated as a data block which won't be processed by the browser. Developers must use a valid MIME type that is not a JavaScript MIME type to denote data blocks. The <code>src</code> attribute will be ignored.</li>
+ </ul>
+
+ <div class="note">
+ <p><strong>Note: </strong>in Firefox you could specify the version of JavaScript contained in a <code>&lt;script&gt;</code> element by including a non-standard <code>version</code> parameter inside the <code>type</code> attribute — for example <code>type="text/javascript;version=1.8"</code>. This has been removed in Firefox 59 (see {{bug(1428745)}}).</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Deprecated_attributes">Deprecated attributes</h3>
+
+<dl>
+ <dt>{{htmlattrdef("charset")}} {{Deprecated_inline}}</dt>
+ <dd>If present, its value must be an ASCII case-insensitive match for "<code>utf-8</code>". It’s unnecessary to specify the <code>charset</code> attribute, because documents must use UTF-8, and the <code>script</code> element inherits its character encoding from the document.</dd>
+ <dt>{{htmlattrdef("language")}} {{Deprecated_inline}}</dt>
+ <dd>Like the <code>type</code> attribute, this attribute identifies the scripting language in use. Unlike the <code>type</code> attribute, however, this attribute’s possible values were never standardized. The <code>type</code> attribute should be used instead.</dd>
+</dl>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Scripts without {{HTMLAttrxRef("async", "script")}} , {{HTMLAttrxRef("defer", "script")}} or <code>type="module"</code> attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page.</p>
+
+<p>The script should be served with the <code>text/javascript</code> MIME type, but browsers are lenient and only block them if the script is served with an image type (<code>image/*</code>); a video type (<code>video/*</code>); an audio (<code>audio/*</code>) type; or <code>text/csv</code>. If the script is blocked, an {{event("error")}} is sent to the element, if not a {{event("load")}} event is sent.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Basic_usage">Basic usage</h3>
+
+<p>These examples show how to import (an external) script using the <code>&lt;script&gt;</code> element in both HTML4 and HTML5:</p>
+
+<pre class="brush: html">&lt;!-- HTML4 --&gt;
+&lt;script type="text/javascript" src="javascript.js"&gt;&lt;/script&gt;
+
+&lt;!-- HTML5 --&gt;
+&lt;script src="javascript.js"&gt;&lt;/script&gt;
+</pre>
+
+<p>And the following examples show how to put (an inline) script inside the <code>&lt;script&gt;</code> element in both HTML4 and HTML5:</p>
+
+<pre class="brush: html">&lt;!-- HTML4 --&gt;
+&lt;script type="text/javascript"&gt;
+  alert("Hello World!");
+&lt;/script&gt;
+
+&lt;!-- HTML5 --&gt;
+&lt;script&gt;
+  alert("Hello World!");
+&lt;/script&gt;</pre>
+
+<h3 id="Module_fallback">Module fallback</h3>
+
+<p>Browsers that support the <code>module</code> value for the <code>type</code> attribute ignore any script with a <code>nomodule</code> attribute. That enables you to use module scripts while also providing <code>nomodule</code>-marked fallback scripts for non-supporting browsers.</p>
+
+<pre class="brush: html">&lt;script type="module" src="main.js"&gt;&lt;/script&gt;
+&lt;script nomodule src="fallback.js"&gt;&lt;/script&gt;</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comments</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "scripting.html#the-script-element", "&lt;script&gt;")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Removed the {{HTMLAttrxRef("charset", "script")}} attribute</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.3", "semantics-scripting.html#the-script-element", "&lt;script&gt;")}}</td>
+   <td>{{Spec2("HTML5.3")}}</td>
+   <td>Removed the {{HTMLAttrxRef("charset", "script")}} attribute</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.2", "semantics-scripting.html#the-script-element", "&lt;script&gt;")}}</td>
+   <td>{{Spec2("HTML5.2")}}</td>
+   <td>Adds the <code>module</code> {{HTMLAttrxRef("type", "script")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "semantics-scripting.html#the-script-element", "&lt;script&gt;")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "scripting-1.html#script", "&lt;script&gt;")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML4.01", "interact/scripts.html#h-18.2.1", "&lt;script&gt;")}}</td>
+   <td>{{Spec2("HTML4.01")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Subresource Integrity", "#htmlscriptelement", "&lt;script&gt;")}}</td>
+   <td>{{Spec2("Subresource Integrity")}}</td>
+   <td>Adds the {{HTMLAttrxRef("integrity", "script")}} attribute.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<div>{{Compat("html.elements.script", 2)}}</div>
+
+<h3 id="Compatibility_notes">Compatibility notes</h3>
+
+<p>In older browsers that don't support the <code>async</code> attribute, parser-inserted scripts block the parser; script-inserted scripts execute asynchronously in IE and WebKit, but synchronously in Opera and pre-4 Firefox. In Firefox 4, the <code>async</code> DOM property defaults to <code>true</code> for script-created scripts, so the default behaviour matches the behaviour of IE and WebKit.</p>
+
+<p>To request script-inserted external scripts be executed in the insertion order in browsers where the <code>document.createElement("script").async</code> evaluates to <code>true</code> (such as Firefox 4), set <code>async="false"</code> on the scripts you want to maintain order.</p>
+
+<div class="warning">
+<p>Never call <code>document.write()</code> from an async script. In Firefox 3.6, calling <code>document.write()</code> has an unpredictable effect. In Firefox 4, calling <code>document.write()</code> from an async script has no effect (other than printing a warning to the error console).</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("document.currentScript")}}</li>
+ <li><a href="https://pie.gd/test/script-link-events/">Ryan Grove's &lt;script&gt; and &lt;link&gt; node event compatibility chart</a></li>
+ <li><a href="https://flaviocopes.com/javascript-async-defer/">Flavio Copes' article on loading JavaScript efficiently and explaining the differences between <code>async</code> and <code>defer</code></a></li>
+ <li><code><a href="https://bytutorial.com/tutorials/javascript">Javascript tips and tricks</a>.</code></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Modules">JavaScript modules</a> guide</li>
+</ul>
diff --git a/files/uk/web/html/елемент/section/index.html b/files/uk/web/html/елемент/section/index.html
new file mode 100644
index 0000000000..5b01234161
--- /dev/null
+++ b/files/uk/web/html/елемент/section/index.html
@@ -0,0 +1,173 @@
+---
+title: <section>
+slug: Web/HTML/Елемент/section
+tags:
+  - HTML
+  - HTML секції
+  - Ве
+  - Елемент
+  - Посилання
+translation_of: Web/HTML/Element/section
+---
+<p>{{HTMLRef}}</p>
+
+<p><strong>HTML елемент <code>&lt;section&gt;</code></strong> являє собою узагальнену секцію документу, яка допомагає категоризувати контент, зазвичай, заголовком. Кожний елемент <code>&lt;section&gt;</code> повинен бути ідентифікований, зазвичай, використанням заголовків ({{HTMLElement('h1')}}-{{HTMLElement('h6')}} element) в якості дочірнього елементу <code>&lt;section&gt;</code>.</p>
+
+<div class="note">
+<p><em>Зауваження щодо використання :</em></p>
+
+<ul>
+ <li>Якщо є доцільним розбивати на категорії контент у елементі {{HTMLElement("section")}} , то використовуйте замість нього елемент {{HTMLElement("article")}}.</li>
+ <li>Не використовуйте елемент {{HTMLElement("section")}} як загальний контейнер; цю функцію виконує елемент {{HTMLElement("div")}}, особливо тоді, коли секціонування призначено для стилізації. Емпіричне правило використання цього елементу полягає у тому, що розділ повинен логічно відображатись у контурі документу</li>
+</ul>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/uk/docs/Web/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/uk/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/uk/docs/Web/HTML/Content_categories#Sectioning_content">Sectioning content</a>, palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td><a href="/uk/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parent elements</th>
+   <td>Any element that accepts <a href="/uk/docs/Web/HTML/Content_categories#Flow_content">flow content</a>. Note that a {{HTMLElement("section")}} element must not be a descendant of an {{HTMLElement("address")}} element.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибути">Атрибути</h2>
+
+<p>Цей елемент може включати в себе лише глобальні атрибути.</p>
+
+<h2 id="Приклад_1">Приклад 1</h2>
+
+<h3 id="До">До</h3>
+
+<pre>&lt;div&gt;
+  &lt;h1&gt;Heading&lt;/h1&gt;
+  &lt;p&gt;Bunch of awesome content&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Після">Після</h3>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;h1&gt;Heading&lt;/h1&gt;
+  &lt;p&gt;Bunch of awesome content&lt;/p&gt;
+&lt;/section&gt;
+</pre>
+
+<h2 id="Приклад_2">Приклад 2</h2>
+
+<h3 id="До_2">До</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;h2&gt;Heading&lt;/h2&gt;
+  &lt;img src="bird.jpg" alt="bird"&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Після_2">Після</h3>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;h2&gt;Heading&lt;/h2&gt;
+  &lt;img src="bird.jpg" alt="bird"&gt;
+&lt;/section&gt;
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comments</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'sections.html#the-section-element', '&lt;section&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sections.html#the-section-element', '&lt;section&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '&lt;section&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9.0</td>
+   <td>11.10</td>
+   <td>4.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.2</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>5.0 (iOS 4.2)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>Other section-related elements: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li>
+ <li><a href="/uk/docs/Sections_and_Outlines_of_an_HTML5_document">Sections and outlines of an HTML5 document</a>.</li>
+</ul>
diff --git a/files/uk/web/html/елемент/style/index.html b/files/uk/web/html/елемент/style/index.html
new file mode 100644
index 0000000000..5bfe7ab621
--- /dev/null
+++ b/files/uk/web/html/елемент/style/index.html
@@ -0,0 +1,201 @@
+---
+title: <style>
+slug: Web/HTML/Елемент/style
+tags:
+  - Інкапсуляція стилів
+  - Елемент
+  - Метадані
+  - Стилі
+translation_of: Web/HTML/Element/style
+---
+<p id="Summary">{{HTMLRef}}</p>
+
+<p>HTML-елемент<strong> <code>&lt;style&gt;</code> </strong>містить стилі для документа чи його частини. За відсутності атрибута {{htmlattrdef("type")}}, мовою інструкцій всередині цього елемента вважається <a href="/en-US/docs/Web/CSS">CSS</a>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th><a href="/uk/docs/Web/Guide/HTML/Content_categories">Категорії вмісту</a></th>
+   <td><a href="/uk/docs/Web/Guide/HTML/Content_categories#Вміст_метаданих">Метадані</a> та, в разі наявності атрибута <code>scoped,</code><a href="/uk/docs/Web/Guide/HTML/Content_categories#Потоковий_вміст">потоковий вміст</a>.</td>
+  </tr>
+  <tr>
+   <th>Дозволений вміст</th>
+   <td>Текстовий вміст, що відповідає атрибутові <code>type</code>, зазвичай <code>text/css</code>.</td>
+  </tr>
+  <tr>
+   <th>Обов'язковість тегів</th>
+   <td>Обидва обов'язкові.</td>
+  </tr>
+  <tr>
+   <th>Дозволені пращури</th>
+   <td>Будь-який елемент, що може містити <a href="/uk/docs/Web/Guide/HTML/Content_categories#Вміст_метаданих">метадані</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Дозволені ARIA-ролі</th>
+   <td>ВІдсутні</td>
+  </tr>
+  <tr>
+   <th>Інтерфейс DOM</th>
+   <td>{{domxref("HTMLStyleElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибути">Атрибути</h2>
+
+<p>Цей елемент має <a href="/en-US/docs/Web/HTML/Global_attributes">глобальні атрибути</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>Цей атрибут вказує MIME-тип (без частини, що вказує кодування символів), який відповідає задіяній мові стилів. Він є необов'язковим та за умовчанням має значення <code>text/css</code>.</dd>
+ <dt>{{htmlattrdef("media")}}</dt>
+ <dd>Цей атрибут вказує <a href="/en-US/docs/Web/Guide/CSS/Media_queries">медіазапит</a> для обмеження застосування стилів. Стилі застосовуються без обмежень (те саме, що і значення <code>all)</code>, якщо атрибут відсутній.</dd>
+ <dt>{{htmlattrdef("title")}}</dt>
+ <dd>Позначає назву <a href="/uk/docs/Web/CSS/Альтернативні_таблиці_стилів">альтернативної множини стилів</a>.</dd>
+ <dt>{{htmlattrdef("scoped")}} {{experimental_inline}}</dt>
+ <dd>Якщо цей атрибут присутній, таблиця стилів застосовуються лише до нащадків батьківського (для <strong><code>&lt;style&gt;</code></strong>) елемента.</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Найпростіша_таблиця_стилів">Найпростіша таблиця стилів</h3>
+
+<pre class="brush:html">&lt;style type="text/css"&gt;
+  body {
+    color: red;
+  }
+&lt;/style&gt;
+</pre>
+
+<h3 id="Застосування_атрибута_scoped">Застосування атрибута <code>scoped</code></h3>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;head&gt;
+    &lt;style type="text/css"&gt;
+      span {
+        color: red;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+
+  &lt;body&gt;
+    &lt;div&gt;
+      &lt;style type="text/css" scoped&gt;
+        span {
+          color: orange;
+        }
+      &lt;/style&gt;
+      &lt;span&gt;Помаранчевий текст!&lt;/span&gt;
+    &lt;/div&gt;
+
+    &lt;span&gt;Червоний текст!&lt;/span&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', 'semantics.html#the-style-element', 'style') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Жодних змін відносно {{ SpecName('HTML4.01') }}.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style') }}</td>
+   <td>{{ Spec2('HTML4.01') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базова підтримка</td>
+   <td>{{CompatChrome(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Атрибут scoped</td>
+   <td>20<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>21</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базова підтримка</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>9.0<sup>[2]</sup></td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Атрибут scoped</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>50</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Підтримується версіями Chrome з 20 по 34 включно за наявності встановленого прапорця «<strong>Enable &lt;style scoped&gt;</strong>» чи «<strong>Experimental WebKit features</strong>» у chrome://flags.<br>
+ [2] Mobile Internet Explorer (попередня назва IE Phone — версій менших за 8) також підтримує.</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>Елемент {{HTMLElement("link")}} дозволяє використовувати зовнішні таблиці стилів.</li>
+</ul>
diff --git a/files/uk/web/html/елемент/table/index.html b/files/uk/web/html/елемент/table/index.html
new file mode 100644
index 0000000000..ca069eee9e
--- /dev/null
+++ b/files/uk/web/html/елемент/table/index.html
@@ -0,0 +1,371 @@
+---
+title: '<table>: The Table element'
+slug: Web/HTML/Елемент/table
+tags:
+  - Посилання
+  - дані
+  - таблиця
+translation_of: Web/HTML/Element/table
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">Тег <strong><code>&lt;table&gt;</code></strong> являє собою табличні дані себто інформацію представлену у вигляді двовимірної таблиці, що складається з рядків, шпальт та комірок, що містять власне дані.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/table.html","tabbed-standard")}}</div>
+
+<p class="hidden">Вихідний код цього прикладу зберігається на GitHub. Якщо маєте бажання зробити свій внесок, будь ласка склонуйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> і надішліть нам запит (pull request).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Тип вмісту</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Потоковий</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Дозволений вміст</th>
+   <td>
+    <div class="content-models">
+    <div id="table-mdls">В наступному порядку:
+    <ol>
+     <li>можливий елемент {{HTMLElement("caption")}},</li>
+     <li>можливо 0 або більше елементів {{HTMLElement("colgroup")}},</li>
+     <li>можливий елемент {{HTMLElement("thead")}},</li>
+     <li>одне з наступного:
+      <ul>
+       <li>0 або більше {{HTMLElement("tbody")}}</li>
+       <li>1 або більше {{HTMLElement("tr")}}</li>
+      </ul>
+     </li>
+     <li>можливий елемент {{HTMLElement("tfoot")}}</li>
+    </ol>
+    </div>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск теґів</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Дозволені батьківські елементи</th>
+   <td>Будь який елемент що приймає потоковий вміст</td>
+  </tr>
+  <tr>
+   <th scope="row">Явна роль ARIA</th>
+   <td><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></code></td>
+  </tr>
+  <tr>
+   <th scope="row">Дозволені ролі ARIA </th>
+   <td>Будь які</td>
+  </tr>
+  <tr>
+   <th scope="row">Інтерфейс DOM</th>
+   <td>{{domxref("HTMLTableElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибути">Атрибути</h2>
+
+<p>Цей елемент містить <a href="/en-US/docs/HTML/Global_attributes">глобальні атрибути</a>.</p>
+
+<h3 id="Застарілі_атрибути">Застарілі атрибути</h3>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{Deprecated_inline}}</dt>
+ <dd>
+ <p>Цей нумерований атрибут вказує на розміщення таблиці в документі. Може мати наступні значення:</p>
+
+ <ul>
+  <li><code>left</code>: Таблиця розміщується в лівій стороні документа;</li>
+  <li><code>center</code>: Таблиця розміщується по центру документа;</li>
+  <li><code>right</code>: Таблиця розміщується в правій стороні документа.</li>
+ </ul>
+
+ <p>Встановіть {{cssxref("margin-left")}} та {{cssxref("margin-right")}} у значення <code>auto</code> або {{cssxref("margin")}} в <code>0 auto</code> для того щоб досягти подібного розміщення.</p>
+ </dd>
+ <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt>
+ <dd>
+ <p>Колір тла таблиці в <a href="/en-US/docs/Web/CSS/color_value#RGB_colors">шестизначному шістнадцятирічному форматі RGB</a> з префіксом '<code>#</code>'. Також замість RGB можна використати <a href="/en-US/docs/Web/CSS/color_value#Color_keywords">ключові слова кольорів</a>.</p>
+
+ <p>Щоб досягти подібного ефекту використовуйте CSS-властивість {{cssxref("background-color")}} .</p>
+ </dd>
+ <dt>{{htmlattrdef("border")}} {{Deprecated_inline}}</dt>
+ <dd>
+ <p>Цілочислений атрибут визначає розмір рамки, що оточує таблицю, в пікселях. Якщо 0, то атрибут {{htmlattrxref("frame", "table")}} порожній.</p>
+
+ <p>Щоб досягти подібного ефекту скористайтеся складаною CSS-властивістю {{cssxref("border")}}.</p>
+ </dd>
+ <dt>{{htmlattrdef("cellpadding")}} {{Deprecated_inline}}</dt>
+ <dd>
+ <p>Цей атрибут визначає відстань між вмістом комірки та її межою, чи показувати її чи ні. Якщо цей відступ визначено в пікселях, цей відступ прикладається до всіх чотирьох сторін. Якщо відступ визначено у відсотках вміст комірки буде центровано, а значення відступу буде прикладено тільки до відступу по вертикалі (зверху та знизу від вмісту).</p>
+
+ <p>Щоб досягти подібного ефекту, застосуйте властивість {{cssxref("border-collapse")}} до <code>&lt;table&gt;</code>, зі значенням collapse, та {{cssxref("padding")}} до елементів {{HTMLElement("td")}}.</p>
+ </dd>
+ <dt>{{htmlattrdef("cellspacing")}} {{Deprecated_inline}}</dt>
+ <dd>
+ <p>This attribute defines the size of the space between two cells in a percentage value or pixels. The attribute is applied both horizontally and vertically, to the space between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row.</p>
+
+ <p>To achieve a similar effect, apply the {{cssxref("border-spacing")}} property to the <code>&lt;table&gt;</code> element. <code>border-spacing</code> does not have any effect if {{cssxref("border-collapse")}} is set to collapse.</p>
+ </dd>
+ <dt>{{htmlattrdef("frame")}} {{Deprecated_inline}}</dt>
+ <dd>
+ <p>This enumerated attribute defines which side of the frame surrounding the table must be displayed.</p>
+
+ <p>To achieve a similar effect, use the {{cssxref("border-style")}} and {{cssxref("border-width")}} properties.</p>
+ </dd>
+ <dt>{{htmlattrdef("rules")}} {{Deprecated_inline}}</dt>
+ <dd>
+ <p>This enumerated attribute defines where rules, i.e. lines, should appear in a table. It can have the following values:</p>
+
+ <ul>
+  <li><code>none</code>, which indicates that no rules will be displayed; it is the default value;</li>
+  <li><code>groups</code>, which will cause the rules to be displayed between row groups (defined by the {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} and {{HTMLElement("tfoot")}} elements) and between column groups (defined by the {{HTMLElement("col")}} and {{HTMLElement("colgroup")}} elements) only;</li>
+  <li><code>rows</code>, which will cause the rules to be displayed between rows;</li>
+  <li><code>columns</code>, which will cause the rules to be displayed between columns;</li>
+  <li><code>all</code>, which will cause the rules to be displayed between rows and columns.</li>
+ </ul>
+
+ <p>To achieve a similar effect, apply the {{cssxref("border")}} property to the appropriate {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}}, or {{HTMLElement("colgroup")}} elements.</p>
+ </dd>
+ <dt>{{htmlattrdef("summary")}} {{Deprecated_inline}}</dt>
+ <dd>This attribute defines an alternative text that summarizes the content of the table. Use the {{htmlelement("caption")}} element instead.</dd>
+ <dt>{{htmlattrdef("width")}} {{Deprecated_inline}}</dt>
+ <dd>
+ <p>This attribute defines the width of the table. Use the CSS {{cssxref("width")}} property instead.</p>
+ </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Simple_Table">Simple Table</h3>
+
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;John&lt;/td&gt;
+    &lt;td&gt;Doe&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Jane&lt;/td&gt;
+    &lt;td&gt;Doe&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Simple_Table', '100%', '100', '', 'Web/HTML/Element/table')}}</p>
+
+<h3 id="More_Examples">More Examples</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Simple table with header&lt;/p&gt;
+&lt;table&gt;
+  &lt;tr&gt;
+    &lt;th&gt;First name&lt;/th&gt;
+    &lt;th&gt;Last name&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;John&lt;/td&gt;
+    &lt;td&gt;Doe&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Jane&lt;/td&gt;
+    &lt;td&gt;Doe&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;p&gt;Table with thead, tfoot, and tbody&lt;/p&gt;
+&lt;table&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th&gt;Header content 1&lt;/th&gt;
+      &lt;th&gt;Header content 2&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Body content 1&lt;/td&gt;
+      &lt;td&gt;Body content 2&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+  &lt;tfoot&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Footer content 1&lt;/td&gt;
+      &lt;td&gt;Footer content 2&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tfoot&gt;
+&lt;/table&gt;
+
+&lt;p&gt;Table with colgroup&lt;/p&gt;
+&lt;table&gt;
+  &lt;colgroup span="4"&gt;&lt;/colgroup&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Countries&lt;/th&gt;
+    &lt;th&gt;Capitals&lt;/th&gt;
+    &lt;th&gt;Population&lt;/th&gt;
+    &lt;th&gt;Language&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;USA&lt;/td&gt;
+    &lt;td&gt;Washington, D.C.&lt;/td&gt;
+    &lt;td&gt;309 million&lt;/td&gt;
+    &lt;td&gt;English&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Sweden&lt;/td&gt;
+    &lt;td&gt;Stockholm&lt;/td&gt;
+    &lt;td&gt;9 million&lt;/td&gt;
+    &lt;td&gt;Swedish&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;p&gt;Table with colgroup and col&lt;/p&gt;
+&lt;table&gt;
+  &lt;colgroup&gt;
+    &lt;col style="background-color: #0f0"&gt;
+    &lt;col span="2"&gt;
+  &lt;/colgroup&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Lime&lt;/th&gt;
+    &lt;th&gt;Lemon&lt;/th&gt;
+    &lt;th&gt;Orange&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Green&lt;/td&gt;
+    &lt;td&gt;Yellow&lt;/td&gt;
+    &lt;td&gt;Orange&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;p&gt;Simple table with caption&lt;/p&gt;
+&lt;table&gt;
+  &lt;caption&gt;Awesome caption&lt;/caption&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Awesome data&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">table
+{
+border-collapse: collapse;
+border-spacing: 0px;
+}
+table, th, td
+{
+padding: 5px;
+border: 1px solid black;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample('More_Examples', '100%', '700', '', 'Web/HTML/Element/table')}}</p>
+
+<h2 id="Accessibility_concerns">Accessibility concerns</h2>
+
+<h3 id="Captions">Captions</h3>
+
+<p>By supplying a {{HTMLElement("caption")}} element whose value clearly and concisely describes the table's purpose, it helps the people decide if they need to read the rest of the table content or skip over it.</p>
+
+<p>This helps people navigating with the aid of assistive technology such as a screen reader, people experiencing low vision conditions, and people with cognitive concerns.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced#Adding_a_caption_to_your_table_with_&lt;caption>">MDN Adding a caption to your table with &lt;caption&gt;</a></li>
+ <li><a href="https://www.w3.org/WAI/tutorials/tables/caption-summary/">Caption &amp; Summary • Tables • W3C WAI Web Accessibility Tutorials</a></li>
+</ul>
+
+<h3 id="Scoping_rows_and_columns">Scoping rows and columns</h3>
+
+<p>The {{htmlattrxref("scope", "th")}} attribute on header elements is redundant in simple contexts, because scope is inferred. However, some assistive technologies may fail to draw correct inferences, so specifying header scope may improve user experiences. In complex tables, scope can be specified so as to provide necessary information about the cells related to a header.</p>
+
+<h4 id="Example">Example</h4>
+
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;caption&gt;Color names and values&lt;/caption&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;th scope="col"&gt;Name&lt;/th&gt;
+      &lt;th scope="col"&gt;HEX&lt;/th&gt;
+      &lt;th scope="col"&gt;HSLa&lt;/th&gt;
+      &lt;th scope="col"&gt;RGBa&lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;Teal&lt;/th&gt;
+      &lt;td&gt;&lt;code&gt;#51F6F6&lt;/code&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;code&gt;hsla(180, 90%, 64%, 1)&lt;/code&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;code&gt;rgba(81, 246, 246, 1)&lt;/code&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;Goldenrod&lt;/th&gt;
+      &lt;td&gt;&lt;code&gt;#F6BC57&lt;/code&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;code&gt;hsla(38, 90%, 65%, 1)&lt;/code&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;code&gt;rgba(246, 188, 87, 1)&lt;/code&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<p>Providing a declaration of <code>scope="col"</code> on a {{HTMLElement("th")}} element will help describe that the cell is at the top of a column. Providing a declaration of <code>scope="row"</code> on a {{HTMLElement("th")}} element will help describe that the cell is the first in a row.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced#Tables_for_visually_impaired_users">MDN Tables for visually impaired users</a></li>
+ <li><a href="https://www.w3.org/WAI/tutorials/tables/two-headers/">Tables with two headers • Tables • W3C WAI Web Accessibility Tutorials</a></li>
+ <li><a href="https://www.w3.org/WAI/tutorials/tables/irregular/">Tables with irregular headers • Tables • W3C WAI Web Accessibility Tutorials</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H63.html">H63: Using the scope attribute to associate header cells and data cells in data tables | W3C Techniques for WCAG 2.0</a></li>
+</ul>
+
+<h3 id="Complicated_tables">Complicated tables</h3>
+
+<p>Assistive technology such as screen readers may have difficulty parsing tables that are so complex that header cells can’t be associated in a strictly horizontal or vertical way. This is typically indicated by the presence of the {{htmlattrxref("colspan", "td")}} and {{htmlattrxref("rowspan", "td")}} attributes.</p>
+
+<p>Ideally, consider alternate ways to present the table's content, including breaking it apart into a collection of smaller, related tables that don't have to rely on using the <code>colspan</code> and <code>rowspan</code> attributes. In addition to helping people who use assistive technology understand the table's content, this may also benefit people with cognitive concerns who may have difficulty understanding the associations the table layout is describing.</p>
+
+<p>If the table cannot be broken apart, use a combination of the {{htmlattrxref("id")}} and {{htmlattrxref("headers", "td")}} attributes to programmatically associate each table cell with the header(s) the cell is associated with.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced#Tables_for_visually_impaired_users">MDN Tables for visually impaired users</a></li>
+ <li><a href="https://www.w3.org/WAI/tutorials/tables/multi-level/">Tables with multi-level headers • Tables • W3C WAI Web Accessibility Tutorials</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H43.html">H43: Using id and headers attributes to associate data cells with header cells in data tables | Techniques for W3C WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','tables.html#the-table-element','table element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','tabular-data.html#the-table-element','table element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.table")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>CSS properties that may be especially useful to style the <code>&lt;table&gt;</code> element:
+
+  <ul>
+   <li>{{cssxref("width")}} to control the width of the table;</li>
+   <li>{{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-collapse")}}, {{cssxref("border-spacing")}} to control the aspect of cell borders, rules and frame;</li>
+   <li>{{cssxref("margin")}} and {{cssxref("padding")}} to style the individual cell content;</li>
+   <li>{{cssxref("text-align")}} and {{cssxref("vertical-align")}} to define the alignment of text and cell content.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/uk/web/html/елемент/video/index.html b/files/uk/web/html/елемент/video/index.html
new file mode 100644
index 0000000000..832ed6d1bb
--- /dev/null
+++ b/files/uk/web/html/елемент/video/index.html
@@ -0,0 +1,420 @@
+---
+title: '<video>: Вбудований елемент Відео'
+slug: Web/HTML/Елемент/video
+translation_of: Web/HTML/Element/video
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML Елемент Video</strong> (<strong><code>&lt;video&gt;</code></strong>) вбудовує медіа плеєр, який підтримує відтворення відео в документі.</span> Ви можете використовувати тег <code>&lt;video&gt;</code> також для аудіо, однак елемент {{HTMLElement("audio")}} може надати кращий користувацький досвід.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/video.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Код цих інтерактивних прикладів доступний на репозиторії GitHub. Якщо ви хочете долучитися до розробки інтерактивних прикладів, клонуйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>та надішліть нам запит на додавання.</p>
+
+<p>Наступні приклади показують просте використання елементу <code>&lt;video&gt;</code>. In a similar manner to the {{htmlelement("img")}} element, we include a path to the media we want to display inside the <code>src</code> attribute; we can include other attributes to specify information such as video width and height, whether we want it to autoplay and loop, whether we want to show the browser's default video controls, etc.</p>
+
+<p>The content inside the opening and closing <code>&lt;video&gt;&lt;/video&gt;</code> tags is shown as a fallback in browsers that don't support the element.</p>
+
+<p>Browsers don't all support the same <a href="/en-US/docs/Web/HTML/Supported_media_formats">video formats</a>; you can provide multiple sources inside nested {{htmlelement("source")}} elements, and the browser will then use the first one it understands:</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="myVideo.mp4" type="video/mp4"&gt;
+  &lt;source src="myVideo.webm" type="video/webm"&gt;
+  &lt;p&gt;Your browser doesn't support HTML5 video. Here is
+     a &lt;a href="myVideo.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/video&gt;</pre>
+
+<p>Other usage notes:</p>
+
+<ul>
+ <li>If you don't specify the <code>controls</code> attribute, the video won't include the browser's default controls; you can create your own custom controls using JavaScript and the {{domxref("HTMLMediaElement")}} API. See <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a> for more details.</li>
+ <li>To allow precise control over your video (and audio) content, <code>HTMLMediaElement</code>s fire many different <a href="/en-US/docs/Web/Guide/Events/Media_events">events</a>.</li>
+ <li>You can use the {{cssxref("object-position")}} property to adjust the positioning of the video within the element's frame, and the {{cssxref("object-fit")}} property to control how the video's size is adjusted to fit within the frame.</li>
+ <li>To show subtitles/captions along with your video, you can use some JavaScript along with the {{htmlelement("track")}} element and the <a href="/en-US/docs/Web/API/WebVTT_API">WebVTT</a> format. See <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a> for more information.</li>
+</ul>
+
+<p>A good general source of information on using HTML <code>&lt;video&gt;</code> is the <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a> beginner's tutorial.</p>
+
+<h2 id="Attributes">Attributes</h2>
+
+<p>Like all other HTML elements, this element supports the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("autoplay")}}</dt>
+ <dd>A Boolean attribute; if specified, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data.</dd>
+ <dd>
+ <p class="note"><strong>Note</strong>: Sites that automatically play audio (or video with an audio track) can be an unpleasant experience for users, so it should be avoided when possible. If you must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it). However, this can be useful when creating media elements whose source will be set at a later time, under user control.</p>
+
+ <p class="note">To disable video autoplay, <code>autoplay="false"</code> will not work; the video will autoplay if the attribute is there in the <code>&lt;video&gt;</code> tag at all. To remove autoplay the attribute needs to be removed altogether.</p>
+
+ <p class="note">In some browsers (e.g. Chrome 70.0) autoplay is not working if no <code>muted</code> attribute is present.</p>
+ </dd>
+</dl>
+
+<dl>
+ <dt><code><a href="https://wicg.github.io/picture-in-picture/#auto-pip">autoPictureInPicture</a></code> {{experimental_inline}}</dt>
+ <dd>Allows for automatic Picture-in-Picture behavior when the user switches back and forth between the web app and other applications/tab.</dd>
+ <dt>{{htmlattrdef("buffered")}}</dt>
+ <dd>An attribute you can read to determine the time ranges of the buffered media. This attribute contains a {{domxref("TimeRanges")}} object.</dd>
+ <dt>{{htmlattrdef("controls")}}</dt>
+ <dd>If this attribute is present, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.</dd>
+ <dt>{{htmlattrdef("controlslist")}} {{experimental_inline}}</dt>
+ <dd>The <code><a href="https://wicg.github.io/controls-list/html-output/multipage/embedded-content.html#attr-media-controlslist">controlslist</a></code> attribute, when specified, helps the browser select what controls to show on the media element whenever the browser shows its own set of controls (e.g. when the <code>controls</code> attribute is specified).</dd>
+ <dd>The allowed values are <code>nodownload</code>, <code>nofullscreen</code> and <code>noremoteplayback</code>.</dd>
+ <dd class="note">Use the <code>disablePictureInPicture</code> attribute if you want to disable the Picture-In-Picture mode (and the control).</dd>
+ <dt>{{htmlattrdef("crossorigin")}}</dt>
+ <dd>This enumerated attribute indicates whether to use CORS to fetch the related image. <a href="/en-US/docs/CORS_Enabled_Image">CORS-enabled resources</a> can be reused in the {{HTMLElement("canvas")}} element without being <em>tainted</em>. The allowed values are:
+ <dl>
+  <dt><code>anonymous</code></dt>
+  <dd>Sends a cross-origin request without a credential. In other words, it sends the <code>Origin:</code> HTTP header without a cookie, X.509 certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (by not setting the <code>Access-Control-Allow-Origin:</code> HTTP header), the image will be <em>tainted</em>, and its usage restricted.</dd>
+  <dt><code>use-credentials</code></dt>
+  <dd>Sends a cross-origin request with a credential. In other words, it sends the <code>Origin:</code> HTTP header with a cookie, a certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (through <code>Access-Control-Allow-Credentials:</code> HTTP header), the image will be <em>tainted</em> and its usage restricted.</dd>
+ </dl>
+ When not present, the resource is fetched without a CORS request (i.e. without sending the <code>Origin:</code> HTTP header), preventing its non-tainted used in {{HTMLElement('canvas')}} elements. If invalid, it is handled as if the enumerated keyword <code>anonymous</code> was used. See <a href="/en-US/docs/HTML/CORS_settings_attributes">CORS settings attributes</a> for additional information.</dd>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>The height of the video's display area, in <a href="https://drafts.csswg.org/css-values/#px">CSS pixels</a> (absolute values only; <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes">no percentages</a>.)</dd>
+ <dt>{{htmlattrdef("intrinsicsize")}} {{experimental_inline}}</dt>
+ <dd>This attribute tells the browser to ignore the actual intrinsic size of the image and pretend it’s the size specified in the attribute. Specifically, the image would raster at these dimensions and <code>naturalWidth</code>/<code>naturalHeight</code> on images would return the values specified in this attribute. <a href="https://github.com/ojanvafai/intrinsicsize-attribute">Explainer</a>, <a href="https://googlechrome.github.io/samples/intrinsic-size/index.html">examples</a></dd>
+ <dt>{{htmlattrdef("loop")}}</dt>
+ <dd>A Boolean attribute; if specified, the browser will automatically seek back to the start upon reaching the end of the video.</dd>
+ <dt>{{htmlattrdef("muted")}}</dt>
+ <dd>A Boolean attribute that indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced. Its default value is <code>false</code>, meaning that the audio will be played when the video is played.</dd>
+ <dt><code><a href="https://wicg.github.io/picture-in-picture/#disable-pip">disablePictureInPicture</a></code> {{experimental_inline}}</dt>
+ <dd>Prevents the browser from suggesting a Picture-in-Picture context menu or to request Picture-in-Picture automatically in some cases.</dd>
+ <dt>{{htmlattrdef("playsinline")}}</dt>
+ <dd>A Boolean attribute indicating that the video is to be played "inline", that is within the element's playback area. Note that the absence of this attribute <em>does not</em> imply that the video will always be played in fullscreen.</dd>
+ <dt>{{htmlattrdef("poster")}}</dt>
+ <dd>A URL for an image to be shown while the video is downloading. If this attribute isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.</dd>
+ <dt>{{htmlattrdef("preload")}}</dt>
+ <dd>This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience with regards to what content is loaded before the video is played. It may have one of the following values:
+ <ul>
+  <li><code>none</code>: Indicates that the video should not be preloaded.</li>
+  <li><code>metadata</code>: Indicates that only video metadata (e.g. length) is fetched.</li>
+  <li><code>auto</code>: Indicates that the whole video file can be downloaded, even if the user is not expected to use it.</li>
+  <li><em>empty string</em>: Synonym of the <code>auto</code> value.</li>
+ </ul>
+
+ <p>The default value is different for each browser. The spec advises it to be set to <code>metadata</code>.</p>
+
+ <div class="note"><strong>Notes:</strong>
+
+ <ul>
+  <li>The <code>autoplay</code> attribute has precedence over <code>preload</code>. If <code>autoplay</code> is specified, the browser would obviously need to start downloading the video for playback.</li>
+  <li>The specification does not force the browser to follow the value of this attribute; it is a mere hint.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt></dt>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>The URL of the video to embed. This is optional; you may instead use the {{HTMLElement("source")}} element within the video block to specify the video to embed.</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>The width of the video's display area, in <a href="https://drafts.csswg.org/css-values/#px">CSS pixels</a> (absolute values only; <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes">no percentages</a>).</dd>
+ <dt></dt>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Event Name</th>
+   <th scope="col">Fired When</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("ScriptProcessorNode.audioprocess_event","audioprocess")}}{{Deprecated_Inline}}</td>
+   <td>The input buffer of a {{DOMxRef("ScriptProcessorNode")}} is ready to be processed.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.canplay_event", 'canplay')}}</td>
+   <td>The browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}}</td>
+   <td>The browser estimates it can play the media up to its end without stopping for content buffering.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("OfflineAudioContext.complete_event", "complete")}}</td>
+   <td>The rendering of an {{DOMxRef("OfflineAudioContext")}} is terminated.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}}</td>
+   <td>The <code>duration</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.emptied_event", 'emptied')}}</td>
+   <td>The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> method is called to reload it.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.ended_event", 'ended')}}</td>
+   <td>Playback has stopped because the end of the media was reached.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}</td>
+   <td>The first frame of the media has finished loading.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.loadedmetadata_event", 'loadedmetadata')}}</td>
+   <td>The metadata has been loaded.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.pause_event", 'pause')}}</td>
+   <td>Playback has been paused.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.play_event", 'play')}}</td>
+   <td>Playback has begun.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.playing_event", 'playing ')}}</td>
+   <td>Playback is ready to start after having been paused or delayed due to lack of data.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.progress_event", 'progress')}}</td>
+   <td>Fired periodically as the browser loads a resource.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.ratechange_event", 'ratechange')}}</td>
+   <td>The playback rate has changed.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.seeked_event", 'seeked')}}</td>
+   <td>A <em>seek</em> operation completed.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.seeking_event", 'seeking')}}</td>
+   <td>A <em>seek</em> operation began.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.stalled_event", 'stalled')}}</td>
+   <td>The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.suspend_event", 'suspend')}}</td>
+   <td>Media data loading has been suspended.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.timeupdate_event", 'timeupdate')}}</td>
+   <td>The time indicated by the <code>currentTime</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.volumechange_event", 'volumechange')}}</td>
+   <td>The volume has changed.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.waiting_event", 'waiting')}}</td>
+   <td>Playback has stopped because of a temporary lack of data</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<h3 id="Styling_with_CSS">Styling with CSS</h3>
+
+<p>The <code>&lt;video&gt;</code> element is a replaced element — its {{cssxref("display")}} value is <code>inline</code> by default, but its default width and height in the viewport is defined by the video being embedded.</p>
+
+<p>There are no special considerations for styling <code>&lt;video&gt;</code>; a common strategy is to give it a <code>display</code> value of <code>block</code> to make it easier to position, size, etc., and then provide styling and layout information as required. <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player styling basics</a> provides some useful styling techniques.</p>
+
+<h3 id="Detecting_track_addition_and_removal">Detecting track addition and removal</h3>
+
+<p>You can detect when tracks are added to and removed from a <code>&lt;video&gt;</code> element using the {{event("addtrack")}} and {{event("removetrack")}} events. However, these events aren't sent directly to the <code>&lt;video&gt;</code> element itself. Instead, they're sent to the track list object within the <code>&lt;video&gt;</code> element's {{domxref("HTMLMediaElement")}} that corresponds to the type of track that was added to the element:</p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt>
+ <dd>An {{domxref("AudioTrackList")}} containing all of the media element's audio tracks. You can add a listener for <code>addtrack</code> to this object to be alerted when new audio tracks are added to the element.</dd>
+ <dt>{{domxref("HTMLMediaElement.videoTracks")}}</dt>
+ <dd>Add an <code>addtrack</code> listener to this {{domxref("VideoTrackList")}} object to be informed when video tracks are added to the element.</dd>
+ <dt>{{domxref("HTMLMediaElement.textTracks")}}</dt>
+ <dd>Add an <code>addtrack</code> event listener to this {{domxref("TextTrackList")}} to be notified when new text tracks are added to the element.</dd>
+</dl>
+
+<p>For example, to detect when audio tracks are added to or removed from a <code>&lt;video&gt;</code> element, you can use code like this:</p>
+
+<pre class="brush: js">var elem = document.querySelector("video");
+
+elem.audioTrackList.onaddtrack = function(event) {
+  trackEditor.addTrack(event.track);
+};
+
+elem.audioTrackList.onremovetrack = function(event) {
+  trackEditor.removeTrack(event.track);
+};
+</pre>
+
+<p>This code watches for audio tracks to be added to and removed from the element, and calls a hypothetical function on a track editor to register and remove the track from the editor's list of available tracks.</p>
+
+<p>You can also use {{domxref("EventTarget.addEventListener", "addEventListener()")}} to listen for the {{event("addtrack")}} and {{event("removetrack")}} events.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Simple_video_example">Simple video example</h3>
+
+<p>This example plays a video when activated, providing the user with the browser's default video controls to control playback.</p>
+
+<pre class="brush: html">&lt;!-- Simple video example --&gt;
+&lt;!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org --&gt;
+&lt;!-- Poster from peach.blender.org --&gt;
+&lt;video controls
+    src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
+    poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
+    width="620"&gt;
+
+Sorry, your browser doesn't support embedded videos,
+but don't worry, you can &lt;a href="https://archive.org/details/BigBuckBunny_124"&gt;download it&lt;/a&gt;
+and watch it with your favorite video player!
+
+&lt;/video&gt;</pre>
+
+<p>{{EmbedLiveSample('Simple_video_example', '640', '370', '', 'Web/HTML/Element/video')}}</p>
+
+<p>Until the video starts playing, the image provided in the <code>poster</code> attribute is displayed in its place. If the browser doesn't support video playback, the fallback text is displayed.</p>
+
+<h3 id="Multiple_sources_example">Multiple sources example</h3>
+
+<p>This example builds on the last one, offering three different sources for the media; this allows the video to be watched regardless of which video codecs are supported by the browser.</p>
+
+<pre class="brush: html">&lt;!-- Using multiple sources as fallbacks for a video tag --&gt;
+&lt;!-- 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org --&gt;
+&lt;!-- Poster hosted by Wikimedia --&gt;
+&lt;video width="620" controls
+  poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg" &gt;
+  &lt;source
+    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
+    type="video/mp4"&gt;
+  &lt;source
+    src="https://archive.org/download/ElephantsDream/ed_hd.ogv"
+    type="video/ogg"&gt;
+  &lt;source
+    src="https://archive.org/download/ElephantsDream/ed_hd.avi"
+    type="video/avi"&gt;
+  Your browser doesn't support HTML5 video tag.
+&lt;/video&gt;</pre>
+
+<p>{{EmbedLiveSample('Multiple_sources_example', '640', '370', '', 'Web/HTML/Element/video')}}</p>
+
+<p>First WebM is tried. If that can't be played, then MP4 is tried. Finally, OGG is tried. A fallback message is displayed if the video tag isn't supported, but not if all sources fail.</p>
+
+<h3 id="Server_support_for_video">Server support for video</h3>
+
+<p>If the MIME type for the video is not set correctly on the server, the video may not show or show a gray box containing an X (if JavaScript is enabled).</p>
+
+<p>If you use Apache Web Server to serve Ogg Theora videos, you can fix this problem by adding the video file type extensions to "video/ogg" MIME type. The most common video file type extensions are ".ogm", ".ogv", or ".ogg". To do this, edit the "mime.types" file in "/etc/apache" or use the <code>"AddType"</code> configuration directive in <code>httpd.conf</code>.</p>
+
+<pre class="eval">AddType video/ogg .ogm
+AddType video/ogg .ogv
+AddType video/ogg .ogg
+</pre>
+
+<p>If you serve your videos as WebM, you can fix this problem for the Apache Web Server by adding the extension used by your video files (".webm" is the most common one) to the MIME type "video/webm" via the "mime.types" file in "/etc/apache" or via the "AddType" configuration directive in <code>httpd.conf</code>.</p>
+
+<pre class="eval">AddType video/webm .webm
+</pre>
+
+<p>Your web host may provide an easy interface to MIME type configuration changes for new technologies until a global update naturally occurs.</p>
+
+<h2 id="Accessibility_concerns">Accessibility concerns</h2>
+
+<p>Videos should provide both captions and transcripts that accurately describe its content (see <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a> for more information on how to implement these). Captions allow people who are experiencing hearing loss to understand a video's audio content as the video is being played, while transcripts allow people who need additional time to be able to review audio content at a pace and format that is comfortable for them.</p>
+
+<p>If automatic captioning services are used, it is important to review the generated content to ensure it accurately represents the source video.</p>
+
+<p>In addition to spoken dialog, subtitles and transcripts should also identify music and sound effects that communicate important information. This includes emotion and tone:</p>
+
+<pre class="eval">14
+00:03:14 --&gt; 00:03:18
+[Dramatic rock music]
+
+15
+00:03:19 --&gt; 00:03:21
+[whispering] What's that off in the distance?
+
+16
+00:03:22 --&gt; 00:03:24
+It's… it's a…
+
+16 00:03:25 --&gt; 00:03:32
+[Loud thumping]
+[Dishes clattering]
+</pre>
+
+<p>Captions should not obstruct the main subject of the video. They can be positioned using <a href="/en-US/docs/Web/API/WebVTT_API#Cue_settings">the <code>align</code> VTT cue setting</a>.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Plugins/Flash_to_HTML5/Video/Subtitles_captions">MDN Subtitles and closed caption — Plugins</a></li>
+ <li><a href="/en-US/docs/Web/API/WebVTT_API">Web Video Text Tracks Format (WebVTT)</a></li>
+ <li><a href="https://webaim.org/techniques/captions/">WebAIM: Captions, Transcripts, and Audio Descriptions</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.2_—_Providing_text_alternatives_for_time-based_media">MDN Understanding WCAG, Guideline 1.2 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html">Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html">Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Technical_summary">Technical summary</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, phrasing content, embedded content. If it has a {{htmlattrxref("controls", "video")}} attribute: interactive content and palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td>
+    <p>If the element has a {{htmlattrxref("src", "video")}} attribute: zero or more {{HTMLElement("track")}} elements, followed by transparent content that contains no media elements–that is no {{HTMLElement("audio")}} or {{HTMLElement("video")}}</p>
+
+    <p>Else: zero or more {{HTMLElement("source")}} elements, followed by zero or more {{HTMLElement("track")}} elements, followed by transparent content that contains no media elements–that is no {{HTMLElement("audio")}} or {{HTMLElement("video")}}.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parents</th>
+   <td>Any element that accepts embedded content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>{{ARIARole("application")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLVideoElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Feedback</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-video-element', '&lt;video&gt;')}}</td>
+   <td><a href="https://github.com/whatwg/html/issues">WHATWG HTML GitHub issues</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.video")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">Media formats supported by the audio and video elements</a></li>
+ <li>Positioning and sizing the picture within its frame: {{cssxref("object-position")}} and {{cssxref("object-fit")}}</li>
+ <li>{{htmlelement("audio")}}</li>
+ <li><a href="/en-US/docs/Using_HTML5_audio_and_video">Using HTML5 audio and video</a></li>
+ <li><a href="/en-US/docs/Manipulating_video_using_canvas">Manipulating video using canvas</a></li>
+ <li><a href="/en-US/docs/Configuring_servers_for_Ogg_media">Configuring servers for Ogg media</a></li>
+</ul>
diff --git a/files/uk/web/html/елемент/заголовок/index.html b/files/uk/web/html/елемент/заголовок/index.html
new file mode 100644
index 0000000000..9ed3c75dfa
--- /dev/null
+++ b/files/uk/web/html/елемент/заголовок/index.html
@@ -0,0 +1,145 @@
+---
+title: <header>
+slug: Web/HTML/Елемент/Заголовок
+tags:
+  - HTML
+  - HTML елементи
+translation_of: Web/HTML/Element/header
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;header&gt;</code> елемент</strong> представляє групу вступних або навігаційних елементів. Він може містити елементи заголовків, а також інші елементи, такі як логотип, форма пошуку та інше.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/uk/docs/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/uk/docs/HTML/Content_categories#Flow_content">Flow content</a>, palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td><a href="/uk/docs/HTML/Content_categories#Flow_content">Flow content</a>, but with no <code>&lt;header&gt;</code> or {{HTMLElement("footer")}} descendant.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parents</th>
+   <td>Any element that accepts <a href="/uk/docs/HTML/Content_categories#Flow_content">flow content</a>. Note that a <code>&lt;header&gt;</code> element must not be a descendant of an {{HTMLElement("address")}}, {{HTMLElement("footer")}} or another {{HTMLElement("header")}} element.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Зауваження_до_використання">Зауваження до використання</h2>
+
+<p>The <code>&lt;header&gt;</code> element is not sectioning content and therefore does not introduce a new section in the <a href="/uk/docs/Sections_and_Outlines_of_an_HTML5_document">outline</a>. That said, a <code>header</code> element is intended to usually contain the surrounding <code>section</code>'s heading (an <code>h1</code>–<code>h6</code> element), but this is <strong>not</strong> required.</p>
+
+<h2 id="Атрибути">Атрибути</h2>
+
+<p>This element only includes the <a href="/uk/docs/HTML/Global_attributes">global attributes</a>.</p>
+
+<h2 id="Приклад">Приклад</h2>
+
+<pre class="brush: html">&lt;header&gt;
+  &lt;h1&gt;Main Page Title&lt;/h1&gt;
+  &lt;img src="mdn-logo-sm.png" alt="MDN logo"&gt;
+&lt;/header&gt;
+</pre>
+
+<h1 id="Main_Page_Title">Main Page Title</h1>
+
+<h2 id="sect1"><img alt="MDN" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"></h2>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-header-element', '&lt;header&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-header-element', '&lt;header&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9.0</td>
+   <td>11.10</td>
+   <td>4.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.2</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Others section-related elements: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}}.</li>
+ <li class="last"><a class="deki-ns current" href="/uk/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">Sections and outlines of a HTML5 document</a>.</li>
+</ul>
diff --git a/files/uk/web/html/загальні_атрибути/hidden/index.html b/files/uk/web/html/загальні_атрибути/hidden/index.html
new file mode 100644
index 0000000000..aadb167dcb
--- /dev/null
+++ b/files/uk/web/html/загальні_атрибути/hidden/index.html
@@ -0,0 +1,68 @@
+---
+title: hidden
+slug: Web/HTML/Загальні_атрибути/hidden
+tags:
+  - HTML
+  - Глобальні атрибути
+translation_of: Web/HTML/Global_attributes/hidden
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><span class="seoSummary"><a href="/en-US/docs/Web/HTML/Global_attributes">Глобальний атрибут</a> <strong><code>Hidden</code></strong>  - це булівський атрибут, який позначає,що цей елемент ще або вже не релевантний. Наприклад? цей атрибут може бути використаним, щоб сховати елементи поки не виконається вхід. Браузер не промалює елемент з заданим атрибутом</span> <code>hidden</code> .</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-hidden.html","tabbed-shorter")}}</div>
+
+<p class="hidden">Початковий код для інтерактивного приклада зберігається в  GitHub репозиторії. Якшо ви бажаєте зробити внесок в проект приклада, будь ласка, клонуйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>і надішліть нам пул реквест.</p>
+
+<p>Атрибут <code>hidden</code> не має використовуватись для того, щоб  ховати контент, що має відображатись в іншому представленні. Наприклад, неправильно використовувати атрибут, щоб ховати панель в діалозі з вкладками, тому що інтерфейс вкладок - це  вид представлення зі схованими елементами, які можна відобразити  на одній великій сторінці з прокруткою. Так само не коректно використовувати вміст тільки для одного представлення - якщо щось позначено як приховане -  це має бути сховане для всіх представлень включно з зчитувачами екрана.</p>
+
+<p>Сховані елементи не мають бути прив'язані до не схованих. і до елементів, які наслідують приховані, все ще активні елементи, що означає, що скриптові елементи все ще можуть виконуватися, а елементи форми відправлятися. Проте елементи і скрипти можуть посилатися на елементи, що сховані в іншому контексті.</p>
+
+<p>Наприклад, неправильно використовувати атрибут <code>href</code>, що посилається до секції з атрибутом <code>hidden</code>. Немає сенсу посилатися на вміст якщо він не застосовуваний і не релевантний.</p>
+
+<p>Проте було б добре використовувати  ARIA атрибут <code>aria-describedby</code> для посилання до описів, які сховані. Тоді як приховування описів означає, що вони не є корисними; Вони можуть бути написаними таким чином, щоб  бути корисними  в конкретному контексті посилання на них з елемента який вони описують.</p>
+
+<p>Аналогічно елемент canvas з атрибутом <code>hidden</code> може бути використаний для заскриптованого графічного движка і форма може посилатися до схованого елемента використовуючи його атрибут форми.</p>
+
+<div class="note">
+<p><strong>Нотатка:</strong> Зміна {{cssxref("display")}} властивості  елемента з атрибутом <code>hidden</code> перезаписує середовище. Для прикладу, елемент стилізований <code>display: flex</code> буде відображатись, не зважаючи на атрибут <code>hidden.</code></p>
+</div>
+
+<h2 id="Специфікація">Специфікація</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Не змінювалося з останнього знымка, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Визначає запропонований рендеринг атрибута <code>hidden</code>, використовуючи CSS</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Знімок {{SpecName('HTML WHATWG')}}, початкове визначення</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_браузерів">Підтримка браузерів</h2>
+
+<div class="hidden">Таблиця підтримки на цій сторінці згенерована з структурованих даних будь ласка прогляньте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і надішлінть нам pull request.</div>
+
+<p>{{Compat("html.global_attributes.hidden")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>Всіl <a href="/en-US/docs/Web/HTML/Global_attributes">глобальні атрибути</a>.</li>
+</ul>
diff --git a/files/uk/web/html/загальні_атрибути/index.html b/files/uk/web/html/загальні_атрибути/index.html
new file mode 100644
index 0000000000..224329d601
--- /dev/null
+++ b/files/uk/web/html/загальні_атрибути/index.html
@@ -0,0 +1,474 @@
+---
+title: Загальні атрибути
+slug: Web/HTML/Загальні_атрибути
+translation_of: Web/HTML/Global_attributes
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<div class="summary">
+<p><strong>Global attributes</strong> are attributes common to all HTML elements; they can be used on all elements, though the attributes may have no effect on some elements.</p>
+</div>
+
+<p>Global attributes may be specified on all <a href="/en-US/docs/Web/HTML/Element">HTML elements</a>, <em>even those not specified in the standard</em>. That means that any non-standard elements must still permit these attributes, even though using those elements means that the document is no longer HTML5-compliant. For example, HTML5-compliant browsers hide content marked as <code>&lt;foo hidden&gt;...&lt;foo&gt;</code><code>, </code>even though <code>&lt;foo&gt;</code> is not a valid HTML element.</p>
+
+<p>In addition to the basic HTML global attributes, the following global attributes also exist:</p>
+
+<ul>
+ <li>{{HTMLAttrDef("xml:lang")}} and {{HTMLAttrDef("xml:base")}} — these are inherited from the XHTML specifications and deprecated, but kept for compatibility purposes.</li>
+ <li>The multiple <code><strong><a href="/en-US/docs/Web/Accessibility/ARIA">aria-*</a></strong></code> attributes, used for improving accessibility.</li>
+ <li>The event handler attributes: <code><strong>onabort</strong></code>, <code><strong>onautocomplete</strong></code>, <code><strong>onautocompleteerror</strong></code>, <code><strong>onblur</strong></code>, <code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncontextmenu</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onsort</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code>.</li>
+</ul>
+
+<h2 id="Description">Description</h2>
+
+<dl>
+ <dt id="attr-accesskey"><code><a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">accesskey</a></code></dt>
+ <dd>Provides a hint for generating a keyboard shortcut for the current element. This attribute consists of a space-separated list of characters. The browser should use the first one that exists on the computer keyboard layout.</dd>
+ <dt id="attr-class"><code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code></dt>
+ <dd>Is a space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the <a href="/en-US/docs/Web/CSS/Class_selectors">class selectors</a> or functions like the method {{domxref("Document.getElementsByClassName()")}}.</dd>
+ <dt id="attr-contenteditable"><code><a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code></dt>
+ <dd>Is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing. The attribute must take one of the following values:
+ <ul>
+  <li><code>true</code> or the <em>empty string</em>, which indicates that the element must be editable;</li>
+  <li><code>false</code>, which indicates that the element must not be editable.</li>
+ </ul>
+ </dd>
+ <dt id="attr-contextmenu"><code><a href="/en-US/docs/Web/HTML/Global_attributes/contextmenu">contextmenu</a></code></dt>
+ <dd>Is the <code><a href="#attr-id"><strong>id</strong></a></code> of an {{HTMLElement("menu")}} to use as the contextual menu for this element.</dd>
+ <dt id="attr-dataset"><code><a href="/en-US/docs/Web/HTML/Global_attributes/data-*">data-*</a></code></dt>
+ <dd>Forms a class of attributes, called custom data attributes, that allow proprietary information to be exchanged between the <a href="/en-US/docs/Web/HTML">HTML</a> and its <a href="/en-US/docs/Glossary/DOM">DOM</a> representation that may be used by scripts. All such custom data are available via the {{domxref("HTMLElement")}} interface of the element the attribute is set on. The {{domxref("HTMLElement.dataset")}} property gives access to them.</dd>
+ <dt id="attr-dir"><code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code></dt>
+ <dd>Is an enumerated attribute indicating the directionality of the element's text. It can have the following values:
+ <ul>
+  <li><code>ltr</code>, which means <em>left to right </em>and is to be used for languages that are written from the left to the right (like English);</li>
+  <li><code>rtl</code>, which means <em>right to left</em> and is to be used for languages that are written from the right to the left (like Arabic);</li>
+  <li><code>auto</code>, which let the user agent decides. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then apply that directionality to the whole element.</li>
+ </ul>
+ </dd>
+ <dt id="attr-draggable"><code><a href="/en-US/docs/Web/HTML/Global_attributes/draggable">draggable</a></code> {{experimental_inline}}</dt>
+ <dd>Is an enumerated attribute indicating whether the element can be dragged, using the <a href="/en-us/docs/DragDrop/Drag_and_Drop">Drag and Drop API</a>. It can have the following values:
+ <ul>
+  <li><code>true</code>, which indicates that the element may be dragged</li>
+  <li><code>false</code>, which indicates that the element may not be dragged.</li>
+ </ul>
+ </dd>
+ <dt id="attr-dropzone"><code><a href="/en-US/docs/Web/HTML/Global_attributes/dropzone">dropzone</a></code> {{experimental_inline}}</dt>
+ <dd>Is an enumerated attribute indicating what types of content can be dropped on an element, using the <a href="/en-US/docs/DragDrop/Drag_and_Drop">Drag and Drop API</a>. It can have the following values:
+ <ul>
+  <li><code>copy</code>, which indicates that dropping will create a copy of the element that was dragged</li>
+  <li><code>move</code>, which indicates that the element that was dragged will be moved to this new location.</li>
+  <li><code>link</code>, will create a link to the dragged data.</li>
+ </ul>
+ </dd>
+ <dt id="attr-hidden"><code><a href="/en-US/docs/Web/HTML/Global_attributes/hidden">hidden</a></code></dt>
+ <dd>Is a Boolean attribute indicates that the element is not yet, or is no longer, <em>relevant</em>. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements. This attribute must not be used to hide content that could legitimately be shown.</dd>
+ <dt id="attr-id"><code><a href="/en-US/docs/Web/HTML/Global_attributes/id">id</a></code></dt>
+ <dd>Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note: </strong>The following 5 attributes are part of the <a class="external" href="https://html.spec.whatwg.org/multipage/microdata.html#microdata">WHATWG HTML Microdata feature</a>.</p>
+</div>
+
+<dl>
+ <dt id="attr-itemid"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemid">itemid</a></code> {{experimental_inline}}</dt>
+ <dd>The unique, global identifier of an item.</dd>
+ <dt id="attr-itemprop"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code> {{experimental_inline}}</dt>
+ <dd>Used to add properties to an item. Every HTML element may have an itemprop attribute specified, where an itemprop consists of a name and value pair.</dd>
+ <dt id="attr-itemref"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemref">itemref</a></code> {{experimental_inline}}</dt>
+ <dd>Properties that are not descendants of an element with the <code>itemscope</code> attribute can be associated with the item using an <strong>itemref</strong>. Itemref provides a list of element ids (not <code>itemid</code>s) with additional properties elsewhere in the document.</dd>
+ <dt id="attr-itemscope"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemscope">itemscope</a> </code>{{experimental_inline}}</dt>
+ <dd>Itemscope (usually) works along with <a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype </a>to specify that the HTML contained in a block is about a particular item. itemscope creates the Item and defines the scope of the itemtype associated with it. itemtype is a valid URL of a vocabulary (such as <a class="external external-icon" href="https://schema.org/">schema.org</a>) that describes the item and its properties context.</dd>
+ <dt id="attr-itemtype"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype</a></code> {{experimental_inline}}</dt>
+ <dd>Specifies the URL of the vocabulary that will be used to define itemprop's (item properties) in the data structure. <a href="/en-US/docs/Web/HTML/Global_attributes/itemscope">Itemscope</a> is used to set the scope of  where in the data structure the vocabulary set by itemtype will be active.</dd>
+ <dt id="attr-lang"><code><a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a></code></dt>
+ <dd>Participates in defining the language of the element, the language that non-editable elements are written in or the language that editable elements should be written in. The tag contains one single entry value in the format defines in the <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a> IETF document. <a href="#attr-xml:lang"><strong>xml:lang</strong></a> has priority over it.</dd>
+</dl>
+
+<dl>
+ <dt id="attr-slot"><code><a href="/en-US/docs/Web/HTML/Global_attributes/slot">slot</a></code> {{experimental_inline}}</dt>
+ <dd>Assigns a slot in a <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> shadow tree to an element: An element with a <code>slot</code> attribute is assigned to the slot created by the {{HTMLElement("slot")}} element whose {{htmlattrxref("name", "slot")}} attribute's value matches that <code>slot</code> attribute's value.</dd>
+</dl>
+
+<dl>
+ <dt id="attr-spellcheck"><code><a href="/en-US/docs/Web/HTML/Global_attributes/spellcheck">spellcheck</a></code> {{experimental_inline}}</dt>
+ <dd>Is an enumerated attribute defines whether the element may be checked for spelling errors. It may have the following values:
+ <ul>
+  <li><code>true</code>, which indicates that the element should be, if possible, checked for spelling errors;</li>
+  <li><code>false</code>, which indicates that the element should not be checked for spelling errors.</li>
+ </ul>
+ </dd>
+ <dt id="attr-style"><code><a href="/en-US/docs/Web/HTML/Global_attributes/style">style</a></code></dt>
+ <dd>Contains <a href="/en-US/docs/Web/CSS">CSS</a> styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the {{HTMLElement("style")}} element have mainly the purpose of allowing for quick styling, for example for testing purposes.</dd>
+ <dt id="attr-tabindex"><code><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></code></dt>
+ <dd>Is an integer attribute indicating if the element can take input focus (is <em>focusable</em>), if it should participate to sequential keyboard navigation, and if so, at what position. It can takes several values:
+ <ul>
+  <li>a <em>negative value</em> means that the element should be focusable, but should not be reachable via sequential keyboard navigation;</li>
+  <li><code>0</code> means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;</li>
+  <li>a <em>positive value</em> which means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the <a href="#attr-tabindex"><strong>tabindex</strong></a>. If several elements share the same tabindex, their relative order follows their relative position in the document).</li>
+ </ul>
+ </dd>
+ <dt id="attr-title"><code><a href="/en-US/docs/Web/HTML/Global_attributes/title">title</a></code></dt>
+ <dd>Contains a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip.</dd>
+ <dt id="attr-translate"><code><a href="/en-US/docs/Web/HTML/Global_attributes/translate">translate</a></code></dt>
+ <dd>Is an enumerated attribute that is used to specify whether an element's attribute values and the values of it<code>s</code> {{domxref("Text")}} node children are to be translated when the page is localized, or whether to leave them unchanged. It can have the following values:
+ <ul>
+  <li>empty string and <code>"yes"</code>, which indicates that the element will be translated.</li>
+  <li><code>"no</code>", which indicates that the element will not be translated.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#global-attributes", "Global attributes")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>From latest snapshot, {{SpecName('HTML5.1')}}, <code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, and <code>itemtype</code> have been added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName('HTML5 W3C')}}, <code>spellcheck</code>, <code>draggable</code>, and <code>dropzone</code> have been added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the concept of global attributes is introduced and the <code>dir</code>, <code>lang</code>, <code>style</code>, <code>id</code>, <code>class</code>, <code>tabindex</code>, <code>accesskey</code>, and <code>title</code> are now true global attributes.<br>
+    <code>xml:lang</code> which was initially part of XHTML, is now also part of HTML.<br>
+    <code>hidden</code>, <code>data-*</code>, <code>contextmenu</code>, <code>contenteditable</code>, and <code>translate</code> have been added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>There are no global attributes defined. Several attributes that will become global attributes in subsequent specifications are defined on a subset of elements.<br>
+    <code>class</code> and <code>style</code> are supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br>
+    <code>dir</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br>
+    <code>id</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br>
+    <code>lang</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br>
+    <code>tabindex</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.<br>
+    <code>accesskey</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} and {{HTMLElement("textarea")}}.<br>
+    <code>title</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td><code>accesskey</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>class</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>contenteditable</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>contextmenu</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(9)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>data-*</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("6")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>dir</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>draggable</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>dropzone</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>hidden</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>id</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, <code>itemtype</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>lang</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>spellcheck</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>style</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>tabindex</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>title</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><code>accesskey</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>class</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>contenteditable</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>contextmenu</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>data-*</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("6")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>dir</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>draggable</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>dropzone</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>hidden</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>id</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, <code>itemtype</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>lang</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>spellcheck</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>style</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>tabindex</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>title</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Element")}} and {{domxref("GlobalEventHandlers")}} interfaces that allow to query most global attributes.</li>
+</ul>
diff --git a/files/uk/web/html/загальні_атрибути/itemscope/index.html b/files/uk/web/html/загальні_атрибути/itemscope/index.html
new file mode 100644
index 0000000000..b170013be0
--- /dev/null
+++ b/files/uk/web/html/загальні_атрибути/itemscope/index.html
@@ -0,0 +1,319 @@
+---
+title: itemscope
+slug: Web/HTML/Загальні_атрибути/itemscope
+translation_of: Web/HTML/Global_attributes/itemscope
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><code><strong>itemscope</strong></code> це <a href="/en-US/docs/Web/HTML/Global_attributes">глобальний атрибут</a> логічного типу, що визначає сферу асоційованих даних. Атрибут <code><strong>itemscope</strong></code> визначається на елементах, що створюють нові елементи, який призводить до числа з пар назва-значення, що асоціюється з елементом. Пов'язаний з ним атрибут, {{htmlattrxref("itemtype")}}, використовується для визначення валідної URL зі словника (such as <a href="http://schema.org/">schema.org</a>), що описує елемент та контекст його властивостей. У наступних прикладах в кожному елементі словник взятий з <a href="https://schema.org/">schema.org</a>.</p>
+
+<p>Кожен HTML елемент може мати атрибут <code>itemscope</code>. <code>itemscope</code> елемент, який не має <code>itemtype</code> повинен мати <code>itemref</code>.</p>
+
+<div class="note">
+<p><strong>Примітка:</strong> Знайти більше інформації про атрибут <code>itemtype</code>  можна на  <a href="http://schema.org/Thing">http://schema.org/Thing</a></p>
+</div>
+
+<h3 id="Простий_приклад">Простий приклад</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<p>Нижченаведений приклад демонструє атрибут <code>itemscope</code>. В прикладі використовується <code>itemtype</code> як "http://schema.org/Movie", і три пов'язані атрибути <code>itemprop</code>. </p>
+
+<pre class="brush:html">&lt;div itemscope itemtype ="http://schema.org/Movie"&gt;
+  &lt;h1 itemprop="name"&gt;Avatar&lt;/h1&gt;
+  &lt;span&gt;Director: &lt;span itemprop="director"&gt;James Cameron&lt;/span&gt; (born August 16, 1954)&lt;/span&gt;
+  &lt;span itemprop="genre"&gt;Science fiction&lt;/span&gt;
+  &lt;a href="https://youtu.be/0AY1XIkX7bY" itemprop="trailer"&gt;Trailer&lt;/a&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="sect1"></h4>
+
+<h4 id="Структуровані_дані">Структуровані дані</h4>
+
+<p>В наступній таблиці показано структуровані дані з попереднього прикладу.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td rowspan="6">itemscope</td>
+   <td>Itemtype</td>
+   <td colspan="2">Movie</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>(itemprop name)</td>
+   <td>(значення itemprop)</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>director</td>
+   <td>James Cameron</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>genre</td>
+   <td>Science Fiction</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>name</td>
+   <td>Avatar</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>https://youtu.be/0AY1XIkX7bY</td>
+   <td>Trailer</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="itemscope_id_атрибути"><code>itemscope</code> id атрибути</h3>
+
+<p>Коли ви використовуєте атрибут <code>itemscope</code> для елементу, створюється новий елемент. Новостворений елемент містить групу з пар ім'я-значення. For elements with an <code>itemscope</code> attribute and an <code>itemtype</code> attribute,  you may also specify an {{htmlattrxref("id")}} attribute. You can use the <code>id</code> attribute to set a global identifier for the new item. A global identifier allows the item to relate to other items found on pages across the Web.</p>
+
+<h3 id="Приклад">Приклад</h3>
+
+<p>There are four <code>itemscope</code> attributes in the following example. Each <code>itemscope</code> attribute sets the scope of its corresponding <code>itemptype</code> attribute. The <code>itemtype</code>s, <code>Recipe</code>, <code>AggregateRating</code>, and <code>NutritionInformation</code> in the following example are part of the <a href="www.schema.org">schema.org</a> structured data for a recipe, as specified by the first <code>itemptype</code>, http://schema.org/Recipe.</p>
+
+<pre class="brush: html">&lt;div itemscope itemtype="http://schema.org/Recipe"&gt;
+&lt;h2 itemprop="name"&gt;Grandma's Holiday Apple Pie&lt;/h2&gt;
+&lt;img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50"/&gt;
+&lt;p&gt;By &lt;span itemprop="author" itemscope itemtype="http://schema.org/Person"&gt;
+&lt;span itemprop="name"&gt;Carol Smith&lt;/p&gt;&lt;/span&gt;
+&lt;/span&gt;
+&lt;p&gt;Published: &lt;time datetime="2009-11-05" itemprop="datePublished"&gt;
+November 5, 2009&lt;/p&gt;&lt;/time&gt;
+&lt;span itemprop="description"&gt;This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.&lt;br&gt;&lt;/span&gt;
+ &lt;span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"&gt;
+ &lt;span itemprop="ratingValue"&gt;4.0&lt;/span&gt; stars based on &lt;span itemprop="reviewCount"&gt;35&lt;/span&gt; reviews&lt;br&gt;&lt;/span&gt;
+Prep time: &lt;time datetime="PT30M" itemprop="prepTime"&gt;30 min&lt;br&gt;&lt;/time&gt;
+ Cook time: &lt;time datetime="PT1H" itemprop="cookTime"&gt;1 hour&lt;br&gt;&lt;/time&gt;
+ Total time: &lt;time datetime="PT1H30M" itemprop="totalTime"&gt;1 hour 30 min&lt;br&gt;&lt;/time&gt;
+ Yield: &lt;span itemprop="recipeYield"&gt;1 9" pie (8 servings)&lt;br&gt;&lt;/span&gt;
+ &lt;span itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation"&gt;
+ Serving size: &lt;span itemprop="servingSize"&gt;1 medium slice&lt;br&gt;&lt;/span&gt;
+ Calories per serving: &lt;span itemprop="calories"&gt;250 cal&lt;br&gt;&lt;/span&gt;
+ Fat per serving: &lt;span itemprop="fatContent"&gt;12 g&lt;br&gt;&lt;/span&gt;
+&lt;/span&gt;
+&lt;p&gt;Ingredients:&lt;br&gt;
+  &lt;span itemprop="recipeIngredient"&gt;Thinly-sliced apples: 6 cups&lt;br&gt;&lt;/span&gt;
+  &lt;span itemprop="recipeIngredient"&gt;White sugar: 3/4 cup&lt;br&gt;&lt;/span&gt;
+ ... &lt;/p&gt;
+
+Directions: &lt;br&gt;
+  &lt;div itemprop="recipeInstructions"&gt;
+    1. Cut and peel apples&lt;br&gt;
+    2. Mix sugar and cinnamon. Use additional sugar for tart apples. &lt;br&gt;
+    ...
+  &lt;/div&gt;
+&lt;/div&gt; </pre>
+
+<h3 id="Results">Results</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<p>The following is an example rendering of the preceding code example.</p>
+
+<p>{{EmbedLiveSample('Example', '500', '550', '', 'Web/HTML/Global_attributes/itemscope')}}</p>
+
+<h4 id="Structured_data">Structured data</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="14">itemscope</td>
+   <td>itemtype</td>
+   <td colspan="2" rowspan="1">Recipe</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>name</td>
+   <td>Grandma's Holiday Apple Pie</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>image</td>
+   <td>https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>datePublished</td>
+   <td>2009-11-05</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>description</td>
+   <td>This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>prepTime</td>
+   <td>PT30M</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>cookTime</td>
+   <td>PT1H</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>totalTime</td>
+   <td>PT1H30M</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>recipeYield</td>
+   <td>1 9" pie (8 servings)</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>recipeIngredient</td>
+   <td>Thinly-sliced apples: 6 cups</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>recipeIngredient</td>
+   <td>White sugar: 3/4 cup</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>recipeInstructions</td>
+   <td>1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td colspan="2" rowspan="1">author [Person]</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>name</td>
+   <td>Carol Smith</td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="3">itemscope</td>
+   <td>itemprop[itemtype]</td>
+   <td colspan="2" rowspan="1">aggregateRating [AggregateRating]</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>ratingValue</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>reviewCount</td>
+   <td>35</td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="4">itemscope</td>
+   <td>itemprop[itemtype]</td>
+   <td colspan="2" rowspan="1">nutrition [NutritionInformation]</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>servingSize</td>
+   <td>1 medium slice</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>calories</td>
+   <td>250 cal</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>fatContent</td>
+   <td>12 g</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: A handy tool for extracting microdata structures from HTML is Google's<a href="https://developers.google.com/structured-data/testing-tool/"> Structured Data Testing Tool</a>. Try it on the HTML shown above.</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td><code><a href="https://html.spec.whatwg.org/multipage/microdata.html#items">itemscope</a></code></td>
+   <td></td>
+   <td>WG Note - No longer being actively developed</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>The following table details this feature's compatibility with popular browsers. </p>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Global_attributes">Other different global attributes</a></li>
+ <li>Other, microdata related, global attributes:
+  <ul>
+   <li>{{htmlattrxref("itemid")}}</li>
+   <li>{{htmlattrxref("itemprop")}}</li>
+   <li>{{htmlattrxref("itemref")}}</li>
+   <li>{{htmlattrxref("itemscope")}}</li>
+   <li>{{htmlattrxref("itemtype")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/uk/web/html/загальні_атрибути/lang/index.html b/files/uk/web/html/загальні_атрибути/lang/index.html
new file mode 100644
index 0000000000..18fe252e78
--- /dev/null
+++ b/files/uk/web/html/загальні_атрибути/lang/index.html
@@ -0,0 +1,90 @@
+---
+title: lang
+slug: Web/HTML/Загальні_атрибути/lang
+tags:
+  - HTML
+  - Довідка
+  - Загальні атрибути
+translation_of: Web/HTML/Global_attributes/lang
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><a href="/uk/docs/Web/HTML/Загальні_атрибути">Загальний атрибут</a> <strong><code>lang</code></strong> виозначує мову елемента: мову нередаговного вмісту або мову, якою користувач має писати в редаговних елементах (полях введення). Значення атрибута — один «тег мови» у форматі, визначеному стандартом <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Теги Ідентифікації Мов (BCP47)</em></a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-lang.html","tabbed-shorter")}}</div>
+
+<p class="hidden">Першокод цього прикладу збережено у репозиторії GitHub. Якщо ви хочете долучитися до створення чи поліпшення таких прикладів, пропонуйте нам свої зміни до репозиторію <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>.</p>
+
+<p>Якщо значенням атрибута є <em>порожній рядок</em> (<code>lang=""</code>), мова встановлюється як <em>невідома</em>; якщо тег мови несумісний із BCP47, мова встановлюється як <em>недійсна</em>.</p>
+
+<div class="note">
+<h2 id="Синтаксис_тегу_мови">Синтаксис тегу мови</h2>
+
+<p>Повний синтаксис BCP47 досить глибокий, щоб позначити надзвичайно специфічні мовні діалекти, але в більшості використання набагато простіше.</p>
+
+<p>Тег мови складається з мов підтегів, розділених дефісом, де кожен підтег вказує на певну властивість мови. Три найпоширеніші підтеги:</p>
+
+<dl>
+ <dt>Підтег мови</dt>
+ <dd>Обов'язковий. Код із 2 або 3 символів, який визначає основну мову, зазвичай написані у нижньому регістрі. Наприклад, код для англійської мови є <code>en</code>, а код для Бадеші є <code>bdz</code>.</dd>
+ <dt>Підтег сценарію</dt>
+ <dd>Необов'язково. Цей підтег визначає, яку систему запису використовувати для мови і завжди має довжину 4 символи, починається з великої літери. Наприклад, французька-шрифтом-Брайля буде <code>fr-Brai</code>, а <code>ja-Kana</code> це японська, що написана алфавітом Катакана. Якщо мова написана дуже типовим способом, як англійська латинським алфавітом, немає необхідності використовувати цей підтег.</dd>
+ <dt>Підтег регіону/області</dt>
+ <dd>Необов'язково. Цей підтег визначає діалект базової мови із певного місця розташування, і це або 2 ВЕЛИКІ літери, що відповідають коду країни, або 3 номери, що відповідають регіону без конкретної країни. Наприклад, <code>es-ES</code> це іспанська, якою говорять в Іспанії, а <code>es-013</code> це іспанська мова в Центральній Америці. “Міжнародний іспанський” просто буде <code>es</code>.</dd>
+</dl>
+
+<p>Підтег скрипта передує підтегу регіону, якщо вони обидва присутні — <code>ru-Cyrl-BY</code> це російська, написана кирилицею, якою говорять в Білорусі.</p>
+
+<p>Щоб знайти правильні коди підтегу для мови, спробуйте <a href="https://r12a.github.io/app-subtags/" rel="external">Пошук Підтегу Мови</a>.</p>
+</div>
+
+<p>Навіть якщо атрибут <strong>lang</strong> зазначено, його значення може бути знехтувано, бо атрибут <a href="/uk/docs/Web/HTML/Загальні_атрибути#attr-xml:lang"><strong>xml:lang</strong></a> має пріоритет.</p>
+
+<p>Для псевдо-класу CSS {{cssxref(":lang")}}, дві недійсні <em>(invalid)</em> назви мов є різні, якщо їхні імена відрізняються. Таким чином, <code>:lang(es)</code> відповідає обом <code>lang="es-ES"</code> і <code>lang="es-419"</code>, <code>:lang(xyzzy)</code> не відповідатиме <code>lang="xyzzy-Zorp!"</code>.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Немає змін від останнього знімку, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Знімок {{SpecName('HTML WHATWG')}}, без змін {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Знімок {{SpecName('HTML WHATWG')}}, поведінка з <code>xml:lang</code> та певний алгоритм визначення мови. Він також є справжнім глобальним атрибутом.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Підтримується у всіх елементах, крім {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, та {{HTMLElement("script")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.global_attributes.lang")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/HTML/Загальні_атрибути">Всі загальні атрибути</a></li>
+ <li><a href="/uk/docs/Web/HTTP/Headers/Content-Language">HTTP-заголовок Content-Language</a></li>
+</ul>
diff --git a/files/uk/web/html/загальні_атрибути/tabindex/index.html b/files/uk/web/html/загальні_атрибути/tabindex/index.html
new file mode 100644
index 0000000000..a081d178c2
--- /dev/null
+++ b/files/uk/web/html/загальні_атрибути/tabindex/index.html
@@ -0,0 +1,96 @@
+---
+title: tabindex
+slug: Web/HTML/Загальні_атрибути/tabindex
+tags:
+  - HTML
+  - Tab
+  - keyboard
+  - tabIndex
+  - Глобальні атрибути
+  - клавіатура
+translation_of: Web/HTML/Global_attributes/tabindex
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><strong><code>tabindex</code></strong> <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">глобальний атрибут</a> вказує, що його елемент може бути сфокусований, і коли саме він бере участь в послідовності навігації за допомогою клавіатури<span class="seoSummary"> (зазвичай за допомогою клавіші <kbd>Tab</kbd> , звідти і назва).</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<p>Він приймає в якості значення ціле позитивне або негативне число з різними наслідками в залежності від величини цого числа:</p>
+
+<ul>
+ <li><em>Негативне значення</em> (зазвичай <code>tabindex="-1"</code>) має на увазі, що елемент недоступний під час послідовної навігації за допомогою клавіатури, але може бути сфокусований за допомогою Javascript або за допомогою візуального інтерфейсу. Переважно рекомендується створювати доступні віджети за допомогою JavaScript.
+
+  <div class="note">
+  <p>Негативне значення корисне при наявності матеріалів поза екраном, які з'являються в певний момент події. Користувач не зможе сфокусувати будь-якої елемент з негативним значенням. Негативний <code>tabindex</code> блокує навігацію клавіатурою, але скрипт може виконати це за допомогою виклику <code>focus()</code> <a href="/en-US/docs/Web/API/HTMLElement/focus">method</a>.</p>
+  </div>
+ </li>
+ <li><code>tabindex="0"</code> передбачає, що елемент повинен приймати фокус при послідовній навігації за допомогою клавіатури, але його лад визначається системою розміщення у файлі додатка.</li>
+ <li><em>Позитивне значення</em> передбачає, що елемент повинен приймати фокус при послідовній навігації за допомогою клавіатури, при цьому його порядок визначається величиною значення числа. Тобто, <code>tabindex="4"</code> фокусується попереду <code>tabindex="5"</code>, але після <code>tabindex="3"</code>. Якщо кілька елементів мають одне й те саме позитивне значення <code>tabindex</code> то порядок їх розташування відносно один одного визначається за їх позицією в исходнику документа. Максимальне значення для tab-індекса становить 32767. <u>Якщо не вказано, він отримує значення за замовчуванням 0.</u>
+  <div class="warning">
+  <p>Уникайте використання <code>tabindex</code> зі значенням больше 0. Це значно заважає людям, які використовують допоміжні технології для навігації і роботи з вмістом веб-сторінки. Замість цього створіть документ з елементами в логічній послідовності.</p>
+  </div>
+ </li>
+</ul>
+
+<p>Якщо ви встановите атрибут <code>tabindex</code> з {{htmlelement("div")}}, то його нащадки не зможуть бути прокручені за допомогою клавіш клавіатури зі стрілками, якщо тільки ви не встановите <code>tabindex</code> на вміст також. <a href="https://jsfiddle.net/jainakshay/0b2q4Lgv/">Ознайомтеся з цією статтею, щоб зрозуміти ефект від <code>tabindex</code></a>.</p>
+
+<h2 id="Вимоги_доступності">Вимоги доступності</h2>
+
+<p>Уникайте використання атрибута <code>tabindex</code> в поєднанні з не-<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Interactive_content">інтерактивним вмістом</a> , щоб зробити щось, призначене для інтерактивної фокусування при введенні з клавіатури. Прикладом цього може служити використання елемента {{HTMLElement ("div")}} для опису кнопки, а не елементу {{HTMLElement ("button")}}.</p>
+
+<p>Інтерактивні компоненти, створені з використанням неінтерактивних елементів, у <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">дереві доступності</a> не відображаються. Це не дозволяє допоміжним технологіям керувати і маніпулювати цими компонентами. Вміст має бути описано семантично з використанням інтерактивних елементів ({{HTMLElement ("a")}}, {{HTMLElement ("button")}}, {{HTMLElement ("details")}}, {{HTMLElement ("input" )}}, {{HTMLElement ("select")}}, {{HTMLElement ("textarea")}}, і т.д.) і т.п.). Ці елементи мають вбудовані ролі і стани, що передають статус доступності. В іншому випадку ці компоненти повинні управлятися за допомогою <a href="/en-US/docs/Web/Accessibility/ARIA">ARIA</a>.</p>
+
+<ul>
+ <li><a href="https://developer.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/">Використання атрибута табіндекс | The Paciello Group</a></li>
+</ul>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "interaction.html#attr-tabindex", "tabindex")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Ніяких змін порівняно з останнім snapshot, {{SpecName('HTML5.1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#the-tabindex-attribute", "tabindex")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}, без змін від {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, атрибут наразі підтримується на всіх елементах  (global attributes).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Підтримується лише на {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці складена з структурованих даних. Якщо Ви хочете внести свій внесок в дані, відвідайте https://github.com/mdn/browser-compat-data і відправте нам запит на використання даних.</p>
+
+<p>{{Compat("html.global_attributes.tabindex")}}</p>
+
+<h2 id="Подивіться_також">Подивіться також</h2>
+
+<ul>
+ <li>Усі <a href="/en-US/docs/Web/HTML/Global_attributes">глобальні атрибути</a></li>
+ <li>{{domxref("HTMLElement.tabIndex")}} тотожний цьому атрибуту</li>
+ <li>Проблеми доступності з табіндексом: см. <a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html">Не використовуйте табіндекс більше 0.</a> від Adrian Roselli</li>
+</ul>
diff --git a/files/uk/web/html/режим_сумісності_й_стандартний_режим/index.html b/files/uk/web/html/режим_сумісності_й_стандартний_режим/index.html
new file mode 100644
index 0000000000..669eb1293b
--- /dev/null
+++ b/files/uk/web/html/режим_сумісності_й_стандартний_режим/index.html
@@ -0,0 +1,46 @@
+---
+title: Режим сумісності й стандартний режим
+slug: Web/HTML/Режим_сумісності_й_стандартний_режим
+translation_of: Web/HTML/Quirks_Mode_and_Standards_Mode
+---
+<p>In the old days of the web, pages were typically written in two versions: One for Netscape Navigator, and one for Microsoft Internet Explorer. When the web standards were made at W3C, browsers could not just start using them, as doing so would break most existing sites on the web. Browsers therefore introduced two modes to treat new standards compliant sites differently from old legacy sites.</p>
+
+<p>There are now three modes used by the layout engines in web browsers: quirks mode, almost standards mode, and full standards mode. In <strong>quirks mode</strong>, layout emulates nonstandard behavior in Navigator 4 and Internet Explorer 5. This is essential in order to support websites that were built before the widespread adoption of web standards. In <strong>full standards mode</strong>, the behavior is (hopefully) the behavior described by the HTML and CSS specifications. In <strong>almost standards mode</strong>, there are only a very small number of quirks implemented.</p>
+
+<h2 id="How_does_Mozilla_determine_which_mode_to_use.3F" name="How_does_Mozilla_determine_which_mode_to_use.3F">How do browsers determine which mode to use?</h2>
+
+<p>For <a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a> documents, browsers use a DOCTYPE in the beginning of the document to decide whether to handle it in quirks mode or standards mode. To ensure that your page uses full standards mode, make sure that your page has a DOCTYPE like in this example:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset=UTF-8&gt;
+    &lt;title&gt;Hello World!&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>The DOCTYPE shown in the example, <code>&lt;!DOCTYPE html&gt;</code>, is the simplest possible, and the one recommended by HTML5. Earlier versions of the HTML standard recommended other variants, but all existing browsers today will use full standards mode for this DOCTYPE, even the dated Internet Explorer 6. There are no valid reasons to use a more complicated DOCTYPE. If you do use another DOCTYPE, you may risk choosing one which triggers almost standards mode or quirks mode.</p>
+
+<p>Make sure you put the DOCTYPE right at the beginning of your HTML document. Anything before the DOCTYPE, like a comment or an XML declaration will trigger quirks mode in Internet Explorer 9 and older.</p>
+
+<p>In HTML5, the only purpose of the DOCTYPE is to activate full standards mode. Older versions of the HTML standard gave additional meaning to the DOCTYPE, but no browser has ever used the DOCTYPE for anything other than switching between quirks mode and standards mode.</p>
+
+<p>See also a detailed description of <a class="external" href="http://hsivonen.iki.fi/doctype/" title="http://hsivonen.iki.fi/doctype/">when different browsers choose various modes</a>.</p>
+
+<h3 id="XHTML">XHTML</h3>
+
+<p>If you serve your page as <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> using the <code>application/xhtml+xml</code> MIME type in the <code>Content-Type</code> HTTP header, you do not need a DOCTYPE to enable standards mode, as such documents always use full standards mode. Note however that serving your pages as <code>application/xhtml+xml</code> will cause Internet Explorer 8 to <a href="/en-US/docs/XHTML#Support" title="XHTML">show a download dialog</a> box for an unknown format instead of displaying your page, as the first version of Internet Explorer with support for XHTML is Internet Explorer 9.</p>
+
+<p>If you serve XHTML-like content using the <code>text/html</code> MIME type, browsers will read it as HTML, and you will need the DOCTYPE to use standards mode.</p>
+
+<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">How do I see which mode is used?</h2>
+
+<p>In Firefox, select <em>View Page Info</em> from the context menu, and look for <em>Render Mode</em>.</p>
+
+<p>In Internet Explorer, press <em>F12</em>, and look for <em>Document Mode</em>.</p>
+
+<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">What are the differences between the modes?</h2>
+
+<p>See the <a href="/en-US/docs/Mozilla_Quirks_Mode_Behavior" title="Mozilla_Quirks_Mode_Behavior">list of quirks</a> and <a href="/en-US/docs/Mozilla/Gecko_Almost_Standards_Mode" title="Gecko%27s_%22Almost_Standards%22_Mode">almost standards mode</a> for the differences between the modes.</p>
diff --git a/files/uk/web/http/basics_of_http/index.html b/files/uk/web/http/basics_of_http/index.html
new file mode 100644
index 0000000000..237dda5f72
--- /dev/null
+++ b/files/uk/web/http/basics_of_http/index.html
@@ -0,0 +1,51 @@
+---
+title: Basics of HTTP
+slug: Web/HTTP/Basics_of_HTTP
+tags:
+  - Guide
+  - HTTP
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/HTTP/Basics_of_HTTP
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP is a pretty extensible protocol. It relies on a few basic concepts like the notion of resources and URIs, a simple structure of messages, and a client-server structure for the communication flow. On top of these basic concepts, numerous extensions have appeared over the years, adding new functionality and new semantics by creating new HTTP methods or headers.</p>
+
+<h2 id="Articles">Articles</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/HTTP/Overview">Overview of HTTP</a></dt>
+ <dd>Describes what HTTP is and its role in the Web architecture, its position in the protocol stack.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Evolution of HTTP</a></dt>
+ <dd>HTTP was created in the early 1990s and has been extended several times. This article goes through its history and describes HTTP/0.9, HTTP/1.0, HTTP/1.1, and the modern HTTP/2 as well as minor novelties introduced over the years.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Negotiating)an_HTTP_version">Negotiating an HTTP version</a></dt>
+ <dd>Explains how a client and a server can negotiate a specific HTTP version and eventually upgrade the protocol version used.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Resources_and_URIs">Resources and URIs</a></dt>
+ <dd>A brief introduction of the notion of resources, identifiers, and locations on the Web.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Identifying resources on the Web</a></dt>
+ <dd>Describes how Web resources are referenced and how to locate them.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">Data URIs</a></dt>
+ <dd>A specific kind of URIs that directly embeds the resource it represents. Data URIs are very convenient, but have some caveats.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Resource_URLs">Resource URLs</a> {{Non-standard_Inline}}</dt>
+ <dd>Resource URLs, URLs prefixed with the <code>resource:</code> scheme, are used by Firefox and Firefox browser extensions to load resources internally, but some of the information is available to sites the browser connects to as well.</dd>
+ <dt>Separating identity and location of a resource: the Alt-Svc HTTP header</dt>
+ <dd>Most of the time identity and location of a Web resource are shared, this can be changed with the {{HTTPHeader("Alt-Svc")}} header.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME types</a></dt>
+ <dd>Since HTTP/1.0, different types of content can be transmitted. This article explains how this is done using the {{HTTPHeader("Content-Type")}} header and the MIME standard.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs">Choosing between www and non-www URLs</a></dt>
+ <dd>Advice on using a www-prefixed domain or not, this article explains the consequences of the choice as well as how to make it.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Flow_of_an_HTTP_session">Flow of an HTTP session</a></dt>
+ <dd>This fundamental article describes a typical HTTP session: what happens under the hood when you click on a link in your browser…</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Messages">HTTP Messages</a></dt>
+ <dd>HTTP Messages transmitted during requests or responses have a very clear structure; this introductory article describes this structure, its purpose and its possibilities.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Frame and message structure in HTTP_2">Frame and message structure in HTTP/2</a></dt>
+ <dd>HTTP/2 encapsulates and represents HTTP/1.x messages in a binary frame. This article explains the frame structure, its purpose and the way it is encoded.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Connection management in HTTP/1.x</a></dt>
+ <dd>HTTP/1.1 was the first version of HTTP to support persistent connection and pipelining. This article explains these two concepts.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_2">Connection management in HTTP/2</a></dt>
+ <dd>HTTP/2 completely revisited how connections are created and maintained: this article explains how HTTP frames allow multiplexing and solve the 'head-of-line' blocking problem of former HTTP versions.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Content_negotiation">Content Negotiation</a></dt>
+ <dd>HTTP introduces a set of headers, starting with <code>Accept-</code> as a way for a browser to announce the format, language, or encoding it prefers. This article explains how this advertisement happens, how the server is expected to react and how it will choose the most adequate response.</dd>
+</dl>
diff --git a/files/uk/web/http/basics_of_http/mime_types/index.html b/files/uk/web/http/basics_of_http/mime_types/index.html
new file mode 100644
index 0000000000..daa5d20b23
--- /dev/null
+++ b/files/uk/web/http/basics_of_http/mime_types/index.html
@@ -0,0 +1,367 @@
+---
+title: Типи MIME
+slug: Web/HTTP/Basics_of_HTTP/MIME_types
+translation_of: Web/HTTP/Basics_of_HTTP/MIME_types
+---
+<p><span class="seoSummary">A <strong>Multipurpose Internet Mail Extensions (MIME) type</strong> - тип багатоцільових розширень Інтернет-пошти - це стандарт, що вказує на характер і формат документа, файлу або набору байт.</span> Означений і стандартизований в <a href="https://tools.ietf.org/html/rfc6838">IETF RFC 6838</a>.</p>
+
+<p><a href="https://www.iana.org/">Internet Assigned Numbers Authority (IANA)</a>  <span class="tlid-translation translation"><span title="">відповідає за всі офіційні типи MIME, і Ви можете знайти найновіший і повний список на сторінці </span></span><a href="https://www.iana.org/assignments/media-types/media-types.xhtml">Media Types</a><span class="tlid-translation translation"><span title="">.</span></span></p>
+
+<div class="warning">
+<p><span class="tlid-translation translation"><span title="">Браузери використовують тип MIME, а <strong>не розширення файлу</strong>, для означення того, як потрібно обробляти URL.  Тому дуже важливо, щоб сервери надсилали правильний тип MIME у заголовку відповіді </span></span>{{HTTPHeader("Content-Type")}}<span class="tlid-translation translation"><span title="">.</span></span></p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Загальна_структура"><span class="tlid-translation translation"><span title="">Загальна структура</span></span></h3>
+
+<pre class="syntaxbox"><var>type</var>/<var>subtype</var></pre>
+
+<p><span class="tlid-translation translation"><span title="">Тип MIME складається з <em>типу </em>і <em>підтипу </em>- двох рядків, розділених </span></span><code>/</code><span class="tlid-translation translation"><span title="">.</span> <span title="">Пробіли не дозволяються.</span> <span title=""><em>Тип</em> представляє категорію і може бути <em>дискретним</em>(</span></span><em>discrete</em><span class="tlid-translation translation"><span title="">) або <em>багаточастинним </em>(</span></span><em>multipart</em> <span class="tlid-translation translation"><span title="">).</span> <span title="">Підтип специфічний для кожного типу.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Типи MIME нечутливі до регістру, але традиційно написані малими літерами.</span></span></p>
+
+<h3 id="Дискретні_(Discrete)_типи">Дискретні (Discrete) типи</h3>
+
+<pre class="syntaxbox">text/plain
+text/html
+text/javascript
+text/css
+image/jpeg
+image/png
+audio/mpeg
+audio/ogg
+audio/*
+video/mp4
+application/*
+application/json
+application/ecmascript
+application/octet-stream
+…</pre>
+
+<p><span class="tlid-translation translation"><span title=""><em>Дискретні </em>типи позначають категорію документа.</span> <span title="">Вони можуть бути одним з наступних:</span></span></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Тип</th>
+   <th scope="col">Опис</th>
+   <th scope="col">Приклад типових підтипів</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>text</code></td>
+   <td><span class="tlid-translation translation"><span title="">Будь-який документ, що містить текст і теоретично читається людиною</span></span></td>
+   <td><code>text/plain</code>, <code>text/html</code>, <code>text/css</code>, <code>text/javascript</code>, <code>text/markdown</code></td>
+  </tr>
+  <tr>
+   <td><code>image</code></td>
+   <td><span class="tlid-translation translation"><span title="">Будь-яке зображення.</span> <span title="">Відео сюди не включено, хоча анімовані зображення (наприклад, анімовані GIF) описуються також типом </span></span><code>image</code><span class="tlid-translation translation"><span title="">.</span></span></td>
+   <td><code>image/gif</code>, <code>image/png</code>, <code>image/jpeg</code>, <code>image/bmp</code>, <code>image/webp</code>, <code>image/vnd.microsoft.icon</code></td>
+  </tr>
+  <tr>
+   <td><code>audio</code></td>
+   <td><span class="tlid-translation translation"><span title="">Будь-який аудіофайл</span></span></td>
+   <td><code>audio/midi</code>, <code>audio/mpeg</code>, <code>audio/webm</code>, <code>audio/ogg</code>, <code>audio/wav</code></td>
+  </tr>
+  <tr>
+   <td><code>video</code></td>
+   <td><span class="tlid-translation translation"><span title="">Будь-який відеофайл</span></span></td>
+   <td><code>video/webm</code>, <code>video/ogg</code></td>
+  </tr>
+  <tr>
+   <td><code>application</code></td>
+   <td><span class="tlid-translation translation"><span title="">Будь-які двійкові дані, особливо дані, які будуть виконані або якось інтерпретовані.</span></span></td>
+   <td><code>application/octet-stream</code>, <code>application/pkcs12</code>, <code>application/vnd.mspowerpoint</code>, <code>application/xhtml+xml</code>, <code>application/xml</code>, <code>application/pdf</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="tlid-translation translation"><span title="">Для текстових документів без особливого підтипу слід використовувати </span></span><code>text/plain</code><span class="tlid-translation translation"><span title="">.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Аналогічно, для двійкових документів без певного або відомого підтипу слід використовувати </span></span><code>application/octet-stream</code><span class="tlid-translation translation"><span title="">.</span></span></p>
+
+<h3 id="Багаточастинні_типи">Багаточастинні типи</h3>
+
+<pre class="syntaxbox">multipart/form-data
+multipart/byteranges</pre>
+
+<p id="sect1"><em>Багаточастинні (Multipart</em>) типи <span class="tlid-translation translation"><span title="">позначають категорію документа, розбиту на частини, часто з різними типами MIME.</span> </span><span class="tlid-translation translation"><span title="">Вони є складеними з частин документами.</span> </span><span class="tlid-translation translation"><span title="">За винятком </span></span><code>multipart/form-data</code><span class="tlid-translation translation"><span title="">, що використовуються в методі </span></span>{{HTTPMethod("POST")}}<span class="tlid-translation translation"><span title=""> <a href="/uk/docs/Web/Guide/HTML/Forms">HTML-форм</a> і </span></span><code>multipart/byteranges</code><span class="tlid-translation translation"><span title="">, що використовуються для надсилання</span> <span title="">документа з </span></span>{{HTTPStatus("206")}} <code>Partial Content</code><span class="tlid-translation translation"><span title="">, HTTP не обробляє багаточастинні документи спеціальним чином: повідомлення передається в браузер (який, ймовірно, покаже вікно "Зберегти як", якщо він не знає, як відобразити документ.)</span></span></p>
+
+<h2 id="Важливі_для_веб-розробників_типи_MIME"><span class="tlid-translation translation"><span title="">Важливі для веб-розробників типи MIME </span></span></h2>
+
+<h3 id="applicationoctet-stream"><code>application/octet-stream</code></h3>
+
+<p><span class="tlid-translation translation"><span title="">Типово, це бінарні файли.</span> <span title="">Оскільки це значить <em>невідомий двійковий файл</em> (</span></span><em>unknown binary</em> file<span class="tlid-translation translation"><span title="">), браузери зазвичай не виконують його, або запитують, чи він повинен бути виконаний.</span> <span title="">Вони розглядають його, аналогічно заголовку </span></span>{{HTTPHeader("Content-Disposition")}}<span class="tlid-translation translation"><span title=""> який встановлений в значення </span></span><code>attachment</code><span class="tlid-translation translation"><span title="">, і пропонують діалогове вікно "Зберегти як".</span></span></p>
+
+<h3 id="textplain"><code>text/plain</code></h3>
+
+<p><span class="tlid-translation translation"><span title="">Це типово для текстових файлів.</span> <span title="">Навіть якщо це дійсно значить невідомий текстовий файл, браузери припускають, що вони можуть відображати його як текст.</span></span></p>
+
+<div class="note">
+<p><span class="tlid-translation translation"><span title="">Зверніть увагу, що </span></span><code>text/plain</code><span class="tlid-translation translation"><span title=""> не те саме що "один з текстових типів даних".</span> <span title="">Якщо браузер очікує конкретний тип текстових даних, то ймовірно, не вважатиме його відповідним до цього типу.</span> <span title="">Зокрема, якщо браузер завантажує </span></span><code>text/plain</code><span class="tlid-translation translation"><span title=""> файл з елемента </span></span>{{HTMLElement("link")}}<span class="tlid-translation translation"><span title="">, який оголошує файли CSS, то не буде розпізнавати його як дійсні файли CSS, якщо ті будуть представлені як </span></span><code>text/plain</code><span class="tlid-translation translation"><span title="">.</span> <span title="">Їх необхідно об'являти як MIME тип </span></span><code>text/css</code><span class="tlid-translation translation"><span title="">.</span></span></p>
+</div>
+
+<h3 id="textcss"><code>text/css</code></h3>
+
+<p><span class="tlid-translation translation"><span title="">Файли CSS, які використовуються для оформлення веб-сторінки, <strong>повинні </strong>бути надіслані з типом </span></span><code>text/css</code><span class="tlid-translation translation"><span title="">.</span> <span title="">Якщо сервер не розпізнає суфікс </span></span> <code>.css </code><span class="tlid-translation translation"><span title="">для файлів CSS, він може надіслати їх за допомогою MIME типів </span></span><code>text/plain</code><span class="tlid-translation translation"><span title=""> або </span></span><code>application/octet-stream</code><span class="tlid-translation translation"><span title="">.</span> У ньому випадку<span title=""> більшість браузерів їх не розпізнають як CSS і будуть ігнорувати.</span></span></p>
+
+<h3 id="texthtml"><code>text/html</code></h3>
+
+<p><span class="tlid-translation translation"><span title="">Весь HTML-вміст повинен подаватися з цим типом.</span> <span title="">На сьогодні, альтернативні типи MIME для XHTML (типу </span></span><code>application/xhtml+xml</code><span class="tlid-translation translation"><span title="">) в основному безкорисні.</span></span></p>
+
+<div class="note">
+<p><strong>Note:</strong> <span class="tlid-translation translation"><span title="">Примітка. Використовуйте типи </span></span><code>application/xml</code><span class="tlid-translation translation"><span title=""> або </span></span><code>application/xhtml+xml</code><span class="tlid-translation translation"><span title="">, якщо ви хочете, щоб правила XML-парсингу були жорсткі, до розділів </span></span><code><a href="/en-US/docs/Web/API/CDATASection">&lt;![CDATA[…]]&gt;</a></code> <span class="tlid-translation translation"><span title=""> та елементів не з HTML/SVG/MathML.</span></span></p>
+</div>
+
+<h3 id="textjavascript"><code>text/javascript</code></h3>
+
+<p><span class="tlid-translation translation"><span title="">У розділі <a href="https://html.spec.whatwg.org/multipage/scripting.html#scriptingLanguages">Мов сценаріїв</a> у стандарті HTML зазначено:</span></span></p>
+
+<blockquote>
+<p><span class="tlid-translation translation"><span title="">Сервери повинні використовувати </span></span><code>text/javascript</code><span class="tlid-translation translation"><span title=""> для ресурсів JavaScript.</span> <span title="">Сервери не повинні використовувати інші типи JavaScript MIME для ресурсів JavaScript і не повинні використовувати типи MIME, які не належать до JavaScript.</span></span></p>
+</blockquote>
+
+<p><span class="tlid-translation translation"><span title="">Інші типи MIME JavaScript, які не слід використовувати, визначені в </span></span><a href="https://mimesniff.spec.whatwg.org/">MIME Sniffing Standard</a><span class="tlid-translation translation"><span title=""> наступним чином:</span></span></p>
+
+<ul>
+ <li><code>application/javascript</code> {{deprecated_inline}}</li>
+ <li><code>application/ecmascript</code> {{deprecated_inline}}</li>
+ <li><code>application/x-ecmascript</code> {{non-standard_inline}} {{deprecated_inline}}</li>
+ <li><code>application/x-javascript</code> {{non-standard_inline}} {{deprecated_inline}}</li>
+ <li><code>text/ecmascript</code> {{deprecated_inline}}</li>
+ <li><code>text/javascript1.0</code> {{non-standard_inline}} {{deprecated_inline}}</li>
+ <li><code>text/javascript1.1</code> {{non-standard_inline}} {{deprecated_inline}}</li>
+ <li><code>text/javascript1.2</code> {{non-standard_inline}} {{deprecated_inline}}</li>
+ <li><code>text/javascript1.3</code> {{non-standard_inline}} {{deprecated_inline}}</li>
+ <li><code>text/javascript1.4</code> {{non-standard_inline}} {{deprecated_inline}}</li>
+ <li><code>text/javascript1.5</code> {{non-standard_inline}} {{deprecated_inline}}</li>
+ <li><code>text/jscript</code> {{non-standard_inline}} {{deprecated_inline}}</li>
+ <li><code>text/livescript</code> {{non-standard_inline}} {{deprecated_inline}}</li>
+ <li><code>text/x-ecmascript</code> {{non-standard_inline}} {{deprecated_inline}}</li>
+ <li><code>text/x-javascript</code> {{non-standard_inline}} {{deprecated_inline}}</li>
+</ul>
+
+<h3 id="Типи_для_зображень">Типи для зображень</h3>
+
+<p><span class="tlid-translation translation"><span title="">Лише декілька типів зображень </span></span><span class="tlid-translation translation"><span title="">є загальновизнаними, щоб бути безпечними для використання на веб-сторінці:</span></span></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Тип MIME</th>
+   <th scope="col">Тип зображення</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>image/gif</code></td>
+   <td>зображення GIF (стискання без втрат, замінений на PNG)</td>
+  </tr>
+  <tr>
+   <td><code>image/jpeg</code></td>
+   <td>зображення JPEG</td>
+  </tr>
+  <tr>
+   <td><code>image/png</code></td>
+   <td>зображення PNG</td>
+  </tr>
+  <tr>
+   <td><code>image/svg+xml</code></td>
+   <td>зображення SVG (векторні зображення)</td>
+  </tr>
+  <tr>
+   <td><code>image/x-icon</code>, <code>image/vnd.microsoft.icon</code><sup><a href="#Image_types-Footnote_1" title="Despite image/vnd.microsoft.icon being registered with IANA it is largely unsupported, and image/x-icon is being used instead.">[1]</a></sup></td>
+   <td>піктограми Windows</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="tlid-translation translation"><span title="">Існує дискусія щодо додавання до цього списку WebP (</span></span><code>image/webp</code><span class="tlid-translation translation"><span title="">), але виробники веб-браузерів обережно приймають його.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">У веб-документах можна знайти інші види зображень.</span> <span title="">Наприклад, багато веб-браузерів підтримують зображення ICO для </span></span>favicons, використовуючи <span class="tlid-translation translation"><span title="">MIME-тип </span></span><code>image/x-icon</code><span class="tlid-translation translation"><span title="">  .</span></span></p>
+
+<dl>
+ <dt id="Image_types-Footnote_1"><span class="tlid-translation translation"><span title="">Примітка</span></span> 1</dt>
+ <dd><span class="tlid-translation translation"><span title="">Незважаючи на те, що </span></span><code>image/vnd.microsoft.icon</code><span class="tlid-translation translation"><span title=""> <a href="https://www.iana.org/assignments/media-types/image/vnd.microsoft.icon">зареєстровано в IANA</a>, воно в основному не підтримується, а використовується </span></span><code>image/x-icon</code><span class="tlid-translation translation"><span title=""> .</span></span></dd>
+</dl>
+
+<h3 id="Аудіо-_та_відео-типи">Аудіо- та відео-типи</h3>
+
+<p><span class="tlid-translation translation"><span title="">Як і зображення, HTML не означує підтримувані типи для елементів </span></span>{{HTMLElement("audio")}}<span class="tlid-translation translation"><span title=""> і</span></span> {{HTMLElement("video")}} <span class="tlid-translation translation"><span title="">, тому лише деякі з них можуть використовуватися в Веб.</span> <span title=""><a href="/uk/docs/Web/HTML/Supported_media_formats">Формати мультимедіа, що підтримуються аудіо- та відео-елементами HTML</a> вказують як на застосовані кодеки, так і на контейнери, які можна для них використовувати.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Тип аудіовізуальних файлів MIME в основному вказує на формати контейнерів.</span> <span title="">Найбільш поширеними для Веб є:</span></span></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">тип MIME</th>
+   <th scope="col">тип Аудіо або відео</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/wave</code><br>
+    <code>audio/wav</code><br>
+    <code>audio/x-wav</code><br>
+    <code>audio/x-pn-wav</code></td>
+   <td><span class="tlid-translation translation"><span title="">Аудіофайл у форматі контейнера WAVE.</span> <span title="">Часто підтримується аудіокодек PCM (кодек WAVE "1"), інші кодеки мають обмежену підтримку (якщо є).</span></span></td>
+  </tr>
+  <tr>
+   <td><code>audio/webm</code></td>
+   <td><span class="tlid-translation translation"><span title="">Аудіофайл у форматі контейнера WebM.</span> <span title="">Найпоширенішими аудіокодеками є Vorbis і Opus.</span></span></td>
+  </tr>
+  <tr>
+   <td><code>video/webm</code></td>
+   <td><span class="tlid-translation translation"><span title="">Відеофайл, можливо з аудіо, у форматі контейнера WebM.</span> <span title="">VP8 і VP9 є найпоширенішими відеокодеками;</span> <span title="">Vorbis і Opus найбільш поширені аудіокодеки.</span></span></td>
+  </tr>
+  <tr>
+   <td><code>audio/ogg</code></td>
+   <td><span class="tlid-translation translation"><span title="">Аудіофайл у форматі контейнера OGG.</span> <span title="">Vorbis є найпоширенішим аудіокодеком, який використовується в такому контейнері.</span></span></td>
+  </tr>
+  <tr>
+   <td><code>video/ogg</code></td>
+   <td><span class="tlid-translation translation"><span title="">Відеофайл, можливо, зі звуком, у форматі контейнера OGG.</span> </span>Зазвичай використовується в ньому <span class="tlid-translation translation"><span title="">відеокодек </span></span>Theora, <span class="tlid-translation translation"><span title="">аудіокодек -</span></span> <span class="tlid-translation translation"> <span title="">Vorbis.</span></span></td>
+  </tr>
+  <tr>
+   <td><code>application/ogg</code></td>
+   <td><span class="tlid-translation translation"><span title="">Аудіо- або відеофайл у форматі контейнера OGG.</span> </span>Зазвичай використовується в ньому <span class="tlid-translation translation"><span title="">відеокодек </span></span>Theora, <span class="tlid-translation translation"><span title="">аудіокодек -</span></span> <span class="tlid-translation translation"> <span title="">Vorbis.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="multipartform-data"><code>multipart/form-data</code></h3>
+
+<p><span class="tlid-translation translation"><span title="">Тип </span></span><code>multipart/form-data</code><span class="tlid-translation translation"><span title=""> можна використовувати при відправленні з браузера на сервер значень завершеної <a href="/uk/docs/Web/Guide/HTML/Forms">форми HTML</a> .</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Як багаточастинний формат документа, він складається з різних частин, розділених межею (рядок, що починається з подвійного тире </span></span><code>--</code><span class="tlid-translation translation"><span title="">).</span> <span title="">Кожна частина є окремою сутністю з власними заголовками HTTP, </span></span> {{HTTPHeader("Content-Disposition")}}<span class="tlid-translation translation"><span title=""> і </span></span>{{HTTPHeader("Content-Type")}}<span class="tlid-translation translation"><span title=""> для полів завантаження файлів.</span></span></p>
+
+<pre class="syntaxbox">Content-Type: multipart/form-data; boundary=aBoundaryString
+(інші заголовки асоційовані з багаточастинним документом як цілим)
+
+--aBoundaryString
+Content-Disposition: form-data; name="myFile"; filename="img.jpg"
+Content-Type: image/jpeg
+
+(data)
+--aBoundaryString
+Content-Disposition: form-data; name="myField"
+
+(data)
+--aBoundaryString
+(more subparts)
+--aBoundaryString--
+
+</pre>
+
+<p>Наступна <code>&lt;form&gt;</code>:</p>
+
+<pre class="brush: html">&lt;form action="http://localhost:8000/" method="post" enctype="multipart/form-data"&gt;
+  &lt;label&gt;Name: &lt;input name="myTextField" value="Test"&gt;&lt;/label&gt;
+  &lt;label&gt;&lt;input type="checkbox" name="myCheckBox"&gt; Check&lt;/label&gt;
+  &lt;label&gt;Upload file: &lt;input type="file" name="myFile" value="test.txt"&gt;&lt;/label&gt;
+  &lt;button&gt;Send the file&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p><span class="tlid-translation translation"><span title="">надішле таке повідомлення:</span></span></p>
+
+<pre>POST / HTTP/1.1
+Host: localhost:8000
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-US,en;q=0.5
+Accept-Encoding: gzip, deflate
+Connection: keep-alive
+Upgrade-Insecure-Requests: 1
+Content-Type: multipart/form-data; boundary=---------------------------8721656041911415653955004498
+Content-Length: 465
+
+-----------------------------8721656041911415653955004498
+Content-Disposition: form-data; name="myTextField"
+
+Test
+-----------------------------8721656041911415653955004498
+Content-Disposition: form-data; name="myCheckBox"
+
+on
+-----------------------------8721656041911415653955004498
+Content-Disposition: form-data; name="myFile"; filename="test.txt"
+Content-Type: text/plain
+
+Simple file.
+-----------------------------8721656041911415653955004498--
+
+</pre>
+
+<h3 id="multipartbyteranges"><code>multipart/byteranges</code></h3>
+
+<p><span class="tlid-translation translation"><span title="">MIME тип </span></span><code>multipart/byteranges</code><span class="tlid-translation translation"><span title=""> використовується для відправлення часткових відповідей браузеру.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Коли відправлено код статусу </span></span>{{HTTPStatus("206")}}<code> Partial Content</code><span class="tlid-translation translation"><span title="">, цей тип MIME вказує, що документ складається з декількох частин, по одному для кожного із запитаних діапазонів.</span> <span title="">Як і інші типи багаточастинних файлів, </span></span>{{HTTPHeader("Content-Type")}} <span class="tlid-translation translation"><span title=""> використовує межу (</span></span><code>boundary</code><span class="tlid-translation translation"><span title="">) для розділення фрагментів.</span> <span title="">Кожен фрагмент має заголовок </span></span> {{HTTPHeader("Content-Type")}} <span class="tlid-translation translation"><span title=""> з його фактичним типом і діапазону </span></span>{{HTTPHeader("Content-Range")}}<span class="tlid-translation translation"><span title="">, який він представляє.</span></span></p>
+
+<pre><code>HTTP/1.1 206 Partial Content
+Accept-Ranges: bytes
+Content-Type: multipart/byteranges; boundary=3d6b6a416f9b5
+Content-Length: 385
+
+--3d6b6a416f9b5
+Content-Type: text/html
+Content-Range: bytes 100-200/1270
+
+eta http-equiv="Content-type" content="text/html; charset=utf-8" /&gt;
+    &lt;meta name="vieport" content
+--3d6b6a416f9b5
+Content-Type: text/html
+Content-Range: bytes 300-400/1270
+
+-color: #f0f0f2;
+        margin: 0;
+        padding: 0;
+        font-family: "Open Sans", "Helvetica
+--3d6b6a416f9b5--</code></pre>
+
+<h2 id="Важливість_встановлення_правильного_типу_MIME"><span class="tlid-translation translation"><span title="">Важливість встановлення правильного типу MIME</span></span></h2>
+
+<p><span class="tlid-translation translation"><span title="">Більшість веб-серверів надсилають нерозпізнані ресурси як MIME-тип </span></span><code>application/octet-stream</code><span class="tlid-translation translation"><span title="">.</span> <span title="">З міркувань безпеки більшість браузерів не дозволяють встановлювати типові користувацькі дії для таких ресурсів, змушуючи користувача зберігати його на диску для подальшого використання.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Деякі поширені неправильні конфігурації сервера:</span></span></p>
+
+<ul>
+ <li>
+  <p><span class="tlid-translation translation"><span title="">RAR-стислі файли.</span> <span title="">У цьому випадку ідеальним буде справжній тип вихідних файлів;</span> <span title="">це часто неможливо, оскільки файли .RAR можуть містити кілька ресурсів різних типів.</span> <span title="">У цьому випадку налаштуйте сервер для надсилання </span></span><code>application/x-rar-compressed</code><span class="tlid-translation translation"><span title="">.</span></span></p>
+ </li>
+ <li>
+  <p><span class="tlid-translation translation"><span title="">Аудіо та відео.</span> <span title="">У елементах </span></span>{{HTMLElement("video")}} <span class="tlid-translation translation"><span title="">або </span></span>{{HTMLElement("audio")}}<span class="tlid-translation translation"><span title=""> будуть відтворюватися лише ресурси з правильним типом MIME.</span> <span title="">Обов'язково <a href="/uk/docs/Web/HTML/Supported_media_formats">використовуйте правильний тип для аудіо та відео</a>.</span></span></p>
+ </li>
+ <li>
+  <p><span class="tlid-translation translation"><span title="">Власні типи файлів.</span> <span title="">Уникайте використання </span></span><code>application/octet-stream</code><span class="tlid-translation translation"><span title="">, оскільки більшість браузерів не дозволяють визначити для цього загального типу MIME типову для них поведінку (наприклад, "Відкрити в Word") .</span> <span title="">Конкретний тип, як </span></span><code>application/vnd.mspowerpoint</code><span class="tlid-translation translation"><span title="">, дозволяє користувачам автоматично відкривати такі файли у своєму виборі.</span></span></p>
+ </li>
+</ul>
+
+<h2 id="Авто-розпізнавання_MIME_(sniffing)">Авто-розпізнавання <span class="tlid-translation translation"><span title="">MIME </span></span><em>(sniffing)</em></h2>
+
+<p><span class="tlid-translation translation"><span title="">За відсутності типу MIME, або в деяких випадках, коли браузери вважають, що вони неправильні, вони можуть виконувати авто-розпізнавання </span></span><em>(MIME sniffing)</em><span class="tlid-translation translation"><span title=""> - вгадуючи правильний тип MIME, переглядаючи байти ресурсу.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Кожен браузер виконує авто-розпізнавання MIME по-різному і за різних обставин.</span> <span title="">(Наприклад, Safari розглядатиме розширення файлу в URL-адресі, якщо відправлений тип MIME непридатний.) Існують проблеми безпеки, оскільки деякі типи MIME являють собою виконуваний вміст.</span> <span title="">Сервери можуть запобігти авто-розпізнаванню MIME, відправивши заголовок </span></span>{{HTTPHeader("X-Content-Type-Options")}}<span class="tlid-translation translation"><span title="">.</span></span></p>
+
+<h2 id="Інші_способи_передачі_типу_документів"><span class="tlid-translation translation"><span title="">Інші способи передачі типу документів</span></span></h2>
+
+<p><span class="tlid-translation translation"><span title="">Типи MIME - не єдиний спосіб передати інформацію про тип документа:</span></span></p>
+
+<ul>
+ <li><span class="tlid-translation translation"><span title="">Іноді використовуються суфікси назви файлів, особливо в Microsoft Windows.</span> <span title="">Не всі операційні системи вважають ці суфікси значущими (наприклад, Linux і MacOS), і немає гарантії, що вони правильні.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Магічні числа.</span> <span title="">Синтаксис різних форматів дозволяє вивести тип файлу, розглядаючи їхню байтову структуру.</span> <span title="">Наприклад, GIF-файли починаються з шістнадцяткового значення </span></span><code>47 49 46 38 39</code><span class="tlid-translation translation"><span title=""> (</span></span><code>GIF89</code><span class="tlid-translation translation"><span title="">), а PNG-файли з </span></span><code>89 50 4E 47</code><span class="tlid-translation translation"><span title=""> (</span></span><code>.PNG</code><span class="tlid-translation translation"><span title="">).</span> <span title="">Не всі типи файлів мають магічні числа, тому це також не на 100%.</span></span></li>
+</ul>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types">Properly configuring server MIME types</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Supported_media_formats">Media formats supported by the HTML audio and video elements</a></li>
+ <li>
+  <p><a href="https://www.iana.org/assignments/media-types/application/json">https://www.iana.org/assignments/media-types/application/json</a></p>
+ </li>
+</ul>
+
+<div>{{HTTPSidebar}}</div>
diff --git a/files/uk/web/http/cors/index.html b/files/uk/web/http/cors/index.html
new file mode 100644
index 0000000000..80cb620485
--- /dev/null
+++ b/files/uk/web/http/cors/index.html
@@ -0,0 +1,550 @@
+---
+title: Cross-Origin Resource Sharing (CORS)
+slug: Web/HTTP/CORS
+tags:
+  - AJAX
+  - CORS
+  - HTTP
+  - Безпека
+translation_of: Web/HTTP/CORS
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary">Cross-Origin Resource Sharing ({{Glossary("CORS")}}, перехресний обмін ресурсами) — це механізм, що за допомогою {{Glossary("HTTP")}}-заголовків дає {{Glossary("Browser", "переглядачеві")}} дозвіл завантажувати ресурси з певного джерела на запит web-застосунка, отриманого з відмінного джерела.</span> Web-застосунок виконує <strong>перехресний HTTP-запит</strong> коли потребує ресурсів з джерела (домен, протокол чи порт), відмінного від його власного.</p>
+
+<p>Приклад перехресного запиту: JavaScript-код web-застосунка, розміщеного на <code>http://domain-a.com</code>, намагається за допомогою {{domxref("XMLHttpRequest", "AJAX")}}-запиту отримати <code>http://api.domain-b.com/data.json</code>.</p>
+
+<p>З міркувань безпеки, web-переглядачі припиняють всі перехресні HTTP-запити, здійснені кодом скриптів. Наприклад, <code>XMLHttpRequest</code> і <a href="/uk/docs/Web/API/Fetch_API">Fetch API</a> дотримуються <a href="/uk/docs/Web/Security/Same-origin_policy">правила одного джерела</a>. Це означає, що web-застосунок, отриманий з певного джерела, не може виконувати запити до HTTP-ресурсів з відмінного джерела (хіба якщо відповідь, що з нього надходить, міститиме належні CORS-заголовки).</p>
+
+<p><img alt="Localized CORS request principle" src="https://mdn.mozillademos.org/files/16490/CORS_principle.png" style="height: 643px; width: 925px;"></p>
+
+<p>Механізм CORS уможливлює безпечні перехресні запити та передання даних між web-переглядачами та web-серверами. Сучасні web-переглядачі запроваджують підтримку CORS до API, як-от <code>XMLHttpRequest</code> або <a href="/uk/docs/Web/API/Fetch_API">Fetch API</a>, щоб зробити виконання перехресних HTTP-запитів якнайбезпечнішим.</p>
+
+<h2 id="Для_кого_ця_стаття">Для кого ця стаття?</h2>
+
+<p>Для кожного, поза сумнівом.</p>
+
+<p>А саме для web-адміністраторів, а також розробників серверних та клієнських застосунків. Сучасні переглядачі запроваджують підтримку CORS з клієнтського боку (зокрема, обробку заголовків та обмеження неправомірних запитів), проте цей новий стандарт потребує, щоб сервер обробляв нові запити й додавав належні заголовки до відповідей. Докладніше про це оповідає стаття «<a href="/uk/docs/Web/HTTP/Server-Side_Access_Control">перехресні запити з погляду сервера</a>» для серверних розробників (зі зразками PHP-коду).</p>
+
+<h2 id="До_яких_запитів_стосується_CORS">До яких запитів стосується CORS?</h2>
+
+<p><a href="https://fetch.spec.whatwg.org/#http-cors-protocol">Цей стандарт</a> покликаний дозволити міжсайтові HTTP-запити для:</p>
+
+<ul>
+ <li>Міжсайтового користування {{domxref("XMLHttpRequest")}} та <a href="/uk/docs/Web/API/Fetch_API">Fetch</a> API, як зазначено вище;</li>
+ <li>Web-шрифтів (використання шрифтів з інших джерел за допомогою правила <code>@font-face</code> в CSS), тож <a href="https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements">сервер, який розміщує TrueType-шрифти, надає обмежений доступ</a> на їх завантаження лише певній множині сайтів;</li>
+ <li><a href="/uk/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">Текстури WebGL</a>;</li>
+ <li>Зображення чи кадри відео, намальовані на холсті за допомогою {{domxref("CanvasRenderingContext2D.drawImage()", "drawImage()")}}.</li>
+</ul>
+
+<p>Ця стаття описує перехресний обмін ресурсами взагалі та окремі HTTP-заголовки, що для цього необхідні.</p>
+
+<h2 id="Функціональний_огляд">Функціональний огляд</h2>
+
+<p>Стандарт перехресного обміну ресурсами працює за допомогою додавання нових HTTP заголовків, що дозволять серверу описати набір витоків, які мають дозвіл на читання інформації використовуючи веб-браузер. На додаток, для HTTP методів запиту, що можуть спричини  побічний еффект на серверні дані (в особливості, для HTTP методів, окрім {{HTTPMethod("GET")}}, або для {{HTTPMethod("POST")}} використання із певним <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME types</a>), специфікація передбачає, що браузерам "попередньо переглядають" запити, вимагають підтримуваних методів з сервера за допомогою HTTP {{HTTPMethod("OPTIONS")}} методів запиту, а потім після "схвалення" з сервера, надсилає фактичний запит методом фактичного запиту HTTP. Сервер також може повідомляти клієнтів чи "credentials" (включаючи Куки і HTTP Аутентифікаційні дані) повинні бути відправлені із запитом.</p>
+
+<p>У наступних розділах обговорюються сценарії, а також надається розбивка використовуваних заголовків HTTP.</p>
+
+<h2 id="Приклади_сценаріїв_контролю_доступу">Приклади сценаріїв контролю доступу</h2>
+
+<p>Тут ми представляємо три сценарії, які ілюструють, як працює перехресне походження ресурсів. У всіх цих прикладах використовується об’єкт {{domxref ("XMLHttpRequest")}}, який можна використовувати для виклику між сайтів у будь-якому підтримуваному браузері.</p>
+
+<p>Фрагменти JavaScript, що містяться в цих розділах (і запущені екземпляри серверного коду, який правильно обробляє ці запити на різних веб-сайтах), можна знайти "в дії" за адресою http://arunranga.com/examples/access-control/, і буде робота в браузерах, які підтримують крос-сайт {{domxref ("XMLHttpRequest")}}.</p>
+
+<p>Обговорення міжпохідного обміну ресурсами з точки зору сервера (включаючи фрагменти коду PHP) можна знайти в статті управління доступом на стороні сервера (CORS).</p>
+
+<h3 id="Прості_запити">Прості запити</h3>
+
+<p>Some requests don’t trigger a <a href="/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests">CORS preflight</a>. Those are called “simple requests” in this article, though the {{SpecName('Fetch')}} spec (which defines CORS) doesn’t use that term. A request that doesn’t trigger a <a href="/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests">CORS preflight</a>—a so-called “simple request”—is one that meets all the following conditions:</p>
+
+<ul>
+ <li>The only allowed methods are:
+  <ul>
+   <li>{{HTTPMethod("GET")}}</li>
+   <li>{{HTTPMethod("HEAD")}}</li>
+   <li>{{HTTPMethod("POST")}}</li>
+  </ul>
+ </li>
+ <li>Apart from the headers set automatically by the user agent (for example, {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}}, or <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">any of the other headers with names defined in the Fetch spec as a “forbidden header name”</a>), the only headers which are allowed to be manually set are <a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">those which the Fetch spec defines as being a “CORS-safelisted request-header”</a>, which are:
+  <ul>
+   <li>{{HTTPHeader("Accept")}}</li>
+   <li>{{HTTPHeader("Accept-Language")}}</li>
+   <li>{{HTTPHeader("Content-Language")}}</li>
+   <li>{{HTTPHeader("Content-Type")}} (but note the additional requirements below)</li>
+   <li>{{HTTPHeader("Last-Event-ID")}}</li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li>
+  </ul>
+ </li>
+ <li>The only allowed values for the {{HTTPHeader("Content-Type")}} header are:
+  <ul>
+   <li><code>application/x-www-form-urlencoded</code></li>
+   <li><code>multipart/form-data</code></li>
+   <li><code>text/plain</code></li>
+  </ul>
+ </li>
+ <li>No event listeners are registered on any {{domxref("XMLHttpRequestUpload")}} object used in the request; these are accessed using the {{domxref("XMLHttpRequest.upload")}} property.</li>
+ <li>No {{domxref("ReadableStream")}} object is used in the request.</li>
+</ul>
+
+<div class="note"><strong>Note:</strong> These are the same kinds of cross-site requests that web content can already issue, and no response data is released to the requester unless the server sends an appropriate header. Therefore, sites that prevent cross-site request forgery have nothing new to fear from HTTP access control.</div>
+
+<div class="note"><strong>Note:</strong> WebKit Nightly and Safari Technology Preview place additional restrictions on the values allowed in the {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, and {{HTTPHeader("Content-Language")}} headers. If any of those headers have ”non-standard” values, WebKit/Safari does not consider the request to meet the conditions for a “simple request”. What WebKit/Safari considers “non-standard” values for those headers is not documented except in the following WebKit bugs: <a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a>, and <a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a>. No other browsers implement those extra restrictions, because they’re not part of the spec.</div>
+
+<p>For example, suppose web content on domain <code class="plain">http://foo.example</code> wishes to invoke content on domain <code class="plain">http://bar.other</code>. Code of this sort might be used within JavaScript deployed on foo.example:</p>
+
+<pre class="brush: js notranslate" id="line1">var invocation = new XMLHttpRequest();
+var url = 'http://bar.other/resources/public-data/';
+
+function callOtherDomain() {
+  if(invocation) {
+    invocation.open('GET', url, true);
+    invocation.onreadystatechange = handler;
+    invocation.send();
+  }
+}
+</pre>
+
+<p>This will lead to a simple exchange between the client and the server, using CORS headers to handle the privileges:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14293/simple_req.png" style="height: 224px; width: 521px;"></p>
+
+<p>Let us look at what the browser will send to the server in this case, and let's see how the server responds:</p>
+
+<pre class="brush: shell;highlight:[10,16] notranslate">GET /resources/public-data/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Referer: http://foo.example/examples/access-control/simpleXSInvocation.html
+Origin: http://foo.example
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 00:23:53 GMT
+Server: Apache/2.0.61
+Access-Control-Allow-Origin: *
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Transfer-Encoding: chunked
+Content-Type: application/xml
+
+[XML Data]
+</pre>
+
+<p>Lines 1 - 10 are headers sent. The main HTTP request header of note here is the {{HTTPHeader("Origin")}} header on line 10 above, which shows that the invocation is coming from content on the domain <code class="plain">http://foo.example</code>.</p>
+
+<p>Lines 13 - 22 show the HTTP response from the server on domain <code class="plain">http://bar.other</code>. In response, the server sends back an {{HTTPHeader("Access-Control-Allow-Origin")}} header, shown above in line 16. The use of the {{HTTPHeader("Origin")}} header and of {{HTTPHeader("Access-Control-Allow-Origin")}} show the access control protocol in its simplest use. In this case, the server responds with a <code>Access-Control-Allow-Origin: *</code> which means that the resource can be accessed by <strong>any</strong> domain in a cross-site manner. If the resource owners at <code class="plain">http://bar.other</code> wished to restrict access to the resource to requests only from <code class="plain">http://foo.example</code>, they would send back:</p>
+
+<p><code class="plain">Access-Control-Allow-Origin: http://foo.example</code></p>
+
+<p>Note that now, no domain other than <code class="plain">http://foo.example</code> (identified by the ORIGIN: header in the request, as in line 10 above) can access the resource in a cross-site manner. The <code>Access-Control-Allow-Origin</code> header should contain the value that was sent in the request's <code>Origin</code> header.</p>
+
+<h3 id="Preflighted_requests">Preflighted requests</h3>
+
+<p>Unlike <a href="/en-US/docs/Web/HTTP/Access_control_CORS#Simple_requests">“simple requests” (discussed above)</a>, "preflighted" requests first send an HTTP request by the {{HTTPMethod("OPTIONS")}} method to the resource on the other domain, in order to determine whether the actual request is safe to send. Cross-site requests are preflighted like this since they may have implications to user data.</p>
+
+<p>In particular, a request is preflighted if <strong>any of the following conditions</strong> is true:</p>
+
+<ul>
+ <li><strong>If</strong> the request uses any of the following methods:
+
+  <ul>
+   <li>{{HTTPMethod("PUT")}}</li>
+   <li>{{HTTPMethod("DELETE")}}</li>
+   <li>{{HTTPMethod("CONNECT")}}</li>
+   <li>{{HTTPMethod("OPTIONS")}}</li>
+   <li>{{HTTPMethod("TRACE")}}</li>
+   <li>{{HTTPMethod("PATCH")}}</li>
+  </ul>
+ </li>
+ <li><strong>Or if</strong>, apart from the headers set automatically by the user agent (for example, {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}}, or <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">any of the other header with a name defined in the Fetch spec as a “forbidden header name”</a>), the request includes any headers other than <a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">those which the Fetch spec defines as being a “CORS-safelisted request-header”</a>, which are the following:
+  <ul>
+   <li>{{HTTPHeader("Accept")}}</li>
+   <li>{{HTTPHeader("Accept-Language")}}</li>
+   <li>{{HTTPHeader("Content-Language")}}</li>
+   <li>{{HTTPHeader("Content-Type")}} (but note the additional requirements below)</li>
+   <li>{{HTTPHeader("Last-Event-ID")}}</li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li>
+  </ul>
+ </li>
+ <li><strong>Or if</strong> the {{HTTPHeader("Content-Type")}} header has a value other than the following:
+  <ul>
+   <li><code>application/x-www-form-urlencoded</code></li>
+   <li><code>multipart/form-data</code></li>
+   <li><code>text/plain</code></li>
+  </ul>
+ </li>
+ <li><strong>Or if</strong> one or more event listeners are registered on an {{domxref("XMLHttpRequestUpload")}} object used in the request.</li>
+ <li><strong>Or if</strong> a {{domxref("ReadableStream")}} object is used in the request.</li>
+</ul>
+
+<div class="note"><strong>Note:</strong> WebKit Nightly and Safari Technology Preview place additional restrictions on the values allowed in the {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, and {{HTTPHeader("Content-Language")}} headers. If any of those headers have ”non-standard” values, WebKit/Safari preflights the request. What WebKit/Safari considers “non-standard” values for those headers is not documented except in the following WebKit bugs: <a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a>, and <a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a>. No other browsers implement those extra restrictions, because they’re not part of the spec.</div>
+
+<p>The following is an example of a request that will be preflighted.</p>
+
+<pre class="brush: js notranslate" id="line1">var invocation = new XMLHttpRequest();
+var url = 'http://bar.other/resources/post-here/';
+var body = '&lt;?xml version="1.0"?&gt;&lt;person&gt;&lt;name&gt;Arun&lt;/name&gt;&lt;/person&gt;';
+
+function callOtherDomain(){
+  if(invocation)
+    {
+      invocation.open('POST', url, true);
+      invocation.setRequestHeader('X-PINGOTHER', 'pingpong');
+      invocation.setRequestHeader('Content-Type', 'application/xml');
+      invocation.onreadystatechange = handler;
+      invocation.send(body);
+    }
+}
+
+......
+</pre>
+
+<p>In the example above, line 3 creates an XML body to send with the <code>POST</code> request in line 8. Also, on line 9, a "customized" (non-standard) HTTP request header is set (<code>X-PINGOTHER: pingpong</code>). Such headers are not part of the HTTP/1.1 protocol, but are generally useful to web applications. Since the request uses a Content-Type of <code>application/xml</code>, and since a custom header is set, this request is preflighted.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14289/prelight.png"></p>
+
+<p>(Note: as described below, the actual POST request does not include the Access-Control-Request-* headers; they are needed only for the OPTIONS request.)</p>
+
+<p>Let's take a look at the full exchange between client and server. The first exchange is the <em>preflight request/response</em>:</p>
+
+<pre class="brush: none notranslate">OPTIONS /resources/post-here/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Origin: http://foo.example
+Access-Control-Request-Method: POST
+Access-Control-Request-Headers: X-PINGOTHER, Content-Type
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:15:39 GMT
+Server: Apache/2.0.61 (Unix)
+Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Methods: POST, GET
+Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
+Access-Control-Max-Age: 86400
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 0
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Content-Type: text/plain
+</pre>
+
+<p>Once the preflight request is complete, the real request is sent:</p>
+
+<pre class="brush: none notranslate">POST /resources/post-here/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+X-PINGOTHER: pingpong
+Content-Type: text/xml; charset=UTF-8
+Referer: http://foo.example/examples/preflightInvocation.html
+Content-Length: 55
+Origin: http://foo.example
+Pragma: no-cache
+Cache-Control: no-cache
+
+&lt;?xml version="1.0"?&gt;&lt;person&gt;&lt;name&gt;Arun&lt;/name&gt;&lt;/person&gt;
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:15:40 GMT
+Server: Apache/2.0.61 (Unix)
+Access-Control-Allow-Origin: http://foo.example
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 235
+Keep-Alive: timeout=2, max=99
+Connection: Keep-Alive
+Content-Type: text/plain
+
+[Some GZIP'd payload]
+</pre>
+
+<p>Lines 1 - 12 above represent the preflight request with the {{HTTPMethod("OPTIONS")}} method. The browser determines that it needs to send this based on the request parameters that the JavaScript code snippet above was using, so that the server can respond whether it is acceptable to send the request with the actual request parameters. OPTIONS is an HTTP/1.1 method that is used to determine further information from servers, and is a {{Glossary("safe")}} method, meaning that it can't be used to change the resource. Note that along with the OPTIONS request, two other request headers are sent (lines 10 and 11 respectively):</p>
+
+<pre class="brush: none notranslate">Access-Control-Request-Method: POST
+Access-Control-Request-Headers: X-PINGOTHER, Content-Type
+</pre>
+
+<p>The {{HTTPHeader("Access-Control-Request-Method")}} header notifies the server as part of a preflight request that when the actual request is sent, it will be sent with a <code>POST</code> request method. The {{HTTPHeader("Access-Control-Request-Headers")}} header notifies the server that when the actual request is sent, it will be sent with a <code>X-PINGOTHER</code> and Content-Type custom headers. The server now has an opportunity to determine whether it wishes to accept a request under these circumstances.</p>
+
+<p>Lines 14 - 26 above are the response that the server sends back indicating that the request method (<code>POST</code>) and request headers (<code>X-PINGOTHER</code>) are acceptable. In particular, let's look at lines 17-20:</p>
+
+<pre class="brush: none notranslate">Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Methods: POST, GET
+Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
+Access-Control-Max-Age: 86400</pre>
+
+<p>The server responds with <code>Access-Control-Allow-Methods</code> and says that <code>POST</code> and <code>GET</code> are viable methods to query the resource in question. Note that this header is similar to the {{HTTPHeader("Allow")}} response header, but used strictly within the context of access control.</p>
+
+<p>The server also sends <code>Access-Control-Allow-Headers</code> with a value of "<code>X-PINGOTHER, Content-Type</code>", confirming that these are permitted headers to be used with the actual request. Like <code>Access-Control-Allow-Methods</code>, <code>Access-Control-Allow-Headers</code> is a comma separated list of acceptable headers.</p>
+
+<p>Finally, {{HTTPHeader("Access-Control-Max-Age")}} gives the value in seconds for how long the response to the preflight request can be cached for without sending another preflight request. In this case, 86400 seconds is 24 hours. Note that each browser has a<a href="/en-US/docs/Web/HTTP/Headers/Access-Control-Max-Age"> maximum internal value</a> that takes precedence when the <code>Access-Control-Max-Age</code> is greater.</p>
+
+<h4 id="Preflighted_requests_and_redirects">Preflighted requests and redirects</h4>
+
+<p>Most browsers currently don’t support following redirects for preflighted requests. If a redirect occurs for a preflighted request, most current browsers will report an error message such as the following.</p>
+
+<blockquote>
+<p>The request was redirected to 'https://example.com/foo', which is disallowed for cross-origin requests that require preflight</p>
+</blockquote>
+
+<blockquote>
+<p>Request requires preflight, which is disallowed to follow cross-origin redirect</p>
+</blockquote>
+
+<p>The CORS protocol originally required that behavior but <a href="https://github.com/whatwg/fetch/commit/0d9a4db8bc02251cc9e391543bb3c1322fb882f2">was subsquently changed to no longer require it</a>. However, most browsers have not yet implemented the change and still exhibit the behavior that was originally required.</p>
+
+<p>So until browsers catch up with the spec, you may be able to work around this limitation by doing one or both of the following:</p>
+
+<ul>
+ <li>change the server-side behavior to avoid the preflight and/or to avoid the redirect—if you have control over the server the request is being made to</li>
+ <li>change the request such that it is a <a href="#Simple_requests">simple request</a> that doesn’t cause a preflight</li>
+</ul>
+
+<p>But if it’s not possible to make those changes, then another way that may be possible is to this:</p>
+
+<ol>
+ <li>Make a <a href="/en-US/docs/Web/HTTP/Access_control_CORS#Simple_requests">simple request</a> (using <a href="/en-US/docs/Web/API/Response/url">Response.url</a> for the Fetch API, or <a href="/en-US/docs/Web/API/XMLHttpRequest/responseURL">XHR.responseURL</a>) to determine what URL the real preflighted request would end up at.</li>
+ <li>Make another request (the “real” request) using the URL you obtained from <a href="/en-US/docs/Web/API/Response/url">Response.url</a> or <a href="/en-US/docs/Web/API/XMLHttpRequest/responseURL">XMLHttpRequest.responseURL</a> in the first step.</li>
+</ol>
+
+<p>However, if the request is one that triggers a preflight due to the presence of the `Authorization` header in the request, you won’t be able to work around the limitation using the steps above. And you won’t be able to work around it at all unless you have control over the server the request is being made to.</p>
+
+<h3 id="Requests_with_credentials">Requests with credentials</h3>
+
+<p>The most interesting capability exposed by both {{domxref("XMLHttpRequest")}} or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> and CORS is the ability to make "credentialed" requests that are aware of <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a> and HTTP Authentication information. By default, in cross-site {{domxref("XMLHttpRequest")}} or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> invocations, browsers will <strong>not</strong> send credentials. A specific flag has to be set on the {{domxref("XMLHttpRequest")}} object or the {{domxref("Request")}} constructor when it is invoked.</p>
+
+<p>In this example, content originally loaded from <code class="plain">http://foo.example</code> makes a simple GET request to a resource on <code class="plain">http://bar.other</code> which sets Cookies. Content on foo.example might contain JavaScript like this:</p>
+
+<pre class="brush: js notranslate" id="line1">var invocation = new XMLHttpRequest();
+var url = 'http://bar.other/resources/credentialed-content/';
+
+function callOtherDomain(){
+  if(invocation) {
+    invocation.open('GET', url, true);
+    invocation.withCredentials = true;
+    invocation.onreadystatechange = handler;
+    invocation.send();
+  }
+}</pre>
+
+<p>Line 7 shows the flag on {{domxref("XMLHttpRequest")}} that has to be set in order to make the invocation with Cookies, namely the <code>withCredentials</code> boolean value. By default, the invocation is made without Cookies. Since this is a simple <code>GET</code> request, it is not preflighted, but the browser will <strong>reject</strong> any response that does not have the {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> header, and <strong>not</strong> make the response available to the invoking web content.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14291/cred-req.png" style="height: 223px; width: 521px;"></p>
+
+<p>Here is a sample exchange between client and server:</p>
+
+<pre class="brush: none notranslate">GET /resources/access-control-with-credentials/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Referer: http://foo.example/examples/credential.html
+Origin: http://foo.example
+Cookie: pageAccess=2
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:34:52 GMT
+Server: Apache/2.0.61 (Unix) PHP/4.4.7 mod_ssl/2.0.61 OpenSSL/0.9.7e mod_fastcgi/2.4.2 DAV/2 SVN/1.4.2
+X-Powered-By: PHP/5.2.6
+Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Credentials: true
+Cache-Control: no-cache
+Pragma: no-cache
+Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 106
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Content-Type: text/plain
+
+
+[text/plain payload]
+</pre>
+
+<p>Although line 11 contains the Cookie destined for the content on <code class="plain">http://bar.other</code>, if bar.other did not respond with an {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> (line 19) the response would be ignored and not made available to web content.</p>
+
+<h4 id="Credentialed_requests_and_wildcards">Credentialed requests and wildcards</h4>
+
+<p>When responding to a credentialed request, the server <strong>must</strong> specify an origin in the value of the <code>Access-Control-Allow-Origin</code> header, instead of specifying the "<code>*</code>" wildcard.</p>
+
+<p>Because the request headers in the above example include a <code>Cookie</code> header, the request would fail if the value of the <code>Access-Control-Allow-Origin</code> header were "*". But it does not fail: Because the value of the <code>Access-Control-Allow-Origin</code> header is "<code class="plain">http://foo.example</code>" (an actual origin) rather than the "<code>*</code>" wildcard, the credential-cognizant content is returned to the invoking web content.</p>
+
+<p>Note that the <code>Set-Cookie</code> response header in the example above also sets a further cookie. In case of failure, an exception—depending on the API used—is raised.</p>
+
+<h4 id="Third-party_cookies">Third-party cookies</h4>
+
+<p>Note that cookies set in CORS responses are subject to normal third-party cookie policies. In the example above, the page is loaded from <code>foo.example</code>, but the cookie on line 22 is sent by <code>bar.other</code>, and would thus not be saved if the user has configured their browser to reject all third-party cookies.</p>
+
+<h2 id="The_HTTP_response_headers">The HTTP response headers</h2>
+
+<p>This section lists the HTTP response headers that servers send back for access control requests as defined by the Cross-Origin Resource Sharing specification. The previous section gives an overview of these in action.</p>
+
+<h3 id="Access-Control-Allow-Origin">Access-Control-Allow-Origin</h3>
+
+<p>A returned resource may have one {{HTTPHeader("Access-Control-Allow-Origin")}} header, with the following syntax:</p>
+
+<pre class="brush: none notranslate">Access-Control-Allow-Origin: &lt;origin&gt; | *
+</pre>
+
+<p>The <code>origin</code> parameter specifies a URI that may access the resource. The browser must enforce this. For requests <strong>without</strong> credentials, the server may specify "*" as a wildcard, thereby allowing any origin to access the resource.</p>
+
+<p>For example, to allow http://mozilla.org to access the resource, you can specify:</p>
+
+<pre class="brush: none notranslate">Access-Control-Allow-Origin: http://mozilla.org</pre>
+
+<p>If the server specifies an origin host rather than "*", then it could also include Origin in the Vary response header to indicate to clients that server responses will differ based on the value of the Origin request header.</p>
+
+<h3 id="Access-Control-Expose-Headers">Access-Control-Expose-Headers</h3>
+
+<p>The {{HTTPHeader("Access-Control-Expose-Headers")}} header lets a server whitelist headers that browsers are allowed to access. For example:</p>
+
+<pre class="brush: none notranslate">Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header
+</pre>
+
+<p>This allows the <code>X-My-Custom-Header</code> and <code>X-Another-Custom-Header</code> headers to be exposed to the browser.</p>
+
+<h3 id="Access-Control-Max-Age">Access-Control-Max-Age</h3>
+
+<p>The {{HTTPHeader("Access-Control-Max-Age")}} header indicates how long the results of a preflight request can be cached. For an example of a preflight request, see the above examples.</p>
+
+<pre class="brush: none notranslate">Access-Control-Max-Age: &lt;delta-seconds&gt;
+</pre>
+
+<p>The <code>delta-seconds</code> parameter indicates the number of seconds the results can be cached.</p>
+
+<h3 id="Access-Control-Allow-Credentials">Access-Control-Allow-Credentials</h3>
+
+<p>The {{HTTPHeader("Access-Control-Allow-Credentials")}} header Indicates whether or not the response to the request can be exposed when the <code>credentials</code> flag is true. When used as part of a response to a preflight request, this indicates whether or not the actual request can be made using credentials. Note that simple <code>GET</code> requests are not preflighted, and so if a request is made for a resource with credentials, if this header is not returned with the resource, the response is ignored by the browser and not returned to web content.</p>
+
+<pre class="brush: none notranslate">Access-Control-Allow-Credentials: true
+</pre>
+
+<p><a class="internal" href="#Requests_with_credentials">Credentialed requests</a> are discussed above.</p>
+
+<h3 id="Access-Control-Allow-Methods">Access-Control-Allow-Methods</h3>
+
+<p>The {{HTTPHeader("Access-Control-Allow-Methods")}} header specifies the method or methods allowed when accessing the resource. This is used in response to a preflight request. The conditions under which a request is preflighted are discussed above.</p>
+
+<pre class="brush: none notranslate">Access-Control-Allow-Methods: &lt;method&gt;[, &lt;method&gt;]*
+</pre>
+
+<p>An example of a <a class="internal" href="#Preflighted_requests">preflight request is given above</a>, including an example which sends this header to the browser.</p>
+
+<h3 id="Access-Control-Allow-Headers">Access-Control-Allow-Headers</h3>
+
+<p>The {{HTTPHeader("Access-Control-Allow-Headers")}} header is used in response to a <a class="internal" href="#Preflighted_requests">preflight request</a> to indicate which HTTP headers can be used when making the actual request.</p>
+
+<pre class="brush: none notranslate">Access-Control-Allow-Headers: &lt;field-name&gt;[, &lt;field-name&gt;]*
+</pre>
+
+<h2 id="The_HTTP_request_headers">The HTTP request headers</h2>
+
+<p>This section lists headers that clients may use when issuing HTTP requests in order to make use of the cross-origin sharing feature. Note that these headers are set for you when making invocations to servers. Developers using cross-site {{domxref("XMLHttpRequest")}} capability do not have to set any cross-origin sharing request headers programmatically.</p>
+
+<h3 id="Origin">Origin</h3>
+
+<p>The {{HTTPHeader("Origin")}} header indicates the origin of the cross-site access request or preflight request.</p>
+
+<pre class="brush: none notranslate">Origin: &lt;origin&gt;
+</pre>
+
+<p>The origin is a URI indicating the server from which the request initiated. It does not include any path information, but only the server name.</p>
+
+<div class="note"><strong>Note:</strong> The <code>origin</code> can be the empty string; this is useful, for example, if the source is a <code>data</code> URL.</div>
+
+<p>Note that in any access control request, the {{HTTPHeader("Origin")}} header is <strong>always</strong> sent.</p>
+
+<h3 id="Access-Control-Request-Method">Access-Control-Request-Method</h3>
+
+<p>The {{HTTPHeader("Access-Control-Request-Method")}} is used when issuing a preflight request to let the server know what HTTP method will be used when the actual request is made.</p>
+
+<pre class="brush: none notranslate">Access-Control-Request-Method: &lt;method&gt;
+</pre>
+
+<p>Examples of this usage can be <a class="internal" href="#Preflighted_requests">found above.</a></p>
+
+<h3 id="Access-Control-Request-Headers">Access-Control-Request-Headers</h3>
+
+<p>The {{HTTPHeader("Access-Control-Request-Headers")}} header is used when issuing a preflight request to let the server know what HTTP headers will be used when the actual request is made.</p>
+
+<pre class="brush: none notranslate">Access-Control-Request-Headers: &lt;field-name&gt;[, &lt;field-name&gt;]*
+</pre>
+
+<p>Examples of this usage can be <a class="internal" href="#Preflighted_requests">found above</a>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch', '#cors-protocol', 'CORS')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>New definition; supplants <a href="https://www.w3.org/TR/cors/">W3C CORS</a> specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Access-Control-Allow-Origin")}}</p>
+
+<h3 id="Compatibility_notes">Compatibility notes</h3>
+
+<ul>
+ <li>Internet Explorer 8 and 9 expose CORS via the <code>XDomainRequest</code> object, but have a full implementation in IE 10.</li>
+ <li>While Firefox 3.5 introduced support for cross-site XMLHttpRequests and Web Fonts, certain requests were limited until later versions. Specifically, Firefox 7 introduced the ability for cross-site HTTP requests for WebGL Textures, and Firefox 9 added support for Images drawn on a canvas using <code>drawImage</code>.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="external" href="https://arunranga.com/examples/access-control/">Code Samples Showing <code>XMLHttpRequest</code> and Cross-Origin Resource Sharing</a></li>
+ <li><a href="https://github.com/jackblackevo/cors-jsonp-sample">Client-Side &amp; Server-Side (Java) sample for Cross-Origin Resource Sharing (CORS)</a></li>
+ <li><a class="internal" href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Cross-Origin Resource Sharing From a Server-Side Perspective (PHP, etc.)</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/cors/">Cross-Origin Resource Sharing specification</a></li>
+ <li>{{domxref("XMLHttpRequest")}}</li>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+ <li><a class="external" href="http://www.kendoui.com/blogs/teamblog/posts/11-10-03/using_cors_with_all_modern_browsers.aspx">Using CORS with All (Modern) Browsers</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/cors/">Using CORS - HTML5 Rocks</a></li>
+ <li><a href="https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141#43881141">Stack Overflow answer with “how to” info for dealing with common problems</a>:
+  <ul>
+   <li>How to avoid the CORS preflight</li>
+   <li>How to use a CORS proxy to get around <em>“No Access-Control-Allow-Origin header”</em></li>
+   <li>How to fix <em>“Access-Control-Allow-Origin header must not be the wildcard”</em></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/uk/web/http/index.html b/files/uk/web/http/index.html
new file mode 100644
index 0000000000..eb38dd6d92
--- /dev/null
+++ b/files/uk/web/http/index.html
@@ -0,0 +1,100 @@
+---
+title: HTTP
+slug: Web/HTTP
+tags:
+  - HTTP
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web
+  - 'l10n:priority'
+translation_of: Web/HTTP
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary"><span class="seoSummary"><strong><dfn>Протокол передачі гіпертексту (Hypertext Transfer Protocol - HTTP)</dfn></strong> це <a class="external" href="https://uk.wikipedia.org/wiki/Прикладний_рівень">прикладний</a> протокол для передачі гіпертекстових документів, таких як HTML.</span> Він був розроблений для зв'язку між веб-браузерами та веб серверами, проте може використовуватись і для інших цілей. HTTP дотримується класичної <a class="external" href="https://uk.wikipedia.org/wiki/Клієнт-серверна_архітектура">моделі клієнт-сервер</a>, коли клієнт відкриває з'єднання для здійснення запиту, а потім чекає поки отримає відповідь. HTTP - це <a href="https://en.wikipedia.org/wiki/Stateless_protocol">протокол без збереження стану</a>, що означає, що сервер не зберігає жодних даних (стану) між двома запитами. Хоча часто він базується на стеку протоколів TCP/IP, він може використовувати будь-який надійний протокол <a href="https://uk.wikipedia.org/wiki/Транспортний_рівень_моделі_OSI">транспортного рівня</a>, тобто протокол, який не втрачає "мовчки" повідомлення, як це робить UDP. <a href="https://en.wikipedia.org/wiki/Reliable_User_Datagram_Protocol">RUDP</a> - надійне оновлення UDP - є підходящою альтернативою.</p>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="Посібники">Посібники</h2>
+
+<p>Дізнайтеся, як використовувати HTTP завдяки підручникам та посібникам.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/HTTP/Overview">Overview of HTTP</a></dt>
+ <dd>The basic features of the client-server protocol: what it can do and its intended uses.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Caching">HTTP Cache</a></dt>
+ <dd>Caching is very important for fast Web sites. This article describes different methods of caching and how to use HTTP Headers to control them.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Cookies">HTTP Cookies</a></dt>
+ <dd>How cookies work is defined by <a class="external" href="http://tools.ietf.org/html/rfc6265">RFC 6265</a>. When serving an HTTP request, a server can send a <code>Set-Cookie</code> HTTP header with the response. The client then returns the cookie's value with every request to the same server in the form of a <code>Cookie</code> request header. The cookie can also be set to expire on a certain date, or restricted to a specific domain and path.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP Access Control (CORS)</a></dt>
+ <dd><strong>Cross-site HTTP requests</strong> are HTTP requests for resources from a <strong>different domain</strong> than the domain of the resource making the request. For instance, an HTML page from Domain A (<code>http://domaina.example/</code>) makes a request for an image on Domain B (<code>http://domainb.foo/image.jpg</code>) via the <code>img</code> element. Web pages today very commonly load cross-site resources, including CSS stylesheets, images, scripts, and other resources. CORS allows web developers to control how their site reacts to cross-site requests.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Evolution of HTTP</a></dt>
+ <dd>A brief description of the changes between the early versions of HTTP, to the modern HTTP/2 and beyond.</dd>
+ <dt><a href="https://wiki.mozilla.org/Security/Guidelines/Web_Security">Mozilla web security guidelines</a></dt>
+ <dd>A collection of tips to help operational teams with creating secure web applications.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/HTTP/Messages">HTTP Messages</a></dt>
+ <dd>Describes the type and structure of the different kind of messages of HTTP/1.x and HTTP/2.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Session">A typical HTTP session</a></dt>
+ <dd>Shows and explains the flow of a usual HTTP session.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Connection management in HTTP/1.x</a></dt>
+ <dd>Describes the three connection management models available in HTTP/1.x, their strengths, and their weaknesses.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Довідники">Довідники</h2>
+
+<p>Перегляньте детальну довідкову документацію HTTP.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/HTTP/Headers">HTTP Headers</a></dt>
+ <dd>HTTP message headers are used to describe a resource, or the behavior of the server or the client. Custom proprietary headers can be added using the <code>X-</code> prefix; others in an <a class="external" href="http://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a>, whose original content was defined in <a class="external" href="http://tools.ietf.org/html/rfc4229">RFC 4229</a>. IANA also maintains a <a class="external" href="http://www.iana.org/assignments/message-headers/prov-headers.html">registry of proposed new HTTP message headers</a>.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Methods">HTTP Request Methods</a></dt>
+ <dd>The different operations that can be done with HTTP: {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}}, and also less common requests like {{HTTPMethod("OPTIONS")}}, {{HTTPMethod("DELETE")}}, or {{HTTPMethod("TRACE")}}.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Response_codes">HTTP Status Response Codes</a></dt>
+ <dd>HTTP response codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirections, client errors, and servers errors.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy">CSP directives</a></dt>
+ <dd>The {{HTTPHeader("Content-Security-Policy")}} response header fields allows web site administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints.</dd>
+</dl>
+
+<h2 id="Інструменти_і_ресурси">Інструменти і ресурси</h2>
+
+<p>Helpful tools and resources for understanding and debugging HTTP.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Tools">Firefox Developer Tools</a></dt>
+ <dd><a href="/en-US/docs/Tools/Network_Monitor">Network monitor</a></dd>
+ <dt><a href="https://observatory.mozilla.org/">Mozilla Observatory</a></dt>
+ <dd>
+ <p>A project designed to help developers, system administrators, and security professionals configure their sites safely and securely.</p>
+ </dd>
+ <dt><a class="external" href="https://redbot.org/">RedBot</a></dt>
+ <dd>Tools to check your cache-related headers</dd>
+ <dt><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How Browsers Work</a></dt>
+ <dd>A very comprehensive article on browser internals and request flow through HTTP protocol. A MUST-READ for any web developer.</dd>
+</dl>
+</div>
+</div>
+
+<div id="gtx-anchor" style="position: absolute; left: 495.844px; top: 1100px; width: 300.938px; height: 41px;"></div>
+
+<div class="jfk-bubble gtx-bubble" style="left: -311px; top: -10px; opacity: 1;">
+<div class="jfk-bubble-content-id" id="bubble-9">
+<div id="gtx-host" style="max-width: 400px;"></div>
+</div>
+
+<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div>
+
+<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowdown" style="left: 130.5px;">
+<div class="jfk-bubble-arrowimplbefore"></div>
+
+<div class="jfk-bubble-arrowimplafter"></div>
+</div>
+</div>
diff --git a/files/uk/web/http/methods/get/index.html b/files/uk/web/http/methods/get/index.html
new file mode 100644
index 0000000000..cb677dc943
--- /dev/null
+++ b/files/uk/web/http/methods/get/index.html
@@ -0,0 +1,69 @@
+---
+title: GET
+slug: Web/HTTP/Methods/GET
+translation_of: Web/HTTP/Methods/GET
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="tlid-translation translation"><span title=""><strong>HTTP-метод</strong> </span></span><strong><code>GET</code> </strong><span class="tlid-translation translation"><span title="">запитує представлення зазначеного ресурсу.</span> <span title="">Запити, які використовують </span></span><code>GET</code><span class="tlid-translation translation"><span title="">, повинні лише отримувати дані.</span></span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Запит має тіло</th>
+   <td>Ні</td>
+  </tr>
+  <tr>
+   <th scope="row">Успішна відповідь має тіло</th>
+   <td>Так</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe")}}</th>
+   <td>Так</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent")}}</th>
+   <td>Так</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable")}}</th>
+   <td>Так</td>
+  </tr>
+  <tr>
+   <th scope="row">Дозволений в <a class="new" href="https://developer.mozilla.org/uk/docs/Web/Guide/HTML/Forms" rel="nofollow">HTML-формах</a></th>
+   <td>Так</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">GET /index.html
+</pre>
+
+<h2 id="Приклад">Приклад</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "GET", "4.3.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.methods.GET")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{HTTPHeader("Range")}}</li>
+</ul>
diff --git a/files/uk/web/http/methods/index.html b/files/uk/web/http/methods/index.html
new file mode 100644
index 0000000000..f70eecf38f
--- /dev/null
+++ b/files/uk/web/http/methods/index.html
@@ -0,0 +1,75 @@
+---
+title: HTTP-методи запиту
+slug: Web/HTTP/Methods
+tags:
+  - HTTP
+  - Methods
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/HTTP/Methods
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="tlid-translation translation"><span title="">Щоб вказати потрібну дію, яку необхідно зробити з ресурсом, в HTTP означено набір <strong>методів запиту</strong> (</span></span><strong>request methods</strong><span class="tlid-translation translation"><span title="">).</span> <span title="">Ці методи іноді називають HTTP-<em>дієсловами</em>, незважаючи на те, що вони можуть бути іменниками.</span> <span title="">Кожен з них реалізує іншу семантику, але вони мають деякі спільні риси, за якими їх поділяють на групи: наприклад</span> <span title="">методи запиту можуть бути</span></span> {{glossary("safe")}}<span class="tlid-translation translation"><span title="">, </span></span>{{glossary("idempotent")}}<span class="tlid-translation translation"><span title="">, або </span></span>{{glossary("cacheable")}}<span class="tlid-translation translation"><span title="">.</span></span></p>
+
+<dl>
+ <dt><code><a href="/uk/docs/Web/HTTP/Methods/GET">GET</a></code></dt>
+ <dd><span class="tlid-translation translation"><span title="">Метод </span></span><code>GET</code> <span class="tlid-translation translation"><span title="">запитує представлення вказаного ресурсу.</span> <span title="">Запити, які використовують </span></span><code>GET</code><span class="tlid-translation translation"><span title="">, повинні лише отримувати дані.</span></span></dd>
+ <dt><code><a href="/uk/docs/Web/HTTP/Methods/HEAD">HEAD</a></code></dt>
+ <dd><span class="tlid-translation translation"><span title="">Метод </span></span><code>HEAD</code> <span class="tlid-translation translation"><span title="">запитує відповідь, ідентичну запиту </span></span><code>GET</code><span class="tlid-translation translation"><span title="">, але без тіла.</span></span></dd>
+ <dt><code><a href="/uk/docs/Web/HTTP/Methods/POST">POST</a></code></dt>
+ <dd><span class="tlid-translation translation"><span title="">Метод </span></span><code>POST</code> <span class="tlid-translation translation"><span title=""> використовується для відправки об'єкта на вказаний ресурс, часто викликаючи зміну стану або побічних ефектів на сервері</span></span></dd>
+ <dt><code><a href="/uk/docs/Web/HTTP/Methods/PUT">PUT</a></code></dt>
+ <dd>
+ <p><span class="tlid-translation translation"><span title="">Метод </span></span><code>PUT</code> <span class="tlid-translation translation"><span title="">замінює всі поточні представлення цільового ресурсу на корисне навантаження, що вказане в запиті.</span></span></p>
+ </dd>
+ <dt><code><a href="/uk/docs/Web/HTTP/Methods/DELETE">DELETE</a></code></dt>
+ <dd><span class="tlid-translation translation"><span title="">Метод </span></span><code>DELETE</code> <span class="tlid-translation translation"><span title="">видаляє вказаний ресурс.</span></span></dd>
+ <dt><code><a href="/uk/docs/Web/HTTP/Methods/CONNECT">CONNECT</a></code></dt>
+ <dd>
+ <p><span class="tlid-translation translation"><span title="">Метод </span></span><code>CONNECT</code> <span class="tlid-translation translation"><span title="">встановлює тунель до сервера, ідентифікованого цільовим ресурсом.</span></span></p>
+ </dd>
+ <dt><code><a href="/uk/docs/Web/HTTP/Methods/OPTIONS">OPTIONS</a></code></dt>
+ <dd><span class="tlid-translation translation"><span title="">Метод </span></span><code>OPTIONS</code> <span class="tlid-translation translation"><span title="">використовується для опису варіантів зв'язку до цільового ресурсу.</span></span></dd>
+ <dt><code><a href="/uk/docs/Web/HTTP/Methods/TRACE">TRACE</a></code></dt>
+ <dd>
+ <p><span class="tlid-translation translation"><span title="">Метод </span></span><code>TRACE</code> <span class="tlid-translation translation"><span title="">виконує тест зворотного зв'язку по шляху до цільового ресурсу.</span></span></p>
+ </dd>
+ <dt><code><a href="/uk/docs/Web/HTTP/Methods/PATCH">PATCH</a></code></dt>
+ <dd><span class="tlid-translation translation"><span title="">Метод </span></span><code>PATCH</code> <span class="tlid-translation translation"><span title="">використовується для застосування часткових модифікацій в ресурсі.</span></span></dd>
+</dl>
+
+<h2 id="Специфікація">Специфікація</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Request methods", "4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+   <td>Specifies GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE.</td>
+  </tr>
+  <tr>
+   <td>{{RFC("5789", "Patch method", "2")}}</td>
+   <td>PATCH Method for HTTP</td>
+   <td>Specifies PATCH.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.methods")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a></li>
+</ul>
diff --git a/files/uk/web/http/methods/post/index.html b/files/uk/web/http/methods/post/index.html
new file mode 100644
index 0000000000..8ab0ccf386
--- /dev/null
+++ b/files/uk/web/http/methods/post/index.html
@@ -0,0 +1,118 @@
+---
+title: POST
+slug: Web/HTTP/Methods/POST
+translation_of: Web/HTTP/Methods/POST
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="tlid-translation translation"><span title=""><strong>HTTP</strong>-<strong>метод </strong></span></span><strong><code>POST</code> </strong><span class="tlid-translation translation"><span title="">надсилає дані на сервер.</span> <span title="">Тип тіла запиту позначається в заголовку </span></span>{{HTTPHeader("Content-Type")}} <span class="tlid-translation translation"><span title="">.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Різниця між </span></span><code>PUT</code> <span class="tlid-translation translation"><span title="">і </span></span>{{HTTPMethod("POST")}}<span class="tlid-translation translation"><span title=""> полягає в тому, що </span></span><code>PUT</code> <span class="tlid-translation translation"><span title="">є ідемпотентним: кілька послідовних викликів має той же ефект що і один раз (не дасть побічних ефектів). В противагу цьому, послідовні ідентичні виклики </span></span><code>POST</code> <span class="tlid-translation translation"><span title="">можуть мати додаткові ефекти,</span> <span title="">подібно проходження замовлення кілька разів.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Запит </span></span><code>POST</code> <span class="tlid-translation translation"><span title="">зазвичай надсилається через <a href="/uk/docs/Web/Guide/HTML/Forms">HTML-форму</a> і призводить до зміни на сервері.</span> <span title="">У цьому випадку тип вмісту вибирається шляхом введення відповідного рядка в атрибут </span></span>{{htmlattrxref("enctype", "form")}}<span class="tlid-translation translation"><span title=""> елемента </span></span>{{HTMLElement("form")}}, <span class="tlid-translation translation"><span title=""> або в атрибут</span></span> {{htmlattrxref("formenctype", "input")}} <span class="tlid-translation translation"><span title=""> елементів </span></span>{{HTMLElement("input") }} <span class="tlid-translation translation"><span title=""> або </span></span>{{HTMLElement("button")}}<span class="tlid-translation translation"><span title="">:</span></span></p>
+
+<ul>
+ <li><code>application/x-www-form-urlencoded</code><span class="tlid-translation translation"><span title="">: ключі та значення кодуються в кортежах ключ-значення, розділених символом </span></span><code>'&amp;'</code><span class="tlid-translation translation"><span title=""> з </span></span><code>'='</code> <span class="tlid-translation translation"><span title=""> між ключем і значенням.</span> <span title="">Цей тип не підходить для використання з двійковими даними, тому що тут н</span><span title="">е дозволяються не алфавітно-цифрові символи як в ключах так і в значеннях </span></span>{{glossary("percent-encoding", "percent encoded")}}<span class="tlid-translation translation"><span title="">, використовуйте замість цього </span></span> <code>multipart/form-data</code></li>
+ <li><code>multipart/form-data</code></li>
+ <li><code>text/plain</code></li>
+</ul>
+
+<p><span class="tlid-translation translation"><span title="">Коли запит </span></span><code>POST</code> <span class="tlid-translation translation"><span title="">відправляється за допомогою методу, відмінного від HTML-форми - як наприклад через </span></span>{{domxref("XMLHttpRequest")}}<span class="tlid-translation translation"><span title=""> - тіло може приймати будь-який тип.</span> <span title="">Як описано в специфікації HTTP 1.1, </span></span><code>POST</code> <span class="tlid-translation translation"><span title=""> призначений для забезпечення уніфікованого методу для виконання наступних функцій:</span></span></p>
+
+<ul>
+ <li><span class="tlid-translation translation"><span title="">Анотування існуючих ресурсів</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Розміщення повідомлення на дошці оголошень, групі новин, списку розсилки або подібній групі статей;</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Додавання нового користувача через реєстраційне вікно;</span></span></li>
+ <li> <span class="tlid-translation translation"><span title="">Надання блоку даних, таких як результат подання форми до процесу обробки даних;</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Розширення бази даних через операцію додавання.</span></span></li>
+</ul>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Запит має тіло</th>
+   <td>Так</td>
+  </tr>
+  <tr>
+   <th scope="row">Успішна відповідь має тіло</th>
+   <td>Так</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe")}}</th>
+   <td>Ні</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent")}}</th>
+   <td>Ні</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable")}}</th>
+   <td>Тільки у випадку, якщо включена інформація про свіжість</td>
+  </tr>
+  <tr>
+   <th scope="row">Дозволений в <a href="/uk/docs/Web/Guide/HTML/Forms">HTML-формах</a></th>
+   <td>Так</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">POST /index.html
+</pre>
+
+<h2 id="Приклад">Приклад</h2>
+
+<p><span class="tlid-translation translation"><span title="">Проста форма з використанням типового типу вмісту </span></span><code>application/x-www-form-urlencoded</code><span class="tlid-translation translation"><span title="">:</span></span></p>
+
+<pre class="line-numbers  language-html">POST / HTTP/1.1
+Host: foo.com
+Content-Type: application/x-www-form-urlencoded
+Content-Length: 13
+
+say=Hi&amp;to=Mom</pre>
+
+<p><span class="tlid-translation translation"><span title="">Форма, що використовує тип вмісту </span></span><code>multipart/form-data</code><span class="tlid-translation translation"><span title="">:</span></span></p>
+
+<pre>POST /test.html HTTP/1.1
+Host: example.org
+Content-Type: multipart/form-data;boundary="boundary"
+
+--boundary
+Content-Disposition: form-data; name="field1"
+
+value1
+--boundary
+Content-Disposition: form-data; name="field2"; filename="example.txt"
+
+value2</pre>
+
+<h2 id="Специфікація">Специфікація</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "POST", "4.3.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.methods.POST")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Type")}}</li>
+ <li>{{HTTPHeader("Content-Disposition")}}</li>
+</ul>
diff --git a/files/uk/web/http/methods/put/index.html b/files/uk/web/http/methods/put/index.html
new file mode 100644
index 0000000000..c66918862e
--- /dev/null
+++ b/files/uk/web/http/methods/put/index.html
@@ -0,0 +1,97 @@
+---
+title: PUT
+slug: Web/HTTP/Methods/PUT
+translation_of: Web/HTTP/Methods/PUT
+---
+<div>Метод HTTP запиту PUT створює новий ресурс або замінює представлення цільового ресурсу даними відправленими у тілі запиту.</div>
+
+<div></div>
+
+<p>Різниця між PUT та {{HTTPMethod("POST")}} полягає у тому, що PUT є ідемпотентним: викликаючи його один або кілька разів з одним набором даних продукується той самий результат (тобто немає сторонніх ефектів), у той час, коли, множинні виклики POST можуть мати сторонні ефекти.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Має тіло запиту</th>
+   <td>Так</td>
+  </tr>
+  <tr>
+   <th scope="row">Успішна відповідь має тіло</th>
+   <td>Ні</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe")}}</th>
+   <td>Ні</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent")}}</th>
+   <td>Так</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable")}}</th>
+   <td>Ні</td>
+  </tr>
+  <tr>
+   <th scope="row">Дозволений у <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML формах</a></th>
+   <td>Ні</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">PUT /new.html HTTP/1.1
+</pre>
+
+<h2 id="Приклад">Приклад</h2>
+
+<h3 id="Запит">Запит</h3>
+
+<pre>PUT /new.html HTTP/1.1
+Host: example.com
+Content-type: text/html
+Content-length: 16
+
+&lt;p&gt;Новий файл&lt;/p&gt;</pre>
+
+<h3 id="Відповіді">Відповіді</h3>
+
+<p>Якщо цільовий ресурс не містить відправляємої сутності і PUT запит створює її, сервер має проінформувати клієнтський додаток про створення, відправивши у відповідь {{HTTPStatus("201")}} (<code>Created</code>)</p>
+
+<pre class="newpage">HTTP/1.1 201 Created
+Content-Location: /new.html
+</pre>
+
+<p>Якщо цільовий ресурс містить відправляєму сутність і сутність була успішно мутована (тобто оновлена), відповідно до даних у тілі запиту, сервер має відправити у відповідь або {{HTTPStatus("200")}} (<code>OK</code>), або {{HTTPStatus("204")}} (<code>No Content</code>), щоб проінформувати клієнт про успішне завершення запиту.</p>
+
+<pre>HTTP/1.1 204 No Content
+Content-Location: /existing.html
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Назва</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "PUT", "4.3.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтрімка_браузерами">Підтрімка браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.methods.PUT")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{HTTPStatus("201")}}</li>
+ <li>{{HTTPStatus("204")}}</li>
+</ul>
diff --git a/files/uk/web/http/session/index.html b/files/uk/web/http/session/index.html
new file mode 100644
index 0000000000..96e10d914a
--- /dev/null
+++ b/files/uk/web/http/session/index.html
@@ -0,0 +1,171 @@
+---
+title: A typical HTTP session
+slug: Web/HTTP/Session
+translation_of: Web/HTTP/Session
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>В клієнт-серверних протоколах таких як  HTTP, сесії складаються з трьох фаз:</p>
+
+<ol>
+ <li>Клієнт встановлює TCP з'єднання  (або підходяще з'єднання якщо неможливо зробити це на TCP).</li>
+ <li>Клієнт посилає запит , і очікує відповіді .</li>
+ <li>Сервер обробляє запит , І посилає відповідь , надаючи код статусу  і відповідні дані</li>
+</ol>
+
+<p>Починаючи з версії HTTP/1.1, з'єднання більше не  закривається після завершення третьої фази, і клієнту тепер надається можливість подальшого запиту: це означає, що друга та третя фази  можуть тепер виконуватись будь-яку кількість разів.</p>
+
+<h2 id="Встановлення_зєданння">Встановлення з'єданння </h2>
+
+<p>В клієнт-серверних протоколах , клієнт встановлює з'єднання. Відкриття з'єднання в HTTP Означає втановлення з'єднанняна транспортному рівні , зазвичай використовується TCP.</p>
+
+<p>З TCP порт за замовчуванням, для HTTP сервера на будь-якому комп'ютері становить порт 80. Інші порти також можуть бути використані, як наприклад 8000 чи 8080. Для запиту сторінки URL повинен включати в себе домене ім'я та номер порту, але порт можна опустити якщо його номер 80. Дивись <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Identifying resources on the Web</a> для детальної інформації.</p>
+
+<div class="note"><strong>Note:</strong> The client-server model does not allow the server to send data to the client without an explicit request for it. To work around this problem, web developers use several techniques: ping the server periodically via the {{domxref("XMLHTTPRequest")}}, {{domxref("Fetch")}} APIs, using the <a href="/en/WebSockets" title="en/WebSockets">WebSockets API</a>, or similar protocols.</div>
+
+<h2 id="Надсилання_клієнтського_запиту">Надсилання клієнтського запиту </h2>
+
+<p>Once the connection is established, the user-agent can send the request (a user-agent is typically a web browser, but can be anything else, a crawler, for example). A client request consists of text directives, separated by CRLF (carriage return, followed by line feed), divided into three blocks:</p>
+
+<ol>
+ <li>The first line contains a request method followed by its parameters:
+  <ul>
+   <li>the path of the document, i.e. an absolute URL without the protocol or domain name</li>
+   <li>the HTTP protocol version</li>
+  </ul>
+ </li>
+ <li>Subsequent lines represent an HTTP header, giving the server information about what type of data is appropriate (e.g., what language, what MIME types), or other data altering its behavior (e.g., not sending an answer if it is already cached). These HTTP headers form a block which ends with an empty line.</li>
+ <li>The final block is an optional data block, which may contain further data mainly used by the POST method.</li>
+</ol>
+
+<h3 id="Приклади_запитів">Приклади запитів </h3>
+
+<p>Fetching the root page of developer.mozilla.org, i.e. <a class="linkification-ext external" href="/" title="Linkification: http://developer.mozilla.org/">http://developer.mozilla.org/</a>, and telling the server that the user-agent would prefer the page in French, if possible:</p>
+
+<pre>GET / HTTP/1.1
+Host: developer.mozilla.org
+Accept-Language: fr
+</pre>
+
+<p>Observe that final empty line, this separates the data block from the header block. As there is no <code>Content-Length</code> provided in an HTTP header, this data block is presented empty, marking the end of the headers, allowing the server to process the request the moment it receives this empty line.</p>
+
+<p>For example, sending the result of a form:</p>
+
+<pre>POST /contact_form.php HTTP/1.1
+Host: developer.mozilla.org
+Content-Length: 64
+Content-Type: application/x-www-form-urlencoded
+
+name=Joe%20User&amp;request=Send%20me%20one%20of%20your%20catalogue
+</pre>
+
+<h3 id="Види_методів">Види методів </h3>
+
+<p>HTTP defines a set of <a href="/en-US/docs/Web/HTTP/Methods">request methods</a> indicating the desired action to be performed upon a resource. Although they can also be nouns, these requests methods are sometimes referred as HTTP verbs. The most common requests are <code>GET</code> and <code>POST</code>:</p>
+
+<ul>
+ <li>The {{HTTPMethod("GET")}} method requests a data representation of the specified resource. Requests using <code>GET</code> should only retrieve data.</li>
+ <li>The {{HTTPMethod("POST")}} method sends data to a server so it may change its state. This is the method often used for <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a>.</li>
+</ul>
+
+<h2 id="Структура_відповіді_сервера">Структура  відповіді сервера </h2>
+
+<p>After the connected agent has sent its request, the web server processes it, and ultimately returns a response. Similar to a client request, a server response is formed of text directives, separated by CRLF, though divided into three blocks:</p>
+
+<ol>
+ <li>The first line, the <em>status line</em>, consists of an acknowledgment of the HTTP version used, followed by a status request (and its brief meaning in human-readable text).</li>
+ <li>Subsequent lines represent specific HTTP headers, giving the client information about the data sent (e.g. type, data size, compression algorithm used, hints about caching). Similarly to the block of HTTP headers for a client request, these HTTP headers form a block ending with an empty line.</li>
+ <li>The final block is a data block, which contains the optional data.</li>
+</ol>
+
+<h3 id="Приклади_відповідей">Приклади відповідей</h3>
+
+<p>Успішна відповідь :</p>
+
+<pre>HTTP/1.1 200 OK
+Content-Type: text/html; charset=utf-8
+Content-Length: 55743
+Connection: keep-alive
+Cache-Control: s-maxage=300, public, max-age=0
+Content-Language: en-US
+Date: Thu, 06 Dec 2018 17:37:18 GMT
+ETag: "2e77ad1dc6ab0b53a2996dfd4653c1c3"
+Server: meinheld/0.6.1
+Strict-Transport-Security: max-age=63072000
+X-Content-Type-Options: nosniff
+X-Frame-Options: DENY
+X-XSS-Protection: 1; mode=block
+Vary: Accept-Encoding,Cookie
+Age: 7
+
+
+&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;A simple webpage&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;Simple HTML5 webpage&lt;/h1&gt;
+  &lt;p&gt;Hello, world!&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Notification that the requested resource has permanently moved:</p>
+
+<pre>HTTP/1.1 301 Moved Permanently
+Server: Apache/2.4.37 (Red Hat)
+Content-Type: text/html; charset=utf-8
+Date: Thu, 06 Dec 2018 17:33:08 GMT
+Location: <a class="linkification-ext" href="../../../../" title="Linkification: https://developer.mozilla.org/">https://developer.mozilla.org/</a> <strong><em>(this is the</em><em> new link to the resource; it is expected that the user-agent will fetch it)</em></strong>
+Keep-Alive: timeout=15, max=98
+Accept-Ranges: bytes
+Via: Moz-Cache-zlb05
+Connection: Keep-Alive
+Content-Length: 325 <em>(<strong>the content contains a default page to display if the user-agent is not able to follow the link)</strong></em>
+
+
+&lt;!DOCTYPE html... <strong><em>(contains a site-customized page helping the user to find the missing resource)</em></strong>
+</pre>
+
+<p>Notification that the requested resource doesn't exist:</p>
+
+<pre>HTTP/1.1 404 Not Found
+Content-Type: text/html; charset=utf-8
+Content-Length: 38217
+Connection: keep-alive
+Cache-Control: no-cache, no-store, must-revalidate, max-age=0
+Content-Language: en-US
+Date: Thu, 06 Dec 2018 17:35:13 GMT
+Expires: Thu, 06 Dec 2018 17:35:13 GMT
+Server: meinheld/0.6.1
+Strict-Transport-Security: max-age=63072000
+X-Content-Type-Options: nosniff
+X-Frame-Options: DENY
+X-XSS-Protection: 1; mode=block
+Vary: Accept-Encoding,Cookie
+X-Cache: Error from cloudfront
+
+
+&lt;!DOCTYPE html... <strong><em>(contains a site-customized page helping the user to find the missing resource)</em></strong>
+</pre>
+
+<h3 id="Статус_коди_відповідей">Статус коди відповідей</h3>
+
+<p><a href="/en-US/docs/Web/HTTP/Status">HTTP response status codes</a> indicate if a specific HTTP request has been successfully completed. Responses are grouped into five classes: informational responses, successful responses, redirects, client errors, and servers errors.</p>
+
+<ul>
+ <li>{{HTTPStatus(200)}}: OK. The request has succeeded.</li>
+ <li>{{HTTPStatus(301)}}: Moved Permanently. This response code means that the URI of requested resource has been changed.</li>
+ <li>{{HTTPStatus(404)}}: Not Found. The server cannot find the requested resource.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Identifying resources on the Web</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Status">HTTP response status codes </a></li>
+</ul>
diff --git a/files/uk/web/http/status/100/index.html b/files/uk/web/http/status/100/index.html
new file mode 100644
index 0000000000..60b1d9d609
--- /dev/null
+++ b/files/uk/web/http/status/100/index.html
@@ -0,0 +1,46 @@
+---
+title: 100 Продовження
+slug: Web/HTTP/Status/100
+tags:
+  - 100 Continue
+  - 100 Продовжити
+  - HTTP
+translation_of: Web/HTTP/Status/100
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Код відповіді HTTP <strong><code>100 Continue</code></strong> інформаційного статусу вказує на те, що все до цих пір все в порядку, і клієнт повинен продовжувати запит або ігнорувати його, якщо він вже закінчений.</p>
+
+<p>Щоб перевірити заголовки запиту сервера, клієнт повинен відправити {{HTTPHeader ("Expect")}}<code>: 100-continue</code>, як заголовок у своєму початковому запиті, та отримати відповідний код стану <code>100 Continue</code> у відповіді до відправлення тіла запиту.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">100 Continue</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Назва</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "100 Continue" , "6.2.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці генерується з структурованих даних. Якщо ви хочете внести вклад до даних, будь ласка, перевірте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і надішліть нам запит.</p>
+
+<p>{{Compat("http.status.100")}}</p>
+
+<h2 id="Дивись_також">Дивись також</h2>
+
+<ul>
+ <li>{{HTTPHeader("Expect")}}</li>
+ <li>{{HTTPStatus(417)}}</li>
+</ul>
diff --git a/files/uk/web/http/status/101/index.html b/files/uk/web/http/status/101/index.html
new file mode 100644
index 0000000000..4248f1cdff
--- /dev/null
+++ b/files/uk/web/http/status/101/index.html
@@ -0,0 +1,46 @@
+---
+title: 101 Зміна протоколів
+slug: Web/HTTP/Status/101
+translation_of: Web/HTTP/Status/101
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Код відповіді HTTP <strong><code>101 Switching Protocols</code></strong> вказує на протокол, на який сервер перемикається за запитом клієнта, який надіслав повідомлення, включаючий заголовок запиту {{HTTPHeader ("Upgrade")}}.</p>
+
+<p>Сервер включає в цю відповідь заголовок відповіді {{HTTPHeader ("Upgrade")}} і вказує протокол, на який він перейшов. Процес детально описаний у статті <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism">Протокол механізму оновлення</a>.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">101 Switching Protocols</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Зміна протоколів може використовуватись з <a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a>.</p>
+
+<pre>HTTP/1.1 101 Switching Protocols
+Upgrade: websocket
+Connection: Upgrade</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Назва</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "101 Switching Protocol" , "6.2.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Дивись_також">Дивись також</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism">Protocol upgrade mechanism</a></li>
+ <li><a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a></li>
+ <li>{{HTTPHeader("Upgrade")}}</li>
+ <li>{{HTTPStatus("426")}} <code>Upgrade Required</code></li>
+</ul>
diff --git a/files/uk/web/http/status/200/index.html b/files/uk/web/http/status/200/index.html
new file mode 100644
index 0000000000..90157eba33
--- /dev/null
+++ b/files/uk/web/http/status/200/index.html
@@ -0,0 +1,54 @@
+---
+title: 200 OK
+slug: Web/HTTP/Status/200
+tags:
+  - 200 OK
+  - HTTP
+  - HTTP Статус
+translation_of: Web/HTTP/Status/200
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Код відповіді на статус успіху HTTP <strong><code>200 OK</code></strong> вказує на те, що запит виконано. За замовчуванням відповідь 200 - кешується.</p>
+
+<p>Значення успіху залежить від методу запиту HTTP:</p>
+
+<ul>
+ <li>{{HTTPMethod ("GET")}}: ресурс був вилучений і передається в тілі повідомлення.</li>
+ <li>{{HTTPMethod ("HEAD")}}: заголовки суб'єкта знаходяться в тілі повідомлення.</li>
+ <li>{{HTTPMethod ("POST")}}: ресурс, що описує результат дії, передається в тілі повідомлення.</li>
+ <li>{{HTTPMethod ("TRACE")}}: тіло повідомлення містить повідомлення запиту, отримане сервером.</li>
+</ul>
+
+<p>Успішний результат {{HTTPMethod ("PUT")}} або {{HTTPMethod ("DELETE")}} часто не є <code>200 OK</code>, але {{HTTPStatus ("204")}} <code>No Content</code> (або {{HTTPStatus ("201")}} <code>Created</code>, коли ресурс завантажується вперше).</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">200 OK</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Назва</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "200 OK" , "6.3.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці генерується з структурованих даних. Якщо ви хочете внести вклад до даних, будь ласка, перевірте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і надішліть нам запит.</p>
+
+<p>{{Compat("http.status.200")}}</p>
+
+<h2 id="Дивись_також">Дивись також</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li>
+</ul>
diff --git a/files/uk/web/http/status/201/index.html b/files/uk/web/http/status/201/index.html
new file mode 100644
index 0000000000..aa8c04df08
--- /dev/null
+++ b/files/uk/web/http/status/201/index.html
@@ -0,0 +1,46 @@
+---
+title: 201 Створений
+slug: Web/HTTP/Status/201
+tags:
+  - 201 Created
+  - 201 Створено
+  - HTTP
+  - HTTP Статус
+translation_of: Web/HTTP/Status/201
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Код відповіді HTTP <strong><code>201 Created</code></strong>  вказує на те, що запит був успішним і призвів до створення ресурсу. Новий ресурс ефективно створюється до відправки цієї відповіді і повертається в тілі повідомлення, його місце розташування - це URL-адреса запиту або вміст заголовка {{HTTPHeader ("Location")}}.</p>
+
+<p>Загальний випадок коду цього стану є результатом запиту {{HTTPMethod ("PUT")}}.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">201 Created</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Назва</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "201 Created" , "6.3.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_бразерами">Сумісність з бразерами</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці генерується з структурованих даних. Якщо ви хочете внести вклад до даних, будь ласка, перевірте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і надішліть нам запит.</p>
+
+<p>{{Compat("http.status.201")}}</p>
+
+<h2 id="Дивись_також">Дивись також</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li>
+</ul>
diff --git a/files/uk/web/http/status/203/index.html b/files/uk/web/http/status/203/index.html
new file mode 100644
index 0000000000..c1cfddde79
--- /dev/null
+++ b/files/uk/web/http/status/203/index.html
@@ -0,0 +1,45 @@
+---
+title: 203 Non-Authoritative Information
+slug: Web/HTTP/Status/203
+tags:
+  - HTTP
+  - Довідка
+  - Успішна відповідь
+  - код стану
+  - код стану HTTP
+translation_of: Web/HTTP/Status/203
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Стан відповіді HTTP <strong><code>203 Non-Authoritative Information</code></strong> <em>(<strong>укр.</strong> Не авторитетна інформація)</em> вказує на те, що запит був успішним, але додане корисне навантаження було змінено через {{Glossary("Proxy server", "проксі")}} трансформації, з відповіді {{HTTPStatus("200")}} (<code>OK</code>) сервера-джерела.</p>
+
+<p>Відповідь <code>203</code> схожа на значення <code><a href="/en-US/docs/Web/HTTP/Headers/Warning#Warning_codes">214</a></code>, що означає <code>Transformation Applied</code> <em>(<strong>укр.</strong> Застосовується трансформація)</em> коду заголовка {{HTTPHeader("Warning")}}, що має додаткову перевагу при застосуванні до відповідей з будь-яким кодом стану <em>(<strong>анг.</strong> status code)</em>.</p>
+
+<h2 id="Стан">Стан</h2>
+
+<pre class="syntaxbox notranslate">203 Non-Authoritative Information</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Назва</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "203 Non-Authoritative Information" , "6.3.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{HTTPStatus("200")}}</li>
+ <li>{{Glossary("Proxy server")}}</li>
+ <li>{{HTTPHeader("Warning")}}</li>
+</ul>
diff --git a/files/uk/web/http/status/204/index.html b/files/uk/web/http/status/204/index.html
new file mode 100644
index 0000000000..5762dec47a
--- /dev/null
+++ b/files/uk/web/http/status/204/index.html
@@ -0,0 +1,56 @@
+---
+title: 204 Без вмісту
+slug: Web/HTTP/Status/204
+tags:
+  - '204'
+  - 204 No Content
+  - 204 Без вмісту
+  - HTTP
+translation_of: Web/HTTP/Status/204
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Код відповіді HTTP <strong><code>204 No Content</code></strong> вказує на те, що запит виконано, але клієнтові не потрібно відходити від поточної сторінки. Відповідь 204 за замовчуванням кешується. В такому відгуку включений заголовок {{HTTPHeader ("ETag")}}.</p>
+
+<p>Спільним випадком використання є повернення <code>204</code> в результаті запиту {{HTTPMethod ("PUT")}}, оновлення ресурсу, без зміни поточного вмісту сторінки, що відображається користувачеві. Якщо ресурс створено, замість нього буде показано {{HTTPStatus ("201")}} <code>Created</code>. Якщо сторінка повинна бути змінена на нещодавно оновлену сторінку, замість нього слід використовувати {{HTTPStatus ("200")}}.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">204 No Content</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Назва</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "204 No Content" , "6.3.5")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.204")}}</p>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<ul>
+ <li>
+  <p>Хоча цей код стану призначений для опису відповіді без тіла, сервер може помилково включати дані, що слідують за заголовками. Протокол дозволяє користувальницьким агентам варіюватися в тому, як вони обробляють такі відповіді (<a href="https://github.com/httpwg/http11bis/issues/26">обговорення щодо цього тексту специфікації можна знайти тут</a>). Це спостерігається при стійких з'єднаннях, де недійсний орган може включати чіткий відповідь на наступний запит.</p>
+
+  <p>Apple Safari відкидає будь-які такі дані. Google Chrome і Microsoft Edge відкидають до чотирьох недійсних байтів, що передують дійсній відповіддю. Firefox допускає понад кілобайт недійсних даних, що передують дійсній відповіддю.</p>
+ </li>
+</ul>
+
+<h2 id="Дивись_також">Дивись також</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li>
+</ul>
diff --git a/files/uk/web/http/status/206/index.html b/files/uk/web/http/status/206/index.html
new file mode 100644
index 0000000000..9c4da2ba75
--- /dev/null
+++ b/files/uk/web/http/status/206/index.html
@@ -0,0 +1,84 @@
+---
+title: 206 Частковий вміст
+slug: Web/HTTP/Status/206
+tags:
+  - 206 Частковий зміст
+  - HTTP
+  - HTTP Статус
+  - Запити діапазону
+translation_of: Web/HTTP/Status/206
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Код статусу <strong>HTTP</strong> <strong><code>206 Partial Content</code></strong> вказує на те, що запит був успішним, і його тіло містить запитувані діапазони даних, як описано в заголовку {{HTTPHeader ("Range")}} запиту.</p>
+
+<p>Якщо є лише один діапазон, {{HTTPHeader ("Content-Type")}} всієї відповіді встановлюється на тип документа, а також {{HTTPHeader ("Content-Range")}}.</p>
+
+<p>Якщо декілька діапазонів відправлені назад, {{HTTPHeader ("Content-Type")}} встановлюється на <code>multipart/byteranges</code>, а кожен фрагмент охоплює один діапазон, з {{HTTPHeader ("Content-Range")}} і {{HTTPHeader ("Content-Type") }} описуючи його.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">206 Partial Content</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Відповідь, що містить один єдиний діапазон:</p>
+
+<pre class="newpage">HTTP/1.1 206 Partial Content
+Date: Wed, 15 Nov 2015 06:25:24 GMT
+Last-Modified: Wed, 15 Nov 2015 04:58:08 GMT
+Content-Range: bytes 21010-47021/47022
+Content-Length: 26012
+Content-Type: image/gif
+
+... 26012 bytes of partial image data ...</pre>
+
+<p>Відповідь, що містить кілька діапазонів:</p>
+
+<pre class="newpage">HTTP/1.1 206 Partial Content
+Date: Wed, 15 Nov 2015 06:25:24 GMT
+Last-Modified: Wed, 15 Nov 2015 04:58:08 GMT
+Content-Length: 1741
+Content-Type: multipart/byteranges; boundary=String_separator
+
+--String_separator
+Content-Type: application/pdf
+Content-Range: bytes 234-639/8000
+
+...the first range...
+--String_separator
+Content-Type: application/pdf
+Content-Range: bytes 4590-7999/8000
+
+...the second range
+--String_separator--</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7233", "206 Partial Content" , "4.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Range Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці генерується з структурованих даних. Якщо ви хочете внести вклад до даних, будь ласка, перевірте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і надішліть нам запит.</p>
+
+<p>{{Compat("http.status.206")}}</p>
+
+<h2 id="Дивись_також">Дивись також</h2>
+
+<ul>
+ <li>{{HTTPHeader("If-Range")}}</li>
+ <li>{{HTTPHeader("Range")}}</li>
+ <li>{{HTTPHeader("Content-Range")}}</li>
+ <li>{{HTTPHeader("Content-Type")}}</li>
+</ul>
diff --git a/files/uk/web/http/status/418/index.html b/files/uk/web/http/status/418/index.html
new file mode 100644
index 0000000000..176fa6f000
--- /dev/null
+++ b/files/uk/web/http/status/418/index.html
@@ -0,0 +1,39 @@
+---
+title: 418 I'm a teapot
+slug: Web/HTTP/Status/418
+translation_of: Web/HTTP/Status/418
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Код помилки HTTP <strong><code>418 I'm a teapot</code></strong> повідомляє, що сервер відмовляється готувати каву у зв'язку з тим, що він чайник. Ця помилка посилається на Hyper Text Coffee Pot Control Protocol (Гіпертекстовий протокол управління кавниками), що був першоквітневим жартом у 1998.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">418 I'm a teapot</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Назва</th>
+  </tr>
+  <tr>
+   <td>{{RFC("2324", "418 I'm a teapot" , "2.3.2")}}</td>
+   <td>Hyper Text Coffee Pot Control Protocol (HTCPCP/1.0): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.418")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Hyper Text Coffee Pot Control Protocol", "Wikipedia: Hyper Text Coffee Pot Control Protocol")}}</li>
+</ul>
diff --git a/files/uk/web/http/status/422/index.html b/files/uk/web/http/status/422/index.html
new file mode 100644
index 0000000000..be92381f02
--- /dev/null
+++ b/files/uk/web/http/status/422/index.html
@@ -0,0 +1,41 @@
+---
+title: 422 Unprocessable Entity
+slug: Web/HTTP/Status/422
+tags:
+  - HTTP
+  - HTTP Status Code
+  - WebDAV
+  - Довідка
+  - Клієнтська помилка
+  - Код відповіді
+  - Помилка клієнта
+translation_of: Web/HTTP/Status/422
+---
+<p>{{HTTPSidebar}}</p>
+
+<p>Код відповіді HyperText Transfer Protocol (HTTP) <code><strong>422 Unprocessable Entity</strong></code> означає, що сервер розуміє тип сутності запиту, і синтаксис цієї сутності вірний, проте опрацювати вміщені в неї інструкції неможливо.</p>
+
+<div class="warning">
+<p><strong>Важливо</strong>: клієнт не повинен повторювати цей запит без його модифікації.</p>
+</div>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">422 Unprocessable Entity</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікації</th>
+   <th scope="col">Назва</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("4918", "422 Unprocessable Entity" , "11.2")}}</td>
+   <td>HTTP Extensions for Web Distributed Authoring and Versioning (WebDAV)</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/uk/web/http/status/index.html b/files/uk/web/http/status/index.html
new file mode 100644
index 0000000000..e490502369
--- /dev/null
+++ b/files/uk/web/http/status/index.html
@@ -0,0 +1,171 @@
+---
+title: HTTP response status codes
+slug: Web/HTTP/Status
+tags:
+  - HTTP
+  - NeedsTranslation
+  - Status codes
+  - TopicStub
+translation_of: Web/HTTP/Status
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP response status codes indicate whether a specific <a href="/en-US/docs/Web/HTTP">HTTP</a> request has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirects, client errors, and servers errors. Status codes are defined by <a href="https://tools.ietf.org/html/rfc2616#section-10">section 10 of RFC 2616</a>.</p>
+
+<h2 id="Information_responses">Information responses</h2>
+
+<dl>
+ <dt>{{HTTPStatus(100, "100 Continue")}}</dt>
+ <dd>This interim response indicates that everything so far is OK and that the client should continue with the request or ignore it if it is already finished.</dd>
+ <dt>{{HTTPStatus(101, "101 Switching Protocol")}}</dt>
+ <dd>This code is sent in response to an {{HTTPHeader("Upgrade")}} request header by the client, and indicates the protocol the server is switching too.</dd>
+ <dt>{{HTTPStatus(102, "102 Processing")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>This code indicates that the server has received and is processing the request, but no response is available yet.</dd>
+</dl>
+
+<h2 id="Successful_responses">Successful responses</h2>
+
+<dl>
+ <dt>{{HTTPStatus(200, "200 OK")}}</dt>
+ <dd>The request has succeeded. The meaning of a success varies depending on the HTTP method:<br>
+ GET: The resource has been fetched and is transmitted in the message body.<br>
+ HEAD: The entity headers are in the message body.<br>
+ POST: The resource describing the result of the action is transmitted in the message body.<br>
+ TRACE: The message body contains the request message as received by the server</dd>
+ <dt>{{HTTPStatus(201, "201 Created")}}</dt>
+ <dd>The request has succeeded and a new resource has been created as a result of it. This is typically the response sent after a PUT request.</dd>
+ <dt>{{HTTPStatus(202, "202 Accepted")}}</dt>
+ <dd>The request has been received but not yet acted upon. It is non-committal, meaning that there is no way in HTTP to later send an asynchronous response indicating the outcome of processing the request. It is intended for cases where another process or server handles the request, or for batch processing.</dd>
+ <dt>{{HTTPStatus(203, "203 Non-Authoritative Information")}}</dt>
+ <dd>This response code means returned meta-information set is not exact set as available from the origin server, but collected from a local or a third party copy. Except this condition, 200 OK response should be preferred instead of this response.</dd>
+ <dt>{{HTTPStatus(204, "204 No Content")}}</dt>
+ <dd>There is no content to send for this request, but the headers may be useful. The user-agent may update its cached headers for this resource with the new ones.</dd>
+ <dt>{{HTTPStatus(205, "205 Reset Content")}}</dt>
+ <dd>This response code is sent after accomplishing request to tell user agent reset document view which sent this request.</dd>
+ <dt>{{HTTPStatus(206, "206 Partial Content")}}</dt>
+ <dd>This response code is used because of range header sent by the client to separate download into multiple streams.</dd>
+ <dt>{{HTTPStatus(207, "207 Multi-Status")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>A Multi-Status response conveys information about multiple resources in situations where multiple status codes might be appropriate.</dd>
+ <dt>{{HTTPStatus(208, "208 Multi-Status")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>Used inside a DAV: propstat response element to avoid enumerating the internal members of multiple bindings to the same collection repeatedly.</dd>
+ <dt>{{HTTPStatus(226, "226 IM Used")}} (<a href="https://tools.ietf.org/html/rfc3229">HTTP Delta encoding</a>)</dt>
+ <dd>The server has fulfilled a GET request for the resource, and the response is a representation of the result of one or more instance-manipulations applied to the current instance.</dd>
+</dl>
+
+<h2 id="Redirection_messages">Redirection messages</h2>
+
+<dl>
+ <dt>{{HTTPStatus(300, "300 Multiple Choice")}}</dt>
+ <dd>The request has more than one possible responses. User-agent or user should choose one of them. There is no standardized way to choose one of the responses.</dd>
+ <dt>{{HTTPStatus(301, "301 Moved Permanently")}}</dt>
+ <dd>This response code means that URI of requested resource has been changed. Probably, new URI would be given in the response.</dd>
+ <dt>{{HTTPStatus(302, "302 Found")}}</dt>
+ <dd>This response code means that URI of requested resource has been changed <em>temporarily</em>. New changes in the URI might be made in the future. Therefore, this same URI should be used by the client in future requests.</dd>
+ <dt>{{HTTPStatus(303, "303 See Other")}}</dt>
+ <dd>Server sent this response to directing client to get requested resource to another URI with an GET request.</dd>
+ <dt>{{HTTPStatus(304, "304 Not Modified")}}</dt>
+ <dd>This is used for caching purposes. It is telling to client that response has not been modified. So, client can continue to use same cached version of response.</dd>
+ <dt><code>305 Use Proxy</code> {{deprecated_inline}}</dt>
+ <dd>Was defined in a previous version of the HTTP specification to indicate that a requested response must be accessed by a proxy. It has been deprecated due to security concerns regarding in-band configuration of a proxy.</dd>
+ <dt><code>306 unused</code></dt>
+ <dd>This response code is no longer used, it is just reserved currently. It was used in a previous version of the HTTP 1.1 specification.</dd>
+ <dt>{{HTTPStatus(307, "307 Temporary Redirect")}}</dt>
+ <dd>Server sent this response to directing client to get requested resource to another URI with same method that used prior request. This has the same semantic than the <code>302 Found</code> HTTP response code, with the exception that the user agent <em>must not</em> change the HTTP method used: if a <code>POST</code> was used in the first request, a <code>POST</code> must be used in the second request.</dd>
+ <dt>{{HTTPStatus(308, "308 Permanent Redirect")}}</dt>
+ <dd>This means that the resource is now permanently located at another URI, specified by the <code>Location:</code> HTTP Response header. This has the same semantics as the <code>301 Moved Permanently</code> HTTP response code, with the exception that the user agent <em>must not</em> change the HTTP method used: if a <code>POST</code> was used in the first request, a <code>POST</code> must be used in the second request.</dd>
+</dl>
+
+<h2 id="Client_error_responses">Client error responses</h2>
+
+<dl>
+ <dt>{{HTTPStatus(400, "400 Bad Request")}}</dt>
+ <dd>This response means that server could not understand the request due to invalid syntax.</dd>
+ <dt>{{HTTPStatus(401, "401 Unauthorized")}}</dt>
+ <dd>Although the HTTP standard specifies "unauthorized", semantically this response means "unauthenticated". That is, the client must authenticate itself to get the requested response.</dd>
+ <dt><code>402 Payment Required</code></dt>
+ <dd>This response code is reserved for future use. Initial aim for creating this code was using it for digital payment systems however this is not used currently.</dd>
+ <dt>{{HTTPStatus(403, "403 Forbidden")}}</dt>
+ <dd>The client does not have access rights to the content, i.e. they are unauthorized, so server is rejecting to give proper response. Unlike 401, the client's identity is known to the server.</dd>
+ <dt>{{HTTPStatus(404, "404 Not Found")}}</dt>
+ <dd>The server can not find requested resource. In the browser, this means the URL is not recognized. In an API, this can also mean that the endpoint is valid but the resource itself does not exist. Servers may also send this response instead of 403 to hide the existence of a resource from an unauthorized client. This response code is probably the most famous one due to its frequent occurence on the web.</dd>
+ <dt>{{HTTPStatus(405, "405 Method Not Allowed")}}</dt>
+ <dd>The request method is known by the server but has been disabled and cannot be used. For example, an API may forbid DELETE-ing a resource. The two mandatory methods, <code>GET</code> and <code>HEAD</code>, must never be disabled and should not return this error code.</dd>
+ <dt>{{HTTPStatus(406, "406 Not Acceptable")}}</dt>
+ <dd>This response is sent when the web server, after performing <a href="/en-US/docs/HTTP/Content_negotiation#Server-driven_negotiation">server-driven content negotiation</a>, doesn't find any content following the criteria given by the user agent.</dd>
+ <dt>{{HTTPStatus(407, "407 Proxy Authentication Required")}}</dt>
+ <dd>This is similar to 401 but authentication is needed to be done by a proxy.</dd>
+ <dt>{{HTTPStatus(408, "408 Request Timeout")}}</dt>
+ <dd>This response is sent on an idle connection by some servers, even without any previous request by the client. It means that the server would like to shut down this unused connection. This response is used much more since some browsers, like Chrome, Firefox 27+, or IE9, use HTTP pre-connection mechanisms to speed up surfing. Also note that some servers merely shut down the connection without sending this message.</dd>
+ <dt>{{HTTPStatus(409, "409 Conflict")}}</dt>
+ <dd>This response is sent when a request conflicts with the current state of the server.</dd>
+ <dt>{{HTTPStatus(410, "410 Gone")}}</dt>
+ <dd>This response would be sent when the requested content has been permenantly deleted from server, with no forwarding address. Clients are expected to remove their caches and links to the resource. The HTTP specification intends this status code to be used for "limited-time, promotional services". APIs should not feel compelled to indicate resources that have been deleted with this status code.</dd>
+ <dt>{{HTTPStatus(411, "411 Length Required")}}</dt>
+ <dd>Server rejected the request because the <code>Content-Length</code> header field is not defined and the server requires it.</dd>
+ <dt>{{HTTPStatus(412, "412 Precondition Failed")}}</dt>
+ <dd>The client has indicated preconditions in its headers which the server does not meet.</dd>
+ <dt>{{HTTPStatus(413, "413 Payload Too Large")}}</dt>
+ <dd>Request entity is larger than limits defined by server; the server might close the connection or return an <code>Retry-After</code> header field.</dd>
+ <dt>{{HTTPStatus(414, "414 URI Too Long")}}</dt>
+ <dd>The URI requested by the client is longer than the server is willing to interpret.</dd>
+ <dt>{{HTTPStatus(415, "415 Unsupported Media Type")}}</dt>
+ <dd>The media format of the requested data is not supported by the server, so the server is rejecting the request.</dd>
+ <dt>{{HTTPStatus(416, "416 Requested Range Not Satisfiable")}}</dt>
+ <dd>The range specified by the <code>Range</code> header field in the request can't be fulfilled; it's possible that the range is outside the size of the target URI's data.</dd>
+ <dt>{{HTTPStatus(417, "417 Expectation Failed")}}</dt>
+ <dd>This response code means the expectation indicated by the <code>Expect</code> request header field can't be met by the server.</dd>
+ <dt>{{HTTPStatus(418, "418 I'm a teapot")}}</dt>
+ <dd>The server refuses the attempt to brew coffee with a teapot.</dd>
+ <dt>{{HTTPStatus(421, "421 Misdirected Request")}}</dt>
+ <dd>The request was directed at a server that is not able to produce a response. This can be sent by a server that is not configured to produce responses for the combination of scheme and authority that are included in the request URI.</dd>
+ <dt>{{HTTPStatus(422, "422 Unprocessable Entity")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>The request was well-formed but was unable to be followed due to semantic errors.</dd>
+ <dt>{{HTTPStatus(423, "423 Locked")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>The resource that is being accessed is locked.</dd>
+ <dt>{{HTTPStatus(424, "424 Failed Dependency")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>The request failed due to failure of a previous request.</dd>
+ <dt>{{HTTPStatus(426, "426 Upgrade Required")}}</dt>
+ <dd>The server refuses to perform the request using the current protocol but might be willing to do so after the client upgrades to a different protocol. The server sends an {{HTTPHeader("Upgrade")}} header in a 426 response to indicate the required protocol(s).</dd>
+ <dt>{{HTTPStatus(428, "428 Precondition Required")}}</dt>
+ <dd>The origin server requires the request to be conditional. Intended to prevent the 'lost update' problem, where a client GETs a resource's state, modifies it, and PUTs it back to the server, when meanwhile a third party has modified the state on the server, leading to a conflict.</dd>
+ <dt>{{HTTPStatus(429, "429 Too Many Requests")}}</dt>
+ <dd>The user has sent too many requests in a given amount of time ("rate limiting").</dd>
+ <dt>{{HTTPStatus(431, "431 Request Header Fields Too Large")}}</dt>
+ <dd>The server is unwilling to process the request because its header fields are too large. The request MAY be resubmitted after reducing the size of the request header fields.</dd>
+ <dt>{{HTTPStatus(451, "451 Unavailable For Legal Reasons")}}</dt>
+ <dd>The user requests an illegal resource, such as a web page censored by a government.</dd>
+</dl>
+
+<h2 id="Server_error_responses">Server error responses</h2>
+
+<dl>
+ <dt>{{HTTPStatus(500, "500 Internal Server Error")}}</dt>
+ <dd>The server has encountered a situation it doesn't know how to handle.</dd>
+ <dt>{{HTTPStatus(501, "501 Not Implemented")}}</dt>
+ <dd>The request method is not supported by the server and cannot be handled. The only methods that servers are required to support (and therefore that must not return this code) are <code>GET</code> and <code>HEAD</code>.</dd>
+ <dt>{{HTTPStatus(502, "502 Bad Gateway")}}</dt>
+ <dd>This error response means that the server, while working as a gateway to get a response needed to handle the request, got an invalid response.</dd>
+ <dt>{{HTTPStatus(503, "503 Service Unavailable")}}</dt>
+ <dd>The server is not ready to handle the request. Common causes are a server that is down for maintenance or that is overloaded. Note that together with this response, a user-friendly page explaining the problem should be sent. This responses should be used for temporary conditions and the <code>Retry-After:</code> HTTP header should, if possible, contain the estimated time before the recovery of the service. The webmaster must also take care about the caching-related headers that are sent along with this response, as these temporary condition responses should usually not be cached.</dd>
+ <dt>{{HTTPStatus(504, "504 Gateway Timeout")}}</dt>
+ <dd>This error response is given when the server is acting as a gateway and cannot get a response in time.</dd>
+ <dt>{{HTTPStatus(505, "505 HTTP Version Not Supported")}}</dt>
+ <dd>The HTTP version used in the request is not supported by the server.</dd>
+ <dt>{{HTTPStatus(506, "506 Variant Also Negotiates")}}</dt>
+ <dd>The server has an internal configuration error: transparent content negotiation for the request results in a circular reference.</dd>
+ <dt>{{HTTPStatus(507, "507 Insufficient Storage")}}</dt>
+ <dd>The server has an internal configuration error: the chosen variant resource is configured to engage in transparent content negotiation itself, and is therefore not a proper end point in the negotiation process.</dd>
+ <dt>{{HTTPStatus(508, "508 Loop Detected")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>The server detected an infinite loop while processing the request.</dd>
+ <dt>{{HTTPStatus(510, "510 Not Extended")}}</dt>
+ <dd>Further extensions to the request are required for the server to fulfill it.</dd>
+ <dt>{{HTTPStatus(511, "511 Network Authentication Required")}}</dt>
+ <dd>The 511 status code indicates that the client needs to authenticate to gain network access.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes">List of HTTP status codes on Wikipedia</a></li>
+ <li><a href="http://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml">IANA official registry of HTTP status codes</a></li>
+</ul>
diff --git a/files/uk/web/http/заголовки/accept-encoding/index.html b/files/uk/web/http/заголовки/accept-encoding/index.html
new file mode 100644
index 0000000000..f60d85eba5
--- /dev/null
+++ b/files/uk/web/http/заголовки/accept-encoding/index.html
@@ -0,0 +1,109 @@
+---
+title: Accept-Encoding
+slug: Web/HTTP/Заголовки/Accept-Encoding
+translation_of: Web/HTTP/Headers/Accept-Encoding
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP-<span class="tlid-translation translation"><span title="">заголовок запиту </span></span><strong><code>Accept-Encoding </code></strong><span class="tlid-translation translation"><span title="">вказує, яке кодування контенту може зрозуміти клієнт. Зазвичай це вказує на алгоритм стиснення.</span> <span title="">Використовуючи <a href="/uk/docs/Web/HTTP/Content_negotiation">узгодження вмісту</a>, сервер вибирає одну з пропозицій, використовує її та інформує клієнта про вибір за допомогою заголовка відповіді </span></span>{{HTTPHeader("Content-Encoding")}}<span class="tlid-translation translation"><span title="">.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Навіть якщо клієнт і сервер підтримують однакові алгоритми стиснення, сервер може не стискати тіло відповіді, якщо значення </span></span><code>identity</code> <span class="tlid-translation translation"><span title="">також є прийнятним.</span> <span title="">Два загальні випадки призводять до цього:</span></span></p>
+
+<ul>
+ <li><span class="tlid-translation translation"><span title="">Дані, які потрібно надіслати, вже стиснуті, а друге стиснення не призведе до передачі менших даних.</span> <span title="">Це може бути у випадку з деякими форматами зображень;</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Сервер перевантажений і не може дозволити собі накладні витрати, спричинені вимогою стиснення.</span> <span title="">Як правило, Microsoft рекомендує не стискати вміст, якщо сервер використовує більше 80% своєї обчислювальної потужності.</span></span></li>
+</ul>
+
+<p><span class="tlid-translation translation"><span title="">До тих пір, поки значення </span></span><code>identity</code> <span class="tlid-translation translation"><span title="">(тобто без кодування) явно не заборонено </span></span><code>identity;q=0</code><span class="tlid-translation translation"><span title=""> або </span></span><code>*;q=0</code><span class="tlid-translation translation"><span title=""> без іншого явно заданого значення для ідентифікації, сервер ніколи не повинен відправляти назад помилку </span></span>{{HTTPStatus("406")}} <code>Not Acceptable</code> <span class="tlid-translation translation"><span title="">.</span></span></p>
+
+<div class="note"><strong>Примітка:</strong>
+
+<ul>
+ <li>
+  <p><span class="tlid-translation translation"><span title="">Реєстр IANA підтримує <a href="http://www.iana.org/assignments/http-parameters/http-parameters.xml#http-parameters-1">повний перелік офіційних кодувань вмісту</a>.</span></span> </p>
+ </li>
+ <li><span class="tlid-translation translation"><span title="">Іноді використовуються два інші кодування вмісту, </span></span><code>bzip </code><span class="tlid-translation translation"><span title="">і </span></span><code>bzip2</code><span class="tlid-translation translation"><span title="">, хоч вони не є стандартними.</span> Ці кодування <span title=""> реалізують алгоритм, використовуваний одноіменними програмами UNIX.</span> <span title="">Зверніть увагу, що перша була припинена через проблеми ліцензування патенту.</span></span></li>
+</ul>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовку</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>так</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Accept-Encoding: gzip
+Accept-Encoding: compress
+Accept-Encoding: deflate
+Accept-Encoding: br
+Accept-Encoding: identity
+Accept-Encoding: *
+
+// Multiple algorithms, weighted with the {{Glossary("Quality Values", "quality value")}} syntax:
+Accept-Encoding: deflate, gzip;q=1.0, *;q=0.5</pre>
+
+<h2 id="Директиви">Директиви</h2>
+
+<dl>
+ <dt><code>gzip</code></dt>
+ <dd>Формат стиснення, що використовує кодування <a class="external external-icon" href="http://en.wikipedia.org/wiki/LZ77_and_LZ78#LZ77">Lempel-Ziv coding</a> (LZ77), з 32-bit CRC.</dd>
+ <dt><code>compress</code></dt>
+ <dd>Формат стиснення, що використовує алгоритм <a class="external external-icon" href="http://en.wikipedia.org/wiki/LZW">Lempel-Ziv-Welch</a> (LZW) .</dd>
+ <dt><code>deflate</code></dt>
+ <dd>Формат стиснення, що використовує структуру <a class="external external-icon" href="http://en.wikipedia.org/wiki/Zlib">zlib</a>, з алгоритмом стиснення <a class="external external-icon" href="http://en.wikipedia.org/wiki/DEFLATE"><em>deflate</em></a>.</dd>
+ <dt><code>br</code></dt>
+ <dd>Формат стиснення, що використовує алгоритм <a class="external external-icon" href="https://en.wikipedia.org/wiki/Brotli">Brotli</a> .</dd>
+ <dt><code>identity</code></dt>
+ <dd><span class="tlid-translation translation"><span title="">Позначає функцію ідентичності (тобто не стискати, не змінювати).</span> <span title="">Це значення завжди вважається прийнятним, навіть воно не вказане.</span></span></dd>
+ <dt><code>*</code></dt>
+ <dd><span class="tlid-translation translation"><span title="">Відповідає будь-якому кодуванню вмісту, який ще не вказано в заголовку.</span> <span title="">Це значення є типовим, якщо заголовку немає.</span> <span title="">Це не значить, що будь-який алгоритм підтримується,</span> <span title="">просто не висловлюється жодних переваг.</span></span></dd>
+ <dt><code>;q=</code> (qvalues weighting)</dt>
+ <dd><span class="tlid-translation translation"><span title="">Будь-яке значення розміщується в порядку переваги, що виражається з використанням відносної <a href="/uk/docs/Glossary/Quality_values">величини якості</a>, званої <em>вагою</em>.</span></span></dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre>Accept-Encoding: gzip
+
+Accept-Encoding: gzip, compress, br
+
+Accept-Encoding: br;q=1.0, gzip;q=0.8, *;q=0.1
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Accept-Encoding", "5.3.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Context</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Accept-Encoding")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>HTTP <a href="/uk/docs/Web/HTTP/Content_negotiation">content negotiation</a></li>
+ <li>Header with the result of the content negotiation: {{HTTPHeader("Content-Encoding")}}</li>
+ <li>Other similar headers: {{HTTPHeader("TE")}}, {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept-Language")}}</li>
+</ul>
diff --git a/files/uk/web/http/заголовки/accept-language/index.html b/files/uk/web/http/заголовки/accept-language/index.html
new file mode 100644
index 0000000000..0ccdc06787
--- /dev/null
+++ b/files/uk/web/http/заголовки/accept-language/index.html
@@ -0,0 +1,94 @@
+---
+title: Accept-Language
+slug: Web/HTTP/Заголовки/Accept-Language
+translation_of: Web/HTTP/Headers/Accept-Language
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="tlid-translation translation"><span title="">Заголовок HTTP-запиту </span></span><strong><code>Accept-Language</code></strong> <span class="tlid-translation translation"><span title=""> повідомляє про те, які мови клієнт може зрозуміти, і який варіант локалі є кращим.</span> <span title="">(За мовами ми маємо на увазі природні мови, такі як англійська, а не мови програмування.) Потім, використовуючи <a href="/uk/docs/Web/HTTP/Content_negotiation">узгодження вмісту</a>, сервер вибирає одну з пропозицій, використовує її та інформує клієнта про свій вибір за допомогою заголовку відповіді </span></span>{{HTTPHeader("Content-Language")}}<span class="tlid-translation translation"><span title="">.</span> <span title="">Браузери встановлюють адекватні значення для цього заголовка відповідно до їхньої мови інтерфейсу користувача, і, навіть, якщо користувач може змінити її, це трапляється рідко (і не схвалюється, оскільки це призводить до </span></span>fingerprinting<span class="tlid-translation translation"><span title="">).</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Цей заголовок є рекомендацією, яку слід використовувати, коли сервер не має можливості визначити мову іншим способом, наприклад, через конкретну URL-адресу, яка керується явним рішенням користувача.</span> <span title="">Рекомендується, щоб сервер ніколи не перевизначав явне рішення.</span> <span title="">Зміст </span></span><code>Accept-Language</code><span class="tlid-translation translation"><span title=""> часто не керується користувачем (як, наприклад, під час подорожі та використання Інтернет-кафе в іншій країні);</span> <span title="">користувач може також захотіти відвідати сторінку іншою мовою, ніж локалі свого інтерфейсу користувача.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Якщо сервер не може обслуговувати будь-яку відповідну мову, він теоретично може відправити код помилки </span></span>{{HTTPStatus("406")}} (Not Acceptable)<span class="tlid-translation translation"><span title="">.</span> <span title="">Але, з кращого досвіду це робиться рідко, замість цього кращим способом є ігнорування у цьому випадку заголовка </span></span><code>Accept-Language</code><span class="tlid-translation translation"><span title=""> .</span></span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовку</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>ні</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Simple header", "CORS-safelisted request-header")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Accept-Language: &lt;language&gt;
+Accept-Language: *
+
+// Multiple types, weighted with the {{glossary("quality values", "quality value")}} syntax:
+Accept-Language: fr-CH, fr;q=0.9, en;q=0.8, de;q=0.7, *;q=0.5</pre>
+
+<h2 id="Директиви">Директиви</h2>
+
+<dl>
+ <dt><code>&lt;language&gt;</code></dt>
+ <dd>
+ <p><span class="tlid-translation translation"><span title="">Тег мови (який іноді називають "ідентифікатором локалі").</span> <span title="">Він складається з тегу мови (2-3 літери), що представляє мову, за яким після символу </span></span> <code>'-'</code><span class="tlid-translation translation"><span title=""> можуть слідувати також додаткові літери підтегу.</span> <span title="">Найпоширенішою додатковою інформацією є варіант країни або регіону (наприклад, </span></span><code>'en-US'</code><span class="tlid-translation translation"><span title=""> або </span></span><code>'fr-CA'</code><span class="tlid-translation translation"><span title="">) або тип алфавіту (наприклад, </span></span><code>'sr-Latn'</code><span class="tlid-translation translation"><span title="">).</span> <span title="">Інші варіанти, такі як тип орфографії (</span></span><code>'de-DE-1996'</code><span class="tlid-translation translation"><span title="">), зазвичай не використовуються в контексті цього заголовку.</span></span></p>
+ </dd>
+ <dt><code>*</code></dt>
+ <dd>Будь-яка мова; <code>'*'</code> використовується як шаблон заміни.</dd>
+ <dt><code>;q=</code> (q-factor weighting)</dt>
+ <dd><span class="tlid-translation translation"><span title="">Будь-яке значення, розміщене в порядку уподобань, виражене за допомогою відносного </span></span>{{glossary("Quality values", "quality value")}} <span class="tlid-translation translation"><span title="">що називається <em>вагою</em>.</span></span></dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre>Accept-Language: de
+
+Accept-Language: de-CH
+
+Accept-Language: en-US,en;q=0.5
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "Accept-Language", "5.3.5")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Context</td>
+  </tr>
+  <tr>
+   <td><a href="https://tools.ietf.org/html/bcp47">BCP 47</a></td>
+   <td>Tags for the Identification of Language</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Accept-Language")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>HTTP <a href="/en-US/docs/Web/HTTP/Content_negotiation">content negotiation</a></li>
+ <li>Header with the result of the content negotiation: {{HTTPHeader("Content-Language")}}</li>
+ <li>Other similar headers: {{HTTPHeader("TE")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept")}}</li>
+</ul>
diff --git a/files/uk/web/http/заголовки/accept/index.html b/files/uk/web/http/заголовки/accept/index.html
new file mode 100644
index 0000000000..0927cca0d3
--- /dev/null
+++ b/files/uk/web/http/заголовки/accept/index.html
@@ -0,0 +1,85 @@
+---
+title: Accept
+slug: Web/HTTP/Заголовки/Accept
+translation_of: Web/HTTP/Headers/Accept
+---
+<div><font><font>{{HTTPSidebar}}</font></font></div>
+
+<p><font><font>的</font></font><strong><code>Accept</code></strong><font><font>请求的HTTP标头通告哪些内容类型，表示为</font></font><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types"><font><font>MIME类型</font></font></a><font><font>，客户端是能够理解的。</font><font>使用</font></font><a href="/en-US/docs/Web/HTTP/Content_negotiation"><font><font>内容协商</font></font></a><font><font>，服务器然后选择其中一个提议，使用它并通过{{HTTPHeader（“Content-Type”）}}响应标头通知客户端它的选择。</font><font>浏览器根据请求完成的上下文为此标头设置了足够的值：在获取CSS样式表时，为请求设置的值与获取图像，视频或脚本时的值不同。</font></font></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><font><font>标题类型</font></font></th>
+   <td><font><font>{{词汇表（“请求标题”）}}</font></font></td>
+  </tr>
+  <tr>
+   <th scope="row"><font><font>{{词汇表（“禁止标题名称”）}}</font></font></th>
+   <td><font><font>没有</font></font></td>
+  </tr>
+  <tr>
+   <th scope="row"><font><font>{{词汇表（“简单标题”，“CORS-safelisted request-header”）}}</font></font></th>
+   <td><font><font>是</font></font></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="句法"><font><font>句法</font></font></h2>
+
+<pre class="syntaxbox"><font><font>接受：&lt;MIME_type&gt; / &lt;MIME_subtype&gt;</font></font><font><font>
+接受：&lt;MIME_type&gt; / *</font></font><font><font>
+接受：* / *</font></font>
+<font><font>
+//多种类型，使用{{词汇表（“质量值”，“质量值”）}}语法加权：</font></font><font><font>
+接受：text / html，application / xhtml + xml，application / xml; q = 0.9，* / *; q = 0.8</font></font></pre>
+
+<h2 id="指令"><font><font>指令</font></font></h2>
+
+<dl>
+ <dt><code>&lt;MIME_type&gt;/&lt;MIME_subtype&gt;</code></dt>
+ <dd><font><font>单一，精确的</font></font><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types"><font><font>MIME类型</font></font></a><font><font>，如</font></font><code>text/html</code><font><font>。</font></font></dd>
+ <dt><code>&lt;MIME_type&gt;/*</code></dt>
+ <dd><font><font>MIME类型，但没有任何子类型。</font></font><code>image/*</code><font><font>将匹配</font></font><code>image/png</code><font><font>，</font></font><code>image/svg</code><font><font>，</font></font><code>image/gif</code><font><font>和任何其他的图像类型。</font></font></dd>
+ <dt><code>*/*</code></dt>
+ <dd><font><font>任何MIME类型</font></font></dd>
+ <dt><code>;q=</code><font><font> （q因子加权）</font></font></dt>
+ <dd><font><font>使用的任何值都按照优先顺序放置，使用</font><font>称为</font><em><font>权重的</font></em><font>相对</font></font><a href="/en-US/docs/Glossary/Quality_values"><font><font>质量值</font></font></a><font><font>表示</font><font>。</font></font></dd>
+</dl>
+
+<h2 id="例子"><font><font>例子</font></font></h2>
+
+<pre><font><font>接受：text / html</font></font>
+<font><font>
+接受：图片/ *</font></font>
+<font><font>
+接受：text / html，application / xhtml + xml，application / xml; q = 0.9，* / *; q = 0.8</font></font>
+</pre>
+
+<h2 id="产品规格"><font><font>产品规格</font></font></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col"><font><font>规范</font></font></th>
+   <th scope="col"><font><font>标题</font></font></th>
+  </tr>
+  <tr>
+   <td><font><font>{{RFC（“7231”，“接受”，“5.3.2”）}}</font></font></td>
+   <td><font><font>超文本传输​​协议（HTTP / 1.1）：语义和上下文</font></font></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性"><font><font>浏览器兼容性</font></font></h2>
+
+<p class="hidden"><font><font>此页面中的兼容性表是根据结构化数据生成的。</font><font>如果您想为数据做出贡献，请查看</font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>https://github.com/mdn/browser-compat-data</font></font></a><font><font>并向我们​​发送拉取请求。</font></font></p>
+
+<p><font><font>{{COMPAT（ “http.headers.Accept”）}}</font></font></p>
+
+<h2 id="也可以看看"><font><font>也可以看看</font></font></h2>
+
+<ul>
+ <li><font><font>HTTP </font></font><a href="/en-US/docs/Web/HTTP/Content_negotiation"><font><font>内容协商</font></font></a></li>
+ <li><font><font>内容协商结果的标头：{{HTTPHeader（“Content-Type”）}}</font></font></li>
+ <li><font><font>其他类似的标头：{{HTTPHeader（“TE”）}}，{{HTTPHeader（“Accept-Encoding”）}}，{{HTTPHeader（“Accept-Charset”）}}，{{HTTPHeader（“Accept-Language” ）}}</font></font></li>
+</ul>
diff --git a/files/uk/web/http/заголовки/connection/index.html b/files/uk/web/http/заголовки/connection/index.html
new file mode 100644
index 0000000000..a6fff8669d
--- /dev/null
+++ b/files/uk/web/http/заголовки/connection/index.html
@@ -0,0 +1,46 @@
+---
+title: Connection
+slug: Web/HTTP/Заголовки/Connection
+translation_of: Web/HTTP/Headers/Connection
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="tlid-translation translation"><span title="">Загальний заголовок </span></span><strong><code>Connection</code></strong> <span class="tlid-translation translation"><span title="">означує, чи залишається мережне з'єднання відкритим після завершення поточної транзакції.</span> <span title="">Якщо надіслане значення зберігається, зв'язок постійний і не закривається, що дозволяє виконувати наступні запити на один і той же сервер.</span></span></p>
+
+<div class="note"><span class="tlid-translation translation"><span title="">Поля заголовка, специфічні для підключення, такі як </span></span><a href="https://tools.ietf.org/html/rfc7540#section-8.1.2.2"><code>Connection</code></a><span class="tlid-translation translation"><span title="">, <a href="https://tools.ietf.org/html/rfc7540#section-8.1.2.2">не повинні використовуватися у версіях HTTP починаючи з </a></span></span><a href="https://tools.ietf.org/html/rfc7540#section-8.1.2.2">HTTP/2</a><span class="tlid-translation translation"><span title="">.</span></span></div>
+
+<p>За виключенням стандартних заголовків hop-by-hop ({{HTTPHeader("Keep-Alive")}}, {{HTTPHeader("Transfer-Encoding")}}, {{HTTPHeader("TE")}}, {{HTTPHeader("Connection")}}, {{HTTPHeader("Trailer")}}, {{HTTPHeader("Upgrade")}}, {{HTTPHeader("Proxy-Authorization")}} і {{HTTPHeader("Proxy-Authenticate")}}), будь які інші hop-by-hop заголовки  повинні бути перераховані в заголовку <code>Connection</code>, <span class="tlid-translation translation"><span title="">так щоб перший проксі зміг знати, що він повинен обробити їх і не пересилати далі.</span> <span title="">Також можуть бути перелічені стандартні заголовки </span></span>hop-by-hop<span class="tlid-translation translation"><span title=""> (часто це відбувається у випадку {{HTTPHeader ("Keep-Alive")}}, але це не є обов'язковим).</span></span>  y).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("General header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Connection: keep-alive
+Connection: close
+</pre>
+
+<h2 id="Директиви">Директиви</h2>
+
+<dl>
+ <dt><code>close</code></dt>
+ <dd><span class="tlid-translation translation"><span title="">Вказує, що клієнт або сервер хотіли б закрити з'єднання.</span> <span title="">Це типово, для запитів HTTP/1.0.</span></span></dd>
+ <dt>будь які розділені комою заголовки HTTP [як правило тільки <code>keep-alive</code>]</dt>
+ <dd><span class="tlid-translation translation"><span title="">Вказує, що клієнт хоче, щоб з'єднання було відкрито.</span> <span title="">Постійне підключення - це типово для запитів HTTP/1.1.</span> <span title="">Список заголовків - це ім'я заголовка, який буде видалено першим непрозорим проксі-сервером або кешем між ними: ці заголовки визначають зв'язок між передавачем і першим об'єктом, а не кінцевим вузлом.</span></span></dd>
+</dl>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Connection")}}</p>
diff --git a/files/uk/web/http/заголовки/content-length/index.html b/files/uk/web/http/заголовки/content-length/index.html
new file mode 100644
index 0000000000..7af666f335
--- /dev/null
+++ b/files/uk/web/http/заголовки/content-length/index.html
@@ -0,0 +1,62 @@
+---
+title: Content-Length
+slug: Web/HTTP/Заголовки/Content-Length
+translation_of: Web/HTTP/Headers/Content-Length
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="tlid-translation translation"><span title="">Заголовок об'єкта </span></span><strong><code>Content-Length</code></strong><span class="tlid-translation translation"><span title=""> вказує розмір в байтах корисного навантаження, надісланих одержувачу.</span></span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Entity header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Content-Length: &lt;length&gt;
+</pre>
+
+<h2 id="Директиви">Директиви</h2>
+
+<dl>
+ <dt>&lt;length&gt;</dt>
+ <dd><span class="tlid-translation translation"><span title="">Довжина в кількостях октетів, вказана в десятковій формі.</span></span></dd>
+</dl>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7230", "Content-Length", "3.3.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Content-Length")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{HTTPHeader("Transfer-Encoding")}}</li>
+</ul>
diff --git a/files/uk/web/http/заголовки/content-type/index.html b/files/uk/web/http/заголовки/content-type/index.html
new file mode 100644
index 0000000000..db2a94c2b8
--- /dev/null
+++ b/files/uk/web/http/заголовки/content-type/index.html
@@ -0,0 +1,113 @@
+---
+title: Content-Type
+slug: Web/HTTP/Заголовки/Content-Type
+translation_of: Web/HTTP/Headers/Content-Type
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="tlid-translation translation"><span title="">Заголовок об'єкта </span></span><strong><code>Content-Type </code></strong><span class="tlid-translation translation"><span title="">використовується для позначення ресурсу </span></span>{{Glossary("MIME type","media type")}}<span class="tlid-translation translation"><span title=""> .</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">У відповідях у заголовку </span></span><code>Content-Type</code><span class="tlid-translation translation"><span title=""> сервер повідомляє клієнту, який саме тип вмісту повертається.</span> <span title="">Браузери в деяких випадках виконують стеження за MIME і не обов'язково слідкують за значенням цього заголовка;</span> <span title="">Щоб запобігти такій поведінці, заголовок </span></span>{{HTTPHeader("X-Content-Type-Options")}}<span class="tlid-translation translation"><span title=""> може бути встановлений рівним </span></span><code>nosniff</code><span class="tlid-translation translation"><span title="">.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">У запитах (наприклад, </span></span>{{HTTPMethod("POST")}} <span class="tlid-translation translation"><span title="">або </span></span> {{HTTPMethod("PUT")}})<span class="tlid-translation translation"><span title=""> клієнт повідомляє серверу, який тип даних відправляється.</span></span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Entity header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Simple response header", "CORS-safelisted response-header")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Content-Type: text/html; charset=utf-8
+Content-Type: multipart/form-data; boundary=something
+</pre>
+
+<h2 id="Директиви">Директиви</h2>
+
+<dl>
+ <dt><code>media-type</code></dt>
+ <dd><span class="tlid-translation translation"><span title=""><a href="/uk/docs/Web/HTTP/Basics_of_HTTP/MIME_types">Тип MIME</a> ресурсу або даних.</span></span></dd>
+ <dt>charset</dt>
+ <dd><span class="tlid-translation translation"><span title="">Стандарт кодування символів.</span></span></dd>
+ <dt>boundary</dt>
+ <dd><span class="tlid-translation translation"><span title="">Для багаточастинних (</span></span>multipart<span class="tlid-translation translation"><span title="">) об'єктів необхідна директива </span></span><code>boundary</code> <span class="tlid-translation translation"><span title="">, яка складається з 1 до 70 символів з набору символів, відомих як дуже надійні через шлюзи електронної пошти, і не закінчуючись пробілами.</span> <span title="">Директива використовується для інкапсуляції меж кількох частин повідомлення.</span> <span title="">Часто кордон заголовка доповнюється двома тире в тілі, і кінцева межа також має два тире, які додаються.</span></span></dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Content-Type_в_формах_HTML"><code>Content-Type</code> в формах HTML</h3>
+
+<p><span class="tlid-translation translation"><span title="">У запиті </span></span>{{HTTPMethod("POST")}}<span class="tlid-translation translation"><span title="">, що відправляється в результаті роботи HTML-форми, </span></span><code>Content-Type</code><span class="tlid-translation translation"><span title=""> запиту задається атрибутом </span></span><code>enctype</code> <span class="tlid-translation translation"><span title="">елемента </span></span>{{HTMLElement("form")}}<span class="tlid-translation translation"><span title="">.</span></span></p>
+
+<pre class="brush: html">&lt;form action="/" method="post" enctype="multipart/form-data"&gt;
+  &lt;input type="text" name="description" value="some text"&gt;
+  &lt;input type="file" name="myFile"&gt;
+  &lt;button type="submit"&gt;Submit&lt;/button&gt;
+&lt;/form&gt;
+</pre>
+
+<p><span class="tlid-translation translation"><span title="">Запит виглядає приблизно так (тут менш цікавідля прикладу заголовки не вказані):</span></span></p>
+
+<pre>POST /foo HTTP/1.1
+Content-Length: 68137
+Content-Type: multipart/form-data; boundary=---------------------------974767299852498929531610575
+
+-----------------------------974767299852498929531610575
+Content-Disposition: form-data; name="description"
+
+якийсь текст
+-----------------------------974767299852498929531610575
+Content-Disposition: form-data; name="myFile"; filename="foo.txt"
+Content-Type: text/plain
+
+(вміст вивантажуваного файлу foo.txt)
+-----------------------------974767299852498929531610575--
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7233", "Content-Type in multipart", "4.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Range Requests</td>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Content-Type", "3.1.1.5")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Content-Type")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{HTTPHeader("Accept")}} and {{HTTPHeader("Accept-Charset")}}</li>
+ <li>{{HTTPHeader("Content-Disposition")}}</li>
+ <li>{{HTTPStatus("206")}} Partial Content</li>
+ <li>{{HTTPHeader("X-Content-Type-Options")}}</li>
+</ul>
diff --git a/files/uk/web/http/заголовки/etag/index.html b/files/uk/web/http/заголовки/etag/index.html
new file mode 100644
index 0000000000..6be0cce59c
--- /dev/null
+++ b/files/uk/web/http/заголовки/etag/index.html
@@ -0,0 +1,98 @@
+---
+title: ETag
+slug: Web/HTTP/Заголовки/ETag
+translation_of: Web/HTTP/Headers/ETag
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>ETag</code></strong> HTTP заголовок відповіді. Є ідентифікатором для поточної версії ресурсу. Він надає можливість створювати кеш більш ефективно, і запобігає перенапругам у системі, створюючи доступність простору інтернету. Щойно надійде відповідь що данні не змінювались, то нема потреби знову це завантажувати. </p>
+
+<p>Якщо дані з цього URL змінились, ETag код має бути змінений.  Отже Etags створюються для ідентифікації і відстежування ресурсів інтернету. Порівняння кожного з них надає можливість відстежувати які дані змінились і мають бути перезавантажені.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовку</th>
+   <td>{{Glossary("Заголовок відповіді")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Прихований  заголовок")}}</th>
+   <td>Ні</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">ETag: W/"&lt;etag_value&gt;"
+ETag: "&lt;etag_value&gt;"
+</pre>
+
+<h2 id="Вказники">Вказники</h2>
+
+<dl>
+ <dt><code>W/</code> {{optional_inline}}</dt>
+ <dd><code>'W/'</code> (чутливо до регістру) вказує виконати <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Conditional_requests#Weak_validation">детальну перевірку</a>. Детальна перевірка допустима, але рідше використовуєтся для порівняння. Строга валідація ідеально підходіть для порівняння, але має дуже складний алгорітм і шкодить ефективності. Для підвищення ефективності використовуються <code>Etag</code> значення двох копій одне й те самого ресурсу. Порівняння коротких фраз кодів, ніж порівнювати кожен байт файлу, є ефективна ідея.</dd>
+ <dt>"&lt;etag_value&gt;"</dt>
+ <dd>Унікальний хеш код ресурсу. Це звичайні набір символів ASCII у подвійних лапках (приклад <code>"675af34563dc-tr34"</code>). В звичайному випадку це хеш дати останньої модіфікаії, або це может бути будь який код. Наприклад, MDN викорустовує хеш шістнадцятирічних символів контенту вікіпедії.</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre>ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
+ETag: W/"0815"</pre>
+
+<h3 id="Виникаючі_повітряні_колізії">Виникаючі повітряні колізії</h3>
+
+<p>За допомогою <code>ETag</code> і з заголовком {{HTTPHeader("If-Match")}}, можливо натрапити на повітряні колізії.</p>
+
+<p>Наприклад, коли редагується MDN, поточний вікі контент захешований у <code>Etag</code> і доданий до відповіді:</p>
+
+<pre>ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"</pre>
+
+<p>{{HTTPMethod("POST")}} запит у вікі сторінках (додання даних/зміни) матиме {{HTTPHeader("If-Match")}} заголовок із <code>ETag</code> кодом, для перевірки актуальності даних.</p>
+
+<pre>If-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"</pre>
+
+<p>Якщо хеш не сходиться, це означає що данні змінилися, документ був змінений нещодавно і {{HTTPStatus("412")}}<code> Precondition Failed</code> буде повернено.</p>
+
+<h3 id="Кеш_статичних_ресурсів">Кеш статичних ресурсів</h3>
+
+<p>Інший випадок використання <code>ETag</code> заголовку це кешування ресурсів які не змінювались. Якщо користувач робить запит якоїсь URL знову (вже встановлений <code>ETag</code>), і якщо контент є застарілим, він може буть непрацюючим. Користувач виконує запит з встановленим <code>ETag</code> із заголовком {{HTTPHeader("If-None-Match")}}:</p>
+
+<pre>If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"</pre>
+
+<p>Сервер порівнює клієнтську версію коду <code>ETag</code> (відправлений з <code>If-None-Match</code>) з версією <code>ETag</code> для поточної версії ресурсу і якщо обидва сходяться то змін не було, сервер поверне відповідь {{HTTPStatus("304")}}<code> Not Modified</code>, без тіла відповіді, то поточна версія є актуальна(<em>fresh</em>).</p>
+
+<h2 id="Стандарти">Стандарти</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7232", "ETag", "2.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_с_оглядачами">Сумісність с оглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.ETag")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPHeader("If-Match")}}</li>
+ <li>{{HTTPHeader("If-None-Match")}}</li>
+ <li>{{HTTPStatus("304")}}<code> Not Modified</code></li>
+ <li>{{HTTPStatus("412")}}<code> Precondition Failed</code></li>
+ <li>
+  <p><a href="https://www.w3.org/1999/04/Editing/">W3C Note: Editing the Web – Detecting the Lost Update Problem Using Unreserved Checkout</a></p>
+ </li>
+</ul>
diff --git a/files/uk/web/http/заголовки/if-match/index.html b/files/uk/web/http/заголовки/if-match/index.html
new file mode 100644
index 0000000000..5fffd8c1df
--- /dev/null
+++ b/files/uk/web/http/заголовки/if-match/index.html
@@ -0,0 +1,86 @@
+---
+title: If-Match
+slug: Web/HTTP/Заголовки/If-Match
+translation_of: Web/HTTP/Headers/If-Match
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>If-Match</code></strong> HTTP заголовок запиту робить запит умовним. Для {{HTTPMethod("GET")}} і {{HTTPMethod("HEAD")}} методів, сервер поверне запитаний ресурс тільки якщо співпадає обидва <code>ETags</code>. Для методу {{HTTPMethod("PUT")}} чи інших небезпечних методів, виконається тільки завантаження файлу.</p>
+
+<p>Порівняння коду {{HTTPHeader("ETag")}} може використовувати <em>суворий алгоритм порівняння</em>, мається на увазі повна перевірка байт в байт. Ця функція використовує  <code>W/</code> префікс на початку <code>ETag</code>.</p>
+
+<p>Існує два загальних випадки використання: </p>
+
+<ul>
+ <li>Для {{HTTPMethod("GET")}} і {{HTTPMethod("HEAD")}} методів, використовується з додатковим {{HTTPHeader("Range")}} заголовком, це гарантує що усі ranges запити надходять  з того самого джерела. В іншому випадку буде повернуто статус {{HTTPStatus("416")}}<code> </code>(Range Not Satisfiable).</li>
+ <li>Для інших випадків, і частково для {{HTTPMethod("PUT")}}, <code>If-Match</code> можуть бути використані <a href="https://www.w3.org/1999/04/Editing/#3.1">порівняння наявності файлу</a>. В такому випадку можно дізнатись чи якісь зміни ресурсу, які користувач намагається завантажити, не змінено з того часу як вони були розташовані. Якщо запит не буде виконано, повернеться статус {{HTTPStatus("412")}} (Precondition Failed).</li>
+</ul>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовку</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>Ні</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">If-Match: &lt;etag_value&gt;
+If-Match: &lt;etag_value&gt;, &lt;etag_value&gt;, …
+</pre>
+
+<h2 id="Вказники">Вказники</h2>
+
+<dl>
+ <dt>&lt;etag_value&gt;</dt>
+ <dd>Значення тегів унікально представляють запитанні ресурси. Це строки ASCII символів розташовані поміж подвійних лапок (наприклад <code>"675af34563dc-tr34"</code>) і можуть мати префікс <code>W/</code> якщо потрібно використання суворого алгоритму порівняння.</dd>
+ <dt><code>*</code></dt>
+ <dd>Зірочка для представлення будь якого ресурсу. </dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre>If-Match: "bfc13a64729c4290ef5b2c2730249c88ca92d82d"
+
+If-Match: W/"67ab43", "54ed21", "7892dd"
+
+If-Match: *
+</pre>
+
+<h2 id="Стандарт">Стандарт</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7232", "If-Match", "3.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_оглядачами">Сумісність з оглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.If-Match")}}</p>
+
+<h2 id="Дивись_також">Дивись також</h2>
+
+<ul>
+ <li>{{HTTPHeader("ETag")}}</li>
+ <li>{{HTTPHeader("If-Unmodified-Since")}}</li>
+ <li>{{HTTPHeader("If-Modified-Since")}}</li>
+ <li>{{HTTPHeader("If-None-Match")}}</li>
+ <li>{{HTTPStatus("416")}}<code> Range Not Satisfiable</code></li>
+ <li>{{HTTPStatus("412")}}<code> Precondition Failed</code></li>
+</ul>
diff --git a/files/uk/web/http/заголовки/index.html b/files/uk/web/http/заголовки/index.html
new file mode 100644
index 0000000000..8fc2a6dda6
--- /dev/null
+++ b/files/uk/web/http/заголовки/index.html
@@ -0,0 +1,382 @@
+---
+title: HTTP заголовки
+slug: Web/HTTP/Заголовки
+translation_of: Web/HTTP/Headers
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Заголовки HTTP дозволяють клієнту та серверу передавати додаткову інформацію у запиті чи відповіді. Заголовок запиту складається з нечутливих до регістру імен, за якими йде двокрапка '<code>:</code>', а потім їх значення (без розбиття на рядки). Пробіли перед значеннями ігноруються.</p>
+
+<p>Користувальницькі значення заголовків можуть бути додані за допомогою префіксу 'X-' . Однак ця домовленість більше не підтримується з червня 2012, через незручність, яку вона викликала, коли нестандартизовані поля стали стандартними у <a href="https://tools.ietf.org/html/rfc6648">RFC 6648</a>; інші значення  перераховані у <a class="external" href="http://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a>, оригінальний зміст якого був виначений у <a class="external" href="http://tools.ietf.org/html/rfc4229">RFC 4229</a>. IANA також підтримує <a class="external" href="http://www.iana.org/assignments/message-headers/prov-headers.html">реєстр запропонованих нових значень заголовків повідомлення HTTP</a>.</p>
+
+<p>Заголовки можуть бути сгруповані, відповідно до їхнього змісту:</p>
+
+<ul>
+ <li>{{Glossary("General header")}}: Заголовки, що застосовуються як для запиту, так і відповіді, але не маєть ніякого відношення до даних, що передаються у тілі.</li>
+ <li>{{Glossary("Request header")}}: Заголовки, що містять більше інформації про ресурс, що запитується, чи самого клієнта.</li>
+ <li>{{Glossary("Response header")}}: Заголовки з додатковою інформацією про відповідь, наприклад, її розташування або сам сервер (ім'я, версія тощо).</li>
+ <li>{{Glossary("Entity header")}}: Заголовки, що містять больше інформації про тіло сутністі, наприклад, довжину її контенту або MIME-тип.</li>
+</ul>
+
+<p>Заголовки також можуть бути згруповані за тим, як проксі обробляє їх:</p>
+
+<dl>
+ <dt><a id="e2e" name="e2e"></a>End-to-end (точка-точка або наскрізні) заголовки</dt>
+ <dd>Ці заголовки повинні бути передані кінцевому отримувачу повідомлення; серверу, що оброблює запит, або клієнту, який отримує відповідь. Проміжний проксі має повторно передати наскрізні заголовки незмінніми, а кеш повинен зберегти їх.</dd>
+ <dt><a id="hbh" name="hbh"></a>Hop-by-hop (крок-за-кроком або проміжні) заголовки</dt>
+ <dd>Ці заголовки мають значення лише для одного з'єднання транспортного рівня та не повинні бути повторно передані через проксі або кеш. Це такі заголовки, як: {{ httpheader("Connection") }}, {{ httpheader("Keep-Alive") }}, {{ httpheader("Proxy-Authenticate") }}, {{ httpheader("Proxy-Authorization") }}, {{ httpheader("TE") }}, {{ httpheader("Trailer") }}, {{ httpheader("Transfer-Encoding") }} та {{ httpheader("Upgrade") }}. Зазначте, що лише проміжні заголовки можуть бути встановлені за допомогою загального заголовку {{ httpheader("Connection") }}.</dd>
+</dl>
+
+<p>Наступний лист підсумовує заголовки HTTP по категорії їхнього використання. Список за абеткою дивись у навігаційному листі зліва.</p>
+
+<h2 id="Аутентифікація">Аутентифікація</h2>
+
+<dl>
+ <dt>{{HTTPHeader("WWW-Authenticate")}}</dt>
+ <dd>Визначають методи аутентифікації, що мають бути використані для отримання доступу до ресурсу.</dd>
+ <dt>{{HTTPHeader("Authorization")}}</dt>
+ <dd>Містить облікові данні для аутентифікації агента користувача сервером.</dd>
+ <dt>{{HTTPHeader("Proxy-Authenticate")}}</dt>
+ <dd>Визначає метод аутентифікації, який має бути використаний для отримання доступу до ресурсу через проксі сервер.</dd>
+ <dt>{{HTTPHeader("Proxy-Authorization")}}</dt>
+ <dd>Містить облікові данні для аутентифікації агента користувача проксі сервером.</dd>
+</dl>
+
+<h2 id="Кешування">Кешування</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Age")}}</dt>
+ <dd>Час у секундах, який об'єкт має бути у кеші проксі.</dd>
+ <dt>{{HTTPHeader("Cache-Control")}}</dt>
+ <dd>Означує директиви механізму кешування як у запиті, так і у відповіді.</dd>
+ <dt>{{HTTPHeader("Expires")}}</dt>
+ <dd>Дата/час, після якої відповідь вважається застарілою.</dd>
+ <dt>{{HTTPHeader("Pragma")}}</dt>
+ <dd>Залежний від реалізації заголовок, який може викликати декілька ефектів де завгодно у ланцюгу запит-відповідь. Використвується для зворотної сумісності з кешем HTTP/1.0, де заголовок <code>Cache-Control</code> ще не присутній.</dd>
+ <dt>{{HTTPHeader("Warning")}}</dt>
+ <dd>Загальне попереджувальне поле, яке містить інформацію про імовірні проблеми.</dd>
+</dl>
+
+<h2 id="Клієнтські_підказки">Клієнтські підказки</h2>
+
+<dl>
+ <dt>
+ <p>HTTP Client hints are a work in progress. Actual documentation can be found on the <a href="https://httpwg.org/http-extensions/client-hints.html">website of the HTTP working group</a>.</p>
+ </dt>
+ <dt>{{HTTPHeader("Accept-CH")}} {{experimental_inline}}</dt>
+ <dd>Servers can advertise support for Client Hints using the Accept-CH header field or an equivalent HTML meta element with http-equiv attribute (<a href="https://httpwg.org/http-extensions/client-hints.html#HTML5"><cite>[HTML5]</cite></a>).</dd>
+ <dt>{{HTTPHeader("Content-DPR")}} {{experimental_inline}}</dt>
+ <dd>The “Content-DPR” response header field is a number that indicates the ratio between physical pixels over CSS px of the selected image response.</dd>
+ <dt>{{HTTPHeader("DPR")}} {{experimental_inline}}</dt>
+ <dd>The “DPR” request header field is a number that indicates the client’s current Device Pixel Ratio (DPR), which is the ratio of physical pixels over CSS px (Section 5.2 of <a href="https://httpwg.org/http-extensions/client-hints.html#CSSVAL"><cite>[CSSVAL]</cite></a>) of the layout viewport (Section 9.1.1 of <a href="https://httpwg.org/http-extensions/client-hints.html#CSS2"><cite>[CSS2]</cite></a>) on the device.</dd>
+ <dt>{{HTTPHeader("Save-Data")}} {{experimental_inline}}</dt>
+ <dd>The <a class="internalDFN" href="https://wicg.github.io/netinfo/#dom-networkinformation-savedata"><code>SaveData</code></a> [<cite><a class="bibref" href="https://wicg.github.io/netinfo/#bib-client-hints">CLIENT-HINTS</a></cite>] request header field consists of one or more tokens that indicate user agent's preference for reduced data usage</dd>
+ <dt>{{HTTPHeader("Viewport-Width")}} {{experimental_inline}}</dt>
+ <dd>
+ <div id="rfc.section.3.3.p.1">
+ <p>The “Viewport-Width” request header field is a number that indicates the layout viewport width in CSS px. The provided CSS px value is a number rounded to the smallest following integer (i.e. ceiling value).</p>
+ </div>
+
+ <div id="rfc.section.3.3.p.2">
+ <p>If Viewport-Width occurs in a message more than once, the last value overrides all previous occurrences.</p>
+ </div>
+ </dd>
+ <dt>{{HTTPHeader("Width")}} {{experimental_inline}}</dt>
+ <dd>
+ <div id="rfc.section.3.2.p.1">
+ <p>The “Width” request header field is a number that indicates the desired resource width in physical px (i.e. intrinsic size of an image). The provided physical px value is a number rounded to the smallest following integer (i.e. ceiling value).</p>
+ </div>
+
+ <div id="rfc.section.3.2.p.2">
+ <p>If the desired resource width is not known at the time of the request or the resource does not have a display width, the Width header field can be omitted. If Width occurs in a message more than once, the last value overrides all previous occurrences</p>
+ </div>
+ </dd>
+ <dt>{{HTTPHeader("Accept-CH-Lifetime")}} {{experimental_inline}}</dt>
+ <dd>Servers can ask the client to remember the set of Client Hints that the server supports for a specified period of time, to enable delivery of Client Hints on subsequent requests to the server’s origin (<a href="https://httpwg.org/http-extensions/client-hints.html#RFC6454"><cite>[RFC6454]</cite></a>).</dd>
+ <dt>{{HTTPHeader("Early-Data")}} {{experimental_inline}}</dt>
+ <dd>Indicates that the request has been conveyed in early data.</dd>
+</dl>
+
+<dl>
+ <dt>
+ <h2 id="Умови">Умови</h2>
+ </dt>
+ <dt>{{HTTPHeader("Last-Modified")}}</dt>
+ <dd>It is a validator, the last modification date of the resource, used to compare several versions of the same resource. It is less accurate than {{HTTPHeader("ETag")}}, but easier to calculate in some environments. Conditional requests using {{HTTPHeader("If-Modified-Since")}} and {{HTTPHeader("If-Unmodified-Since")}} use this value to change the behavior of the request.</dd>
+ <dt>{{HTTPHeader("ETag")}}</dt>
+ <dd>It is a validator, a unique string identifying the version of the resource. Conditional requests using {{HTTPHeader("If-Match")}} and {{HTTPHeader("If-None-Match")}} use this value to change the behavior of the request.</dd>
+ <dt>{{HTTPHeader("If-Match")}}</dt>
+ <dd>Makes the request conditional and applies the method only if the stored resource matches one of the given ETags.</dd>
+ <dt>{{HTTPHeader("If-None-Match")}}</dt>
+ <dd>Makes the request conditional and applies the method only if the stored resource doesn't match any of the given ETags. This is used to update caches (for safe requests), or to prevent to upload a new resource when one is already existing.</dd>
+ <dt>{{HTTPHeader("If-Modified-Since")}}</dt>
+ <dd>Makes the request conditional and expects the entity to be transmitted only if it has been modified after the given date. This is used to transmit data only when the cache is out of date.</dd>
+ <dt>{{HTTPHeader("If-Unmodified-Since")}}</dt>
+ <dd>Makes the request conditional and expects the entity to be transmitted only if it has not been modified after the given date. This is used to ensure the coherence of a new fragment of a specific range with previous ones, or to implement an optimistic concurrency control system when modifying existing documents.</dd>
+</dl>
+
+<h2 id="Управління_з'єднанням">Управління з'єднанням</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Connection")}}</dt>
+ <dd>Вказує<span class="tlid-translation translation"><span title=""> чи повинно мережне з'єднання залишатися відкритим після завершення поточної транзакції.</span></span></dd>
+ <dt>{{HTTPHeader("Keep-Alive")}}</dt>
+ <dd>Controls how long a persistent connection should stay open.</dd>
+</dl>
+
+<h2 id="Узгодження_змісту">Узгодження змісту</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Accept")}}</dt>
+ <dd>Informs the server about the types of data that can be sent back. It is MIME-type.</dd>
+ <dt>{{HTTPHeader("Accept-Charset")}}</dt>
+ <dd>Informs the server about which character set the client is able to understand.</dd>
+ <dt>{{HTTPHeader("Accept-Encoding")}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Інформує сервер про алгоритм кодування, зазвичай алгоритм стиснення, який може бути використаний на ресурсі, відправленому назад.</span></span></dd>
+ <dt>{{HTTPHeader("Accept-Language")}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Інформує сервер про мову, на яку сервер очікує відправлення.</span> <span title="">Це рекомендація і не обов'язково знаходиться під повним контролем користувача: сервер завжди повинен звертати увагу, щоб не перевизначити явний вибір користувача (наприклад, вибір мови у випадаючому списку).</span></span></dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Контроль">Контроль</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Expect")}}</dt>
+ <dd>Indicates expectations that need to be fulfilled by the server in order to properly handle the request.</dd>
+ <dt>{{HTTPHeader("Max-Forwards")}}</dt>
+ <dd>...</dd>
+</dl>
+
+<h2 id="Cookies">Cookies</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Cookie")}}</dt>
+ <dd>Contains stored <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a> previously sent by the server with the {{HTTPHeader("Set-Cookie")}} header.</dd>
+ <dt>{{HTTPHeader("Set-Cookie")}}</dt>
+ <dd>Send cookies from the server to the user agent.</dd>
+ <dt>{{HTTPHeader("Cookie2")}} {{obsolete_inline}}</dt>
+ <dd>Used to contain an HTTP cookie, previously sent by the server with the {{HTTPHeader("Set-Cookie2")}} header, but has been obsoleted by the specification. Use {{HTTPHeader("Cookie")}} instead.</dd>
+ <dt>{{HTTPHeader("Set-Cookie2")}} {{obsolete_inline}}</dt>
+ <dd>Used to send cookies from the server to the user agent, but has been obsoleted by the specification. Use {{HTTPHeader("Set-Cookie")}} instead.</dd>
+ <dt>
+ <h2 id="CORS">CORS</h2>
+ </dt>
+ <dt>{{HTTPHeader("Access-Control-Allow-Origin")}}</dt>
+ <dd>Indicates whether the response can be shared.</dd>
+ <dt>{{HTTPHeader("Access-Control-Allow-Credentials")}}</dt>
+ <dd>Indicates whether the response to the request can be exposed when the credentials flag is true.</dd>
+ <dt>{{HTTPHeader("Access-Control-Allow-Headers")}}</dt>
+ <dd>Used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.</dd>
+ <dt>{{HTTPHeader("Access-Control-Allow-Methods")}}</dt>
+ <dd>Specifies the method or methods allowed when accessing the resource in response to a preflight request.</dd>
+ <dt>{{HTTPHeader("Access-Control-Expose-Headers")}}</dt>
+ <dd>Indicates which headers can be exposed as part of the response by listing their names.</dd>
+ <dt>{{HTTPHeader("Access-Control-Max-Age")}}</dt>
+ <dd>Indicates how long the results of a preflight request can be cached.</dd>
+ <dt>{{HTTPHeader("Access-Control-Request-Headers")}}</dt>
+ <dd>Used when issuing a preflight request to let the server know which HTTP headers will be used when the actual request is made.</dd>
+ <dt>{{HTTPHeader("Access-Control-Request-Method")}}</dt>
+ <dd>Used when issuing a preflight request to let the server know which <a href="/en-US/docs/Web/HTTP/Methods">HTTP method</a> will be used when the actual request is made.</dd>
+ <dt>{{HTTPHeader("Origin")}}</dt>
+ <dd>Indicates where a fetch originates from.</dd>
+</dl>
+
+<h2 id="Не_відстежується">Не відстежується</h2>
+
+<dl>
+ <dt>{{HTTPHeader("DNT")}}</dt>
+ <dd>Used for expressing the user's tracking preference.</dd>
+ <dt>{{HTTPHeader("Tk")}}</dt>
+ <dd>Indicates the tracking status that applied to the corresponding request.</dd>
+</dl>
+
+<h2 id="Завантаження">Завантаження</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Content-Disposition")}}</dt>
+ <dd>Is a response header if the resource transmitted should be displayed inline (default behavior when the header is not present), or it should be handled like a download and the browser should present a 'Save As' window.</dd>
+</dl>
+
+<h2 id="Інформація_про_тіло_повідомлення">Інформація про тіло повідомлення</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Content-Length")}}</dt>
+ <dd>indicates the size of the entity-body, in decimal number of octets, sent to the recipient.</dd>
+ <dt>{{HTTPHeader("Content-Type")}}</dt>
+ <dd>Indicates the media type of the resource.</dd>
+ <dt>{{HTTPHeader("Content-Encoding")}}</dt>
+ <dd>Used to specify the compression algorithm.</dd>
+ <dt>{{HTTPHeader("Content-Language")}}</dt>
+ <dd>Describes the language(s) intended for the audience, so that it allows a user to differentiate according to the users' own preferred language.</dd>
+ <dt>{{HTTPHeader("Content-Location")}}</dt>
+ <dd>Indicates an alternate location for the returned data.</dd>
+ <dt>
+ <h2 id="Проксі">Проксі</h2>
+ </dt>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("Forwarded")}}</dt>
+ <dd>Contains information from the client-facing side of proxy servers that is altered or lost when a proxy is involved in the path of the request.</dd>
+ <dt>{{HTTPHeader("X-Forwarded-For")}} {{non-standard_inline}}</dt>
+ <dd>Identifies the originating IP addresses of a client connecting to a web server through an HTTP proxy or a load balancer.</dd>
+ <dt>{{HTTPHeader("X-Forwarded-Host")}} {{non-standard_inline}}</dt>
+ <dd>Identifies the original host requested that a client used to connect to your proxy or load balancer.</dd>
+ <dt>{{HTTPHeader("X-Forwarded-Proto")}} {{non-standard_inline}}</dt>
+ <dd>identifies the protocol (HTTP or HTTPS) that a client used to connect to your proxy or load balancer.</dd>
+ <dt>{{HTTPHeader("Via")}}</dt>
+ <dd>Added by proxies, both forward and reverse proxies, and can appear in the request headers and the response headers.</dd>
+</dl>
+
+<h2 id="Перенаправлення">Перенаправлення</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Location")}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Позначає URL-адресу сторінки для перенаправлення</span></span>.</dd>
+</dl>
+
+<h2 id="Контекст_запиту">Контекст запиту</h2>
+
+<dl>
+ <dt>{{HTTPHeader("From")}}</dt>
+ <dd>Contains an Internet email address for a human user who controls the requesting user agent.</dd>
+ <dt>{{HTTPHeader("Host")}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Вказує ім'я домену сервера (для віртуального хостингу) і (при необхідності) номер TCP-порту, на якому прослуховується сервер.</span></span></dd>
+ <dt>{{HTTPHeader("Referer")}}</dt>
+ <dd>The address of the previous web page from which a link to the currently requested page was followed.</dd>
+ <dt>{{HTTPHeader("Referrer-Policy")}}</dt>
+ <dd>Governs which referrer information sent in the {{HTTPHeader("Referer")}} header should be included with requests made.</dd>
+ <dt>{{HTTPHeader("User-Agent")}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Містить характеристичний рядок, що дозволяє одноранговим мережним протоколам ідентифікувати тип програми, операційну систему, постачальника програмного забезпечення або версію програмного забезпечення користувача, що запитує програмне забезпечення.</span> <span title="">Див. Також посилання на рядок користувача агента Firefox. </span></span><a href="/uk/docs/Web/HTTP/Headers/User-Agent/Firefox">посилання на рядок користувача Firefox</a>.</dd>
+</dl>
+
+<h2 id="Контекст_відповіді">Контекст відповіді</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Allow")}}</dt>
+ <dd>Lists the set of HTTP request methods support by a resource.</dd>
+ <dt>{{HTTPHeader("Server")}}</dt>
+ <dd>Contains information about the software used by the origin server to handle the request.</dd>
+</dl>
+
+<h2 id="Діапазон_запитів">Діапазон запитів</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Accept-Ranges")}}</dt>
+ <dd>Indicates if the server supports range requests and if so, in which unit the range can be expressed.</dd>
+ <dt>{{HTTPHeader("Range")}}</dt>
+ <dd>Indicates the part of a document that the server should return.</dd>
+ <dt>{{HTTPHeader("If-Range")}}</dt>
+ <dd>Creates a conditional range request that is only fulfilled if the given etag or date matches the remote resource. Used to prevent downloading two ranges from incompatible version of the resource.</dd>
+ <dt>{{HTTPHeader("Content-Range")}}</dt>
+ <dd>Indicates where in a full body message a partial message belongs.</dd>
+</dl>
+
+<h2 id="Безпека">Безпека</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Content-Security-Policy")}} ({{Glossary("CSP")}})</dt>
+ <dd>Controls resources the user agent is allowed to load for a given page.</dd>
+ <dt>{{HTTPHeader("Content-Security-Policy-Report-Only")}}</dt>
+ <dd>Allows web developers to experiment with policies by monitoring (but not enforcing) their effects. These violation reports consist of {{Glossary("JSON")}} documents sent via an HTTP <code>POST</code> request to the specified URI.</dd>
+ <dt>{{HTTPHeader("Public-Key-Pins")}} ({{Glossary("HPKP")}})</dt>
+ <dd>Associates a specific cryptographic public key with a certain web server to decrease the risk of {{Glossary("MITM")}} attacks with forged certificates.</dd>
+ <dt>{{HTTPHeader("Public-Key-Pins-Report-Only")}}</dt>
+ <dd>Sends reports to the report-uri specified in the header and does still allow clients to connect to the server even if the pinning is violated.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}})</dt>
+ <dd>Force communication using HTTPS instead of HTTP.</dd>
+ <dt>{{HTTPHeader("Upgrade-Insecure-Requests")}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Надсилає на сервер сигнал, який вказує на бажання клієнта на зашифровану і аутентифіковану відповідь, і що він може успішно обробити директиву </span></span>{{CSP("upgrade-insecure-requests")}}<span class="tlid-translation translation"><span title="">  </span></span></dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("X-Content-Type-Options")}}</dt>
+ <dd>Disables MIME sniffing and forces browser to use the type given in {{HTTPHeader("Content-Type")}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("X-Frame-Options")}} (XFO)</dt>
+ <dd>Indicates whether a browser should be allowed to render a page in a {{HTMLElement("frame")}}, {{HTMLElement("iframe")}} or {{HTMLElement("object")}}</dd>
+ <dt>{{HTTPHeader("X-XSS-Protection")}}</dt>
+ <dd>Enables cross-site scripting filtering.</dd>
+</dl>
+
+<h2 id="Події_надіслані_сервером">Події надіслані сервером</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Ping-From")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Ping-To")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Last-Event-ID")}}</dt>
+ <dd>...</dd>
+</dl>
+
+<h2 id="Кодування_передачі">Кодування передачі</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Transfer-Encoding")}}</dt>
+ <dd>Specifies the the form of encoding used to safely transfer the entity to the user.</dd>
+ <dt>{{HTTPHeader("TE")}}</dt>
+ <dd>Specifies the transfer encodings the user agent is willing to accept.</dd>
+ <dt>{{HTTPHeader("Trailer")}}</dt>
+ <dd>Allows the sender to include additional fields at the end of chunked message.</dd>
+</dl>
+
+<h2 id="WebSockets">WebSockets</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Sec-WebSocket-Key")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Sec-WebSocket-Extensions")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Sec-WebSocket-Accept")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Sec-WebSocket-Protocol")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Sec-WebSocket-Version")}}</dt>
+ <dd>...</dd>
+</dl>
+
+<h2 id="Інше">Інше</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Date")}}</dt>
+ <dd>Contains the date and time at which the message was originated.</dd>
+ <dt>{{HTTPHeader("Large-Allocation")}}</dt>
+ <dd>Tells the browser that the page being loaded is going to want to perform a large allocation.</dd>
+ <dt>{{HTTPHeader("Link")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Retry-After")}}</dt>
+ <dd>Indicates how long the user agent should wait before making a follow-up request.</dd>
+ <dt>{{HTTPHeader("SourceMap")}}</dt>
+ <dd>Links generated code to a <a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">source map</a>.</dd>
+ <dt>{{HTTPHeader("Upgrade")}}</dt>
+ <dd>The relevant RFC document for the <a href="https://tools.ietf.org/html/rfc7230#section-6.7">Upgrade header field is RFC 7230, section 6.7</a>.  The standard establishes rules for upgrading or changing to a different protocol on the current client, server, transport protocol connection.  For example, this header standard allows a client to change from HTTP 1.1 to HTTP 2.0, assuming the server decides to acknowledge and implement the Upgrade header field.  Niether party is required to accept the terms specified in the Upgrade header field.  It can be used in both client and server headers.  If the Upgrade header field is specified, then the sender MUST also send the Connection header field with the upgrade option specified.  For details on the Connection header field <a href="https://tools.ietf.org/html/rfc7230#section-6.1">please see section 6.1 of the aforementioned RFC</a>.</dd>
+ <dt>{{HTTPHeader("Vary")}}</dt>
+ <dd>Determines how to match future request headers to decide whether a cached response can be used rather than requesting a fresh one from the origin server.</dd>
+ <dt>{{HTTPHeader("X-DNS-Prefetch-Control")}}</dt>
+ <dd>Controls DNS prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as URLs for items referenced by the document, including images, CSS, JavaScript, and so forth.</dd>
+ <dt>{{HTTPHeader("X-Firefox-Spdy")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("X-Requested-With")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("X-UA-Compatible")}}</dt>
+ <dd>...</dd>
+</dl>
+
+<h2 id="Внесок">Внесок</h2>
+
+<p>Ви можете допомогти, <a href="/en-US/docs/MDN/Contribute/Howto/Document_an_HTTP_header">написав нові записи</a> або покращити існуючі.</p>
+
+<h2 id="Дивись_також">Дивись також</h2>
+
+<ul>
+ <li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_header_fields">Wikipedia page on List of HTTP headers</a></li>
+ <li><a href="https://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a></li>
+</ul>
diff --git a/files/uk/web/http/заголовки/location/index.html b/files/uk/web/http/заголовки/location/index.html
new file mode 100644
index 0000000000..0f68c1e1dc
--- /dev/null
+++ b/files/uk/web/http/заголовки/location/index.html
@@ -0,0 +1,78 @@
+---
+title: Location
+slug: Web/HTTP/Заголовки/Location
+translation_of: Web/HTTP/Headers/Location
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="tlid-translation translation"><span title="">Заголовок відповіді </span></span><strong><code>Location</code></strong> <span class="tlid-translation translation"><span title="">вказує URL-адресу для перенаправлення сторінки.</span> <span title="">Він надає лише значення, коли подається відповідь зі статусом 3xx (перенаправлення) або 201 (створений).</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">У випадках перенаправлення, метод HTTP, який використовується для внесення нового запиту на вибір сторінки, на яку позначається </span></span><code>Location</code><span class="tlid-translation translation"><span title="">, залежить від оригінального методу та виду перенаправлення:</span></span></p>
+
+<ul>
+ <li><span class="tlid-translation translation"><span title="">Якщо відповіді </span></span>{{HTTPStatus("303")}} (Див.також)<span class="tlid-translation translation"><span title=""> завжди призводять до використання методу </span></span>{{HTTPMethod("GET")}}<span class="tlid-translation translation"><span title="">, </span></span>{{HTTPStatus("307")}} <span class="tlid-translation translation"><span title="">(Тимчасове перенаправлення) та</span> </span>{{HTTPStatus("308")}}  <span class="tlid-translation translation"><span title="">(Постійне перенаправлення) не змінює метод, використаний у вихідному запиті;</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">{{HTTPStatus ("301")}} (Постійне перенаправлення) і {{HTTPStatus ("302")}} (Знайдено) не змінюють метод більшу частину часу, хоча старі користувачі-агенти можуть це робити (так що ви, в основному,</span> <span title="">не відомо).</span></span></li>
+</ul>
+
+<p><span class="tlid-translation translation"><span title="">Усі відповіді з одним із цих кодів стану надсилають заголовок </span></span><code>Location</code> <span class="tlid-translation translation"><span title="">.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">У випадках створення ресурсу, сервер вказує URL-адресу новоствореного ресурсу.</span></span></p>
+
+<p><code>Location</code> <span class="tlid-translation translation"><span title="">та {{HTTPHeader ("Content-Location")}} є різними: </span></span><code>Location</code> <span class="tlid-translation translation"><span title="">вказує на ціль перенаправлення (або URL новоствореного ресурсу), тоді як {{HTTPHeader ("Content-Location")}} вказує на</span> <span title="">пряму URL-адресу, яка використовується для доступу до ресурсу, коли відбувається узгодження вмісту, без необхідності подальшого узгодження вмісту.</span> </span><code>Location</code> <span class="tlid-translation translation"><span title="">є заголовком, пов'язаним з відповіддю, тоді як {{HTTPHeader ("Content-Location")}} асоціюється з повернутим об'єктом.</span></span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Location: &lt;url&gt;
+</pre>
+
+<h2 id="Директиви">Директиви</h2>
+
+<dl>
+ <dt>&lt;url&gt;</dt>
+ <dd><span class="tlid-translation translation"><span title="">Відносна (до URL-адреси запиту) або абсолютна URL-адреса.</span></span></dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre>Location: /index.html</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Location", "7.1.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Location")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Location")}}</li>
+ <li>Status of responses including a <code>Location</code> header: {{HTTPStatus("201")}}, {{HTTPStatus("301")}}, {{HTTPStatus("302")}}, {{HTTPStatus("303")}}, {{HTTPStatus("307")}}, {{HTTPStatus("308")}}.</li>
+</ul>
diff --git a/files/uk/web/http/заголовки/referer/index.html b/files/uk/web/http/заголовки/referer/index.html
new file mode 100644
index 0000000000..d01d28a5a8
--- /dev/null
+++ b/files/uk/web/http/заголовки/referer/index.html
@@ -0,0 +1,80 @@
+---
+title: Referer
+slug: Web/HTTP/Заголовки/Referer
+translation_of: Web/HTTP/Headers/Referer
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span id="result_box" lang="uk"><span>Заголовок запиту </span></span> <code><strong>Referer</strong></code> <span lang="uk"><span> містить адресу попередньої веб-сторінки, з якої було отримано посилання на поточну запитувану сторінку.</span> <span>Заголовок </span></span> <code>Referer</code> <span lang="uk"><span> дозволяє серверам визначати, звідки люди відвідують їх, і можуть використовувати ці дані для аналітики, ведення журналів або оптимізованого кешування, наприклад.</span></span></p>
+
+<p>Зауважте, що написання referer є помилкою слову "referrer". Дивіться {{interwiki("wikipedia", "HTTP_referer", "HTTP referer on Wikipedia")}} більш детальніше.</p>
+
+<div class="warning">
+<p>Заголовок <code>Referer</code> потенційно має можливість для виявлення інформації про історію перегляду  браузера користувача, що є конфіденційним.</p>
+</div>
+
+<p>Заголовок <code>Referer</code> не надсилається браузерами, якщо:</p>
+
+<ul>
+ <li>referring-ресурс є локальним "файлом" або "даними" URI,</li>
+ <li>
+  <p>використовується незахищений HTTP-запит, а сторінка переходу отримувалась за допомогою захищеного протоколу (HTTPS).</p>
+ </li>
+</ul>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовка</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>Так</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Referer: &lt;url&gt;
+</pre>
+
+<h2 id="Директиви">Директиви</h2>
+
+<dl>
+ <dt>&lt;url&gt;</dt>
+ <dd>Абсолютна або часткова адреса попередньої веб-сторінки, з якої було зроблено посилання на поточну запитувана сторінку. URL фрагменти (i.e. "#section") та інформація про користувача (i.e. "username:password" в "https://username:password@example.com/foo/bar/") не входять.</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre>Referer: https://developer.mozilla.org/en-US/docs/Web/JavaScript</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Назва</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Referer", "5.5.2")}}</td>
+   <td>Протокол передачі гіпертексту (HTTP/1.1): Семантика та зміст</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_браузера">Сумісність браузера</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці генерується зі структурованих даних. Якщо ви хочете зробити свій внесок у свої дані, будь ласка відвідайте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і надішліть нам pull-запит.</p>
+
+<p>{{Compat("http.headers.Referer")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{interwiki("wikipedia", "HTTP_referer", "HTTP referer on Wikipedia")}}</li>
+ <li>{{HTTPHeader("Referrer-Policy")}}</li>
+</ul>
diff --git a/files/uk/web/http/заголовки/user-agent/index.html b/files/uk/web/http/заголовки/user-agent/index.html
new file mode 100644
index 0000000000..1e4eaf80ee
--- /dev/null
+++ b/files/uk/web/http/заголовки/user-agent/index.html
@@ -0,0 +1,133 @@
+---
+title: User-Agent
+slug: Web/HTTP/Заголовки/User-Agent
+translation_of: Web/HTTP/Headers/User-Agent
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span id="result_box" lang="uk"><span>Заголовок запиту User-Agent містить характерний рядок, який дозволяє однорідним мережевим протоколам ідентифікувати тип програми, операційну систему, постачальника програмного забезпечення або версію програмного забезпечення запитуючого користувацького агента програмного забезпечення.</span></span></p>
+
+<div class="note">
+<p><span class="short_text" id="result_box" lang="uk"><span>Будь ласка, прочитайте</span></span> <a href="/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent">Виявлення браузера за допомогою агента користувача</a> <span id="result_box" lang="uk"><span>і чому обслуговування різних веб-сторінок або служб для різних браузерів зазвичай погана ідея.</span></span></p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис"><span class="short_text" id="result_box" lang="uk"><span>Синтаксис</span></span></h2>
+
+<pre class="syntaxbox">User-Agent: &lt;product&gt; / &lt;product-version&gt; &lt;comment&gt;
+
+Common format for web browsers:
+
+User-Agent: Mozilla/&lt;version&gt; (&lt;system-information&gt;) &lt;platform&gt; (&lt;platform-details&gt;) &lt;extensions&gt;
+</pre>
+
+<h2 id="Директиви"><span class="short_text" id="result_box" lang="uk"><span>Директиви</span></span></h2>
+
+<dl>
+ <dt>&lt;product&gt;</dt>
+ <dd>A product identifier</dd>
+ <dt>&lt;product-version&gt;</dt>
+ <dd>A version number of the product.</dd>
+ <dt>&lt;comment&gt;</dt>
+ <dd>Zero or more comments containing sub product information, for example.</dd>
+</dl>
+
+<h2 id="Firefox_UA_string">Firefox UA string</h2>
+
+<p>For more details on Firefox and Gecko based user agent strings, see the <a href="/en-US/docs/Web/HTTP/Headers/User-Agent/Firefox">Firefox user agent string reference</a>. The UA string of Firefox itself is broken down into four components:</p>
+
+<p><strong>Mozilla/5.0 (<em>platform</em>; rv:<em>geckoversion</em>) Gecko/<em>geckotrail</em> Firefox/<em>firefoxversion</em></strong></p>
+
+<ul>
+ <li><em><strong>Mozilla/5.0</strong></em> is the general token that says the browser is Mozilla compatible, and is common to almost every browser today.</li>
+ <li><strong><em>platform</em></strong> describes the native platform the browser is running on (e.g. Windows, Mac, Linux or Android), and whether or not it's a mobile phone. Firefox OS phones simply say "Mobile"; the web is the platform. Note that <strong><em>platform</em></strong> can consist of multiple "; "-separated tokens. See below for further details and examples.</li>
+ <li><strong>rv:<em>geckoversion</em></strong> indicates the release version of Gecko (such as <em>"17.0"</em>). In recent browsers, <strong><em>geckoversion</em></strong> is the same as <strong><em>firefoxversion</em></strong>.</li>
+ <li><strong><em>Gecko/geckotrail</em></strong> indicates that the browser is based on Gecko.</li>
+ <li>On Desktop, <em><strong>geckotrail</strong></em> is the fixed string "20100101"</li>
+ <li><em><strong>Firefox/firefoxversion</strong></em> indicates the browser is Firefox, and provides the version (such as "<em>17.0"</em>).</li>
+</ul>
+
+<h3 id="Examples">Examples</h3>
+
+<pre>Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0
+Mozilla/5.0 (Macintosh; Intel Mac OS X <em>x.y</em>; rv:42.0) Gecko/20100101 Firefox/42.0
+</pre>
+
+<h2 id="Chrome_UA_string">Chrome UA string</h2>
+
+<p>The Chrome (or Chromium/blink-based engines) user agent string is similar to the Firefox format. For compatibility, it adds strings like "KHTML, like Gecko" and "Safari".</p>
+
+<h3 id="Examples_2">Examples</h3>
+
+<pre>Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36</pre>
+
+<h2 id="Opera_UA_string">Opera UA string</h2>
+
+<p>The Opera browser is also based on the blink engine, which is why it almost looks the same, but adds "OPR/&lt;version&gt;".</p>
+
+<h3 id="Examples_3">Examples</h3>
+
+<pre>Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36 OPR/38.0.2220.41</pre>
+
+<h2 id="Safari_UA_string">Safari UA string</h2>
+
+<p>In this example, the user agent string is mobile safari version. It contains the word "Mobile".</p>
+
+<h3 id="Examples_4">Examples</h3>
+
+<pre>Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1</pre>
+
+<h2 id="Internet_Explorer_UA_string">Internet Explorer UA string</h2>
+
+<h3 id="Examples_5">Examples</h3>
+
+<pre>Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)</pre>
+
+<h2 id="Crawler_and_bot_UA_strings">Crawler and bot UA strings</h2>
+
+<h3 id="Examples_6">Examples</h3>
+
+<pre>Googlebot/2.1 (+http://www.google.com/bot.html)</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "User-Agent", "5.5.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.User-Agent")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2013/09/user-agent-detection-history-and-checklist/">User-Agent detection, history and checklist</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Headers/User-Agent/Firefox">Firefox user agent string reference</a></li>
+ <li>
+  <p><a href="/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent">Browser detection using the user agent</a></p>
+ </li>
+</ul>
diff --git a/files/uk/web/http/заголовки/x-forwarded-proto/index.html b/files/uk/web/http/заголовки/x-forwarded-proto/index.html
new file mode 100644
index 0000000000..169ab2d0b2
--- /dev/null
+++ b/files/uk/web/http/заголовки/x-forwarded-proto/index.html
@@ -0,0 +1,69 @@
+---
+title: X-Forwarded-Proto
+slug: Web/HTTP/Заголовки/X-Forwarded-Proto
+translation_of: Web/HTTP/Headers/X-Forwarded-Proto
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>X-Forwarded-Proto</code></strong> (XFP) - це HTTP заголовок, який де-факто використовується використув для ідентифікації протоколу (HTTP or HTTPS) який використовує клієнт, для підключення через проксі або до лоад балансера.</p>
+
+<p>Логи доступу до сервера включають протокол, що використовується між сервером та лоад балансером, але не включають той, за допомогою якого клієнт підключається до лоад балансера. Для того щоб передати інформацію про протокол з'єднання між клієнтом та лоад балансером на сервер, потрібно додати до запиту заголовок <code>X-Forwarded-Proto</code>.</p>
+
+<p>Стандартизованою версією цього заголовка являється - HTTP {{HTTPHeader("Forwarded")}} заголовок.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовка</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">X-Forwarded-Proto: &lt;protocol&gt;
+</pre>
+
+<h2 id="Директиви">Директиви</h2>
+
+<dl>
+ <dt>&lt;protocol&gt;</dt>
+ <dd>Протокол, що переадресовуюється (http або https).</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre>X-Forwarded-Proto: https</pre>
+
+<p>Інші не стандартні форми використання:</p>
+
+<pre># Microsoft
+Front-End-Https: on
+
+X-Forwarded-Protocol: https
+X-Forwarded-Ssl: on
+X-Url-Scheme: https
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Не являється частиною поточної специфікації. Стандартизована версія йього заголовку - {{HTTPHeader("Forwarded")}}.</p>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+
+
+<p>{{Compat("http.headers.X-Forwarded-Proto")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{HTTPHeader("Forwarded")}}</li>
+ <li>{{HTTPHeader("X-Forwarded-For")}}</li>
+ <li>{{HTTPHeader("X-Forwarded-Host")}}</li>
+</ul>
diff --git a/files/uk/web/index.html b/files/uk/web/index.html
new file mode 100644
index 0000000000..930adb586b
--- /dev/null
+++ b/files/uk/web/index.html
@@ -0,0 +1,121 @@
+---
+title: Веб-технології для розробників
+slug: Web
+tags:
+  - Landing
+  - NeedsTranslation
+  - Веб
+translation_of: Web
+---
+<p>Відкритий веб представляє неймовірні можливості для людей які хочуть створювати веб-сайти або веб-додатки. Щоб скористатися всіма перевагами цих технологій, ви повинні знати, як їх використовувати. Нижче ви знайдете посилання на документацію MDN для різноманітних веб-технологій.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Веб-технології">Веб-технології</h2>
+
+<h3 id="Основи">Основи</h3>
+
+<dl>
+ <dt><a href="/uk/docs/Web/HTML">HTML</a></dt>
+ <dd>(англ. <em><span lang="en">HyperText Markup Language</span></em> — Мова розмітки гіпертексту) це мова, що використовується для опису і визначення вмісту веб-сторінки в добре структурованому форматі.</dd>
+ <dt><a href="/uk/docs/Web/CSS">CSS</a></dt>
+ <dd>(англ.<em>Cascading Style Sheets</em>  — Каскадні таблиці стилів) використовуються для опису зовнішнього вигляду веб-вмісту.</dd>
+</dl>
+
+<h3 id="Скрипти">Скрипти</h3>
+
+<dl>
+ <dt><a href="/uk/docs/Web/JavaScript">JavaScript</a></dt>
+ <dd>JavaScript є мовою програмування, яка працює у браузері, що використовується, для побудови просунутих інтерактивних веб-сайтів та додатків для безпечного виконання в браузері.</dd>
+ <dd>З появою {{glossary("Node.js")}}, ви також можете виконувати JavaScript на сервері.</dd>
+ <dt><a href="/uk/docs/Web/Reference/API">Web APIs</a></dt>
+ <dd>Даний розділ містить довідкові матеріали, по кожному API, які надають величезні можливості для створення веб-сценаріїв, включаючи <a href="https://developer.mozilla.org/uk/docs/DOM">DOM</a> та всі пов'язані з ним API, які ви можете використовувати для побудови веб-контенту і додатків.
+ <ul>
+  <li><a href="/uk/docs/Web/API" title="/uk/docs/Web/API">Web API interface reference</a> - всі інтерфейси відсортовані по-алфавіту.</li>
+  <li><a href="/uk/docs/WebAPI">WebAPI</a> - перелік API для взаємодії з пристроями та іншими API корисними для додатків.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Графіка">Графіка</h3>
+
+<dl>
+ <dt><a href="/uk/docs/SVG">SVG</a></dt>
+ <dd>(<em>англ. Scalable Vector Graphics - </em>Масштабована Векторна Графіка) дозволяє описати зображення як набір векторів (ліній) та форм, що дозволяє плавне масштабування незалежно від розміру, без втрат якості.</dd>
+ <dt><a href="/uk/docs/Web/WebGL" title="/uk/docs/Web/WebGL">WebGL</a></dt>
+ <dd>WebGL додає 3D-графіку у Веб, надаючи API, що побудований на основі OpenGL ES 2.0, який дозволяє використовувати його в HTML {{HTMLElement("canvas")}} елементах.</dd>
+</dl>
+
+<h3 id="Інше">Інше</h3>
+
+<dl>
+ <dt><a href="/uk/docs/Web/MathML">MathML</a></dt>
+ <dd>Мова Математичної Розмітки дозволяє відтворювати складні математичні рівняння і синтаксис.</dd>
+</dl>
+</div>
+<span style="display: none;"> </span>
+
+<div class="section">
+<div>
+<h2 class="Documentation" id="Документація_за_типом">Документація за типом </h2>
+</div>
+
+<div>
+<dl>
+ <dt>
+ <p><a href="/uk/docs/Web/Guide">Розробка Веб-застосунків</a></p>
+ </dt>
+ <dd>
+ <p>Цей розділ містить статті, що пояснюють техніки, які використовують для розробки веб-застосунків для мобільних пристроїв, настільних комп'ютерів та середовищ Firefox OS.</p>
+ </dd>
+ <dt>
+ <p><a href="/uk/docs/Web/Tutorials">Підручники для веб-розробників</a></p>
+ </dt>
+ <dd>
+ <p>Тут ти знадеш перелік навчальних матеріалів, що дозволять тобі крок за кроком опанувати API, веб-технології та знайти відповіді на дотичні до цих тем питання.</p>
+ </dd>
+ <dt>
+ <p><a href="/uk/docs/Web/Reference">Посилання</a></p>
+ </dt>
+ <dd>
+ <p><em>Ця сторінка міститиме посилання на усю довідникову інформацію проекту MDN, але поки що можна скористатись посиланнями на веб-технології в лівій секції сторінки.</em></p>
+ </dd>
+</dl>
+</div>
+
+<dl>
+</dl>
+
+<div>
+<h2 id="Інші_теми">Інші теми</h2>
+</div>
+
+<div>
+<dl>
+ <dt>
+ <p><a href="/uk/docs/Web/Apps">Розробка веб-додатків</a></p>
+ </dt>
+ <dd>
+ <p>Documentation for Web application developers; Web apps are true write-once, deploy anywhere apps for mobile, desktop, and Firefox OS.</p>
+ </dd>
+ <dt>
+ <p><a href="/uk/docs/Web/Accessibility">Доступність</a></p>
+ </dt>
+ <dd>
+ <p>Доступні веб-сайти надають можливість вільно користуватись можливостями мережі якомога більшій кількості людей, включно з тими, чиї можливості бачити, чути, тощо, певною мірою обмежені. Цей розділ статей надасть тобі інформацію про доступність у веб-розробці.</p>
+ </dd>
+ <dt>
+ <p><a href="/uk/docs/Web/Security">Безпека</a></p>
+ </dt>
+ <dd>
+ <p>Гарантувати безпеку свого веб-сайту чи веб-застосунку є життєвою необхідністю для його існування. Не дозволь персональним даним користувачів потрапити до рук "поганих хлопців", використавши поради з цього циклу статей.</p>
+ </dd>
+</dl>
+</div>
+
+<dl>
+</dl>
+</div>
+<span style="display: none;"> </span></div>
+
+<p><span class="alllinks"><a href="/uk/docs/tag/Web">Дивитись все...</a></span></p>
diff --git a/files/uk/web/javascript/a_re-introduction_to_javascript/index.html b/files/uk/web/javascript/a_re-introduction_to_javascript/index.html
new file mode 100644
index 0000000000..83db347460
--- /dev/null
+++ b/files/uk/web/javascript/a_re-introduction_to_javascript/index.html
@@ -0,0 +1,949 @@
+---
+title: Повторне введення в JavaScript (JS-підручник)
+slug: Web/JavaScript/A_re-introduction_to_JavaScript
+translation_of: Web/JavaScript/A_re-introduction_to_JavaScript
+---
+<div>{{jsSidebar}}</div>
+
+<h2 id="Вступ">Вступ</h2>
+
+<p>Чому повторне введення? Тому що {{Glossary ("JavaScript")}} відомий тим, що він є <a href="http://javascript.crockford.com/javascript.html">найпопулярнішою у світі мовою програмування</a>. Його часто висміюють як іграшку, але під його шаром оманливої простоти чекають потужні мовні особливості. JavaScript зараз використовується неймовірним числом популярних додатків, які показують, що більш глибоке знання цієї технології є важливим вмінням для будь-якого веб-розробника або розробника мобільних пристроїв.</p>
+
+<p>Варто почати з огляду історії мови. JavaScript був створений у 1995 році Бренданом Айком, коли він був інженером у Netscape. JavaScript був вперше випущений з Netscape 2 на початку 1996 року. Спочатку він мав назву LiveScript, але він був перейменований у злополучному маркетинговому рішенні, яке спробувало скористатися популярністю Java-мови Sun Microsystem - незважаючи на те, що вони мають мало спільного. З тих пір це стало джерелом плутанини.</p>
+
+<p>Трохи пізніше Microsoft випустила дуже схожу та практично сумісну мову JScript який йшов разом з Internet Explorer 3. Через пару місяців Netscape відправила мову JavaScript до <a class="external" href="http://www.ecma-international.org/">Ecma International</a>, Європейську організацію, яка займається стандартами, яка випустила першу версію стандарту {{Glossary("ECMAScript")}} в 1997 року. Стандарт отримав значуще оновлення в  <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript edition 3</a> в 1999 році, і залишається найстабільнішим до сьогоднішнього дня. Четверта версія була відхилена, через проблеми з ускладненням в мові. Більшість речей з четвертого видання послужили основою для стандарту ECMAScript edition 5, оприлюднений в грудні  2009 року, і для 6-го основного видання стандарту, оприлюдненого в червні  2015 року.</p>
+
+<div class="note">
+<p>На замітку:  На далі по тексту ми будемо називати мову ECMAScript як "JavaScript".</p>
+</div>
+
+<p>На відміну від більшості мов програмування, JavaScript не наслідує концепцію введення(input) та виведенн(output). Він спроектований таким чином, щоб запускатися як мова сценаріїв, вбудованих в середовище виконання. Найпопулярніше середовище виконання це браузер, однак інтепретатори JavaScript присутні також в Adobe Acrobat, Adobe Photoshop, SVG images, Yahoo's Widget engine, і навіть в серверному середовищі наприклад <a href="http://nodejs.org/" title="nodejs.org">Node.js</a>.</p>
+
+<h2 id="Загальний_огляд">Загальний огляд</h2>
+
+<p>JavaScript це мультіпарадігматична, динамічна мова з типами та операторами, стандартними вбудованими об'єктами  та методами. ЇЇ синтаксис базован на мовах Java та C - взагалі, більша частина структури цих мов закладена в JavaScript. JavaScript підтримує об'єктно-орієнтований підхід  через прототипи об'єктів, замість класів (дивись більше про  <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Inheritance_and_the_prototype_chain" title="prototypical inheritance">успадкування через прототипи</a> та ES2015 {{jsxref("Classes")}}). JavaScript також підтримує функціональне програмування — тому що  функції це  об'єкти, їх можна тримати в змінних та передавати як будь-які інші об'єкти.</p>
+
+<p>Давайте почнемо огляд з блоків будови будь-якої мови: з типів. програми JavaScript керують значеннями-даними та ці значення належать до якогось типу. JavaScript має наступні типи данних:</p>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+ <li>{{jsxref("String")}}</li>
+ <li>{{jsxref("Boolean")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Object")}}</li>
+ <li>{{jsxref("Symbol")}} (нове в ES2015)</li>
+</ul>
+
+<p>... О, ще й  {{jsxref("undefined")}} та {{jsxref("null")}}, які є ... досить відокремленими типами. Та {{jsxref("Array")}}, який є спеціальним видом об'єкту. Також {{jsxref("Date")}} та{{jsxref("RegExp")}}, які є вбудованними видами об'єктів. Та, якщо бути технічно акуратними, функція це всього-навсього спеціальний тип об'єкту. Тож діаграмма типів має виглядати наступним чином:</p>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+ <li>{{jsxref("String")}}</li>
+ <li>{{jsxref("Boolean")}}</li>
+ <li>{{jsxref("Symbol")}} (нове в ES2015)</li>
+ <li>{{jsxref("Object")}}
+  <ul>
+   <li>{{jsxref("Function")}}</li>
+   <li>{{jsxref("Array")}}</li>
+   <li>{{jsxref("Date")}}</li>
+   <li>{{jsxref("RegExp")}}</li>
+  </ul>
+ </li>
+ <li>{{jsxref("null")}}</li>
+ <li>{{jsxref("undefined")}}</li>
+</ul>
+
+<p>Також є вбудований {{jsxref("Error")}} тип. На першій діаграммі усе видається простішим, та далі ми обговоримо усі типи, що були описані.</p>
+
+<h2 id="Числа_Numbers">Числа (Numbers)</h2>
+
+<p>Numbers в JavaScript є "значення подвійної точністі 64-бітового формату IEEE 754", згідно специфікаціїї. Це має деякі цікаві наслідки. В JavaScript <em><strong>немає цілих чисел (integer)</strong></em>, тож вам треба бути уважнішими з аріфметикою в порівнянні з математикою мов C або Java. Таким чином, <em>ціле число насправді є неявним плаваючим</em>.</p>
+
+<p>Також, обережніше з такими випадками:</p>
+
+<pre class="brush: js notranslate">0.1 + 0.2 == 0.30000000000000004;
+</pre>
+
+<p>На практиці, цілі (integer) значення представляються як 32-бітні цілі, та деякі реалізації навіть зберігають їх таким чином до тих пір, <span class="tlid-translation translation" lang="uk"><span title="">поки не буде потреби виконати інструкцію, дійсну для числа (Number), але не для 32-бітного цілого числа.</span> <span title="">Це може бути важливо для побітових (bit-wise) операцій.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Підтримуються стандартні </span></span>арифметичні оператори (<a href="/uk/docs/Web/JavaScript/Reference/Operators#Arithmetic_operators">arithmetic operators</a>), <span class="tlid-translation translation" lang="uk"><span title="">включаючи додавання, віднімання, модуль (або залишок) тощо.</span> <span title="">Існує також вбудований об'єкт, про який ми не згадували раніше, так званий {{jsxref ("Math")}}, який забезпечує розширені математичні функції та константи:</span></span></p>
+
+<pre class="brush: js notranslate">Math.sin(3.5);
+var circumference = 2 * Math.PI * r;
+</pre>
+
+<p>Ви можете конвертувати рядки (string) в цілі числа (integer) за допомогою вбудованої {{jsxref("Global_Objects/parseInt", "parseInt()")}} функції. Вона приймає опційним другим аргументом основу системи числення (яку бажано передавати завжди):</p>
+
+<pre class="brush: js notranslate">parseInt('123', 10); // 123
+parseInt('010', 10); // 10
+</pre>
+
+<p>У браузерах попередніх версій рядки, що починаються з "0", розглядаються, як числа з основою 8 (radix 8), але це вже не є стандартом з 2013 року.  Вас може здивувати результат наступних дій в старших браузерах:</p>
+
+<pre class="brush: js notranslate">parseInt('010');  //  8
+parseInt('0x10'); // 16
+</pre>
+
+<p>В цьому зразку коду ми бачимо  {{jsxref("Global_Objects/parseInt", "parseInt()")}} функції приймають перший string як число в вісімковій системі (octal) через передуючий "0", да другий string приймається як число в шістнадцятковій системі (hexadecimal) через передуючий  "0x". <em>Шістнадцяткова нотація все ще оброблюється в нових браузерахю Тількі вісімкову було прибрано з мови</em>.</p>
+
+<p>Якщо бажаєте конвертувати бінарне число в звичайне ціле (integer), просто зміність базу (base):</p>
+
+<pre class="brush: js notranslate">parseInt('11', 2); // 3
+</pre>
+
+<p>Таким же чином, ви можете конвертувати числа із плаваючою комою, використавши вбудовані функції {{jsxref("Global_Objects/parseFloat", "parseFloat()")}}. На відміну від своїх двоюрідних сестер {{jsxref("Global_Objects/parseInt", "parseInt()")}} , <code>parseFloat()</code> завжди використовує десятичну базу.</p>
+
+<p>Ви також можете використовувати унарний операнд <code>+</code> для конвертації в числа (numbers):</p>
+
+<pre class="brush: js notranslate">+ '42';   // 42
++ '010';  // 10
++ '0x10'; // 16
+</pre>
+
+<p>Спеціальне значення, що називається {{jsxref("NaN")}} (скорочення від  "Not a Number" - не число) повертається якщо строка є не-числом (non-numeric):</p>
+
+<pre class="brush: js notranslate">parseInt('hello', 10); // NaN
+</pre>
+
+<p><code>NaN</code> токсичний! Якщо ви зробите його вхідними даними для будь-якої математичної операції - результатом буде також <code>NaN</code>:</p>
+
+<pre class="brush: js notranslate">NaN + 5; // NaN
+</pre>
+
+<p>Вы можете тестувати <code>NaN</code>, використовуючи вбудовану функцію  {{jsxref("Global_Objects/isNaN", "isNaN()")}}:</p>
+
+<pre class="brush: js notranslate">isNaN(NaN); // true
+</pre>
+
+<p>JavaScript також має спеціальні значення {{jsxref("Infinity")}} та <code>-Infinity</code>:</p>
+
+<pre class="brush: js notranslate"> 1 / 0; //  Infinity
+-1 / 0; // -Infinity
+</pre>
+
+<p>Ви можете тестувати <code>Infinity</code>, <code>-Infinity</code> <code>та</code><code>NaN</code> значення, використвовуючи вбудовані вбудовані функції {{jsxref("Global_Objects/isFinite", "isFinite()")}}:</p>
+
+<pre class="brush: js notranslate">isFinite(1 / 0); // false
+isFinite(-Infinity); // false
+isFinite(NaN); // false
+</pre>
+
+<div class="note">{{jsxref("Global_Objects/parseInt", "parseInt()")}} та {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} функції розкладають string допоки не зустрінуть символ, що не є валідним для заданого числового формату, потім повертає число, що було розгорнуто із string до цієї точки. Однак оператор "+" конвертує string до <code>NaN</code> якщо було виявлене некоректне значення. Просто спробуйте зробити парсінг для "10.2abc" кожним з методів у консолі та ви зрозумієте різницю краще.</div>
+
+<h2 id="Строки_Strings">Строки (Strings)</h2>
+
+<p>Строки в JavaScript є послідовністю знаків - <a href="/uk/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode">Unicode characters</a>. Це радісна новина для усіх, хто мав справи з інтернаціоналізацією ( internationalization). Якщо бути точнішими, це послідовність одиниць кодування UTF-16; кожна така одиниця представлена 16-бітовим числом. Кожний  Unicode знак представлен однією чи двома одиницями коду.</p>
+
+<p>Якщо бажаєте представити строку із одного символа-знака, ви просто використовуєте строку, що складається з одного символа.</p>
+
+<p>Що дізнатись довжину строки (в одиницях коду), зверніться до його  <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/String/length">length</a></code> властивості:</p>
+
+<pre class="brush: js notranslate">'hello'.length; // 5
+</pre>
+
+<p>Ось наша перша зустріч з об'єктами JavaScript! Ви помітили, що ви можете використовувати строку як {{jsxref("Object", "objects", "", 1)}} також? У строк є {{jsxref("String", "methods", "#Methods", 1)}} які дозволяють Вам керувати строками та мати доступ до інформації про строку:</p>
+
+<pre class="brush: js notranslate">'hello'.charAt(0); // "h"
+'hello, world'.replace('hello', 'goodbye'); // "goodbye, world"
+'hello'.toUpperCase(); // "HELLO"
+</pre>
+
+<h2 id="Інші_типи">Інші типи</h2>
+
+<p>JavaScript розрізняє {{jsxref("null")}}, якие є значенням, що показує свідому відсутність значення (та доступне лише через ключеве слово <code>null</code>), та {{jsxref("undefined")}}, яке є значенням типу <code>undefined</code> та вказує на неініціалізоване значення, яке ще не отримало присвоєння значення. Ми поговоримо про змінні пізніше, а зараз зазначимо, що в JavaScript можлива об'ява змінної без присвоєння значення. Якщо ви зробите це, тип змінної буде <code>undefined</code>. Взагалі, <code>undefined</code>  це константа.</p>
+
+<p>В JavaScript є булевий тип, з можливими значеннями<code> true</code> та <code>false</code> (обидва є ключовими словами) Будь-яке значення може бути перетворено в булевий тип, згідно наступних правил:</p>
+
+<ol>
+ <li><code>false</code>, <code>0</code>, пуста строка (<code>""</code>), <code>NaN</code>, <code>null</code>, <code>та</code><code>undefined</code> стають <code>false.</code></li>
+ <li>все інше - <code>true.</code></li>
+</ol>
+
+<p>Ви можете зробити цю конвертацію безпосередньо за допомогою <code>Boolean()</code> функції:</p>
+
+<pre class="brush: js notranslate">Boolean('');  // false
+Boolean(234); // true
+</pre>
+
+<p>Однак, це майже не використовується, тому що JavaScript <span class="tlid-translation translation" lang="uk"><span title="">буде мовчки виконувати це перетворення</span></span> коли очікується булеве значення, як в <code>if</code> твердженні (дивися нижче). Тому ми інколи говоримо просто "вірне значення" та "хибне значення", маючи на увазі значення, що стає <code>true</code> та <code>false</code> відповідно, при перетворенні на булеве. <span class="tlid-translation translation" lang="uk"><span title="">Як альтернативу, такі значення можна назвати відповідно "правдоподібними" та "хибними".</span></span></p>
+
+<p>Підтримуються такі булеві операції як <code>&amp;&amp;</code> (<em>логіч</em><em>ний ТА</em>), <code>||</code> (<em>логічній АБО</em>), <code>та</code><code>!</code> (<em>логічний НІ</em>); дивися про це нижче.</p>
+
+<h2 id="Змінні">Змінні</h2>
+
+<p>Нові змінні в JavaScript оголошуються за допомогою одного з трьох ключових слів: <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/const">const</a></code>, або <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/var" title="/en/JavaScript/Reference/Statements/var">var</a>. </code><br>
+ <br>
+ <strong><code>let</code> </strong>дозволяє оголосити змінну рівня блоку. Оголошена таким чином змінна доступна на рівні функціонального блоку, до якого вона <em>входить</em>. </p>
+
+<pre class="brush: js notranslate">let a;
+let name = 'Simon';
+</pre>
+
+<p>Наступний приклад демонструє область осяжності (scope) змінної, що оголошена за допомогою <code><strong>let</strong></code>:</p>
+
+<pre class="brush: js notranslate">// myLetVariable is *not* visible out here
+
+for (let myLetVariable = 0; myLetVariable &lt; 5; myLetVariable++) {
+  // myLetVariable is only visible in here
+}
+
+// myLetVariable is *not* visible out here
+
+</pre>
+
+<p><code><strong>const</strong></code><strong> </strong>дозволяє оголосити змінні, чиї значення не збираються бути змінені. Такі змінні доступні з функційного блоку, де були оголошені.</p>
+
+<pre class="brush: js notranslate">const Pi = 3.14; // змінна Pi встановлена
+Pi = 1; // викине помилку (error), тому що ви не можете змінювати постійні змінні (сonstant variable).</pre>
+
+<p><br>
+ <code><strong>var</strong></code> є самим загальним ключовим словом оголошень змінних. Він не має обмежень, що мають попередні два ключових слова. Це тому що це був єдиний спосіб оголошувати змінні в JavaScript. Змінна, що оголошена за допомогою <strong><code>var</code> </strong>доступна із функційного блоку, де була оголошена.</p>
+
+<pre class="brush: js notranslate">var a;
+var name = 'Simon';</pre>
+
+<p>Наступний приклад демонструє область осяжності (scope) змінної, що оголошена за допомогою <strong><code>var</code>:</strong></p>
+
+<pre class="brush: js notranslate">// myVarVariable *є* видимою звідси
+
+for (var myVarVariable = 0; myVarVariable &lt; 5; myVarVariable++) {
+  // myVarVariable є видимою для усієї функції
+}
+
+// myVarVariable *є* видимою звідси
+</pre>
+
+<p>Якщо ви оголосити змінну без присвоєння їй значення, її тип буде <code>undefined</code>.</p>
+
+<p>Важлива різниця між JavaScript та іншими мовами, такими як Java це те, що в JavaScript, блоки не мають області осяжності (scope); тільки функції мають область осяжності. Тому, якщо змінна визначена у складі виразу за допомогою <code>var</code>  (наприклад, всередені структури контроля <code>if</code>), вона буде видимою для зовнішньої функції. Однак, починаючи з ECMAScript 2015, <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/let">let</a></code> <code>та</code><code><a href="/uk/docs/Web/JavaScript/Reference/Statements/const">const</a></code> оголошення дозволяють створювати блочно-обмежені змінні.</p>
+
+<h2 id="Оператори">Оператори</h2>
+
+<p>Числові оператори JavaScript це +, <code>-</code>, <code>*</code>, <code>/</code> <code>та</code><code>%</code> що є оператором решти (<a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_%28%29">що не слід плутати з модулем числа (modulo)</a>.) Значення присвоюються за допомогою =, та є також вирази компоновочного присвоєння такі як  <code>+=</code> and <code>-=</code>. Це розширення виразу <code>x = x <em>operator</em> y</code>.</p>
+
+<pre class="brush: js notranslate">x += 5;
+x = x + 5;
+</pre>
+
+<p>Ви можете використовувати  <code>++</code> and <code>--</code> щоб збільшувати та зменьшувати відповідно. Вони можуть бути як в префіксному так і в  постфіксному положенні відносно значень.</p>
+
+<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition" title="/en/JavaScript/Reference/Operators/String_Operators"><code>+</code> оператор</a> також робить складання строк:</p>
+
+<pre class="brush: js notranslate">'hello' + ' world'; // "hello world"
+</pre>
+
+<p>Якщо ви додаєте строку до числа (або інше значення) усе конвертуюеться насамперед в строку. Це може Вас здивувати:</p>
+
+<pre class="brush: js notranslate">'3' + 4 + 5;  // "345"
+ 3 + 4 + '5'; // "75"
+</pre>
+
+<p>Додавання пустої строки до якогось значення є зручним шляхом конвертування цього значення у строку.</p>
+
+<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en/JavaScript/Reference/Operators/Comparison_Operators">Порівняння</a> в JavaScript робляться за допомогою <code>&lt;</code>, <code>&gt;</code>, <code>&lt;=</code> and <code>&gt;=</code>. Це працює як для строк, так і для чисел. Рівність менш прямолінійна. Оператор подвійне-рівно (double-equals) призводить до примусової конвертації (coercion), якщо значення порівняння різних типів, інколи - з дивним результатом:</p>
+
+<pre class="brush: js notranslate">123 == '123'; // true
+1 == true; // true
+</pre>
+
+<p>Щоб запобігти коерції, використовуйте потрійне-рівне:</p>
+
+<pre class="brush: js notranslate">123 === '123'; // false
+1 === true;    // false
+</pre>
+
+<p>Є також оператори <code>!=</code> <code>та</code><code>!==</code>.</p>
+
+<p>JavaScript також має  <a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en/JavaScript/Reference/Operators/Bitwise_Operators">побітові операції</a>. Якщо хочете їх використовувати - вони до Ваших послуг.</p>
+
+<h2 id="Control_structures">Control structures</h2>
+
+<p>JavaScript має схожий набір структур контроля з іншими мовами сімейства C. Ствердження умов підтримуються за допомогою <code>if</code> та <code>else</code>; Можете організовувати їх у ланцюги за бажанням:</p>
+
+<pre class="brush: js notranslate">var name = 'kittens';
+if (name == 'puppies') {
+  name += ' woof';
+} else if (name == 'kittens') {
+  name += ' meow';
+} else {
+  name += '!';
+}
+name == 'kittens meow';
+</pre>
+
+<p>JavaScript має <code>while</code> цикли та <code>do-while</code> цикли. Перший добре підходить для загального цикла; другий для циклів, де Ви бажаєте бути впевненими що тіло циклу буде виконано хоча б раз:</p>
+
+<pre class="brush: js notranslate">while (true) {
+  // an infinite loop!
+}
+
+var input;
+do {
+  input = get_input();
+} while (inputIsNotValid(input));
+</pre>
+
+<p> <code>for</code> цикл в JavaScript це теж саме, що і в С та Java мовах: це дозволяє впровадити усю інформацію про цикл в єдиній лінії коду.</p>
+
+<pre class="brush: js notranslate">for (var i = 0; i &lt; 5; i++) {
+  // Буде виконано 5 разів
+}
+</pre>
+
+<p>JavaScript також має два інших відомих варіанта циклу: <a href="/uk/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></p>
+
+<pre class="brush: js notranslate">for (let value of array) {
+  // робиться щось з value
+}
+</pre>
+
+<p>та <a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a>:</p>
+
+<pre class="brush: js notranslate">for (let property in object) {
+  // робиться щось з property object
+}
+</pre>
+
+<p>Оператори <code>&amp;&amp;</code> та <code>||</code> використовують логіку скороченого обчислення  , це означає що чи буде обчислюватись другий операнд залежить від результату обчислення першого операнда. Дуже зручно перевіряти об'єкти на належність до null перед доступом до його атрибутів:</p>
+
+<pre class="brush: js notranslate">var name = o &amp;&amp; o.getName();
+</pre>
+
+<p>Або для кешування значень (коли хибні значення є недійсними):</p>
+
+<pre class="brush: js notranslate">var name = cachedName || (cachedName = getName());
+</pre>
+
+<p>JavaScript має тернарний оператор для виразів умов:</p>
+
+<pre class="brush: js notranslate">var allowed = (age &gt; 18) ? 'yes' : 'no';
+</pre>
+
+<p>Твердження <code>switch</code> може бути використано для багатогілкових умов на основі чисели чи строк:</p>
+
+<pre class="brush: js notranslate">switch (action) {
+  case 'draw':
+    drawIt();
+    break;
+  case 'eat':
+    eatIt();
+    break;
+  default:
+    doNothing();
+}
+</pre>
+
+<p>Якщо не додати <code>break</code> твердження, виконання "провалиться" на наступний рівень. Це досить рідко може бути тим, чого ви хотіли — насправді<span class="tlid-translation translation" lang="uk"><span title=""> варто конкретно позначити навмисний "прорив" коментарем, якщо ви дійсно мали на увазі це для сприяння налагодженню</span></span> (debugging):</p>
+
+<pre class="brush: js notranslate">switch (a) {
+  case 1: // провал нижче
+  case 2:
+    eatIt();
+    break;
+  default:
+    doNothing();
+}
+</pre>
+
+<p>Завершення за допомогою default за бажанням. Ви можете мати вирази в обидвах частинах switch та cases якщо бажаєте; порівняння буде робитися за допомогою оператора <code>===</code>:</p>
+
+<pre class="brush: js notranslate">switch (1 + 3) {
+  case 2 + 2:
+    yay();
+    break;
+  default:
+    neverhappens();
+}
+</pre>
+
+<h2 id="Обєкти">Об'єкти</h2>
+
+<p>JavaScript об'єкти можна уявляти як прості колекції пар ім'я-значення (name-value pairs). Таким чином, вони схожі на:</p>
+
+<ul>
+ <li>Dictionaries в Python.</li>
+ <li>Hashes в Perl та Ruby.</li>
+ <li>Hash tables в C та C++.</li>
+ <li>HashMaps в Java.</li>
+ <li>Associative arrays в PHP.</li>
+</ul>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Те, що ця структура даних настільки широко використовується, є свідченням її універсальності</span></span> . Через те, що усе (основні типи даних) в JavaScript це об'єкт, <span class="tlid-translation translation" lang="uk"><span title="">будь-яка програма JavaScript, природно, передбачає велику кількість пошукових запитів хеш-таблиць.</span></span> Як добре, що запити такі швидкі!</p>
+
+<p> частина "ім'я" це строка JavaScript, а "значення" може бути будь яким з типів  JavaScript — включно об'єктами. Це дозволяє Вам будувати структури даних необмеженої складності.</p>
+
+<p>Є два основних способи створити пустий об'єкт:</p>
+
+<pre class="brush: js notranslate">var obj = new Object();
+</pre>
+
+<p>Та:</p>
+
+<pre class="brush: js notranslate">var obj = {};
+</pre>
+
+<p>Це семантично одинаково; другий спосіб називається синтаксис буквального об'єкта (object literal syntax), та є більш зручним. Цей синтаксис також базовий для формату JSON та повинен бути бажаним завжди.</p>
+
+<p>Синтаксис буквального об'єкту може бути використаний щоб ініціалізувати об'єкт у всій повноті:</p>
+
+<pre class="brush: js notranslate">var obj = {
+  name: 'Carrot',
+  'for': 'Max',
+  details: {
+    color: 'orange',
+    size: 12
+  }
+}
+</pre>
+
+<p>Доступ до атрибутів може бути у вигляді ланцюга:</p>
+
+<pre class="brush: js notranslate">obj.details.color; // orange
+obj['details']['size']; // 12
+</pre>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Наступний приклад створює об'єкт-прототип, Person та екземпляр цього прототипу, You.</span></span></p>
+
+<pre class="brush: js notranslate">function Person(name, age) {
+  this.name = name;
+  this.age = age;
+}
+
+// Define an object
+var You = new Person('You', 24);
+// We are creating a new person named "You"
+// (that was the first parameter, and the age..)
+</pre>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Після створення, до властивостей об'єкта можна отримати доступ одним із двох способів:</span></span></p>
+
+<pre class="brush: js notranslate">obj.name = 'Simon';
+var name = obj.name;
+</pre>
+
+<p>та...</p>
+
+<pre class="brush: js notranslate">obj['name'] = 'Simon';
+var name = obj['name'];
+</pre>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Вони також семантично рівнозначні.</span> <span title="">Другий метод має перевагу в тому, що ім'я властивості надається у вигляді рядка, а значить, його можна обчислити під час виконання.</span> <span title="">Однак використання цього методу запобігає застосуванню деяких оптимізацій двигуна JavaScript та мініфікаторів.</span> <span title="">Він також може бути використаний для встановлення та отримання властивостей із іменами, </span></span><a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords" title="/en/JavaScript/Reference/Reserved_Words">зарезервованими словами</a>:</p>
+
+<pre class="brush: js notranslate">obj.for = 'Simon'; // Syntax error, тому що 'for' зарезервоване слово
+obj['for'] = 'Simon'; // спрацьовує добре
+</pre>
+
+<div class="note">
+<p>Починаючи з ECMAScript 5, зарезервовані слова можна використовувати  <span class="tlid-translation translation" lang="uk"><span title="">як імена властивостей об'єкта "в буфі".</span> <span title="">Це означає, що при визначенні об’єктних літералів їх не потрібно "вбирати" в лапки.</span> <span title="">Див. Специфікацію ES5.</span></span></p>
+</div>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Детальніше про об'єкти та прототипи див. : </span></span><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype">Object.prototype</a><span class="tlid-translation translation" lang="uk"><span title="">.</span> <span title="">Пояснення прототипів  об’єктів та ланцюгів прототипів об'єктів див .: </span></span><a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Inheritance and the prototype chain</a>.</p>
+
+<h2 id="Масиви">Масиви</h2>
+
+<p>Arrays in JavaScript are actually a special type of object. They work very much like regular objects (numerical properties can naturally be accessed only using <code>[]</code> syntax) but they have one magic property called '<code>length</code>'. This is always one more than the highest index in the array.</p>
+
+<p>One way of creating arrays is as follows:</p>
+
+<pre class="brush: js notranslate">var a = new Array();
+a[0] = 'dog';
+a[1] = 'cat';
+a[2] = 'hen';
+a.length; // 3
+</pre>
+
+<p>A more convenient notation is to use an array literal:</p>
+
+<pre class="brush: js notranslate">var a = ['dog', 'cat', 'hen'];
+a.length; // 3
+</pre>
+
+<p>Note that <code>array.length</code> isn't necessarily the number of items in the array. Consider the following:</p>
+
+<pre class="brush: js notranslate">var a = ['dog', 'cat', 'hen'];
+a[100] = 'fox';
+a.length; // 101
+</pre>
+
+<p>Remember — the length of the array is one more than the highest index.</p>
+
+<p>If you query a non-existent array index, you'll get a value of <code>undefined</code> returned:</p>
+
+<pre class="brush: js notranslate">typeof a[90]; // undefined
+</pre>
+
+<p>If you take the above into account, you can iterate over an array using the following:</p>
+
+<pre class="brush: js notranslate">for (var i = 0; i &lt; a.length; i++) {
+  // Do something with a[i]
+}
+</pre>
+
+<p>You can iterate over an array using a <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in" title="/en/JavaScript/Reference/Statements/for...in">for...in</a></code> loop. Note that if someone added new properties to <code>Array.prototype</code>, they will also be iterated over by this loop.  Therefore this method is "not" recommended.</p>
+
+<p>Another way of iterating over an array that was added with ECMAScript 5 is <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">forEach()</a></code>:</p>
+
+<pre class="brush: js notranslate" style="font-size: 14px;">['dog', 'cat', 'hen'].forEach(function(currentValue, index, array) {
+  // Do something with currentValue or array[index]
+});
+</pre>
+
+<p>If you want to append an item to an array simply do it like this:</p>
+
+<pre class="brush: js notranslate">a.push(item);</pre>
+
+<p>Arrays come with a number of methods. See also the <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array">full documentation for array methods</a>.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Method name</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>a.toString()</code></td>
+   <td>Returns a string with the <code>toString()</code> of each element separated by commas.</td>
+  </tr>
+  <tr>
+   <td><code>a.toLocaleString()</code></td>
+   <td>Returns a string with the <code>toLocaleString()</code> of each element separated by commas.</td>
+  </tr>
+  <tr>
+   <td><code>a.concat(item1[, item2[, ...[, itemN]]])</code></td>
+   <td>Returns a new array with the items added on to it.</td>
+  </tr>
+  <tr>
+   <td><code>a.join(sep)</code></td>
+   <td>Converts the array to a string — with values delimited by the <code>sep</code> param</td>
+  </tr>
+  <tr>
+   <td><code>a.pop()</code></td>
+   <td>Removes and returns the last item.</td>
+  </tr>
+  <tr>
+   <td><code>a.push(item1, ..., itemN)</code></td>
+   <td>Adds one or more items to the end.</td>
+  </tr>
+  <tr>
+   <td><code>a.reverse()</code></td>
+   <td>Reverses the array.</td>
+  </tr>
+  <tr>
+   <td><code>a.shift()</code></td>
+   <td>Removes and returns the first item.</td>
+  </tr>
+  <tr>
+   <td><code>a.slice(start[, end])</code></td>
+   <td>Returns a sub-array.</td>
+  </tr>
+  <tr>
+   <td><code>a.sort([cmpfn])</code></td>
+   <td>Takes an optional comparison function.</td>
+  </tr>
+  <tr>
+   <td><code>a.splice(start, delcount[, item1[, ...[, itemN]]])</code></td>
+   <td>Lets you modify an array by deleting a section and replacing it with more items.</td>
+  </tr>
+  <tr>
+   <td><code>a.unshift(item1[, item2[, ...[, itemN]]])</code></td>
+   <td>Prepends items to the start of the array.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Функції">Функції</h2>
+
+<p>Along with objects, functions are the core component in understanding JavaScript. The most basic function couldn't be much simpler:</p>
+
+<pre class="brush: js notranslate">function add(x, y) {
+  var total = x + y;
+  return total;
+}
+</pre>
+
+<p>This demonstrates a basic function. A JavaScript function can take 0 or more named parameters. The function body can contain as many statements as you like, and can declare its own variables which are local to that function. The <code>return</code> statement can be used to return a value at any time, terminating the function. If no return statement is used (or an empty return with no value), JavaScript returns <code>undefined</code>.</p>
+
+<p>The named parameters turn out to be more like guidelines than anything else. You can call a function without passing the parameters it expects, in which case they will be set to <code>undefined</code>.</p>
+
+<pre class="brush: js notranslate">add(); // NaN
+// You can't perform addition on undefined
+</pre>
+
+<p>You can also pass in more arguments than the function is expecting:</p>
+
+<pre class="brush: js notranslate">add(2, 3, 4); // 5
+// added the first two; 4 was ignored
+</pre>
+
+<p>That may seem a little silly, but functions have access to an additional variable inside their body called <a href="/uk/docs/Web/JavaScript/Reference/Functions/arguments" title="/en/JavaScript/Reference/Functions_and_function_scope/arguments"><code>arguments</code></a>, which is an array-like object holding all of the values passed to the function. Let's re-write the add function to take as many values as we want:</p>
+
+<pre class="brush: js notranslate">function add() {
+  var sum = 0;
+  for (var i = 0, j = arguments.length; i &lt; j; i++) {
+    sum += arguments[i];
+  }
+  return sum;
+}
+
+add(2, 3, 4, 5); // 14
+</pre>
+
+<p>That's really not any more useful than writing <code>2 + 3 + 4 + 5</code> though. Let's create an averaging function:</p>
+
+<pre class="brush: js notranslate">function avg() {
+  var sum = 0;
+  for (var i = 0, j = arguments.length; i &lt; j; i++) {
+    sum += arguments[i];
+  }
+  return sum / arguments.length;
+}
+
+avg(2, 3, 4, 5); // 3.5
+</pre>
+
+<div class="syntaxbox">This is pretty useful, but it does seem a little verbose. To diminish this code a bit more we can look at substituting the use of the arguments array through <a href="/uk/docs/Web/JavaScript/Reference/Operators/Spread_operator">Spread syntax</a>. In this way we can pass in any number of arguments into the function while keeping our code minimal. The <strong>spread operator</strong> is used in function declarations with the format: <strong>...[variable]  </strong>and it will include within that variable the entire list of uncaptured arguments that the function was called with.  We will also replace the <strong>for </strong>loop with a <strong>for...of</strong> loop to return the values within our variable.</div>
+
+<div class="syntaxbox"></div>
+
+<pre class="brush: js notranslate">function avg(...args) {
+  var sum = 0;
+  for (let value of args) {
+    sum += value;
+  }
+  return sum / args.length;
+}
+
+avg(2, 3, 4, 5); // 3.5
+</pre>
+
+<div class="note">
+<div class="syntaxbox">In the above code the variable <strong>args</strong> holds all the values that were passed into the function. <br>
+<br>
+It is important to note that wherever the spread operator is placed in a function declaration it will store all arguments <em>after</em> its declaration, but not before.</div>
+
+<div class="syntaxbox"><em>a.e. function</em> <em>avg(</em><strong>firstValue, </strong><em>...args</em><strong><em>)</em> </strong>will store the first value passed into the function in the <strong>firstValue </strong>variable and the remaining arguments in <strong>args</strong></div>
+</div>
+
+<div class="syntaxbox">Another useful function but it does lead us to a new problem. The <code>avg()</code> function takes a comma separated list of arguments — but what if you want to find the average of an array? You could just rewrite the function as follows:</div>
+
+<div class="syntaxbox"></div>
+
+<pre class="brush: js notranslate">function avgArray(arr) {
+  var sum = 0;
+  for (var i = 0, j = arr.length; i &lt; j; i++) {
+    sum += arr[i];
+  }
+  return sum / arr.length;
+}
+
+avgArray([2, 3, 4, 5]); // 3.5
+</pre>
+
+<p>But it would be nice to be able to reuse the function that we've already created. Luckily, JavaScript lets you call a function and call it with an arbitrary array of arguments, using the {{jsxref("Function.apply", "apply()")}} method of any function object.</p>
+
+<pre class="brush: js notranslate">avg.apply(null, [2, 3, 4, 5]); // 3.5
+</pre>
+
+<p>The second argument to <code>apply()</code> is the array to use as arguments; the first will be discussed later on. This emphasizes the fact that functions are objects too.</p>
+
+<p>JavaScript lets you create anonymous functions.</p>
+
+<pre class="brush: js notranslate">var avg = function() {
+  var sum = 0;
+  for (var i = 0, j = arguments.length; i &lt; j; i++) {
+    sum += arguments[i];
+  }
+  return sum / arguments.length;
+};
+</pre>
+
+<p>This is semantically equivalent to the <code>function avg()</code> form. It's extremely powerful, as it lets you put a full function definition anywhere that you would normally put an expression. This enables all sorts of clever tricks. Here's a way of "hiding" some local variables — like block scope in C:</p>
+
+<pre class="brush: js notranslate">var a = 1;
+var b = 2;
+
+(function() {
+  var b = 3;
+  a += b;
+})();
+
+a; // 4
+b; // 2
+</pre>
+
+<p>JavaScript allows you to call functions recursively. This is particularly useful for dealing with tree structures, such as those found in the browser DOM.</p>
+
+<pre class="brush: js notranslate">function countChars(elm) {
+  if (elm.nodeType == 3) { // TEXT_NODE
+    return elm.nodeValue.length;
+  }
+  var count = 0;
+  for (var i = 0, child; child = elm.childNodes[i]; i++) {
+    count += countChars(child);
+  }
+  return count;
+}
+</pre>
+
+<p>This highlights a potential problem with anonymous functions: how do you call them recursively if they don't have a name? JavaScript lets you name function expressions for this. You can use named IIFEs (Immediately Invoked Function Expressions) as shown below:</p>
+
+<pre class="brush: js notranslate">var charsInBody = (function counter(elm) {
+  if (elm.nodeType == 3) { // TEXT_NODE
+    return elm.nodeValue.length;
+  }
+  var count = 0;
+  for (var i = 0, child; child = elm.childNodes[i]; i++) {
+    count += counter(child);
+  }
+  return count;
+})(document.body);
+</pre>
+
+<p>The name provided to a function expression as above is only available to the function's own scope. This allows more optimizations to be done by the engine and results in more readable code. The name also shows up in the debugger and some stack traces, which can save you time when debugging.</p>
+
+<p>Note that JavaScript functions are themselves objects — like everything else in JavaScript — and you can add or change properties on them just like we've seen earlier in the Objects section.</p>
+
+<h2 id="Custom_objects">Custom objects</h2>
+
+<div class="note">For a more detailed discussion of object-oriented programming in JavaScript, see <a href="/uk/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript" title="https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript">Introduction to Object Oriented JavaScript</a>.</div>
+
+<p>In classic Object Oriented Programming, objects are collections of data and methods that operate on that data. JavaScript is a prototype-based language that contains no class statement, as you'd find in C++ or Java (this is sometimes confusing for programmers accustomed to languages with a class statement.) Instead, JavaScript uses functions as classes. Let's consider a person object with first and last name fields. There are two ways in which the name might be displayed: as "first last" or as "last, first". Using the functions and objects that we've discussed previously, we could display the data like this:</p>
+
+<pre class="example-bad brush: js notranslate">function makePerson(first, last) {
+  return {
+    first: first,
+    last: last
+  };
+}
+function personFullName(person) {
+  return person.first + ' ' + person.last;
+}
+function personFullNameReversed(person) {
+  return person.last + ', ' + person.first;
+}
+
+s = makePerson('Simon', 'Willison');
+personFullName(s); // "Simon Willison"
+personFullNameReversed(s); // "Willison, Simon"
+</pre>
+
+<p>This works, but it's pretty ugly. You end up with dozens of functions in your global namespace. What we really need is a way to attach a function to an object. Since functions are objects, this is easy:</p>
+
+<pre class="brush: js notranslate">function makePerson(first, last) {
+  return {
+    first: first,
+    last: last,
+    fullName: function() {
+      return this.first + ' ' + this.last;
+    },
+    fullNameReversed: function() {
+      return this.last + ', ' + this.first;
+    }
+  };
+}
+
+s = makePerson('Simon', 'Willison');
+s.fullName(); // "Simon Willison"
+s.fullNameReversed(); // "Willison, Simon"
+</pre>
+
+<p>There's something here we haven't seen before: the <code><a href="/uk/docs/Web/JavaScript/Reference/Operators/this" title="/en/JavaScript/Reference/Operators/this">this</a></code> keyword. Used inside a function, <code>this</code> refers to the current object. What that actually means is specified by the way in which you called that function. If you called it using <a href="/uk/docs/Web/JavaScript/Reference/Operators/Object_initializer#Accessing_properties" title="/en/JavaScript/Reference/Operators/Member_Operators">dot notation or bracket notation</a> on an object, that object becomes <code>this</code>. If dot notation wasn't used for the call, <code>this</code> refers to the global object.</p>
+
+<p>Note that <code>this</code> is a frequent cause of mistakes. For example:</p>
+
+<pre class="brush: js notranslate">s = makePerson('Simon', 'Willison');
+var fullName = s.fullName;
+fullName(); // undefined undefined
+</pre>
+
+<p>When we call <code>fullName()</code> alone, without using <code>s.fullName()</code>, <code>this</code> is bound to the global object. Since there are no global variables called <code>first</code> or <code>last</code> we get <code>undefined</code> for each one.</p>
+
+<p>We can take advantage of the <code>this</code> keyword to improve our <code>makePerson</code> function:</p>
+
+<pre class="brush: js notranslate">function Person(first, last) {
+  this.first = first;
+  this.last = last;
+  this.fullName = function() {
+    return this.first + ' ' + this.last;
+  };
+  this.fullNameReversed = function() {
+    return this.last + ', ' + this.first;
+  };
+}
+var s = new Person('Simon', 'Willison');
+</pre>
+
+<p>We have introduced another keyword: <code><a href="/uk/docs/Web/JavaScript/Reference/Operators/new" title="/en/JavaScript/Reference/Operators/new">new</a></code>. <code>new</code> is strongly related to <code>this</code>. It creates a brand new empty object, and then calls the function specified, with <code>this</code> set to that new object. Notice though that the function specified with <code>this</code> does not return a value but merely modifies the <code>this</code> object. It's <code>new</code> that returns the <code>this</code> object to the calling site. Functions that are designed to be called by <code>new</code> are called constructor functions. Common practice is to capitalize these functions as a reminder to call them with <code>new</code>.</p>
+
+<p>The improved function still has the same pitfall with calling <code>fullName()</code> alone.</p>
+
+<p>Our person objects are getting better, but there are still some ugly edges to them. Every time we create a person object we are creating two brand new function objects within it — wouldn't it be better if this code was shared?</p>
+
+<pre class="brush: js notranslate">function personFullName() {
+  return this.first + ' ' + this.last;
+}
+function personFullNameReversed() {
+  return this.last + ', ' + this.first;
+}
+function Person(first, last) {
+  this.first = first;
+  this.last = last;
+  this.fullName = personFullName;
+  this.fullNameReversed = personFullNameReversed;
+}
+</pre>
+
+<p>That's better: we are creating the method functions only once, and assigning references to them inside the constructor. Can we do any better than that? The answer is yes:</p>
+
+<pre class="brush: js notranslate">function Person(first, last) {
+  this.first = first;
+  this.last = last;
+}
+Person.prototype.fullName = function() {
+  return this.first + ' ' + this.last;
+};
+Person.prototype.fullNameReversed = function() {
+  return this.last + ', ' + this.first;
+};
+</pre>
+
+<p><code>Person.prototype</code> is an object shared by all instances of <code>Person</code>. It forms part of a lookup chain (that has a special name, "prototype chain"): any time you attempt to access a property of <code>Person</code> that isn't set, JavaScript will check <code>Person.prototype</code> to see if that property exists there instead. As a result, anything assigned to <code>Person.prototype</code> becomes available to all instances of that constructor via the <code>this</code> object.</p>
+
+<p>This is an incredibly powerful tool. JavaScript lets you modify something's prototype at any time in your program, which means you can add extra methods to existing objects at runtime:</p>
+
+<pre class="brush: js notranslate">s = new Person('Simon', 'Willison');
+s.firstNameCaps(); // TypeError on line 1: s.firstNameCaps is not a function
+
+Person.prototype.firstNameCaps = function firstNameCaps() {
+  return this.first.toUpperCase();
+};
+s.firstNameCaps(); // "SIMON"
+</pre>
+
+<p>Interestingly, you can also add things to the prototype of built-in JavaScript objects. Let's add a method to <code>String</code> that returns that string in reverse:</p>
+
+<pre class="brush: js notranslate">var s = 'Simon';
+s.reversed(); // TypeError on line 1: s.reversed is not a function
+
+String.prototype.reversed = function reversed() {
+  var r = '';
+  for (var i = this.length - 1; i &gt;= 0; i--) {
+    r += this[i];
+  }
+  return r;
+};
+
+s.reversed(); // nomiS
+</pre>
+
+<p>Our new method even works on string literals!</p>
+
+<pre class="brush: js notranslate">'This can now be reversed'.reversed(); // desrever eb won nac sihT
+</pre>
+
+<p>As mentioned before, the prototype forms part of a chain. The root of that chain is <code>Object.prototype</code>, whose methods include <code>toString()</code> — it is this method that is called when you try to represent an object as a string. This is useful for debugging our <code>Person</code> objects:</p>
+
+<pre class="brush: js notranslate">var s = new Person('Simon', 'Willison');
+s; // [object Object]
+
+Person.prototype.toString = function() {
+  return '&lt;Person: ' + this.fullName() + '&gt;';
+}
+
+s.toString(); // "&lt;Person: Simon Willison&gt;"
+</pre>
+
+<p>Remember how <code>avg.apply()</code> had a null first argument? We can revisit that now. The first argument to <code>apply()</code> is the object that should be treated as '<code>this</code>'. For example, here's a trivial implementation of <code>new</code>:</p>
+
+<pre class="brush: js notranslate">function trivialNew(constructor, ...args) {
+  var o = {}; // Create an object
+  constructor.apply(o, args);
+  return o;
+}
+</pre>
+
+<p>This isn't an exact replica of <code>new</code> as it doesn't set up the prototype chain (it would be difficult to illustrate). This is not something you use very often, but it's useful to know about. In this snippet, <code>...args</code> (including the ellipsis) is called the "<a href="/uk/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest arguments</a>" — as the name implies, this contains the rest of the arguments.</p>
+
+<p>Calling</p>
+
+<pre class="brush: js notranslate">var bill = trivialNew(Person, 'William', 'Orange');</pre>
+
+<p>is therefore almost equivalent to</p>
+
+<pre class="brush: js notranslate">var bill = new Person('William', 'Orange');</pre>
+
+<p><code>apply()</code> has a sister function named <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="/en/JavaScript/Reference/Global_Objects/Function/call"><code>call</code></a>, which again lets you set <code>this</code> but takes an expanded argument list as opposed to an array.</p>
+
+<pre class="brush: js notranslate">function lastNameCaps() {
+  return this.last.toUpperCase();
+}
+var s = new Person('Simon', 'Willison');
+lastNameCaps.call(s);
+// Is the same as:
+s.lastNameCaps = lastNameCaps;
+s.lastNameCaps();
+</pre>
+
+<h3 id="Inner_functions">Inner functions</h3>
+
+<p>JavaScript function declarations are allowed inside other functions. We've seen this once before, with an earlier <code>makePerson()</code> function. An important detail of nested functions in JavaScript is that they can access variables in their parent function's scope:</p>
+
+<pre class="brush: js notranslate">function betterExampleNeeded() {
+  var a = 1;
+  function oneMoreThanA() {
+    return a + 1;
+  }
+  return oneMoreThanA();
+}
+</pre>
+
+<p>This provides a great deal of utility in writing more maintainable code. If a function relies on one or two other functions that are not useful to any other part of your code, you can nest those utility functions inside the function that will be called from elsewhere. This keeps the number of functions that are in the global scope down, which is always a good thing.</p>
+
+<p>This is also a great counter to the lure of global variables. When writing complex code it is often tempting to use global variables to share values between multiple functions — which leads to code that is hard to maintain. Nested functions can share variables in their parent, so you can use that mechanism to couple functions together when it makes sense without polluting your global namespace — "local globals" if you like. This technique should be used with caution, but it's a useful ability to have.</p>
+
+<h2 id="Замикання">Замикання</h2>
+
+<p>This leads us to one of the most powerful abstractions that JavaScript has to offer — but also the most potentially confusing. What does this do?</p>
+
+<pre class="brush: js notranslate">function makeAdder(a) {
+  return function(b) {
+    return a + b;
+  };
+}
+var x = makeAdder(5);
+var y = makeAdder(20);
+x(6); // ?
+y(7); // ?
+</pre>
+
+<p>The name of the <code>makeAdder()</code> function should give it away: it creates new 'adder' functions, each of which when called with one argument adds it to the argument that it was created with.</p>
+
+<p>What's happening here is pretty much the same as was happening with the inner functions earlier on: a function defined inside another function has access to the outer function's variables. The only difference here is that the outer function has returned, and hence common sense would seem to dictate that its local variables no longer exist. But they <em>do</em> still exist — otherwise the adder functions would be unable to work. What's more, there are two different "copies" of <code>makeAdder()</code>'s local variables — one in which <code>a</code> is 5 and one in which <code>a</code> is 20. So the result of those function calls is as follows:</p>
+
+<pre class="brush: js notranslate">x(6); // returns 11
+y(7); // returns 27
+</pre>
+
+<p>Here's what's actually happening. Whenever JavaScript executes a function, a 'scope' object is created to hold the local variables created within that function. It is initialized with any variables passed in as function parameters. This is similar to the global object that all global variables and functions live in, but with a couple of important differences: firstly, a brand new scope object is created every time a function starts executing, and secondly, unlike the global object (which is accessible as <code>this</code> and in browsers as <code>window</code>) these scope objects cannot be directly accessed from your JavaScript code. There is no mechanism for iterating over the properties of the current scope object, for example.</p>
+
+<p>So when <code>makeAdder()</code> is called, a scope object is created with one property: <code>a</code>, which is the argument passed to the <code>makeAdder()</code> function. <code>makeAdder()</code> then returns a newly created function. Normally JavaScript's garbage collector would clean up the scope object created for <code>makeAdder()</code> at this point, but the returned function maintains a reference back to that scope object. As a result, the scope object will not be garbage collected until there are no more references to the function object that <code>makeAdder()</code> returned.</p>
+
+<p>Scope objects form a chain called the scope chain, similar to the prototype chain used by JavaScript's object system.</p>
+
+<p>A <strong>closure</strong> is the combination of a function and the scope object in which it was created. Closures let you save state — as such, they can often be used in place of objects. You can find <a href="http://stackoverflow.com/questions/111102/how-do-javascript-closures-work">several excellent introductions to closures</a>.</p>
+
+<div class="jfk-bubble gtx-bubble">
+<div class="jfk-bubble-content-id" id="bubble-18">
+<div id="gtx-host" style="max-width: 400px;"></div>
+</div>
+
+<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div>
+
+<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowup" style="left: 313.5px;">
+<div class="jfk-bubble-arrowimplbefore"></div>
+
+<div class="jfk-bubble-arrowimplafter"></div>
+</div>
+</div>
diff --git a/files/uk/web/javascript/about_javascript/index.html b/files/uk/web/javascript/about_javascript/index.html
new file mode 100644
index 0000000000..430be4a307
--- /dev/null
+++ b/files/uk/web/javascript/about_javascript/index.html
@@ -0,0 +1,61 @@
+---
+title: Про JavaScript
+slug: Web/JavaScript/About_JavaScript
+tags:
+  - JavaScript
+  - Вступ
+  - Початківець
+translation_of: Web/JavaScript/About_JavaScript
+---
+<div>{{JsSidebar}}</div>
+
+<h2 id="Що_таке_JavaScript">Що таке JavaScript?</h2>
+
+<p><strong>JavaScript</strong><sup>®</sup> (зазвичай скорочено <strong>JS</strong>) це легка, інтерпретована, об'єктно-орієнтована мова програмування з <a href="https://en.wikipedia.org/wiki/First-class_function" title="https://en.wikipedia.org/wiki/First-class_function">функціями першого класу</a>, що також відома як найкраща мова скриптів для веб-сторінок, проте також часто <a class="external" href="https://en.wikipedia.org/wiki/JavaScript#Uses_outside_Web_pages">використовувана в багатьох не-браузерних середовищах</a>. Це також <a class="mw-redirect" href="https://en.wikipedia.org/wiki/Prototype-based_programming" title="Prototype-based">базована на прототипах</a>, мульти парадигмова динамічна мова скриптів, що підтримує об'єктно-орієнтовані, імперативні та функціональні стилі програмування.</p>
+
+<p>JavaScript працює на клієнтській стороні Вебу і може використовуватись для програмування поведінки сторінки відповідно до події, що на ній відбувається. JavaScript легка для вивчення, проте водночас це потужна мова скриптів, яка широко застосовується для контролю поведінки веб-сторінок.</p>
+
+<p>Contrary to popular misconception, <strong>JavaScript is <em>not</em> "Interpreted Java"</strong>. In a nutshell, JavaScript is a dynamic scripting language supporting <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-Based_vs._Prototype-Based_Languages" title="en-US/docs/JavaScript/Guide/Details_of_the_Object_Model#Class-Based_vs._Prototype-Based_Languages">prototype based</a> object construction. The basic syntax is intentionally similar to both Java and C++ to reduce the number of new concepts required to learn the language. Language constructs, such as <code>if</code> statements, <code>for</code> and <code>while</code> loops, and <code>switch</code> and <code>try ... catch</code> blocks function the same as in these languages (or nearly so).</p>
+
+<p>JavaScript can function as both a <a class="external" href="https://en.wikipedia.org/wiki/Procedural_programming" title="https://en.wikipedia.org/wiki/Procedural_programming">procedural</a> and an <a class="external" href="/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript" title="https://developer.mozilla.org/en-US/docs/Introduction_to_Object-Oriented_JavaScript">object oriented language</a>. Objects are created programmatically in JavaScript, by attaching methods and properties to otherwise empty objects <strong>at run time</strong>, as opposed to the syntactic class definitions common in compiled languages like C++ and Java. Once an object has been constructed it can be used as a blueprint (or prototype) for creating similar objects.</p>
+
+<p>JavaScript's dynamic capabilities include runtime object construction, variable parameter lists, function variables, dynamic script creation (via <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval" title="en-US/docs/JavaScript/Reference/Global_Functions/eval">eval</a></code>), object introspection (via <code>for ... in</code>), and source code recovery (JavaScript programs can decompile function bodies back into their source text).</p>
+
+<p>For a more in depth discussion of JavaScript programming follow the <a href="#JavaScript_resources">JavaScript resources</a> links below.</p>
+
+<h2 id="What_JavaScript_implementations_are_available">What JavaScript implementations are available?</h2>
+
+<p>The Mozilla project provides two JavaScript implementations. The first <strong>ever</strong> JavaScript was created by Brendan Eich at Netscape, and has since been updated to conform to ECMA-262 Edition 5 and later versions. This engine, code named <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey" title="en-US/docs/SpiderMonkey">SpiderMonkey</a>, is implemented in C/C++. The <a href="/en-US/docs/Rhino" title="en-US/docs/Rhino">Rhino</a> engine, created primarily by Norris Boyd (also at Netscape) is a JavaScript implementation written in Java. Like SpiderMonkey, Rhino is ECMA-262 Edition 5 compliant.</p>
+
+<p>Several major runtime optimizations such as TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) and IonMonkey were added to the SpiderMonkey JavaScript engine over time. Work is always ongoing to improve JavaScript execution performance.</p>
+
+<p>Besides the above implementations, there are other popular JavaScript engines such as:-</p>
+
+<ul>
+ <li>Google's <a class="external" href="https://code.google.com/p/v8/" title="https://code.google.com/p/v8/">V8</a>, which is used in the Google Chrome browser and recent versions of Opera browser. This is also the engine used by <a href="http://nodejs.org">Node.js</a>.</li>
+ <li>The <a class="external" href="https://www.webkit.org/projects/javascript/index.html" title="https://www.webkit.org/projects/javascript/index.html">JavaScriptCore</a> (SquirrelFish/Nitro) used in some WebKit browsers such as Apple Safari.</li>
+ <li><a class="external" href="http://my.opera.com/ODIN/blog/carakan-faq" title="http://my.opera.com/ODIN/blog/carakan-faq">Carakan</a> in old versions of Opera.</li>
+ <li>The <a class="external" href="http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29" title="http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29">Chakra</a> engine used in Internet Explorer (although the language it implements is formally called "JScript" in order to avoid trademark issues).</li>
+</ul>
+
+<p>Each of Mozilla's JavaScript engines expose a public API which application developers can use to integrate JavaScript into their software. By far, the most common host environment for JavaScript is web browsers. Web browsers typically use the public API to create <strong>host objects</strong> responsible for reflecting the <a class="external" href="http://www.w3.org/DOM/">DOM</a> into JavaScript.</p>
+
+<p>Another common application for JavaScript is as a (Web) server side scripting language. A JavaScript web server would expose host objects representing a HTTP request and response objects, which could then be manipulated by a JavaScript program to dynamically generate web pages. <a href="http://nodejs.org">Node.js</a> is a popular example of this.</p>
+
+<h2 id="JavaScript_resources">JavaScript resources</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey" title="en-US/docs/SpiderMonkey">SpiderMonkey</a></dt>
+ <dd>Information specific to Mozilla's implementation of JavaScript in C/C++ engine (aka SpiderMonkey), including how to embed it in applications.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Rhino" title="en-US/docs/Rhino">Rhino</a></dt>
+ <dd>Information specific to the JavaScript implementation written in Java (aka Rhino).</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Language_Resources" title="en-US/docs/JavaScript_Language_Resources">Language resources</a></dt>
+ <dd>Pointers to published JavaScript standards.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript" title="en-US/docs/A_re-introduction_to_JavaScript">A re-introduction to JavaScript</a></dt>
+ <dd><a href="/en-US/docs/Web/JavaScript/Guide" title="en-US/docs/JavaScript/Guide">JavaScript guide</a> and <a href="/en-US/docs/Web/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">JavaScript reference</a>.</dd>
+</dl>
+
+<p>JavaScript® is a trademark or registered trademark of Oracle in the U.S. and other countries.</p>
diff --git a/files/uk/web/javascript/closures/index.html b/files/uk/web/javascript/closures/index.html
new file mode 100644
index 0000000000..1abe835739
--- /dev/null
+++ b/files/uk/web/javascript/closures/index.html
@@ -0,0 +1,471 @@
+---
+title: Closures
+slug: Web/JavaScript/Closures
+tags:
+  - Замикання
+translation_of: Web/JavaScript/Closures
+---
+<div>{{jsSidebar("Intermediate")}}</div>
+
+<p class="summary">Замикання - це функції, що посилаються на незалежні (вільні) змінні (змінні, які використовуються локально, але визначені в обмеженій області видимості). Іншими словами, ці функції "пам'ятають" середовище, в якому вони були створені.</p>
+
+<h2 id="Лексичне_середовище">Лексичне середовище</h2>
+
+<p>Розглянемо наступне:</p>
+
+<div>
+<pre class="brush: js notranslate">function init() {
+  var name = "Mozilla"; // name - це локальна змінна, створена в функції init
+  function displayName() { // displayName() - це внутрішня функція, замикання
+    alert(name); // використовує змінну, оголошену в батьківській функції
+  }
+  displayName();
+}
+init();</pre>
+</div>
+
+<p><code>init()</code> створює локальну змінну <code>name</code> та функцію <code>displayName()</code>. <code>displayName()</code> є вкладеною функцією, що оголошена всередині <code>init()</code> та є доступною тільки в тілі цієї функції. <code>displayName()</code> не має локальних змінних, проте вкладені функції мають доступ до змінних зовнішніх функцій саме тому <code>displayName()</code> може використовувати імена змінних, оголошених в батьківській функції <code>init()</code>.</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/78dg25ax/", "js,result", 200)}}</p>
+
+<p><a href="http://jsfiddle.net/xAFs9/3/" title="http://jsfiddle.net/xAFs9/">Запустіть</a> цей код і побачите, що alert() всередині  функції displayName() успішно відображає змінну name, оголошену в батьківській функції. Це є прикладом лексичного середовища (lexical environment), яке описує, яким чином парсер звертається до змінних, коли функції вкладені. Слово <em>лексичне</em>  посилається на факт, що лексичне середовище використовує розташування, де в коді  була створена змінна задля визначення середовища, де ця змінна доступна. Вкладені функції мають доступ до змінних, оголошених у їх зовнішній області.</p>
+
+<h2 id="Замикання">Замикання</h2>
+
+<p>Тепер розглянемо наступний приклад:</p>
+
+<pre class="brush: js notranslate">function makeFunc() {
+  var name = "Mozilla";
+  function displayName() {
+    alert(name);
+  }
+  return displayName;
+}
+
+var myFunc = makeFunc();
+myFunc();
+</pre>
+
+<p>Результат запуску цього коду буде таким самим, як і в попередньому прикладі функції <code>init()</code>: рядок  "Mozilla" буде відображений в спливаючому повідомленні <font face="consolas, Liberation Mono, courier, monospace">alert</font>(). Цікавою відмінністю є те, що внутрішня функція <code>displayName() </code>буде повернена з зовнішньої функції перш ніж вона буде виконана. </p>
+
+<p>Той факт, що цей код досі працює, може здаватись неочевидним. В деяких мовах програмування локальні змінні існують лише протягом часу виконання функції. Як тільки <code>makeFunc()</code> завершила своє виконання, слід очікувати, що змінна <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;">name</span></font> не буде більше існувати. Однак у JavaScript цей підхід інакший, оскільки даний код працює, як і очікувалось.</p>
+
+<p>Це відбувається тому що ці функції в JavaScript утворюють замикання. <em>Замикання</em> це комбінація функції і лексичного середовища (або просто середовища), всередині якого функція була оголошена. Середовище складається з будь-яких локальних змінних, які були в області видимості в той час, коли замикання було створене. В цьому випадку, <code>myFunc</code> є посиланням на екземпляр функції <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;">displayName</span></font> створений, коли <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;">makeFunc</span></font> була виконана. Екземпляр <code>displayName</code> включає посилання на власне лексичне середовище в середині якого існує змінна <code>name</code>. З цієї причини, коли <code>myFunc</code> викликається, змінна <code>name</code> залишається доступною для використання і "Mozilla" передається до <code>alert</code>. ​​​​​​</p>
+
+<p>Ось трохи цікавіший приклад — a <code>makeAdder</code> function:</p>
+
+<pre class="brush: js notranslate">function makeAdder(x) {
+  return function(y) {
+    return x + y;
+  };
+}
+
+var add5 = makeAdder(5);
+var add10 = makeAdder(10);
+
+console.log(add5(2));  // 7
+console.log(add10(2)); // 12
+</pre>
+
+<p>У цьому прикладі ми визначили функцію <code>makeAdder(x),</code> яка приймає єдиний аргумент <code>x</code> і повертає нову функцію. Функція, яку вона повертає, приймає єдиний аргумент <code>y</code>, і повертає суму  <code>x</code> і <code>y</code>.</p>
+
+<p>По суті, <code>makeAdder</code> це фабрика функцій — вона створює функції, які можуть додавати певне значення до свого аргументу. У наведеному вище прикладі ми використовуємо нашу фабричну функцію для створення двох нових функцій — одна додає 5 до свого аргументу, і інша додає 10.</p>
+
+<p><code>add5</code> і <code>add10</code> є прикладами замикання. Вони поділяють одне визначення тіла функції, але зберігають різні лексичні середовища. В лексичному середовищі <code>add5</code>  <code>x</code> - це 5, а в лексичному середовищі <code>add10</code> <code>x</code>- це 10.</p>
+
+<h2 id="Замикання_на_практиці">Замикання на практиці</h2>
+
+<p>Замикання корисні, оскільки вони дозволяють зв'язати деякі дані (лексичне середовище) з функцією, яка працює з цими даними. Це має очевидні паралелі з об'єктно-орієнтованим програмуванням, де об'єкти дозволяють нам зв'язати деякі дані (властивості об'єкта) з одним або декількома методами.</p>
+
+<p>Отже, замикання можна використовувати всюди, де  зазвичай використовується об'єкт з одним єдиним методом. </p>
+
+<p>Ситуації, в яких ви можливо захочете зробити це, особливо поширені в web-розробці. Велика частина front-end коду, написана на JavaScript, основана на обробці подій. Ви визначаєте деяку поведінку, а потім прикріплюєте її до події, яка запускається користувачем (наприклад, клік або натискання клавіші). Код, як правило, прив'язується до події як зворотній виклик <strong>(callback)</strong> - функція, яка виконується у відповідь на виникнення події.</p>
+
+<p>Наприклад припустимо, що ми хочемо додати кілька кнопок на сторінку, які змінюватимуть розмір тексту. Один із способів зробити це - вказати <code>font-size</code> елементу <code>body</code> у пікселях, а потім встановити розмір інших елементів на сторінці (таких як заголовки) за допомогою відносних одиниць виміру <code>em</code>:</p>
+
+<pre class="brush: css notranslate">body {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 12px;
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+h2 {
+  font-size: 1.2em;
+}
+</pre>
+
+<p>Такі інтерактивні кнопки розміру тексту можуть змінювати властивість <code>font-size</code> елемента <code>body</code>, і налаштування будуть підхоплені іншими елементами на сторінці завдяки відносним одиницям.</p>
+
+<p>Ось JavaScript:</p>
+
+<pre class="brush: js notranslate">function makeSizer(size) {
+  return function() {
+    document.body.style.fontSize = size + 'px';
+  };
+}
+
+var size12 = makeSizer(12);
+var size14 = makeSizer(14);
+var size16 = makeSizer(16);
+</pre>
+
+<p> Тепер <code>size12</code>, <code>size14</code>, і <code>size16</code> є функціями, які будуть змінювати розмір тексту елемента body відповідно до 12, 14 та 16 пікселів. Ми можемо прив'язати їх до кнопок таким чином:</p>
+
+<pre class="brush: js notranslate">document.getElementById('size-12').onclick = size12;
+document.getElementById('size-14').onclick = size14;
+document.getElementById('size-16').onclick = size16;
+</pre>
+
+<pre class="brush: html notranslate">&lt;a href="#" id="size-12"&gt;12&lt;/a&gt;
+&lt;a href="#" id="size-14"&gt;14&lt;/a&gt;
+&lt;a href="#" id="size-16"&gt;16&lt;/a&gt;
+</pre>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/vnkuZ/","","200")}}</p>
+
+<h2 id="Емуляція_приватних_методів_з_замиканнями">Емуляція приватних методів з замиканнями</h2>
+
+<p>В таких мовах як Java є можливість об'являти методи приватними, що означає їх здатність бути викликаними лише іншими методами того ж класу.  </p>
+
+<p>JavaScript не має власного способу зробити це, але є можливість емуляції приватних методів використовуючи замикання. Приватні методи корисні не лише для обмеження доступу до коду: вони також забезпечують потужний спосіб управління глобальним простором імен, зберігаючи несуттєві методи від захаращення публічного інтерфейсу до вашого коду.</p>
+
+<p>Ось як визначити деякі загальнодоступні функції, які можуть отримати доступ до приватних функцій та змінних, використовуючи замикання, також відомі як модель модуля (<a class="external" href="http://www.google.com/search?q=javascript+module+pattern" title="http://www.google.com/search?q=javascript+module+pattern">module pattern</a>).</p>
+
+<pre class="brush: js notranslate">var counter = (function() {
+  var privateCounter = 0;
+  function changeBy(val) {
+    privateCounter += val;
+  }
+  return {
+    increment: function() {
+      changeBy(1);
+    },
+    decrement: function() {
+      changeBy(-1);
+    },
+    value: function() {
+      return privateCounter;
+    }
+  };
+})();
+
+console.log(counter.value()); // logs 0
+counter.increment();
+counter.increment();
+console.log(counter.value()); // logs 2
+counter.decrement();
+console.log(counter.value()); // logs 1
+</pre>
+
+<p>Тут багато чого відбувається. В попередніх пригладах кожне замикання мало своє власне оточення. Тут, однак, існує одне лексичне середовище, яке поділяють три функції: <code>counter.increment</code>, <code>counter.decrement</code>, and <code>counter.value</code>.</p>
+
+<p>Спільне лексичне середовище створюється в тілі анонімної функції, яка викликається одразу після створення. Навколишнє середовище містить два приватні складові: змінну <code>privateCounter</code> і функцію  <code>changeBy</code>. Жодна із цих приватних складових не може бути доступна безпосередньо за межами анонімної функції. Натомість до них мають бути доступні три загальнодоступні функції, які повертаються з анонімної обгортки.</p>
+
+<p>Ці три  функції - це замикання, які мають одне і те ж середовище. Завдяки лексичному оточенню JavaScript, кожна з них має доступ до змінної privateCounter та функції changeBy.</p>
+
+<p>Ми визначаємо анонімну функцію, яка створює лічильник, а потім ми викликаємо її негайно і присвоюємо результат змінній лічильника.Ми можемо зберігати цю функцію в окремій змінній makeCounter і використовувати її для створення декількох лічильників</p>
+
+<pre class="brush: js notranslate">var makeCounter = function() {
+  var privateCounter = 0;
+  function changeBy(val) {
+    privateCounter += val;
+  }
+  return {
+    increment: function() {
+      changeBy(1);
+    },
+    decrement: function() {
+      changeBy(-1);
+    },
+    value: function() {
+      return privateCounter;
+    }
+  }
+};
+
+var counter1 = makeCounter();
+var counter2 = makeCounter();
+alert(counter1.value()); /* Alerts 0 */
+counter1.increment();
+counter1.increment();
+alert(counter1.value()); /* Alerts 2 */
+counter1.decrement();
+alert(counter1.value()); /* Alerts 1 */
+alert(counter2.value()); /* Alerts 0 */
+</pre>
+
+<p>Зауважте, як кожен з двох лічильників підтримує свою незалежність від іншого. Його середовище під час виклику функції makeCounter () щоразу відрізняється. Змінна замикання privateCounter містить кожен раз інший екземпляр.</p>
+
+<p>Використання замикання таким чином забезпечує ряд переваг, які зазвичай пов'язані з об'єктно-орієнтованим програмуванням, зокрема приховування даних та інкапсуляція.</p>
+
+<h2 id="Ланцюжок_замикань">Ланцюжок замикань</h2>
+
+<p>Кожне замикання має три оточення:</p>
+
+<ul>
+ <li>Local Scope (власне оточення)</li>
+ <li>Outer Functions Scope (зовнішнє функціональне оточення)</li>
+ <li>Global Scope (глобальне оточення)</li>
+</ul>
+
+<p>Поширеною помилкою є не усвідомлення того, що у випадку, коли зовнішня функція сама є вкладеною функцією, доступ до оточення її зовнішньої функції включає вкладене оточення  її як зовнішньої функції - ефективно створюючи ланцюг областей оточення. Для демонстрації розглянемо наступний приклад коду.</p>
+
+<pre class="notranslate">// global scope
+var e = 10;
+function sum(a){
+  return function(b){
+    return function(c){
+      // outer functions scope
+      return function(d){
+        // local scope
+        return a + b + c + d + e;
+      }
+    }
+  }
+}
+
+console.log(sum(1)(2)(3)(4)); // log 20
+
+// You can also write without anonymous functions:
+
+// global scope
+var e = 10;
+function sum(a){
+  return function sum2(b){
+    return function sum3(c){
+      // outer functions scope
+      return function sum4(d){
+        // local scope
+        return a + b + c + d + e;
+      }
+    }
+  }
+}
+
+var s = sum(1);
+var s1 = s(2);
+var s2 = s1(3);
+var s3 = s2(4);
+console.log(s3) //log 20
+</pre>
+
+<p>У наведеному вище прикладі є низка вкладених функцій, всі з яких мають доступ до області оточення зовнішніх функцій. У цьому контексті можна сказати, що замикання мають доступ до всіх зовнішніх областей функцій.</p>
+
+<h2 id="Creating_closures_in_loops_A_common_mistake">Creating closures in loops: A common mistake</h2>
+
+<p>До введення ключового слова let у ECMAScript 2015, загальна проблема із замиканням виникала, коли вони створювалися всередині циклу. Розглянемо наступний приклад: </p>
+
+<pre class="brush: html notranslate">&lt;p id="help"&gt;Helpful notes will appear here&lt;/p&gt;
+&lt;p&gt;E-mail: &lt;input type="text" id="email" name="email"&gt;&lt;/p&gt;
+&lt;p&gt;Name: &lt;input type="text" id="name" name="name"&gt;&lt;/p&gt;
+&lt;p&gt;Age: &lt;input type="text" id="age" name="age"&gt;&lt;/p&gt;
+</pre>
+
+<pre class="brush: js notranslate">function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i &lt; helpText.length; i++) {
+    var item = helpText[i];
+    document.getElementById(item.id).onfocus = function() {
+      showHelp(item.help);
+    }
+  }
+}
+
+setupHelp();
+</pre>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/", "", 200)}}</p>
+
+<p>Масив helpText визначає три корисні підказки, кожну пов'язану з ID поля Input. Цикл циклично перераховує ці визначення, підключаючи подію onfocus до кожного, що показує пов'язаний метод help.</p>
+
+<p>Якщо ви спробуєте цей код, ви побачите, що він не працює, як очікувалося. Незалежно від того, на якому полі ви зосереджені, відображатиметься повідомлення про ваш вік.</p>
+
+<p>Причиною цього є те, що функції, призначені для фокусування, - це замикання; вони складаються з визначення функції та захопленого оточення з області видимосты функцій setupHelp.  Три замикання були створені циклом, але кожне ділиться тим самим єдиним середовищем, яке має змінну зі змінними значеннями (item.help).</p>
+
+<p>Коли виконуються зворотні виклики onfocus, доступ до item.help в цей момент викликає таку поведінку (дійсно, оскільки значення змінної доступно / обчислюється лише під час виконання), оскільки цикл до цього часу виконувався, а об'єкт змінної елемента (розділений усіма трьома замиканнями) був залишений, вказуючи на останній запис у списку довідкового тексту.</p>
+
+<p>Одне рішення в цьому випадку - використовувати більше замикань: зокрема, використовувати фабрику функцій, як описано раніше:</p>
+
+<pre class="brush: js notranslate">function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function makeHelpCallback(help) {
+  return function() {
+    showHelp(help);
+  };
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i &lt; helpText.length; i++) {
+    var item = helpText[i];
+    document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
+  }
+}
+
+setupHelp();
+</pre>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/1/", "", 300)}}</p>
+
+<p>Це працює як очікувалося. Замість того, щоб зворотні виклики мали спільний доступ до одного середовища, функція makeHelpCallback створює нове середовище для кожного з них, в якій довідка посилається на відповідний рядок із масиву helpText.</p>
+
+<p>Ще один спосіб написати вищезгадане - використання  анонімних  замикань:</p>
+
+<pre class="brush: js notranslate">function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i &lt; helpText.length; i++) {
+    (function() {
+       var item = helpText[i];
+       document.getElementById(item.id).onfocus = function() {
+         showHelp(item.help);
+       }
+    })(); // Immediate event listener attachment with the current value of item (preserved until iteration).
+  }
+}
+
+setupHelp();</pre>
+
+<p>Якщо ви не хочете більше використовувати замикання, можете скористатися ключовим словом let з ES6:</p>
+
+<pre class="brush: js notranslate">function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i &lt; helpText.length; i++) {
+    let item = helpText[i];
+    document.getElementById(item.id).onfocus = function() {
+      showHelp(item.help);
+    }
+  }
+}
+
+setupHelp();</pre>
+
+<p>Цей приклад використовує let замість var, таким чином кожне замикання прив'язує блочну  змінну,це означає, що додаткові замикання не потрібні.</p>
+
+<p>Іншою альтернативою може бути використання forEach () для повторення масиву helpText та приєднання слухача до кожного &lt;p&gt;, як показано:</p>
+
+<pre class="notranslate">function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  helpText.forEach(function(text) {
+    document.getElementById(text.id).onfocus = function() {
+      showHelp(text.help);
+    }
+  });
+}
+
+setupHelp();
+</pre>
+
+<h2 id="Performance_considerations">Performance considerations</h2>
+
+<p>Нерозумно створювати функції в межах інших функцій, якщо замикання не потрібне для конкретного завдання, оскільки це негативно вплине на продуктивність сценарію як з точки зору швидкості обробки, так і споживання пам'яті.</p>
+
+<p>Наприклад, при створенні нового об'єкта / класу методи, як правило, повинні бути пов'язані з прототипом об'єкта, а не визначені в конструкторі об'єктів. Причина полягає в тому, що щоразу, коли конструктор викликається, методи отримують перепризначення (тобто для кожного створення об'єкта).</p>
+
+<p>Розглянемо наступний непрактичний, але показовий випадок:</p>
+
+<pre class="brush: js notranslate">function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+  this.getName = function() {
+    return this.name;
+  };
+
+  this.getMessage = function() {
+    return this.message;
+  };
+}
+</pre>
+
+<p>Попередній код не використовує переваги замикань, а тому може виглядати:</p>
+
+<pre class="brush: js notranslate">function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+}
+MyObject.prototype = {
+  getName: function() {
+    return this.name;
+  },
+  getMessage: function() {
+    return this.message;
+  }
+};
+</pre>
+
+<p>Однак переробляти прототип не рекомендується, тому наступний приклад ще кращий, оскільки він додається до існуючого прототипу:</p>
+
+<pre class="brush: js notranslate">function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+}
+MyObject.prototype.getName = function() {
+  return this.name;
+};
+MyObject.prototype.getMessage = function() {
+  return this.message;
+};
+</pre>
+
+<p>Код вище також може бути записаний чистіше з тим же результатом:</p>
+
+<pre class="brush: js notranslate">function MyObject(name, message) {
+    this.name = name.toString();
+    this.message = message.toString();
+}
+(function() {
+    this.getName = function() {
+        return this.name;
+    };
+    this.getMessage = function() {
+        return this.message;
+    };
+}).call(MyObject.prototype);
+</pre>
+
+<p>In the three previous examples, the inherited prototype can be shared by all objects and the method definitions need not occur at every object creation. See <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details of the Object Model</a> for more details.  У трьох попередніх прикладах успадкований прототип може бути спільним для всіх об'єктів, і визначення методів не повинно виникати при кожному створенні об'єкта. Докладніше див. Деталі Об'єктної Моделі (<a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details of the Object Model</a>).</p>
diff --git a/files/uk/web/javascript/data_structures/index.html b/files/uk/web/javascript/data_structures/index.html
new file mode 100644
index 0000000000..ae52c4dbdc
--- /dev/null
+++ b/files/uk/web/javascript/data_structures/index.html
@@ -0,0 +1,305 @@
+---
+title: Типи та структури даних у JavaScript
+slug: Web/JavaScript/Data_structures
+tags:
+  - JavaScript
+  - Types
+translation_of: Web/JavaScript/Data_structures
+---
+<div>{{jsSidebar("More")}}</div>
+
+<p>Усі мови програмування мають вбудовані структури даних, які, втім, у різних мовах дещо відрізняються. У цій статті ми розглянемо наявні у JavaScript структури даних та їх властивості, а також створення на їх основі інших структур. За можливості наведемо порівняння з іншими мовами.</p>
+
+<h2 id="Динамічна_типізація">Динамічна типізація</h2>
+
+<p>JavaScript є мовою з <em>нестрогою типізацією </em>або ж <em>динамічною мовою</em>. Оголошення змінної в JavaScript не визначає типу даних, а отже всяка змінна з отриманням нового значення отримує і новий тип. Звідси випливає, що тип з'ясовується перед виконанням певної операції, позаяк від нього залежить і результат:</p>
+
+<pre class="brush: js">// Одразу по оголошенню змінна foo разом з початковим значенням отримує тип Number
+var foo = 42;
+
+console.log(foo + 1);  // виводить 43
+
+// Змінна отримує нове значення й тепер має тип String
+foo = 'bar';
+
+console.log(foo + 1);  // виводить "bar1"
+
+// Разом із значенням true тип змінної foo обертається на Boolean
+foo = true;
+</pre>
+
+<h2 id="Типи_даних">Типи даних</h2>
+
+<p>Згідно з останнім стандартом ECMAScript у мові є сім типів даних:</p>
+
+<ul>
+ <li>Шість типів даних, що є {{Glossary("Primitive", "простими величинами")}}:
+  <ul>
+   <li>{{Glossary("Boolean", "Boolean (логічний тип даних)")}}</li>
+   <li>{{Glossary("Null")}}</li>
+   <li>{{Glossary("Undefined")}}</li>
+   <li>{{Glossary("Number", "Number (Число)")}}</li>
+   <li>{{Glossary("String", "String (Рядок)")}}</li>
+   <li>{{Glossary("Symbol", "Symbol (Символ)")}} (новий тип з ECMAScript 6)</li>
+  </ul>
+ </li>
+ <li>та {{Glossary("Object")}}</li>
+</ul>
+
+<h2 id="Прості_величини">Прості величини</h2>
+
+<p>Усі типи даних, окрім об'єкта, передають незмінювані величини (можна встановити нове значення змінної, але неможливо змінити того значення, яке вона вже має). На відміну від, наприклад, мови C, рядки є незмінюваними. Такі величини називають {{Glossary("Primitive", "простими")}} або «примітивними».</p>
+
+<h3 id="Тип_boolean">Тип boolean</h3>
+
+<p>Тип Boolean передає два логічних значення: <code>true</code> та <code>false</code>.</p>
+
+<h3 id="Тип_null">Тип null</h3>
+
+<p>Тип Null, власне, передає лише одне-єдине значення: <code>null</code>. Див. також {{jsxref("null")}} та {{Glossary("Null")}}.</p>
+
+<h3 id="Тип_undefined">Тип undefined</h3>
+
+<p>Змінна, допоки не отримає нового (початкового), має значення <code>undefined</code>. Див. також {{jsxref("Global_Objects/undefined", "undefined")}} та {{Glossary("Undefined")}}.</p>
+
+<h3 id="Тип_number">Тип number</h3>
+
+<p>Відповідно до стандарту ECMAScript, існує лише один тип чисел: <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">64-розрядне число подвійної точності з рухомою комою в форматі IEEE 754</a> (приймає значення від -(2<sup>53</sup> -1) до 2<sup>53</sup> -1). Для цілих чисел немає окремого типу даних. Окрім чисел з рухомою комою цей формат підтримує три особливих значення: <code>+Infinity</code>, <code>-Infinity</code> та {{jsxref("Global_Objects/NaN", "NaN")}} (так зване «не число»).</p>
+
+<p>To check for the largest available value or smallest available value within <code>+/-Infinity</code>, you can use the constants {{jsxref("Number.MAX_VALUE")}} or {{jsxref("Number.MIN_VALUE")}} and starting with ECMAScript 6, you are also able to check if a number is in the double-precision floating-point number range using {{jsxref("Number.isSafeInteger()")}} as well as {{jsxref("Number.MAX_SAFE_INTEGER")}} and {{jsxref("Number.MIN_SAFE_INTEGER")}}. Beyond this range, integers in JavaScript are not safe anymore and will be a double-precision floating point approximation of the value.</p>
+
+<p>The number type has only one integer that has two representations: 0 is represented as -0 and +0. ("0" is an alias for +0). In the praxis, this has almost no impact. For example <code>+0 === -0</code> is <code>true</code>. However, you are able to notice this when you divide by zero:</p>
+
+<pre class="brush: js">&gt; 42 / +0
+Infinity
+&gt; 42 / -0
+-Infinity
+</pre>
+
+<p>Although a number often represents only its value, JavaScript provides <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="en/JavaScript/Reference/Operators/Bitwise_Operators">some binary operators</a>. These can be used to represent several Boolean values within a single number using <a class="external" href="http://en.wikipedia.org/wiki/Mask_%28computing%29">bit masking</a>. However, this is usually considered a bad practice, since JavaScript offers other means to represent a set of Booleans (like an array of Booleans or an object with Boolean values assigned to named properties). Bit masking also tends to make code more difficult to read, understand, and maintain. It may be necessary to use such techniques in very constrained environments, like when trying to cope with the storage limitation of local storage or in extreme cases when each bit over the network counts. This technique should only be considered when it is the last measure that can be taken to optimize size.</p>
+
+<h3 id="Тип_string">Тип string</h3>
+
+<p>JavaScript's {{jsxref("Global_Objects/String", "String")}} type is used to represent textual data. It is a set of "elements" of 16-bit unsigned integer values. Each element in the String occupies a position in the String. The first element is at index 0, the next at index 1, and so on. The length of a String is the number of elements in it.</p>
+
+<p>Unlike in languages like C, JavaScript strings are immutable. This means that once a string is created, it is not possible to modify it. However, it is still possible to create another string based on an operation on the original string. For example:</p>
+
+<ul>
+ <li>A substring of the original by picking individual letters or using {{jsxref("String.substr()")}}.</li>
+ <li>A concatenation of two strings using the concatenation operator (<code>+</code>) or {{jsxref("String.concat()")}}.</li>
+</ul>
+
+<h4 id="Beware_of_stringly-typing_your_code!">Beware of "stringly-typing" your code!</h4>
+
+<p>It can be tempting to use strings to represent complex data. Doing this comes with short-term benefits:</p>
+
+<ul>
+ <li>It is easy to build complex strings with concatenation.</li>
+ <li>Strings are easy to debug (what you see printed is always what is in the string).</li>
+ <li>Strings are the common denominator of a lot of APIs (<a href="/en-US/docs/Web/API/HTMLInputElement" title="HTMLInputElement">input fields</a>, <a href="/en-US/docs/Storage" title="Storage">local storage</a> values, {{ domxref("XMLHttpRequest") }} responses when using <code>responseText</code>, etc.) and it can be tempting to only work with strings.</li>
+</ul>
+
+<p>With conventions, it is possible to represent any data structure in a string. This does not make it a good idea. For instance, with a separator, one could emulate a list (while a JavaScript array would be more suitable). Unfortunately, when the separator is used in one of the "list" elements, then, the list is broken. An escape character can be chosen, etc. All of this requires conventions and creates an unnecessary maintenance burden.</p>
+
+<p>Use strings for textual data. When representing complex data, parse strings and use the appropriate abstraction.</p>
+
+<h3 id="Тип_symbol">Тип symbol</h3>
+
+<p>Symbols are new to JavaScript in ECMAScript Edition 6. A Symbol is a <strong>unique</strong> and <strong>immutable</strong> primitive value and may be used as the key of an Object property (see below). In some programming languages, Symbols are called atoms. For more details see {{Glossary("Symbol")}} and the {{jsxref("Symbol")}} object wrapper in JavaScript.</p>
+
+<h2 id="Об'єкти">Об'єкти</h2>
+
+<p>In computer science, an object is a value in memory which is possibly referenced by an {{Glossary("Identifier", "identifier")}}.</p>
+
+<h3 id="Properties">Properties</h3>
+
+<p>In JavaScript, objects can be seen as a collection of properties. With the <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Object_literals">object literal syntax</a>, a limited set of properties are initialized; then properties can be added and removed. Property values can be values of any type, including other objects, which enables building complex data structures. Properties are identified using key values. A key value is either a String or a Symbol value.</p>
+
+<p>There are two types of object properties which have certain attributes: The data property and the accessor property.</p>
+
+<h4 id="Data_property">Data property</h4>
+
+<p>Associates a key with a value and has the following attributes:</p>
+
+<table class="standard-table">
+ <caption>Attributes of a data property</caption>
+ <tbody>
+  <tr>
+   <th>Attribute</th>
+   <th>Type</th>
+   <th>Description</th>
+   <th>Default value</th>
+  </tr>
+  <tr>
+   <td>[[Value]]</td>
+   <td>Any JavaScript type</td>
+   <td>The value retrieved by a get access of the property.</td>
+   <td>undefined</td>
+  </tr>
+  <tr>
+   <td>[[Writable]]</td>
+   <td>Boolean</td>
+   <td>If <code>false</code>, the property's [[Value]] can't be changed.</td>
+   <td>false</td>
+  </tr>
+  <tr>
+   <td>[[Enumerable]]</td>
+   <td>Boolean</td>
+   <td>If <code>true</code>, the property will be enumerated in <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> loops. See also <a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></td>
+   <td>false</td>
+  </tr>
+  <tr>
+   <td>[[Configurable]]</td>
+   <td>Boolean</td>
+   <td>If <code>false</code>, the property can't be deleted and attributes other than [[Value]] and [[Writable]] can't be changed.</td>
+   <td>false</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Obsolete attributes (as of ECMAScript 3, renamed in ECMAScript 5)</caption>
+ <tbody>
+  <tr>
+   <th>Attribute</th>
+   <th>Type</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>Read-only</td>
+   <td>Boolean</td>
+   <td>Reversed state of the ES5 [[Writable]] attribute.</td>
+  </tr>
+  <tr>
+   <td>DontEnum</td>
+   <td>Boolean</td>
+   <td>Reversed state of the ES5 [[Enumerable]] attribute.</td>
+  </tr>
+  <tr>
+   <td>DontDelete</td>
+   <td>Boolean</td>
+   <td>Reversed state of the ES5 [[Configurable]] attribute.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Accessor_property">Accessor property</h4>
+
+<p>Associates a key with one or two accessor functions (get and set) to retrieve or store a value and has the following attributes:</p>
+
+<table class="standard-table">
+ <caption>Attributes of an accessor property</caption>
+ <tbody>
+  <tr>
+   <th>Attribute</th>
+   <th>Type</th>
+   <th>Description</th>
+   <th>Default value</th>
+  </tr>
+  <tr>
+   <td>[[Get]]</td>
+   <td>Function object or undefined</td>
+   <td>The function is called with an empty argument list and retrieves the property value whenever a get access to the value is performed. See also <a href="/en-US/docs/Web/JavaScript/Reference/Operators/get"><code>get</code></a>.</td>
+   <td>undefined</td>
+  </tr>
+  <tr>
+   <td>[[Set]]</td>
+   <td>Function object or undefined</td>
+   <td>The function is called with an argument that contains the assigned value and is executed whenever a specified property is attempted to be changed. See also <a href="/en-US/docs/Web/JavaScript/Reference/Operators/set"><code>set</code></a>.</td>
+   <td>undefined</td>
+  </tr>
+  <tr>
+   <td>[[Enumerable]]</td>
+   <td>Boolean</td>
+   <td>If <code>true</code>, the property will be enumerated in <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> loops.</td>
+   <td>false</td>
+  </tr>
+  <tr>
+   <td>[[Configurable]]</td>
+   <td>Boolean</td>
+   <td>If <code>false</code>, the property can't be deleted and can't be changed to a data property.</td>
+   <td>false</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note: </strong>Attribute is usually used by JavaScript engine, so you can't directly access it(see more about <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty()</a>).That's why the attribute is put in double square brackets instead of single.</p>
+</div>
+
+<h3 id="Normal_objects_and_functions">"Normal" objects, and functions</h3>
+
+<p>A JavaScript object is a mapping between keys and values. Keys are strings (or {{jsxref("Symbol")}}s) and values can be anything. This makes objects a natural fit for <a class="external" href="http://en.wikipedia.org/wiki/Hash_table">hashmaps</a>.</p>
+
+<p>Functions are regular objects with the additional capability of being callable.</p>
+
+<h3 id="Dates">Dates</h3>
+
+<p>When representing dates, the best choice is to use the built-in <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date"><code>Date</code> utility</a> in JavaScript.</p>
+
+<h3 id="Indexed_collections_Arrays_and_typed_Arrays">Indexed collections: Arrays and typed Arrays</h3>
+
+<p><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="Array">Arrays</a> are regular objects for which there is a particular relationship between integer-key-ed properties and the 'length' property. Additionally, arrays inherit from <code>Array.prototype</code> which provides to them a handful of convenient methods to manipulate arrays. For example, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf" title="en/JavaScript/Reference/Global_Objects/Array/indexOf">indexOf</a></code> (searching a value in the array) or <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/push" title="en/JavaScript/Reference/Global_Objects/Array/push">push</a></code> (adding an element to the array), etc. This makes Arrays a perfect candidate to represent lists or sets.</p>
+
+<p><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Typed Arrays</a> are new to JavaScript with ECMAScript Edition 6 and present an array-like view of an underlying binary data buffer. The following table helps you to find the equivalent C data types:</p>
+
+<p>{{page("/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "TypedArray_objects", "", 0, 3)}}</p>
+
+<h3 id="Keyed_collections_Maps_Sets_WeakMaps_WeakSets">Keyed collections: Maps, Sets, WeakMaps, WeakSets</h3>
+
+<p>These data structures take object references as keys and are introduced in ECMAScript Edition 6. {{jsxref("Set")}} and {{jsxref("WeakSet")}} represent a set of objects, while {{jsxref("Map")}} and {{jsxref("WeakMap")}} associate a value to an object. The difference between Maps and WeakMaps is that in the former, object keys can be enumerated over. This allows garbage collection optimizations in the latter case.</p>
+
+<p>One could implement Maps and Sets in pure ECMAScript 5. However, since objects cannot be compared (in the sense of "less than" for instance), look-up performance would necessarily be linear. Native implementations of them (including WeakMaps) can have look-up performance that is approximately logarithmic to constant time.</p>
+
+<p>Usually, to bind data to a DOM node, one could set properties directly on the object or use <code>data-*</code> attributes. This has the downside that the data is available to any script running in the same context. Maps and WeakMaps make it easy to privately bind data to an object.</p>
+
+<h3 id="Structured_data_JSON">Structured data: JSON</h3>
+
+<p>JSON (JavaScript Object Notation) is a lightweight data-interchange format, derived from JavaScript but used by many programming languages. JSON builds universal data structures. See {{Glossary("JSON")}} and {{jsxref("JSON")}} for more details.</p>
+
+<h3 id="More_objects_in_the_standard_library">More objects in the standard library</h3>
+
+<p>JavaScript has a standard library of built-in objects. Please have a look at the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">reference</a> to find out about more objects.</p>
+
+<h2 id="З'ясування_типу_за_допомогою_оператора_typeof">З'ясування типу за допомогою оператора <code>typeof</code></h2>
+
+<p>The <code>typeof</code> operator can help you to find the type of your variable. Please read the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof">reference page</a> for more details and edge cases.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Первинне визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-8', 'Types')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a class="link-https" href="https://github.com/nzakas/computer-science-in-javascript/">Nicholas Zakas collection of common data structure and common algorithms in JavaScript.</a></li>
+ <li><a href="https://github.com/monmohan/DataStructures_In_Javascript" title="https://github.com/monmohan/DataStructures_In_Javascript">Search Tre(i)es implemented in JavaScript</a></li>
+</ul>
diff --git a/files/uk/web/javascript/enumerability_and_ownership_of_properties/index.html b/files/uk/web/javascript/enumerability_and_ownership_of_properties/index.html
new file mode 100644
index 0000000000..b176c24495
--- /dev/null
+++ b/files/uk/web/javascript/enumerability_and_ownership_of_properties/index.html
@@ -0,0 +1,330 @@
+---
+title: Перелічуваність та належність властивостей
+slug: Web/JavaScript/Enumerability_and_ownership_of_properties
+tags:
+  - JavaScript
+  - Посібник
+translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p>Перелічуваними називаються властивості, чий внутрішній прапор перелічуваності має значення true, що є значенням за замовчуванням для властивостей, створених простим присвоєнням або за допомогою ініціалізатора властивості (властивості, визначені за допомогою <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a> та подібного, за замовчуванням мають значення перелічуваності false). Перелічувані властивості з'являються у циклах <a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a>, якщо тільки ключ властивості не є <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Symbol">символом</a>. Належність властивостей визначається тим, чи належить властивість безпосередньо до об'єкта, а не до його ланцюга прототипів. Властивості об'єкта також можна отримати всі загалом. Існують численні вбудовані засоби виявлення, перебору/переліку та отримання властивостей об'єкта, а у таблиці нижче наведено, які з них є доступними. Далі наведено зразок коду, який демонструє, як отримати відсутні категорії.</p>
+
+<div style="overflow: auto; width: 100%;">
+<table>
+ <caption>Перелічуваність та належність властивостей - вбудовані методи виявлення, отримання та перебору</caption>
+ <tbody>
+  <tr>
+   <th>Функціональність</th>
+   <th>Власний об'єкт</th>
+   <th>Власний об'єкт та його ланцюг прототипів</th>
+   <th>Лише ланцюг прототипів</th>
+  </tr>
+  <tr>
+   <td>Виявлення</td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">Перелічувані</th>
+       <th scope="col">Неперелічувані</th>
+       <th scope="col">Перелічувані та неперелічувані</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>
+        <p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></p>
+
+        <p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a></code></p>
+       </td>
+       <td>
+        <p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a></code> – відфільтровані для виключення перелічуваних властивостей за допомогою <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></p>
+       </td>
+       <td><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a></code></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">Перелічувані</th>
+       <th scope="col">Неперелічувані</th>
+       <th scope="col">Перелічувані та неперелічувані</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>Недоступні без додаткового коду</td>
+       <td>Недоступні без додаткового коду</td>
+       <td><code><a href="/uk/docs/Web/JavaScript/Reference/Operators/in">in</a></code></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>Недоступні без додаткового коду</td>
+  </tr>
+  <tr>
+   <td>Отримання</td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">Перелічувані</th>
+       <th scope="col">Неперелічувані</th>
+       <th scope="col">Перелічувані та неперелічувані</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>
+        <p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a></code></p>
+
+        <p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code> </p>
+
+        <p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code></p>
+       </td>
+       <td><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code>, <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code> – відфільтровані для виключення перелічуваних властивостей за допомогою <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></td>
+       <td>
+        <p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code></p>
+
+        <p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code></p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>Недоступні без додаткового коду</td>
+   <td>Недоступні без додаткового коду</td>
+  </tr>
+  <tr>
+   <td>Перебір</td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">Перелічувані</th>
+       <th scope="col">Неперелічувані</th>
+       <th scope="col">Перелічувані та неперелічувані</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>
+        <p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a></code></p>
+
+        <p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code> </p>
+
+        <p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code></p>
+       </td>
+       <td><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code>, <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code> – відфільтровані для виключення перелічуваних властивостей за допомогою <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></td>
+       <td>
+        <p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code></p>
+
+        <p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code></p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">Перелічувані</th>
+       <th scope="col">Неперелічувані</th>
+       <th scope="col">Перелічувані та неперелічувані</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>
+        <p><code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in">for..in</a></code></p>
+
+        <p>(за винятком символів)</p>
+       </td>
+       <td>Недоступні без додаткового коду</td>
+       <td>Недоступні без додаткового коду</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>Недоступні без додаткового коду</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Отримання_властивостей_за_перелічуваністюналежністю">Отримання властивостей за перелічуваністю/належністю</h2>
+
+<p>Зауважте, що це не найефективніший алгоритм для усіх випадків, але він корисний для швидкої демонстрації.</p>
+
+<ul>
+ <li>Виявлення може відбуватись через <code>SimplePropertyRetriever.методЯкийВамПотрібен(obj).indexOf(prop) &gt; -1</code></li>
+ <li>Перебір може відбуватись через <code>SimplePropertyRetriever.методЯкийВамПотрібен(obj).forEach(function (value, prop) {});</code> (або скористайтесь <code>filter()</code>, <code>map()</code> і т. д.)</li>
+</ul>
+
+<pre class="brush: js notranslate">var SimplePropertyRetriever = {
+    getOwnEnumerables: function(obj) {
+        return this._getPropertyNames(obj, true, false, this._enumerable);
+         // Або скористайтесь for..in, відфільтрувавши методом hasOwnProperty, або просто цим: return Object.keys(obj);
+    },
+    getOwnNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, true, false, this._notEnumerable);
+    },
+    getOwnEnumerablesAndNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, true, false, this._enumerableAndNotEnumerable);
+        // Або просто скористайтесь: return Object.getOwnPropertyNames(obj);
+    },
+    getPrototypeEnumerables: function(obj) {
+        return this._getPropertyNames(obj, false, true, this._enumerable);
+    },
+    getPrototypeNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, false, true, this._notEnumerable);
+    },
+    getPrototypeEnumerablesAndNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, false, true, this._enumerableAndNotEnumerable);
+    },
+    getOwnAndPrototypeEnumerables: function(obj) {
+        return this._getPropertyNames(obj, true, true, this._enumerable);
+        // Або можна використати невідфільтрований результат for..in
+    },
+    getOwnAndPrototypeNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, true, true, this._notEnumerable);
+    },
+    getOwnAndPrototypeEnumerablesAndNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable);
+    },
+    // Приватні статичні фукнції зворотного виклику для перевірки властивостей
+    _enumerable: function(obj, prop) {
+        return obj.propertyIsEnumerable(prop);
+    },
+    _notEnumerable: function(obj, prop) {
+        return !obj.propertyIsEnumerable(prop);
+    },
+    _enumerableAndNotEnumerable: function(obj, prop) {
+        return true;
+    },
+    // Натхненний http://stackoverflow.com/a/8024294/271577
+    _getPropertyNames: function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) {
+        var props = [];
+
+        do {
+            if (iterateSelfBool) {
+                Object.getOwnPropertyNames(obj).forEach(function(prop) {
+                    if (props.indexOf(prop) === -1 &amp;&amp; includePropCb(obj, prop)) {
+                        props.push(prop);
+                    }
+                });
+            }
+            if (!iteratePrototypeBool) {
+                break;
+            }
+            iterateSelfBool = true;
+        } while (obj = Object.getPrototypeOf(obj));
+
+        return props;
+    }
+};</pre>
+
+<h2 id="Таблиця_виявлення">Таблиця виявлення</h2>
+
+<div style="overflow: auto; width: 100%;">
+<table>
+ <thead>
+  <tr>
+   <th scope="row"></th>
+   <th scope="col"><code>in</code></th>
+   <th scope="col"><code>for..in</code></th>
+   <th scope="col"><code>obj.hasOwnProperty</code></th>
+   <th scope="col"><code>obj.propertyIsEnumerable</code></th>
+   <th scope="col"><code>Object.keys</code></th>
+   <th scope="col"><code>Object.getOwnPropertyNames</code></th>
+   <th scope="col"><code>Object.getOwnPropertyDescriptors</code></th>
+   <th scope="col"><code>Reflect.ownKeys()</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Перелічувані</th>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+  </tr>
+  <tr>
+   <th scope="row">Неперелічувані</th>
+   <td>true</td>
+   <td>false</td>
+   <td>true</td>
+   <td>false</td>
+   <td>false</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+  </tr>
+  <tr>
+   <th scope="row">Символи</th>
+   <td>true</td>
+   <td>false</td>
+   <td>true</td>
+   <td>true</td>
+   <td>false</td>
+   <td>false</td>
+   <td>true</td>
+   <td>true</td>
+  </tr>
+  <tr>
+   <th scope="row">Успадковані перелічувані</th>
+   <td>true</td>
+   <td>true</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+  </tr>
+  <tr>
+   <th scope="row">Успадковані неперелічувані</th>
+   <td>true</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+  </tr>
+  <tr>
+   <th scope="row">Успадковані символи</th>
+   <td>true</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><code><a href="/uk/docs/Web/JavaScript/Reference/Operators/in">in</a></code></li>
+ <li><code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in">for..in</a></code></li>
+ <li>{{jsxref("Object.hasOwnProperty()")}}</li>
+ <li>{{jsxref("Object.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyDescriptors()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/eventloop/index.html b/files/uk/web/javascript/eventloop/index.html
new file mode 100644
index 0000000000..ab47fd4b48
--- /dev/null
+++ b/files/uk/web/javascript/eventloop/index.html
@@ -0,0 +1,152 @@
+---
+title: Модель конкурентності та цикл подій
+slug: Web/JavaScript/EventLoop
+tags:
+  - JavaScript
+  - обробники подій
+  - події
+  - цикл подій
+  - черга
+translation_of: Web/JavaScript/EventLoop
+---
+<div>{{JsSidebar("Advanced")}}</div>
+
+<p>JavaScript має модель одночасності, що базується на <strong>циклі подій</strong>, який є відповідальним за виконання коду, збір та обробку подій та виконання підзадач з черги. Ця модель доволі сильно відрізняється від моделей у інших мовах, таких як С та Java.</p>
+
+<h2 id="Концепції_виконання">Концепції виконання</h2>
+
+<p>Наступні розділи пояснють теоретичну модель. Сучасні імплементації JavaScript реалізують і значно оптимізують описану семантику.</p>
+
+<h3 id="Візуальне_відображення">Візуальне відображення</h3>
+
+<p style="text-align: center;"><img alt="Стек, купа, черга" src="https://mdn.mozillademos.org/files/17036/visual.png" style="height: 270px; width: 294px;"></p>
+
+<h3 id="Стек">Стек</h3>
+
+<p>Виклики функцій утворюють стек <em>фреймів (frames)</em>.</p>
+
+<pre class="brush: js">function foo(b) {
+  var a = 10;
+  return a + b + 11;
+}
+
+function bar(x) {
+  var y = 3;
+  return foo(x * y);
+}
+
+console.log(bar(7)); // вертає 42
+</pre>
+
+<p>Коли викликається <code><font face="Consolas, Liberation Mono, Courier, monospace">bar</font></code>, утворюється перший фрейм, який містить аргументи та локальні змінні функції <code>bar</code>. Коли <code><font face="Consolas, Liberation Mono, Courier, monospace">bar</font></code> викликає <code>foo</code>, створюється другий фрейм та розміщується над першим, він містить аргументи та локальні змінні функції <code>foo</code>. Коли <code>foo</code> повертає значення, верхній фрейм виштовхується зі стеку (залишаючи лише фрейм виклику <font face="Consolas, Liberation Mono, Courier, monospace"><code>bar</code></font>). Коли <code><font face="Consolas, Liberation Mono, Courier, monospace">bar</font></code> повертає значення, стек стає порожнім.</p>
+
+<h3 id="Купа">Купа</h3>
+
+<p>Об'єкти розподіляються у купі, яка є лише назвою для позначення великої (здебільшого не структурованої) області пам'яті.</p>
+
+<h3 id="Черга">Черга</h3>
+
+<p>Процес виконання JavaScript використовує чергу повідомлень, яка є списком повідомлень, що мають бути опрацьовані. Кожне повідомлення має пов'язану функцію, яка викликається для обробки цього повідомлення </p>
+
+<p>В певний момент {{anch("Цикл_подій", "циклу подій")}} процес виконання починає обробку повідомлень з черги, починаючи з найстаршого. Для цього повідомлення видаляється з черги, а його пов'язана функція викликається з повідомленням в якості вхідного параметра. Як завжди, виклик функції створює новий фрейм стеку для цієї функції.</p>
+
+<p>Опрацювання функцій продовжується, доки стек знову не стане порожнім. Тоді цикл подій опрацює наступне повідомлення у черзі (якщо воно є).</p>
+
+<h2 id="Цикл_подій">Цикл подій</h2>
+
+<p><strong>Цикл подій</strong> отримав свою назву через те, як він зазвичай реалізується. Як правило, це схоже на:</p>
+
+<pre class="brush: js">while (queue.waitForMessage()) {
+  queue.processNextMessage();
+}</pre>
+
+<p><code>queue.waitForMessage</code> синхронно чекає на прибуття повідомлення (якщо воно вже не надійшло і не чекає на обробку).</p>
+
+<h3 id="Виконання_до_завершення">"Виконання до завершення"</h3>
+
+<p>Кожне повідомлення обробляється до завершення, перш, ніж обробляти будь-яке інше повідомлення.</p>
+
+<p>Це надає деякі приємні властивості для вашої програми, в тому числі той факт, що, коли виконується функція, вона не може бути попередньо вилучена і виконається до кінця перш, ніж буде запущено будь-який інший код (і зможе змінювати дані, якими користується функція). Це відрізняється, наприклад, від C, де, якщо функція виконується у потоці, її можна зупинити в будь-якій точці, щоб запустити інший код в іншому потоці.</p>
+
+<p>Зворотним боком цієї моделі є те, що, якщо обробка повідомлення займає надто багато часу, веб-застосунок не може обробити взаємодії користувача, як-от натискання чи прокручування. Веб-переглядач пом'якшує це діалоговим вікном "a script is taking too long to run" (виконання сценарію займає забагато часу). Гарною практикою є робити обробку повідомлень короткою і, за можливості, розбивати одне повідомлення на декілька.</p>
+
+<h3 id="Додавання_повідомлень">Додавання повідомлень</h3>
+
+<p>У веб-переглядачах повідомлення додаються щоразу, коли виникає подія, до якої приєднаний прослуховувач подій. Якщо прослуховувача немає, подія втрачається. Отже, натискання на елементі з обробником подій натискання додасть повідомлення, так само з будь-якою іншою подією.</p>
+
+<p>Функція <code><a href="/uk/docs/Web/API/WindowTimers/setTimeout">setTimeout</a></code> викликається з двома аргументами: повідомлення, що додається до черги, та значення часу (необов'язкове; за замовчуванням <code>0</code>). <em>Значення часу </em>відображає (мінімальну) затримку, після якої повідомлення буде, власне, додане до черги. Якщо в черзі немає інших повідомлень, це повідомлення буде оброблене одразу після затримки. Однак, якщо там є повідомлення, повідомленню <code>setTimeout</code> доведеться зачекати, доки не будуть оброблені інші повідомлення. З цієї причини другий аргумент вказує <em>мінімальний</em>, а не гарантований час.</p>
+
+<p>Ось приклад, який демонструє цю концепцію (<code>setTimeout</code> не виконується негайно після того, як його таймер завершився): </p>
+
+<pre class="brush: js">const s = new Date().getSeconds();
+
+setTimeout(function() {
+  // виводить "2", тобто, функція зворотного виклику не запустилась одразу через 500 мілісекунд.
+  console.log("Функція запустилась через " + (new Date().getSeconds() - s) + " секунд");
+}, 500)
+
+while (true) {
+  if (new Date().getSeconds() - s &gt;= 2) {
+    console.log("Добре, виконувалось 2 секунди")
+    break;
+  }
+}</pre>
+
+<h3 id="Нульові_затримки">Нульові затримки</h3>
+
+<p>Нульова затримка насправді не означає, що зворотній виклик запуститься через нуль мілісекунд. Виклик {{domxref ("WindowTimers.setTimeout", "setTimeout")}} із затримкою в <code>0</code> (нуль) мілісекунд не виконує функцію зворотного виклику після заданого інтервалу.</p>
+
+<p>Виконання залежить від кількості задач, що чекають у черзі. У наведеному нижче прикладі повідомлення <code>"це просто повідомлення"</code> буде написане у консоль раніше, ніж буде оброблене повідомлення у зворотному виклику, оскільки затримка - це <em>мінімальний</em> час, необхідний для обробки запиту (а не <em>гарантований</em> час).</p>
+
+<p>Загалом, <code>setTimeout</code> має чекати, доки виконається весь код для повідомлень у черзі, незважаючи на те, що ви вказали певний часовий ліміт для своєї функції <code>setTimeout</code>.</p>
+
+<pre class="brush: js">(function() {
+
+  console.log('це початок');
+
+  setTimeout(function cb() {
+    console.log('Зворотний виклик 1: це повідомлення зворотного виклику');
+  });
+
+  console.log('це просто повідомлення');
+
+  setTimeout(function cb1() {
+    console.log('Зворотний виклик 2: це повідомлення зворотного виклику');
+  }, 0);
+
+  console.log('це кінець');
+
+})();
+
+// "це початок"
+// "це просто повідомлення"
+// "це кінець"
+// "Зворотний виклик 1: це повідомлення зворотного виклику"
+// "Зворотний виклик 2: це повідомлення зворотного виклику"
+</pre>
+
+<h3 id="Декілька_процесів_виконання_що_спілкуються_між_собою">Декілька процесів виконання, що спілкуються між собою</h3>
+
+<p>Веб-виконавець або iframe перехресного походження має свій стек, купу та чергу повідомлень. Два різних процеси виконання можуть спілкуватися надсиланням повідомлень за допомогою методу <a href="/uk/docs/Web/API/Window/postMessage"><code>postMessage</code></a>. Цей метод додає повідомлення до іншого процесу виконання, якщо останній прослуховує події <code>message</code>.</p>
+
+<h2 id="Жодного_блокування">Жодного блокування</h2>
+
+<p>Дуже цікавою властивістю моделі циклу подій є те, що JavaScript, на відміну від багатьох інших мов, ніколи не блокує. Управління введенням/виводом зазвичай здійснюється за допомогою подій та зворотних викликів, тому, коли програма чекає на результат запиту <a href="/uk/docs/Web/API/IndexedDB_API">IndexedDB</a> чи запиту <a href="/uk/docs/Web/API/XMLHttpRequest">XHR</a>, вона може опрацьовувати інші події, такі як введення даних користувачем.</p>
+
+<p>Існують спадкові винятки, такі як <code>alert</code> або синхронний XHR, але вважається гарною практикою їх уникати. Будьте обережні: <a href="http://stackoverflow.com/questions/2734025/is-javascript-guaranteed-to-be-single-threaded/2734311#2734311">існують винятки з винятку</a> (але зазвичай це помилки реалізації, а не що-небудь інше).</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#event-loops', 'Event loops')}}</td>
+  </tr>
+  <tr>
+   <td><a href="https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/#what-is-the-event-loop">Node.js Event Loop</a></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/uk/web/javascript/guide/control_flow_and_error_handling/index.html b/files/uk/web/javascript/guide/control_flow_and_error_handling/index.html
new file mode 100644
index 0000000000..c055e31dc0
--- /dev/null
+++ b/files/uk/web/javascript/guide/control_flow_and_error_handling/index.html
@@ -0,0 +1,465 @@
+---
+title: Управління потоком виконання та обробка помилок
+slug: Web/JavaScript/Guide/Control_flow_and_error_handling
+translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div>
+
+<p class="summary">JavaScript підтримує компактний набір інструкцій, зокрема інструкцій для управління потоком, які можна використати, щоб включити інтерактивність до вашого додатку. Цей розділ надає огляд таких інструкцій.</p>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements">Довідник JavaScript</a> містить вичерпні дані про інструкції, описані у цьому розділі. Символ крапки з комою (<code>;</code>) розділяє інструкції у JavaScript-коді.</p>
+
+<p>Будь-який вираз у JavaScript також являється інструкцією. Повну інформацію про вирази дивіться у розділі <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Вирази та оператори</a>.</p>
+
+<h2 id="Блокова_інструкція">Блокова інструкція</h2>
+
+<p>Найбільш базовою інструкцією є блокова, що об'єднує кілька інструкцій в одну. Блок обмежується парою фігурних дужок:</p>
+
+<pre class="syntaxbox notranslate">{
+  інструкція_1;
+  інструкція_2;
+  .
+  .
+  .
+  інструкція_n;
+}
+</pre>
+
+<h3 id="Приклад"><strong>Приклад</strong></h3>
+
+<p>Блокова інструкція зазвичай використовується поряд з інструкціями для управління потоком виконання (наприклад, <code>if</code>, <code>for</code>, <code>while</code>).</p>
+
+<pre class="brush: js notranslate">while (x &lt; 10) {
+  x++;
+}
+</pre>
+
+<p>У даному випадку, <code>{ x++; }</code> є блоковою інструкцією.</p>
+
+<div class="blockIndicator note">
+<p><strong>Важливо</strong>: JavaScript до ECMAScript2015 не мав блокової області видимості. Змінні, об'явлені всередині блоку, були видимі в області меж зовнішньої функції або ж усього скрипта. І ефект від їхнього зміни поширювався за межі блоку. Інакше кажучи, блокові інструкції не створювали області видимості.</p>
+
+<p>"Поодинокі" блоки у JavaScript можуть мати зовсім інші наслідки, ніж у мовах C чи Java. Наприклад:</p>
+
+<pre class="brush: js notranslate">var x = 1;
+{
+  var x = 2;
+}
+console.log(x); // в результаті - 2
+</pre>
+
+<p>В результаті отримуємо 2, тому що інструкція <code>var x</code> всередині блоку перебуває в одній області видимості з інструкцією <code>var x</code> перед блоком. У C чи Java подібний код поверне 1.</p>
+
+<p>Починаючи з ECMAScript2015, декларації змінних <code>let</code> і <code>const</code> мають блокову область видимості. Докладніше на довідкових сторінках {{jsxref("Statements/let", "let")}} і {{jsxref("Statements/const", "const")}}.</p>
+</div>
+
+<h2 id="Умовні_інструкції">Умовні інструкції</h2>
+
+<p>Умовною інструкцією називається набір команд, що виконаються, якщо певна умова буде істинною. JavaScript підтримує два види умовних інструкцій: <code>if...else</code> та <code>switch</code>.</p>
+
+<h3 id="Інструкція_if...else">Інструкція <code>if...else</code></h3>
+
+<p>Використовуйте <code>if</code>, щоб виконати інструкцію, якщо логічна умова являється істинною. Використовуйте необов'яковий <code>else</code>, щоб виконати інструкцію, якщо умова являється хибною. Інструкція <code>if</code> виглядає так:</p>
+
+<pre class="syntaxbox notranslate">if (умова) {
+  інструкція_1;
+} else {
+  інструкція_2;
+}</pre>
+
+<p>Тут <code>умова</code> може бути будь-яким виразом, що зводиться до <code>true</code> чи <code>false</code> (дивіться розділ <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean#Description">Boolean</a> для роз'яснення, що і як обчислюється до <code>true</code> чи <code>false</code>). Якщо <code>умова</code> обчислюється до <code>true</code>, виконується <code>інструкція_1</code>; інакше виконується <code>інструкція_2</code>. <code>інструкція_1</code> та <code>інструкція_2</code> можуть бути будь-якими, включаючи вкладені інструкції <code>if</code>.</p>
+
+<p>Можна також суміщувати інструкції у вигляді <code>else if</code>, щоб послідовно перевірити кілька умов, як-от, наприклад:</p>
+
+<pre class="syntaxbox notranslate">if (умова_1) {
+  інструкція_1;
+} else if (умова_2) {
+  інструкція_2;
+} else if (умова_n) {
+  інструкція_n;
+} else {
+  інструкція_остання;
+}
+</pre>
+
+<p>У випадку наявності кількох таких умов буде виконано лише найперший обчислений до <code>true</code>. Щоб виконати кілька інструкцій, слід об'єднати їх у блок (<code>{ ... }</code>) .</p>
+
+<h4 id="Найкращі_практики">Найкращі практики</h4>
+
+<p>Загалом, хорошою практикою вважається завжди використовувати блоки інструкцій, особливо при вкладенні інструкцій <code>if</code>:</p>
+
+<pre class="syntaxbox notranslate">if (умова) {
+  інструкція_1_виконується_якщо_умова_правильна;
+  інструкція_2_виконується_якщо_умова_правильна;
+} else {
+  інструкція_3_виконується_якщо_умова_хибна;
+  інструкція_4_виконується_якщо_умова_хибна;
+}
+</pre>
+
+<div>Не рекомендується використовувати звичайні присвоєння в умовних виразах, бо присвоєння можна сплутати з порівнянням при перегляді коду.</div>
+
+<div></div>
+
+<div>Наприклад, не слід писати ось так:</div>
+
+<pre class="example-bad brush: js notranslate">// Ймовірно, буде прочитано як "x == y"
+if (x = y) {
+  /* statements here */
+}
+</pre>
+
+<p>Якщо все ж таки потрібно використати присвоєння всередині умовного виразу, загальною практикою є додавання зайвих дужок навколо присвоєння, як-от:</p>
+
+<pre class="example-good brush: js notranslate">if ((x = y)) {
+  /* інструкції тут */
+}
+</pre>
+
+<h4 id="Хибні_значення">Хибні значення</h4>
+
+<p>Наступні значення обчислюються до <code>false</code> (також знані як {{Glossary("Falsy")}} значення):</p>
+
+<ul>
+ <li><code>false</code></li>
+ <li><code>undefined</code></li>
+ <li><code>null</code></li>
+ <li><code>0</code></li>
+ <li><code>NaN</code></li>
+ <li>порожня стрічка (<code>""</code>)</li>
+</ul>
+
+<p>Всі інші значення (включно з усіма об'єктами), обчислюються до <code>true</code> при передачі в умовний вираз.</p>
+
+<div class="blockIndicator note">
+<p><strong>Увага:</strong> не плутайте примітивні булеві значення <code>true</code> та <code>false</code> із істинними і хибними значеннями об'єкту {{jsxref("Boolean")}}. Наприклад:</p>
+
+<pre class="brush: js notranslate">var b = new Boolean(false);
+if (b) // цей умовний вираз буде істинним
+if (b == true) // цей умовний вираз буде хибним
+</pre>
+</div>
+
+<h4 id="Приклад_2"><strong>Приклад</strong></h4>
+
+<p>У наведеному далі прикладі функція <code>checkData</code> повертає <code>true</code>, якщо в об'єкті  <code>Text</code> три символи, а інакше вона показує сповіщення та повертає <code>false</code>.</p>
+
+<pre class="brush: js notranslate">function checkData() {
+  if (document.form1.threeChar.value.length == 3) {
+    return true;
+  } else {
+    alert('Enter exactly three characters. ' +
+    document.form1.threeChar.value + ' is not valid.');
+    return false;
+  }
+}<code>
+</code></pre>
+
+<h3 id="Інструкція_switch">Інструкція <code>switch</code></h3>
+
+<p>Інструкція <code>switch</code> дозволяє програмі оцінити вираз і спробувати співставити значення виразу з міткою <code>case</code>. Якщо відповідність знайдено  , програма виконує пов'язану з цим інструкцію.</p>
+
+<p>Інструкція <code>switch</code> виглядає наступним чином:</p>
+
+<pre class="brush: js notranslate">switch (expression) {
+  case label_1:
+    statements_1
+    [break;]
+  case label_2:
+    statements_2
+    [break;]
+    ...
+  default:
+    statements_def
+    [break;]
+}</pre>
+
+<p>JavaScript розуміє <code>switch</code> інструкцію наступним чином:</p>
+
+<ul>
+ <li>Програма спочатку шукає пункт <code>case</code> із міткою, що відповідає значенню виразу, а потім передає керування цьому пунктові, у якому виконуються відповідні інструкції.</li>
+ <li>Якщо відповідної мітки не знайдено, програма шукає необов'язковий пункт <code>default</code>:
+  <ul>
+   <li>Якщо пунт <code>default</code> знайдено, програма передає керування йому, виконуючи відповідні інструкції.</li>
+   <li>Якщо пункту <code>default</code> не знайдено, програма продовжує виконання інструкцій після закінчення <code>switch</code>.</li>
+   <li>(Традиційно, пункт <code>default</code> записується останнім, але це не обов'язково.)</li>
+  </ul>
+ </li>
+</ul>
+
+<h4 id="Інструкція_break">Інструкція <code>break</code></h4>
+
+<p>Необов'язкова інструкція <code>break</code>, пов’язана із кожним пунктом <code>case</code>, забезпечує те, що програма виходить з конструкції <code>switch</code>, якщо виконується відповідна умова, і продовжує виконання інструкцій після конструкції <code>switch</code>. Якщо <code>break</code> не використовується, програма продовжує виконання інструкції наступних пунктів всередині <code>switch</code>, не перевіряючи умови.</p>
+
+<h5 id="Приклад_3"><strong>Приклад</strong></h5>
+
+<p>У наступному прикладі, якщо <code>fruittype</code> дорівнює "Bananas", програма виконує пов'язану з пукнтом "Bananas" інструкцію. Коли виникає <code>break</code>, програма припиняє <code>switch</code> та виконує наступну після <code>switch</code> інструкцію. Якщо <code>break</code> б була опущена, інструкції для пункту "Cherries" також би виконалися.</p>
+
+<pre class="brush: js notranslate">switch (fruittype) {
+  case 'Oranges':
+    console.log('Oranges are $0.59 a pound.');
+    break;
+  case 'Apples':
+    console.log('Apples are $0.32 a pound.');
+    break;
+  case 'Bananas':
+    console.log('Bananas are $0.48 a pound.');
+    break;
+  case 'Cherries':
+    console.log('Cherries are $3.00 a pound.');
+    break;
+  case 'Mangoes':
+    console.log('Mangoes are $0.56 a pound.');
+    break;
+  case 'Papayas':
+    console.log('Mangoes and papayas are $2.79 a pound.');
+    break;
+  default:
+   console.log('Sorry, we are out of ' + fruittype + '.');
+}
+console.log("Is there anything else you'd like?");</pre>
+
+<h2 id="Інструкції_для_обробки_винятків">Інструкції для обробки винятків</h2>
+
+<p>Використовуючи інструкцію <code>throw</code> , можна викидати виключення і обробляти їх за допомогою інструкцій <code>try...catch</code>.</p>
+
+<ul>
+ <li><a href="#throw_statement">Інструкція <code>throw</code></a></li>
+ <li><a href="#try...catch_statement">Інструкція <code>try...catch</code></a></li>
+</ul>
+
+<h3 id="Типи_винятків">Типи винятків</h3>
+
+<p>В якості виключення у JavaScript можна викинути практично будь-який об'єкт. Тим не менш, не всі викинуті об'єкти створено однаковими. Позаяк доволі звичною практикою є викидати числа чи стрічки в якості помилок, часто краще використовувати якийсь із типів винятків, спеціально створених для цих потреб:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error#Error_types">Винятки ECMAScript</a></li>
+ <li>{{domxref("DOMException")}} and {{domxref("DOMError")}}</li>
+</ul>
+
+<h3 id="Оператор_throw">Оператор <code>throw</code></h3>
+
+<p>Скористайтеся оператором <code>throw</code>, щоб викинути виняток. Коли викидаєте виняток, ви вказуєте вираз, що містить значення, яке викидається:</p>
+
+<pre class="syntaxbox notranslate">throw expression;
+</pre>
+
+<p>Ви можете викинути будь-який вираз, не тільки вирази окремих типів. Наступний код викидає кілька винятків різних типів:</p>
+
+<pre class="brush: js notranslate">throw 'Error2';   // тип String
+throw 42;         // тип Number
+throw true;       // тип Boolean
+throw {toString: function() { return "Я об'єкт!"; } };
+</pre>
+
+<div class="note"><strong>Примітка:</strong> Ви можете вказати об'єкт, коли викидаєте виняток. Після цього ви можете звертатися до властивостей об'єкта у блоці <code>catch</code>.</div>
+
+<pre class="brush: js notranslate">// Створити об'єкт UserException
+function UserException(message) {
+  this.message = message;
+  this.name = 'UserException';
+}
+
+// Гарненько оформити виняток у разі використання в якості рядка
+// (наприклад, у консолі помилок)
+UserException.prototype.toString = function() {
+  return this.name + ': "' + this.message + '"';
+}
+
+// Створити екземпляр об'єкта та викинути його
+throw new UserException('Значення завелике');</pre>
+
+<h3 id="Інструкція_try...catch">Інструкція <code>try...catch</code></h3>
+
+<p>Інструкція <code>try...catch</code> позначає блок інструкцій, які програма спробує виконати, і вказує одну чи більше реакцій на викинутий виняток. Коли викидається виняток, інструкція <code>try...catch</code> його ловить.</p>
+
+<p>Інструкція <code>try...catch</code> складається з блока <code>try</code>, що містить одну чи більше інструкцій, і блоку <code>catch</code>, що містить інструкції до виконання у разі, якщо у блоці <code>try</code> буде викинуто виняток.</p>
+
+<p>Інакше кажучи, ми хочемо, щоб блок <code>try</code> успішно виконався. Але якщо так не станеться, ми хочемо, щоб управління перейшло до блоку <code>catch</code>. Практично, якщо будь-яка з інструкцій всередині блоку <code>try</code> (або всередині функції, викликаної зсередини блоку <code>try</code>) викидає виняток, управління <em>одразу</em> передається до блоку <code>catch</code>. У разі, якщо блок <code>try</code> не викинув жодного винятку, блок <code>catch</code> пропускається. А блок <code>finally</code> виконується після виконання <code>try</code> та <code>catch</code> і до інструкцій, що слідують після Інструкції <code>try...catch</code>.</p>
+
+<p>Наступний приклад містить інструкцію <code>try...catch</code>. У прикладі викликається функція, що повертає назву місяця з масиву, керуючись номером, переданим у функцію. Якщо число не відповідає номерові місяця (<code>1</code>–<code>12</code>), викидається виняток зі стрічкою <code>"InvalidMonthNo"</code> в якості значення, а інструкції, описані у блоці <code>catch</code>, встановлюють значення змінної <code><var>monthName</var></code> у <code>'unknown'</code>.</p>
+
+<pre class="brush: js notranslate">function getMonthName(mo) {
+  mo = mo - 1; // Коригуємо порядковий номер місяця для використання в якості
+               // індекса масиву (1 = Jan, 12 = Dec)
+  var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
+                'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  if (months[mo]) {
+    return months[mo];
+  } else {
+    throw 'InvalidMonthNo'; // тут застосуємо ключове слово throw
+  }
+}
+
+try { // інструкції, які ми намагаємося виконати
+  monthName = getMonthName(myMonth); // функція може викинути виняток
+}
+catch (e) {
+  monthName = 'unknown';
+  logMyErrors(e); // передаємо значення винятку в обробник помилок (наприклад, вашу власну функцію)
+}
+</pre>
+
+<h4 id="Блок_catch">Блок <code>catch</code></h4>
+
+<p>Блок <code>catch</code> можна використовувати для обробки всіх винятків, що можуть виникнути при виконання блоку <code>try</code>.</p>
+
+<pre class="syntaxbox notranslate">catch (<var>catchID</var>) {
+  <var>інструкції</var>
+}</pre>
+
+<p>Блок <code>catch</code> задає ідентифікатор (<code><var>catchID</var></code> у прикладі вище), що містить значення, вказане оператором <code>throw</code>. За допомогою цього ідентифікатора можна отримати інформацію про виняток, який було викинуто.</p>
+
+<p>JavaScript створює цей ідентифікатор, як тільки управління переходить до блоку <code>catch</code>. Ідентифікатор існує доти, доки виконується <code>catch</code>. Як тільки блок <code>catch</code> завершує роботу, ідентифікатор знищується.</p>
+
+<p>Наприклад, наступний код викидає виняток. Коли це відбувається, управління передається до блоку <code>catch</code>.</p>
+
+<pre class="brush: js notranslate">try {
+  throw 'myException'; // створює виняток
+}
+catch (e) {
+  // інструкції для обробки якихось винятків
+  logMyErrors(e); // передає об'єкт винятку до обробника помилок
+}
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Найкращі практики:</strong> Під час запису помилок до консолі всередині блоку <code>catch</code> для потреб зневадження рекомендується використовувати <code>console.error()</code> замість <code>console.log()</code>. Це одразу форматує повідомлення як помилку, і також додає його до загального списку помилок, що трапилися на сторінці. </p>
+</div>
+
+<h4 id="Блок_finally">Блок <code>finally</code></h4>
+
+<p>Блок <code>finally</code> містить інструкції для виконання <em>після</em> завершення роботи блоку <code>try...catch</code>. Блок <code>finally</code> також виконається <em>перед</em> кодом, що слідує безпосередньо за оператором <code>try…catch…finally</code>.</p>
+
+<p>Також важливо зауважити, що блок <code>finally</code> буде виконано <em>незалежно від того,</em> чи було викинуто виняток. Однак, якщо виняток таки було викинуто, інструкції блоку <code>finally</code> буде виконано, навіть якщо жоден блок <code>catch</code> не обробив викинутий виняток.</p>
+
+<p>Блок <code>finally</code> можна використовувати, щоб заставити скрипт "м'яко впасти", коли трапляється виняток. Наприклад - для того, щоб звільнити ресурс, взятий скриптом.</p>
+
+<p>Приклад, наведений далі, відкриває файл і виконує певні дії з ним. (JavaScript на сервері дозволяє отримувати доступ до файлів.) Якщо викидається виняток, поки файл було відкрито, блок <code>finally</code> закриває файл перед тим, як скрипт впаде. Застосування <code>finally</code> тут <em>гарантує</em>, що файл ні в якому разі не залишиться відкритим, навіть якщо трапиться помилка.</p>
+
+<pre class="brush: js notranslate">openMyFile();
+try {
+  writeMyFile(theData); // Це може викинути помилку
+} catch(e) {
+  handleError(e); // Обробити помилку, якщо вона трапиться
+} finally {
+  closeMyFile(); // Завжди закривати ресурс
+}
+</pre>
+
+<p>Якщо блок <code>finally</code> повертає якесь значення, це значення стає результатом роботи всього блоку <code>try-catch-finally</code>, незалежно від будь-яких інструкцій <code>return</code> всередині <code>try</code> чи <code>catch</code>:</p>
+
+<pre class="brush: js notranslate">function f() {
+  try {
+    console.log(0);
+    throw 'bogus';
+  } catch(e) {
+    console.log(1);
+    return true; // ця інструкція чекатиме
+                 // допоки не виконається блок finally
+    console.log(2); // недосяжний код
+ } finally {
+    console.log(3);
+    return false; // переписує попередній "return"
+    console.log(4); // недосяжний код
+  }
+  // тепер виконується "return false"
+  console.log(5); // недосяжний код
+}
+f(); // console 0, 1, 3; returns false
+</pre>
+
+<p>Переписування значень "return" блоком <code>finally</code> також стосується винятків, викинутих (можливо, повторно) всередині блоку <code>catch</code> :</p>
+
+<pre class="brush: js notranslate">function f() {
+  try {
+    throw 'bogus';
+  } catch(e) {
+    console.log('упіймано внутрішній "bogus"');
+    throw e; // ця інструкція чекатиме,
+             // допоки не виконається бльок finally
+  } finally {
+    return false; // переписує попередній "throw"
+  }
+  // тепер виконується "return false"
+}
+
+try {
+  f();
+} catch(e) {
+  // цей код ніколи не виконається, бо "throw"
+  // усередині "catch" переписано
+  // "return"ом у "finally"
+  console.log('упіймано зовнішній "bogus"');
+}
+
+// ВИВІД:
+// упіймано внутрішній "bogus"</pre>
+
+<h4 id="Вкладені_інструкції_try...catch">Вкладені інструкції try...catch</h4>
+
+<p>Можна вкладати одну чи більше інструкцій <code>try...catch</code>. Якщо внутрішня інструкція <code>try...catch</code> не має блоку <code>catch</code>, мусить бути блок <code>finally</code>, і блок <code>catch</code> зовнішної інструкції <code>try...catch</code> буде перевірено на збіг. За детальнішою інфорацією див. <a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#Nested_try-blocks">nested try-blocks</a> на сторінці <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code>.</p>
+
+<h3 id="Обробка_обєктів_Error">Обробка об'єктів <code>Error</code></h3>
+
+<p>Залежно від типу помилки, ви зможете використати властивості 'name' і 'message' для покращеного повідомлення. 'name' переважно називає клас, похідний від класу Error (напр., 'DOMException' або 'Error'), а 'message' традиційно дає стисліше повідомлення, ніж те, що виходить після конвертування об'єкта помилки у string.</p>
+
+<p>Якщо ви викидаєте влавні винятки, то для користі з цих властивостей (напр., щоб ваш блок catch відрізняв ваші винятки від системних) сожете скористатися конструктором Error. Наприклад:</p>
+
+<pre class="brush: js notranslate">function doSomethingErrorProne() {
+  if (ourCodeMakesAMistake()) {
+    throw (new Error('Повідомлення'));
+  } else {
+    doSomethingToGetAJavascriptError();
+  }
+}
+....
+try {
+  doSomethingErrorProne();
+} catch (e) {
+  console.log(e.name); // logs 'Error'
+  console.log(e.message); // logs 'Повідомлення' або JavaScript error message)
+}</pre>
+
+<h2 id="Обіцянки_Promises">Обіцянки (Promises)</h2>
+
+<p>Починаючи з ECMAScript2015, JavaScript дістав підтримку об'єктів {{jsxref("Promise")}}, що дає змогу контролювати плин відкладених і асинхронних операцій.</p>
+
+<p><code>Обіцянка (Promise)</code> має один зі станів:</p>
+
+<ul>
+ <li><em>очікування (pending)</em>: початковий стан, не виконаний ані відхилений.</li>
+ <li><em>виконано (fulfilled)</em>: успішна операція</li>
+ <li><em>відхилено (rejected)</em>: операція провалилася.</li>
+ <li><em>вирішено (settled)</em>: виконано або відхилено, але не очікування.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png" style="height: 297px; width: 801px;"></p>
+
+<h3 id="Завантаження_образу_з_допомогою_XHR">Завантаження образу з допомогою XHR</h3>
+
+<p>Простий приклад використання Обіцянки (<code>Promise)</code> і <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> для завантаження образу міститься в репозиторії MDN GitHub<a href="https://github.com/mdn/js-examples/tree/master/promises-test"> js-examples</a> repository. Ви також можете бачити її в дії: <a href="https://mdn.github.io/js-examples/promises-test/">see it in action</a>. Кожен крок прокоментовано, що дає змогу зблизька побачити архітектуру Обіцянок (Promises) і XHR. Тут наведено розкоментовану версію, що показує плин Обіцянки (<code>Promise)</code> , тож ви можете схопити ідею:</p>
+
+<pre class="brush: js notranslate">function imgLoad(url) {
+  return new Promise(function(resolve, reject) {
+    var request = new XMLHttpRequest();
+    request.open('GET', url);
+    request.responseType = 'blob';
+    request.onload = function() {
+      if (request.status === 200) {
+        resolve(request.response);
+      } else {
+        reject(Error('Image didn\'t load successfully; error code:'
+                     + request.statusText));
+      }
+    };
+    request.onerror = function() {
+      reject(Error('There was a network error.'));
+    };
+    request.send();
+  });
+}</pre>
+
+<p>За деталями звертайтеся до сторінки {{jsxref("Promise")}} і посібника <a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Using Promises</a>.</p>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div>
diff --git a/files/uk/web/javascript/guide/dokladno_pro_objectnu_model/index.html b/files/uk/web/javascript/guide/dokladno_pro_objectnu_model/index.html
new file mode 100644
index 0000000000..5e756710dd
--- /dev/null
+++ b/files/uk/web/javascript/guide/dokladno_pro_objectnu_model/index.html
@@ -0,0 +1,760 @@
+---
+title: Докладно про об'єктну модель
+slug: Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model
+tags:
+  - Guide
+  - Intermediate
+  - JavaScript
+  - Object
+translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}}</div>
+
+<p class="summary">JavaScript - це об'єктна мова, що заснована на прототипах, а не на класах. У зв'язку з цим може бути менш очевидно, як саме JavaScript  дозволяє створювати ієрархії об'єктів із наслідуванням їх властивостей та значень. Цей розділ є спробою дещо прояснити цей механізм.</p>
+
+<p>Вміст цього розділу розрахований на те, що ви вже, принаймні, дещо знайомі з мовою JavaScript, і застосовували його функції для створення простих об'єктів.</p>
+
+<h2 id="Мови_з_класовою_та_прототипною_моделлю">Мови з класовою та прототипною моделлю</h2>
+
+<p>Об'єктно-орієнтовані мови з класовою моделлю, такі як Java і C++, засновані на концепції двох окремих сутностей: класів та екземплярів.</p>
+
+<ul>
+ <li><em>Клас</em> визначає всі властивості (включаючи поля та методи у Java, чи фукнції-члени у C++, як властивості), що характеризують певний набір об'єктів. Класс - це абстрактна річ, на відміну від будь-якого окремого об'єкту із набору, який він описує. Наприклад, клас <code>Employee</code> може представляти групу всіх робітників.</li>
+ <li><em>Екземпляр</em>, з іншого боку, є реалізацією класу. Наприклад, <code>Victoria</code> може бути екземпляром класу <code>Employee</code>, представляючи окрему особу в якості працівника. Екземпляр має точно ті самі властивості, що і батьківський клас (не більше, не менше).</li>
+</ul>
+
+<p>Мови з прототипною моделлю наслідування, такі як JavaScript, не розділяють ці сутності: у них просто є об'єкти. Такі мови реалізовують поняття <em>об'єкту-прототипу</em> — об'єкту, що використовується як зразок, з якого вибираються початкові властивості для нового об'єкту. Будь-який об'єкт може вказати власні властивості, як в момент створення, так і під час виконання. Ну і на додачу, будь-який об'єкт можна задати в якості прототипу з іншого об'єкту — таким чином перший об'єкт розділить свої властивості з другим.</p>
+
+<h3 id="Задання_і_визначення_класу">Задання і визначення класу</h3>
+
+<p>У мовах із класовою моделлю, класс задається у окремому <em>визначенні класу</em>. У цому визначенні можна вказати особливі методи, що називаються <em>конструкторами</em>, щоб створити екземпляри класу. Метод-конструктор може задати початкові значення властивостей екземпляру, і виконати якісь інші задачі прямо у момент створення. Для створення екземплярів застосовується оператор <code>new</code> у комбінації із методом-конструктором.</p>
+
+<p>JavaScript слідує подібній моделі, проте не має відокремленого від конструктора визначення класу. Натомість, ви одразу задаєте функцію-конструктор, щоб створити об'єкти із відповідним початковим набором властивостей та значень. Будь-яка JavaScript-функція може використовуватись як конструктор. Для створення нового об'єкту так само використовується оператор <code>new</code> із фукнцією-конструктором.</p>
+
+<p> </p>
+
+<div class="blockIndicator note">
+<p>Зауважте, що ECMAScript 2015 вводить <a href="/uk/docs/Web/JavaScript/Reference/Classes">визначення класу</a>:</p>
+
+<blockquote>
+<p>Класи JavaScript, введені стандартом ECMAScript 2015, є лише синтаксичним цукром поверх уже наявного у JavaScript прототипного наслідування. Тобто ці класи <em>не вводять</em> у JavaScript нової моделі наслідуваня.</p>
+</blockquote>
+</div>
+
+<p> </p>
+
+<h3 id="Дочірні_класи_і_наслідування">Дочірні класи і наслідування</h3>
+
+<p>У мові з класовою моделлю наслідкування ієрархія класів створюється через визначення класу. У цьому визначенні можна окремо вказати, що новий клас являється <em>дочірнім</em> стосовно уже наявного класу. Дочірній клас отримає всі властивості батьківського і може привнести нові (або ж змінити успадковані). Наприклад, припустимо, що клас <code>Employee</code> включає в себе лише поля <code>name</code> та <code>dept</code>, і <code>Manager</code> - це дочірній клас <code>Employee</code>, що додає властивість <code>reports</code>. У цьому випадку, екземпляр класу <code>Manager</code> матиме три властивості: <code>name</code>, <code>dept</code>, та <code>reports</code>.</p>
+
+<p>JavaScript реалізовує наслідування дещо інакше. Він дозволяє пов'язувати об'єкт-прототип із будь-якою фукнцією-конструктором. Тобто ви можете точнісінько реалізувати приклад <code>Employee</code> — <code>Manager</code>, проте використовуючи дещо інші терміни. Спершу ви визначаєте конструктор <code>Employee</code>, задаючи властивості <code>name</code> та <code>dept</code>. Далі ви визначаєте фукнцію-конструктор <code>Manager</code>, що викликає конструктор <code>Employee</code> та задає властивість <code>reports</code>. Насамкінець, призначаєте новий об'єкт, отриманий з <code>Employee.prototype</code> в якості прототипу конструктора <code>Manager</code>. Надалі, при створенні екземпляра <code>Manager</code> він наслідує властивості <code>name</code> і <code>dept</code> з об'єкту <code>Employee</code>.</p>
+
+<h3 id="Додавання_і_видалення_властивостей">Додавання і видалення властивостей</h3>
+
+<p>Зазвичай у мовах із класовою моделлю наслідування класи створюються під час компіляції, а екземпляри класів - під час компіляції чи виконання програми. Після того, як його було визначено, не можна змінити кількість або тип його властивостей. Однак, у JavaScript можна додавати чи видаляти властивості будь-якого об'єкту безпосередньо під час виконання програми. Якщо додати нову властивість до об'єкту-прототипу певного набору об'єктів, вони всі також отримають цю властивість.</p>
+
+<h3 id="Підсумок_відмінностей_класової_і_прототипної_моделей">Підсумок відмінностей класової і прототипної моделей</h3>
+
+<p>Наступна таблиця надає короткий підсумок цих відмінностей. Решта розділу розкриває деталі застосування JavaScript-конструкторів і прототипів для створення ієрархії об'єктів, та порівнює це із тим, як би це робилось у Java.</p>
+
+<table class="standard-table">
+ <caption>Порівняння мови із класовою моделлю наслідування (Java) і прототипною (JavaScript)</caption>
+ <thead>
+  <tr>
+   <th scope="col">Класова модель (Java)</th>
+   <th scope="col">Прототипна модель (JavaScript)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Клас та його екземпляр - окремі сутності.</td>
+   <td>Всі об'єкти можуть наслідувати інші об'єкти.</td>
+  </tr>
+  <tr>
+   <td>Визначення класу описує його; екземпляри створюються методами-конструкторами.</td>
+   <td>Функції-конструктори і описують, і створюють набори об'єктів.</td>
+  </tr>
+  <tr>
+   <td>Окремий об'єкт створюється оператором <code>new</code>.</td>
+   <td>Так само.</td>
+  </tr>
+  <tr>
+   <td>Ієрархія об'єктів формується при визначенні класів, шляхом задання нащадків для уже наявних класів.</td>
+   <td>Ієрархія об'єктів формується шляхом призначення об'єкту прототипом функції-конструктора.</td>
+  </tr>
+  <tr>
+   <td>Властивості наслідуються згідно ланцюжка класів.</td>
+   <td>Властивості наслідуються згідно ланцюжка прототипів.</td>
+  </tr>
+  <tr>
+   <td>Визначення класу задає <em>всі</em> властивості всіх екземплярів класу. Неможливо динамічно додавати властивості під час виконання програми.</td>
+   <td>Функція-конструктор чи прототип задають лише <em>початковий набір</em> властивостей. Можна додавати чи видаляти властивості як окремого об'єкту, так певного їх набору.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Приклад_із_робітником_Employee">Приклад із робітником "Employee"</h2>
+
+<p>Надалі у розділі ієрархія робітників, що показана на наступному зображенні.</p>
+
+<div style="display: table-row;">
+<div style="display: table-cell; width: 350px; text-align: center; vertical-align: middle; padding: 10px;">
+<p>Проста ієрархія об'єктів, сформована із наступних елементів:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/3060/figure8.1.png"></p>
+</div>
+
+<div style="display: table-cell; vertical-align: middle; padding: 10px;">
+<ul>
+ <li><code>Employee</code> має поля <code>name</code> (із порожнім рядком в якості значення за замовчуванням) та <code>dept</code> (у якого значення за замовчуванням — "general").</li>
+ <li><code>Manager</code> заснований на <code>Employee</code>. Він додає властивість <code>reports</code>  (за замовчуванням містить порожній масив для об'єктів <code>Employee</code>).</li>
+ <li><code>WorkerBee</code> також заснований на <code>Employee</code>. Він додає властивість <code>projects</code> (за замовчуванням містить порожній масив, призначений для рядків).</li>
+ <li><code>SalesPerson</code> заснований на <code>WorkerBee</code>. Він додає властивість <code>quota</code> (за замовчуванням — число 100). Він також перевизначае властивість <code>dept</code>, надаючи їй нове значенням "sales" (що означає, що всі <code>SalesPerson</code> відносяться до одного відділу).</li>
+ <li><code>Engineer</code> заснований на <code>WorkerBee</code>. Він додає властивість <code>machine</code> (значення за замовчуванням — порожній рядок) і перевизначає властивість <code>dept</code>, задаючи їй значення "engineering".</li>
+</ul>
+</div>
+</div>
+
+<h2 id="Створення_ієрархії">Створення ієрархії</h2>
+
+<p>Існує декілька способів задати відповідні функції-конструктори, щоб реалізувати ієрархію робітників. Який спосіб обрати — значною мірою залежить від того, які можливості ви хочете отримати від вашого додатку.</p>
+
+<p>Цей розділ показує, як використовувати дуже прості (і відносно негнучкі) визначення, і таким чином демонструє, як отримати робочий механізм наслідування. У цих визначеннях не можна задати жодного значення при створенні об'єкту — він отримає властивості із значеннями за замовчуванням, які можна буде змінити пізніше.</p>
+
+<p>У реальному додатку ви б, ймовірно, визначали конструктор, що дозволяє задавати значення в момент створення об'єкту (докладніше у <a href="#Більш_гнучкі_конструктори">Більш гнучкі конструктори</a>). А наразі ці прості визначення покажуть, як загалом відбувається наслідування.</p>
+
+<p>Наступні визначення <code>Employee</code> у Java та JavaScript ідентичні. Єдина відмінність — у Java необхідно явно вказувати тип кожної властивості, на відміну від JavaScript (так як Java — <a href="http://en.wikipedia.org/wiki/Strong_and_weak_typing">мова із сильною типізацією</a>, а JavaScript — із слабкою).</p>
+
+<div class="twocolumns">
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">function Employee() {
+  this.name = '';
+  this.dept = 'general';
+}
+</pre>
+
+<h4 id="Java"><br>
+ Java</h4>
+
+<pre class="brush: java">public class Employee {
+   public String name = "";
+   public String dept = "general";
+}
+</pre>
+</div>
+
+<p>Визначення <code>Manager</code> і <code>WorkerBee</code> показують різницю у заданні батьківського об'єкту. У JavaScript ви додаєте екземпляр прототипу в якості значення поля <code>prototype</code> функції-конструктора, а потім перевизначаєте <code>prototype.constructor</code>, щоб це поле вказувало на функцію-конструктор. Ви можете це зробити в будь-якому місці після визначення конструктора. У Java надклас задається всередині визначення класу, і його ніяк не можна змінити зовні визначення класу.</p>
+
+<div class="twocolumns">
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js">function Manager() {
+  Employee.call(this);
+  this.reports = [];
+}
+Manager.prototype =
+    Object.create(Employee.prototype);
+<span class="diff_add">Manager.prototype.constructor = Manager;</span>
+
+function WorkerBee() {
+  Employee.call(this);
+  this.projects = [];
+}
+WorkerBee.prototype =
+    Object.create(Employee.prototype);
+<span class="diff_add">WorkerBee.prototype.constructor = WorkerBee;</span>
+</pre>
+
+<h4 id="Java_2"><br>
+ Java</h4>
+
+<pre class="brush: java">public class Manager extends Employee {
+   public Employee[] reports =
+       new Employee[0];
+}
+
+
+
+public class WorkerBee extends Employee {
+   public String[] projects = new String[0];
+}
+
+
+</pre>
+</div>
+
+<p> </p>
+
+<p>Визначення <code>Engineer</code> та <code>SalesPerson</code> створюють об'єкти, що наслідуються вже від <code>WorkerBee</code>, а, отже, і від <code>Employee</code>. Об'єкти цих типів мають властивості всіх об'єктів вище у ланцюжку наслідування. Надодачу, ці визначення перевизначають успадковані значення поля <code>dept</code>, змінюючи їх відповідно до нового типу.</p>
+
+<div class="twocolumns">
+<h4 id="JavaScript_3">JavaScript</h4>
+
+<pre class="brush: js">function SalesPerson() {
+   WorkerBee.call(this);
+   this.dept = 'sales';
+   this.quota = 100;
+}
+SalesPerson.prototype =
+    Object.create(WorkerBee.prototype);
+<span class="diff_add">SalesPerson.prototype.constructor = SalesPerson;</span>
+
+function Engineer() {
+   WorkerBee.call(this);
+   this.dept = 'engineering';
+   this.machine = '';
+}
+Engineer.prototype =
+    Object.create(WorkerBee.prototype);
+<span class="diff_add">Engineer.prototype.constructor = Engineer;</span>
+</pre>
+
+<h4 id="Java_3"><br>
+ Java</h4>
+
+<pre class="brush: java">public class SalesPerson extends WorkerBee {
+   public String dept = "sales";
+   public double quota = 100.0;
+}
+
+
+public class Engineer extends WorkerBee {
+   public String dept = "engineering";
+   public String machine = "";
+}
+
+</pre>
+</div>
+
+<p>Таким чином, ви можете створювати екземпляри об'єктів із уже заданими значеннями для своїх властивостей. Наступна схема ілюструє застосування цих JavaScript-визначень для створення нових об'єктів, і демонструє значення їх властивостей.</p>
+
+<div class="note">
+<p><strong>Зауважте, що:</strong> термін <em><em>екземпляр</em></em> має специфічний технічний зміст у мовах із класовою моделлю. У цих мовах екземпляр являється окремою реалізацією класу і корінним чином відрізняється від його визначення. У JavaScript, "екземпляр" не має такого особливого змісту, бо сам JavaScript не має такої значної відмінності класів від їх реалізацій. Однак, у контексті JavaScript, "екземпляр" може неформально позначати об'єкт, створений певною функцією-конструктором. Тому, згідно наступного прикладу, можна неформально стверджувати, що <code><code>jane</code></code> є екземпляром класу <code><code>Engineer</code></code>. Так само, хоча терміни <em><em>предок</em>, <em>нащадок</em>, дочірній і батьківський класи</em> не мають формального смісту в JavaScript, їх можна застосовувати для позначення об'єктів, що знаходяться вище чи нижче у ланцюжку прототипів.</p>
+</div>
+
+<h3 id="Створення_об'єктів_за_допомогою_простих_визначень">Створення об'єктів за допомогою простих визначень</h3>
+
+<div class="twocolumns">
+<h4 id="Ієрархія_об'єктів">Ієрархія об'єктів</h4>
+
+<p>Наступна ієрархія створена за допомогою коду у правій частині.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/10412/=figure8.3.png"></p>
+
+<h4 id="Окремі_об'єкти_Jim_Sally_Mark_Fred_Jane_etc._Екземпляри_створені_конструктором">Окремі об'єкти = Jim, Sally, Mark, Fred, Jane, etc.<br>
+ "Екземпляри", створені конструктором</h4>
+
+<pre class="brush: js">var jim = new Employee;
+// Дужки можна опустити, якщо
+// конструктор не приймає аргументів.
+// jim.name має значення ''
+// jim.dept має значення 'general'
+
+var sally = new Manager;
+// sally.name має значення ''
+// sally.dept має значення 'general'
+// sally.reports має значення []
+
+var mark = new WorkerBee;
+// mark.name має значення ''
+// mark.dept має значення 'general'
+// mark.projects має значення []
+
+var fred = new SalesPerson;
+// fred.name має значення ''
+// fred.dept має значення 'sales'
+// fred.projects має значення []
+// fred.quota має значення 100
+
+var jane = new Engineer;
+// jane.name має значення ''
+// jane.dept має значення 'engineering'
+// jane.projects має значення []
+// jane.machine має значення ''
+</pre>
+</div>
+
+<h2 id="Властивості_(поля)_об'єкту">Властивості (поля) об'єкту</h2>
+
+<p>Ця секція описує, як об'єкти наслідують властивості інших об'єктів у ланцюжку прототипів, і що відбувається, якщо додати властивість під час виконання програми.</p>
+
+<h3 id="Наслідування_властивостей">Наслідування властивостей</h3>
+
+<p>Припустимо, такою інструкцією ви створили екземпляр <code>WorkerBee</code> — об'єкт <code>mark</code>:</p>
+
+<pre class="brush: js">var mark = new WorkerBee;
+</pre>
+
+<p>Коли JavaScript бачить оператор <code>new</code>, він створює загальний об'єкт і неявно встановлює <code>WorkerBee.prototype</code> значенням внутрішньої властивості [[Prototype]], і передає цей новий об'єкт як значення <em><code>this</code></em> до фукнції-конструктора <code>WorkerBee</code>. Внутрішня властивість [[Prototype]] визначає ланцюжок прототипів для виводу значень полів. Коли ці властивості задані, JavaScript повертає новий об'єкт, а інструкція присвоєння задає його в якості значення змінної <code>mark</code>.</p>
+
+<p>Описаний процес явно не встановлює значення об'єкту <code>mark</code> для властивостей (<em>локальні</em> значення), які <code>mark</code> наслідує з ланцюжка прототипів. Коли ви запитуєте значення властивості, JavaScript в першу чергу перевіряє наявність цього значення у об'єкті, і повертає його, якщо знаходить. Якщо ж ні, JavaScript перевіряє весь ланцюжок прототипів (за допомогою властивості [[Prototype]]). Якщо об'єкт у ланцюжку має таку властивість - буде повернуто її значення (або повідомлення, що об'єкт не має такої властивості, якщо її все-таки не було знайдено). Таким чином, об'єкт <code>mark</code> має наступні властивості і значення:</p>
+
+<pre class="brush: js">mark.name = '';
+mark.dept = 'general';
+mark.projects = [];
+</pre>
+
+<p>З конструктора Employee об'єкту <code>mark</code> призначено локальні значення для властивостей <code>name</code> та <code>dept</code>, а з конструктора <code>WorkerBee</code> — значення властивості <code>projects</code>. Таким чином ми отримуємо наслідування властивостей і їх значень у JavaScript. Деякі тонкощі цього процесу додатково висвітлені у <a href="#Іще_раз_про_наслідування_властивостей">Іще раз про наслідування властивостей</a>.</p>
+
+<p>Так як ці конструктори не дозволяють задати специфічні для екземпляру значення, це являється загальним прикладом. В якості значень властивостей взяті значення за замовчуванням, що розповсюджуються на всі об'єкти, створені на основі <code>WorkerBee</code>. Звісно, значення цих властивостей можна змінити. Наприклад, так можна встановити їх значення для об'єкту <code>mark</code>:</p>
+
+<pre class="brush: js">mark.name = 'Doe, Mark';
+mark.dept = 'admin';
+mark.projects = ['navigator'];</pre>
+
+<h3 id="Додавання_властивостей">Додавання властивостей</h3>
+
+<p>У JavaScript, можна додавати властивості до об'єкту безпосередно під час виконання. Ви не обмежені застосуванням лише властивостей, наданих конструктором. Щоб додати нову властивість до окремого об'єкту, просто призначте йому нове значення, як наведено далі:</p>
+
+<pre class="brush: js">mark.bonus = 3000;
+</pre>
+
+<p>Тепер об'єкт <code>mark</code> містить властивість <code>bonus</code>, проте більше ніхто із <code>WorkerBee</code> її не має.</p>
+
+<p>Якщо додати нову властивість до об'єкту-прототипу іншого конструктора, то ця властивість з'явиться у всіх об'єктів, що наслідують властивості від прототипу. Наприклад, ось так можна додати властивість <code>specialty</code> всім робітникам:</p>
+
+<pre class="brush: js">Employee.prototype.specialty = 'none';
+</pre>
+
+<p>Як тільки JavaScript виконає інструкцію, об'єкт <code>mark</code> матиме властивість <code>specialty</code> із значенням <code>"none"</code>. Наступна схема ілюструє ефект від додавання цієї властивості до прототипу <code>Employee</code> і її перевизначення у прототипі <code>Engineer</code>.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/4422/=figure8.4.png" style="height: 519px; width: 833px;"><br>
+ <small><strong>Додавання властивостей</strong></small></p>
+
+<h2 id="Більш_гнучкі_конструктори">Більш гнучкі конструктори</h2>
+
+<p>Наведені раніше функції-конструктори не дозволяють задавати значення під час створенні екземпляру. Як і у Java, можна надати конструктору аргументи для ініціалізації значень властивостей у об'єктів. Наступна схема показує один із способів це зробити.</p>
+
+<p><img alt="" class="internal" id="figure8.5" src="/@api/deki/files/4423/=figure8.5.png" style="height: 481px; width: 1012px;"><br>
+ <small><strong>Задання властивостей у конструкторі, варіант 1</strong></small></p>
+
+<p>Таблиця далі показує визначення цих об'єктів у Java і JavaScript.</p>
+
+<div class="twocolumns">
+<h4 id="JavaScript_4">JavaScript</h4>
+
+<h4 id="Java_4">Java</h4>
+</div>
+
+<div class="twocolumns">
+<pre class="brush: js">function Employee(name, dept) {
+  this.name = name || '';
+  this.dept = dept || 'general';
+}
+</pre>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<pre class="brush: java">public class Employee {
+   public String name;
+   public String dept;
+   public Employee () {
+      this("", "general");
+   }
+   public Employee (String name) {
+      this(name, "general");
+   }
+   public Employee (String name, String dept) {
+      this.name = name;
+      this.dept = dept;
+   }
+}
+</pre>
+</div>
+
+<div class="twocolumns">
+<pre class="brush: js">function WorkerBee(projs) {
+
+ this.projects = projs || [];
+}
+WorkerBee.prototype = new Employee;
+</pre>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<pre class="brush: java">public class WorkerBee extends Employee {
+   public String[] projects;
+   public WorkerBee () {
+      this(new String[0]);
+   }
+   public WorkerBee (String[] projs) {
+      projects = projs;
+   }
+}
+</pre>
+</div>
+
+<div class="twocolumns">
+<pre class="brush: js">
+function Engineer(mach) {
+   this.dept = 'engineering';
+   this.machine = mach || '';
+}
+Engineer.prototype = new WorkerBee;
+</pre>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<pre class="brush: java">public class Engineer extends WorkerBee {
+   public String machine;
+   public Engineer () {
+      dept = "engineering";
+      machine = "";
+   }
+   public Engineer (String mach) {
+      dept = "engineering";
+      machine = mach;
+   }
+}
+</pre>
+</div>
+
+<p>Ці JavaScript-визначення застосовують особливу ідіому для задання значення за замовчуванням:</p>
+
+<pre class="brush: js">this.name = name || '';
+</pre>
+
+<p>Логічний оператор АБО у JavaScript (<code>||</code>) обчислює перше значення. Якщо результат можна привести до <code>true</code>, оператор повертає його, а інакше - значення другого аргументу. Таким чином, ця стрічка коду перевіряє, чи <code>name</code> має якесь корисне значення для властивості <code>name</code>. Якщо так — <code>this.name</code> отримує її значення, а інакше значенням <code>this.name</code> стає порожній рядок. У розділі ця ідіома застосовується для стислості; однак вона може бути неочевидною на перший погляд.</p>
+
+<div class="note">
+<p><strong>Зауважте, що:</strong> це може працювати не так, як очікується, якщо конструктор викликається із аргументами, що приводяться до <code><code>false</code></code> (число <code>0</code> і порожній рядок (<code><code>""</code></code>). У цьому випадку буде обрано значення за замовчуванням.</p>
+</div>
+
+<p>Таким чином можливо задати значення для властивостей на місці, безпосередньо під час створення екземпляру об'єкту. Наступною інструкцією ви можете створити новий екземпляр <code>Engineer</code>:</p>
+
+<pre class="brush: js">var jane = new Engineer('belau');
+</pre>
+
+<p>Властивості <code>Jane</code> тепер виглядають так:</p>
+
+<pre class="brush: js">jane.name == '';
+jane.dept == 'engineering';
+jane.projects == [];
+jane.machine == 'belau';
+</pre>
+
+<p>Зауважте, що таким визначенням ви не можете задати первинне значення для наслідуваного поля <code>name</code>. Для задання значення наслідуваним властивостям у JavaScript, необхідно додати трохи більше коду до фукнції-конструктора.</p>
+
+<p>Поки що фукнція-конструктор створила загальний об'єкт, задала на місці властивості і значення нового об'єкту. Можна зробити, щоб конструктор додавав властивості безпосередньо викликаючи конструктор об'єкта, вищого у ієрархії прототипів. Власне, як зображено у наступній схемі.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/4430/=figure8.6.png" style="height: 534px; width: 1063px;"><br>
+ <small><strong>Задання властивостей у конструкторі, варіант 2</strong></small></p>
+
+<p>Розгляньмо детальніше одне із цих визначень. Ось новий конструктор <code>Engineer</code>:</p>
+
+<pre class="brush: js">function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+</pre>
+
+<p>Припустимо, ви ось так створюєте новий об'єкт <code>Engineer</code>:</p>
+
+<pre class="brush: js">var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
+</pre>
+
+<p>Тут JavaScript виконує наступні кроки:</p>
+
+<ol>
+ <li>Оператор <code>new</code> створює загальний об'єкт і задає <code>Engineer.prototype</code> значенням його властивості <code>__proto__</code> .</li>
+ <li>Оператор <code>new</code> передає новий об'єкт у конструктор <code>Engineer</code> в якості значення <code>this</code>.</li>
+ <li>Конструктор створює нову властивість <code>base</code> для цього об'єкту і присвоює їй значення конструктора <code>WorkerBee</code>. Так конструктор <code>WorkerBee</code> стає методом об'єкту <code>Engineer</code>. Назва властивості <code>base</code> не є чимось особливим. Ви можете використати будь-яке дозволене ім'я властивості, а <code>base</code> просто звучить змістовно для даного випадку.</li>
+ <li>Конструктор викликає метод <code>base</code>, передаючи в нього два своїх аргументи (<code>"Doe, Jane"</code> і <code>["navigator", "javascript"]</code>) і новий рядок <code>"engineering"</code>. Явно вказаний <code>"engineering"</code> у конструкторі означає, що всі об'єкти <code>Engineer</code> матимуть одне значення для наслідуваної властивості <code>dept</code>, і це значення заміщує успадковане від <code>Employee</code>.</li>
+ <li>Так як метод <code>base</code> належить <code>Engineer</code>, всередині виклику <code>base</code> JavaScript прив'язує значення <code>this</code> до об'єкту, створеного на першому етапі. Таким чином функція <code>WorkerBee</code>, в свою чергу, передає аргументи <code>"Doe, Jane"</code> та <code>"engineering"</code> до конструктора <code>Employee</code>. Після повернення з конструктора <code>Employee</code> функція <code>WorkerBee</code> задає останнім аргументом поле <code>projects</code>.</li>
+ <li>Після повернення з методу <code>base</code> конструктор <code>Engineer</code> ініціалізовує властивість <code>machine</code> об'єкту значенням <code>"belau"</code>.</li>
+ <li>Після повернення з конструктору JavaScript присвоює новий об'єкт змінній <code>jane</code>.</li>
+</ol>
+
+<p>Може скластися враження, що, викликавши конструтктор <code>WorkerBee</code> зсередини конструктора <code>Engineer</code>, ви вкажете наслідування відповідно для об'єктів <code>Engineer</code>. Насправді виклик конструктора <code>WorkerBee</code> гарантує, що об'єкт <code>Engineer</code> матиме всі властивості, вказані у всіх викликаних конструкторах. Однак, якщо пізніше додати нові властивості до прототипів <code>Employee</code> чи <code>WorkerBee</code>, вони не будуть успадковані об'єктом <code>Engineer</code>. Припустимо, у нас є наступні інструкції:</p>
+
+<pre class="brush: js">function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
+Employee.prototype.specialty = 'none';
+</pre>
+
+<p>Об'єкт <code>jane</code> не наслідує властивість <code>specialty</code>. Вам все ще необхідно явно вказувати прототип для гарантії динамічного наслідування. Натомість розглянемо такий набір інструкцій:</p>
+
+<pre class="brush: js">function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+Engineer.prototype = new WorkerBee;
+var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
+Employee.prototype.specialty = 'none';
+</pre>
+
+<p>Тепер значенням властивості <code>specialty</code> об'єкту <code>jane</code> являється "none".</p>
+
+<p>Іншим способом наслідування являється використання методів <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global Objects/Function/call">call()</a></code> чи <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="en-US/docs/JavaScript/Reference/Global Objects/Function/apply"><code>apply()</code></a>. Ось дві еквівалентні ділянки коду:</p>
+
+<div class="twocolumns">
+<pre class="brush: js">function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+</pre>
+
+<pre class="brush: js">function Engineer(name, projs, mach) {
+  WorkerBee.call(this, name, 'engineering', projs);
+  this.machine = mach || '';
+}
+</pre>
+</div>
+
+<p>Використання методу <code>call()</code> дає більш чисту реалізацію, так як <code>base</code> більше не потрібен.</p>
+
+<h2 id="Іще_раз_про_наслідування_властивостей">Іще раз про наслідування властивостей</h2>
+
+<p>У попередніх частинах було описано, як конструктори і прототипи JavaScript дозволяють реалізовувати ієрархію та наслідування. Ця частина розглядає деякі тонкощі, які, можливо, не були очевидними у наведеному вище тексті.</p>
+
+<h3 id="Локальні_і_успадковані_змінні">Локальні і успадковані змінні</h3>
+
+<p>Коли ви викликаєте властивість, JavaScript виконує наступні кроки (як описано вище у главі):</p>
+
+<ol>
+ <li>Перевіряє наявність цієї змінної прямо в об'єкті, і повертає її значення, якщо знаходить.</li>
+ <li>Якщо її немає серед локальних змінних - перевіряє ланцюжок прототипів (використовуючи властивість <code>__proto__</code>).</li>
+ <li>Якщо прототип у ланцюжку має значення вказаної властивості — повертає це значення.</li>
+ <li>Якщо вказана властивість не знайдена — значить, об'єкт її не має.</li>
+</ol>
+
+<p>Результат виконання цих кроків залежить від того, як ви задаєте значення і об'єкти.  Перший приклад мав такі визначення:</p>
+
+<pre class="brush: js">function Employee() {
+  this.name = '';
+  this.dept = 'general';
+}
+
+function WorkerBee() {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+</pre>
+
+<p>Припустимо, враховуючи ці визначення, що наступною інструкцією ви створили екземпляр <code>WorkerBee</code> у змінній <code>amy</code>:</p>
+
+<pre class="brush: js">var amy = new WorkerBee;
+</pre>
+
+<p>Об'єкт <code>amy</code> має одну локальну змінну — <code>projects</code>. Значення властивостей <code>name</code> та <code>dept</code> насправді не належать <code>amy</code>, і тому виводяться через поле її поле <code>__proto__</code>. Отже, <code>amy</code> має такі значення властивостей:</p>
+
+<pre class="brush: js">amy.name == '';
+amy.dept == 'general';
+amy.projects == [];
+</pre>
+
+<p>Тепер припустимо, що ви змінили значення властивості <code>name</code> у прототипі, асоційованому з <code>Employee</code>:</p>
+
+<pre class="brush: js">Employee.prototype.name = 'Unknown';
+</pre>
+
+<p>На перший погляд, можна очікувати, що нове значення пошириться на всі екземпляри <code>Employee</code>. Однак, це не так.</p>
+
+<p>При створенні <em>будь-якого</em> екземпляру об'єкту <code>Employee</code>, цей екземпляр отримає <strong>локальне значення</strong> для властивості <code>name</code> (порожній рядок). Тобто, коли ми задаємо прототип <code>WorkerBee</code> шляхом створення нового об'єкту <code>Employee</code>, <code>WorkerBee.prototype</code> має локальне значення властивості <code>name</code>. Отже, коли JavaScript шукає властивість <code>name</code> об'єкту <code>amy</code> (екземпляр <code>WorkerBee</code>), він знаходить місцеве значення властивості у <code>WorkerBee.prototype</code>. І тому він не намагається шукати далі в ланцюжку прототипів до <code>Employee.prototype</code>.</p>
+
+<p>Якщо ви хочете змінити значення властивості під час виконання, та ще й так, щоб воно поширилось на всіх нащадків  об'єкту, слід визначати це значення не у конструкторі об'єкту, а у прототипі конструктора. Припустимо, наприклад, що ви змінили попередній варіант реалізації на такий:</p>
+
+<pre class="brush: js">function Employee() {
+  this.dept = 'general';    // Зауважте, що тут немає this.name (локальної змінної)
+}
+Employee.prototype.name = '';    // Одна копія
+
+function WorkerBee() {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+
+var amy = new WorkerBee;
+
+Employee.prototype.name = 'Unknown';
+</pre>
+
+<p>У цьому випадку, властивість <code>amy</code> <code>name</code> стане "Unknown".</p>
+
+<p>Як ілюструють ці приклади, якщо вам потрібно і мати значення за замовчуванням для властивостей об'єктів, і можливість змінювати ці значення за замовчуванням під час виконання, слід задавати властивості у прототипі конструктора, а не у самому конструкторі.</p>
+
+<h3 id="Визначення_відносин_екземпляру">Визначення відносин екземпляру</h3>
+
+<p>Пошук властивості у JavaScript виконується серед власних властивостей об'єкту, і, якщо властивість з даним іменем не була знайдена, пошук переходить всередину особливої властивості <code>__proto__</code>. Це відбувається рекурсивно, і цей процес називається "пошук у ланцюжку прототипів".</p>
+
+<p>Властивість <code>__proto__</code> встановлюється у момент конструювання об'єкту; вказує вона на властивість <code>prototype</code> конструктора. Тобто вираз <code>new Foo()</code> створює об'єкт із<code>__proto__ == <code class="moz-txt-verticalline">Foo.prototype</code></code>. Відповідно, зміни у <code class="moz-txt-verticalline">Foo.prototype</code> впливають на пошук властивості всіх об'єктів, створених через <code>new Foo()</code>.</p>
+
+<p>Кожен об'єкт має властивість <code>__proto__</code> (за винятком <code>Object</code>); кожна функція має властивість <code>prototype</code>. Тобто об'єкти можуть відноситись один до одного згідно "прототипного наслідування". Перевірити наслідування можна, порівнюючи властивість <code>__proto__</code> об'єкту із об'єктом <code>prototype</code> функції. JavaScript надає скорочення: оператор <code>instanceof</code> порівнює об'єкт і функцію, і повертає <font face='consolas,"Liberation Mono",courier,monospace'>true</font>, якщо об'єкт є нащадком прототипу функції. Наприклад:</p>
+
+<pre class="brush: js">var f = new Foo();
+var isTrue = (f instanceof Foo);</pre>
+
+<p>Для більш докладного прикладу, припустимо, що у нас є набір визначень із показаних у <a href="#Наслідування_властивостей">Наслідування властивостей</a>. Створімо об'єкт <code>Engineer</code>:</p>
+
+<pre class="brush: js">var chris = new Engineer('Pigman, Chris', ['jsd'], 'fiji');
+</pre>
+
+<p>Наступні вирази стосовно цього об'єкту являються істинними:</p>
+
+<pre class="brush: js">chris.__proto__ == Engineer.prototype;
+chris.__proto__.__proto__ == WorkerBee.prototype;
+chris.__proto__.__proto__.__proto__ == Employee.prototype;
+chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
+chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
+</pre>
+
+<p>Враховуючи це, ми можемо ось так написати функцію <code>instanceOf</code>:</p>
+
+<pre class="brush: js">function instanceOf(object, constructor) {
+   object = object.__proto__;
+   while (object != null) {
+      if (object == constructor.prototype)
+         return true;
+      if (typeof object == 'xml') {
+        return constructor.prototype == XML.prototype;
+      }
+      object = object.__proto__;
+   }
+   return false;
+}
+</pre>
+
+<div class="note"><strong>Зверніть увагу, що:</strong> ця реалізація додатково перевіряє відношення об'єкту до типу "xml",  щоб обійти особливість уявлення XML-об'єктіву останніх версіях JavaScript. Дивіться {{ bug(634150) }}, якщо вам потрібна докладніша інформація.</div>
+
+<p>Наступні вирази із визначеною вище функцією instanceOf являються істинними:</p>
+
+<pre class="brush: js">instanceOf(chris, Engineer)
+instanceOf(chris, WorkerBee)
+instanceOf(chris, Employee)
+instanceOf(chris, Object)
+</pre>
+
+<p>Проте такий приклад в результаті видасть <code>false</code>:</p>
+
+<pre class="brush: js">instanceOf(chris, SalesPerson)
+</pre>
+
+<h3 id="Глобальна_інформація_у_конструкторах">Глобальна інформація у конструкторах</h3>
+
+<p>Потрібно бути уважним при створенні конструкторів, якщо ви задаєте в них якісь глобальні дані. Наприклад, припустимо, нам потрібно автоматично задавати унікальний ID кожному новому робітнику. Ви можете об'явити <code>Employee</code> так:</p>
+
+<pre class="brush: js">var idCounter = 1;
+
+function Employee(name, dept) {
+   this.name = name || '';
+   this.dept = dept || 'general';
+   this.id = idCounter++;
+}
+</pre>
+
+<p>Згідно цього визначення <code>Employee</code>, під час створення нового екземпляру конструктор призначає йому наявний ID, і потім підвищує на 1 глобальний лічильник ID. Тобто, якщо виконати наступні інструкції, <code>victoria.id</code> буде 1, а <code>harry.id</code> — 2:</p>
+
+<pre class="brush: js">var victoria = new Employee('Pigbert, Victoria', 'pubs');
+var harry = new Employee('Tschopik, Harry', 'sales');
+</pre>
+
+<p>На перший погляд все чудово. Однак, <code>idCounter</code> змінюється кожного разу, коли створюється екземпляр <code>Employee</code>, байдуже для чого. Якщо створити всю ієрархію <code>Employee</code>, наведену у цьому розділі, конструктор <code>Employee</code> буде викликано кожного разу при заданні прототипу. Припустимо, у нас є наступний код:</p>
+
+<pre class="brush: js">var idCounter = 1;
+
+function Employee(name, dept) {
+   this.name = name || '';
+   this.dept = dept || 'general';
+   this.id = idCounter++;
+}
+
+function Manager(name, dept, reports) {...}
+Manager.prototype = new Employee;
+
+function WorkerBee(name, dept, projs) {...}
+WorkerBee.prototype = new Employee;
+
+function Engineer(name, projs, mach) {...}
+Engineer.prototype = new WorkerBee;
+
+function SalesPerson(name, projs, quota) {...}
+SalesPerson.prototype = new WorkerBee;
+
+var mac = new Engineer('Wood, Mac');
+</pre>
+
+<p>Далі припустимо, що визначення, що опущені тут мають властивість <code>base</code> і викликають констуктор, що знаходиться вище у ланцюжку прототипів. У цьому випадку, у момент створення об'єкту <code>mac</code>, <code>mac.id</code> буде 5.</p>
+
+<p>Залежно від застосування, таке додаткове збільшення лічильника може мати, чи не мати значення. Якщо для вас важливе справжнє значення лічильника, один із варіантів рішення матиме такий вигляд конструктора:</p>
+
+<pre class="brush: js">function Employee(name, dept) {
+   this.name = name || '';
+   this.dept = dept || 'general';
+   if (name)
+      this.id = idCounter++;
+}
+</pre>
+
+<p>При створенні екземпляру <code>Employee</code> для застосування в якості прототипу аргументи не задаються. Згідно цього визначення конструктора, коли ми не передаємо аргументи, конструктор не задає значення <code>id</code> та не оновлює лічильник. Таким чином, щоб отримати <code>Employee</code> із призначеним <code>id</code>, необхідно задати ім'я робітника. У цьому випадку <code>mac.id</code> буде дорівнювати 1.</p>
+
+<p>Інший варіант <span style='background-color: transparent; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;'>—</span> створювати копію об'єкту-прототипу <span style='background-color: #eeeeee; color: #333333; direction: ltr; display: inline !important; float: none; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; line-height: 24px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'>Employee</span>, щоб потім присвоювати її WorkerBee:</p>
+
+<pre class="brush: js">WorkerBee.prototype = Object.create(Employee.prototype);
+// instead of WorkerBee.prototype = new Employee
+</pre>
+
+<h3 id="Відсутність_множинного_успадкування">Відсутність множинного успадкування</h3>
+
+<p>Деякі об'єктно-орієнтовані мови програмування дозволяють множинне успадкування. Це означає, що об'єкт може наслідувати поля і властивості від незалежних батьківських об'єктів. JavaScript не підтримує такий тип наслідування.</p>
+
+<p>Наслідування значення властивості відбувається в момент виконання програми, коли JavaScript шукає значення властивості у ланцюжку прототипів об'єкту. Так як об'єкт має лише один прототип, JavaScript не може виконувати наслідування від більш ніж одного прототипного ланцюжка.</p>
+
+<p>У JavaScript ми можемо мати функцію-конструктор, що викликає два чи більше інших конструкторів під час виконання. Це дає певну ілюзію множинного наслідування. Наприклад, припустимо, у нас є такі інструкції:</p>
+
+<pre class="brush: js">function Hobbyist(hobby) {
+   this.hobby = hobby || 'scuba';
+}
+
+function Engineer(name, projs, mach, hobby) {
+   this.base1 = WorkerBee;
+   this.base1(name, 'engineering', projs);
+   this.base2 = Hobbyist;
+   this.base2(hobby);
+   this.machine = mach || '';
+}
+Engineer.prototype = new WorkerBee;
+
+var dennis = new Engineer('Doe, Dennis', ['collabra'], 'hugo');
+</pre>
+
+<p>Далі припустимо, що визначення <code>WorkerBee</code> відповідає вказаному вище у розділі. У цьому випадку об'ект <code>dennis</code> матиме такі значення властивостей:</p>
+
+<pre class="brush: js">dennis.name == 'Doe, Dennis';
+dennis.dept == 'engineering';
+dennis.projects == ['collabra'];
+dennis.machine == 'hugo';
+dennis.hobby == 'scuba';
+</pre>
+
+<p>Тобто <code>dennis</code> отримує поле <code>hobby</code> з конструктора <code>Hobbyist</code>. Однак, якщо ми потім додамо нову властивість до прототипу конструктора <code>Hobbyist</code>:</p>
+
+<pre class="brush: js">Hobbyist.prototype.equipment = ['mask', 'fins', 'regulator', 'bcd'];
+</pre>
+
+<p>Об'єкт <code>dennis</code> не успадковує цю нову властивість.</p>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}}</div>
diff --git a/files/uk/web/javascript/guide/functions/index.html b/files/uk/web/javascript/guide/functions/index.html
new file mode 100644
index 0000000000..fcc14568b3
--- /dev/null
+++ b/files/uk/web/javascript/guide/functions/index.html
@@ -0,0 +1,655 @@
+---
+title: Функції
+slug: Web/JavaScript/Guide/Functions
+translation_of: Web/JavaScript/Guide/Functions
+---
+<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Вирази_та_оператори")}}</p>
+
+<p>Функції є одним з фундаментальних блоків у JavaScript. Функція є процедурою JavaScript, це набір команд, які виконують ту чи іншу задачу, або розраховують значення. Щоб використати функцію, ви маєте десь її визначити у тій області видимості, звідки ви бажаєте її викликати.</p>
+
+<p>Щоб дізнатись більше, дивіться <a href="/en-US/docs/Web/JavaScript/Reference/Functions">exhaustive reference chapter about JavaScript functions</a>.</p>
+
+<h2 id="Визначення_функції">Визначення функції</h2>
+
+<h3 id="Оголошення_функції">Оголошення функції</h3>
+
+<p><strong>Визначення функції</strong> (також називається <strong>оголошенням функції</strong>, або <strong>функціональним оператором</strong>) складається з ключового слова <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function" title="function"><code>function</code></a> , після чого слідує:</p>
+
+<ul>
+ <li>Ім'я функції.</li>
+ <li>В дужках йде список параметрів, які передаються функції.</li>
+ <li>Команди JavaScript, які визначають фунцію, поміщаються у фігурні дужки <code>{ }</code>.</li>
+</ul>
+
+<p>Для прикладу, наступний код визначає просту функцію на ім'я <code>square</code>:</p>
+
+<pre class="brush: js">function square(number) {
+  return number * number;
+}</pre>
+
+<p><font face="sans-serif, Arial, Verdana, Trebuchet MS">Функція </font><code>square</code> приймає один параметр <code>number</code>. Функція складається з однієї команди, що повертає результат множення агрумента (<code>number</code>) самого на себе. Оператор <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return" title="return"><code>return</code></a> визначає, яке значення повертає функція:</p>
+
+<pre class="brush: js">return number * number;
+</pre>
+
+<p><span id="result_box" lang="uk"><span>Примітивні параметри (такі, як число) передаються функціям <strong>за</strong> <strong>значенням</strong>;</span> <span>значення передається до функції, але якщо функція змінює значення параметра, <strong>ця зміна не відображається глобально або у функції виклику.</strong></span></span></p>
+
+<p><span id="result_box" lang="uk"><span>Якщо ви передаєте об'єкт (тобто, непримітивне значення, наприклад, {{jsxref ("Array")}} або визначений користувачем об'єкт) у якості параметра, і функція змінює властивості об'єкта, ця зміна видима за межами функції</span><span>, як показано на наступному прикладі:</span></span></p>
+
+<pre class="brush: js">function myFunc(theObject) {
+  theObject.make = 'Toyota';
+}
+
+var mycar = {make: 'Honda', model: 'Accord', year: 1998};
+var x, y;
+
+x = mycar.make; // x отримує значення "Honda"
+
+myFunc(mycar);
+y = mycar.make; // y отримує значення "Toyota"
+                // (властивість make була змінена функцією)
+</pre>
+
+<h3 id="Функціональні_вирази"><span class="short_text" id="result_box" lang="uk"><span>Функціональні вирази</span></span></h3>
+
+<p><span id="result_box" lang="uk"><span>Хоча оголошення функцій вище синтаксично є виразом, функції також можуть бути створені за допомогою функціональних виразів.</span> <span>Така функція може бути <strong>анонімною</strong>;</span> їй не обов'язково мати ім'я<span>.</span> <span>Наприклад, </span></span><code>square</code><span lang="uk"><span> можна визначити як:</span></span></p>
+
+<pre class="brush: js">var square = function(number) { return number * number; };
+var x = square(4); // x gets the value 16</pre>
+
+<p><span id="result_box" lang="uk"><span class="alt-edited">Проте, ім'я може бути надане у функціональному виразі, і може бути використане всередині функції, щоб звернутися до самої себе, або в налагоджувач, щоб визначити функцію в трасуванні стеку:</span></span></p>
+
+<pre class="brush: js">var factorial = function fac(n) { return n &lt; 2 ? 1 : n * fac(n - 1); };
+
+console.log(factorial(3));
+</pre>
+
+<p><span id="result_box" lang="uk"><span>Функціональні вирази зручні при передачі функції як аргументу до іншої функції.</span> <span>Наступний приклад показує функцію map, яка повинна отримати функцію як перший аргумент, а масив як другий аргумент.</span></span></p>
+
+<pre class="brush: js">function map(f, a) {
+  var result = [], // Створення нового масиву
+      i;
+  for (i = 0; i != a.length; i++)
+    result[i] = f(a[i]);
+  return result;
+}
+</pre>
+
+<p><span id="result_box" lang="uk"><span class="alt-edited">У наступному коді наша функція приймає функцію, визначену функціональним виразом, та виконує її для кожного елемента масиву, отриманого в якості другого аргументу.</span></span></p>
+
+<pre class="brush: js">function map(f, a) {
+  var result = []; // Створення нового масиву
+  var i; //  <span class="short_text" id="result_box" lang="uk"><span>Оголошення змінної</span></span>
+  for (i = 0; i != a.length; i++)
+    result[i] = f(a[i]);
+      return result;
+}
+var f = function(x) {
+   return x * x * x;
+}
+var numbers = [0,1, 2, 5,10];
+var cube = map(f,numbers);
+console.log(cube);</pre>
+
+<p>Функція повертає: [0, 1, 8, 125, 1000].</p>
+
+<p><span id="result_box" lang="uk"><span>У JavaScript функція може бути визначена на основі умови</span></span>. <span id="result_box" lang="uk"><span>Наприклад, наступне визначення функції визначає</span></span> <code>myFunc</code> тільки якщо <code>num</code> дорівнює 0:</p>
+
+<pre class="brush: js">var myFunc;
+if (num === 0) {
+  myFunc = function(theObject) {
+    theObject.make = 'Toyota';
+  }
+}</pre>
+
+<p class="brush: js"><span lang="uk"><span>На додаток до визначення функцій, як описано тут, ви також можете використовувати конструктор {{jsxref ("Function")}} для створення функцій з текстового рядка під час виконання, як і </span></span>{{jsxref("eval", "eval()")}}<span lang="uk"><span>.</span></span></p>
+
+<p><span id="result_box" lang="uk"><span class="alt-edited"><strong>Метод</strong> - це функція, яка є властивістю об'єкта.</span> <span>Докладніше про об'єкти та методи у</span></span>  <a href="/uk/docs/Web/JavaScript/Guide/Working_with_Objects" title="en-US/docs/JavaScript/Guide/Working with Objects">Working with objects</a>.</p>
+
+<h2 id="Виклик_функцій">Виклик функцій</h2>
+
+<p><span id="result_box" lang="uk"><span>Визначення функції не виконує її.</span> <span>Визначення функції просто називає функцію і вказує, що робити, коли викликається функція.</span> <span><strong>Виклик</strong> функції, власне, виконує вказані дії з вказаними параметрами.</span> <span>Наприклад, якщо ви визначили функцію</span></span>  <code>square</code>, <span class="short_text" id="result_box" lang="uk"><span>ви можете викликати її наступним чином:</span></span></p>
+
+<pre class="brush: js">square(5);
+</pre>
+
+<p><span id="result_box" lang="uk"><span>Наведений вираз викликає функцію з аргументом 5. Функція виконує свої команди та повертає значення 25.</span></span></p>
+
+<p><span id="result_box" lang="uk"><span class="alt-edited">Функції повинні бути в області видимості під час виклику, але оголошення функції може підніматись (бути записаним нижче виклику), як у цьому прикладі:</span></span></p>
+
+<pre class="brush: js">console.log(square(5));
+/* ... */
+function square(n) { return n * n; }
+</pre>
+
+<p><span id="result_box" lang="uk"><span class="alt-edited">Областю видимості функції є функція, в якій вона оголошена, або вся програма, якщо вона оголошена на верхньому рівні.</span></span></p>
+
+<div class="blockIndicator note">
+<p><strong>Примітка:</strong> <span id="result_box" lang="uk"><span>Це працює тільки при визначенні функції за допомогою наведеного вище синтаксису</span></span> (тобто <code>function funcName(){}</code>). <span id="result_box" lang="uk"><span>Наведений нижче код не буде працювати.</span> <span>Це означає, що підняття функції працює тільки для оголошення функції, а не для функціонального виразу.</span></span></p>
+</div>
+
+<pre class="brush: js">console.log(square); // square піднімається з початковим значенням undefined.
+console.log(square(5)); // TypeError: square is not a function
+var square = function(n) {
+  return n * n;
+}
+</pre>
+
+<p><span id="result_box" lang="uk"><span>Аргументи функції не обмежені рядками та числами.</span> <span>Ви можете передавати цілі об'єкти у функцію.</span></span> Функція <code>show_props()</code> (визначена у <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_Properties" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects#Objects_and_Properties">Working with objects</a>) <span id="result_box" lang="uk"><span>є прикладом функції, яка приймає об'єкт у якості аргумента.</span></span></p>
+
+<p><span id="result_box" lang="uk"><span class="alt-edited">Функція може викликати сама себе.</span> <span class="alt-edited">Наприклад, ось функція, яка обчислює факторіал рекурсивно:</span></span></p>
+
+<pre class="brush: js">function factorial(n) {
+  if ((n === 0) || (n === 1))
+    return 1;
+  else
+    return (n * factorial(n - 1));
+}
+</pre>
+
+<p><span id="result_box" lang="uk"><span>Далі ви можете обчислити факторіали від одного до п'яти наступним чином:</span></span></p>
+
+<pre class="brush: js">var a, b, c, d, e;
+a = factorial(1); // a отримує значення 1
+b = factorial(2); // b отримує значення 2
+c = factorial(3); // c отримує значення 6
+d = factorial(4); // d отримує значення 24
+e = factorial(5); // e отримує значення 120
+</pre>
+
+<p><span id="result_box" lang="uk"><span>Є й інші способи виклику функцій.</span> <span>Часто бувають випадки, коли функцію потрібно назвати динамічно, або кількість аргументів функції може змінюватись, або контекстом виклику функції повинен бути заданий певний об'єкт, визначений під час виконання.</span> <span class="alt-edited">Виявляється, що функції самі є об'єктами, і ці об'єкти, у свою чергу, мають методи</span></span> (див. об'єкт {{jsxref("Function")}}). Один з них, метод {{jsxref("Function.apply", "apply()")}} , <span class="short_text" id="result_box" lang="uk"><span>може бути використаний для досягнення цієї мети.</span></span></p>
+
+<h2 id="Область_видимості_функції">Область видимості функції</h2>
+
+<p>Змінні, визначені всередині функції, недоступні ззовні цієї функції, бо змінна визначається тільки у області видимості функції. Проте, функція може звертатись до усіх змінних та функцій, визначених у області видимості, де вона оголошена. Іншими словами, функція, оголошена у глобальній області видимості, може звертатись до усіх змінних, оголошених у глобальній області видимості. Функція, оголошена всередині іншої функції, має доступ до усіх змінних, оголошених у батьківській функції, а також до будь-якої змінної, до якої має доступ батьківська функція.</p>
+
+<pre class="brush: js">// Ці змінні визначені у глобальній області видимості
+var num1 = 20,
+    num2 = 3,
+    name = 'Chamahk';
+
+// Ця функція визначена у глобальній області видимості
+function multiply() {
+  return num1 * num2;
+}
+
+multiply(); // Повертає 60
+
+// Приклад вкладеної функції
+function getScore() {
+  var num1 = 2,
+      num2 = 3;
+
+  function add() {
+    return name + ' scored ' + (num1 + num2);
+  }
+
+  return add();
+}
+
+getScore(); // Повертає "Chamahk scored 5"
+</pre>
+
+<h2 id="Область_видимості_та_стек_функції">Область видимості та стек функції</h2>
+
+<h3 id="Рекурсія">Рекурсія</h3>
+
+<p>A function can refer to and call itself. There are three ways for a function to refer to itself:</p>
+
+<ol>
+ <li>the function's name</li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code></li>
+ <li>an in-scope variable that refers to the function</li>
+</ol>
+
+<p>For example, consider the following function definition:</p>
+
+<pre class="brush: js">var foo = function bar() {
+   // statements go here
+};
+</pre>
+
+<p>Within the function body, the following are all equivalent:</p>
+
+<ol>
+ <li><code>bar()</code></li>
+ <li><code>arguments.callee()</code></li>
+ <li><code>foo()</code></li>
+</ol>
+
+<p>A function that calls itself is called a <em>recursive function</em>. In some ways, recursion is analogous to a loop. Both execute the same code multiple times, and both require a condition (to avoid an infinite loop, or rather, infinite recursion in this case). For example, the following loop:</p>
+
+<pre class="brush: js">var x = 0;
+while (x &lt; 10) { // "x &lt; 10" is the loop condition
+   // do stuff
+   x++;
+}
+</pre>
+
+<p>can be converted into a recursive function and a call to that function:</p>
+
+<pre class="brush: js">function loop(x) {
+  if (x &gt;= 10) // "x &gt;= 10" is the exit condition (equivalent to "!(x &lt; 10)")
+    return;
+  // do stuff
+  loop(x + 1); // the recursive call
+}
+loop(0);
+</pre>
+
+<p>However, some algorithms cannot be simple iterative loops. For example, getting all the nodes of a tree structure (e.g. the <a href="/en-US/docs/DOM">DOM</a>) is more easily done using recursion:</p>
+
+<pre class="brush: js">function walkTree(node) {
+  if (node == null) //
+    return;
+  // do something with node
+  for (var i = 0; i &lt; node.childNodes.length; i++) {
+    walkTree(node.childNodes[i]);
+  }
+}
+</pre>
+
+<p>Compared to the function <code>loop</code>, each recursive call itself makes many recursive calls here.</p>
+
+<p>It is possible to convert any recursive algorithm to a non-recursive one, but often the logic is much more complex and doing so requires the use of a stack. In fact, recursion itself uses a stack: the function stack.</p>
+
+<p>The stack-like behavior can be seen in the following example:</p>
+
+<pre class="brush: js">function foo(i) {
+  if (i &lt; 0)
+    return;
+  console.log('begin: ' + i);
+  foo(i - 1);
+  console.log('end: ' + i);
+}
+foo(3);
+
+// Output:
+
+// begin: 3
+// begin: 2
+// begin: 1
+// begin: 0
+// end: 0
+// end: 1
+// end: 2
+// end: 3</pre>
+
+<h3 id="Nested_functions_and_closures">Nested functions and closures</h3>
+
+<p>You can nest a function within a function. The nested (inner) function is private to its containing (outer) function. It also forms a <em>closure</em>. A closure is an expression (typically a function) that can have free variables together with an environment that binds those variables (that "closes" the expression).</p>
+
+<p>Since a nested function is a closure, this means that a nested function can "inherit" the arguments and variables of its containing function. In other words, the inner function contains the scope of the outer function.</p>
+
+<p>To summarize:</p>
+
+<ul>
+ <li>The inner function can be accessed only from statements in the outer function.</li>
+</ul>
+
+<ul>
+ <li>The inner function forms a closure: the inner function can use the arguments and variables of the outer function, while the outer function cannot use the arguments and variables of the inner function.</li>
+</ul>
+
+<p>The following example shows nested functions:</p>
+
+<pre class="brush: js">function addSquares(a, b) {
+  function square(x) {
+    return x * x;
+  }
+  return square(a) + square(b);
+}
+a = addSquares(2, 3); // returns 13
+b = addSquares(3, 4); // returns 25
+c = addSquares(4, 5); // returns 41
+</pre>
+
+<p>Since the inner function forms a closure, you can call the outer function and specify arguments for both the outer and inner function:</p>
+
+<pre class="brush: js">function outside(x) {
+  function inside(y) {
+    return x + y;
+  }
+  return inside;
+}
+fn_inside = outside(3); // Think of it like: give me a function that adds 3 to whatever you give it
+result = fn_inside(5); // returns 8
+
+result1 = outside(3)(5); // returns 8
+</pre>
+
+<h3 id="Preservation_of_variables">Preservation of variables</h3>
+
+<p>Notice how <code>x</code> is preserved when <code>inside</code> is returned. A closure must preserve the arguments and variables in all scopes it references. Since each call provides potentially different arguments, a new closure is created for each call to outside. The memory can be freed only when the returned <code>inside</code> is no longer accessible.</p>
+
+<p>This is not different from storing references in other objects, but is often less obvious because one does not set the references directly and cannot inspect them.</p>
+
+<h3 id="Multiply-nested_functions">Multiply-nested functions</h3>
+
+<p>Functions can be multiply-nested, i.e. a function (A) containing a function (B) containing a function (C). Both functions B and C form closures here, so B can access A and C can access B. In addition, since C can access B which can access A, C can also access A. Thus, the closures can contain multiple scopes; they recursively contain the scope of the functions containing it. This is called <em>scope chaining</em>. (Why it is called "chaining" will be explained later.)</p>
+
+<p>Consider the following example:</p>
+
+<pre class="brush: js">function A(x) {
+  function B(y) {
+    function C(z) {
+      console.log(x + y + z);
+    }
+    C(3);
+  }
+  B(2);
+}
+A(1); // logs 6 (1 + 2 + 3)
+</pre>
+
+<p>In this example, <code>C</code> accesses <code>B</code>'s <code>y</code> and <code>A</code>'s <code>x</code>. This can be done because:</p>
+
+<ol>
+ <li><code>B</code> forms a closure including <code>A</code>, i.e. <code>B</code> can access <code>A</code>'s arguments and variables.</li>
+ <li><code>C</code> forms a closure including <code>B</code>.</li>
+ <li>Because <code>B</code>'s closure includes <code>A</code>, <code>C</code>'s closure includes <code>A</code>, <code>C</code> can access both <code>B</code> <em>and</em> <code>A</code>'s arguments and variables. In other words, <code>C</code> <em>chains</em> the scopes of <code>B</code> and <code>A</code> in that order.</li>
+</ol>
+
+<p>The reverse, however, is not true. <code>A</code> cannot access <code>C</code>, because <code>A</code> cannot access any argument or variable of <code>B</code>, which <code>C</code> is a variable of. Thus, <code>C</code> remains private to only <code>B</code>.</p>
+
+<h3 id="Name_conflicts">Name conflicts</h3>
+
+<p>When two arguments or variables in the scopes of a closure have the same name, there is a <em>name conflict</em>. More inner scopes take precedence, so the inner-most scope takes the highest precedence, while the outer-most scope takes the lowest. This is the scope chain. The first on the chain is the inner-most scope, and the last is the outer-most scope. Consider the following:</p>
+
+<pre class="brush: js">function outside() {
+  var x = 5;
+  function inside(x) {
+    return x * 2;
+  }
+  return inside;
+}
+
+outside()(10); // returns 20 instead of 10
+</pre>
+
+<p>The name conflict happens at the statement <code>return x</code> and is between <code>inside</code>'s parameter <code>x</code> and <code>outside</code>'s variable <code>x</code>. The scope chain here is {<code>inside</code>, <code>outside</code>, global object}. Therefore <code>inside</code>'s <code>x</code> takes precedences over <code>outside</code>'s <code>x</code>, and 20 (<code>inside</code>'s <code>x</code>) is returned instead of 10 (<code>outside</code>'s <code>x</code>).</p>
+
+<h2 id="Closures">Closures</h2>
+
+<p>Closures are one of the most powerful features of JavaScript. JavaScript allows for the nesting of functions and grants the inner function full access to all the variables and functions defined inside the outer function (and all other variables and functions that the outer function has access to). However, the outer function does not have access to the variables and functions defined inside the inner function. This provides a sort of encapsulation for the variables of the inner function. Also, since the inner function has access to the scope of the outer function, the variables and functions defined in the outer function will live longer than the duration of the inner function execution, if the inner function manages to survive beyond the life of the outer function. A closure is created when the inner function is somehow made available to any scope outside the outer function.</p>
+
+<pre class="brush: js">var pet = function(name) {   // The outer function defines a variable called "name"
+  var getName = function() {
+    return name;             // The inner function has access to the "name" variable of the outer function
+  }
+  return getName;            // Return the inner function, thereby exposing it to outer scopes
+}
+myPet = pet('Vivie');
+
+myPet();                     // Returns "Vivie"
+</pre>
+
+<p>It can be much more complex than the code above. An object containing methods for manipulating the inner variables of the outer function can be returned.</p>
+
+<pre class="brush: js">var createPet = function(name) {
+  var sex;
+
+  return {
+    setName: function(newName) {
+      name = newName;
+    },
+
+    getName: function() {
+      return name;
+    },
+
+    getSex: function() {
+      return sex;
+    },
+
+    setSex: function(newSex) {
+      if(typeof newSex === 'string' &amp;&amp; (newSex.toLowerCase() === 'male' || newSex.toLowerCase() === 'female')) {
+        sex = newSex;
+      }
+    }
+  }
+}
+
+var pet = createPet('Vivie');
+pet.getName();                  // Vivie
+
+pet.setName('Oliver');
+pet.setSex('male');
+pet.getSex();                   // male
+pet.getName();                  // Oliver
+</pre>
+
+<p>In the code above, the <code>name</code> variable of the outer function is accessible to the inner functions, and there is no other way to access the inner variables except through the inner functions. The inner variables of the inner functions act as safe stores for the outer arguments and variables. They hold "persistent" and "encapsulated" data for the inner functions to work with. The functions do not even have to be assigned to a variable, or have a name.</p>
+
+<pre class="brush: js">var getCode = (function() {
+  var apiCode = '0]Eal(eh&amp;2';    // A code we do not want outsiders to be able to modify...
+
+  return function() {
+    return apiCode;
+  };
+}());
+
+getCode();    // Returns the apiCode
+</pre>
+
+<p>There are, however, a number of pitfalls to watch out for when using closures. If an enclosed function defines a variable with the same name as the name of a variable in the outer scope, there is no way to refer to the variable in the outer scope again.</p>
+
+<pre class="brush: js">var createPet = function(name) {  // Outer function defines a variable called "name"
+  return {
+    setName: function(name) {    // Enclosed function also defines a variable called "name"
+      name = name;               // ??? How do we access the "name" defined by the outer function ???
+    }
+  }
+}
+</pre>
+
+<h2 id="Using_the_arguments_object">Using the arguments object</h2>
+
+<p>The arguments of a function are maintained in an array-like object. Within a function, you can address the arguments passed to it as follows:</p>
+
+<pre class="brush: js">arguments[i]
+</pre>
+
+<p>where <code>i</code> is the ordinal number of the argument, starting at zero. So, the first argument passed to a function would be <code>arguments[0]</code>. The total number of arguments is indicated by <code>arguments.length</code>.</p>
+
+<p>Using the <code>arguments</code> object, you can call a function with more arguments than it is formally declared to accept. This is often useful if you don't know in advance how many arguments will be passed to the function. You can use <code>arguments.length</code> to determine the number of arguments actually passed to the function, and then access each argument using the <code>arguments</code> object.</p>
+
+<p>For example, consider a function that concatenates several strings. The only formal argument for the function is a string that specifies the characters that separate the items to concatenate. The function is defined as follows:</p>
+
+<pre class="brush: js">function myConcat(separator) {
+   var result = ''; // initialize list
+   var i;
+   // iterate through arguments
+   for (i = 1; i &lt; arguments.length; i++) {
+      result += arguments[i] + separator;
+   }
+   return result;
+}
+</pre>
+
+<p>You can pass any number of arguments to this function, and it concatenates each argument into a string "list":</p>
+
+<pre class="brush: js">// returns "red, orange, blue, "
+myConcat(', ', 'red', 'orange', 'blue');
+
+// returns "elephant; giraffe; lion; cheetah; "
+myConcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah');
+
+// returns "sage. basil. oregano. pepper. parsley. "
+myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley');
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> The <code>arguments</code> variable is "array-like", but not an array. It is array-like in that it has a numbered index and a <code>length</code> property. However, it does not possess all of the array-manipulation methods.</p>
+</div>
+
+<p>See the {{jsxref("Function")}} object in the JavaScript reference for more information.</p>
+
+<h2 id="Function_parameters">Function parameters</h2>
+
+<p>Starting with ECMAScript 2015, there are two new kinds of parameters: default parameters and rest parameters.</p>
+
+<h3 id="Default_parameters">Default parameters</h3>
+
+<p>In JavaScript, parameters of functions default to <code>undefined</code>. However, in some situations it might be useful to set a different default value. This is where default parameters can help.</p>
+
+<p>In the past, the general strategy for setting defaults was to test parameter values in the body of the function and assign a value if they are <code>undefined</code>. If in the following example, no value is provided for <code>b</code> in the call, its value would be <code>undefined</code> when evaluating <code>a*b</code> and the call to <code>multiply</code> would have returned <code>NaN</code>. However, this is caught with the second line in this example:</p>
+
+<pre class="brush: js">function multiply(a, b) {
+  b = typeof b !== 'undefined' ?  b : 1;
+
+  return a * b;
+}
+
+multiply(5); // 5
+</pre>
+
+<p>With default parameters, the check in the function body is no longer necessary. Now, you can simply put <code>1</code> as the default value for <code>b</code> in the function head:</p>
+
+<pre class="brush: js">function multiply(a, b = 1) {
+  return a * b;
+}
+
+multiply(5); // 5</pre>
+
+<p>For more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default parameters</a> in the reference.</p>
+
+<h3 id="Rest_parameters">Rest parameters</h3>
+
+<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameter</a> syntax allows us to represent an indefinite number of arguments as an array. In the example, we use the rest parameters to collect arguments from the second one to the end. We then multiply them by the first one. This example is using an arrow function, which is introduced in the next section.</p>
+
+<pre class="brush: js">function multiply(multiplier, ...theArgs) {
+  return theArgs.map(x =&gt; multiplier * x);
+}
+
+var arr = multiply(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]</pre>
+
+<h2 id="Arrow_functions">Arrow functions</h2>
+
+<p>An <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function expression</a> (previously, and now incorrectly known as <strong>fat arrow function</strong>) has a shorter syntax compared to function expressions and lexically binds the <code>this</code> value. Arrow functions are always anonymous. See also this hacks.mozilla.org blog post: "<a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">ES6 In Depth: Arrow functions</a>".</p>
+
+<p>Two factors influenced the introduction of arrow functions: shorter functions and lexical <code>this</code>.</p>
+
+<h3 id="Shorter_functions">Shorter functions</h3>
+
+<p>In some functional patterns, shorter functions are welcome. Compare:</p>
+
+<pre class="brush: js">var a = [
+  'Hydrogen',
+  'Helium',
+  'Lithium',
+  'Beryllium'
+];
+
+var a2 = a.map(function(s) { return s.length; });
+
+console.log(a2); // logs [8, 6, 7, 9]
+
+var a3 = a.map(s =&gt; s.length);
+
+console.log(a3); // logs [8, 6, 7, 9]
+</pre>
+
+<h3 id="Lexical_this">Lexical <code>this</code></h3>
+
+<p>Until arrow functions, every new function defined its own <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a> value (a new object in case of a constructor, undefined in strict mode function calls, the context object if the function is called as an "object method", etc.). This proved to be annoying with an object-oriented style of programming.</p>
+
+<pre class="brush: js">function Person() {
+  // The Person() constructor defines `this` as itself.
+  this.age = 0;
+
+  setInterval(function growUp() {
+    // In nonstrict mode, the growUp() function defines `this`
+    // as the global object, which is different from the `this`
+    // defined by the Person() constructor.
+    this.age++;
+  }, 1000);
+}
+
+var p = new Person();</pre>
+
+<p>In ECMAScript 3/5, this issue was fixed by assigning the value in <code>this</code> to a variable that could be closed over.</p>
+
+<pre class="brush: js">function Person() {
+  var self = this; // Some choose `that` instead of `self`.
+                   // Choose one and be consistent.
+  self.age = 0;
+
+  setInterval(function growUp() {
+    // The callback refers to the `self` variable of which
+    // the value is the expected object.
+    self.age++;
+  }, 1000);
+}</pre>
+
+<p>Alternatively, a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bound function</a> could be created so that the proper <code>this</code> value would be passed to the <code>growUp()</code> function.</p>
+
+<p>Arrow functions capture the <code>this</code> value of the enclosing context, so the following code works as expected.</p>
+
+<pre class="brush: js">function Person() {
+  this.age = 0;
+
+  setInterval(() =&gt; {
+    this.age++; // |this| properly refers to the person object
+  }, 1000);
+}
+
+var p = new Person();</pre>
+
+<h2 id="Predefined_functions">Predefined functions</h2>
+
+<p>JavaScript has several top-level, built-in functions:</p>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/eval", "eval()")}}</dt>
+ <dd>
+ <p>The <code><strong>eval()</strong></code> method evaluates JavaScript code represented as a string.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</dt>
+ <dd>
+ <p>The <code><strong>uneval()</strong></code> method creates a string representation of the source code of an {{jsxref("Object")}}.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</dt>
+ <dd>
+ <p>The global <code><strong>isFinite()</strong></code> function determines whether the passed value is a finite number. If needed, the parameter is first converted to a number.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</dt>
+ <dd>
+ <p>The <code><strong>isNaN()</strong></code> function determines whether a value is {{jsxref("Global_Objects/NaN", "NaN")}} or not. Note: coercion inside the <code>isNaN</code> function has <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN#Description">interesting</a> rules; you may alternatively want to use {{jsxref("Number.isNaN()")}}, as defined in ECMAScript 2015, or you can use <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code> to determine if the value is Not-A-Number.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</dt>
+ <dd>
+ <p>The <code><strong>parseFloat()</strong></code> function parses a string argument and returns a floating point number.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</dt>
+ <dd>
+ <p>The <code><strong>parseInt()</strong></code> function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems).</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</dt>
+ <dd>
+ <p>The <code><strong>decodeURI()</strong></code> function decodes a Uniform Resource Identifier (URI) previously created by {{jsxref("Global_Objects/encodeURI", "encodeURI")}} or by a similar routine.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</dt>
+ <dd>
+ <p>The <code><strong>decodeURIComponent()</strong></code> method decodes a Uniform Resource Identifier (URI) component previously created by {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} or by a similar routine.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</dt>
+ <dd>
+ <p>The <code><strong>encodeURI()</strong></code> method encodes a Uniform Resource Identifier (URI) by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</dt>
+ <dd>
+ <p>The <code><strong>encodeURIComponent()</strong></code> method encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</dt>
+ <dd>
+ <p>The deprecated <code><strong>escape()</strong></code> method computes a new string in which certain characters have been replaced by a hexadecimal escape sequence. Use {{jsxref("Global_Objects/encodeURI", "encodeURI")}} or {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} instead.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</dt>
+ <dd>
+ <p>The deprecated <code><strong>unescape()</strong></code> method computes a new string in which hexadecimal escape sequences are replaced with the character that it represents. The escape sequences might be introduced by a function like {{jsxref("Global_Objects/escape", "escape")}}. Because <code>unescape()</code> is deprecated, use {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} or {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} instead.</p>
+ </dd>
+</dl>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Вирази_та_оператори")}}</p>
diff --git a/files/uk/web/javascript/guide/grammar_and_types/index.html b/files/uk/web/javascript/guide/grammar_and_types/index.html
new file mode 100644
index 0000000000..415aaaff62
--- /dev/null
+++ b/files/uk/web/javascript/guide/grammar_and_types/index.html
@@ -0,0 +1,716 @@
+---
+title: Граматика та типи
+slug: Web/JavaScript/Guide/Grammar_and_types
+tags:
+  - JavaScript
+  - 'l10n:priority'
+  - Посібник
+translation_of: Web/JavaScript/Guide/Grammar_and_types
+---
+<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</p>
+
+<p class="summary">В цьому розділі розглядаються основи граматики JavaScript, оголошення змінних, типи даних і літерали.</p>
+
+<h2 id="Основи">Основи</h2>
+
+<p>Більшість свого синтаксису JavaScript запозичає у Java, C та C++, але на нього вплинули також Awk, Perl і Python.</p>
+
+<p>Мова JavaScript <strong>чутлива до регістру</strong> і використовує <span class="short_text" id="result_box" lang="uk"><span>набір</span> <span>символів</span></span> <strong>Unicode</strong>. Наприклад, слово Früh (що німецькою означає "рано") може використовуватись як ім'я змінної.</p>
+
+<pre class="brush: js notranslate">let Früh = "foobar"</pre>
+
+<p>Проте, змінна <code>früh</code> не одне й те саме, що <code>Früh</code>, тому що мова JavaScript чутлива до регістру.</p>
+
+<p>У JavaScript команди називаються <a href="/uk/docs/Glossary/Інструкція">інструкціями</a> і розділяються крапкою з комою (;).</p>
+
+<p>Немає необхідності ставити крапку з комою після інструкції, якщо вона написана на своєму власному рядку. Проте, якщо ви бажаєте мати більш, ніж одну інструкцію в рядку, тоді потрібно їх відділяти крапкою з комою.</p>
+
+<div class="blockIndicator note">
+<p>ECMAScript також має правила для автоматичної вставки крапки з комою (<a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar#Автоматична_вставка_крапки_з_комою">ASI</a>, Automatic semicolon insertion) в кінці інструкцій. (Щоб отримати більше інформації, перегляньте детальну довідку щодо <a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar">лексичної граматики</a> JavaScript.)</p>
+</div>
+
+<p>Однак, вважається найкращою практикою завжди ставити крапку з комою після інструкції, навіть якщо вона не вимагається. Ця практика зменшує шанси отримати помилки у коді.</p>
+
+<p>Текст скрипта у JavaScript сканується зліва направо та конвертується у послідовність вхідних елементів, якими є <em>токени</em>, <em>керівні символи, символи розриву рядка, коментарі,</em> або <a href="/uk/docs/Glossary/Whitespace">пробільні символи</a>. (Символи пробілів, табуляції та символи нового рядка вважаються пробільними символами).</p>
+
+<h2 id="Коментарі">Коментарі</h2>
+
+<p>Синтаксис <strong>коментарів</strong> такий самий, як у C++ та багатьох інших мовах програмування:</p>
+
+<pre class="brush: js notranslate">// однорядковий коментар
+
+/* а це довший,
+* багаторядковий коментар
+*/
+
+/* Однак, не можна, /* вкладати коментарі */ SyntaxError */</pre>
+
+<p>Коментарі поводяться як пробіли та відкидаються під час виконання скрипта.</p>
+
+<div class="blockIndicator note">
+<p><strong>Заувага</strong>: Ви можете також побачити третій тип синтаксису коментарів на початку деяких файлів JavaScript, який виглядає приблизно так: <code>#!/usr/bin/env node.</code></p>
+
+<p>Цей синтаксис називається <strong>шебанг</strong>, це спеціальний коментар, який використовується, щоб вказати шлях до певного рушія JavaScript, який має виконати скрипт. Дивіться <a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar#Коментарі_шебанг">коментарі шебанг</a> для більш детальної інформації.</p>
+</div>
+
+<h2 id="Оголошення">Оголошення</h2>
+
+<p>Існують три види оголошення змінних у JavaScript.</p>
+
+<dl>
+ <dt>{{jsxref("Statements/var", "var")}}</dt>
+ <dd>Оголошує змінну та необов'язково ініціалізує її значенням.</dd>
+ <dt>{{jsxref("Statements/let", "let")}}</dt>
+ <dd>Оголошує локальну змінну блочної області видимості, необов'язково ініціалізуючи її значенням.</dd>
+ <dt>{{jsxref("Statements/const","const")}}</dt>
+ <dd>Оголошує константу блочної області видимості, доступну тільки для читання.</dd>
+</dl>
+
+<h3 id="Змінні">Змінні</h3>
+
+<p><span id="result_box" lang="uk"><span>Ви використовуєте змінні, як символічні імена для значень у вашій програмі.</span></span> Назви змінних, <a href="/uk/docs/Glossary/ідентифікатор">ідентифікатори</a>, відповідають певним правилам.</p>
+
+<p>Ідентифікатори JavaScript повинні починатися з літери, знаку підкреслення (<code>_</code>) або знаку долара (<code>$</code>). Н<span class="short_text" id="result_box" lang="uk"><span>аступні символи можуть також бути цифрами</span></span> (<code>0</code>-<code>9</code>).</p>
+
+<p>Оскільки мова JavaScript чутлива до регістру, літери включають у себе символи від "<code>A</code>" до "<code>Z</code>" (у верхньому регістрі) та символи від  "<code>a</code>" до "<code>z</code>" (у нижньому регістрі).</p>
+
+<p>Ви можете використовувати більшу частину літер ISO 8859-1 або Юнікоду, такі як <code>å</code> та <code>ü</code> у ідентифікаторах. (Для більш детальної інформації дивіться <a href="https://mathiasbynens.be/notes/javascript-identifiers-es6">цю статтю</a>.) Ви також можете використовувати <a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar#Рядкові_літерали">екрановані послідовності Юнікоду </a>в якості символів у ідентифікаторах.</p>
+
+<p>Деякі приклади допустимих назв: <code>Number_hits</code>, <code>temp99</code>, <code>$credit</code> та <code>_name</code>.</p>
+
+<h3 id="Оголошення_змінних">Оголошення змінних</h3>
+
+<p>Ви можете оголосити змінну двома шляхами:</p>
+
+<ul>
+ <li>За допомогою ключого слова {{jsxref("Statements/var", "var")}}. Наприклад,<code>var x = 42</code>. <span id="result_box" lang="uk"><span>Цей синтаксис може використовуватись для оголошення як <strong>локальних</strong>, так і <strong>глобальних </strong>змінних, в залежності від <em>контексту виконання</em>.</span></span></li>
+ <li><span class="short_text" id="result_box" lang="uk"><span>За допомогою ключового слова {{jsxref("Statements/const", "const")}} або {{jsxref("Statements/let", "let")}}.Наприклад, <code>let y = 13</code>. Цей синтаксис може бути використаний для оголошення локальної змінної блочної області видимості. (Дивіться <a href="#Область_видимості_змінної">Область видимості змінної</a> нижче).</span></span></li>
+</ul>
+
+<p>Ви також можете просто присвоїти змінній значення. Наприклад, <code>x = 42</code>. Ця форма створює <strong><a href="/uk/docs/Web/JavaScript/Reference/Statements/var#Опис">неоголошену глобальну</a> </strong>змінну. Вона також генерує попередження у JavaScript. Неоголошені глобальні змінні можуть привести до неочікуваної поведінки. Тому не рекомендується використовувати неоголошені глобальні змінні.</p>
+
+<h3 id="Обчислення_змінних">Обчислення змінних</h3>
+
+<p>Змінна, оголошена за допомогою <code>var</code> або <code>let</code>, без початкового значення, має значення {{jsxref("undefined")}}.</p>
+
+<p>Спроба звернення до неоголошеної змінної призведе до викидання винятку {{jsxref("ReferenceError")}}:</p>
+
+<pre class="brush: js notranslate">var a;
+console.log('Значення a дорівнює ' + a); // Значення a дорівнює undefined
+
+console.log('Значення b дорівнює ' + b); // Значення b дорівнює undefined
+var b;
+// Це може спантеличити, доки ви не прочитаєте 'Підняття змінних' нижче
+
+console.log('Значення c дорівнює ' + c); // Uncaught ReferenceError: c is not defined
+
+let x;
+console.log('Значення x дорівнює ' + x); // Значення x дорівнює undefined
+
+console.log('Значення y дорівнює ' + y); // Uncaught ReferenceError: y is not defined
+let y; </pre>
+
+<p><span id="result_box" lang="uk"><span>Можна використати <code>undefined</code>, щоб з'ясувати, чи має змінна значення.</span> <span>У наступному коді змінній <code>input</code> не присвоюється значення, і умова в операторі </span></span><code><a href="/uk/docs/Web/JavaScript/Reference/Statements/if...else" title="uk/docs/JavaScript/Reference/Statements/if...else">if</a></code> набуває значення<span lang="uk"><span> <code>true</code>.</span></span></p>
+
+<pre class="brush: js notranslate">var input;
+if (input === undefined) {
+  doThis();
+} else {
+  doThat();
+}</pre>
+
+<p>Значення <code>undefined</code> поводить себе як <code>false</code>, коли використовується в булевому контексті. Наприклад, <span id="result_box" lang="uk"><span>наступний код виконує функцію <code>myFunction</code>, оскільки елемент <code>myArray</code> дорівнює <code>undefined</code></span></span>:</p>
+
+<pre class="brush: js notranslate">var myArray = [];
+if (!myArray[0]) myFunction(); </pre>
+
+<p>Значення <code>undefined</code> перетворюється на <code>NaN</code>, коли використовується у числовому контексті.</p>
+
+<pre class="brush: js notranslate">var a;
+a + 2;  // Обчислюється як NaN</pre>
+
+<p>Коли ви обчислюєте змінну {{jsxref("null")}}, значення null поводить себе як 0 у числовому контексті, та як false - у булевому. Наприклад:</p>
+
+<pre class="brush: js notranslate">var n = null;
+console.log(n * 32); // Виведе 0 у консоль</pre>
+
+<h3 id="Область_видимості_змінної"> Область видимості змінної</h3>
+
+<p><span id="result_box" lang="uk">Коли ви оголошуєте змінну за межами будь-яких функцій, вона називається <em>глобальною</em> змінною, позаяк доступна для будь-якого іншого коду у поточному документі. Коли ви оголошуєте змінну всередині функції, вона називається <em>локальною </em>змінною, позаяк доступна лише в межах цієї функції.</span></p>
+
+<p>JavaScript до ECMAScript 2015 не має <a href="/uk/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Блокова_інструкція">блочної</a> області видимості. Точніше, змінна, оголошена всередині блоку, є локальною для <em>функції</em> <em>(або глобальної області видимості)</em>, в якій розміщено цей блок.</p>
+
+<p>Наприклад, наступний код виведе <code>5</code>, тому що областю видимості <code>x</code> є глобальний контекст (або контекст функції, якщо код є частиною функції). Область видимості <code>x</code> не обмежується найближчим блоком конструкції <code>if</code>.</p>
+
+<pre class="brush: js notranslate">if (true) {
+  var x = 5;
+}
+console.log(x);  // x дорівнює 5</pre>
+
+<p><span id="result_box" lang="uk"><span>Ця поведінка змінюється при використанні ключового слова <code>let</code>, (представленого в ECMAScript 2015).</span></span></p>
+
+<pre class="brush: js notranslate">if (true) {
+  let y = 5;
+}
+console.log(y);  // ReferenceError: y is not defined</pre>
+
+<h3 id="Підняття_змінних">Підняття змінних</h3>
+
+<p><span id="result_box" lang="uk"><span>Ще однією особливістю змінних у JavaScript є те, що ви можете посилатися на змінну, оголошену пізніше, і це не призведе до винятку.</span></span></p>
+
+<p>Ця концепція має назву <strong>підняття (hoisting)</strong>. Змінні у JavaScript, <span id="result_box" lang="uk"><span>в певному сенсі, "піднімаються" на вершину функції або інструкції у коді.</span></span> <span id="result_box" lang="uk"><span>Однак, підняті змінні повертають значення</span></span> <code>undefined</code>. <span id="result_box" lang="uk"><span>Тому, навіть якщо ви оголосите та ініціалізуєте змінну після використання або посилання на цю змінну, вона все одно поверне <code>undefined</code>.</span></span></p>
+
+<pre class="brush: js notranslate">/**
+* Приклад 1
+*/
+console.log(x === undefined); // true
+var x = 3;
+
+/**
+* Приклад 2
+*/
+// поверне значення undefined
+var myvar = 'моє значення';
+
+(function() {
+  console.log(myvar); // undefined
+  var myvar = 'локальна змінна';
+})();</pre>
+
+<p><span id="result_box" lang="uk"><span>Наведені вище приклади будуть тлумачитися так само, як</span></span>:</p>
+
+<pre class="brush: js notranslate">/**
+* Приклад 1
+*/
+var x;
+console.log(x === undefined); // true
+x = 3;
+
+/**
+* Приклад 2
+*/
+var myvar = 'моє значення';
+
+(function() {
+  var myvar;
+  console.log(myvar); // undefined
+  myvar = 'локальна змінна';
+})();</pre>
+
+<p>Враховуючи підняття, всі оголошення через <code>var</code> всередині функції мають знаходитись якомога ближче до вершини функції. Така практика покращує зрозумілість коду.</p>
+
+<p>В ECMAScript 2015 <code>let</code> та <code>const</code> <strong>підіймаються, але не ініціалізуються. </strong>Результатом посилання на змінну в блоці до оголошення цієї змінної буде {{jsxref("ReferenceError")}}, тому що змінна перебуває у "тимчасовій мертвій зоні" від початку блоку до обробки її оголошення.</p>
+
+<pre class="brush: js notranslate">console.log(x); // ReferenceError
+let x = 3;</pre>
+
+<h3 id="Підняття_функції">Підняття функції</h3>
+
+<p>У випадку з функціями, лише <em>оголошення</em> функцій піднімаються, але <em>не</em> <em>функціональні вирази</em>.</p>
+
+<pre class="brush: js notranslate">/* Оголошення функції */
+
+foo(); // "ква"
+
+function foo() {
+  console.log('ква');
+}
+
+/* Функціональний вираз */
+
+baz(); // TypeError: baz is not a function
+
+var baz = function() {
+  console.log('кря');
+};</pre>
+
+<h3 id="Глобальні_змінні">Глобальні змінні</h3>
+
+<p>Глобальні змінні насправді є властивостями <em>глобального об'єкта</em>.</p>
+
+<p>На веб-сторінках глобальним об'єктом є <code><a href="/uk/docs/Web/API/Window">window</a></code>, тому ви можете присвоювати значення та звертатись до глобальних змінних за допомогою синтаксису <code>window.<em>змінна</em></code>.</p>
+
+<p>Відповідно, ви можете звертатись до глобальних змінних, оголошених в одному вікні або фреймі, з іншого вікна або фрейму, вказавши при цьому ім'я цього вікна чи фрейму. Наприклад, якщо в документі оголошена змінна під назвою <code>phoneNumber</code>, ви можете звернутися до неї з <code>iframe</code> так: <code>parent.phoneNumber</code>.</p>
+
+<h3 id="Константи">Константи</h3>
+
+<p>Ви можете створити іменовану константу, призначену лише для читання, за допомогою ключового слова {{jsxref("Statements/const", "const")}}.</p>
+
+<p>Синтаксис ідентифікатора константи такий самий, як і синтаксис будь-якого ідентифікатора змінної: він повинен починатися з літери, підкреслення або знака долара (<code>$</code>) та може містити букви, цифри або символи підкреслення.</p>
+
+<pre class="brush: js notranslate">const PI = 3.14;</pre>
+
+<p>Константа не може змінювати значення за допомогою присвоювання або повторно оголошуватися протягом виконання скрипта. Вона повинна бути ініціалізована початковим значенням.</p>
+
+<p>Правила області видимості для констант такі ж, як для <code>let</code>-змінних блочної області видимості. Якщо ключове слово <code>const</code> не вказане, ідентифікатор вважається ідентифікатором змінної.</p>
+
+<p>Не можна оголошувати константу з таким самим ім'ям, як функція або змінна в тій самій області видимості. Наприклад:</p>
+
+<pre class="brush: js notranslate">// ЦЕ СПРИЧИНИТЬ ПОМИЛКУ
+function f() {};
+const f = 5;
+
+// ЦЕ ТАКОЖ СПРИЧИНИТЬ ПОМИЛКУ
+function f() {
+  const g = 5;
+  var g;
+
+  //інструкції
+}</pre>
+
+<p>Однак, властивості об'єктів, присвоєних константам, не захищені, тому наступна інструкція виконується без проблем.</p>
+
+<pre class="brush: js notranslate">const MY_OBJECT = {'key': 'значення'};
+MY_OBJECT.key = 'іншезначення';</pre>
+
+<p>Вміст будь-якого масиву також не захищений, тому наступна інструкція виконується без проблем.</p>
+
+<pre class="brush: js notranslate">const MY_ARRAY = ['HTML','CSS'];
+MY_ARRAY.push('JAVASCRIPT');
+console.log(MY_ARRAY); //виведе ['HTML','CSS','JAVASCRIPT'];
+</pre>
+
+<h2 id="Структури_та_типи_даних">Структури та типи даних</h2>
+
+<h3 id="Типи_даних">Типи даних</h3>
+
+<p>Останній стандарт ECMAScript визначає вісім типів даних:</p>
+
+<ul>
+ <li>Сім типів даних, які є <a href="/uk/docs/Glossary/Primitive">простими типами</a>:
+
+  <ol>
+   <li><a href="/uk/docs/Glossary/Boolean">Boolean</a>. <code>true</code> та <code>false</code>.</li>
+   <li><a href="/uk/docs/Glossary/null">null</a>. Спеціальне ключове слово, що позначає нульове значення. (Оскільки мова JavaScript чутлива до регістру, <code>null</code> це <em>не </em>одне й те саме, що <code>Null</code>, <code>NULL</code> чи будь-який інший варіант).</li>
+   <li><a href="/uk/docs/Glossary/undefined">undefined</a>. Властивість верхнього рівня, чиє значення не визначене.</li>
+   <li><a href="/uk/docs/Glossary/Number">Number</a>. Число, ціле або з плаваючою комою. Наприклад: <code>42</code> або <code>3.14159</code>.</li>
+   <li><a href="/uk/docs/Glossary/BigInt">BigInt</a>. Ціле число з довільною точністю. Наприклад:  <code>9007199254740992n</code>.</li>
+   <li><a href="/uk/docs/Glossary/String">String</a>. Послідовність символів, що представляють текстове значення. Наприклад: "Привіт".</li>
+   <li><a href="/uk/docs/Glossary/Символ">Symbol</a> (новий в ECMAScript 2015). Тип даних, екземпляри якого унікальні та незмінні.</li>
+  </ol>
+ </li>
+ <li>та <a href="/uk/docs/Glossary/Object">Object</a></li>
+</ul>
+
+<p>Хоча цих типів даних відносно мало, вони дозволяють виконувати корисні функції у ваших застосунках. {{jsxref("Object", "Об'єкти")}} та {{jsxref("Function", "функції")}} - це інші фундаментальні елементи мови. Об'єкти можна розглядати, як іменовані контейнери для значень, а функції - як процедури, які може виконувати скрипт. </p>
+
+<h3 id="Перетворення_типів_даних">Перетворення типів даних</h3>
+
+<p>JavaScript - це мова з <em>динамічною типізацією</em>. Це означає, що при оголошенні змінної не потрібно вказувати, якого вона типу. Це також означає, що типи даних автоматично перетворюються за необхідності під час виконання скрипта. </p>
+
+<p>Наприклад, ви можете визначити змінну таким чином:</p>
+
+<pre class="brush: js notranslate">var answer = 42;</pre>
+
+<p>А пізніше цій же змінній можна присвоїти значення рядкового типу даних, наприклад:</p>
+
+<pre class="brush: js notranslate">answer = 'Дякуємо за рибу...';</pre>
+
+<p>Оскільки JavaScript динамічно типізована мова, таке присвоєння не спричиняє повідомлення про помилку.</p>
+
+<h3 id="Числа_та_оператор">Числа та оператор '+'</h3>
+
+<p>У виразах, що включають числові й рядкові значення з оператором <code>+</code>, JavaScript перетворює числові значення на рядки. Наприклад:</p>
+
+<pre class="brush: js notranslate">x = 'Відповідь - ' + 42 // "Відповідь - 42"
+y = 42 + ' - це відповідь' // "42 - це відповідь"</pre>
+
+<p>З усіма іншими операторами JavaScript <em>не</em> перетворює числові значення на рядки. Наприклад:</p>
+
+<pre class="brush: js notranslate">'37' - 7 // 30
+'37' + 7 // "377"</pre>
+
+<h3 id="Перетворення_рядків_на_числа">Перетворення рядків на числа</h3>
+
+<p>У випадку, коли значення, що представляє число, є в пам'яті у вигляді рядка, існують методи для перетворення.</p>
+
+<ul>
+ <li id="parseInt()_and_parseFloat()">{{jsxref("parseInt", "parseInt()")}}</li>
+ <li>{{jsxref("parseFloat", "parseFloat()")}}</li>
+</ul>
+
+<p><code>parseInt</code> повертає тільки цілі числа, тому його використання для десяткових чисел обмежене.</p>
+
+<div class="blockIndicator note">
+<p>Крім того, найкращою практикою для <code>parseInt</code> є завжди включати параметр <em>radix</em> (основа). Параметр radix вказує, яка система числення має використовуватись.</p>
+</div>
+
+<pre class="brush: js notranslate">parseInt('101', 2) // 5</pre>
+
+<p>Альтернативним методом отримання числа з рядка є використання оператора <code>+</code> (унарний плюс):</p>
+
+<pre class="brush: js notranslate">'1.1' + '1.1' // '1.11.1'
+(+'1.1') + (+'1.1') // 2.2
+// Зауважте: дужки не обов'язкові, вони додаються для ясності</pre>
+
+<h2 id="Літерали">Літерали</h2>
+
+<p><em>Літерали</em> (<em>англ.</em> literal - "буквальний") відображають значення у JavaScript. Це фіксовані значення, не змінні, які ви буквально вказуєте у сценарії. У цьому розділі описані наступні типи літералів:</p>
+
+<ul>
+ <li><a href="#Масивні_літерали">Масивні літерали</a></li>
+ <li><a href="#Булеві_літерали">Булеві літерали</a></li>
+ <li><a href="#Літерали_з_рухомою_крапкою">Літерали з рухомою крапкою</a></li>
+ <li><a href="#Числові_літерали">Числові літерали</a></li>
+ <li><a href="#Обєктні_літерали">Об'єктні літерали</a></li>
+ <li><a href="#Літерали_регулярних_виразів_RegExp">Літерали регулярних виразів</a></li>
+ <li><a href="#Рядкові_літерали">Рядкові літерали</a></li>
+</ul>
+
+<h3 id="Масивові_літерали">Масивові літерали</h3>
+
+<p>Масивовий літерал - це список з нуля чи більше виразів, які представляють елементи масиву, вкладений у квадратні дужки (<code>[]</code>). Коли ви створюєте масив, використовуючи масивовий літерал, він ініціалізується вказаними значеннями в якості своїх елементів, а його довжина дорівнює кількості вказаних аргументів.</p>
+
+<p>Наступний приклад створює масив <code>coffees</code> (кава) з трьома елементами та довжиною, що дорівнює три:</p>
+
+<pre class="brush: js notranslate">let coffees = ['Французька', 'Колумбійська', 'Кона'];</pre>
+
+<div class="note">
+<p><strong>Заувага:</strong> Літерал масиву - це тип <em>об'єктного ініціалізатора</em>. Дивіться <a href="/uk/docs/Web/JavaScript/Guide/Working_with_Objects#Використання_обєктних_ініціалізаторів" title="uk/docs/JavaScript/Guide/Working with Objects#Using Object Initializers">Використання об'єктних ініціалізаторів</a>.</p>
+</div>
+
+<p>Якщо масив створюється за допомогою літералів у скрипті верхнього рівня, JavaScript інтерпретує масив кожного разу, коли обчислює вираз, що містить літерал масиву. На додачу, літерал, що використовується у функції, створюється кожного разу, коли викликається функція.</p>
+
+<div class="blockIndicator note">
+<p><strong>Заувага:</strong>  Літерали масиву також є об'єктами <code>Array</code>. Більш детальну інформацію щодо об'єктів <code>Array</code> дивіться у статтях {{jsxref("Array")}} та <a href="/uk/docs/Web/JavaScript/Guide/Indexed_collections">Індексовані колекції</a>.</p>
+</div>
+
+<h4 id="Додаткові_коми_у_масивних_літералах">Додаткові коми у масивних літералах</h4>
+
+<p>Вам не обов'язково вказувати всі елементи у масивному літералі. Якщо помістити дві коми поспіль, масив заповнить невказані елементи значеннями <code>undefined</code>. Наступний приклад створює масив <code>fish</code> (риба):</p>
+
+<pre class="brush: js notranslate">let fish = ['Крилатка', , 'Лящ'];</pre>
+
+<p>Цей масив має два елементи зі значеннями та один порожній елемент:</p>
+
+<ul>
+ <li><code>fish[0]</code> дорівнює "Крилатка",</li>
+ <li><code>fish[1]</code> дорівнює <code>undefined</code></li>
+ <li><code>fish[2]</code> дорівнює "Лящ"</li>
+</ul>
+
+<p>Якщо в кінці списку елементів ви додаєте кінцеву кому, вона ігнорується.</p>
+
+<p>У наступному прикладі довжина масиву дорівнює трьом. Не існує елемента <code>myList[3]</code>. Усі інші коми у списку позначають новий елемент.</p>
+
+<div class="note">
+<p><strong>Заувага:</strong> коми в кінці можуть створювати помилки у старих версіях веб-переглядачів, тому краще їх видаляти.</p>
+</div>
+
+<pre class="brush: js notranslate">let myList = ['дім', , 'школа', ];</pre>
+
+<p>У наступному прикладі довжина масиву становить чотири, а елементи <code>myList[0]</code> та <code>myList[2]</code> відсутні.</p>
+
+<pre class="brush: js notranslate">let myList = [ ,'дім', , 'школа'];</pre>
+
+<p>У наступному прикладі довжина масиву становить чотири, а елементи <code>myList[1]</code> та <code>myList[3]</code> відсутні. <strong>Ігнорується лише остання кома</strong>.</p>
+
+<pre class="brush: js notranslate">let myList = ['дім', , 'школа', , ];</pre>
+
+<p>Розуміння поведінки додаткових ком важливе для розуміння JavaScript як мови. </p>
+
+<p>Однак, при написанні власного коду, варто однозначно оголошувати відсутні елементи як <code>undefined</code>. Це підвищить зрозумілість та надійність вашого коду.</p>
+
+<h3 id="Булеві_літерали">Булеві літерали</h3>
+
+<p>Тип Boolean має два значення літералів: <code>true</code> та <code>false</code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Будьте обережні:</strong> Не плутайте примітивні булеві значення <code>true</code> та <code>false</code> зі значеннями true та false об'єкта {{jsxref("Boolean")}}.</p>
+Об'єкт Boolean - це обгортка навколо примітивного булевого типу даних. Дивіться {{jsxref("Boolean")}} для отримання додаткової інформації.</div>
+
+<h3 id="Числові_літерали">Числові літерали</h3>
+
+<p>Типи <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число"><code>Number</code></a> та <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/BigInt"><code>BigInt</code></a> можна виразити у десятковій (основа 10), шістнадцятковій (основа 16), вісімковій (основа 8) та двійковій (основа 2) формі.</p>
+
+<ul>
+ <li><em>Десятковий</em> числовий літерал - це послідовність цифр без <code>0</code> (нуля) на початку.</li>
+ <li>Початковий <code>0</code> (нуль) або <code>0o</code> (або <code>0O</code>) у числовому літералі вказує, що він заданий у <em>вісімковій </em>системі числення. Вісімкове число може включати лише цифри <code><em>0</em></code>–<code><em>7</em></code>.</li>
+ <li>Символи <code><em>0x</em></code> (або <code>0X</code>) на початку вказують на <em>шістнадцяткове </em>представлення числа. Шістнадцяткове число може включати цифри (<code>0</code>–<code>9</code>) та літери <code>a</code> – <code>f</code> та <code>A</code> – <code>F</code>. (Регістр символу не має значення. Тому: <code>0xa</code> = <code>0xA</code> = <code>10</code> і <code>0xf</code> = <code>0xF</code> = <code>15</code>.)</li>
+ <li>Символи <code>0b</code> (або <code>0B</code>) на початку вказують на <em>двійкове </em>представлення. Двійкові числа можуть включати лише цифри <code>0</code> і <code>1</code>.</li>
+</ul>
+
+<p>Деякі приклади числових літералів:</p>
+
+<pre class="brush: js notranslate">0, 117, -345, 123456789123456789n             (десятковий, основа 10)
+015, 0001, -0o77, 0o777777777777n             (вісімковий, основа 8)
+0x1123, 0x00111, -0xF1A7, 0x123456789ABCDEFn  (шістнадцятковий, "hex" чи основа 16)
+0b11, 0b0011, -0b11, 0b11101001010101010101n  (двійковий, основа 2)</pre>
+
+<p>Для отримання додаткової інформації дивіться <a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar#Числові_літерали">Числові літерали в довідці про лексичну граматику.</a></p>
+
+<h3 id="Літерали_з_рухомою_крапкою">Літерали з рухомою крапкою</h3>
+
+<p>Літерал з рухомою крапкою може мати такі частини:</p>
+
+<ul>
+ <li>Десяткове ціле число, яке може мати знак ("<code>+</code>" або "<code>-</code>" перед ним),</li>
+ <li>Десяткову крапку ("<code>.</code>"),</li>
+ <li>Дробову частину (інше десяткове число),</li>
+ <li>Порядок.</li>
+</ul>
+
+<p>Порядок позначається через "<code>e</code>" або "<code>E</code>", за яким іде ціле число, яке може мати знак ("<code>+</code>" або "<code>-</code>" перед ним). Літерал з рухомою крапкою повинен мати принаймні одну цифру, а також або десяткову крапку, або "<code>e</code>" (чи "<code>E</code>").</p>
+
+<p>Якщо стисло, синтаксис наступний:</p>
+
+<pre class="brush: js notranslate">[(+|-)][цифри].[цифри][(E|e)[(+|-)]цифри]</pre>
+
+<p>Наприклад:</p>
+
+<pre class="brush: js notranslate">3.1415926
+-.123456789
+-3.1E+12
+.1e-23</pre>
+
+<h3 id="Обєктні_літерали">Об'єктні літерали</h3>
+
+<p>Об'єктні літерали - це список з нуля або більше пар імен властивостей та асоційованих з ними значень об'єкта, взятих у фігурні дужки  (<code>{}</code>).</p>
+
+<div class="blockIndicator warning">
+<p><strong>Не використовуйте об'єктні літерали на початку інструкції! </strong>Це призведе до помилки (або не поводитиметься так, як ви очікували), оскільки <code>{</code> буде інтерпретуватися як початок блоку.</p>
+</div>
+
+<p>Нижче наведений приклад об’єктного літералу. Перший елемент об'єкта <code>car</code> (автомобіль) визначає властивість <code>myCar</code> та присвоює йому новий рядок "<code>Saturn</code>"; другому елементу, властивості <code>getCar</code>, негайно присвоюється результат виклику функції <code>(carTypes("Honda"))</code>; третій елемент, властивість <code>special</code>, використовує існуючу змінну (<code>sales</code>).</p>
+
+<pre class="brush: js notranslate">var sales = 'Toyota';
+
+function carTypes(name) {
+  if (name === 'Honda') {
+    return name;
+  } else {
+    return "Вибачте, ми не продаємо автомобілі " + name + ".";
+  }
+}
+
+var car = { myCar: 'Saturn', getCar: carTypes('Honda'), special: sales };
+
+console.log(car.myCar);   // Saturn
+console.log(car.getCar);  // Honda
+console.log(car.special); // Toyota </pre>
+
+<p>Крім того, ви можете використовувати числовий або рядковий літерал в якості імені властивості, чи вкладати один об'єкт у інший. У наступному прикладі використовуються ці можливості.</p>
+
+<pre class="brush: js notranslate">var car = { manyCars: {a: 'Saab', b: 'Jeep'}, 7: 'Mazda' };
+
+console.log(car.manyCars.b); // Jeep
+console.log(car[7]); // Mazda</pre>
+
+<p><span>Іменем властивості об'єкта може бути будь-який рядок, в тому числі порожній. Якщо ім'я властивості не є дозволеним <a href="/uk/docs/Glossary/ідентифікатор">ідентифікатором</a> JavaScript або числом, воно має бути записане в лапках.</span></p>
+
+<p>До імен властивостей, які не є дозволеними ідентифікаторами, не можна звертатись через крапку (<code>.</code>), але <em>можна </em>звертатись та присвоювати значення за допомогою подібної до масиву нотації ("<code>[]</code>").</p>
+
+<pre class="brush: js notranslate">var unusualPropertyNames = {
+  '': 'Порожній рядок',
+  '!': 'Бум!'
+}
+console.log(unusualPropertyNames.'');   // SyntaxError: Unexpected string
+console.log(unusualPropertyNames['']);  // Порожній рядок
+console.log(unusualPropertyNames.!);    // SyntaxError: Unexpected token !
+console.log(unusualPropertyNames['!']); // Бум!</pre>
+
+<h4 id="Покращені_обєктні_літерали">Покращені об'єктні літерали</h4>
+
+<p>У ES2015 об'єктні літерали розширюються для підтримки встановлення прототипу при конструюванні, скороченого запису присвоєнь типу <code>foo: foo</code>, визначення методів, здійснення викликів <code>super</code> та обчислення імен властивостей з виразами.</p>
+
+<p>Разом вони також зближують об'єктні літерали та оголошення класів (<code>class</code>) і дозволяють об'єктно-орієнтованому дизайну користуватися деякими з тих самих зручностей.</p>
+
+<pre class="brush: js notranslate">var obj = {
+    // __proto__
+    __proto__: theProtoObj,
+    // Скорочений запис для ‘handler: handler’
+    handler,
+    // Методи
+    toString() {
+     // Виклики super
+     return 'd ' + super.toString();
+    },
+    // Обчислювані (динамічні) імена властивостей
+    [ 'prop_' + (() =&gt; 42)() ]: 42
+};</pre>
+
+<h3 id="Літерали_регулярних_виразів_RegExp">Літерали регулярних виразів (RegExp)</h3>
+
+<p>Літерал регулярного виразу (який докладно визначається <a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions">пізніше</a>) - це шаблон, записаний між слешами. Нижче наведено приклад літерала регулярного виразу:</p>
+
+<pre class="brush: js notranslate">var re = /ab+c/;</pre>
+
+<h3 id="Рядкові_літерали">Рядкові літерали</h3>
+
+<p>Рядковий літерал - це нуль або більше символів всередині подвійних (<code>"</code>) або одинарних (<code>'</code>) лапок. Рядок повинен бути позначений лапками одного типу (тобто, або двома одинарними лапками, або двома подвійними лапками).</p>
+
+<p>Нижче наведено приклади рядкових літералів:</p>
+
+<pre class="brush: js notranslate">'раз'
+"два"
+'1234'
+'один рядок \n другий рядок'
+"Мар'яна має кота"</pre>
+
+<p>Ви можете викликати будь-який з методів об'єкта {{jsxref("String")}} на рядковому літералі. JavaScript автоматично перетворює рядковий літерал на тимчасовий об'єкт String, викликає метод, а потім прибирає тимчасовий об'єкт String. Ви також можете використовувати властивість <code>String.length</code> з рядковим літералом:</p>
+
+<pre class="brush: js notranslate">// Надрукує кількість символів у рядку, враховуючи пробіли.
+console.log("Мар'яна має кота".length)  // В цьому випадку, 16.</pre>
+
+<p>У ES2015 також доступні <em>шаблонні літерали</em>. Шаблонні літерали пишуться у зворотніх лапках  (<code>`</code>) (<a class="external external-icon" href="https://uk.wikipedia.org/wiki/%D0%93%D1%80%D0%B0%D0%B2%D1%96%D1%81_(%D0%B4%D1%96%D0%B0%D0%BA%D1%80%D0%B8%D1%82%D0%B8%D1%87%D0%BD%D0%B8%D0%B9_%D0%B7%D0%BD%D0%B0%D0%BA)" rel="noopener">гравіс</a>) замість одинарних або подвйних лапок.</p>
+
+<p>Шаблонні рядки надають синтаксичний цукор для конструювання рядків. (Це схоже на функції інтерполяції рядків у Perl, Python та інших).</p>
+
+<p>За бажанням може бути додано тег, що дозволить налаштовувати побудову рядка, уникаючи атак типу впровадження або конструюючи структури даних більш високого рівня з вмісту рядка.</p>
+
+<pre class="brush: js notranslate">// Створення базового рядкового літералу
+`У JavaScript '\n' - це символ переводу рядка.`
+
+// Багаторядковий запис
+`У JavaScript шаблонні рядки можуть бути записані
+у кількох рядках, а текст в одинарних
+чи подвійних лапках не може.`
+
+// Інтерполяція рядків
+var name = 'Боб', time = 'сьогодні';
+`Привіт, ${name}, як ти ${time}?`
+
+// Створення префіксу HTTP-запиту, який інтерпретує заміни та конструювання
+POST`http://foo.org/bar?a=${a}&amp;b=${b}
+     Content-Type: application/json
+     X-Credentials: ${credentials}
+     { "foo": ${foo},
+       "bar": ${bar}}`(myOnReadyStateChangeHandler);</pre>
+
+<p>Вам варто використовувати рядкові літерали, якщо немає потреби використовувати конкретно об'єкт String. Дивіться {{jsxref("String")}} для більш детальної інформації про об'єкти <code>String</code>.</p>
+
+<h4 id="Використання_спеціальних_символів_у_рядках">Використання спеціальних символів у рядках</h4>
+
+<p>Окрім звичайних символів, ви можете також включати до рядків спеціальні символи, як показано в наступному прикладі.</p>
+
+<pre class="brush: js notranslate">'один рядок \n другий рядок'</pre>
+
+<p>Наступна таблиця наводить спеціальні символи, які можна використовувати у рядках JavaScript.</p>
+
+<table class="standard-table">
+ <caption>Таблиця: спеціальні символи JavaScript</caption>
+ <thead>
+  <tr>
+   <th scope="col">Символ</th>
+   <th scope="col">Значення</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>\0</code></td>
+   <td>Нуль-символ</td>
+  </tr>
+  <tr>
+   <td><code>\b</code></td>
+   <td>Повернення на крок</td>
+  </tr>
+  <tr>
+   <td><code>\f</code></td>
+   <td>Зміна сторінки</td>
+  </tr>
+  <tr>
+   <td><code>\n</code></td>
+   <td>Новий рядок</td>
+  </tr>
+  <tr>
+   <td><code>\r</code></td>
+   <td>Повернення каретки</td>
+  </tr>
+  <tr>
+   <td><code>\t</code></td>
+   <td>Горизонтальна табуляція</td>
+  </tr>
+  <tr>
+   <td><code>\v</code></td>
+   <td>Вертикальна табуляція</td>
+  </tr>
+  <tr>
+   <td><code>\'</code></td>
+   <td>Апостроф або одинарні лапки</td>
+  </tr>
+  <tr>
+   <td><code>\"</code></td>
+   <td>Подвійні лапки</td>
+  </tr>
+  <tr>
+   <td><code>\\</code></td>
+   <td>Зворотній слеш</td>
+  </tr>
+  <tr>
+   <td><code>\<em>XXX</em></code></td>
+   <td>Символ у кодуванні Latin-1, який містить до трьох цифр у вісімковій системі числення <em>XXX</em> між <code>0</code> та <code>377</code>. Наприклад, <code>\251</code> - це вісімкова послідовність для знаку охорони авторського права.</td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td><code>\x<em>XX</em></code></td>
+   <td>Символ у кодуванні Latin-1, вказаний двома цифрами у шістнадцятковій системі числення <em>XX</em> між <code>00</code> та <code>FF</code>. Наприклад, <code>\xA9</code> - це шістнадцяткова послідовність  для знаку охорони авторського права.</td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td><code>\u<em>XXXX</em></code></td>
+   <td>Символ Юнікоду, вказаний чотирма цифрами у шістнадцятковій системі числення <em>XXXX</em>. Наприклад, <code>\u00A9</code> - це Юнікодова послідовність для знаку охорони авторського права. Дивіться <a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar#Рядкові_літерали">екрановані послідовності Юнікоду</a>.</td>
+  </tr>
+  <tr>
+   <td><code>\u<em>{XXXXX}</em></code></td>
+   <td>Екранування кодів символів Юнікоду. Наприклад, <code>\u{2F804}</code> - це те саме, що й прості екранування Юнікоду <code>\uD87E\uDC04</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Екранування_символів">Екранування символів</h4>
+
+<p>Для символів, не перелічених у таблиці, зворотній слеш перед символом ігнорується, але таке використання не рекомендоване, і його слід уникати.</p>
+
+<p>Ви можете вставити лапки у рядок, поcтавивши перед ними зворотній слеш. Це називається <em>екрануванням</em> лапок. Наприклад:</p>
+
+<pre class="brush: js notranslate">var quote = "Він читав \"Кремацію Сема Маꥳ\" Р.Дж. Сервіса.";
+console.log(quote);</pre>
+
+<p>Результатом цього буде:</p>
+
+<pre class="brush: js notranslate">Він читав "Кремацію Сема Маꥳ" Р.Дж. Сервіса.</pre>
+
+<p>Щоб включити у рядок сам зворотний слеш, ви маєте його екранувати. Наприклад, щоб присвоїти рядкові шлях до файлу <code>c:\temp</code>, використовуйте наступне:</p>
+
+<pre class="brush: js notranslate">var home = 'c:\\temp';</pre>
+
+<p>Ви також можете екранувати розрив рядка, поставивши перед ним зворотній слеш. І зворотній слеш, і розрив рядка видаляються зі значення рядка.</p>
+
+<pre class="brush: js notranslate">var str = 'цей текст \
+розбито \
+на кілька \
+рядків.'
+console.log(str);   // цей текст розбито на кілька рядків.</pre>
+
+<p>Хоча у JavaScript немає синтаксису "heredoc", ви можете наблизитися до нього, додавши в кінці кожного рядка екранування розриву рядка та екранування символа нового рядка:</p>
+
+<pre class="brush: js notranslate">var poem =
+'Roses are red,\n\
+Violets are blue.\n\
+Sugar is sweet,\n\
+and so is foo.'</pre>
+
+<p>ECMAScript 2015 вводить новий тип літералів, а саме <a href="/uk/docs/Web/JavaScript/Reference/Template_literals"><strong>шаблонні літерали</strong></a>. Це додає багато нових функцій, в тому числі багаторядковий запис!</p>
+
+<pre class="brush: js notranslate" dir="rtl">var poem =
+`Roses are red,
+Violets are blue.
+Sugar is sweet,
+and so is foo.` </pre>
+
+<h2 id="Більше_інформації">Більше інформації</h2>
+
+<p>Цей розділ фокусується на базовому синтаксисі оголошень та типів. Щоб дізнатися більше про мовні конструкції JavaScript, дивіться також наступні розділи цього посібника:</p>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Потік керування та обробка помилок</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Loops_and_iteration">Цикли та ітерації</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Functions">Функції</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Вирази_та_оператори">Вирази та оператори</a></li>
+</ul>
+
+<p>У наступному розділі ми розглянемо конструкції потоку керування та обробку помилок.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</p>
diff --git a/files/uk/web/javascript/guide/index.html b/files/uk/web/javascript/guide/index.html
new file mode 100644
index 0000000000..868d0b7864
--- /dev/null
+++ b/files/uk/web/javascript/guide/index.html
@@ -0,0 +1,131 @@
+---
+title: Посібник JavaScript
+slug: Web/JavaScript/Guide
+tags:
+  - Guide
+  - JavaScript
+  - 'l10n:priority'
+  - Посібник
+translation_of: Web/JavaScript/Guide
+---
+<div>{{jsSidebar("JavaScript Guide")}}</div>
+
+<p class="summary">Посібник з JavaScript показує, як використовувати мову <a href="/uk/docs/Web/JavaScript">JavaScript</a>, і надає її попередній огляд. Та якщо ви шукаєте детальну інформацію щодо особливостей мови, зазирніть у <a href="/uk/docs/Web/JavaScript/Reference">Довідник з JavaScript</a>.</p>
+
+<h2 id="Розділи">Розділи</h2>
+
+<p>Цей посібник поділено на декілька розділів:</p>
+
+<ul class="card-grid">
+ <li><span><a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Guide/Introduction">Вступ</a></span>
+
+  <p><a href="/uk/docs/Web/JavaScript/Guide/Introduction#Де_знайти_інформацію_з_JavaScrip">Про посібник</a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Introduction#Що_таке_JavaScript">Що таке JavaScript</a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">JavaScript та Java</a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_the_ECMAScript_Specification">JavaScript та специфікація ECMAScript</a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Introduction#Початок_роботи_із_JavaScript">Початок роботи із JavaScript</a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Introduction#Hello_World">Hello World</a></p>
+ </li>
+ <li><span><a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types">Граматика і типи</a></span>
+  <p><a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types#Basics">Базовий синтаксис та коментарі</a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">Оголошення</a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope">Область видимості змінної</a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_hoisting">Підняття зміних</a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types#Data_structures_and_types">Структури даних і типи</a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types#Literals">Літерали</a></p>
+ </li>
+ <li><span><a href="/uk/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Керування потоком та обробка помилок</a></span>
+  <p><code><a href="/uk/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#if...else_statement">if...else</a></code><br>
+   <code><a href="/uk/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#switch_statement">switch</a></code><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Exception_handling_statements"><code>try</code>/<code>catch</code>/<code>throw</code></a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Utilizing_Error_objects">Об'єкти помилок</a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Promises">Проміси</a></p>
+ </li>
+ <li><span><a href="/uk/docs/Web/JavaScript/Guide/Loops_and_iteration">Цикли та ітерації</a></span>
+  <p><code><a href="/uk/docs/Web/JavaScript/Guide/Loops_and_iteration#for_statement">for</a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Loops_and_iteration#while_statement">while</a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Loops_and_iteration#do...while_statement">do...while</a><br>
+   <a href="/ukdocs/Web/JavaScript/Guide/Loops_and_iteration#break_statement">break</a>/<a href="/uk/docs/Web/JavaScript/Guide/Loops_and_iteration#continue_statement">continue</a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_statement">for..in</a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for..of</a></code></p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span><a href="/uk/docs/Web/JavaScript/Guide/Functions">Функції</a></span>
+
+  <p><a href="/uk/docs/Web/JavaScript/Guide/Functions#Defining_functions">Визначення функцій</a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Functions#Calling_functions">Виклик функцій</a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Functions#Function_scope">Сфера досяжності функції</a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Functions#Closures">Закритість</a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Functions#Using_the_arguments_object">Аргументи</a> та <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Guide/Functions#Function_parameters">параметри</a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Functions#Arrow_functions">Стрілкові функції</a></p>
+ </li>
+ <li><span><a href="/uk/docs/Web/JavaScript/Guide/Expressions_and_Operators">Вирази та оператори</a></span>
+  <p><a href="/uk/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">Призначення</a> та <a href="/uk/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators">порівняння</a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Expressions_and_Operators#Arithmetic_operators">Арифметичні оператори</a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">Побітові</a> та <a href="/uk/docs/Web/JavaScript/Guide/Expressions_and_Operators#Logical_operators">логічні оператори</a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Expressions_and_Operators#Conditional_(ternary)_operator">Умовний (тернарний) оператор</a></p>
+ </li>
+ <li><span><a href="/uk/docs/Web/JavaScript/Guide/Numbers_and_dates">Числа і дати</a></span><a href="/uk/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers"> Числові літерали</a>
+  <p><a href="/uk/docs/Web/JavaScript/Guide/Numbers_and_dates#Number_object">Об'єкт <code>Number</code></a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Numbers_and_dates#Math_object">Об'єкт <code>Math</code></a><br>
+   <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Guide/Numbers_and_dates#Date_object">Об'єкт <code>Date</code></a></p>
+ </li>
+ <li><span><a href="/uk/docs/Web/JavaScript/Guide/Text_formatting">Форматування тексту</a></span>
+  <p><a href="/uk/docs/Web/JavaScript/Guide/Text_formatting#String_literals">Рядкові літерали</a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Text_formatting#String_objects">Об'єкт <code>String</code></a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Text_formatting#Multi-line_template_literals">Літерали шаблонних рядків</a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Text_formatting#Internationalization">Інтернаціоналізація</a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions">Регулярні вирази</a></p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span><a href="/uk/docs/Web/JavaScript/Guide/Indexed_collections">Індексовані колекції</a></span>
+
+  <p><a href="/uk/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">Масиви</a><br>
+   <a href="/uk/docs/Web/JavaScript/Guide/Indexed_collections#Typed_Arrays">Типізовані масиви</a></p>
+ </li>
+ <li><span><a href="/uk/docs/Web/JavaScript/Guide/Keyed_collections">Класифіковані колекції</a></span>
+  <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#Map_object">Map</a></code><br>
+   <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap_object">WeakMap</a></code><br>
+   <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#Set_object">Set</a></code><br>
+   <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#WeakSet_object">WeakSet</a></code></p>
+ </li>
+ <li><span><a href="/uk/docs/Web/JavaScript/Guide/Working_with_Objects">Робота з об'єктами</a></span>
+  <p><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">Об'єкти та властивості</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">Створення об'єктів</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_methods">Визначення методів</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Getter and setter</a></p>
+ </li>
+ <li><span><a href="/uk/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Деталі об'єктної моделі</a></span>
+  <p><a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">ООП, засноване на прототипах</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creating_the_hierarchy">Створення ієрархії об'єктів</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Property_inheritance_revisited">Успадкування</a></p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Проміси</a></span>
+
+  <p><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises#Guarantees">Гарантії</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Using_promises#Chaining">Ланцюгування</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Using_promises#Error_propagation">Поширення помилок</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Using_promises#Composition">Композиція</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Using_promises#Timing">Координація</a></p>
+ </li>
+ <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Ітератори та генератори</a></span>
+  <p><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterators">Ітератори</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables">Ітеровані</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">Генератори</a></p>
+ </li>
+ <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming">Метапрограмування</a></span>
+  <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Proxies">Proxy</a></code><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Handlers_and_traps">Обробники та пастки</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Revocable_Proxy">Відкликаний проксі</a><br>
+   <code><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Reflection">Reflect</a></code></p>
+ </li>
+</ul>
+
+<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p>
diff --git a/files/uk/web/javascript/guide/indexed_collections/index.html b/files/uk/web/javascript/guide/indexed_collections/index.html
new file mode 100644
index 0000000000..0c4dfaef25
--- /dev/null
+++ b/files/uk/web/javascript/guide/indexed_collections/index.html
@@ -0,0 +1,578 @@
+---
+title: Indexed collections
+slug: Web/JavaScript/Guide/Indexed_collections
+translation_of: Web/JavaScript/Guide/Indexed_collections
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Keyed_Collections")}}</div>
+
+<p class="summary">У цьому розділ представлено набір даних, упорядкованих за значенням індексу. Це включає масиви та подібні до масиву конструкції, такі як об'єкти {{jsxref("Array")}} та {{jsxref("TypedArray")}} .</p>
+
+<h2 id="Обєкт_Array"><code>Об'єкт Array</code></h2>
+
+<p><em>Масив </em>- це упорядкований набір значень, на який ви посилаєтесь з ім'ям та індексом.</p>
+
+<p>Наприклад, розглянемо масив під назвою <code>emp</code>, який містить імена працівників, індексовані їх числовим номером співробітника. Так <code>emp[1] </code>буде працівником номер один, <code>emp[2] </code>працівником номером два, тощо.</p>
+
+<p>У JavaScript немає явного типу даних масиву. Однак ви можете використовувати заздалегідь заданий об’єкт <code>Array</code> та його методи для роботи з масивами у ваших програмах. Об'єкт <code>Array</code> має методи маніпулювання масивами різними способами, такими як з'єднання(joining), реверсування(reversing) та сортування. Він має властивість визначати довжину масиву та інші властивості для використання з регулярними виразами.</p>
+
+<h3 id="Створення_масиву">Створення масиву</h3>
+
+<p>Наступні операції створюють еквівалентні масиви:</p>
+
+<pre class="brush: js">let arr = new Array(<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>)
+let arr = Array(<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>)
+let arr = [<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>]
+</pre>
+
+<p><code><var>element0</var>, <var>element1</var>, ..., <var>elementN</var></code> - це список значень елементів масиву. Коли ці значення задані, масив ініціалізується з ними як елементами масиву. Властивість довжина (<code>length)</code> масиву встановлюється рівною кількості аргументів.</p>
+
+<p>Синтаксис дужки називається "літералом масиву" або "ініціалізатором масиву". Він коротший, ніж інші форми створення масиву, і тому загалом кращий. Докладніше див. <a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types#Літерали_масивів">Літерали масиву</a>.</p>
+
+<p>Для створення масиву з ненульовою довжиною, але без будь-яких елементів, може бути використане будь-яке з наведеного нижче:</p>
+
+<pre class="brush: js">// This...
+let arr = new Array(<var>arrayLength</var>)
+
+// ...буде такий саме масив як цей
+let arr = Array(<var>arrayLength</var>)
+
+// Це має точно такий же ефект
+let arr = []
+arr.length = <var>arrayLength</var>
+</pre>
+
+<div class="note">
+<p><strong>Примітка:</strong> У наведеному вище коді, <code><var>arrayLength</var></code> повинен бути типу <code>Number</code>. У іншому випадку, буде створений масив з єдиним елементом (з наданим значенням). Виклик <code>arr.length</code> поверне <code><var>arrayLength</var></code>, але масив у дійсності убде містити порожні (undefined) елементи. Запуск циклу {{jsxref("Statements/for...in","for...in")}} для масиву не поверне жодного з елементів масиву.</p>
+</div>
+
+<p>Крім нещодавно означеної змінної, як показано вище, масиви також можуть бути призначені як властивість для нового або існуючого об'єкта:</p>
+
+<pre class="brush: js">let obj = {}
+// ...
+obj.prop = [element0, element1, ..., elementN]
+
+// або
+let obj = {prop: [element0, element1, ...., elementN]}
+</pre>
+
+<p>Якщо Ви хочете ініціалізувати масив з єдиним елементом, а цей елемент є <code>Number</code>, ви повинні використовувати синтаксис квадратних дужок. Коли одне значення <code>Number</code> передається конструктору або функції <code>Array()</code>, воно інтерпретується як <code>arrayLength</code>, а не як окремий елемент.</p>
+
+<pre class="brush: js">let arr = [42]       // Створює масив тільки з одним елементом:
+                     // числом 42.
+
+let arr = Array(42)  // Створює масив без жодного елементу
+                     // і довжина масиву arr.length встановлена в 42.
+                     //
+                     // Це еквівалентно наступному:
+let arr = []
+arr.length = 42
+</pre>
+
+<p>Виклик <code>Array(<var>N</var>)</code> призводить до <code>RangeError</code>, якщо <code><var>N</var></code> - це не ціле число, тобто дробова частина якого не дорівнює нулю. Наступний приклад ілюструє таку поведінку.</p>
+
+<pre class="brush: js">let arr = Array(9.3)   // RangeError: Invalid array length
+</pre>
+
+<p>Якщо ваш код потребує створення масивів з окремими елементами довільного типу даних, безпечніше використовувати літерали масиву. Крім того, спершу створіть порожній масив, перш ніж додати до нього один елемент.</p>
+
+<p>У ES2015 ви можете використовувати статичний метод {{jsxref("Array.of")}} для створення масивів з одним елементом.</p>
+
+<pre class="brush: js">let wisenArray = Array.of(9.3)   // wisenArray містить тільки один елемент 9.3</pre>
+
+<h3 id="Заповнення_масиву">Заповнення масиву</h3>
+
+<p>Ви можете заповнити масив, призначивши значення його елементам. Наприклад:</p>
+
+<pre class="brush: js">let emp = []
+emp[0] = 'Casey Jones'
+emp[1] = 'Phil Lesh'
+emp[2] = 'August West'
+</pre>
+
+<div class="note">
+<p><strong>Примітка:</strong> Якщо ви подасте неціле значення для оператора масиву в наведеному вище коді, буде створено властивість в об'єкті, що представляє масив, замість елемента масиву.</p>
+
+<pre class="brush: js">let arr = []
+arr[3.4] = 'Oranges'
+console.log(arr.length)                 // 0
+console.log(arr.hasOwnProperty(3.4))    // true
+</pre>
+</div>
+
+<p>Ви також можете заповнити масив під час його створення:</p>
+
+<pre class="brush: js">let myArray = new Array('Hello', myVar, 3.14159)
+// або
+let myArray = ['Mango', 'Apple', 'Orange']
+</pre>
+
+<h3 id="Звернення_до_елементів_масиву">Звернення до елементів масиву</h3>
+
+<p>Ви звертаєтеся на елементи масиву, використовуючи порядковий номер елемента. Наприклад, припустимо, Ви означуєте такий масив:</p>
+
+<pre class="brush: js">let myArray = ['Wind', 'Rain', 'Fire']
+</pre>
+
+<p>Потім Ви звертаєтеся до першого елементу масиву як до <code>myArray[0]</code>, а до другого елементу масиву як до <code>myArray[1]</code>. Індекс елементів починається з нуля.</p>
+
+<div class="note">
+<p><strong>Примітка:</strong> Оператор масиву (квадратні дужки) також використовуються для доступу до властивостей масиву. (Масиви також є об'єктами в JavaScript). Наприклад:</p>
+
+<pre class="brush: js">let arr = ['one', 'two', 'three']
+arr[2]          // three
+arr['length']   // 3
+</pre>
+</div>
+
+<h3 id="Довжина_масиву">Довжина масиву</h3>
+
+<p>На рівні реалізації масиви JavaScript фактично зберігають свої елементи як стандартні властивості об'єкта, використовуючи індекс масиву як ім'я властивості.</p>
+
+<p>Властивість <code>length</code> особлива. Вона завжди повертає індекс останнього елемента плюс один. (У наведеному нижче прикладі <code>'Dusty' </code>індексується на рівні 30, тому <code>cats.length</code> повертає <code>30 + 1</code>).</p>
+
+<p>Пам'ятайте, що індекси масиву JavaScript базуються на 0: вони починаються з <code>0</code>, а не <code>1</code>. Це означає, що властивість <code>length</code> буде на один більше, ніж найвищий індекс, що зберігається в масиві:</p>
+
+<pre class="brush: js">let cats = []
+cats[30] = ['Dusty']
+console.log(cats.length) // 31
+</pre>
+
+<p>Ви також можете записати значення у властивість <code>length</code> .</p>
+
+<p>Введення значення, коротшого за кількість збережених елементів, скорочує масив. Написання <code>0</code> спустошує масив повністю:</p>
+
+<pre class="brush: js">let cats = ['Dusty', 'Misty', 'Twiggy']
+console.log(cats.length)  // 3
+
+cats.length = 2
+console.log(cats)  // logs "Dusty, Misty" - Twiggy видалено
+
+cats.length = 0
+console.log(cats)  // logs []; масив cats array - порожній
+
+cats.length = 3
+console.log(cats)  // logs [ &lt;3 пустих елементи&gt; ]
+</pre>
+
+<h3 id="Ітерація_з_масивами">Ітерація з масивами</h3>
+
+<p>Поширена операція - це перебір значень масиву, з обробкою кожного елементу. Найпростіший спосіб зробити це наступним чином:</p>
+
+<pre class="brush: js">let colors = ['red', 'green', 'blue']
+for (let i = 0; i &lt; colors.length; i++) {
+  console.log(colors[i])
+}
+</pre>
+
+<p>Якщо ви знаєте, що жоден з елементів вашого масиву не повертає <code>false</code> в булевому контексті, наприклад, якщо ваш масив складається з вузлів <a href="/uk/docs/DOM" title="en-US/docs/DOM">DOM</a>, Ви можете використовувати більш ефективну ідіому:</p>
+
+<pre class="brush: js">let divs = document.getElementsByTagName('div')
+for (let i = 0, div; div = divs[i]; i++) {
+  /* Process div in some way */
+}
+</pre>
+
+<p>Це дозволяє уникнути накладних перевірок довжини масиву та гарантує, що змінна <code><var>div</var></code> для додаткової зручності переназначається поточному елементу на кожній ітерації .</p>
+
+<p>Метод  {{jsxref("Array.forEach", "forEach()")}} забезпечує інший спосіб ітерації з масивом:</p>
+
+<pre class="brush: js">let colors = ['red', 'green', 'blue']
+colors.forEach(function(color) {
+  console.log(color)
+})
+// red
+// green
+// blue
+</pre>
+
+<p>Крім того, ви можете скоротити код для параметра forEach за допомогою функції стрілок ES2015:</p>
+
+<pre class="brush: js">let colors = ['red', 'green', 'blue']
+colors.forEach(color =&gt; console.log(color))
+// red
+// green
+// blue
+</pre>
+
+<p>Функція, передана <code>forEach</code> , виконується один раз для кожного елемента масиву, при цьому елемент масиву передається як аргумент функції. Не присвоєні значення не перебираються в циклі <code>forEach</code>.</p>
+
+<p>Зауважте, що елементи масиву, опущені при означенні масиву, не перебираються під час ітерації <code>forEach</code>, але пеербираються, коли вручну елемнту було присвоєно <code>undefined</code>:</p>
+
+<pre class="brush: js">let array = ['first', 'second', , 'fourth']
+
+array.forEach(function(element) {
+  console.log(element)
+})
+// first
+// second
+// fourth
+
+if (array[2] === undefined) {
+  console.log('array[2] is undefined')  // true
+}
+
+array = ['first', 'second', undefined, 'fourth']
+
+array.forEach(function(element) {
+  console.log(element)
+})
+// first
+// second
+// undefined
+// fourth
+</pre>
+
+<p>Оскільки елементи JavaScript зберігаються як стандартні властивості об'єкта, не рекомендується проводити повторення через масиви JavaScript, використовуючи цикли {{jsxref("Statements/for...in","for...in")}} , оскільки будуть перебрані як нормальні елементи так і всі властивості масиву.</p>
+
+<h3 id="Методи_масивів">Методи масивів</h3>
+
+<p>Об'єкт {{jsxref("Array")}} має наступні методи:</p>
+
+<p>{{jsxref("Array.concat", "concat()")}} з'єднує два або більше масива і повертає новий масив.</p>
+
+<pre class="brush: js">let myArray = new Array('1', '2', '3')
+myArray = myArray.concat('a', 'b', 'c')
+// myArray тепер такий ["1", "2", "3", "a", "b", "c"]
+</pre>
+
+<p>{{jsxref("Array.join", "join(delimiter = ',')")}} об'єднує всі елементи масиву в рядок.</p>
+
+<pre class="brush: js">let myArray = new Array('Wind', 'Rain', 'Fire')
+let list = myArray.join(' - ') // list є "Wind - Rain - Fire"
+</pre>
+
+<p>{{jsxref("Array.push", "push()")}} додає один або більше елементів в кінець масиву і повертає отриману довжину <code>length</code> масиву.</p>
+
+<pre class="brush: js">let myArray = new Array('1', '2')
+myArray.push('3')  // myArray тепер ["1", "2", "3"]
+</pre>
+
+<p>{{jsxref("Array.pop", "pop()")}} видаляє останній елемент з масиву і повертає цей елемент.</p>
+
+<pre class="brush: js">let myArray = new Array('1', '2', '3')
+let last = myArray.pop()
+// myArray тепер ["1", "2"], last = "3"
+</pre>
+
+<p>{{jsxref("Array.shift", "shift()")}} видаляє перший елемент з масиву і повертає цей елемент.</p>
+
+<pre class="brush: js">let myArray = new Array('1', '2', '3')
+let first = myArray.shift()
+// myArray тепер ["2", "3"], first є "1"
+</pre>
+
+<p>{{jsxref("Array.unshift", "unshift()")}}  додає один або більше елементів до передньої частини масиву і повертає нову довжину масиву.</p>
+
+<pre class="brush: js">let myArray = new Array('1', '2', '3')
+myArray.unshift('4', '5')
+// myArray став ["4", "5", "1", "2", "3"]
+</pre>
+
+<p>{{jsxref("Array.slice", "slice(start_index, upto_index)")}} виймає частину масиву і повертає новий масив.</p>
+
+<pre class="brush: js">let myArray = new Array('a', 'b', 'c', 'd', 'e')
+myArray = myArray.slice(1, 4)  // починаючи з 1-го вимйає елементи до 4-го
+                               // повертає [ "b", "c", "d"]
+</pre>
+
+<p>{{jsxref("Array.splice", "splice(index, count_to_remove, addElement1, addElement2, ...)")}}  видаляє елементи з масиву та (необов'язково) замінює їх. Він повертає елементи, вилучені з масиву.</p>
+
+<pre class="brush: js">let myArray = new Array('1', '2', '3', '4', '5')
+myArray.splice(1, 3, 'a', 'b', 'c', 'd')
+// myArray тепер ["1", "a", "b", "c", "d", "5"]
+// Цей код стартує з першого індексу (or where the "2" was),
+// видаляє 3 елементи, а тоді вставляє всі підряд
+// на це місце.
+</pre>
+
+<p>{{jsxref("Array.reverse", "reverse()")}} транспонує масив: перший елемент масиву стає останнім, а останній стає першим. Він повертає посилання на масив.</p>
+
+<pre class="brush: js">let myArray = new Array('1', '2', '3')
+myArray.reverse()
+// транспонований масив myArray = ["3", "2", "1"]
+</pre>
+
+<p>{{jsxref("Array.sort", "sort()")}} сортує елементи масиву на місці та повертає посилання на масив.</p>
+
+<pre class="brush: js">let myArray = new Array('Wind', 'Rain', 'Fire')
+myArray.sort()
+// відсортований масив myArray = ["Fire", "Rain", "Wind"]
+</pre>
+
+<p><code>sort()</code> також може скористатися функцією зворотного виклику для визначення порівняння елементів масиву.</p>
+
+<p>Метод <code>sort</code> (та інші нижче), які приймають функцію зворотного виклику, відомі як ітераційні методи, оскільки певним чином вони перебирають весь масив. Кожен з них бере необов'язковий другий аргумент під назвою <code><var>thisObject</var></code>. Якщо  <code><var>thisObject</var></code> передається, він стає значенням ключового слова <code>this</code> всередині тіла функції зворотного виклику. Якщо це не передбачено, як і в інших випадках, коли функція викликається поза явним контекстом об'єкта, <code>this</code> стосуватиметься глобального об'єкта (<a href="/uk/docs/Web/API/Window" title="The Window interface represents a window containing a DOM document; the document property points to the DOM document loaded in that window."><code>window</code></a>) при використанні функції вказівника зворотного виклику, або <code>undefined</code> при використанні нормальної функції зворотного виклику.</p>
+
+<p>Функція зворотного виклику викликається двома аргументами, які є елементами масиву.</p>
+
+<p>Функція нижче порівнює два значення і повертає одне з трьох значень:</p>
+
+<p>Наприклад, наступне буде сортувати за останньою літерою рядка:</p>
+
+<pre class="brush: js">let sortFn = function(a, b) {
+  if (a[a.length - 1] &lt; b[b.length - 1]) return -1;
+  if (a[a.length - 1] &gt; b[b.length - 1]) return 1;
+  if (a[a.length - 1] == b[b.length - 1]) return 0;
+}
+myArray.sort(sortFn)
+// відсортований масив myArray = ["Wind","Fire","Rain"]</pre>
+
+<ul>
+ <li>якщо <code><var>a</var></code> за системою сортування менше <code><var>b</var></code> , поверне  <code>-1</code> (або будь-яке від’ємне число)</li>
+ <li>якщо <code><var>a</var></code> за системою сортування більше, ніж <code><var>b</var></code> , поверне <code>1</code> (або будь-яке додатне число)</li>
+ <li>якщо <code><var>a</var></code> і <code><var>b</var></code> вважати еквівалентними, поверне <code>0</code>.</li>
+</ul>
+
+<p>{{jsxref("Array.indexOf", "indexOf(searchElement[, fromIndex])")}} шукає масив для <code><var>searchElement</var></code> та повертає індекс першого збігу.</p>
+
+<pre class="brush: js">let a = ['a', 'b', 'a', 'b', 'a']
+console.log(a.indexOf('b'))     // пише 1
+
+// Тепер спробуйте ще раз, починаючи з останнього співпадіння
+console.log(a.indexOf('b', 2))  // пише 3
+console.log(a.indexOf('z'))     // пише -1, оскільки 'z' не було знайдено
+</pre>
+
+<p>{{jsxref("Array.lastIndexOf", "lastIndexOf(searchElement[, fromIndex])")}} працює як <code>indexOf</code>, але починає з кінця і шукає у зворотному порядку.</p>
+
+<pre class="brush: js">let a = ['a', 'b', 'c', 'd', 'a', 'b']
+console.log(a.lastIndexOf('b'))     // пише 5
+
+// Тепер спробуйте ще раз, починаючи з останнього співпадіння
+console.log(a.lastIndexOf('b', 4))  // пише 1
+console.log(a.lastIndexOf('z'))     // пише -1
+</pre>
+
+<p>{{jsxref("Array.forEach", "forEach(callback[, thisObject])")}} виконує <code><var>callback</var></code> на кожному елементі масиву і повертає <code>undefined</code>.</p>
+
+<pre class="brush: js">let a = ['a', 'b', 'c']
+a.forEach(function(element) { console.log(element) })
+// logs each item in turn
+</pre>
+
+<p>{{jsxref("Array.map", "map(callback[, thisObject])")}} повертає новий масив повернутого значення при виконанні зворотного виклику <code><var>callback</var></code> на кожному елементі масиву.</p>
+
+<pre class="brush: js">let a1 = ['a', 'b', 'c']
+let a2 = a1.map(function(item) { return item.toUpperCase() })
+console.log(a2) // logs ['A', 'B', 'C']
+</pre>
+
+<p>{{jsxref("Array.filter", "filter(callback[, thisObject])")}} повертає новий масив, що містить елементи, для яких <code><var>callback</var></code> повернув <code>true</code>.</p>
+
+<pre class="brush: js">let a1 = ['a', 10, 'b', 20, 'c', 30]
+let a2 = a1.filter(function(item) { return typeof item === 'number'; })
+console.log(a2)  // logs [10, 20, 30]
+</pre>
+
+<p>{{jsxref("Array.every", "every(callback[, thisObject])")}} повертає <code>true</code>, якщо <code><var>callback</var></code> повертає <code>true</code> для кожного елемента масиву.</p>
+
+<pre class="brush: js">function isNumber(value) {
+  return typeof value === 'number'
+}
+let a1 = [1, 2, 3]
+console.log(a1.every(isNumber))  // logs true
+let a2 = [1, '2', 3]
+console.log(a2.every(isNumber))  // logs false
+</pre>
+
+<p>{{jsxref("Array.some", "some(callback[, thisObject])")}} повертає <code>true</code> , якщо <code><var>callback</var></code> повертає <code>true </code>для принаймні одного елемента в масиві.</p>
+
+<pre class="brush: js">function isNumber(value) {
+  return typeof value === 'number'
+}
+let a1 = [1, 2, 3]
+console.log(a1.some(isNumber))  // logs true
+let a2 = [1, '2', 3]
+console.log(a2.some(isNumber))  // logs true
+let a3 = ['1', '2', '3']
+console.log(a3.some(isNumber))  // logs false
+</pre>
+
+<p>{{jsxref("Array.reduce", "reduce(callback[, initialValue])")}}  застосовує <code><var>callback</var>(<var>accumulator</var>, <var>currentValue</var>[, <var>currentIndex</var>[, <var>array</var>]])</code> для кожного значення масиву з метою зменшення списку елементів до одного значення. Функція зменшення повертає кінцеве значення, повернене функцією <code><var>callback</var></code> .</p>
+
+<p>Якщо вказано <code><var>initialValue</var></code> , тоді <code><var>callback</var></code> викликається <code><var>initialValue</var></code> як значення першого параметра, а значення першого елемента в масиві - як значення другого параметра.</p>
+
+<p>Якщо <code><var>initialValue</var></code> не вказана, першими двома параметрами <code><var>callback</var></code> будуть перший і другий елементи масиву. При кожному наступному виклику значенням першого параметра буде будь-який <code><var>callback</var></code> , повернутий при попередньому виклику, а значення другого параметра буде наступним значенням масиву.</p>
+
+<p>Якщо для <code><var>callback</var></code>  потрібен доступ до індексу оброблюваного елемента, для доступу до всього масиву вони доступні як необов'язкові параметри.</p>
+
+<pre class="brush: js">let a = [10, 20, 30]
+let total = a.reduce(function(accumulator, currentValue) { return accumulator + currentValue }, 0)
+console.log(total) // Prints 60
+</pre>
+
+<p>{{jsxref("Array.reduceRight", "reduceRight(callback[, initialValue])")}} працює подібно  <code>reduce()</code>, але починається з останнього елемента.</p>
+
+<p><code>reduce</code> та <code>reduceRight</code> - найменш очевидний із ітеративних методів масиву. Їх слід використовувати для алгоритмів, що поєднують два значення рекурсивно, щоб зменшити послідовність до одного значення.</p>
+
+<h3 id="Багатовимірні_масиви">Багатовимірні масиви</h3>
+
+<p>Масиви можуть бути вкладені, тобто масив може містити інший масив як елемент. Використовуючи цю характеристику масивів JavaScript, можна створити багатовимірні масиви.</p>
+
+<p>Наступний код створює багатовимірний масив.</p>
+
+<pre class="brush: js">let a = new Array(4)
+for (let i = 0; i &lt; 4; i++) {
+  a[i] = new Array(4)
+  for (let j = 0; j &lt; 4; j++) {
+    a[i][j] = '[' + i + ', ' + j + ']'
+  }
+}
+</pre>
+
+<p>Цей приклад створює масив із таких рядків:</p>
+
+<pre>Row 0: [0, 0] [0, 1] [0, 2] [0, 3]
+Row 1: [1, 0] [1, 1] [1, 2] [1, 3]
+Row 2: [2, 0] [2, 1] [2, 2] [2, 3]
+Row 3: [3, 0] [3, 1] [3, 2] [3, 3]
+</pre>
+
+<h3 id="Масиви_та_регулярні_вирази">Масиви та регулярні вирази</h3>
+
+<p>Коли масив є результатом збігу між регулярним виразом і рядком, масив повертає властивості та елементи, які надають інформацію про збіг. Масив - це повернене значення {{jsxref("Global_Objects/RegExp/exec","RegExp.exec()")}}, {{jsxref("Global_Objects/String/match","String.match()")}}, і {{jsxref("Global_Objects/String/split","String.split()")}}. Інформацію про використання масивів з регулярними виразами див <a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a>.</p>
+
+<h3 id="Робота_з_масиво-подібними_обєктами">Робота з масиво-подібними об'єктами</h3>
+
+<p>Деякі об`єкти JavaScript, такі як <a href="/uk/docs/Web/API/NodeList" title="NodeList objects are collections of nodes, usually returned by properties such as Node.childNodes and methods such as document.querySelectorAll()."><code>NodeList</code></a> повертають  <a href="/uk/docs/Web/API/Document/getElementsByTagName" title="returns an HTMLCollection of elements with the given tag name."><code>document.getElementsByTagName()</code></a> або об'єкт {{jsxref("Functions/arguments","arguments")}}, доступний в тілі функції, який виглядає і поводиться як масиви на поверхні, але не ділиться всіма їх методами. Наприклад, об'єкт <code>arguments</code> забезпечує атрибут {{jsxref("Global_Objects/Function/length","length")}} але не реалізує метод {{jsxref("Array.forEach", "forEach()")}}.</p>
+
+<p>Методи прототипу масиву можна викликати для інших об’єктів, подібних до масиву. наприклад:</p>
+
+<pre class="brush: js">function printArguments() {
+  Array.prototype.forEach.call(arguments, function(item) {
+    console.log(item)
+  })
+}
+</pre>
+
+<p>Методи прототипу масиву також можна використовувати і для рядків, оскільки вони забезпечують послідовний доступ до своїх символів аналогічно масивам:</p>
+
+<pre class="brush: js">Array.prototype.forEach.call('a string', function(chr) {
+  console.log(chr)
+})
+</pre>
+
+<h2 id="Типізовані_масиви">Типізовані масиви</h2>
+
+<p><a href="/uk/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a> є схожими на масив об'єктів і забезпечують механізм доступу до необроблених бінарних даних. Як ви вже знаєте, об'єкт {{jsxref("Array")}} динамічно росте і скорочується і може мати будь-яке значення JavaScript. Рушії JavaScript виконують оптимізацію, щоб ці масиви були швидкими. Однак, оскільки веб-застосунки стають все більш потужними, додаючи такі функції, як маніпулювання аудіо та відео, доступ до необроблених даних за допомогою <a href="/uk/docs/WebSockets">WebSockets</a> тощо, стало зрозуміло, що є випадки, коли корисним буде код JavaScript для швидкого та легкого маніпулювати необробленими бінарними даними в типізованих масивах.</p>
+
+<h3 id="Буфери_та_представлення_типізовані_архітектури_масивів">Буфери та представлення: типізовані архітектури масивів</h3>
+
+<p>Щоб досягти максимальної гнучкості та ефективності, JavaScript типізовані масиви розділили реалізацію на буфери (<strong>buffers</strong>) та представлення(<strong>views</strong>). Буфер (реалізований об'єктом {{jsxref ("ArrayBuffer")}}) - це об'єкт, що представляє фрагмент даних; він не має формату, про який можна говорити, і не пропонує механізму доступу до його вмісту. Для доступу до пам'яті, що міститься в буфері, вам потрібно скористатися представленням. Представлення забезпечує контекст - тобто тип даних, початкове зміщення та кількість елементів - який перетворює дані у фактично набраний масив.</p>
+
+<p><img alt="Typed arrays in an ArrayBuffer" src="https://mdn.mozillademos.org/files/8629/typed_arrays.png" style="height: 278px; width: 666px;"></p>
+
+<h3 id="ArrayBuffer">ArrayBuffer</h3>
+
+<p>{{jsxref("ArrayBuffer")}} - це тип даних, який використовується для репрезентації загального буфера даних бінарних даних фіксованої довжини. Ви не можете безпосередньо маніпулювати вмістом <code>ArrayBuffer</code>; натомість ви створюєте типізоване представлення масиву або {{jsxref("DataView")}} який представляє буфер у певному форматі, і використовують його для читання та запису вмісту буфера.</p>
+
+<h3 id="Типізоване_представлення_масиву">Типізоване представлення масиву</h3>
+
+<p>Типізовані представлення масивів мають самостійно описові назви та надають представлення для всіх звичайних числових типів, таких як  <code>Int8</code>, <code>Uint32</code>, <code>Float64</code> і так далі. Існує один спеціальний вид типізованого представлення масиву <code>Uint8ClampedArray</code>. Він фіксує значення між <code>0</code> та <code>255</code>.  Це корисно, наприклад, для обробки даних <a href="/uk/docs/Web/API/ImageData">Canvas</a>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th class="header" scope="col">Type</th>
+   <th class="header" scope="col">Value Range</th>
+   <th class="header" scope="col">Size in bytes</th>
+   <th class="header" scope="col">Description</th>
+   <th class="header" scope="col">Web IDL type</th>
+   <th class="header" scope="col">Equivalent C type</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Int8Array")}}</td>
+   <td><code>-128</code> to <code>127</code></td>
+   <td>1</td>
+   <td>8-bit two's complement signed integer</td>
+   <td><code>byte</code></td>
+   <td><code>int8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint8Array")}}</td>
+   <td><code>0</code> to <code>255</code></td>
+   <td>1</td>
+   <td>8-bit unsigned integer</td>
+   <td><code>octet</code></td>
+   <td><code>uint8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint8ClampedArray")}}</td>
+   <td><code>0</code> to <code>255</code></td>
+   <td>1</td>
+   <td>8-bit unsigned integer (clamped)</td>
+   <td><code>octet</code></td>
+   <td><code>uint8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Int16Array")}}</td>
+   <td><code>-32768</code> to <code>32767</code></td>
+   <td>2</td>
+   <td>16-bit two's complement signed integer</td>
+   <td><code>short</code></td>
+   <td><code>int16_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint16Array")}}</td>
+   <td><code>0</code> to <code>65535</code></td>
+   <td>2</td>
+   <td>16-bit unsigned integer</td>
+   <td><code>unsigned short</code></td>
+   <td><code>uint16_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Int32Array")}}</td>
+   <td><code>-2147483648</code> to <code>2147483647</code></td>
+   <td>4</td>
+   <td>32-bit two's complement signed integer</td>
+   <td><code>long</code></td>
+   <td><code>int32_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint32Array")}}</td>
+   <td><code>0</code> to <code>4294967295</code></td>
+   <td>4</td>
+   <td>32-bit unsigned integer</td>
+   <td><code>unsigned long</code></td>
+   <td><code>uint32_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Float32Array")}}</td>
+   <td><code>1.2</code><span>×</span><code>10<sup>-38</sup></code> to <code>3.4</code><span>×</span><code>10<sup>38</sup></code></td>
+   <td>4</td>
+   <td>32-bit IEEE floating point number (7 significant digits e.g., <code>1.1234567</code>)</td>
+   <td><code>unrestricted float</code></td>
+   <td><code>float</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Float64Array")}}</td>
+   <td><code>5.0</code><span>×</span><code>10<sup>-324</sup></code> to <code>1.8</code><span>×</span><code>10<sup>308</sup></code></td>
+   <td>8</td>
+   <td>64-bit IEEE floating point number (16 significant digits e.g., <code>1.123...15</code>)</td>
+   <td><code>unrestricted double</code></td>
+   <td><code>double</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("BigInt64Array")}}</td>
+   <td><code>-2<sup>63</sup></code> to <code>2<sup>63</sup>-1</code></td>
+   <td>8</td>
+   <td>64-bit two's complement signed integer</td>
+   <td><code>bigint</code></td>
+   <td><code>int64_t (signed long long)</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("BigUint64Array")}}</td>
+   <td><code>0</code> to <code>2<sup>64</sup>-1</code></td>
+   <td>8</td>
+   <td>64-bit unsigned integer</td>
+   <td><code>bigint</code></td>
+   <td><code>uint64_t (unsigned long long)</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>For more information, see <a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a> and the reference documentation for the different {{jsxref("TypedArray")}} objects.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Keyed_Collections")}}</p>
diff --git a/files/uk/web/javascript/guide/introduction/index.html b/files/uk/web/javascript/guide/introduction/index.html
new file mode 100644
index 0000000000..8f1d97d352
--- /dev/null
+++ b/files/uk/web/javascript/guide/introduction/index.html
@@ -0,0 +1,147 @@
+---
+title: Вступ
+slug: Web/JavaScript/Guide/Introduction
+tags:
+  - JavaScript
+  - Вступ
+  - Початківець
+  - Путівник
+translation_of: Web/JavaScript/Guide/Introduction
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</div>
+
+<p class="summary">Цей розділ розповідає про мову JavaScript та деякі засадничі її поняття.</p>
+
+<h2 id="Необхідний_рівень_підготовки">Необхідний рівень підготовки</h2>
+
+<p>Цей навчальний посібник передбачає, що ви маєте деякі початкові знання:</p>
+
+<ul>
+ <li>Загальне уявлення про {{Glossary("Internet", "Інтернет")}} та ({{Glossary("World_Wide_Web", "Всесвітнє павутиння")}});</li>
+ <li>Практичний досвід використання мови розмітки гіпертексту ({{Glossary("HTML")}});</li>
+ <li>Певний досвід программування. Якщо ви у цьому новачок, то спробуйте один з посібників із <a href="/uk/docs/Web/JavaScript">JavaScript</a> на головній сторінці.</li>
+</ul>
+
+<h2 id="Де_знайти_інформацію_з_JavaScript">Де знайти інформацію з JavaScript</h2>
+
+<p>Документація з JavaScript на ресурсі MDN містить таке:</p>
+
+<ul>
+ <li><a href="/uk/Learn">Вивчення Web</a> містить інформацію для початківців, а також ознайомлює з основними концепціями програмування та Інтернету;</li>
+ <li><a href="/uk/docs/Web/JavaScript/Guide">Навчальний посібник з JavaScript</a> (цей посібник) містить огляд мови JavaScript та її об'єктів;</li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference">Довідник з JavaScript</a> містить докладні довідкові матеріали з JavaScript.</li>
+</ul>
+
+<p>Якщо ви новачок у JavaScript, почніть із вивчення статей, розміщених у <a href="/uk/Learn">навчальній секції</a> (learning area) та <a href="/uk/docs/Web/JavaScript/Guide">Посібника з JavaScript</a>. Опанувавши основи, можете використовувати <a href="/uk/docs/Web/JavaScript/Reference">Довідник з JavaScript</a> для отримання більш детальної інформації про конкретні об'єкти та вирази (конструкції мови).</p>
+
+<h2 id="Що_таке_JavaScript">Що таке JavaScript?</h2>
+
+<p>JavaScript — кроссплатформна об'єктно-зорієнтована мова сценаріїв (скриптів). Рушій JavaScript підключається до об'єктів свого середовища виконання (зазвичай, веб-переглядача) та надає можливість керування ними.</p>
+
+<p>Мова JavaScript має стандартну бібліотеку об'єктів (таких як <code>Array</code>, <code>Date</code> та <code>Math</code>) і основний набір елементів мови програмування, таких як оператори, керівні структури та вирази.</p>
+
+<p>Ядро JavaScript може бути розширене для різних потреб шляхом доповнення його додатковими об'єктами. Наприклад:</p>
+
+<ul>
+ <li><em>На стороні клієнта JavaScript</em> розширює ядро ​​мови, додаючи об'єкти керування переглядачем і його об'єктною моделлю документа — Document Object Model (DOM). Наприклад, клієнтські розширення дозволяють застосункам розміщувати елементи на HTML-формі та реагувати на дії користувача, такі як клацання миші, введення даних у форму і пересування сторінками.</li>
+ <li><em>На стороні сервера JavaScript</em> розширює ядро ​​мови шляхом додавання об'єктів, що стосуються роботи JavaScript на сервері. Наприклад, серверні розширення дозволяють застосункам взаємодіяти з базою даних, забезпечувати безперервність потоку інформації від одного запущеного застосунку до іншого, або виконувати маніпуляції з файлами на сервері.</li>
+</ul>
+
+<h2 id="JavaScript_and_Java" name="JavaScript_and_Java">JavaScript та Java</h2>
+
+<p>Мови програмування JavaScript та Java у окремих рисах схожі між собою, але все одно докорінно відрізняються одна від одної. Мова JavaScript чимось нагадує Java, але, на відміну від останньої, не має чіткої типізації даних та строгого контролю за типами.</p>
+
+<p>JavaScript наслідує синтаксис більшості виразів Java, також наслідуються угоди про іменування та основні конструкції керування перебігом виконання сценарію. Це і стало причиною того, що свого часу назву мови змінили з LiveScript на JavаScript.</p>
+
+<p>На відміну від системи часу коміляції декларативно побудованих класів у Java, мова JavaScript підтримує систему часу виконання, що ґрунтується на невеликій кількості типів даних, представлених числовим типом, логічними, та рядковими значеннями. JavaScript має об'єктну модель, що спирається на прототипи, замість більш поширеної, побудованої на класах, об'єктної моделі, властивої мові Java. Модель на базі прототипів надає можливість динамічного спадкування; тобто успадковане може бути різним для різних об'єктів. Також у JavaScript реалізована підтримка функцій без будь-яких особливих декларативних вимог. Функції можуть бути властивостями об'єктів, функціями, що виконуються, та слабко типізованими методами.</p>
+
+<p>Для JavaScript властива вільніша форма мови, ніж для Java. Вас не зобов'язують оголошувати всі змінні, класи та методи. JavaScript-програміста не турбує питання, є метод відкритим (public), закритим (private), чи захищеним (protected). Для змінних, параметрів, та типів, що повертаються функціями, не вказується явним чином їх тип.</p>
+
+<p>Java — це мова програмування, яка базується на класах, розроблена для швидкого виконання та забезпечення захищеності типів. Захищеність типів означає, що не можна, наприклад, привести тип integer до типу object reference, або отримати доступ до закритої пам'яті, маніпулюючи з байткодом Java. Базована на класах об'єктна модель означає, що програма повністю складається із класів та їх методів. Успадкування класів у Java та строга типізація взагалі вимагають існування тісно пов'язаних між собою ієрархій об'єктів. Ці вимоги роблять програмування на Java більш складним, ніж JavaScript-програмування.</p>
+
+<p>На противагу цьому, JavaScript, за своїм духом, близька до невеликих мов із динамічною типізацією, таких, як HyperTalk та dBASE. Ці скриптові мови надають інструменти програмування для більш широкого загалу користувачів, завдяки простоті синтаксису, вбудованим функціональним можливостям зі спеціалізації, та мінімальним вимогам до створення об'єктів.</p>
+
+<table class="standard-table">
+ <caption>JavaScript у порівнянні з Java</caption>
+ <thead>
+  <tr>
+   <th scope="col">Мова JavaScript</th>
+   <th scope="col">Мова Java</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>Об'єктно орієнтована. Не має відмінностей між типами об'єктів. Спадкування здійснюється через механізм прототипів, а властивості та методи можуть бути динамічно додані до будь-якого об'єкту.</p>
+   </td>
+   <td>
+    <p>Базується на класах. Об'єкти поділяються на класи та екземпляри. Спадкування реалізоване через ієрархію класів. До класів та екземплярів не можна динамічно додавати властивості та методи.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Для змінних не декларуються типи даних (динамічна типізація).</td>
+   <td>Для змінних необхідне декларування типів даних (статична типізація)</td>
+  </tr>
+  <tr>
+   <td>Не може автоматично вести запис до жорсткого диску.</td>
+   <td>Може автоматично вести запис до жорсткого диску.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Щоб отримати більше інформації щодо відмінностей між JavaScript та Java, відвідайте цей розділ: <a href="/uk/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Докладно про об'єктну модель</a>.</p>
+
+<h2 id="JavaScript_and_the_ECMAScript_Specification" name="JavaScript_and_the_ECMAScript_Specification">JavaScript та специфікація ECMAScript</h2>
+
+<p>JavaScript стандартизований Європейською асоціаіцєю з стандартизації інформаційних та комунікаційних систем — <a class="external" href="http://www.ecma-international.org/">Ecma International</a> (спершу складноскорот ECMA позначав European Computer Manufacturers Association). Ця стандартизована версія JavaScript, що має назву ECMAScript, однаково працює у всіх застосунках, що підтримують стандарт. Різні компанії можуть використовувати цей відкритий стандарт для розробки своїх реалізацій JavaScript. ECMAScript стандарт задокументований у специфікації ECMA-262. Див. <a href="/uk/docs/Web/JavaScript/New_in_JavaScript">Нове у JavaScript</a>, щоб довідатись більше про різні версії JavaScript та про редакції специфікації ECMAScript.</p>
+
+<p>Стандарт ECMA-262 також затверджений <a class="external" href="http://www.iso.ch/">ISO</a> (International Organization for Standardization), як ISO-16262. Ви можете знайти специфікацію на сайті <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">Ecma International website</a>. Специфікація ECMAScript не описує об'єктну модель документа Document Object Model (DOM), яка стандартизована <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a>. DOM визначає спосіб, у який об'єкти HTML-документа стають доступними із вашого скрипта. Для отримання більш повного уявлення про технології, що використовуються при програмуванні на JavaScript, зверніться до статті <a href="/uk/docs/Web/JavaScript/JavaScript_technologies_overview">Огляд технологій JavaScript</a>.</p>
+
+<h3 id="JavaScript_Documentation_versus_the_ECMAScript_Specification" name="JavaScript_Documentation_versus_the_ECMAScript_Specification">Документація з JavaScript та специфікація ECMAScript</h3>
+
+<p>Специфікація ECMAScript є низкою вимог до реалізації ECMAScript. Цих вимог слід дотримуватись, щоб запровадити відповідні стандартам можливості мови у реалізації ECMAScript, або, щоб створити рушій (наприклад, SpiderMonkey у Firefox або v8 у Chrome).</p>
+
+<p>Документ ECMAScript не призначений для того, щоб надавати допомогу у програмуванні скриптів. Для отримання інформації про написання скриптів слід використовувати документацію JavaScript.</p>
+
+<p>У специфікації ECMAScript використовується термінологія і синтаксис, з якими JavaScript-програмісти можуть бути і не знайомі. Не зважаючи на те, що опис мови у ECMAScript може бути дещо іншим, сама мова залишається такою самою. JavaScript підтримує весь функціонал, закладений у специфікації ECMAScript.</p>
+
+<p>Документація JavaScript описує аспекти мови, які використовує програміст JavaScript.</p>
+
+<h2 id="Початок_роботи_із_JavaScript">Початок роботи із JavaScript</h2>
+
+<p>Розпочати працювати з JavaScript дуже просто: все, що вам потрібно — сучасний переглядач. У даному посібнику розглядаються деякі можливості JavaScript, які, на даний час, реалізовані лише в останніх версіях Firefox, тому рекомендується використовувати саму останню версію Firefox.</p>
+
+<p>До Firefox вбудовано два інструменти, що роблять його використання дуже зручним для експериментів із JavaScript: Web Console та Scratchpad.</p>
+
+<h3 id="Веб-консоль_—_Web_Console">Веб-консоль — Web Console</h3>
+
+<p><a href="/uk/docs/Tools/Web_Console">Web Console</a> надає інформацію про поточну завантажену веб-сторінку, а також містить вбудовану <a href="/uk/docs/Tools/Web_Console#The_command_line_interpreter">командну стрічку (command line)</a>, у якій ви маєте змогу виконувати інструкції JavaScript у поточній сторінці.</p>
+
+<p>Щоб відкрити Web Console (<kbd>Ctrl + Shift + K</kbd>), оберіть пункт "Веб-консоль" із меню "Розробник" у меню Firefox. Вона з'явиться у нижній частині вікна переглядача. Внизу консолі, по всій її довжині, розміщено командну стрічку, до якої ви можете вводити команди та вирази JavaScript. Результати їх виконання одразу з'являться у панелі, що знаходиться вище:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7363/web-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Чернетка_—_Scratchpad">Чернетка — Scratchpad</h3>
+
+<p>Веб-консоль чудово підходить для виконання окремих рядків JavaScript, і, хоча, ви й можете вводити й виконувати рядки по одному, це не дуже зручно, і ви не можете зберігати зразки свого коду з використанням Веб-консолі. Таким чином, для виконання більш складних прикладів, є кращий інструмент — <a href="/uk/docs/Tools/Scratchpad">Чернетка (Scratchpad)</a>.</p>
+
+<p>Щоб відкрити Scratchpad (<kbd>Shift + F4</kbd>), оберіть "Чернетка" ("Scracthpad") у меню "Розробник" із меню Firefox. Він відкривається у окремому вікні і є редактором, який можна використовувати для запису і виконання JavaScript у переглядачі. Ви також можете зберегти скрипти до диску і завантажувати їх з диска.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7365/scratchpad.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Hello_World">Hello World</h3>
+
+<p>Щоб розпочати роботу з JavaScript, відкрийте Scratchpad та напишіть свою першу програму "Hello world":</p>
+
+<pre class="brush: js">function greetMe(yourName) {
+  alert("Hello " + yourName);
+}
+
+greetMe("World");
+</pre>
+
+<p>Натисніть <kbd>Ctrl + R</kbd>, щоб побачити, як цей код буде виконано у переглядачі!</p>
+
+<p>На наступних сторінках цього посібника буде розглянуто синтаксис та можливості мови JavaScript, що дозволить вам створювати більш складні застосунки.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</p>
diff --git a/files/uk/web/javascript/guide/iterators_and_generators/index.html b/files/uk/web/javascript/guide/iterators_and_generators/index.html
new file mode 100644
index 0000000000..144a8c9ee0
--- /dev/null
+++ b/files/uk/web/javascript/guide/iterators_and_generators/index.html
@@ -0,0 +1,214 @@
+---
+title: Ітератори та генератори
+slug: Web/JavaScript/Guide/Iterators_and_Generators
+tags:
+  - JavaScript
+  - Посібник
+translation_of: Web/JavaScript/Guide/Iterators_and_Generators
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Using_promises", "Web/JavaScript/Guide/Meta_programming")}}</div>
+
+<p class="summary">Обробка кожного елемента колекції є дуже розповсюдженою операцією. JavaScript надає численні способи перебору колекції, від простих циклів {{jsxref("Statements/for","for")}} до {{jsxref("Global_Objects/Array/map","map()")}} та {{jsxref("Global_Objects/Array/filter","filter()")}}. Ітератори та генератори додають концепцію перебору безпосередньо у базову мову та надають механізм налаштування поведінки циклів {{jsxref("Statements/for...of","for...of")}}.</p>
+
+<p>Більш детально дивіться у статтях:</p>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору">Протоколи перебору</a></li>
+ <li>{{jsxref("Statements/for...of","for...of")}}</li>
+ <li>{{jsxref("Statements/function*","function*")}} та {{jsxref("Generator")}}</li>
+ <li>{{jsxref("Operators/yield","yield")}} та {{jsxref("Operators/yield*","yield*")}}</li>
+</ul>
+
+<h2 id="Ітератори">Ітератори</h2>
+
+<p>У JavaScript <strong>ітератор</strong> - це об'єкт, який визначає послідовність та, за бажанням, значення, що повертається по її завершенні. Якщо конкретніше, то ітератор - це будь-який об'єкт, що реалізує <a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору#Протокол_ітератора">протокол ітератора</a>, маючи метод <code>next()</code>, який повертає об'єкт з двома властивостями: <code>value</code>, наступне значення послідовності; та <code>done</code>, що дорівнює <code>true</code>, якщо останнє значення послідовності вже було отримане. Якщо поруч з <code>done</code> присутнє значення <code>value</code>, воно є поверненим значенням ітератора.</p>
+
+<p>Як тільки ітератор був створений, його можна явно обходити, викликаючи метод <code>next()</code>. Перебір ітератора називають споживанням ітератора, бо, загалом, це можна зробити лише один раз. Після того, як завершувальне значення було видане, додаткові виклики <code>next()</code> мають просто вертати <code>{done: true}</code>.</p>
+
+<p>Найтиповішим ітератором у Javascript є ітератор масиву, який просто повертає по черзі кожне значення відповідного масиву. Хоча легко уявити, що усі ітератори можна виразити у вигляді масивів, це не так. Масиви мають бути розташовані у пам'яті цілком, але ітератори споживаються лише за необхідності і, таким чином, можуть виражати послідовності необмеженого розміру, такі як діапазон цілих чисел між 0 та Infinity (нескінченністю).</p>
+
+<p>Ось приклад, який може робити саме це. Він дозволяє створювати ітератор простого діапазону, який визначає послідовність цілих чисел від <code>start</code> (включно) до <code>end</code> (не включно) з проміжком <code>step</code>. Його кінцеве повернене значення є розміром створеної послідовності, що відслідковується змінною iterationCount.</p>
+
+<pre class="brush: js">function makeRangeIterator(start = 0, end = Infinity, step = 1) {
+    let nextIndex = start;
+    let iterationCount = 0;
+
+    const rangeIterator = {
+       next: function() {
+           let result;
+           if (nextIndex &lt; end) {
+               result = { value: nextIndex, done: false }
+               nextIndex += step;
+               iterationCount++;
+               return result;
+           }
+           return { value: iterationCount, done: true }
+       }
+    };
+    return rangeIterator;
+}</pre>
+
+<p>Далі використання ітератора виглядає наступним чином:</p>
+
+<pre class="brush: js">let it = makeRangeIterator(1, 10, 2);
+
+let result = it.next();
+while (!result.done) {
+ console.log(result.value); // 1 3 5 7 9
+ result = it.next();
+}
+
+console.log("Перебрано послідовність розміром: ", result.value); // [повертає 5 чисел з інтервалу від 0 до 10]
+
+</pre>
+
+<div class="note">
+<p>Неможливо знати, чи певний об'єкт є ітератором. Якщо вам необхідно це зробити, використовуйте <a href="#Iterables">ітерабельні об'єкти</a>.</p>
+</div>
+
+<h2 id="Функції-генератори">Функції-генератори</h2>
+
+<p>Хоча користувацькі ітератори є потужним інструментом, їхнє створення вимагає обережного програмування через необхідність явно підтримувати їхній внутрішній стан. Функції-генератори надають потужну альтернативу: вони дозволяють визначати алгоритм перебору написанням єдиної функції, виконання якої не є безперервним. Функції-генератори пишуться за допомогою синтаксису {{jsxref("Statements/function*","function*")}}. При першому виклику функції-генератори не виконують свій код, замість цього вони повертають ітератор під назвою Generator. Коли значення споживається викликом методу об'єкта Generator <strong>next</strong>, функція-генератор виконується до тих пір, поки не зустріне ключове слово <strong>yield</strong>.</p>
+
+<p>Функція може викликатись будь-яку бажану кількість раз та кожен раз вертатиме новий об'єкт Generator, однак, кожний об'єкт Generator може перебиратись лише один раз.<br>
+ <br>
+ Тепер ми можемо адаптувати наведений вище приклад. Поведінка коду ідентична, але ця реалізація набагато простіша у написанні та читанні.</p>
+
+<pre class="brush: js">function* makeRangeIterator(start = 0, end = 100, step = 1) {
+    let iterationCount = 0;
+    for (let i = start; i &lt; end; i += step) {
+        iterationCount++;
+        yield i;
+    }
+    return iterationCount;
+}</pre>
+
+<h2 id="Ітерабельні_обєкти">Ітерабельні об'єкти</h2>
+
+<p>Об'єкт є <strong>ітерабельним</strong>, якщо він визначає свою ітераційну поведінку, наприклад, через які значення проходитиме цикл {{jsxref("Statements/for...of", "for...of")}}. Деякі вбудовані типи, такі як {{jsxref("Array")}} або {{jsxref("Map")}}, мають визначену за замовчуванням ітераційну поведінку, в той час, як інші типи (такі як {{jsxref("Object")}}) її не мають.</p>
+
+<p>Для того, щоб бути <strong>ітерабельним</strong>, об'єкт повинен реалізувати метод <strong>@@iterator</strong>, тобто, цей об'єкт (або один з об'єктів у його <a href="/uk/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">ланцюжку прототипів</a>) повинен мати властивість з ключем {{jsxref("Symbol.iterator")}}.<br>
+ <br>
+ Може бути можливо перебрати ітерабельний об'єкт більше одного разу, або лише один раз. Який варіант обирати, вирішує програміст. Ітерабельні об'єкти, які можна перебрати лише один раз (наприклад, об'єкти Generator) традиційно повертають <strong>this</strong> зі свого методу <strong>@@iterator</strong>, тоді як ті, які можна перебирати багаторазово, повинні повертати новий ітератор на кожний виклик <strong>@@iterator</strong>.</p>
+
+<pre class="brush: js">function* makeIterator() {
+    yield 1;
+    yield 2;
+}
+
+const it = makeIterator();
+
+for(const itItem of it) {
+    console.log(itItem);
+}
+
+console.log(it[Symbol.iterator]() === it) // true;
+
+// Це приклад показує, що генератор(ітератор) є ітерабельним об'єктом, метод якого @@iterator повертає сам об'єкт (it),
+// і з цієї причини цей об'єкт (it) можна перебирати лише один раз
+
+
+// Якщо ми змінимо метод @@iterator об'єкта "it" на функцію/генератор, що вертає новий ітератор/генератор, цей об'єкт (it)
+// можна буде перебирати багато разів
+
+it[Symbol.iterator] = function* () {
+  yield 2;
+  yield 1;
+};
+</pre>
+
+<h3 id="Створені_користувачем_ітерабельні_обєкти">Створені користувачем ітерабельні об'єкти</h3>
+
+<p>Ми можемо створювати власні ітерабельні об'єкти наступним чином:</p>
+
+<pre class="brush: js">var myIterable = {
+    *[Symbol.iterator]() {
+        yield 1;
+        yield 2;
+        yield 3;
+    }
+}
+
+for (let value of myIterable) {
+    console.log(value);
+}
+// 1
+// 2
+// 3
+
+або
+
+[...myIterable]; // [1, 2, 3]
+</pre>
+
+<h3 id="Вбудовані_ітерабельні_обєкти">Вбудовані ітерабельні об'єкти</h3>
+
+<p>{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} та {{jsxref("Set")}} усі є вбудованими ітерабельними об'єктами, тому що всі їхні прототипи мають метод {{jsxref("Symbol.iterator")}}.</p>
+
+<h3 id="Синтаксис_що_очікує_на_ітерабельний_обєкт">Синтаксис, що очікує на ітерабельний об'єкт</h3>
+
+<p>Деякі оператори та вирази очікують на ітерабельні об'єкти, наприклад, цикли {{jsxref("Statements/for...of","for-of")}}, {{jsxref("Operators/yield*","yield*")}}.</p>
+
+<pre class="brush: js">for (let value of ['а', 'б', 'в']) {
+    console.log(value);
+}
+// "а"
+// "б"
+// "в"
+
+[...'абв']; // ["а", "б", "в"]
+
+function* gen() {
+  yield* ['а', 'б', 'в'];
+}
+
+gen().next(); // { value: "а", done: false }
+
+[a, b, c] = new Set(['а', 'б', 'в']);
+a; // "а"
+
+</pre>
+
+<h2 id="Просунуті_генератори">Просунуті генератори</h2>
+
+<p>Генератори обчислюють значення, які видають, на вимогу, це дозволяє їм ефективно відображати послідовності, затратні для обчислення, чи навіть нескінченні послідовності, як було продемонстровано вище.</p>
+
+<p>Метод {{jsxref("Global_Objects/Generator/next","next()")}} також приймає значення, які можуть використовуватись для модифікації внутрішнього стану генератора. Значення, передане у метод <code>next()</code> буде отримане оператором <code>yield</code>. Зауважте, що значення, передане у перший метод <code>next()</code>, завжди ігнорується.</p>
+
+<p>Ось генератор Фібоначчі, який використовує <code>next(x)</code>, щоб перезапустити послідовність:</p>
+
+<pre class="brush: js">function* fibonacci() {
+  var fn1 = 0;
+  var fn2 = 1;
+  while (true) {
+    var current = fn1;
+    fn1 = fn2;
+    fn2 = current + fn1;
+    var reset = yield current;
+    if (reset) {
+        fn1 = 0;
+        fn2 = 1;
+    }
+  }
+}
+
+var sequence = fibonacci();
+console.log(sequence.next().value);     // 0
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 2
+console.log(sequence.next().value);     // 3
+console.log(sequence.next().value);     // 5
+console.log(sequence.next().value);     // 8
+console.log(sequence.next(true).value); // 0
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 2</pre>
+
+<p>Ви можете змусити генератор викинути виняток, викликавши його метод {{jsxref("Global_Objects/Generator/throw","throw()")}} та передавши значення винятку, яке він має викинути. Цей виняток буде викинутий з поточного призупиненого контексту генератора, так, якби поточний оператор зупинки <code>yield</code> був оператором <code>throw <em>значення</em></code>.</p>
+
+<p>Якщо виняток не перехоплений всередині генератора, він поширюватиметься до виклику <code>throw()</code>, і наступні виклики методу <code>next()</code> отримають властивість <code>done</code>, що дорівнює <code>true</code>.</p>
+
+<p>Генератори мають метод {{jsxref("Global_Objects/Generator/return","return(value)")}}, який повертає надане значення та завершує сам генератор.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Using_promises", "Web/JavaScript/Guide/Meta_programming")}}</p>
diff --git a/files/uk/web/javascript/guide/loops_and_iteration/index.html b/files/uk/web/javascript/guide/loops_and_iteration/index.html
new file mode 100644
index 0000000000..1b76102c0d
--- /dev/null
+++ b/files/uk/web/javascript/guide/loops_and_iteration/index.html
@@ -0,0 +1,355 @@
+---
+title: Цикли та ітерації
+slug: Web/JavaScript/Guide/Loops_and_iteration
+tags:
+  - JavaScript
+  - Інструкція
+  - Синтаксис
+  - Цикл
+translation_of: Web/JavaScript/Guide/Loops_and_iteration
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div>
+
+<p class="summary">Цикли пропонують швидкий та легкий спосіб робити щось неодноразово. Ця глава <a href="/en-US/docs/Web/JavaScript/Guide">посібника JavaScript </a> представляє різні ітераційні оператори, доступні в JavaScript.</p>
+
+<p>Ви можете уявити цикли комп'ютерною версією гри, де ви кажете комусь зробити X кроків в одному напрямку, а потім Y кроків в іншому; наприклад, ідею піти 5 кроків на схід можна задати циклом:</p>
+
+<pre class="brush: js notranslate">var step;
+for (step = 0; step &lt; 5; step++) {
+  // Іти 5 разів від значення 0 до 4.
+  console.log('Іти на схід 1 крок');
+}
+</pre>
+
+<p>Є багато різних видів циклів, але вони всі роблять істотно одне і те ж саме: вони повторюють дію певну кількість разів (можливо, 0 разів!) . Механізми різних циклів пропонують різні способи задати початкову і кінцеву точку циклу. Є різні ситуації, які легко вирішуються тим чи іншим циклом.</p>
+
+<p>Оператори циклів у JavaScript:</p>
+
+<ul>
+ <li>{{anch("for statement")}}</li>
+ <li>{{anch("do...while statement")}}</li>
+ <li>{{anch("while statement")}}</li>
+ <li>{{anch("labeled statement")}}</li>
+ <li>{{anch("break statement")}}</li>
+ <li>{{anch("continue statement")}}</li>
+ <li>{{anch("for...in statement")}}</li>
+ <li>{{anch("for...of statement")}}</li>
+</ul>
+
+<h2 id="Оператор_for">Оператор <code>for</code></h2>
+
+<p>Цикл {{jsxref("statements/for","for")}} повторюється, доки певний вираз не стане false. Цикл <code>for</code> у JavaScript подібний до циклу  <code>for</code> у мовах Java і C. Має такий вигляд:</p>
+
+<pre class="syntaxbox notranslate">for ([початковийВираз(<code>initialExpression)</code>]; [умова(<code>condition)</code>]; [приріст(<code>incrementExpression)</code>])
+  інструкція(<code>statement)</code>
+</pre>
+
+<p>Коли цикл <code>for</code> виконується, відбувається наступне:</p>
+
+<ol>
+ <li>Виконується вираз <code>initialExpression</code>, якщо він заданий. Цей вираз зазвичай ініціалізує один або кілька лічильників, але синтаксис допускає вирази будь-якого рівня складності. Цей вираз також дозволяє оголошувати змінні.</li>
+ <li>Оцінюється вираз <code>condition</code>. Якщо вираз приймає значення  true,  ітерація циклу виконується, якщо false - цикл завершується.</li>
+ <li><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Виконується </span></font>statement</code>. Щоб виконати кілька інструкцій, використовуйте (<code>{ ... }</code>), щоб згрупувати їх.</li>
+ <li>Потім виконується  вираз <code>incrementExpression</code>.</li>
+ <li>Далі все повертається до кроку 2.</li>
+</ol>
+
+<h3 id="Приклад"><strong>Приклад</strong></h3>
+
+<p>Наступна функція містить вираз <code>for</code>, що рахує цифри вибраних варіантів в прокручуваному списку (елемента  {{HTMLElement("select")}} , що дозволяє мультивибір). Вираз <code>for</code>  оголошує змінну <code>i</code> і задає їй значення 0. Перевіряється чи <code>i</code> менша чим кількість виборів в елементі <code>&lt;select&gt;</code> , виконує наступний вираз <code>if</code>та збільшує <code>i</code> на одиницю після кожного кроку цикла.</p>
+
+<pre class="brush: html notranslate">&lt;form name="selectForm"&gt;
+  &lt;p&gt;
+    &lt;label for="musicTypes"&gt;Виберіть деякі музичні жанри, а потім натисніть на кнопку нижче:&lt;/label&gt;
+    &lt;select id="musicTypes" name="musicTypes" multiple="multiple"&gt;
+      &lt;option selected="selected"&gt;R&amp;B&lt;/option&gt;
+      &lt;option&gt;Jazz&lt;/option&gt;
+      &lt;option&gt;Blues&lt;/option&gt;
+      &lt;option&gt;New Age&lt;/option&gt;
+      &lt;option&gt;Classical&lt;/option&gt;
+      &lt;option&gt;Opera&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/p&gt;
+  &lt;p&gt;&lt;input id="btn" type="button" value="Скільки ви вибрали?" /&gt;&lt;/p&gt;
+&lt;/form&gt;
+
+&lt;script&gt;
+function howMany(selectObject) {
+  var numberSelected = 0;
+  for (var i = 0; i &lt; selectObject.options.length; i++) {
+    if (selectObject.options[i].selected) {
+      numberSelected++;
+    }
+  }
+  return numberSelected;
+}
+
+var btn = document.getElementById('btn');
+btn.addEventListener('click', function() {
+  alert('Кількість вибраних варіагьів: ' + howMany(document.selectForm.musicTypes));
+});
+&lt;/script&gt;
+
+</pre>
+
+<h2 id="Оператор_do...while">Оператор <code>do...while</code></h2>
+
+<p>Оператор {{jsxref("statements/do...while", "do...while")}} повторює дії поки певна умова не прийме значення false. Оператор <code>do...while</code> виглядатиме наступним чином:</p>
+
+<pre class="syntaxbox notranslate">do
+  statement
+while (condition);
+</pre>
+
+<p><code>statement</code> завжди виконується принаймні один раз перед тим як умова буде перевірена (і потім знову поки умова не прийме false). Щоб виконати кілька виразів необхідно використати (<code>{ ... }</code>)  щоб згрупувати ці вирази.  Якщо <code>condition</code> приймає значення true, тіло цикла виконується повторно. В кінці всіх виконань вираз перевіряється. Коли вираз приймає false, ітерації цикла <code>do...while</code> зупиняються.</p>
+
+<h3 id="Приклади"><strong>Приклади</strong></h3>
+
+<p>В наступному прикладі цикл <code>do</code> ітерується принаймні один раз і повторюється доки i менша чим 5.</p>
+
+<pre class="brush: js notranslate">var i = 0;
+do {
+  i += 1;
+  console.log(i);
+} while (i &lt; 5);</pre>
+
+<h2 id="Оператор_while">Оператор <code>while</code></h2>
+
+<p>Вираз {{jsxref("statements/while","while")}} виконується доти доки спеціальна умова приймає значення true. Вираз <code>while</code> виглядає наступним чином:</p>
+
+<pre class="syntaxbox notranslate">while (condition)
+  statement
+</pre>
+
+<p>Якщо умова стає false, <code>statement</code> перестає виконуватись і відбувається вихід із цикла.</p>
+
+<p>Вираз перевіряється перед тим як виконається тіло цикла. Якщо вираз повертає true, <code>statement</code> виконується і умова тестується заново. Якщо вираз повертає false, виконання зупиняється і відбувається вихід з циклу <code>while</code>.</p>
+
+<p>Щоб виконати кілька виразів в циклі використовуйте ({ ... }), щоб згрупувати їх.</p>
+
+<h3 id="Приклад_1"><strong>Приклад 1</strong></h3>
+
+<p>Наступний цикл <code>while</code> виконує цикл доти доки <code>n</code> менше трьох:</p>
+
+<pre class="brush: js notranslate">var n = 0;
+var x = 0;
+while (n &lt; 3) {
+  n++;
+  x += n;
+}
+</pre>
+
+<p>З кожною ітерацією, цикл збільшує <code>n,</code> та додає це до значення <code>x</code>. Тому, <code>x</code> і <code>n</code> приймають наступні значення:</p>
+
+<ul>
+ <li>Після першого виконання: <code>n</code> = 1 і<code>x</code> = 1</li>
+ <li>Після другого виконання: <code>n</code> = 2 і <code>x</code> = 3</li>
+ <li>Після третього виконання: <code>n</code> = 3 і <code>x</code> = 6</li>
+</ul>
+
+<p>Після третьої ітерації умова <code>n &lt; 3</code> більше не <code>true</code>, тому цикл припиняється.</p>
+
+<h3 id="Приклад_2"><strong>Приклад 2</strong></h3>
+
+<p>Уникайте безкінечних циклів. Переконайтесь, що вираз в циклі прийме значення false; інакше вихід з цикла ніколи не відбудеться. Вираз в наступному циклі <code>while</code> виконуватиметься постійно тому, що умова ніколи не стане <code>false</code>:</p>
+
+<pre class="brush: js notranslate">while (true) {
+  console.log('Hello, world!');
+}</pre>
+
+<h2 id="Оператор_labeled">Оператор <code>labeled</code></h2>
+
+<p> {{jsxref("statements/label","label")}} забезпечує вираз з ідентифікатором, що дозволяє вам зсилатися до цього місця з будь-якого місця вашої програми. Наприклад, ви можете використати <code>label</code>, щоб позначити цикл, а потім скористатися операторами <code>break</code> або <code>continue,</code> щоб вказати, чи повинна програма переривати цей цикл або продовжувати його виконання.</p>
+
+<p>Синтаксис оператора виглядає наступним чином:</p>
+
+<pre class="syntaxbox notranslate">label :
+   statement
+</pre>
+
+<p>Значення <code><em>label</em></code> може бути будь-яким ідентифікатором JavaScript, що не є зарезервованим словом. <code><em>statement</em></code>, який ви ідентифікуєте може бути будь-яким виразом.</p>
+
+<h3 id="Приклад_3"><strong>Приклад</strong></h3>
+
+<p>В цьому прикладі позначка <code>markLoop</code> ідентифікує цикл <code>while</code>.</p>
+
+<pre class="brush: js notranslate">markLoop:
+while (theMark == true) {
+   doSomething();
+}</pre>
+
+<h2 id="Оператор_break">Оператор <code>break</code></h2>
+
+<p>Використовуйте оператор {{jsxref("statements/break","break")}} для виходу з циклу, <code>switch</code>, чи в поєднанні з оператором <code>label</code>.</p>
+
+<ul>
+ <li>Коли ви використовуєте <code>break</code> без <code>label</code>, це завершує поточний <code>while</code>, <code>do-while</code>, <code>for</code>, або <code>switch</code> і відразу переходить до наступного оператора.</li>
+ <li>Коли ви використовуєте <code>break</code> із <code>label</code>, це завершує конкретний вираз позначений за допомогою цього label.</li>
+</ul>
+
+<p>Синтаксис оператора <code>break</code> виглядає наступним чином:</p>
+
+<pre class="syntaxbox notranslate">break [<em>label</em>];
+</pre>
+
+<p>Перша форма синтаксису завершує перший батьківський цикл, або оператор <code>switch</code>; Друга форма завершує певний оператор позначений за допомогоюю <code>label</code>.</p>
+
+<h3 id="Приклад_1_2"><strong>Приклад 1</strong></h3>
+
+<p>Наступний приклад проходиться по елементам масива доки не знайде індекс елемента значення якого співпадає із значенням <code>theValue</code>:</p>
+
+<pre class="brush: js notranslate">for (var i = 0; i &lt; a.length; i++) {
+  if (a[i] == theValue) {
+    break;
+  }
+}</pre>
+
+<h3 id="Приклад_2_Переривання_позначки"><strong>Приклад 2: </strong>Переривання позначки</h3>
+
+<pre class="brush: js notranslate">var x = 0;
+var z = 0;
+labelCancelLoops: while (true) {
+  console.log('Зовнішні цикли: ' + x);
+  x += 1;
+  z = 1;
+  while (true) {
+    console.log('Внутрішні цикли: ' + z);
+    z += 1;
+    if (z === 10 &amp;&amp; x === 10) {
+      break labelCancelLoops;
+    } else if (z === 10) {
+      break;
+    }
+  }
+}
+</pre>
+
+<h2 id="Оператор_continue">Оператор <code>continue</code></h2>
+
+<p>Оператор {{jsxref("statements/continue","continue")}} може використовуватись для перезапуску <code>while</code>, <code>do-while</code>, <code>for</code>, чи виразу <code>label</code>.</p>
+
+<ul>
+ <li>Коли ви використовуєте оператор <code>continue</code> без label,  це завершує дану ітерацію цикла і переходить на наступну. На відміну від оператора <code>break</code>, <code>continue</code> не завершує виконання всього цикла. В циклі <code>while</code>, Воно повертається до умови, у циклі <code>for</code> воно переходить до <code>increment-expression</code>.</li>
+ <li>Коли ви використовуєте <code>continue</code> з label, це переходить до виразу цикла позначеного за допомогою label.</li>
+</ul>
+
+<p>Синтаксис оператора <code>continue</code> виглядає наступним чином:</p>
+
+<pre class="syntaxbox notranslate">continue [<em>label</em>];
+</pre>
+
+<h3 id="Приклад_1_3"><strong>Приклад 1</strong></h3>
+
+<p>Наступний приклад показує цикл <code>while</code> з оператором <code>continue,</code> що виконується коли значення <code>i</code> дорівнює трьом. Тоді як, <code>n</code> приймає значення 1, 3, 7, 12.</p>
+
+<pre class="brush: js notranslate">var i = 0;
+var n = 0;
+while (i &lt; 5) {
+  i++;
+  if (i == 3) {
+    continue;
+  }
+  n += i;
+  console.log(n);
+}
+//1,3,7,12
+
+
+var i = 0;
+var n = 0;
+while (i &lt; 5) {
+  i++;
+  if (i == 3) {
+     // continue;
+  }
+  n += i;
+  console.log(n);
+}
+// 1,3,6,10,15
+</pre>
+
+<h3 id="Приклад_2_2"><strong>Приклад 2</strong></h3>
+
+<p>Вираз позначений <code>checkiandj</code> містить вираз позначений <code>checkj</code>. Якщо <code>continue</code> зустрічається програма зупинить ітерацію <code>checkj</code> і почнеться з наступної ітерації. Кожен раз як <code>continue</code> зустрічається, <code>checkj</code> переітеровується поки вираз не поверне <code>false</code>. Коли <code>false</code> повертається, решта виразу <code>checkiandj</code> виконується і<code>checkiandj</code> переітеровується доки умова не поверне <code>false</code>. Коли<code>false</code> повертається програма продовжує  вираз слідуючого<code>checkiandj</code>.</p>
+
+<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Якщо </span></font>continue</code> має label <em><code>checkiandj</code></em>, програма буде продовжуватись зверху вираза<em><code>checkiandj.</code></em></p>
+
+<pre class="brush: js notranslate">var i = 0;
+var j = 10;
+checkiandj:
+  while (i &lt; 4) {
+    console.log(i);
+    i += 1;
+    checkj:
+      while (j &gt; 4) {
+        console.log(j);
+        j -= 1;
+        if ((j % 2) == 0) {
+          continue checkj;
+        }
+        console.log(j + ' is odd.');
+      }
+      console.log('i = ' + i);
+      console.log('j = ' + j);
+  }</pre>
+
+<h2 id="Оператор_for...in">Оператор <code>for...in</code></h2>
+
+<p>Оператор {{jsxref("statements/for...in","for...in")}} ітерує певну змінну по усіх перечислювальних властивостях об'єкта. Для кожної окремої властивості JavaScript виконує певний вираз. Оператор<code>for...in</code> виглядає наступним чином:</p>
+
+<pre class="syntaxbox notranslate">for (variable in object) {
+  statements
+}
+</pre>
+
+<h3 id="Приклад_4"><strong>Приклад</strong></h3>
+
+<p>Наступна функція приймає як аргумент об'єкт і ім'я об'єкта. Потім вона ітерує всі властивості і повертає рядок, де перераховуються всі імена властивостей та їх значення.</p>
+
+<pre class="brush: js notranslate">function dump_props(obj, obj_name) {
+  var result = '';
+  for (var i in obj) {
+    result += obj_name + '.' + i + ' = ' + obj[i] + '&lt;br&gt;';
+  }
+  result += '&lt;hr&gt;';
+  return result;
+}
+</pre>
+
+<p>Для об'єкту <code>car</code> з властивостями <code>make</code> і <code>model</code>, <code>result</code> результат буде:</p>
+
+<pre class="brush: js notranslate">car.make = Ford
+car.model = Mustang
+</pre>
+
+<h3 id="Масиви"><strong>Масиви</strong></h3>
+
+<p>Також це може підходити для ітерування елементів {{jsxref("Array")}}, Оператор <strong>for...in</strong> буде повертати ім'я визначених користувачем властивостей і додаткових номерних індексів. Таким чином, краще використовувати традиційний цикл {{jsxref("statements/for","for")}} з номерними індексами коли ітеруєте масив, так як <strong>for...in</strong> ітерує властивості окрім елементів масиву, якщо ви змінюєте об'єкт масиву, наприклад, додаючи нові властивості чи методи.</p>
+
+<h2 id="Оператор_for...of">Оператор <code>for...of</code></h2>
+
+<p>Оператор {{jsxref("statements/for...of","for...of")}} створює цикл, що проходиться по <a href="/en-US/docs/Web/JavaScript/Guide/iterable">ітерованому об'єкту</a> (включно з {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, об'єкт {{jsxref("functions/arguments","arguments")}} і т.д), викликаючи в кожній ітерації функцію з виразами для значення кожної окремої властивості.</p>
+
+<pre class="syntaxbox notranslate">for (<em>variable</em> of <em>object</em>) {
+  <em>statement
+</em>}</pre>
+
+<p>Наступний приклад показує різницю між циклами <code>for...of</code> і {{jsxref("statements/for...in","for...in")}}. У той час як <code>for...in</code> проходиться по іменах властивостей, цикл <code>for...of</code> проходиться по значеннях цих властивостей:</p>
+
+<pre class="brush:js notranslate">var arr = [3, 5, 7];
+arr.foo = 'hello';
+
+for (var i in arr) {
+   console.log(i); // logs "0", "1", "2", "foo"
+}
+
+for (var i of arr) {
+   console.log(i); // logs 3, 5, 7
+}
+</pre>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</p>
+
+<div id="gtx-trans" style="position: absolute; left: 29px; top: 10988px;">
+<div class="gtx-trans-icon"></div>
+</div>
diff --git a/files/uk/web/javascript/guide/numbers_and_dates/index.html b/files/uk/web/javascript/guide/numbers_and_dates/index.html
new file mode 100644
index 0000000000..71b7acd1bc
--- /dev/null
+++ b/files/uk/web/javascript/guide/numbers_and_dates/index.html
@@ -0,0 +1,383 @@
+---
+title: Числа та дати
+slug: Web/JavaScript/Guide/Numbers_and_dates
+tags:
+  - Date
+  - JavaScript
+  - Math
+  - Number
+  - Дати
+  - Обчислення
+  - Посібник
+  - Числа
+translation_of: Web/JavaScript/Guide/Numbers_and_dates
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Вирази_та_оператори", "Web/JavaScript/Guide/Text_formatting")}}</div>
+
+<p>У даному розділі представлені концепції, об'єкти та функції, які використовуються, щоб працювати та виконувати розрахунки з числами та датами у JavaScript. Це враховує використання чисел, записаних у різних системах числення, в тому числі десятковій, двійковій та шістнадцятковій, а також використання глобального об'єкта {{jsxref("Math")}} для виконання найрізноманітніших математичних операцій над числами.</p>
+
+<h2 id="Числа">Числа</h2>
+
+<p>У JavaScript, числа реалізовані у <a href="https://en.wikipedia.org/wiki/Double-precision_floating-point_format">64-бітному бінарному форматі IEEE 754 з подвійною точністю</a> (тобто, число між ±2<sup>−1022</sup> та ±2<sup>+1023</sup>, або приблизно від ±10<sup>−308</sup> до ±10<sup>+308</sup>, з числовою точністю у 53 біти). Цілі значення до ±2<sup>53 </sup>− 1 можуть бути відображені точно.</p>
+
+<p>Додатково числовий тип має три символьні значення: <code>+</code>{{jsxref("Infinity")}}, <code>-</code>{{jsxref("Infinity")}} та {{jsxref("NaN")}} (not-a-number - не число).</p>
+
+<p>Нещодавнім доповненням JavaScript є тип {{jsxref("BigInt")}}, який дає можливість оперувати з дуже великими цілими числами. Хоча існують застереження у використанні <code>BigInt</code>; наприклад, ви не можете змішувати та співставляти значення <code>BigInt</code> та {{jsxref("Number")}} в рамках однієї операції, і ви не можете використовувати об'єкт {{jsxref("Math")}} зі значеннями <code>BigInt</code>.</p>
+
+<p>У статті <a href="/uk/docs/Web/JavaScript/Data_structures">Типи та структури даних в JavaScript</a> числовий тип даних описаний в контексті інших примітивних типів JavaScript.</p>
+
+<p>Ви можете використовувати чотири типа числових літералів: десяткові, двійкові, вісімкові та шістнадцятковий.</p>
+
+<h3 id="Десяткові_числа">Десяткові числа</h3>
+
+<pre class="brush: js notranslate">1234567890
+42
+
+// Будьте уважні при використанні нулів на початку числа
+
+0888 // 888 розбирається як десяткове число
+0777 // розбирається як вісімкове число у нестрогому режимі (десяткове число 511)</pre>
+
+<p>Зверніть увагу, що десятковий літерал може починатися з нуля (<code>0</code>) за яким розташована інша десяткова цифра, але, якщо кожна цифра після <code>0</code> менша за 8, то число розбирається як вісімкове.</p>
+
+<h3 id="Двійкові_числа">Двійкові числа</h3>
+
+<p>Синтаксис двійковичх чисел використовує нуль попереду, за яким розташована латинська буква "B" (<code>0b</code> або <code>0B</code>). Якщо цифри після <code>0b</code> не є 0 або 1, викидається наступний виняток <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code>: "Missing binary digits after 0b".</p>
+
+<pre class="brush: js notranslate">var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
+var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
+var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre>
+
+<h3 id="Вісімкові_числа">Вісімкові числа</h3>
+
+<p>Синтаксис вісімкових чисел теж використовує нуль попереду. Якщо числа після <code>0</code> не входять у діапазон від 0 до 7, то число буде інтерпретоване як десяткове.</p>
+
+<pre class="brush: js notranslate">var n = 0755; // 493
+var m = 0644; // 420</pre>
+
+<p>Строгий режим у ECMAScript 5 забороняє вісімковий синтаксис. Вісімковий синтаксис не є частиною ECMAScript 5, але він підтримується всіма переглядачами додаванням нуля попереду вісімкового числа: <code>0644 === 420</code>, а <code>"\045" === "%"</code>. У ECMAScript 2015 вісімкові значення підтримуються, якщо вони мають префікс <code>0o</code>, наприклад: </p>
+
+<pre class="brush: js notranslate">var a = 0o10; // ES2015: 8</pre>
+
+<h3 id="Шістнадцяткові_числа">Шістнадцяткові числа</h3>
+
+<p>Синтаксис шістнадцяткових чисел використовує нуль попереду, за яким розташована латинська літера "X" (<code>0x</code> або <code>0X</code>). Якщо числа після 0x не входять у діапазон (0123456789ABCDEF), то буде викинутий наступний виняток <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code>: "Identifier starts immediately after numeric literal".</p>
+
+<pre class="brush: js notranslate">0xFFFFFFFFFFFFFFFFF // 295147905179352830000
+0x123456789ABCDEF   // 81985529216486900
+0XA                 // 10</pre>
+
+<h3 id="Експоненціальний_запис">Експоненціальний запис</h3>
+
+<pre class="brush: js notranslate">1E3   // 1000
+2e6   // 2000000
+0.1e2 // 10</pre>
+
+<h2 id="Обєкт_Number">Об'єкт <code>Number</code></h2>
+
+<p>Вбудований об'єкт {{jsxref("Число", "Number")}} має властивості для числових констант, такі як масимальне числове значення, не-число (not-a-number) та нескінченність. Ви не можете змінювати значення цих властивостей і використовуєте їх наступним чином:</p>
+
+<pre class="brush: js notranslate">var biggestNum = Number.MAX_VALUE;
+var smallestNum = Number.MIN_VALUE;
+var infiniteNum = Number.POSITIVE_INFINITY;
+var negInfiniteNum = Number.NEGATIVE_INFINITY;
+var notANum = Number.NaN;</pre>
+
+<p>Ви завжди посилаєтесь на властивість попередньо визначенного об'єкта <code>Number</code>, як це показано вище, а не на властивість об'єкта <code>Number</code>, створеного вами.</p>
+
+<p>Наступна таблиця підсумовує властивості об'єкта <code>Number</code>.</p>
+
+<table class="standard-table">
+ <caption>Властивості <code>Number</code></caption>
+ <thead>
+  <tr>
+   <th scope="col"><strong>Властивість</strong></th>
+   <th scope="col"><strong>Опис</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Число.MAX_VALUE", "Number.MAX_VALUE")}}</td>
+   <td>Найбільше число, доступне для відображення (<code>±1.7976931348623157e+308</code>)</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Число.MIN_VALUE", "Number.MIN_VALUE")}}</td>
+   <td>
+    <p>Найменше число, доступне для відображення (<code>±5e-324</code>)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Число.NaN", "Number.NaN")}}</td>
+   <td>Спеціальне значення "не-число" (not-a-number)</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Число.NEGATIVE_INFINITY", "Number.NEGATIVE_INFINITY")}}</td>
+   <td>Спеціальне значення від'ємна нескінченність; повертається при переповненні</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Число.POSITIVE_INFINITY", "Number.POSITIVE_INFINITY")}}</td>
+   <td>Спеціальне значення додатна нескінченність; повертається при переповненні</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Число.EPSILON", "Number.EPSILON")}}</td>
+   <td>Різниця між <code>1</code> та найменшим числом, більшим за <code>1</code>, що може бути представлене об'єктом {{jsxref("Число", "Number")}} (<code>2.220446049250313e-16</code>)</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Число.MIN_SAFE_INTEGER", "Number.MIN_SAFE_INTEGER")}}</td>
+   <td>Мінімальне ціле безпечне число у JavaScript (−2<sup>53</sup> + 1 або <code>−9007199254740991</code>)</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Число.MAX_SAFE_INTEGER", "Number.MAX_SAFE_INTEGER")}}</td>
+   <td>Максимальне ціле безпечне число у JavaScript (+2<sup>53</sup> − 1 або <code>+9007199254740991</code>)</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Методи <code>Number</code></caption>
+ <thead>
+  <tr>
+   <th>Метод</th>
+   <th>Опис</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Число.parseFloat()", "Number.parseFloat()")}}</td>
+   <td>Розбирає рядковий аргумент та повертає число з плаваючою крапкою, яке вдалося розпізнати.<br>
+    Аналог глобальної функції {{jsxref("parseFloat", "parseFloat()")}}.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Число.parseInt()", "Number.parseInt()")}}</td>
+   <td>Розбирає рядковий аргумент та поверає ціле число в заданій системі числення.<br>
+    Аналог глобальної функції {{jsxref("parseInt", "parseInt()")}}.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Число.isFinite()", "Number.isFinite()")}}</td>
+   <td>Визначає, чи є передане значення скінченним числом.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Число.isInteger()", "Number.isInteger()")}}</td>
+   <td>Визначає, чи є передане значення цілим числом.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Число.isNaN()", "Number.isNaN()")}}</td>
+   <td>Визначає, чи є передане значення {{jsxref("Global_Objects/NaN", "NaN")}}. Більш надійніша версія оригінальної глобальної функції  {{jsxref("Global_Objects/isNaN", "isNaN()")}}.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Число.isSafeInteger()", "Number.isSafeInteger()")}}</td>
+   <td>Визначає, чи є передане значення безпечним цілим числом.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Прототип <code>Number</code> надає методи для отримання інформації з об'єктів <code>Number</code> різноманітних форматів. Наступна таблиця наводить методи <code>Number.prototype</code>.</p>
+
+<table class="standard-table">
+ <caption>Методи <code>Number.prototype</code></caption>
+ <thead>
+  <tr>
+   <th scope="col">Методи</th>
+   <th scope="col">Опис</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Число.toExponential", "toExponential()")}}</td>
+   <td>Повертає рядок, що експоненціальний запис числа.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Число.toFixed", "toFixed()")}}</td>
+   <td>Повертає рядок, що містить запис числа у форматі з нерухомою крапкою.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Число.toPrecision", "toPrecision()")}}</td>
+   <td>Повертає рядок, що містить запис числа із зазначеною точністю у форматі з нерухомою крапкою.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Обєкт_Math">Об'єкт <code>Math</code></h2>
+
+<p>Вбудований об'єкт {{jsxref("Math")}} має властивості та методи для математичних констант та функцій. Наприклад, властивість <code>PI</code> об'єкту <code>Math</code> має значення пі (3.141...), яке використовується у застосунку так:</p>
+
+<pre class="brush: js notranslate">Math.PI</pre>
+
+<p>Аналогічно, стандартні математичні функції є методами об'єкта <code>Math</code>. Сюди входять тригонометричні, логарифмічні, експоненціальні та інші функції. Наприклад, якби вам знадобилась тригонометрична функція сінус, ви б написали</p>
+
+<pre class="brush: js notranslate">Math.sin(1.56)</pre>
+
+<p>Зверніть увагу, що всі тригонометричні методи об'єкта <code>Math</code> в якості аргументів приймають величини в радіанах.</p>
+
+<p>В даній таблиці наведені методи об'єкта <code>Math</code>.</p>
+
+<table class="standard-table">
+ <caption>Методи <code>Math</code></caption>
+ <thead>
+  <tr>
+   <th scope="col">Методи</th>
+   <th scope="col">Опис</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Math.abs", "abs()")}}</td>
+   <td>Абсолютне значення</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.sin", "sin()")}}, {{jsxref("Math.cos", "cos()")}}, {{jsxref("Math.tan", "tan()")}}</td>
+   <td>Стандартні тригонометричні функції; з аргументом в радіанах</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.asin", "asin()")}}, {{jsxref("Math.acos", "acos()")}}, {{jsxref("Math.atan", "atan()")}}, {{jsxref("Math.atan2", "atan2()")}}</td>
+   <td>Обернені тригонометричні функції; повертають значення в радіанах.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.sinh", "sinh()")}}, {{jsxref("Math.cosh", "cosh()")}}, {{jsxref("Math.tanh", "tanh()")}}</td>
+   <td>Гіперболічні функції; аргумент - гіперболічний кут.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.asinh", "asinh()")}}, {{jsxref("Math.acosh", "acosh()")}}, {{jsxref("Math.atanh", "atanh()")}}</td>
+   <td>Зворотні, гіперболічні функцій; повертають гіперболічний кут.</td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}}</p>
+   </td>
+   <td>Експоненційні та логарифмічні фукнції.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.floor", "floor()")}}, {{jsxref("Math.ceil", "ceil()")}}</td>
+   <td>Повертає найбільне/найменше ціле, яке менше/більше або дорівнює аргументу.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.min", "min()")}}, {{jsxref("Math.max", "max()")}}</td>
+   <td>Повертає мінімальне або максимальне (відповідно) значення зі списку розділених комою чисел, переданих як аргумент.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.random", "random()")}}</td>
+   <td>Повертає випадкове число в інтервалі між 0 та 1.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.round", "round()")}}, {{jsxref("Math.fround", "fround()")}}, {{jsxref("Math.trunc", "trunc()")}},</td>
+   <td>Фукнції округлення та обрізання.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.sqrt", "sqrt()")}}, {{jsxref("Math.cbrt", "cbrt()")}}, {{jsxref("Math.hypot", "hypot()")}}</td>
+   <td>
+    <p>Квадратний корінь, кубічний корінь, корінь квадратний з суми квадратів аргументів.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.sign", "sign()")}}</td>
+   <td>Знак числа, що вказує, чи є число додатним, від'ємним, чи нулем.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.clz32", "clz32()")}},<br>
+    {{jsxref("Math.imul", "imul()")}}</td>
+   <td>Кількість перших нульових бітів у 32-бітному двійковому представлені.<br>
+    Результат C-подібного 32-бітного множення двох аргументів.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>На відміну від багатьох інших об'єктів, вам не потрібно створювати екземпляри об'єкта <code>Math</code>. Завжди слід використоввати вбудований глобальний об'єкт <code>Math</code> безпосередньо.</p>
+
+<h2 id="Обєкт_Date">Об'єкт <code>Date</code></h2>
+
+<p>JavaScript не має окремого типу даних для дат. Однак, ви можете скористатись об'єктом {{jsxref("Date")}} та його методами для роботи з датою та часом у вашому проекті. Об'єкт <code>Date</code> має величезну кількість методів для встановлення, отримання та маніпулювання датами, але не має жодних властивостей.</p>
+
+<p>JavaScript оперує датами подібно до Java. Ці дві мови програмування мають багато подібних методів та зберігають дату як кількість мілісекунд, що минули з 00:00:00 1 січня 1970 року, в той час, як часова мітка Unix позначає кількість секунд, що минули з 00:00:00 1 січня 1970 року.</p>
+
+<p>Інтервал значень, які може приймати об'єкт <code>Date</code>, знаходиться від -100,000,000 до 100,000,000 днів відносно 1 січня 1970 року за UTC.</p>
+
+<p>Щоб створити об'єкт <code>Date</code>:</p>
+
+<pre class="brush: js notranslate">var dateObjectName = new Date([parameters]);</pre>
+
+<p>де <code>dateObjectName</code> - це ім'я створеного об'єкта <code>Date</code>; це може бути як новий об'єкт, так і властивість вже існуючого об'єкта.</p>
+
+<p>Виклик <code>Date</code> без оператора <code>new</code> повертає теперішню дату та час у вигляді рядка.</p>
+
+<p>Параметри (<code>parameters</code>) у наведеному записі можуть бути одним з наступних значень:</p>
+
+<ul>
+ <li>Порожнє значення: створюється сьогоднішня дата та час. Наприклад, <code>today = new Date();</code>.</li>
+ <li>Рядок, що представляє дату в наступній формі: "Місяць день, рік години:хвилини:секунди."  Наприклад, <code>var Xmas95 = new Date("December 25, 1995 13:30:00")</code>. Якщо не вказані години, хвилини чи секунди, значення замінюються нулями.</li>
+ <li>Набір цілочисельних значень для року, місяця та дня. Наприклад, <code>var Xmas95 = new Date(1995, 11, 25)</code>.</li>
+ <li>Набір цілочисельних значень для року, місяця, дня, годин, хвилин та секунд. Наприклад, <code>var Xmas95 = new Date(1995, 11, 25, 9, 30, 0);</code>.</li>
+</ul>
+
+<h3 id="Методи_обєкта_Date">Методи об'єкта <code>Date</code></h3>
+
+<p>Методи об'єкта <code>Date</code> для роботи з датами та часом підпадають під такі категорії:</p>
+
+<ul>
+ <li>методи "set", для встановлення дати та часу в об'єктах <code>Date</code>.</li>
+ <li>методи "get", для отримання дати та часу з об'єктів <code>Date</code>.</li>
+ <li>методи "to", для отримання рядкових значень з об'єктів <code>Date</code>. </li>
+ <li>методи розбору та UTC, для розбору рядків <code>Date</code>.</li>
+</ul>
+
+<p>За допомогою методів "get" та "set" можна встановлювати та отримувати значення секунд, хвилин, годин, днів місяця, днів тижня, місяць та рік окремо. Зверніть увагу на метод <code>getDay</code>, який повертає день тижня, але не існує відповідного методу <code>setDay</code>, оскільки день тижня визначається автоматично. Всі ці методи використовують цілі числа для представлення відповідних даних наступним чином:</p>
+
+<ul>
+ <li>Секунди та хвилини: від 0 до 59</li>
+ <li>Години: від 0 до 23</li>
+ <li>День: від 0 (неділя) до 6 (субота)</li>
+ <li>Дата: від 1 до 31 (день місяця)</li>
+ <li>Місяць: від 0 (січень) до 11 (грудень)</li>
+ <li>Рік: роки з 1900</li>
+</ul>
+
+<p>Припустимо, ви визначаєте наступну дату:</p>
+
+<pre class="brush: js notranslate">var Xmas95 = new Date('December 25, 1995');</pre>
+
+<p>Тоді <code>Xmas95.getMonth()</code> повертає 11, а <code>Xmas95.getFullYear()</code> повертає 1995.</p>
+
+<p>Методи <code>getTime</code> та <code>setTime</code> зручні для порівняння дат. Метод <code>getTime</code> повертає кількість мілесекунд від 00:00:00, 1 січня 1970 року.</p>
+
+<p>Наприклад, наступний код показує, скільки днів залишилось у цьому році:</p>
+
+<pre class="brush: js notranslate">var today = new Date();
+var endYear = new Date(1995, 11, 31, 23, 59, 59, 999); // Встановлюємо день та місяць
+endYear.setFullYear(today.getFullYear()); // Встановлюємо цей рік
+var msPerDay = 24 * 60 * 60 * 1000; // Кількість мілісекунд в одному дні
+var daysLeft = (endYear.getTime() - today.getTime()) / msPerDay;
+var daysLeft = Math.round(daysLeft); //Повертає кількість днів, які залишилися в цьому році</pre>
+
+<p>Цей приклад створює об'єкт <code>Date</code> на ім'я <code>today</code>, який містить в собі сьогоднішню дату. Далі він створює об'єкт <code>Date</code> на ім'я <code>endYear</code>, якому присвоюється поточний рік. Потім, використовуючи кількість мілісекунд в одному дні, вираховує кількість днів між <code>today</code> та <code>endYear</code>, використовуючи <code>getTime</code> та округливши результат до цілого значення кількості днів.</p>
+
+<p>Метод <code>parse</code> корисний для присвоєння рядкових значень існуючим об'єктам <code>Date</code>. Наприклад, наступний код використовує <code>parse</code> та <code>setTime</code> для присвоєння дати об'єкту <code>IPOdate</code>:</p>
+
+<pre class="brush: js notranslate">var IPOdate = new Date();
+IPOdate.setTime(Date.parse('Aug 9, 1995'));</pre>
+
+<h3 id="Приклад">Приклад</h3>
+
+<p>У наступному прикладі, функція <code>JSClock()</code> повертає час у форматі цифрового годинника.</p>
+
+<pre class="brush: js notranslate">function JSClock() {
+  var time = new Date();
+  var hour = time.getHours();
+  var minute = time.getMinutes();
+  var second = time.getSeconds();
+  var temp = '' + ((hour &gt; 12) ? hour - 12 : hour);
+  if (hour == 0)
+    temp = '12';
+  temp += ((minute &lt; 10) ? ':0' : ':') + minute;
+  temp += ((second &lt; 10) ? ':0' : ':') + second;
+  temp += (hour &gt;= 12) ? ' P.M.' : ' A.M.';
+  return temp;
+}</pre>
+
+<p>Функція <code>JSClock</code> спочатку створює новий об'єкт <code>Date</code>, який називається <code>time</code>; оскільки жодних аргументів не надано, час створюється на основі поточної дати та часу. Далі викликами методів <code>getHours</code>, <code>getMinutes</code> та <code>getSeconds</code> присвоюються значення поточної години, хвилини та секунди змінним <code>hour</code>, <code>minute</code> та <code>second</code>.</p>
+
+<p>Наступні чотири інструкції створюють рядкове значення на основі значення часу. Перша інструкція створює змінну <code>temp</code>, присвоюючи їй значення за допомогою умовного виразу: якщо <code>hour</code> більше за 12, то (<code>hour - 12</code>), інакше просто <code>hour</code>, у випадку ж коли <code>hour</code> дорівнює 0, він набуває значення 12.</p>
+
+<p>Наступна інструкція додає значення <code>minute</code> до змінної <code>temp</code>. Якщо значення <code>minute</code> менше за 10, умовний вираз додає рядок з нулем попереду; інакше додається рядок з двокрапкою для розмежування. Далі аналогічним чином інструкція додає до <code>temp</code> секунди.</p>
+
+<p>Зрештою, умовний вираз додає "P.M." до <code>temp</code>, якщо <code>hour</code> дорівнює або більший за 12; інакше, додається "A.M.".</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Вирази_та_оператори", "Web/JavaScript/Guide/Text_formatting")}}</p>
diff --git a/files/uk/web/javascript/guide/regular_expressions/index.html b/files/uk/web/javascript/guide/regular_expressions/index.html
new file mode 100644
index 0000000000..e41b342ac7
--- /dev/null
+++ b/files/uk/web/javascript/guide/regular_expressions/index.html
@@ -0,0 +1,635 @@
+---
+title: Регулярні Вирази
+slug: Web/JavaScript/Guide/Regular_Expressions
+translation_of: Web/JavaScript/Guide/Regular_Expressions
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</div>
+
+<p class="summary"><strong>Регулярні вирази</strong> це шаблони, що використовуються для пошуку збігу,співпадіння в тексті чи строках. В JavaScript регулярні вирази також є обʼєктами. Ці шаблони використовуются для пошуку збігу у тексті. Пропоную розібратись з  регулярними виразами JavaScript детальніше.</p>
+
+<h2 id="Створення_регулярних_виразів">Створення регулярних виразів</h2>
+
+<p>Ви можете створювати регулярні вирази двома способами:</p>
+
+<p>Використовуючи літерал регулярного виразу, який складається з шаблону між символами "/" слеш:</p>
+
+<pre class="brush: js notranslate">var re = /ab+c/;
+</pre>
+
+<p>Цей спосіб підійде для статичних, простих виразів, використовуйте його для покращення продуктивності.</p>
+
+<p>Або через створення обʼєкта {{jsxref("RegExp")}}:</p>
+
+<pre class="brush: js notranslate">var re = new RegExp("ab+c");
+</pre>
+
+<p>В такому випадку створюєтся об'єкт з методами {{jsxref("RegExp.exec", "exec")}} та {{jsxref("RegExp.test", "test")}} класу {{jsxref("RegExp")}}, та методами з {{jsxref("String")}} классу, а саме {{jsxref("String.match", "match")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}, та {{jsxref("String.split", "split")}}. </p>
+
+<p>Використовуйте цей спосіб у випадках, коли вам відомо, що шаблон регулярного виразу буде змінюватись. Наприклад для очікування дій користувача з подальшим виконанням якоїсь функції тощо, або для побудови URL маршутів.</p>
+
+<h2 id="Створення_шаблону_регулярного_виразу">Створення шаблону регулярного виразу</h2>
+
+<p>Шаблон регулярного виразу складається зі звичайних символів, наприклад <code>/abc/</code>, або комбінації звичайних та спеціальних символів – <code>/ab*c/</code> або <code>/Chapter (\d+)\.\d*/</code>. Останій приклад містить дужки, які використовуються як запамʼятовуючий пристрiй. Збіг з цією частиною шаблону запамʼятовується для подальшого використання, більш докладно про це в розділі {{ web.link("#Using_parenthesized_substring_matches", "Використання збігів підрядків у дужках") }}.</p>
+
+<h3 id="Використання_простих_шаблонів">Використання простих шаблонів</h3>
+
+<p>Прості шаблони складаються з символів, для яких потрібно знайти прямий збіг. Наприклад, шаблон <code>/abc/</code> збігається з комбінацією символів в рядку тільки у випадку, коли символи 'abc' опиняються поруч саме в такому порядку. Збіг буде успішним у рядках типу "Hi, do you know your abc's?" та "The latest airplane designs evolved from sl<strong>abc</strong>raft." В обох випадках шаблон збігається з підрядком 'abc'. В рядку 'Grab crab' збігу не буде, так як він містить підрядок 'abc', що не збігається точно з послідовністю 'abc'.</p>
+
+<h3 id="Використання_спеціальних_символів">Використання спеціальних символів</h3>
+
+<p>Коли пошук збігу вимагає чогось більшого ніж прямий збіг, наприклад пошук одного чи більше символу 'b', або пошуку пробілів, шаблон включає спеціальні символи. Так, шаблон <code>/ab*c/</code> збігається з будь-якою символьною комбінацією, де за символом 'a' може бути багато повторів символу 'b' (<code>*</code> значить 0 чи більше випадків) за яким відразу йде символ 'c'. В рядку "cbb<strong>abbbbc</strong>debc," шаблон збігається з підрядком '<strong>abbbbc</strong>'.</p>
+
+<p>Наступна таблиця містить повний перелік та опис спеціальних символів, які використовуються в регулярних виразах.</p>
+
+<table class="standard-table">
+ <caption>Спеціальні символи, що використовуються в регулярних виразах.</caption>
+ <thead>
+  <tr>
+   <th scope="col">Символ</th>
+   <th scope="col">Значення</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="#special-backslash" id="special-backslash" name="special-backslash"><code>\</code></a></td>
+   <td>
+    <p>Відповідає одному з наступних правил:<br>
+     <br>
+     Зворотній слеш означає що наступний символ є спеціальним та не сприймається буквально. Наприклад, '<strong><code>b</code></strong>' без передуючого '\' збігається з літерою '<strong>b</strong>' у нижньому регістрі. Але вираз '<strong><code>\b</code></strong>' не відповідає жодному збігу; він утворює спеціальний символ, що збігається з <a href="#special-word-boundary" title="#special-word-boundary">межею слова</a>.<br>
+     <br>
+     Так, шаблон <strong><code>/a*/</code></strong> покладається на спецсимвол '<strong><code>*</code></strong>', щоб знайти збіг з 0 чи більше символів '<strong>a</strong>'. На відміну від цього, щаблон <strong><code>/a\*/</code></strong> усуває сприйняття '<strong><code>*</code></strong>', як спецсимвол, та дозволяє отримати збіг '<strong>a*</strong>'.<br>
+     <br>
+     Не забувайте екранувати символ '<strong>\</strong>' подвійним ' '\\' використовуючи його в нотації RegExp("pattern"), так як '<strong>\</strong>' є екрануючим символом в рядках.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-caret" id="special-caret" name="special-caret"><code>^</code></a></td>
+   <td>Шукати збіг окрім перед символом переносу рядка чи кінця строки.<br>
+    <br>
+    Наприклад, <strong><code>/^A/</code></strong> не має збігу з "an A", але має збіг в рядку "<strong>A</strong>n E".<br>
+    <br>
+    Символ '<strong><code>^</code></strong>' має також і інші значення, коли він вказуєтся на початку шаблону регулярного виразу. Ознайомтесь з розділом <a href="#special-negated-character-set" title="#special-negated-character-set">доповнений набір символів</a> для отримання деталей та прикладів.</td>
+  </tr>
+  <tr>
+   <td><a href="#special-dollar" id="special-dollar" name="special-dollar"><code>$</code></a></td>
+   <td>
+    <p>Вказує що на забігу має завершитись строка. </p>
+
+    <p>Наприклад, <strong><code>/t$/</code></strong> не збігається з '<strong>t</strong>' в "eater", але має збіг в "ea<strong>t</strong>".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-asterisk" id="special-asterisk" name="special-asterisk"><code>*</code></a></td>
+   <td>
+    <p>Збіг повторюється 0 чи більше разів. Еквівалент <code>{0,}</code>.</p>
+
+    <p>Наприклад, <strong><code>/bo*/</code></strong> збігається з '<strong>boooo</strong>' в "A ghost <strong>boooo</strong>ed" та з '<strong>b</strong>' in "A <strong>b</strong>ird warbled", але не має збігу в "A goat grunted".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-plus" id="special-plus" name="special-plus"><code>+</code></a></td>
+   <td>
+    <p>Відповідає попередньому символу, що повторюється щонайменше 1 чи більше разів. Еквівалент <code>{1,}</code>.</p>
+
+    <p>Наприклад, <strong><code>/a+/</code></strong> збігається з '<strong>a</strong>' в "c<strong>a</strong>ndy" та з усіма '<strong>a</strong>' в "c<strong>aaaaaaa</strong>ndy", але не має збігів у "cndy".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-questionmark" id="special-questionmark" name="special-questionmark"><code>?</code></a></td>
+   <td>Пошук збігу 0 чи 1 раз. Еквівалент <code>{0,1}</code>.<br>
+    <br>
+    Наприклад, <code>/e?le?/</code> відповідає '<strong>el</strong>' в "ang<strong>el</strong>" та '<strong>le</strong>' в "ang<strong>le</strong>", а також '<strong>l</strong>' в "os<strong>l</strong>o".<br>
+    <br>
+    Якщо вказуєтся одразу після специмволів *, +, ?, або {}, робить їх більш суворими (збіг з найменш можливою кількістю символів), на відміну від типових результатів, на відміну від несуворих пошуків (збіг з максимально можливою кількістю символів). Наприклад, застосування <strong><code>/\d+/</code></strong> (пошук повторення десятичної цифри багато разів) до "<strong>123</strong>abc" знайде "<strong>123</strong>". Але застосування <strong><code>/\d+?/</code></strong> зробить його суворим і результом збігу буде перша цифра "<strong>1</strong>".<br>
+     </td>
+  </tr>
+  <tr>
+   <td><a href="#special-dot" id="special-dot" name="special-dot"><code>.</code></a></td>
+   <td>
+    <p>(дрібна крапка) вказує пошук будь-якого одного символу, окрім початку строки.</p>
+
+    <p>Наприклад, <strong><code>/.n/</code></strong> відповідає '<strong>an</strong>' та '<strong>on</strong>' в рядку "nay, <strong>an</strong> apple is <strong>on</strong> the tree", але не знайде збігів у  'nay'.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-capturing-parentheses" id="special-capturing-parentheses" name="special-capturing-parentheses"><code>(x)</code></a></td>
+   <td>
+    <p>Пошук 'x' і запам'ятати збіг. Ці дужки також називають <em>захоплюючи дужки</em>.<br>
+     <br>
+     '<strong><code>(foo)</code></strong>' та '<strong><code>(bar)</code></strong>' в шаблоні <strong><code>/(foo) (bar) \1 \2/</code></strong> збігаються з першими двома словами в рядку "<strong>foo bar</strong> foo bar" та запамʼятовують їх.  А <code><strong>\1</strong></code> та <strong><code>\2</code></strong> в шаблоні відповідають двом останім словам. Зауважте, що <code><strong>\1</strong>, <strong>\2</strong>, <strong>\n</strong></code> використовуються в порівняльній частині регулярного виразу. В зміній частині регулярного виразу потрібно використовувати синтакс <code><strong>$1</strong>, <strong>$2</strong>, <strong>$n</strong></code>: <code>'bar foo'.replace( /(...) (...)/, '$2 $1' )</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-capturing-parentheses" id="special-non-capturing-parentheses" name="special-non-capturing-parentheses"><code>(?:x)</code></a></td>
+   <td>Відповідає 'x', але не запамʼятовує збіг. Такий випадок називається <em>незахоплючими дужками</em>, і дозволяє вам визначати під-вирази для роботи з операторами ругулярних виразів. Розглянемо приклад <strong><code>/(?:foo){1,2}/</code></strong>. Якщо б шаблон був <strong><code>/foo{1,2}/</code></strong>, символи <code>{1,2}</code> застосовувались би тільки до останього символу '<strong>o</strong>' в 'fo<strong>o</strong>'. В незахоплюючих дужках <code>{1,2}</code> застосовується до всього слова 'foo'.</td>
+  </tr>
+  <tr>
+   <td><a href="#special-lookahead" id="special-lookahead" name="special-lookahead"><code>x(?=y)</code></a></td>
+   <td>
+    <p>Відповідає 'x' тільки якщо за 'x' йде 'y'. Це називається випередження.</p>
+
+    <p>Наприклад, <code>/Jack(?=Sprat)/</code> збігатиметься з 'Jack' тількя якщо за ним йде 'Sprat'. <code>/Jack(?=Sprat|Frost)/</code> збігається з 'Jack' тільки якщо за ним йде 'Sprat' або 'Frost'. Проте, а ні 'Sprat', а ні 'Frost' не є частиною результату збігу.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-negated-look-ahead" id="special-negated-look-ahead" name="special-negated-look-ahead"><code>x(?!y)</code></a></td>
+   <td>
+    <p>Відповідає 'x' тільки якщо за 'x' не йде 'y'. Це називається відʼємним випередженням.</p>
+
+    <p>Наприклад, <strong><code>/\d+(?!\.)/</code></strong> матиме збіг з числом тільки якщо за ним відсутня десяткова точка. Регулярний вираз <code><strong>/\d+(?!\.)/</strong>.exec("3.<strong>141</strong>")</code> матиме збіг з '<strong>141</strong>', але не з '3.141'.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-or" id="special-or" name="special-or"><code>x|y</code></a></td>
+   <td>
+    <p>Відповідає 'x' або 'y'.</p>
+
+    <p>Наприклад, <strong><code>/green|red/</code></strong> збігається з '<strong>green</strong>' в "<strong>green</strong> apple" та з '<strong>red</strong>' в "<strong>red</strong> apple."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-quantifier" id="special-quantifier" name="special-quantifier"><code>{n}</code></a></td>
+   <td>Відповідає точній кількості n повторень попереднього виразу. N повино бути додатним цілим числом.<br>
+    <br>
+    Наприклад, <code>/a{2}/</code> не матиме збігів для 'a' в "candy," але збігатиметься з усіма <strong>a</strong> в "c<strong>aa</strong>ndy," та двом першим <strong>a</strong> в "c<strong>aa</strong>andy."</td>
+  </tr>
+  <tr>
+   <td><a href="#special-quantifier-range" id="special-quantifier-range" name="special-quantifier-range"><code>{n,m}</code></a></td>
+   <td>
+    <p>Де <code>n</code> та <code>m</code> – додатні цілі числа та <code>n &lt;= m</code>. Відповідає що найменше <code>n</code> та до <code>m</code> включно повторень передуючого виразу. Якщо <code>m</code> немає, вважається що <code>m = ∞</code>.</p>
+
+    <p>Наприклад, <code>/a{1,3}/</code> не збігається з рядком "cndy", відповідає '<strong>a</strong>' в "c<strong>a</strong>ndy," та першим двом <strong>a</strong> в "c<strong>aa</strong>ndy," а також першим трьом <strong>a</strong> в "c<strong>aaa</strong>aaaandy". Зауважте що під час порівняння "c<strong>aaa</strong>aaaandy", відповідає лише "<strong>aaa</strong>", навіть якщо оригінальний рядок містить довший рядок з <strong>a</strong>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-character-set" id="special-character-set" name="special-character-set"><code>[xyz]</code></a></td>
+   <td>Набір символів. Відповідає збігу з будь-яким із символів шаблону, включаючи <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences">керуючі послідовності</a>. Спеціальні символи такі як точка (<code>.</code>) та зірочка (<code>*</code>) не є спецсимволами в середині набору символів та не потребують екранування. Ви можете задавати послідовності використовуючи дефіс, як в наступному прикладі.<br>
+    <br>
+    Шаблон<code> [a-d]</code>, що представляє теж саме що й <code>[abcd]</code>, збігається з '<strong>b</strong>' в "<strong>b</strong>risket" та з '<strong>c</strong>' в "<strong>c</strong>ity". Шаблони <code><strong>/[a-z.]+/</strong> та</code> <strong><code>/[\w.]+/</code></strong> збігаються зі всім рядком "test.i.ng".</td>
+  </tr>
+  <tr>
+   <td><a href="#special-negated-character-set" id="special-negated-character-set" name="special-negated-character-set"><code>[^xyz]</code></a></td>
+   <td>
+    <p>Відʼємний або компліментарний набір змін. Цей вираз відповідає збігу з будь-чим що не міститься в квадратних дужках. Ви можете зазначити діапазон використовуючи дефіс. Все що працює зі звичайним набором символів спрацює і в цьому випадку.</p>
+
+    <p>Наприклад, <code>[^abc]</code> теж саме що й <code>[^a-c]</code>. Вони відповідають збігу 'r' в "brisket" та 'h' в "chop."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-backspace" id="special-backspace" name="special-backspace"><code>[\b]</code></a></td>
+   <td>Відповідає символу backspace (U+0008). Потрібно використовувати квадратні дужки, якщо ви бажаєте отримати збіг з літералом backspace. (Не треба плутати з <code>\b</code>.)</td>
+  </tr>
+  <tr>
+   <td><a href="#special-word-boundary" id="special-word-boundary" name="special-word-boundary"><code>\b</code></a></td>
+   <td>
+    <p>Відповідає межі слова. Межа слова відповідає позиції де літерному символу не передує або слідує за ним інший літерний символ. Зауважте, що межа слова не включається до збігу. Іншими словами його довжина дорівнює нулю. (Не треба плутати з <code>[\b]</code>.)</p>
+
+    <p>Приклади:<br>
+     <code>/\bm/</code> відповідає '<strong>m</strong>' в "<strong>m</strong>oon" ;<br>
+     <code>/oo\b/</code> не збігається з '<strong>oo</strong>' в "m<strong>oo</strong>n", тому що за '<strong>oo</strong>' йде символ '<strong>n</strong>', який є літерним символом;<br>
+     <code>/oon\b/</code> збігається з '<strong>oon</strong>' в "m<strong>oon</strong>", тому що '<strong>oon</strong>' є кінцем рядка, тож за ним не йде літерний символ;<br>
+     <code>/\w\b\w/</code> ніколи не буде мати збігу, тому що за літерним символом ніколи не буде йти не-літерний символ разом з літерним символом.</p>
+
+    <div class="note">
+    <p><strong>Примітка:</strong> Рушій регулярних виразів JavaScript визначає <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.10.2.6">особливий набір символів</a> що є літерними символами. Будь-який символ не з цього переліка вважається розділовим знаком - межею слова. Цей набір символів є доволі обмеженим: він складається тільки з символів латинської абетки в верхньому та нижньому регістрах, цифр та символу підкресленя. Акцентовані літери, такі як "é" або "ü", несподівано, вважаються розділовими знаками.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-word-boundary" id="special-non-word-boundary" name="special-non-word-boundary"><code>\B</code></a></td>
+   <td>
+    <p>Відповідає межі не-слова. Цей літерал відповідає позиції де попередній та наступний символи є символами одного типу: Тож обидва символи повині бути літерними, або не-літерними символами. Початок та кінець рядка вважаються не-літерними символами.</p>
+
+    <p>Наприклад, <code>/\B../</code> відповідає '<strong>oo</strong>' в "n<strong>oo</strong>nday", та <code>/y\B./</code> збігається з 'ye' в "possibly <strong>ye</strong>sterday."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-control" id="special-control" name="special-control"><code>\c<em>X</em></code></a></td>
+   <td>
+    <p>Де <em>X</em> є символом в діапазоні від A до Z. Відповідає керуючим символам в рядку.</p>
+
+    <p>Наприклад, <code>/\cM/</code> відповідає control-M (U+000D) в рядку.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-digit" id="special-digit" name="special-digit"><code>\d</code></a></td>
+   <td>
+    <p>Відповідає цифровому символу. Еквівалент <code>[0-9]</code>.</p>
+
+    <p>Наприклад, <code>/\d/</code> або <code>/[0-9]/</code> збігатиметься з '<strong>2</strong>' в "B<strong>2</strong> is the suite number."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-digit" id="special-non-digit" name="special-non-digit"><code>\D</code></a></td>
+   <td>
+    <p>Відповідає не-цифровому символу. Еквівалент <code>[^0-9]</code>.</p>
+
+    <p>Наприклад, <code>/\D/</code> або <code>/[^0-9]/</code> збігатиметься з '<strong>B</strong>' в "<strong>B</strong>2 is the suite number."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-form-feed" id="special-form-feed" name="special-form-feed"><code>\f</code></a></td>
+   <td>Відповідає символу прогону сторінки (U+000C).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-line-feed" id="special-line-feed" name="special-line-feed"><code>\n</code></a></td>
+   <td>Відповідає символу переводу рядка (U+000A).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-carriage-return" id="special-carriage-return" name="special-carriage-return"><code>\r</code></a></td>
+   <td>Відповідає символу повернення каретки (U+000D).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-white-space" id="special-white-space" name="special-white-space"><code>\s</code></a></td>
+   <td>
+    <p>Відповідає одиничному пробільному символу, включаючи пробіл, табуляцію, прогін сторінки, перевод рядка. Еквівалент <code>[ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p>
+
+    <p>Наприклад, <code>/\s\w*/</code> збігається з ' <strong>bar</strong>' в "foo <strong>bar</strong>."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-white-space" id="special-non-white-space" name="special-non-white-space"><code>\S</code></a></td>
+   <td>
+    <p>Відповідає одиничному непробільному символу. Еквівалент <code>[^ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p>
+
+    <p>Наприклад, <code>/\S\w*/</code> відповідає '<strong>foo</strong>' в "<strong>foo</strong> bar."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-tab" id="special-tab" name="special-tab"><code>\t</code></a></td>
+   <td>Відповідає табуляції (U+0009).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-vertical-tab" id="special-vertical-tab" name="special-vertical-tab"><code>\v</code></a></td>
+   <td>Відповідає вертикальній табуляції (U+000B).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-word" id="special-word" name="special-word"><code>\w</code></a></td>
+   <td>
+    <p>Відповідає будь-якому літерно-цифровому символу включаючи символ підкреслювання. Еквівалент <code>[A-Za-z0-9_]</code>.</p>
+
+    <p>Наприклад, <code>/\w/</code> відповідає '<strong>a</strong>' в "<strong>a</strong>pple," '<strong>5</strong>' в "$<strong>5</strong>.28," та '<strong>3</strong>' в "<strong>3</strong>D."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-word" id="special-non-word" name="special-non-word"><code>\W</code></a></td>
+   <td>
+    <p>Відповідає будь-якому не-літерному символу. Еквівалент <code>[^A-Za-z0-9_]</code>.</p>
+
+    <p>Наприклад, <code>/\W/</code> або <code>/[^A-Za-z0-9_]/</code> відповідає '<strong>%</strong>' в "50<strong>%</strong>."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-backreference" id="special-backreference" name="special-backreference"><code>\<em>n</em></code></a></td>
+   <td>
+    <p>Де <em>n</em> є додатним цілим числом, зворотнє посилання на останій збіг підрядка з <em>n</em>-х відповідних круглих дужок шаблона регулярного виразу (рахуючи від лівої дужки).</p>
+
+    <p>Наприклад, <code>/apple(,)\sorange\1/</code> відповідає '<strong>apple, orange,</strong>' в "<strong>apple, orange,</strong> cherry, peach."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-null" id="special-null" name="special-null"><code>\0</code></a></td>
+   <td>Відповідає символу NULL (U+0000). Не використовуйте цей символ разом з іншими цифрами, тому що <code>\0&lt;digits&gt;</code> є вісімковою <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences">керуючою послідовністю</a>.</td>
+  </tr>
+  <tr>
+   <td><a href="#special-hex-escape" id="special-hex-escape" name="special-hex-escape"><code>\xhh</code></a></td>
+   <td>Відповідає символу з кодом hh (два шістнадцяткові знаки)</td>
+  </tr>
+  <tr>
+   <td><a href="#special-unicode-escape" id="special-unicode-escape" name="special-unicode-escape"><code>\uhhhh</code></a></td>
+   <td>Відповідає символу з кодом hhhh (чотири шістнадцяткові знаки).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-unicode-escape-es6" id="special-unicode-escape-es6" name="special-unicode-escape-es6"><code>\u{hhhh}</code></a></td>
+   <td>(тільки разом з прапором <strong>u</strong>) Відповідає символу Юнікод з коом hhhh (шістнадцяткові знаки).</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Екранований ввід користувача буде вважатись літерною послідовністю після застосування регулярного виразу для простої заміни:</p>
+
+<pre class="brush: js notranslate">function escapeRegExp(string){
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&amp;"); // $&amp; - підстановка результату
+}</pre>
+
+<h3 id="Використання_дужок">Використання дужок</h3>
+
+<p>Дужки навколо будь-якої частини регулярного виразу означають, що ця частина порівнюванного рядка буде збережена. Після цього, ця частина рядка може бути вкликана для повторного використання, більш докладно у {{ web.link("#Using_parenthesized_substring_matches", "Використання збігів підрядків у дужках") }}.</p>
+
+<p>Наприклад, шаблон <code>/Chapter (\d+)\.\d*/</code> показує додатково екрановані та спеціальні символи частини шаблону, яку потрібно запамʼятати. Він відповідає точному збігу слова 'Chapter ' за яким йде один чи більше цифрових символів (<strong><code>\d</code></strong> означає будь-який цифровий символ, а <strong><code>+</code></strong> означає 1 чи більше разів), за якими йде десяткова точка (яка сама по собі є спеціальним символом; додавання слеша <strong>\</strong> перед точкою дозволяє зробити її звичайним символом '<strong>.</strong>'), за якою йде будь-яке число, що повторюється від 0 та більше разів (<strong><code>\d</code></strong> означає числовий символ, <strong><code>*</code></strong><code> </code>означає 0 та більше разів). На додачу, дужки використовуються для того, щоб запамʼятати першу послідовність числових символів.</p>
+
+<p>Цей шаблон в рядку "Open Chapter 4.3, paragraph 6" знайде числовий символ '4' та запамʼятає його. Шаблон не знайде збігів в "Chapter 3 and 4", тому що рядок не містить точку після '3'.</p>
+
+<p>Для пошуку відповідності підрядка в дужках без його запамʼятовування. додавайте на початку шаблона в дужках комбінацію <strong><code>?:</code></strong>. Наприклад, <code>(?:\d+)</code> відповідає одному чи білше числовому символу але без їх запамʼятовування.</p>
+
+<h2 id="Робота_з_регулярними_виразами">Робота з регулярними виразами</h2>
+
+<p>Регулярні вирази використовуються разом з методами RegExp: test та exec, а також з методами String: mathc, replace, search та split. Ці методи детально описані в  <a href="/en-US/docs/Web/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">JavaScript reference</a>.</p>
+
+<table class="standard-table">
+ <caption>Методи, які використовують регулярні вирази</caption>
+ <thead>
+  <tr>
+   <th scope="col">Метод</th>
+   <th scope="col">Опис</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("RegExp.exec", "exec")}}</td>
+   <td>Метод <code>RegExp, який виконує пошук віповідностей у рядку. Він повертає список знайдених відповідностей.</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.test", "test")}}</td>
+   <td>Метод <code>RegExp, який перевіряє, чи рядок містить відповідність регулярному виразу. Повертає</code> true або false.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.match", "match")}}</td>
+   <td>Метод <code>String</code> який виконує пошук відповідностей у рядку. Повертає список знайдених відповідностей, або null за невдачі.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.search", "search")}}</td>
+   <td>Метод <code>String</code> який перевіряє , чи рядок містить відповідність регулярному виразу. Повертає індекс відповідності або -1 в разі невдачі.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.replace", "replace")}}</td>
+   <td>Метод <code>String</code> який виконує пошук відповідності у рядку і заміну знайдених підрядків на заданий рядок заміни.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.split", "split")}}</td>
+   <td>Метод <code>String</code> який застосовує регулярний вираз чи рядок-розділювач для розбиття рядку на список підрядків..</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Коли Вам потрібно дізнатися чи міститься шаблон у рядку, використовуйте методи <code>test</code> або <code>search</code>, для детальнішої інформації використовуйте методи <code>exec</code> чи <code>match</code> (виконуються повільніше). Якщо методи <code>exec</code> або <code>match</code> знаходять відповідність вони повертають список і оновлюють властивості пов'язаного об'єкта регулярного виразу, а також передвизначеного об'єкта регулярного виразу, <code>RegExp</code>. В протилежному випадку, метод <code>exec</code> повертає <code>null</code> (який приводиться до <code>false</code>).</p>
+
+<p>В наступному прикладі, скрипт використовує метод <code>exec</code> для знаходження віповідності у рядку.</p>
+
+<pre class="brush: js notranslate">var myRe = /d(b+)d/g;
+var myArray = myRe.exec("cdbbdbsbz");
+</pre>
+
+<p>Якщо у Вас немє потреби мати доступ до властивостей регулярного виразу, альтернативний шлях створення <code>myArray</code> - у такому скрипті:</p>
+
+<pre class="brush: js notranslate">var myArray = /d(b+)d/g.exec("cdbbdbsbz");
+</pre>
+
+<p>Ще один варіант цього скрипта, на випадок, якщо Вам потрібно сконструювати регулярний вираз з рядка:</p>
+
+<pre class="brush: js notranslate">var myRe = new RegExp("d(b+)d", "g");
+var myArray = myRe.exec("cdbbdbsbz");
+</pre>
+
+<p>Скрипти в цих прикладах знаходять відповідність, повертають список з результатами пошуку а також оновлюють властивості, показані в наступній таблиці.</p>
+
+<table class="standard-table">
+ <caption>Результати виконання регулярного виразу</caption>
+ <thead>
+  <tr>
+   <th scope="col">Об'єкт</th>
+   <th scope="col">Властивість чи індекс</th>
+   <th scope="col">Опис</th>
+   <th scope="col">У цьому прикладі</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td rowspan="4"><code>myArray</code></td>
+   <td></td>
+   <td>Відповідний рядок та всі запам'ятовані підрядки.</td>
+   <td><code>["dbbd", "bb"]</code></td>
+  </tr>
+  <tr>
+   <td><code>index</code></td>
+   <td>Індекс відповідності на основі 0 у вхідному рядку.</td>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <td><code>input</code></td>
+   <td>Початковий рядок.</td>
+   <td><code>"cdbbdbsbz"</code></td>
+  </tr>
+  <tr>
+   <td><code>[0]</code></td>
+   <td>Останні відповідні символи.</td>
+   <td><code>"dbbd"</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2"><code>myRe</code></td>
+   <td><code>lastIndex</code></td>
+   <td>Індекс з якого починати наступне порівняння. (Ця властивість встановлюється лише якщо регулярний вираз використовує g опцію, описану в {{ web.link("#Advanced_searching_with_flags", "Advanced Searching With Flags") }}.)</td>
+   <td><code>5</code></td>
+  </tr>
+  <tr>
+   <td><code>source</code></td>
+   <td>Текст шаблону. Оновлений під час створення регулярного виразу, а не викионання.</td>
+   <td><code>"d(b+)d"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Як показано у другій формі цього прикладу, ви можете використовувати регулярні вирази створені через ініціалізатор об'єкта без привласнення їх до змінної. Однак якщо ви робите це, то кожен випадок це регулярний вирах. По цій причині, якщо ви використовуєте цю фору без привласнення до змінної, то у ви не зможете використовувати властивості регулярних виразів. Для прикладу, представте, що у вас є наступний скрипт:</p>
+
+<pre class="brush: js notranslate">var myRe = /d(b+)d/g;
+var myArray = myRe.exec("cdbbdbsbz");
+console.log("The value of lastIndex is " + myRe.lastIndex);
+
+// "Значення lastIndex є 5"
+</pre>
+
+<p>Однак, якщо ви маєте цей скрипт:</p>
+
+<pre class="brush: js notranslate">var myArray = /d(b+)d/g.exec("cdbbdbsbz");
+console.log("The value of lastIndex is " + /d(b+)d/g.lastIndex);
+
+// "Значення lastIndex є 0"
+</pre>
+
+<p>Випадки <code>/d(b+)d/g</code>  у цих двох виразах є різними об'єктами регулярних виразів, отже мають різні значення для їх <code>lastIndex</code> властивості. Якщо вам треба мати доступ до властивостей регулярного виразу, який був створений через ініціалізатор об'єкту, то спочатку вам треба привласнити його до змінної.</p>
+
+<h3 id="Використання_збігів_підрядків_у_дужках"><a id="Using_parenthesized_substring_matches" name="Using_parenthesized_substring_matches">Використання збігів підрядків у дужках</a></h3>
+
+<p>Including parentheses in a regular expression pattern causes the corresponding submatch to be remembered. For example, <code>/a(b)c/</code> matches the characters 'abc' and remembers 'b'. To recall these parenthesized substring matches, use the <code>Array</code> elements <code>[1]</code>, ..., <code>[n]</code>.</p>
+
+<p>The number of possible parenthesized substrings is unlimited. The returned array holds all that were found. The following examples illustrate how to use parenthesized substring matches.</p>
+
+<p>The following script uses the {{jsxref("String.replace", "replace()")}} method to switch the words in the string. For the replacement text, the script uses the <code>$1</code> and <code>$2</code> in the replacement to denote the first and second parenthesized substring matches.</p>
+
+<pre class="brush: js notranslate">var re = /(\w+)\s(\w+)/;
+var str = "John Smith";
+var newstr = str.replace(re, "$2, $1");
+console.log(newstr);
+</pre>
+
+<p>This prints "Smith, John".</p>
+
+<h3 id="Advanced_searching_with_flags">Advanced searching with flags</h3>
+
+<p>Regular expressions have four optional flags that allow for global and case insensitive searching. These flags can be used separately or together in any order, and are included as part of the regular expression.</p>
+
+<table class="standard-table">
+ <caption>Regular expression flags</caption>
+ <thead>
+  <tr>
+   <th scope="col">Flag</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>g</code></td>
+   <td>Global search.</td>
+  </tr>
+  <tr>
+   <td>i</td>
+   <td>Case-insensitive search.</td>
+  </tr>
+  <tr>
+   <td>m</td>
+   <td>Multi-line search.</td>
+  </tr>
+  <tr>
+   <td>y</td>
+   <td>Perform a "sticky" search that matches starting at the current position in the target string. See {{jsxref("RegExp.sticky", "sticky")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>To include a flag with the regular expression, use this syntax:</p>
+
+<pre class="brush: js notranslate">var re = /pattern/flags;
+</pre>
+
+<p>or</p>
+
+<pre class="brush: js notranslate">var re = new RegExp("pattern", "flags");
+</pre>
+
+<p>Note that the flags are an integral part of a regular expression. They cannot be added or removed later.</p>
+
+<p>For example, <code>re = /\w+\s/g</code> creates a regular expression that looks for one or more characters followed by a space, and it looks for this combination throughout the string.</p>
+
+<pre class="brush: js notranslate">var re = /\w+\s/g;
+var str = "fee fi fo fum";
+var myArray = str.match(re);
+console.log(myArray);
+</pre>
+
+<p>This displays ["fee ", "fi ", "fo "]. In this example, you could replace the line:</p>
+
+<pre class="brush: js notranslate">var re = /\w+\s/g;
+</pre>
+
+<p>with:</p>
+
+<pre class="brush: js notranslate">var re = new RegExp("\\w+\\s", "g");
+</pre>
+
+<p>and get the same result.</p>
+
+<p>The <code>m</code> flag is used to specify that a multiline input string should be treated as multiple lines. If the <code>m</code> flag is used, <code>^</code> and <code>$</code> match at the start or end of any line within the input string instead of the start or end of the entire string.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The following examples show some uses of regular expressions.</p>
+
+<h3 id="Changing_the_order_in_an_input_string">Changing the order in an input string</h3>
+
+<p>The following example illustrates the formation of regular expressions and the use of <code>string.split()</code> and <code>string.replace()</code>. It cleans a roughly formatted input string containing names (first name first) separated by blanks, tabs and exactly one semicolon. Finally, it reverses the name order (last name first) and sorts the list.</p>
+
+<pre class="brush: js notranslate">// The name string contains multiple spaces and tabs,
+// and may have multiple spaces between first and last names.
+var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand ";
+
+var output = ["---------- Original String\n", names + "\n"];
+
+// Prepare two regular expression patterns and array storage.
+// Split the string into array elements.
+
+// pattern: possible white space then semicolon then possible white space
+var pattern = /\s*;\s*/;
+
+// Break the string into pieces separated by the pattern above and
+// store the pieces in an array called nameList
+var nameList = names.split(pattern);
+
+// new pattern: one or more characters then spaces then characters.
+// Use parentheses to "memorize" portions of the pattern.
+// The memorized portions are referred to later.
+pattern = /(\w+)\s+(\w+)/;
+
+// New array for holding names being processed.
+var bySurnameList = [];
+
+// Display the name array and populate the new array
+// with comma-separated names, last first.
+//
+// The replace method removes anything matching the pattern
+// and replaces it with the memorized string—second memorized portion
+// followed by comma space followed by first memorized portion.
+//
+// The variables $1 and $2 refer to the portions
+// memorized while matching the pattern.
+
+output.push("---------- After Split by Regular Expression");
+
+var i, len;
+for (i = 0, len = nameList.length; i &lt; len; i++){
+  output.push(nameList[i]);
+  bySurnameList[i] = nameList[i].replace(pattern, "$2, $1");
+}
+
+// Display the new array.
+output.push("---------- Names Reversed");
+for (i = 0, len = bySurnameList.length; i &lt; len; i++){
+  output.push(bySurnameList[i]);
+}
+
+// Sort by last name, then display the sorted array.
+bySurnameList.sort();
+output.push("---------- Sorted");
+for (i = 0, len = bySurnameList.length; i &lt; len; i++){
+  output.push(bySurnameList[i]);
+}
+
+output.push("---------- End");
+
+console.log(output.join("\n"));
+</pre>
+
+<h3 id="Using_special_characters_to_verify_input">Using special characters to verify input</h3>
+
+<p>In the following example, the user is expected to enter a phone number. When the user presses the "Check" button, the script checks the validity of the number. If the number is valid (matches the character sequence specified by the regular expression), the script shows a message thanking the user and confirming the number. If the number is invalid, the script informs the user that the phone number is not valid.</p>
+
+<p>Within non-capturing parentheses <code>(?:</code> , the regular expression looks for three numeric characters <code>\d{3}</code> OR <code>|</code> a left parenthesis <code>\(</code> followed by three digits<code> \d{3}</code>, followed by a close parenthesis <code>\)</code>, (end non-capturing parenthesis <code>)</code>), followed by one dash, forward slash, or decimal point and when found, remember the character <code>([-\/\.])</code>, followed by three digits <code>\d{3}</code>, followed by the remembered match of a dash, forward slash, or decimal point <code>\1</code>, followed by four digits <code>\d{4}</code>.</p>
+
+<p>The <code>Change</code> event activated when the user presses Enter sets the value of <code>RegExp.input</code>.</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
+    &lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
+    &lt;script type="text/javascript"&gt;
+      var re = /(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}/;
+      function testInfo(phoneInput){
+        var OK = re.exec(phoneInput.value);
+        if (!OK)
+          window.alert(phoneInput.value + " isn't a phone number with area code!");
+        else
+          window.alert("Thanks, your phone number is " + OK[0]);
+      }
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Enter your phone number (with area code) and then click "Check".
+        &lt;br&gt;The expected format is like ###-###-####.&lt;/p&gt;
+    &lt;form action="#"&gt;
+      &lt;input id="phone"&gt;&lt;button onclick="testInfo(document.getElementById('phone'));"&gt;Check&lt;/button&gt;
+    &lt;/form&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</div>
diff --git a/files/uk/web/javascript/guide/using_promises/index.html b/files/uk/web/javascript/guide/using_promises/index.html
new file mode 100644
index 0000000000..d3b986e51a
--- /dev/null
+++ b/files/uk/web/javascript/guide/using_promises/index.html
@@ -0,0 +1,363 @@
+---
+title: Використання промісів
+slug: Web/JavaScript/Guide/Using_promises
+tags:
+  - JavaScript
+  - Promise
+  - Посібник
+  - Проміс
+  - асинхронний
+translation_of: Web/JavaScript/Guide/Using_promises
+---
+<div>{{jsSidebar("JavaScript Guide")}}</div>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}}</div>
+
+<p>{{jsxref("Promise")}} (з англ. - "обіцянка", далі - "проміс") - це об'єкт, що відображає кінцеве завершення або невдачу асинхронної операції. Оскільки більшість людей є споживачами раніше створенних промісів, цей посібник спочатку пояснить споживання повернених промісів, а далі пояснить, як їх створювати.</p>
+
+<p>Проміс, по суті, є поверненим об'єктом, до якого ви прикріплюєте функції зворотного виклику, замість того, щоб передавати їх у функцію.</p>
+
+<p>Уявіть собі функцію <code>createAudioFileAsync()</code>, яка асинхронно генерує звуковий файл, маючи конфігураційний запис та дві функції зворотного виклику, одна викликається, якщо аудіофайл був успішно створений, а інша викликається, якщо виникає помилка.</p>
+
+<p>Ось код, який використовує <code>createAudioFileAsync()</code>:</p>
+
+<pre class="brush: js line-numbers  language-js notranslate">function successCallback(result) {
+  console.log("Аудіофайл створений за адресою: " + result);
+}
+
+function failureCallback(error) {
+  console.log("Під час створення аудіофайлу виникла помилка: " + error);
+}
+
+createAudioFileAsync(audioSettings, successCallback, failureCallback);
+</pre>
+
+<p>Замість цього, сучасні функції повертають проміс, до якого ви можете приєднати функції зворотного виклику:</p>
+
+<p>Якщо переписати функцію <code>createAudioFileAsync()</code>, щоб вона повертала проміс, її використання буде ось таким простим:</p>
+
+<pre class="brush: js notranslate">createAudioFileAsync(audioSettings).then(successCallback, failureCallback);</pre>
+
+<p>Це скорочений запис для:</p>
+
+<pre class="brush: js notranslate">const promise = createAudioFileAsync(audioSettings);
+promise.then(successCallback, failureCallback);</pre>
+
+<p>Ми називаємо це <em>асинхронним викликом функції</em>.  Ця конвенція має декілька переваг. Ми дослідимо кожну з них.</p>
+
+<h2 id="Гарантії">Гарантії</h2>
+
+<p>На відміну від старомодних колбеків, проміс постачається з певними гарантіями:</p>
+
+<ul>
+ <li>Функції зворотного виклику ніколи не будуть викликані до <a href="/uk/docs/Web/JavaScript/EventLoop">завершення поточного виконання</a> циклу подій JavaScript.</li>
+ <li>Функції зворотного виклику, додані за допомогою <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then()</a></code>, навіть <em>після</em> успіху або невдачі асинхронної операції, будуть викликані, як наведено вище.</li>
+ <li>Можна додати більше одного зворотного виклику, викликавши метод <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then()</a></code> декілька разів. Кожен зворотний виклик виконується один за одним, у тому порядку, в якому вони були додані.</li>
+</ul>
+
+<p>Однією з величезних переваг промісів є <strong>ланцюгування</strong>.</p>
+
+<h2 id="Ланцюгування">Ланцюгування</h2>
+
+<p>Типовою потребою є виконання двох або більше асинхронних операцій одна за одною, коли кожна наступна операція починається, коли попередня успішно завершується, з результатом з попереднього кроку. Ми досягаємо цього, створюючи <strong>ланцюжок промісів</strong>.</p>
+
+<p>Ось вам магія: функція <code>then()</code> повертає <strong>новий проміс</strong>, що відрізняється від оригіналу:</p>
+
+<pre class="brush: js notranslate">const promise = doSomething();
+const promise2 = promise.then(successCallback, failureCallback);
+</pre>
+
+<p>або</p>
+
+<pre class="brush: js notranslate">const promise2 = doSomething().then(successCallback, failureCallback);
+</pre>
+
+<p>Цей другий проміс (<code>promise2</code>) представляє собою завершення не тільки <code>doSomething()</code>, але й <code>successCallback</code> або <code>failureCallback</code>, які ви передали, вони, в свою чергу, можуть бути іншими асинхронними функціями, що повертають проміс. В цьому випадку будь-які функції зворотного виклику, додані до <code>promise2</code>, стають в чергу за промісом, що повертається <code>successCallback</code> чи <code>failureCallback</code>.</p>
+
+<p>По суті, кожен проміс відображає завершення іншого асинхроннго кроку в ланцюжку.</p>
+
+<p>В старі часи виконання декількох асинхронних операцій підряд призвело б до класичної піраміди смерті з колбеків:</p>
+
+<pre class="brush: js notranslate">doSomething(function(result) {
+  doSomethingElse(result, function(newResult) {
+    doThirdThing(newResult, function(finalResult) {
+      console.log('Ось фінальний результат: ' + finalResult);
+    }, failureCallback);
+  }, failureCallback);
+}, failureCallback);
+</pre>
+
+<p>З сучасними функціями замість цього ми приєднуємо наші функції зворотного виклику до промісів, що повертаються, формуючи ланцюжок промісів.</p>
+
+<pre class="brush: js notranslate">doSomething().then(function(result) {
+  return doSomethingElse(result);
+})
+.then(function(newResult) {
+  return doThirdThing(newResult);
+})
+.then(function(finalResult) {
+  console.log('Ось фінальний результат: ' + finalResult);
+})
+.catch(failureCallback);
+</pre>
+
+<p>Аргументи до <code>then</code> є необов'язковими, а <code>catch(failureCallback)</code> - це скорочений запис для  <code>then(null, failureCallback)</code>. Ви можете побачити це, виражене за допомогою <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкових функцій</a>:</p>
+
+<pre class="brush: js notranslate">doSomething()
+.then(result =&gt; doSomethingElse(result))
+.then(newResult =&gt; doThirdThing(newResult))
+.then(finalResult =&gt; {
+  console.log(`Ось фінальний результат: ${finalResult}`);
+})
+.catch(failureCallback);
+</pre>
+
+<p><strong>Важливо</strong>: Завжди повертайте результати, інакше функції зворотного виклику не перехоплять результат попереднього проміса (у стрілкових функціях <code>() =&gt; x</code> є скороченим записом для <code>() =&gt; { return x; }</code>).</p>
+
+<h3 id="Ланцюгування_після_catch">Ланцюгування після catch</h3>
+
+<p>Ланцюгувати <em>після </em>невдачі можливо, наприклад, <code>catch</code> є корисним у разі виконання нових операцій навіть після того, як операція у ланцюжку завершилась неуспішно. Дивіться наступний приклад:</p>
+
+<pre class="brush: js notranslate">new Promise((resolve, reject) =&gt; {
+    console.log('Початковий');
+
+    resolve();
+})
+.then(() =&gt; {
+    throw new Error('Щось пішло не так');
+
+    console.log('Зробити це');
+})
+.catch(() =&gt; {
+    console.log('Зробити те');
+})
+.then(() =&gt; {
+    console.log('Зробити це, що б не відбувалось раніше');
+});
+
+</pre>
+
+<p>Це виведе наступний текст:</p>
+
+<pre class="notranslate">Початковий
+Зробити те
+Зробити це, що б не відбувалось раніше
+</pre>
+
+<p><strong>Зауважте:</strong> Текст "Зробити це" не був виведений, тому що помилка "Щось пішло не так" спричинила відхилення.</p>
+
+<h2 id="Спливання_помилок">Спливання помилок</h2>
+
+<p>Ви, можливо, пригадуєте, що тричі бачили <code>failureCallback</code> раніше, у піраміді смерті, у порівнянні з лише одним викликом наприкінці ланцюжку промісів.</p>
+
+<pre class="brush: js notranslate">doSomething()
+.then(result =&gt; doSomethingElse(value))
+.then(newResult =&gt; doThirdThing(newResult))
+.then(finalResult =&gt; console.log(`Ось фінальний результат: ${finalResult}`))
+.catch(failureCallback);
+</pre>
+
+<p>Якщо виникає виняток, переглядач передивляється ланцюжок у пошуках обробників <code>catch</code> або <code>onRejected</code>. Це дуже схоже на модель того, як працює синхронний код:</p>
+
+<pre class="brush: js notranslate">try {
+  let result = syncDoSomething();
+  let newResult = syncDoSomethingElse(result);
+  let finalResult = syncDoThirdThing(newResult);
+  console.log(`Ось фінальний результат: ${finalResult}`);
+} catch(error) {
+  failureCallback(error);
+}
+</pre>
+
+<p>Ця симетрія з асинхронним кодом сягає кульмінації в синтаксичному цукрі <a href="/uk/docs/Web/JavaScript/Reference/Statements/async_function"><code>async</code>/<code>await</code></a> в ECMAScript 2017:</p>
+
+<pre class="brush: js notranslate">async function foo() {
+  try {
+    let result = await doSomething();
+    let newResult = await doSomethingElse(result);
+    let finalResult = await doThirdThing(newResult);
+    console.log(`Ось фінальний результат: ${finalResult}`);
+  } catch(error) {
+    failureCallback(error);
+  }
+}
+</pre>
+
+<p>Він будується на промісах, наприклад, <code>doSomething()</code> - це та сама функція, що й раніше. Ви можете прочитати більше про синтаксис <a href="https://developers.google.com/web/fundamentals/primers/async-functions">тут</a>.</p>
+
+<p>Проміси виправляють фундаментальну хибу з пірамідою смерті, перехоплюючи всі помилки, навіть викинуті винятки та помилки программування. Це критично важливо для функціональної композиції асинхронних операцій.</p>
+
+<h2 id="Події_відхилення_промісів">Події відхилення промісів</h2>
+
+<p>Коли проміс відхиляється, одна з двох подій надсилається у глобальну область видимості (загалом, це або <a href="/uk/docs/Web/API/Window"><code>window</code></a>, або, при використанні у веб-виконавці, це <a href="/uk/docs/Web/API/Worker"><code>Worker</code></a> або інший інтерфейс на базі виконавців). Ці дві події наступні:</p>
+
+<dl>
+ <dt><a href="/uk/docs/Web/API/Window/rejectionhandled_event" title="Подія rejectionhandled надсилається у глобальну область видимості скрипта (зазвичай, window, але також і Worker), коли об'єкт JavaScript Promise відхиляється, але після того, як відхилення було оброблене."><code>rejectionhandled</code></a></dt>
+ <dd>Надсилається, коли проміс відхиляється, після того, як відхилення було оброблене функцією виконавця <code>reject</code>.</dd>
+ <dt><a href="/uk/docs/Web/API/Window/unhandledrejection_event" title="Подія unhandledrejection надсилається у глобальну область видимості скрипта, коли об'єкт JavaScript Promise, який не має обробника відхилення, відхиляється; зазвичай, це window, але також може бути Worker."><code>unhandledrejection</code></a></dt>
+ <dd>Надсилається, коли проміс відхиляється, але немає доступного обробника відхилення.</dd>
+</dl>
+
+<p>У обох випадках подія (типу <a href="/uk/docs/Web/API/PromiseRejectionEvent" title="Інтерфейс PromiseRejectionEvent відображає події, які надсилаються у глобальний контекст скрипта, коли об'єкти JavaScript Promise відхиляються."><code>PromiseRejectionEvent</code></a>) має в якості полів властивість <a href="/uk/docs/Web/API/PromiseRejectionEvent/promise"><code>promise</code></a>, яка вказує відхилений проміс, та властивість <a href="/uk/docs/Web/API/PromiseRejectionEvent/reason"><code>reason</code></a>, яка передає надану причину відхилення проміса.</p>
+
+<p>Це робить можливою резервну обробку помилок для промісів, а також допомагає відлагоджувати проблеми в управлінні промісами. Ці обробники є глобальними за контекстом, тому усі помилки потраплятимуть в однакові обробники подій, незалежно від джерела.</p>
+
+<p>Один випадок особливої корисності: при написанні коду для {{Glossary("Node.js")}}, зазвичай, модулі, які ви включаєте у свій проект, можуть мати необроблені відхилені проміси. Вони виводяться у консоль середовищем виконання Node. Ви можете перехопити їх для аналізу та обробити у своєму коді — або просто уникнути захаращення ними виводу даних — додавши обробник події <a href="/uk/docs/Web/API/Window/unhandledrejection_event"><code>unhandledrejection</code></a>, ось так:</p>
+
+<pre class="brush: js notranslate">window.addEventListener("unhandledrejection", event =&gt; {
+  /* Ви можете почати тут, додавши код, щоб дослідити
+     вказаний проміс через event.promise та причину у
+     event.reason */
+
+  event.preventDefault();
+}, false);</pre>
+
+<p>Викликавши метод події <a href="/uk/docs/Web/API/Event/preventDefault" title="Метод інтерфейсу Event preventDefault() каже програмному агенту, що, якщо подія не була явно оброблена, її дія за замовчуванням не має виконуватись."><code>preventDefault()</code></a>, ви кажете середовищу виконання JavaScript не виконувати дію за замовчуванням, коли відхилений проміс лишається необробленим. Ця дія зазвичай містить виведення помилки у консоль, а це якраз випадок для Node.</p>
+
+<p>В ідеалі, звісно, ви маєте досліджувати відхилені проміси, щоб бути певними, що жоден з них не є насправді помилкою коду, перед тим, як відкидати ці події.</p>
+
+<h2 id="Створення_промісу_на_основі_старого_API_зі_зворотним_викликом">Створення промісу на основі старого API зі зворотним викликом</h2>
+
+<p>{{jsxref("Promise","Проміс")}} може бути створенний з нуля за допогою свого конструктора. Це необхідно лише для обгортки старих API.</p>
+
+<p>В ідеальному світі всі асинхронні функції повертали б проміси. На жаль, деякі API досі очікують старомодну передачу функцій зворотного виклику для успіху та/або невдачі. Найбільш очевидним прикладом є функція {{domxref("WindowTimers.setTimeout", "setTimeout()")}} :</p>
+
+<pre class="brush: js notranslate">setTimeout(() =&gt; saySomething("Пройшло 10 секунд"), 10000);
+</pre>
+
+<p>Змішування старомодних зворотних викликів та промісів є проблематичним. Якщо <code>saySomething</code> завершиться невдачею або міститиме помилку программування, ніщо її не перехопить.</p>
+
+<p>На щастя, ми можемо обгорнути <code>saySomething</code> у проміс. Найкращою практикою вважається обгортати проблематичні функції на якомога нижчому рівні і вже ніколи не звертатись до них прямо.</p>
+
+<pre class="brush: js notranslate">const wait = ms =&gt; new Promise(resolve =&gt; setTimeout(resolve, ms));
+
+wait(10000).then(() =&gt; saySomething("10 секунд")).catch(failureCallback);
+</pre>
+
+<p>По суті, конструктор промісу приймає функцію виконання, яка дозволяє вирішити або відхилити проміс вручну. Оскільки <code>setTimeout</code>, насправді, ніколи не завершується невдало, ми пропускаємо функцію відхилення в цьому випадку.</p>
+
+<h2 id="Композиція">Композиція</h2>
+
+<p>Методи {{jsxref("Promise.resolve()")}} та {{jsxref("Promise.відхилено", "Promise.reject()")}} є скороченими записами для створення вручну вже вирішених або відхилених промісів відповідно. Інколи це може бути корисно.</p>
+
+<p>Методи {{jsxref("Promise.all()")}} та {{jsxref("Promise.race()")}} є двома інструментами композиції для паралельного виконання асинхронних операції.</p>
+
+<p>Ми можемо почати операції паралельно та чекати, доки вони усі не завершаться ось так:</p>
+
+<pre class="brush: js notranslate">Promise.all([func1(), func2(), func3()])
+.then(([result1, result2, result3]) =&gt; { /* використати result1, result2 та result3 */ });</pre>
+
+<p>Послідовна композиція можлива з використанням певного розумного JavaScript:</p>
+
+<pre class="brush: js notranslate">[func1, func2, func3].reduce((p, f) =&gt; p.then(f), Promise.resolve())
+.then(result3 =&gt; { /* використати result3 */ });</pre>
+
+<p>По суті, ми зменшуємо масив асинхронних функцій до ланцюжка промісів, еквівалентного: <code>Promise.resolve().then(func1).then(func2).then(func3);</code></p>
+
+<p>Це можна перетворити на композиційну функцію багаторазового використання, що є типовим у функціональному програмуванні:</p>
+
+<pre class="brush: js notranslate">const applyAsync = (acc,val) =&gt; acc.then(val);
+const composeAsync = (...funcs) =&gt; x =&gt; funcs.reduce(applyAsync, Promise.resolve(x));</pre>
+
+<p>Функція <code>composeAsync()</code> прийме будь-яку кількість функцій в якості аргументів і поверне нову функцію, яка приймає початкове значення, що має пройти крізь конвеєр композиції:</p>
+
+<pre class="brush: js notranslate">const transformData = composeAsync(func1, func2, func3);
+const result3 = transformData(data);
+</pre>
+
+<p>В ECMAScript 2017 послідовну композицію можна виконати простіше, за допомогою async/await:</p>
+
+<pre class="brush: js notranslate">let result;
+for (const f of [func1, func2, func3]) {
+  result = await f(result);
+}
+/* використати останній результат (тобто, result3) */</pre>
+
+<h2 id="Хронометраж">Хронометраж</h2>
+
+<p>Щоб уникнути сюрпризів, функції, передані до <code>then()</code>, ніколи не викликатимуться синхронно, навіть для вже вирішеного проміса:</p>
+
+<pre class="brush: js notranslate">Promise.resolve().then(() =&gt; console.log(2));
+console.log(1); // 1, 2
+</pre>
+
+<p>Замість негайного виконання, передані функції ставляться у чергу мікрозадач. Це означає, що вони виконуються пізніше, коли черга стає порожньою в кінці поточного виконання циклу подій JavaScript, тобто, досить скоро:</p>
+
+<pre class="brush: js notranslate">const wait = ms =&gt; new Promise(resolve =&gt; setTimeout(resolve, ms));
+
+wait().then(() =&gt; console.log(4));
+Promise.resolve().then(() =&gt; console.log(2)).then(() =&gt; console.log(3));
+console.log(1); // 1, 2, 3, 4
+</pre>
+
+<h2 id="Вкладеність">Вкладеність</h2>
+
+<p>Прості ланцюжки промісів найкраще тримати рівними, без вкладень, оскільки вкладення можуть бути результатом недбалої композиції. Дивіться <a href="#Типові_помилки">типові помилки</a>.</p>
+
+<p>Вкладеність є контролюючою структурою для обмеження області видимості блоків <code>catch</code>. Зокрема, вкладений <code>catch</code> перехоплює лише помилки своєї області видимості та нижче, але не ті помилки, що знаходяться вище у ланцюжку поза вкладеною областю видимості. При правильному використанні це надає більшу точність у виявленні помилок:</p>
+
+<pre class="brush: js notranslate">doSomethingCritical()
+.then(result =&gt; doSomethingOptional(result)
+  .then(optionalResult =&gt; doSomethingExtraNice(optionalResult))
+  .catch(e =&gt; {})) // Ігнорувати, якщо не працює щось другорядне; продовжити.
+.then(() =&gt; moreCriticalStuff())
+.catch(e =&gt; console.error("Критична помилка: " + e.message));</pre>
+
+<p>Зауважте, що необов'язкові кроки тут вкладені, не для відступів, але для передбачливого розташування зовнішніх дужок <code>(</code> та <code>)</code> навколо.</p>
+
+<p>Внутрішній нейтралізуючий блок <code>catch</code> перехоплює помилки тільки від <code>doSomethingOptional()</code> та <code>doSomethingExtraNice()</code>, після чого виконання коду продовжується у <code>moreCriticalStuff()</code>. Що важливо, якщо функція <code>doSomethingCritical()</code> завершується невдало, її помилка перехоплюється тільки кінцевим (зовнішнім) блоком <code>catch</code>.</p>
+
+<h2 id="Типові_помилки">Типові помилки</h2>
+
+<p>Ось деякі типові помилки, яких варто остерігатися при складанні ланцюжків промісів. Декілька з цих помилок проявляються у наступному прикладі:</p>
+
+<pre class="brush: js example-bad notranslate">// Поганий приклад! Помічено 3 помилки!
+
+doSomething().then(function(result) {
+  doSomethingElse(result) // Забули повернути проміс з внутрішнього ланцюжка + непотрібне вкладення
+  .then(newResult =&gt; doThirdThing(newResult));
+}).then(() =&gt; doFourthThing());
+// Забули завершити ланцюжок блоком catch!
+&lt;/pre&gt;</pre>
+
+<p>Перша помилка - не завершувати ланцюжки як слід. Це відбувається, коли ми створюємо новий проміс, але забуваємо його повернути. Як наслідок, ланцюг переривається, чи, скоріше, ми отримуємо два конкуруючі ланцюжки. Це означає, що <code>doFourthThing()</code> не чекатиме на завершення <code>doSomethingElse()</code> чи <code>doThirdThing()</code> і запуститься паралельно з ними, скоріше за все, ненавмисно. В окремих ланцюжках також окремо обробляються помилки, що призводить до неперехоплених помилок.</p>
+
+<p>Друга помилка - непотрібна вкладеність, що уможливлює першу помилку. Вкладеність також обмежує область видимості внутрішніх обробників помилок, а це — якщо зроблене ненавмисно — може призвести до неперехоплених помилок. Варіантом цього є <a href="https://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it">антишаблон конструювання промісів</a>, який поєднує вкладення з надлишковим використанням конструктора промісів для загортання коду, який вже використовує проміси.</p>
+
+<p>Третя помилка - забувати завершувати ланцюжки блоком <code>catch</code>. Незавершені ланцюжки промісів призводять до неперехоплених відхилень промісів у більшості переглядачів.</p>
+
+<p>Гарний практичний підхід - завжди або повертати, або завершувати ланцюжки промісів, і, як тільки ви отримуєте новий проміс, повертати його негайно, щоб вирівняти ланцюжок:</p>
+
+<pre class="brush: js example-good notranslate">doSomething()
+.then(function(result) {
+  return doSomethingElse(result);
+})
+.then(newResult =&gt; doThirdThing(newResult))
+.then(() =&gt; doFourthThing())
+.catch(error =&gt; console.error(error));</pre>
+
+<p>Зауважте, що <code>() =&gt; x</code> є скороченням для <code>() =&gt; { return x; }</code>.</p>
+
+<p>Тепер ми маємо єдиний, детермінований ланцюжок з правильною обробкою помилок.</p>
+
+<p>Використання <a href="/uk/docs/Web/JavaScript/Reference/Statements/async_function"><code>async</code>/<code>await</code></a> вирішує більшість, якщо не всі ці проблеми — натомість, найпоширенішою помилкою при використанні цього синтаксису є забуте ключове слово <a href="/uk/docs/Web/JavaScript/Reference/Statements/async_function"><code>await</code></a>.</p>
+
+<h2 id="Коли_зустрічаються_задачі_та_проміси">Коли зустрічаються задачі та проміси</h2>
+
+<p>Якщо ви стикаєтеся з ситуаціями, коли у вас є проміси та задачі (такі, як події або зворотні виклики), які запускаються у непередбачуваному порядку, можливо, вам буде корисно скористатись мікрозадачами, щоб перевірити статус або збалансувати проміси, коли створення промісів залежить від певних умов.</p>
+
+<p>Якщо ви вважаєте, що мікрозадачі могли б вирішити цю проблему, дивіться <a href="/uk/docs/Web/API/HTML_DOM_API/Microtask_guide">посібник з мікрозадач</a>, щоб дізнатись, як використовувати метод <code><a href="/uk/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask" title="The queueMicrotask() method, which is exposed on the Window or Worker interface, queues a microtask to be executed at a safe time prior to control returning to the browser's event loop.">queueMicrotask()</a></code>, щоб поставити функцію у чергу як мікрозадачу.</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Promise.then()")}}</li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/async_function"><code>async</code>/<code>await</code></a> </li>
+ <li><a href="http://promisesaplus.com/">Promises/A+ specification</a></li>
+ <li><a href="https://medium.com/@ramsunvtech/promises-of-promise-part-1-53f769245a53">Venkatraman.R - JS Promise (Part 1, Basics)</a></li>
+ <li><a href="https://medium.com/@ramsunvtech/js-promise-part-2-q-js-when-js-and-rsvp-js-af596232525c#.dzlqh6ski">Venkatraman.R - JS Promise (Part 2 - Using Q.js, When.js and RSVP.js)</a></li>
+ <li><a href="https://tech.io/playgrounds/11107/tools-for-promises-unittesting/introduction">Venkatraman.R - Tools for Promises Unit Testing</a></li>
+ <li><a href="http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">Nolan Lawson: We have a problem with promises — Common mistakes with promises</a></li>
+</ul>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}}</p>
diff --git a/files/uk/web/javascript/guide/working_with_objects/index.html b/files/uk/web/javascript/guide/working_with_objects/index.html
new file mode 100644
index 0000000000..214bae97aa
--- /dev/null
+++ b/files/uk/web/javascript/guide/working_with_objects/index.html
@@ -0,0 +1,490 @@
+---
+title: Робота з об'єктами
+slug: Web/JavaScript/Guide/Working_with_Objects
+tags:
+  - JavaScript
+  - Object
+  - Документ
+  - Об'єкт
+  - Посібник
+translation_of: Web/JavaScript/Guide/Working_with_Objects
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Keyed_collections", "Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model")}}</div>
+
+<p class="summary">Мова JavaScript базується на простій, заснованій на об'єктах парадигмі. Об'єкт - це колекція властивостей, а властивість - це асоціація між іменем (або <em>ключем</em>) та значенням. Значення властивості може бути функцією, в цьому випадку властивість відома як метод. На додачу до об'єктів, попередньо визначених у веб-переглядачі, ви можете визначати власні об'єкти. Цей розділ описує, як використовувати об'єкти, властивості, функції та методи, і як створювати власні об'єкти.</p>
+
+<h2 id="Огляд_обєктів">Огляд об'єктів</h2>
+
+<p>Об'єкти у JavaScript, як і у багатьох інших мовах програмування, можна порівняти з об'єктами у реальному житті. Концепію об'єктів у JavaScript можна зрозуміти на прикладі матеріальних об'єктів з реального життя.</p>
+
+<p>У JavaScript об'єкт - це окрема сутність з властивостями та типом. Порівняємо його, для прикладу, з чашкою. Чашка - це об'єкт з властивостями. Чашка має колір, дизайн, вагу, матеріал, з якого вона зроблена, і т.д. Так само, об'єкти JavaScript можуть мати властивості, які визначають їхні характеристики.</p>
+
+<h2 id="Обєкти_та_властивості">Об'єкти та властивості</h2>
+
+<p>Об'єкт JavaScript має асоційовані з ним властивості. Властивість об'єкта можна описати як змінну, прикріплену до об'єкта. Властивості об'єкта - це, загалом, те саме, що й звичайні змінні JavaScript, але прикріплені до об'єктів. Властивості об'єкта визначають характеристики об'єкта. Ви звертаєтесь до властивостей об'єкта через просту крапкову нотацію:</p>
+
+<pre class="brush: js notranslate">objectName.propertyName
+</pre>
+
+<p>Як усі змінні JavaScript, і ім'я об'єкта (яке може бути звичайною змінною), і ім'я властивості чутливі до регістру. Ви можете визначити властивість, присвоївши їй значення. Наприклад, створимо об'єкт на ім'я <code>myCar</code> (моя машина) та дамо йому властивості <code>make</code> (виробник), <code>model</code> (модель) та <code>year</code> (рік) ось так:</p>
+
+<pre class="brush: js notranslate">var myCar = new Object();
+myCar.make = 'Ford';
+myCar.model = 'Mustang';
+myCar.year = 1969;
+</pre>
+
+<p>Наведений приклад також міг бути написаний за допомогою <strong><a href="#Використання_обєктних_ініціалізаторів">об'єктного ініціалізатора</a></strong>, який є списком з нуля чи більше розділених комами пар імен властивостей об'єкта та асоційованих з ними значень, записаний у фігурних дужках (<code>{}</code>):</p>
+
+<pre class="brush: js notranslate">var myCar = {
+    make: 'Ford',
+    model: 'Mustang',
+    year: 1969
+};
+</pre>
+
+<p>Неприсвоєні властивості об'єкта мають значення {{jsxref("undefined")}} (а не {{jsxref("null")}}).</p>
+
+<pre class="brush: js notranslate">myCar.color; // undefined</pre>
+
+<p>До властивостей об'єктів JavaScript також можна звертатись чи присвоювати їх за допомогою дужкової нотації (щоб дізнатись більше, дивіться <a href="/uk/docs/Web/JavaScript/Reference/Operators/Property_Accessors">доступ до властивостей</a>). Об'єкти іноді називають <em>асоціативними масивами</em>, оскільки кожна властивість асоціюється з рядковим значенням, яке можна використати для доступу до неї. Отже, для прикладу, ви можете звертатись до властивостей об'єкта <code>myCar</code> наступним чином:</p>
+
+<pre class="brush: js notranslate">myCar['make'] = 'Ford';
+myCar['model'] = 'Mustang';
+myCar['year'] = 1969;
+</pre>
+
+<p>Ім'я властивості об'єкта може бути будь-яким дозволеним рядком JavaScript чи будь-чим, що можна привести до рядка, в тому числі порожній рядок. Однак, будь-яке ім'я властивості, яке не є дозволеним ідентифікатором JavaScript (наприклад, ім'я властивості, що містить пробіл чи дефіс, або починається з цифри) доступне тільки через позначення у квадратних дужках. Ця нотація також дуже корисна, коли імена властивостей мають бути динамічно визначені (коли ім'я властивості не визначене до початку виконання). Приклади наступні:</p>
+
+<pre class="brush: js notranslate">// створюємо одночасно чотири змінні, розділені комами,
+// та присвоюємо їм значення
+var myObj = new Object(),
+    str = 'myString',
+    rand = Math.random(),
+    obj = new Object();
+
+myObj.type              = 'крапковий синтаксис';
+myObj['date created']   = 'рядок з пробілом';
+myObj[str]              = 'рядкове значення';
+myObj[rand]             = 'випадкове число';
+myObj[obj]              = 'об\'єкт';
+myObj['']               = 'навіть порожній рядок';
+
+console.log(myObj);
+</pre>
+
+<p>Будь ласка, зауважте, що усі ключі, позначені у квадратних дужках, перетворюються на рядки, якщо тільки вони не є символами, оскільки імена властивостей (ключів) об'єктів JavaScript можуть бути тільки рядками або символами (в якийсь момент також будуть додані приватні імена, з розвитком <a href="https://github.com/tc39/proposal-class-fields">пропозиції щодо полів класу</a>, але вони не використовуватимуться у формі <code>[]</code>). Наприклад, у наведеному вище коді, коли ключ <code>obj</code> додається до об'єкта <code>myObj</code>, JavaScript викличе метод {{jsxref("Object.toString", "obj.toString()")}} та використає отриманий рядок як новий ключ.</p>
+
+<p>Ви також можете звернутись до властивості, використавши рядкове значення, що зберігається у змінній:</p>
+
+<pre class="brush: js notranslate">var propertyName = 'make';
+myCar[propertyName] = 'Ford';
+
+propertyName = 'model';
+myCar[propertyName] = 'Mustang';
+</pre>
+
+<p>Ви можете використати дужкову нотацію з циклом <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> для перебору усіх перелічуваних властивостей об'єкта. Для ілюстрації того, як це працює, наступна функція відображає властивості об'єкта, коли ви передаєте об'єкт та ім'я об'єкта в якості аргументів у функцію:</p>
+
+<pre class="brush: js notranslate">function showProps(obj, objName) {
+  var result = ``;
+  for (var i in obj) {
+    // obj.hasOwnProperty() відфільтровує властивості від ланцюга прототипів об'єкта
+    if (obj.hasOwnProperty(i)) {
+      result += `${objName}.${i} = ${obj[i]}\n`;
+    }
+  }
+  return result;
+}
+</pre>
+
+<p>Отже, виклик функції <code>showProps(myCar, "myCar")</code> поверне наступне:</p>
+
+<pre class="brush: js notranslate">myCar.make = Ford
+myCar.model = Mustang
+myCar.year = 1969</pre>
+
+<h2 id="Перелік_властивостей_обєкта">Перелік властивостей об'єкта</h2>
+
+<p>Починаючи з <a href="/uk/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla" title="en-US/docs/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5</a>, існують три вбудовані методи перелічити / продивитись властивості об'єкта:</p>
+
+<ul>
+ <li>цикли <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a></code><br>
+  Цей метод продивляється усі перелічувані властивості об'єкта та його ланцюжок прототипів</li>
+ <li>{{jsxref("Object.keys", "Object.keys(o)")}}<br>
+  Цей метод повертає масив з іменами усіх особистих (не з ланцюга прототипів) перелічуваних властивостей ("ключів") об'єкта <code>o</code>.</li>
+ <li>{{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(o)")}}<br>
+  Цей метод повертає масив, що містить імена усіх особистих властивостей (перелічуваних чи ні) об'єкта <code>o</code>.</li>
+</ul>
+
+<p>До ECMAScript 5 не існувало вбудованого способу перелічити усі властивості об'єкта. Однак, цього можна досягти наступною функцією:</p>
+
+<pre class="brush: js notranslate">function listAllProperties(o) {
+	var objectToInspect;
+	var result = [];
+
+	for(objectToInspect = o; objectToInspect !== null;
+           objectToInspect = Object.getPrototypeOf(objectToInspect)) {
+        result = result.concat(
+            Object.getOwnPropertyNames(objectToInspect)
+        );
+    }
+
+	return result;
+}
+</pre>
+
+<p>Це може бути корисним для виявлення "схованих" властивостей (властивостей у ланцюгу прототипів, які недоступні через об'єкт, тому що інша властивість з таким самим іменем зустрічається у ланцюгу раніше). Список лише доступних властивостей можна легко зробити, прибравши дублікати у масиві.</p>
+
+<h2 id="Створення_нових_обєктів">Створення нових об'єктів</h2>
+
+<p>JavaScript має чимало попередньо визначених об'єктів. На додачу, ви можете створювати свої власні об'єкти. Ви можете створити об'єкт за допомогою <a href="/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів">об'єктного ініціалізатора</a>. Або ви можете спочатку створити функцію-конструктор, після чого створювати об'єкти, використовуючи оператор <code>new</code>.</p>
+
+<h3 id="Використання_обєктних_ініціалізаторів"><span id="Object_initializers">Використання об'єктних ініціалізаторів</span></h3>
+
+<p>На додачу до створення об'єктів за допомогою функції-конструктора, ви можете створювати об'єкти, використовуючи <a href="/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів">об'єктний ініціалізатор</a>. Використання об'єктних ініціалізаторів іноді називають створенням об'єктів літеральною нотацією. "Об'єктний ініціалізатор" відповідає термінології, що використовується у мові C++.</p>
+
+<p>Синтаксис об'єкта, що використовує об'єктний ініціалізатор, наступний:</p>
+
+<pre class="brush: js notranslate">var obj = { property_1:   value_1,   // property_# може бути ідентифікатором...
+            2:            value_2,   // або числом...
+            // ...,
+            'property n': value_n }; // або рядком
+</pre>
+
+<p>де <code>obj</code> - ім'я нового об'єкта, кожне ім'я <code>property_<var>i</var></code> є ідентифікатором (або числом, або рядковим літералом), а кожне значення <code>value_<var>i</var></code> є виразом, чиє значення присвоюється властивості <code>property_<var>i</var></code>. Змінна <code>obj</code> та присвоєння є необов'язковими; якщо вам непотрібно звертатись до цього об'єкта будь-де, вам непотрібно присвоювати його змінній. (Зауважте, що вам може знадобитись загорнути об'єктний літерал у круглі дужки, якщо об'єкт з'являється там, де очікується інструкція, щоб літерал не був прийнятий за блочну інструкцію.)</p>
+
+<p>Об'єктні ініціалізатори є виразами, а кожний об'єктний ініціалізатор створює новий об'єкт, коли виконується інструкція, де він знаходиться. Ідентичні об'єктні ініціалізатори створюють окремі об'єкти, які не вважатимуться рівними. Об'єкти створюються так, ніби відбувся виклик <code>new Object()</code>; тобто, об'єкти, створені об'єктними літералами, є екземплярами <code>Object</code>.</p>
+
+<p>Наступна інструкція створює об'єкт та присвоює його змінній <code>x</code> тільки за умови, що вираз <code>cond</code> є правдивим:</p>
+
+<pre class="brush: js notranslate">if (cond) var x = {greeting: 'привітик'};
+</pre>
+
+<p>Наступний приклад створює об'єкт <code>myHonda</code> з трьома властивостями. Зауважте, що властивість <code>engine</code> також є об'єктом зі своїми властивостями.</p>
+
+<pre class="brush: js notranslate">var myHonda = {color: 'червоний', wheels: 4, engine: {cylinders: 4, size: 2.2}};
+</pre>
+
+<p>Ви також можете використовувати об'єктні ініціалізатори для створення масивів. Дивіться <a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types#Масивні_літерали">масивні літерали</a>.</p>
+
+<h3 id="Використання_функції-конструктора">Використання функції-конструктора</h3>
+
+<p>Також ви можете створити об'єкт, виконавши ці два кроки:</p>
+
+<ol>
+ <li>Визначити тип об'єкта, написавши функцію-конструктор. Загальноприйнято, і на це є причини, писати їх з великої літери.</li>
+ <li>Створити екземпляр об'єкта за допомогою <code>new</code>.</li>
+</ol>
+
+<p>Щоб визначити тип об'єкта, створіть функцю для типу об'єкта, яка визначає його ім'я, властивості та методи. Наприклад, припустимо, ви хочете створити тип об'єкта для автомобілів. Ви хочете, щоб цей тип об'єкта називався <code>Car</code>, і ви хочете, щоб він мав властивості для виробника, моделі та року. Щоб це зробити, ви б написали наступну функцію:</p>
+
+<pre class="brush: js notranslate">function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+</pre>
+
+<p>Зверніть увагу на використання <code>this</code> для присвоєння значень властивостям об'єкта на основі значень, переданих у функцію.</p>
+
+<p>Тепер ви можете створити об'єкт на ім'я <code>mycar</code> наступним чином:</p>
+
+<pre class="brush: js notranslate">var mycar = new Car('Eagle', 'Talon TSi', 1993);
+</pre>
+
+<p>Ця інструкція створює об'єкт <code>mycar</code> та присвоює вказані значення його властивостям. Тоді значенням <code>mycar.make</code> є рядок "Eagle", <code>mycar.year</code> дорівнює цілому число 1993 і т.д.</p>
+
+<p>Ви можете створити довільне число об'єктів <code>Car</code> викликами <code>new</code>. Наприклад,</p>
+
+<pre class="brush: js notranslate">var kenscar = new Car('Nissan', '300ZX', 1992);
+var vpgscar = new Car('Mazda', 'Miata', 1990);
+</pre>
+
+<p>Об'єкт може мати властивість, яка сама є іншим об'єктом. Наприклад, припустимо, ви визначаєте об'єкт <code>person</code> (людина) наступним чином:</p>
+
+<pre class="brush: js notranslate">function Person(name, age, sex) {
+  this.name = name;
+  this.age = age;
+  this.sex = sex;
+}
+</pre>
+
+<p>і далі створюєте два екземпляра об'єкта <code>person</code> наступним чином:</p>
+
+<pre class="brush: js notranslate">var rand = new Person('Rand McKinnon', 33, 'M');
+var ken = new Person('Ken Jones', 39, 'M');
+</pre>
+
+<p>Тоді ви можете переписати визначення <code>Car</code>, щоб включити властивість <code>owner</code> (власник), яка приймає об'єкт <code>person</code> ось так:</p>
+
+<pre class="brush: js notranslate">function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+}
+</pre>
+
+<p>Тепер, щоб створити нові об'єкти, ви зробите наступне:</p>
+
+<pre class="brush: js notranslate">var car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
+var car2 = new Car('Nissan', '300ZX', 1992, ken);
+</pre>
+
+<p>Зверніть увагу, що, замість передачі літералу рядка чи цілого числа під час створення нових об'єктів, наведені вище інструкції передають об'єкти <code>rand</code> та <code>ken</code> в якості значень власників. Тепер, якщо вам потрібно дізнатись ім'я власника <code>car2</code>, ви можете звернутись до наступної властивості:</p>
+
+<pre class="brush: js notranslate">car2.owner.name
+</pre>
+
+<p>Зауважте, що ви завжди можете додати властивість до попередньо визначеного об'єкта. Наприклад, інструкція</p>
+
+<pre class="brush: js notranslate">car1.color = 'чорний';
+</pre>
+
+<p>додає властивість <code>color</code> (колір) до <code>car1</code>, та присвоює їй значення "чорний." Однак, це не впливає на всі інші об'єкти. Щоб додати нову властивість до усіх об'єктів того самого типу, ви маєте додати властивість до визначення типу об'єкта <code>Car</code>.</p>
+
+<h3 id="Використання_методу_Object.create">Використання методу <code>Object.create</code></h3>
+
+<p>Об'єкти також можна створювати методом {{jsxref("Object.create()")}}. Цей метод може бути дуже корисним, тому що дозволяє обирати прототип для об'єкта, який ви хочете створити, без необхідності визначати функцію-конструктор.</p>
+
+<pre class="brush: js notranslate">// Властивості об'єкта Animal (тварина) та інкапсуляція методу
+var Animal = {
+  type: 'Безхребетні', // Значення властивості за замовчуванням
+  displayType: function() {  // Метод, що виводитиме тип тварини
+    console.log(this.type);
+  }
+};
+
+// Створити нову тварину з назвою animal1
+var animal1 = Object.create(Animal);
+animal1.displayType(); // виведе: Безхребетні
+
+// Створити нову тварину з назвою fish (риба)
+var fish = Object.create(Animal);
+fish.type = 'Риби';
+fish.displayType(); // виведе: Риби</pre>
+
+<h2 id="Наслідування">Наслідування</h2>
+
+<p>Усі об'єкти у JavaScript успадковуються від принаймні одного іншого об'єкта. Об'єкт, від якого наслідується інший об'єкт, відомий як прототип, а успадковані властивості можна знайти у об'єкті конструктора <code>prototype</code>. Щоб дізнатись більше, дивіться <a href="/uk/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Наслідування та ланцюжок прототипів</a>.</p>
+
+<h2 id="Індексування_властивостей_обєкта">Індексування властивостей об'єкта</h2>
+
+<p>Ви можете звернутись до властивості об'єкта або за іменем властивості, або за його оригінальним індексом. Якщо ви з самого початку визначили властивість за іменем, ви завжди маєте звертатись до неї за іменем, а якщо ви визначили властивість за індексом, ви завжди маєте звертатись до неї за індексом.</p>
+
+<p>Це обмеження працює, коли ви створюєте об'єкт та його властивості функцією-конструктором (як ми робили раніше з типом об'єкта <code>Car</code>) та коли ви явно визначаєте окремі властивості (наприклад, <code>myCar.color = "червоний"</code>). Якщо ви початково визначили властивість об'єкта з індексом, як от <code>myCar[5] = "25 mpg"</code>, ви далі звертаєтесь до властивості лише у вигляді <code>myCar[5]</code>.</p>
+
+<p>Винятком з цього правила є подібний до масиву об'єкт з HTML, такий як подібний до масиву об'єкт <code>forms</code>. Ви завжди можете посилатись на об'єкти у цих подібних до масивів об'єктах або за їхнім порядковим номером (в залежності від їхнього розташування у документі), або за іменем (якщо воно визначене). Наприклад, якщо другий тег <code>&lt;FORM&gt;</code> у документі має атрибут <code>NAME</code>, що дорівнює "myForm", ви можете звернутись до форми <code>document.forms[1]</code>, або <code>document.forms["myForm"]</code>, або <code>document.forms.myForm</code>.</p>
+
+<h2 id="Визначення_властивостей_для_типу_обєкта">Визначення властивостей для типу об'єкта</h2>
+
+<p>Ви можете додати властивість до попередньо визначеного типу об'єкта за допомогою властивості <code>prototype</code>. Це визначає властивість, спільну для усіх об'єктів вказаного типу, а не лише для одного екземпляру об'єкта. Наступний код додає властивість <code>color</code> (колір) до усіх об'єктів типу <code>Car</code> (автомобіль), після чого присвоює значення властивості <code>color</code> об'єкта <code>car1</code>.</p>
+
+<pre class="brush: js notranslate">Car.prototype.color = null;
+car1.color = 'чорний';
+</pre>
+
+<p>Щоб дізнатись більше, дивіться <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype" title="en-US/docs/JavaScript/Reference/Global Objects/Function/prototype">властивість <code>prototype</code></a> об'єкта <code>Function</code> у <a href="/uk/docs/Web/JavaScript/Reference">довіднику JavaScript</a>.</p>
+
+<h2 id="Визначення_методів">Визначення методів</h2>
+
+<p><em>Метод</em> - це функція, асоційована з об'єктом, або, простіше кажучи, метод - це властивість об'єкта, яка є функцією. Методи визначаються так само, як звичайні функції, за винятком того, що вони мають бути асоційовані з властивістю об'єкта. Дивіться більше подробиць у <a href="/uk/docs/Web/JavaScript/Reference/Functions/Method_definitions">визначенні методів</a>. Приклад наступний:</p>
+
+<pre class="brush: js notranslate">objectName.methodname = functionName;
+
+var myObj = {
+  myMethod: function(params) {
+    // ...зробити щось
+  }
+
+  // ТАКЕ ТЕЖ ПРАЦЮЄ
+
+  myOtherMethod(params) {
+    // ...зробити щось інше
+  }
+};
+</pre>
+
+<p>де <code>objectName</code> - це існуючий об'єкт, <code>methodname</code> - це ім'я, яке ви присвоюєте методу, а <code>functionName</code> - це ім'я функції.</p>
+
+<p>Далі ви можете викликати метод у контексті об'єкта наступним чином:</p>
+
+<pre class="brush: js notranslate">object.methodname(params);
+</pre>
+
+<p>Ви можете визначати методи для типу об'єкта, додавши визначення методів у конструктор об'єкта. Ви можете визначити функцію, що буде форматувати та відображати властивості попередньо визначених об'єктів <code>Car</code>; наприклад,</p>
+
+<pre class="brush: js notranslate">function displayCar() {
+  var result = `Чудовий автомобіль ${this.year} ${this.make} ${this.model}`;
+  pretty_print(result);
+}
+</pre>
+
+<p>де <code>pretty_print</code> - функція, що відображатиме горизонтальне правило та рядок. Зверніть увагу на використання <code>this</code> для посилання на об'єкт, до якого належить метод.</p>
+
+<p>Ви можете зробити цю функцію методом <code>Car</code>, додавши інструкцію</p>
+
+<pre class="brush: js notranslate">this.displayCar = displayCar;
+</pre>
+
+<p>до визначення об'єкта. Отже, повне визначення <code>Car</code> виглядатиме так</p>
+
+<pre class="brush: js notranslate">function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+  this.displayCar = displayCar;
+}
+</pre>
+
+<p>Тоді ви можете викликати метод <code>displayCar</code> для кожного об'єкта наступним чином:</p>
+
+<pre class="brush: js notranslate">car1.displayCar();
+car2.displayCar();
+</pre>
+
+<h2 id="Використання_this_у_посиланнях_на_обєкт">Використання <code>this</code> у посиланнях на об'єкт</h2>
+
+<p>JavaScript має спеціальне ключове слово <code><a href="/uk/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, яке ви можете використати всередині метода, щоб вказати на поточний об'єкт. Наприклад, припустимо, ви маєте 2 об'єкта, <code>Manager</code> та <code>Intern</code>. Кожен об'єкт має свої власні <code>name</code> (ім'я), <code>age</code> (вік) та <code>job</code> (роботу). У функції <code>sayHi()</code>, зверніть увагу, є <code>this.name</code>. Додані до 2-х об'єктів, вони можуть бути викликані та повернуть <code>'Привіт, мене звуть'</code>, а далі додають значення <code>name</code> з цього конкретного об'єкта. Як показано нижче. </p>
+
+<pre class="brush: js notranslate">const Manager = {
+  name: "Джон",
+  age: 27,
+  job: "Програміст"
+}
+const Intern= {
+  name: "Бен",
+  age: 21,
+  job: "Програміст-інтерн"
+}
+
+function sayHi() {
+    console.log('Привіт, мене звуть', this.name)
+}
+
+// додаємо функцію sayHi до обох об'єктів
+Manager.sayHi = sayHi;
+Intern.sayHi = sayHi;
+
+Manager.sayHi() // Привіт, мене звуть Джон
+Intern.sayHi() // Привіт, мене звуть Бен
+</pre>
+
+<p><code>this</code> посилається на об'єкт, в якому знаходиться. Ви можете створити нову функцію під назвою <code>howOldAmI()</code>, яка виводить повідомлення про те, скільки цій людині років. </p>
+
+<pre class="brush: js notranslate">function howOldAmI (){
+  console.log('Мені ' + this.age + ' років.')
+}
+Manager.howOldAmI = howOldAmI;
+Manager.howOldAmI() // Мені 27 років.
+</pre>
+
+<h2 id="Визначення_гетерів_та_сетерів">Визначення гетерів та сетерів</h2>
+
+<p><a href="/uk/docs/Web/JavaScript/Reference/Functions/get">Гетер</a> - це метод, який отримує значення конкретної властивості. <a href="/uk/docs/Web/JavaScript/Reference/Functions/set">Сетер</a> - це метод, який присвоює значення конкретній властивості. Ви можете визначати гетери та сетери на будь-якому існуючому базовому об'єкті чи об'єкті, створеному користувачем, якщо він підтримує додавання нових властивостей. </p>
+
+<p>Гетери та сетери можуть бути або</p>
+
+<ul>
+ <li>визначені за допомогою <a href="#Object_initializers">об'єктних ініціалізаторів</a>, або</li>
+ <li>додані пізніше до будь-якого об'єкта у будь-який час за допомогою методу додавання гетерів чи сетерів.</li>
+</ul>
+
+<p>При визначенні гетерів та сетерів за допомогою <a href="#Object_initializers">об'єктних ініціалізаторів </a>вам потрібно лише додати перед методом-гетером <code>get</code>, а перед методом-сетером <code>set</code>. Звісно, гетер не повинен очікувати на параметри, а сетер очікує рівно на один параметер (нове значення, яке треба присвоїти). Наприклад:</p>
+
+<pre class="brush: js notranslate">var o = {
+  a: 7,
+  get b() {
+    return this.a + 1;
+  },
+  set c(x) {
+    this.a = x / 2;
+  }
+};
+
+console.log(o.a); // 7
+console.log(o.b); // 8 &lt;-- В цьому місці запускається метод get b().
+o.c = 50;         //   &lt;-- В цьому місці запускається метод set c(x).
+console.log(o.a); // 25
+</pre>
+
+<p>Властивості об'єкта <code>o</code> наступні:</p>
+
+<ul>
+ <li><code>o.a</code> — число</li>
+ <li><code>o.b</code> — гетер, який вертає <code>o.a</code> плюс 1</li>
+ <li><code>o.c</code> — сетер, який присвоює <code>o.a</code> половину значення, присвоєного <code>o.c</code></li>
+</ul>
+
+<p>Будь ласка, зауважте, що імена функцій гетерів та сетерів, визначені у об'єктному літералі за допомогою "[gs]et <em>властивість</em>()" (на відміну від <code>__define[GS]etter__</code> ), не є іменами самих гетерів, хоча синтаксис <code>[gs]et <em>propertyName</em>(){ }</code> і міг ввести вас в оману.</p>
+
+<p>Гетери та сетери також можуть бути додані до об'єкта в будь-який момент після створення за допомогою методу <code>Object.defineProperties</code>. Першим параметром цього методу є об'єкт, на якому ви хочете визначити гетер чи сетер. Другим параметром є об'єкт, чиї імена властивостей є іменами гетерів чи сетерів і чиї значення властивостей є об'єктами для визначення функцій гетерів чи сетерів. Ось приклад, який визначає такі самі гетер та сетер, які використовувались у попередньому прикладі:</p>
+
+<pre class="brush: js notranslate">var o = { a: 0 };
+
+Object.defineProperties(o, {
+    'b': { get: function() { return this.a + 1; } },
+    'c': { set: function(x) { this.a = x / 2; } }
+});
+
+o.c = 10; // Запускає сетер, який присвоює 10 / 2 (5) властивості 'a'
+console.log(o.b); // Запускає гетер, який видає a + 1, тобто 6
+</pre>
+
+<p>Яку з двох форм обирати, залежить від вашого стилю програмування та наявної задачі. Якщо ви вже користуєтесь об'єктним ініціалізатором при визначенні прототипу, ви, скоріше за все, обиратимете першу форму. Ця форма є більш компактною та природньою. Однак, якщо ви додаєте гетери та сетери пізніше — оскільки не писали прототип чи окремий об'єкт — тоді друга форма є єдино можливою. Друга форма, можливо, найкраще відображає динамічну природу JavaScript — але вона може зробити код важким для читання та розуміння.</p>
+
+<h2 id="Видалення_властивостей">Видалення властивостей</h2>
+
+<p>Ви можете видалити неуспадковані властивості оператором <code><a href="/uk/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>. Наступний код демонструє, як прибрати властивість.</p>
+
+<pre class="brush: js notranslate">// Створює новий об'єкт, myobj, з двома властивостями, a та b.
+var myobj = new Object;
+myobj.a = 5;
+myobj.b = 12;
+
+// Прибирає властивість a, залишивши у myobj лише властивість b.
+delete myobj.a;
+console.log ('a' in myobj); // виведе: "false"
+</pre>
+
+<p>Ви також можете використати <code>delete</code>, щоб видалити глобальну змінну, якщо ключове слово <code>var</code> не використовувалось для оголошення змінної:</p>
+
+<pre class="brush: js notranslate">g = 17;
+delete g;
+</pre>
+
+<h2 id="Порівняння_обєктів">Порівняння об'єктів</h2>
+
+<p>У JavaScript об'єкти належать до типу посилань. Два окремі об'єкти ніколи не дорівнюють один одному, навіть якщо мають однакові властивості. Лише порівняння об'єкта з самим собою поверне true.</p>
+
+<pre class="brush: js notranslate">// Дві змінні, два окремих об'єкти з однаковими властивостями
+var fruit = {name: 'яблуко'};
+var fruitbear = {name: 'яблуко'};
+
+fruit == fruitbear; // вертає false
+fruit === fruitbear; // вертає false</pre>
+
+<pre class="brush: js notranslate">// Дві змінні, один об'єкт
+var fruit = {name: 'яблуко'};
+var fruitbear = fruit;  // Присвоїти fruitbear посилання на об'єкт fruit
+
+// Тут fruit та fruitbear вказують на один об'єкт
+fruit == fruitbear; // вертає true
+fruit === fruitbear; // вертає true
+
+fruit.name = 'виноград';
+console.log(fruitbear); // output: { name: "виноград" }, замість { name: "яблуко" }
+</pre>
+
+<p>Щоб дізнатись більше щодо операторів порівняння, дивіться <a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння">Оператори порівняння</a>.</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>Щоб зануритись глибше, читайте <a href="/uk/docs/Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model">докладно про об'єктну модель JavaScript's</a>.</li>
+ <li>Щоб дізнатись щодо класів ECMAScript 2015 (альтернативний спосіб створення об'єктів), читайте розділ <a href="/uk/docs/Web/JavaScript/Reference/Classes">класи JavaScript</a>.</li>
+</ul>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model")}}</p>
diff --git a/files/uk/web/javascript/guide/вирази_та_оператори/index.html b/files/uk/web/javascript/guide/вирази_та_оператори/index.html
new file mode 100644
index 0000000000..fdfbc0659b
--- /dev/null
+++ b/files/uk/web/javascript/guide/вирази_та_оператори/index.html
@@ -0,0 +1,925 @@
+---
+title: Вирази та оператори
+slug: Web/JavaScript/Guide/Вирази_та_оператори
+tags:
+  - JavaScript
+  - Оператори
+  - Посібник
+  - вирази
+translation_of: Web/JavaScript/Guide/Expressions_and_Operators
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}</div>
+
+<p class="summary">Цей розділ описує вирази та оператори JavaScript, такі як присвоювання, порівняння, арифметичні оператори, бітові, логічні, рядкові, тернарний та інші.</p>
+
+<p>Повний та детальний список операторів та виразів також доступний за <a href="/uk/docs/Web/JavaScript/Reference/Operators">посиланням</a>.</p>
+
+<h2 id="Оператори">Оператори</h2>
+
+<p>JavaScript має наступні типи операторів. Ця секція описує оператори, а також містить інформацію щодо їхніх пріоритетів.</p>
+
+<ul>
+ <li>{{ web.link("#Оператори_присвоєння", "Оператори присвоєння") }}</li>
+ <li>{{ web.link("#Оператори_порівняння", "Оператори порівняння") }}</li>
+ <li>{{ web.link("#Арифметичні_оператори", "Арифметичні оператори") }}</li>
+ <li>{{ web.link("#Бітові_оператори", "Бiтові оператори") }}</li>
+ <li>{{ web.link("#Логічні_оператори", "Логічні оператори") }}</li>
+ <li>{{ web.link("#Рядкові_оператори", "Рядкові оператори") }}</li>
+ <li>{{ web.link("#Умовний_тернарний_оператор", "Умовний (тернарний) оператор")}}</li>
+ <li>{{ web.link("#Comma_operator", "Оператор кома")}}</li>
+ <li>{{ web.link("#Унарні_оператори", "Унарні оператори")}}</li>
+ <li>{{ web.link("#Оператори_відношення", "Оператори відношення")}}</li>
+</ul>
+
+<p>JavaScript має як <em>бінарні</em>, так і <em>унарні</em> оператори, а також один особливий тернарний оператор - умовний оператор. Бінарному оператору потрібні два операнди - один перед оператором, інший після оператора:</p>
+
+<pre class="syntaxbox"><em>операнд1 </em><em>оператор</em> <em>операнд2</em>
+</pre>
+
+<p>Наприклад, <code>3+4</code> чи <code>x*y</code>.</p>
+
+<p>Унарний оператор потребує лише одного операнду до чи після оператора:</p>
+
+<pre class="syntaxbox"><em>оператор</em> <em>операнд</em>
+</pre>
+
+<p>чи</p>
+
+<pre class="syntaxbox"><em>операнд оператор</em>
+</pre>
+
+<p>Наприклад, <code>x++</code> чи <code>++x</code>.</p>
+
+<h3 id="Оператори_присвоєння">Оператори присвоєння</h3>
+
+<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Оператор присвоєння</a> присвоює своєму лівому операнду значення на підставі значення правого операнда. Простим оператором присвоєння є оператор дорівнює (<code>=</code>), який присвоює значення свого правого операнда лівому операнду. Таким чином, <code>x = y</code> присвоює значення змінної <code>y</code> змінній <code>x</code>.</p>
+
+<p>Також існують складені оператори присвоєння, які є скороченнями для операцій, перелічених у наступній таблиці:</p>
+
+<table class="standard-table">
+ <caption>Складені оператори присвоювання</caption>
+ <thead>
+  <tr>
+   <th>Назва</th>
+   <th>Оператор скороченого запису</th>
+   <th>Значення</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння#Assignment">Присвоєння</a></td>
+   <td><code>x = y</code></td>
+   <td><code>x = y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Addition_assignment/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Присвоєння з додаванням</a></td>
+   <td><code>x += y</code></td>
+   <td><code>x = x + y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Subtraction_assignment/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Присвоєння з відніманням</a></td>
+   <td><code>x -= y</code></td>
+   <td><code>x = x - y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Multiplication_assignment/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Присвоєння з множенням</a></td>
+   <td><code>x *= y</code></td>
+   <td><code>x = x * y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння#Division_assignment">Присвоєння з діленням</a></td>
+   <td><code>x /= y</code></td>
+   <td><code>x = x / y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Remainder_assignment/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Присвоєння остачі</a></td>
+   <td><code>x %= y</code></td>
+   <td><code>x = x % y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Exponentiation_assignment/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Присвоєння з піднесенням до степеня</a>{{experimental_inline}}</td>
+   <td><code>x **= y</code></td>
+   <td><code>x = x ** y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння#Left_shift_assignment">Присвоєння з лівим зсувом</a></td>
+   <td><code>x &lt;&lt;= y</code></td>
+   <td><code>x = x &lt;&lt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння#Right_shift_assignment">Присвоєння з правим зсувом</a></td>
+   <td><code>x &gt;&gt;= y</code></td>
+   <td><code>x = x &gt;&gt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Unsigned_right_shift_assignment/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Присвоєння з беззнаковим правим зсувом</a></td>
+   <td><code>x &gt;&gt;&gt;= y</code></td>
+   <td><code>x = x &gt;&gt;&gt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Bitwise_AND_assignment/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Присвоєння з побітовим І</a></td>
+   <td><code>x &amp;= y</code></td>
+   <td><code>x = x &amp; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння#Bitwise_XOR_assignment">Присвоєння з виключним побітовим АБО</a></td>
+   <td><code>x ^= y</code></td>
+   <td><code>x = x ^ y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Bitwise_OR_assignment/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Присвоєння з побітовим АБО</a></td>
+   <td><code>x |= y</code></td>
+   <td><code>x = x | y</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Деструктуризація">Деструктуризація</h4>
+
+<p>Для більш складних присвоювань використовується синтаксис <a href="/uk/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">деструктуризації</a>. Це вираз JavaScript, який надає можливість витягувати дані з масивів та об'єктів, використовуючи синтаксис, що віддзеркалює конструкцію масивів та об'єктних літералів. </p>
+
+<pre class="brush: js">var foo = ['один', 'два', 'три'];
+
+// без деструктуризації
+var one   = foo[0];
+var two   = foo[1];
+var three = foo[2];
+
+// із деструктуризацією
+var [one, two, three] = foo;
+</pre>
+
+<h3 id="Оператори_порівняння">Оператори порівняння</h3>
+
+<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння">Оператор порівняння</a> порівнює свої операнди та повертає логічне значення, базуючись на істинності порівняння. Операнди можуть бути числовими, рядковими, логічними значеннями або об'єктами. Рядки порівнюються згідно стандартного лексикографічного порядку, з використанням значень Unicode. У більшості випадків, якщо два операнди не належать до одного типу, JavaScript намагається привести їх до належного для порівняння типу. Зазвичай це призводить до числового порівняння операндів. Єдиними винятками у конвертації типів під час порівняння є оператори <code>===</code> та <code>!==</code>, які виконують перевірку на строгу рівність та строгу нерівність. Ці оператори не намагаються перед перевіркою на рівність привести операнди до спільного типу. Наступна таблиця наводить оператори порівняння у контексті цього фрагменту коду:</p>
+
+<pre class="brush: js">var var1 = 3;
+var var2 = 4;
+</pre>
+
+<table class="standard-table">
+ <caption>Оператори порівняння</caption>
+ <thead>
+  <tr>
+   <th scope="col">Оператор</th>
+   <th scope="col">Опис</th>
+   <th scope="col">Приклади, які повертають true</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Рівність">Рівність</a> (<code>==</code>)</td>
+   <td>Повертає <code>true</code>, якщо оператори рівні.</td>
+   <td><code>3 == var1</code>
+    <p><code>"3" == var1</code></p>
+    <code>3 == '3'</code></td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Нерівність_!">Нерівність</a> (<code>!=</code>)</td>
+   <td>Повертає <code>true</code>, якщо оператори нерівні.</td>
+   <td><code>var1 != 4<br>
+    var2 != "3"</code></td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Ідентичність_строга_рівність">Строга рівність</a> (<code>===</code>)</td>
+   <td>Повертає <code>true</code> якщо оператори рівні та належать до одного типу. Дивіться також {{jsxref("Object.is")}} та <a href="/uk/docs/Web/JavaScript/Перевірка_на_рівність_та_однаковість">однаковість у JS</a>.</td>
+   <td><code>3 === var1</code></td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Неідентичність_строга_нерівність_!">Строга нерівність</a> (<code>!==</code>)</td>
+   <td>Повертає <code>true</code>, якщо оператори належать до одного типу, але нерівні, або належать до різних типів.</td>
+   <td><code>var1 !== "3"<br>
+    3 !== '3'</code></td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Більше_ніж_>">Більше ніж</a> (<code>&gt;</code>)</td>
+   <td>Повертає <code>true</code>, якщо лівий операнд більший за правий.</td>
+   <td><code>var2 &gt; var1<br>
+    "12" &gt; 2</code></td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Більше_чи_дорівнює_>">Більше чи дорівнює</a> (<code>&gt;=</code>)</td>
+   <td>Повертає <code>true</code>, якщо значення лівого операнда більше або дорівнює значенню правого операнда.</td>
+   <td><code>var2 &gt;= var1<br>
+    var1 &gt;= 3</code></td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Менше_ніж_&lt;">Менше ніж</a> (<code>&lt;</code>)</td>
+   <td>Повертає <code>true</code>, якщо лівий операнд менший за правий.</td>
+   <td><code>var1 &lt; var2<br>
+    "2" &lt; 12</code></td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Менше_чи_дорівнює_&lt;">Менше чи дорівнює</a> (<code>&lt;=</code>)</td>
+   <td>Повертає <code>true</code>, якщо значення лівого операнда менше або дорівнює значенню правого операнда.</td>
+   <td><code>var1 &lt;= var2<br>
+    var2 &lt;= 5</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Заувага: </strong>(<strong>=&gt;</strong>) не оператор, а позначення для <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкових функцій</a>.</p>
+</div>
+
+<h3 id="Арифметичні_оператори">Арифметичні оператори</h3>
+
+<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">Арифметичний оператор</a> приймає числові значення (літерали чи змінні) в якості операндів та повертає єдине числове значення. Стандартними арифметичними операторами є додавання (<code>+</code>), віднімання (<code>-</code>), множення (<code>*</code>) та ділення (<code>/</code>). Ці оператори працюють так само, як і в більшості інших мов програмування при використанні з числами з рухомою комою (зокрема, зауважте, що ділення на нуль повертає {{jsxref("Infinity")}}). Наприклад:</p>
+
+<pre class="brush: js">1 / 2; // 0.5
+1 / 2 == 1.0 / 2.0; // це дорівнює true
+</pre>
+
+<p>На додачу до стандартних арифметичних операцій (+, -, * /), JavaScript надає арифметичні операції, перечислені у наведеній нижче таблиці:</p>
+
+<table class="fullwidth-table">
+ <caption>Арифметичні оператори</caption>
+ <thead>
+  <tr>
+   <th scope="col">Оператор</th>
+   <th scope="col">Опис</th>
+   <th scope="col">Приклад</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder">Остача</a> (<code>%</code>)</td>
+   <td>Бінарний оператор. Повертає цілочисельну остачу від ділення двох операндів.</td>
+   <td>12 % 5 повертає 2.</td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">Інкремент</a> (<code>++</code>)</td>
+   <td>Унарний оператор. Додає до операнда одиницю. Якщо використовується як префіксний оператор (<code>++x</code>), повертає значення операнда після додавання одиниці; якщо використовується як постфіксний оператор (<code>x++</code>), повертає значення операнда перед додаванням одиниці.</td>
+   <td>Якщо <code>x</code> дорівнює 3, тоді <code>++x</code> присвоює <code>x</code> значення 4 та повертає 4, в той час, як <code>x++</code> повертає 3 і лише тоді присвоює <code>x</code> значення 4.</td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement">Декремент</a> (<code>--</code>)</td>
+   <td>Унарний оператор. Віднімає одиницю від свого операнда. Повернене значення аналогічне поверненому значенню оператора інкременту.</td>
+   <td>Якщо <code>x</code> дорівнює 3, тоді <code>--x</code> присвоює <code>x</code> значення 2 та повертає 2, в той час, як <code>x--</code> повертає 3 і тільки тоді присвоює <code>x</code> значення 2.</td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation">Унарний мінус</a> (<code>-</code>)</td>
+   <td>Унарний оператор. Повертає операнд з протилежним знаком.</td>
+   <td>Якщо <code>x</code> дорівнює 3, то <code>-x</code> повертає -3.</td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Унарний_плюс">Унарний плюс</a> (<code>+</code>)</td>
+   <td>Унарний оператор. Намагається перетворити операнд на число, якщо він не є числом.</td>
+   <td><code>+"3"</code> повертає <code>3</code>.<br>
+    <code>+true</code> повертає <code>1.</code></td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation">Піднесення до степеня</a> (<code>**</code>) {{experimental_inline}}</td>
+   <td>Підносить <code>основу степеня</code> до <code>показника</code> степеня, тобто, <code>основа<sup>показник</sup></code></td>
+   <td><code>2 ** 3</code> повертає <code>8</code>.<br>
+    <code>10 ** -1</code> повертає <code>0.1</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Бітові_оператори">Бітові оператори</h3>
+
+<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Бітовий оператор</a> опрацьовує свої операнди як послідовність 32-х бітів (нулів та одиниць), а не як десяткові, шістнадцяткові або вісімкові числа. Наприклад, десяткове число дев'ять має бітове представлення 1001. Бітові оператори виконують операції над цими бітовими представленнями, але повертають стандартні числові значення JavaScript.</p>
+
+<p>Наступна таблиця наводить перелік бітових операторів JavaScript.</p>
+
+<table class="standard-table">
+ <caption>Бітові оператори</caption>
+ <thead>
+  <tr>
+   <th scope="col">Оператор</th>
+   <th scope="col">Застосування</th>
+   <th scope="col">Опис</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Побітове_І">Побітове І (AND)</a></td>
+   <td><code>a &amp; b</code></td>
+   <td>Повертає одиницю на кожній позиції, де відповідні біти обох операндів дорівнюють одиницям.</td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Побітове_АБО">Побітове АБО (OR)</a></td>
+   <td><code>a | b</code></td>
+   <td>Повертає нуль на кожній позиції, де відповідні біти обох операндів дорівнюють нулям.</td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Виключне_побітове_АБО">Виключне побітове АБО (XOR)</a></td>
+   <td><code>a ^ b</code></td>
+   <td>Повертає нуль на кожній позиції, де відповідні біти однакові.<br>
+    [Повертає один на кожній позиції, де відповідні біти мають різні значення.]</td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Побітове_НЕ">Побітове НЕ (NOT)</a></td>
+   <td><code>~ a</code></td>
+   <td>Виконує інверсію бітів операнду.</td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#&lt;&lt;_Лівий_зсув">Лівий зсув</a></td>
+   <td><code>a &lt;&lt; b</code></td>
+   <td>Зсуває <code>a</code> у двійковому представленні на <code>b</code> бітів ліворуч, заповнюючи позиції справа нулями.</td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#>>_Правий_зсув_з_розширенням_знаку">Правий зсув з розширенням знаку</a></td>
+   <td><code>a &gt;&gt; b</code></td>
+   <td>Зсуває <code>a</code> у двійковому представленні на <code>b</code> бітів праворуч, відкидаючи зсунуті біти.</td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#>>>_Правий_зсув_із_заповненням_нулями">Правий зсув із заповненням нулями</a></td>
+   <td><code>a &gt;&gt;&gt; b</code></td>
+   <td>Зсуває <code>a</code> у двійковому представленні на <code>b</code> бітів праворуч, відкидаючи зсунуті біти та заповнюючи позиції зліва нулями.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Bitwise_Logical_Operators" name="Bitwise_Logical_Operators">Побітові логічні оператори</h4>
+
+<p>Концептуально побітові логічні оператори працюють наступним чином:</p>
+
+<ul>
+ <li>Операнди перетворюються на 32-бітні цілі числа та виражаються послідовністю бітів (нулів та одиниць). Числа, що мають більше 32 бітів, втрачають свої старші біти. Наприклад, наступне ціле число, що має більше 32 бітів, буде перетворено на 32-бітне ціле число:
+  <pre>До:     11100110111110100000000000000110000000000001
+Після:              10100000000000000110000000000001</pre>
+ </li>
+ <li>Кожен біт першого операнду ставиться у пару до відповідного біту другого операнду: перший біт до першого біту, другий біт до другого, і так далі.</li>
+ <li>Оператор застосовується до кожної пари бітів, а результат будується побітово.</li>
+</ul>
+
+<p>Наприклад, бінарним представленням числа дев'ять є 1001, а бінарним представленням п'ятнадцяти є 1111. Отже, коли бітові оператори застосовуються до цих величин, результати будуть наступні:</p>
+
+<table class="standard-table">
+ <caption>Приклади бітових операторів</caption>
+ <thead>
+  <tr>
+   <th scope="col">Вираз</th>
+   <th scope="col">Результат</th>
+   <th scope="col">Двійковий опис</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>15 &amp; 9</code></td>
+   <td><code>9</code></td>
+   <td><code>1111 &amp; 1001 = 1001</code></td>
+  </tr>
+  <tr>
+   <td><code>15 | 9</code></td>
+   <td><code>15</code></td>
+   <td><code>1111 | 1001 = 1111</code></td>
+  </tr>
+  <tr>
+   <td><code>15 ^ 9</code></td>
+   <td><code>6</code></td>
+   <td><code>1111 ^ 1001 = 0110</code></td>
+  </tr>
+  <tr>
+   <td><code>~15</code></td>
+   <td><code>-16</code></td>
+   <td><code>~</code><code>00000000...</code><code>00001111 = </code><code>1111</code><code>1111</code><code>...</code><code>11110000</code></td>
+  </tr>
+  <tr>
+   <td><code>~9</code></td>
+   <td><code>-10</code></td>
+   <td><code>~</code><code>00000000</code><code>...</code><code>0000</code><code>1001 = </code><code>1111</code><code>1111</code><code>...</code><code>1111</code><code>0110</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Зауважте, що усі 32 біти інвертуються побітовим оператором НЕ, і що значення, в яких найстарший (перший зліва) біт дорівнює 1, відображають від'ємні числа (формат доповняльного коду).</p>
+
+<h4 id="Bitwise_Shift_Operators" name="Bitwise_Shift_Operators">Оператори бітового зсуву</h4>
+
+<p>Оператори бітового зсуву приймають два операнди: перший є величиною, в якій треба виконати зсув, а другий вказує кількість бітових позицій для зсуву. Напрямок операції зсуву контролюється застосованим оператором.</p>
+
+<p>Оператори зсуву перетворюють свої операнди на 32-бітні цілі числа та повертають результат того самого типу, до якого належить лівий операнд.</p>
+
+<p>Оператори зсуву наведені у наступній таблиці.</p>
+
+<table class="fullwidth-table">
+ <caption>Оператори бітового зсуву</caption>
+ <thead>
+  <tr>
+   <th scope="col">Оператор</th>
+   <th scope="col">Опис</th>
+   <th scope="col">Приклад</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#&lt;&lt;_Лівий_зсув">Лівий зсув</a><br>
+    (<code>&lt;&lt;</code>)</td>
+   <td>Цей оператор виконує зсув першого операнду на вказану кількість бітів ліворуч. Надлишкові біти, зсунуті ліворуч, відкидаються. Біти, додані справа, заповнюються нулями.</td>
+   <td><code>9&lt;&lt;2</code> вертає 36, тому що число 1001, зсунуте на 2 біти ліворуч, стає 100100, тобто, 36.</td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#>>_Правий_зсув_з_розширенням_знаку">Правий зсув з розширенням знаку</a> (<code>&gt;&gt;</code>)</td>
+   <td>
+    <p>Цей оператор виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються значенням старшого біта.</p>
+   </td>
+   <td><code>9&gt;&gt;2</code> вертає 2, тому що число 1001, зсунуте на 2 біти праворуч, стає 10, тобто 2. Аналогічно, <code>-9&gt;&gt;2</code> вертає -3,  тому що знак зберігається.</td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#>>>_Правий_зсув_із_заповненням_нулями">Правий зсув із заповненням нулями</a>(<code>&gt;&gt;&gt;</code>)</td>
+   <td>
+    <p>Цей оператор виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються нулями.</p>
+   </td>
+   <td><code>19&gt;&gt;&gt;2</code> вертає 4, тому що число 10011, зсунуте на 2 бітів праворуч, стає 100, тобто 4. Для невід'ємних чисел, правий зсув із заповненням нулями та правий зсув з розширенням знаку дають однаковий результат.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Логічні_оператори">Логічні оператори</h3>
+
+<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators">Логічні оператори</a> застосовуються до булевих (логічних) значень; в цьому випадку вони повертають значення типу Boolean. Однак, оператори <code>&amp;&amp;</code> та <code>||</code> насправді повертають значення одного з заданих операндів, тому, якщо ці оператори використовуються зі значеннями не булевого типу, вони повернуть значення не булевого типу. Логічні оператори описані у наведеній нижче таблиці.</p>
+
+<table class="fullwidth-table">
+ <caption>Логічні оператори</caption>
+ <thead>
+  <tr>
+   <th scope="col">Оператор</th>
+   <th scope="col">Застосування</th>
+   <th scope="col">Опис</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Логічне_І">Логічне І</a> (<code>&amp;&amp;</code>)</td>
+   <td><code>expr1 &amp;&amp; expr2</code></td>
+   <td>Вертає вираз <code>expr1</code>, якщо він може бути перетворений на <code>false</code>; інакше, повертає <code>expr2</code>. Таким чином, при використанні з булевими значеннями <code>&amp;&amp;</code> вертає <code>true</code>, якщо обидва операнди дорівнюють true; інакше, вертає <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Логічне_АБО">Логічне АБО </a>(<code>||</code>)</td>
+   <td><code>expr1 || expr2</code></td>
+   <td>Вертає вираз <code>expr1</code>, якщо він може бути перетворений на <code>true</code>; інакше, вертає <code>expr2</code>. Таким чином, при використанні з булевими значеннями <code>||</code> вертає <code>true</code>, якщо будь-який з операндів дорівнює true; якщо обидва дорівнюють false, вертає <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Логічне_НЕ_!">Логічне НЕ </a>(<code>!</code>)</td>
+   <td><code>!expr</code></td>
+   <td>Вертає <code>false</code>, якщо його єдиний операнд може бути перетворений на <code>true</code>; інакше, вертає <code>true</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Прикладами виразів, які можуть бути перетворені на <code>false</code>, є ті, які повертають null, 0, NaN, порожній рядок ("") або undefined.</p>
+
+<p>Наступний код демонструє приклади оператора <code>&amp;&amp;</code> (логічне І).</p>
+
+<pre class="brush: js">var a1 =  true &amp;&amp; true;     // t &amp;&amp; t вертає true
+var a2 =  true &amp;&amp; false;    // t &amp;&amp; f вертає false
+var a3 = false &amp;&amp; true;     // f &amp;&amp; t вертає false
+var a4 = false &amp;&amp; (3 == 4); // f &amp;&amp; f вертає false
+var a5 = 'Кіт' &amp;&amp; 'Пес';    // t &amp;&amp; t вертає Пес
+var a6 = false &amp;&amp; 'Кіт';    // f &amp;&amp; t вертає false
+var a7 = 'Кіт' &amp;&amp; false;    // t &amp;&amp; f вертає false
+</pre>
+
+<p>Наступний код демонструє приклади оператора <code>||</code> (логічне АБО).</p>
+
+<pre class="brush: js">var o1 =  true || true;     // t || t вертає true
+var o2 = false || true;     // f || t вертає true
+var o3 =  true || false;    // t || f вертає true
+var o4 = false || (3 == 4); // f || f вертає false
+var o5 = 'Кіт' || 'Пес';    // t || t вертає Кіт
+var o6 = false || 'Кіт';    // f || t вертає Кіт
+var o7 = 'Кіт' || false;    // t || f вертає Кіт
+</pre>
+
+<p>Наступний код демонструє приклади оператора <code>!</code> (логічне НЕ).</p>
+
+<pre class="brush: js">var n1 = !true;  // !t вертає false
+var n2 = !false; // !f вертає true
+var n3 = !'Кіт'; // !t вертає false
+</pre>
+
+<h4 id="Short-Circuit_Evaluation" name="Short-Circuit_Evaluation">Коротке замикання обчислення</h4>
+
+<p>Оскільки логічні вирази обчислюються зліва направо, вони перевіряються на можливе "коротке замикання" обчислення за наступними правилами:</p>
+
+<ul>
+ <li><code>false</code> &amp;&amp; <em>будь-що</em> обчислюється як false.</li>
+ <li><code>true</code> || <em>будь-що</em> обчислюється як true.</li>
+</ul>
+
+<p>Правила логіки гарантують, що ці обчислення завжди будуть правильними. Зауважте, що частина виразу <em>будь-що</em> не обчислюється, тому будь-які побічні ефекти від цих обчислень не відбудуться.</p>
+
+<h3 id="Рядкові_оператори">Рядкові оператори</h3>
+
+<p>На додачу до операторів порівняння, які можуть застосовуватись до рядкових значень, оператор конкатенації (+) об'єднує значення двох рядків, повертаючи інший рядок, який є об'єднанням рядків двох операндів.</p>
+
+<p>Наприклад,</p>
+
+<pre class="brush: js">console.log('мій ' + 'рядок'); // консоль виводить рядок "мій рядок".</pre>
+
+<p>Скорочений оператор присвоєння += також може застосовуватись для конкатенації рядків.</p>
+
+<p>Наприклад,</p>
+
+<pre class="brush: js">var mystring = 'алфа';
+mystring += 'віт'; // повертає "алфавіт" та присвоює це значення mystring.</pre>
+
+<h3 id="Умовний_тернарний_оператор">Умовний (тернарний) оператор</h3>
+
+<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">Умовний оператор</a> - єдиний оператор у JavaScript, який приймає три операнди. У оператора може бути одне чи два значення, в залежності від умови. Використовує наступний синтакс:</p>
+
+<pre class="syntaxbox"><em>умова</em> ? значення<em>1</em> : значення<em>2</em>
+</pre>
+
+<p>Якщо <code>умова</code> дорівнює true, оператор повертає <code>значення1</code>.  В іншому випадку - <code>значення2</code>. Умовний оператор можна використовувати будь-де, де використовується звичайний оператор. Наприклад:</p>
+
+<pre class="brush: js">var status = (age &gt;= 18) ? 'дорослий' : 'неповнолітній';
+</pre>
+
+<p>Ця інструкція присвоює значення "дорослий" змінній <code>status</code>, якщо значення <code>age</code> (вік) більше чи дорівнює 18. Інакше, вона присвоює змінній <code>status</code> значення "неповнолітній".</p>
+
+<h3 id="Comma_operator" name="Comma_operator">Оператор кома</h3>
+
+<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Comma_Operator">Оператор кома</a> (<code>,</code>) просто обчислює обидва свої операнди та повертає значення останнього операнда. Цей оператор найчастіше використовується всередині циклу <code>for</code>, що дозволяє оновлювати більше однієї змінної на кожному проході циклу.</p>
+
+<p>Наприклад, якщо <code>a</code> є двовимірним масивом з 10 елементами по кожній стороні, наступний код використовує оператор кома, щоб оновити дві змінні одночасно. Код виводить значення діагональних елементів масиву:</p>
+
+<pre class="brush: js">for (var i = 0, j = 9; i &lt;= j; i++, j--)
+  console.log('a[' + i + '][' + j + ']= ' + a[i][j]);
+</pre>
+
+<h3 id="Унарні_оператори">Унарні оператори</h3>
+
+<p>Унарна операція - це операція лише з одним операндом.</p>
+
+<h4 id="delete" name="delete"><code>delete</code></h4>
+
+<p>Оператор <code><a href="/uk/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> видаляє об'єкт, властивість об'єкта або елемент за вказаним індексом у масиві. Синтаксис наступний:</p>
+
+<pre class="brush: js">delete objectName;
+delete objectName.property;
+delete objectName[index];
+delete property; // працює лише всередині конструкції with
+</pre>
+
+<p>де <code>objectName</code> є іменем об'єкта, <code>property</code> - існуюча властивість, а <code>index</code> - ціле число, що вказує розташування елемента у масиві.</p>
+
+<p>Четверта форма працює лише всередині блоку <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/with">with</a></code> для видалення властивості об'єкта.</p>
+
+<p>Ви можете використовувати оператор <code>delete</code> для видалення змінних, оголошених неявно, але не тих, що були оголошені оператором <code>var</code>.</p>
+
+<p>Якщо оператор <code>delete</code> відпрацьовує успішно, значенням властивості чи елемента стає <code>undefined</code>. Оператор <code>delete</code> повертає <code>true</code>, якщо операція можлива; він повертає <code>false</code>, якщо операція неможлива.</p>
+
+<pre class="brush: js">x = 42;
+var y = 43;
+myobj = new Number();
+myobj.h = 4;    // створює властивість h
+delete x;       // вертає true (можна видалити властивість, оголошену неявно)
+delete y;       // вертає false (не можна видалити властивість, оголошену через var)
+delete Math.PI; // вертає false (не можна видаляти попередньо визначені властивості)
+delete myobj.h; // вертає true (можна видалити властивість, визначену користувачем)
+delete myobj;   // вертає true (можна видалити, якщо властивість оголошена неявно)
+</pre>
+
+<h5 id="Видалення_елементів_масиву">Видалення елементів масиву</h5>
+
+<p>Коли ви видаляєте елемент масиву, це не впливає на довжину масиву. Для прикладу, якщо ви видалите <code>a[3]</code>, <code>a[4]</code> досі є <code>a[4]</code>, а <code>a[3]</code> дорівнює undefined.</p>
+
+<p>Коли оператор <code>delete</code> видаляє елемент масиву, цей елемент більше не існує у масиві. У наступному прикладі <code>trees[3]</code> видаляється оператором <code>delete</code>. Однак, адреса <code>trees[3]</code> досі доступна та повертає <code>undefined</code>.</p>
+
+<pre class="brush: js">var trees = ['секвоя', 'лавр', 'кедр', 'дуб', 'клен'];
+delete trees[3];
+if (3 in trees) {
+  // це не виконається
+}
+</pre>
+
+<p>Якщо вам потрібно, щоб елемент існував, але мав значення undefined, скористайтесь ключовим словом <code>undefined</code> замість оператора <code>delete</code>. У наступному прикладі <code>trees[3]</code> присвоюється значення <code>undefined</code>, але елемент масиву досі існує:</p>
+
+<pre class="brush: js">var trees = ['секвоя', 'лавр', 'кедр', 'дуб', 'клен'];
+trees[3] = undefined;
+if (3 in trees) {
+  // це виконається
+}
+</pre>
+
+<h4 id="typeof" name="typeof"><code>typeof</code></h4>
+
+<p>Оператор <a href="/uk/docs/Web/JavaScript/Reference/Operators/typeof"><code>typeof</code></a> використовується наступним чином:</p>
+
+<pre class="syntaxbox">typeof операнд
+typeof (операнд)
+</pre>
+
+<p>Оператор <code>typeof</code> повертає рядок, що вказує тип необчисленого операнда. <code>Операнд</code> є рядком, змінною, ключовим словом чи об'єктом, для якого треба повернути тип. Круглі дужки є необов'язковими.</p>
+
+<p>Припустимо, ви визначили наступні змінні:</p>
+
+<pre class="brush: js">var myFun = new Function('5 + 2');
+var shape = 'коло';
+var size = 1;
+var foo = ['Яблуко', 'Манго', 'Апельсин'];
+var today = new Date();
+</pre>
+
+<p>Оператор <code>typeof</code> вертає наступні результати для цих змінних:</p>
+
+<pre class="brush: js">typeof myFun;       // вертає "function"
+typeof shape;       // вертає "string"
+typeof size;        // вертає "number"
+typeof foo;         // вертає "object"
+typeof today;       // вертає "object"
+typeof doesntExist; // вертає "undefined"
+</pre>
+
+<p>Для ключових слів <code>true</code> та <code>null</code> оператор <code>typeof</code> вертає наступні результати:</p>
+
+<pre class="brush: js">typeof true; // вертає "boolean"
+typeof null; // вертає "object"
+</pre>
+
+<p>Для числа та рядка оператор <code>typeof</code> вертає наступні результати:</p>
+
+<pre class="brush: js">typeof 62;            // вертає "number"
+typeof 'Hello world'; // вертає "string"
+</pre>
+
+<p>Для значень властивостей оператор <code>typeof</code> вертає тип значення, яке містить ця властивість:</p>
+
+<pre class="brush: js">typeof document.lastModified; // вертає "string"
+typeof window.length;         // вертає "number"
+typeof Math.LN2;              // вертає "number"
+</pre>
+
+<p>Для методів та функцій оператор <code>typeof</code> вертає наступні результати:</p>
+
+<pre class="brush: js">typeof blur;        // вертає "function"
+typeof eval;        // вертає "function"
+typeof parseInt;    // вертає "function"
+typeof shape.split; // вертає "function"
+</pre>
+
+<p>Для попередньо визначених об'єктів оператор <code>typeof</code> вертає наступні результати:</p>
+
+<pre class="brush: js">typeof Date;     // вертає "function"
+typeof Function; // вертає "function"
+typeof Math;     // вертає "object"
+typeof Option;   // вертає "function"
+typeof String;   // вертає "function"
+</pre>
+
+<h4 id="void" name="void"><code>void</code></h4>
+
+<p>Оператор <a href="/uk/docs/Web/JavaScript/Reference/Operators/void"><code>void</code></a> використовується наступним чином:</p>
+
+<pre class="syntaxbox">void (вираз)
+void вираз
+</pre>
+
+<p>Оператор <code>void</code> вказує, що вираз має бути обчислений без повернення значення. <code>Вираз</code> є виразом JavaScript, який треба обчислити. Дужки, що оточують вираз, є необов'язковими, але вживати їх є гарним стилем.</p>
+
+<p>Ви можете скористатись оператором <code>void</code>, щоб вказати вираз як гіпертекстове посилання. Вираз обчислюється, але не завантажується на місці відкритого документа.</p>
+
+<p>Наступний код створює гіпертекстове посилання, яке нічого не робить, коли користувач на нього натискає. Коли користувач натискає на посилання, <code>void(0)</code> обчислюється як <code>undefined</code>, що не має жодного ефекту у JavaScript.</p>
+
+<pre class="brush: html">&lt;a href="javascript:void(0)"&gt;Натисніть сюди, щоб нічого не робити&lt;/a&gt;
+</pre>
+
+<p>Наступний код створює гіпертекстове посилання, яке відправляє форму, коли користувач натискає на нього.</p>
+
+<pre class="brush: html">&lt;a href="javascript:void(document.form.submit())"&gt;
+Натисніть сюди, щоб відправити&lt;/a&gt;</pre>
+
+<h3 id="Оператори_відношення">Оператори відношення</h3>
+
+<p>Оператор відношення порівнює свої операнди та повертає значення <code>Boolean</code>, на підставі того, чи є порівняння істиною.</p>
+
+<h4 id="in"><code>in</code></h4>
+
+<p>Оператор <a href="/uk/docs/Web/JavaScript/Reference/Operators/in"><code>in</code></a> повертає <code>true</code>, якщо вказана властивість існує на вказаному об'єкті. Синтаксис наступний:</p>
+
+<pre class="brush: js">propNameOrNumber in objectName
+</pre>
+
+<p>де <code>propNameOrNumber</code> є рядковим або числовим виразом, який відображає ім'я властивості або індекс у масиві, а <code>objectName</code> є ім'ям об'єкта.</p>
+
+<p>Наступний приклад демонструє варіанти використання оператора <code>in</code>.</p>
+
+<pre class="brush: js">// Масиви
+var trees = ['секвоя', 'лавр', 'кедр', 'дуб', 'клен'];
+0 in trees;        // вертає true
+3 in trees;        // вертає true
+6 in trees;        // вертає false
+'лавр' in trees;    // вертає false (ви маєте вказати індекс,
+                   // а не значення за цим індексом)
+'length' in trees; // вертає true (length є властивістю масиву)
+
+// вбудовані об'єкти
+'PI' in Math;          // вертає true
+var myString = new String('корал');
+'length' in myString;  // вертає true
+
+// Користувацькі об'єкти
+var mycar = { make: 'Honda', model: 'Accord', year: 1998 };
+'make' in mycar;  // вертає true
+'model' in mycar; // вертає true
+</pre>
+
+<h4 id="instanceof" name="instanceof"><code>instanceof</code></h4>
+
+<p>Оператор <a href="/uk/docs/Web/JavaScript/Reference/Operators/instanceof"><code>instanceof</code></a> повертає <code>true</code>, якщо вказаний об'єкт належить до вказаного типу. Синтаксис наступний:</p>
+
+<pre class="syntaxbox">objectName instanceof objectType
+</pre>
+
+<p>де <code>objectName</code> є ім'ям об'єкта, який порівнюється з <code>objectType</code>, а <code>objectType</code> є типом об'єкта, наприклад, {{jsxref("Date")}} або {{jsxref("Array")}}.</p>
+
+<p>Використовуйте <code>instanceof</code>, коли вам необхідно підтвердити тип об'єкта під час виконання. Наприклад, перехоплюючи винятки, ви можете зробити відгалуження до іншого коду обробки винятків, в залежності від типу викинутого винятку.</p>
+
+<p>Наприклад, наступний код використовує <code>instanceof</code> для визначення того, чи <code>theDay</code> є об'єктом <code>Date</code>. Оскільки <code>theDay</code> є об'єктом <code>Date</code>, інструкції у блоці <code>if</code> будуть виконані.</p>
+
+<pre class="brush: js">var theDay = new Date(1995, 12, 17);
+if (theDay instanceof Date) {
+  // інструкції для виконання
+}
+</pre>
+
+<h3 id="Пріоритет_операторів">Пріоритет операторів</h3>
+
+<p><em>Пріоритет</em> операторів визначає порядок, у якому вони застосовуються під час обчислення виразу. Ви можете змінити пріоритет оператора, використавши дужки.</p>
+
+<p>Наступна таблиця наводить пріоритети операторів, від найвищого до найнижчого.</p>
+
+<table class="standard-table">
+ <caption>Пріоритет операторів</caption>
+ <thead>
+  <tr>
+   <th scope="col">Тип оператора</th>
+   <th scope="col">Окремі оператори</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>властивість</td>
+   <td><code>. []</code></td>
+  </tr>
+  <tr>
+   <td>виклик / створення екземпляра</td>
+   <td><code>() new</code></td>
+  </tr>
+  <tr>
+   <td>заперечення / інкремент</td>
+   <td><code>! ~ - + ++ -- typeof void delete</code></td>
+  </tr>
+  <tr>
+   <td>множення / ділення</td>
+   <td><code>* / %</code></td>
+  </tr>
+  <tr>
+   <td>додавання / віднімання</td>
+   <td><code>+ -</code></td>
+  </tr>
+  <tr>
+   <td>бітовий зсув</td>
+   <td><code>&lt;&lt; &gt;&gt; &gt;&gt;&gt;</code></td>
+  </tr>
+  <tr>
+   <td>відношення</td>
+   <td><code>&lt; &lt;= &gt; &gt;= in instanceof</code></td>
+  </tr>
+  <tr>
+   <td>рівність</td>
+   <td><code>== != === !==</code></td>
+  </tr>
+  <tr>
+   <td>побітове-і</td>
+   <td><code>&amp;</code></td>
+  </tr>
+  <tr>
+   <td>виключне-побітове-або</td>
+   <td><code>^</code></td>
+  </tr>
+  <tr>
+   <td>побітове-або</td>
+   <td><code>|</code></td>
+  </tr>
+  <tr>
+   <td>логічне-і</td>
+   <td><code>&amp;&amp;</code></td>
+  </tr>
+  <tr>
+   <td>логічне-або</td>
+   <td><code>||</code></td>
+  </tr>
+  <tr>
+   <td>умовний</td>
+   <td><code>?:</code></td>
+  </tr>
+  <tr>
+   <td>присвоєння</td>
+   <td><code>= += -= *= /= %= &lt;&lt;= &gt;&gt;= &gt;&gt;&gt;= &amp;= ^= |=</code></td>
+  </tr>
+  <tr>
+   <td>кома</td>
+   <td><code>,</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Більш детальну версію цієї таблиці, доповнену посиланнями на додаткові подробиці щодо кожного оператора, можна знайти у <a href="/uk/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">довіднику з JavaScript</a>.</p>
+
+<h2 id="Вирази">Вирази</h2>
+
+<p><em>Виразом</em> є будь-яка одиниця коду, яка вирішується з певним значенням.</p>
+
+<p>Кожний синтаксично коректний вираз вирішується з якимось значенням, але, концептуально, існують два типи виразів: з побічними ефектами (наприклад: ті, що присвоюють значення змінній) та такі, що обчислюються і, таким чином, вирішуються з певним значенням.</p>
+
+<p>Вираз <code>x = 7</code> є прикладом першого типу. Цей вираз використовує <em>оператор</em> = для присвоєння семи змінній<em> </em><code>x</code>. Сам вираз обчислюється з результатом сім.</p>
+
+<p>Код <code>3 + 4</code> є прикладом другого типу виразів. Цей вираз за допомогою оператора + складає три та чотири без присвоєння результату, семи, змінній.<br>
+ <br>
+ JavaScript має наступні категорії виразів:</p>
+
+<ul>
+ <li>Арифметичні: обчислюються як число, наприклад, 3.14159. (Загалом, використовують {{ web.link("#Арифметичні_оператори", "арифметичні оператори") }}.)</li>
+ <li>Рядкові: обчислюються як рядок, наприклад, "Фред" або "234". (Загалом, використовують {{ web.link("#Рядкові_оператори", "рядкові оператори") }}.)</li>
+ <li>Логічні: обчислюються як true або false. (Часто використовують {{ web.link("#Логічні_оператори", "логічні оператори") }}.)</li>
+ <li>Первинні вирази: Базові ключові слова та загальні вирази у JavaScript.</li>
+ <li>Лівосторонні вирази: значення зліва є призначенням присвоєння.</li>
+</ul>
+
+<h3 id="Первинні_вирази">Первинні вирази</h3>
+
+<p>Базові ключові слова та загальні вирази у JavaScript.</p>
+
+<h4 id="this" name="this"><code>this</code></h4>
+
+<p>Використовуйте <a href="/uk/docs/Web/JavaScript/Reference/Operators/this">ключове слово <code>this</code></a> для посилання на поточний об'єкт. Загалом, <code>this</code> у методі посилається на об'єкт, що його викликав. Використовуйте <code>this</code> або з крапкою, або з дужковою нотацією:</p>
+
+<pre class="syntaxbox">this['propertyName']
+this.propertyName
+</pre>
+
+<p>Припустимо, функція на ім'я <code>validate</code> перевіряє властивість об'єкта <code>value</code>, маючи найменше та найбільше значення:</p>
+
+<pre class="brush: js">function validate(obj, lowval, hival) {
+  if ((obj.value &lt; lowval) || (obj.value &gt; hival))
+    console.log('Некоректне значення!');
+}
+</pre>
+
+<p>Ви можете викликати <code>validate</code> в кожному обробнику подій елементів форми <code>onChange</code>, використовуючи <code>this</code>, щоб передати йому елемент форми, як у наступному прикладі:</p>
+
+<pre class="brush: html">&lt;p&gt;Введіть число між 18 та 99:&lt;/p&gt;
+&lt;input type="текст" name="вік" size=3 onChange="validate(this, 18, 99);"&gt;
+</pre>
+
+<h4 id="Оператор_групування">Оператор групування</h4>
+
+<p>Оператор групування <code>( )</code> контролює пріоритет обчислення у виразах. Наприклад, ви можете змінити обчислення спочатку множення та ділення, а потім додавання та віднімання, щоб обчислити спочатку додавання.</p>
+
+<pre class="brush:js">var a = 1;
+var b = 2;
+var c = 3;
+
+// пріоритет за замовчуванням
+a + b * c     // 7
+// обчислюється наступним чином
+a + (b * c)   // 7
+
+// тепер змінюємо пріоритет
+// додавання перед множенням
+(a + b) * c   // 9
+
+// що є рівнозначним
+a * c + b * c // 9
+</pre>
+
+<h3 id="Лівосторонні_вирази">Лівосторонні вирази</h3>
+
+<p>Значення зліва є призначенням присвоєння.</p>
+
+<h4 id="new" name="new"><code>new</code></h4>
+
+<p>Ви можете скористатись <a href="/uk/docs/Web/JavaScript/Reference/Operators/new">оператором <code>new</code></a>, щоб створити екземпляр визначеного користувачем типу об'єкта або одного з вбудованих типів. Використовуйте <code>new</code> наступним чином:</p>
+
+<pre class="brush: js">var objectName = new objectType([param1, param2, ..., paramN]);
+</pre>
+
+<h4 id="super">super</h4>
+
+<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/super">Ключове слово super</a> використовується для виклику функцій батьківського об'єкта. Воно корисне для використання з <a href="/uk/docs/Web/JavaScript/Reference/Classes">класами</a>, для виклику батьківського конструктора, наприклад.</p>
+
+<pre class="syntaxbox">super([arguments]); // викликає батьківський конструктор.
+super.functionOnParent([arguments]);
+</pre>
+
+<h4 id="Оператор_розпакування">Оператор розпакування</h4>
+
+<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Spread_syntax">Оператор розпакування</a> дозволяє розкласти вираз там, де очікується більше одного аргументу (для викликів функцій) або більше одного елемента (для масивних літералів).</p>
+
+<p><strong>Приклад:</strong> Сьогодні, якщо ви маєте масив та бажаєте створити новий масив, використавши існуючий масив як його частину, синтаксису масивного літералу більше недостатньо, і вам доводиться повертатись до імперативного коду, використовуючи комбінацію з <code>push</code>, <code>splice</code>, <code>concat</code>, і т. д. З оператором розпакування все стає набагато лаконічнішим:</p>
+
+<pre class="brush: js">var parts = ['плечі', 'коліна'];
+var lyrics = ['голова', ...parts, 'та', 'пальці'];</pre>
+
+<p>Схожим чином оператор розпакування працює з викликами функцій:</p>
+
+<pre class="brush: js">function f(x, y, z) { }
+var args = [0, 1, 2];
+f(...args);</pre>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}</div>
diff --git a/files/uk/web/javascript/index.html b/files/uk/web/javascript/index.html
new file mode 100644
index 0000000000..51c10dc7dc
--- /dev/null
+++ b/files/uk/web/javascript/index.html
@@ -0,0 +1,119 @@
+---
+title: JavaScript
+slug: Web/JavaScript
+tags:
+  - JavaScript
+  - Вчити
+  - Мова
+  - Посібник
+translation_of: Web/JavaScript
+---
+<div>{{JsSidebar}}</div>
+
+<p class="summary">JavaScript (JS) — це невибаглива до ресурсів мова програмування з {{Glossary("First-class Function", "функціями першого класу")}}, код якої інтерпретується та компілюється під час виконання. Хоча JavaScript насамперед відома як скриптова мова для веб-сторінок, вона також використовується у <a href="https://en.wikipedia.org/wiki/JavaScript#Uses_outside_Web_pages">багатьох небраузерних середовищах</a> на кшталт <a href="/en-US/docs/Glossary/Node.js">Node.js</a>, <a href="https://couchdb.apache.org/">Apache CouchDB</a> та <a href="http://www.adobe.com/devnet/acrobat/javascript.html">Adobe Acrobat</a>. JavaScript — {{Glossary("Prototype-based programming", "прототип-орієнтована")}} {{glossary("Dynamic_programming_language", "динамічна мова")}}, що має декілька парадигм та підтримує {{glossary("OOP", "об'єктно-орієнтований")}}, <a href="https://uk.wikipedia.org/wiki/%D0%86%D0%BC%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D0%B5_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F">імперативний</a> та <a href="https://uk.wikipedia.org/wiki/%D0%94%D0%B5%D0%BA%D0%BB%D0%B0%D1%80%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D0%B5_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F">декларативний</a> (тобто <a href="https://uk.wikipedia.org/wiki/%D0%A4%D1%83%D0%BD%D0%BA%D1%86%D1%96%D0%B9%D0%BD%D0%B5_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F">функціональне програмування</a>) стилі. Розгорнуте визначення та докладний опис JavaScript <a href="/uk/docs/Learn/JavaScript">читайте за посиланням</a>.</p>
+
+<p>Ця частина сайту присвячена безпосередньо мові JavaScript, і вона не стосується тонкощів, пов'язаних з веб-сторінками чи іншим оточенням, у якому виконується JavaScript. Специфічну інформацію щодо {{Glossary("API","API")}} для Веб-сторінок дивіться, будь ласка, у підрозділах <a href="/uk/docs/Web/API">Web APIs</a> та <a href="/uk/docs/Glossary/DOM">DOM</a>.</p>
+
+<p>Стандартом для JavaScript є <a href="/uk/docs/Web/JavaScript/Language_Resources">ECMAScript</a>. Станом на 2012 рік усі <a href="http://kangax.github.io/compat-table/es5/">сучасні браузери</a> вже мали повну підтримку ECMAScript 5.1. Застарілі браузери підтримують щонайменше ECMAScript 3. 17 червня 2015 року <a href="http://www.ecma-international.org">ECMA International </a>випустила шосту базову версію ECMAScript з офіційною назвою ECMAScript 2015, яка у попередніх обговореннях йменувалася ECMAScript 6 або ES6. Відтоді стандарти ECMAScript оновлюються раз на рік. Ця документація посилається на найсвіжішу версію чернетки, тобто <a href="http://tc39.github.io/ecma262/">ECMAScript 2019</a> на цей час.</p>
+
+<p>Не варто плутати JavaScript з <a href="https://en.wikipedia.org/wiki/Java_(programming_language)">мовою програмування Java</a>. Обидві мови "Java" та "JavaScript" є товарними знаками чи зареєстрованими торговими марками Oracle у Сполучених Штатах та інших країнах. Проте ці дві мови програмування мають великі розбіжності у синтаксисі, семантиці та застосуванні.</p>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="Навчальні_посібники">Навчальні посібники</h2>
+
+<p>Навчайтесь програмуванню на JavaScript за допомогою путівників та посібників.</p>
+
+<h3 id="Для_повних_новачків">Для повних новачків</h3>
+
+<p>Якщо ви не маєте взагалі ніякого досвіду програмування на JavaScript, але маєте бажання навчитись, починайте <a href="/uk-UA/docs/Learn/JavaScript">з підрозділу JavaScript у нашому Просторі навчальних матеріалів</a>. Цей підрозділ складається з наступних лекцій:</p>
+
+<dl>
+ <dt><a href="/uk/docs/Web/JavaScript/Guide">Перші кроки з JavaScript</a></dt>
+ <dd>Відповіді на деякі фундаментальні питання на кшталт "JavaScript — це що?", "На що він схожий?" та "Які має можливості?" з оглядом ключових компонентів  JavaScript, таких як змінні, рядки, числа та масиви.</dd>
+ <dt><a href="/uk/docs/Learn/JavaScript/Building_blocks">Блоки, з яких складається JavaScript</a></dt>
+ <dd>Продовжуємо огляд ключових компонентів  JavaScript, цього разу спрямовуючи нашу увагу на зазвичай вживані типові блоки коду, такі як умовні викази, цикли, функції та події.</dd>
+ <dt><a href="/uk/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Знайомство з об'єктами у JavaScript</a></dt>
+ <dd>Якщо ви маєте бажання надалі вдосконалювати свій рівень знань мови та створювати більш ефективний код, важливо розумітися на об'єктно-орієнтованій природі  JavaScript, і ця лекція має стати вам у пригоді.</dd>
+</dl>
+
+<h3 id="Путівник_з_JavaScript">Путівник з JavaScript</h3>
+
+<dl>
+ <dt><a href="/uk/docs/Web/JavaScript/Guide">Путівник з JavaScript</a></dt>
+ <dd>Детальний путівник з JavaScript для осіб, які<br>
+ вже мають досвід програмування на JavaScript чи іншій мові.</dd>
+</dl>
+
+<h3 id="Середній_рівень">Середній рівень</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Клієнтський веб-API</a></dt>
+ <dd>Під час написання клієнтського JavaScript для веб-сайтів або додатків не хочеться дуже заглиблюватись лише для того, щоб почати використовувати API — інтерфейсами для управління браузером та операційною системою, на якій виконується сайт, чи просто даними інших веб-сайтів чи сервісів. У цьому розділі ми розкриваємо, що являють собою ці API, і як використовувати деякі з найбільш загальних інтерфейсів, з якими доведеться часто мати справу у вашій розробницькій діяльності. </dd>
+ <dt><a href="/uk/docs/Web/JavaScript/A_re-introduction_to_JavaScript">Введення у JavaScript наново</a></dt>
+ <dd>Огляд для осіб, які <em>вважають</em>, що знають JavaScript.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/uk/docs/Web/JavaScript/Data_structures">Структури даних у JavaScript</a></dt>
+ <dd>Огляд структур даних, наявних у JavaScript.</dd>
+ <dt><a href="/uk/docs/Web/JavaScript/Equality_comparisons_and_sameness">Порівняння рівностей та тотожність</a></dt>
+ <dd>JavaScript пропонує три шляхи для порівняння значень: строга рівність з застосуванням <code>===</code>, нестрога з <code>==</code> та метод <code>{{jsxref("Global_Objects/Object/is", "Object.is()")}}</code>.</dd>
+</dl>
+
+<h3 id="Просунутий_рівень">Просунутий рівень</h3>
+
+<dl>
+ <dt><a href="/uk/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Успадкування та ланцюг прототипів</a></dt>
+ <dd>Розтлумачення успадкування на базі прототипів, яке здебільшого невірно розуміють та недооцінюють.</dd>
+ <dt><a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">Суворий режим</a></dt>
+ <dd>Використання будь-якої змінної без попередньої декларації у суворому режимі заборонено. Цей режим грунтується на ECMAScript 5 з низкою обмежень для поліпшення швидкості й стабільності та спрощення зневадження (дослідження) коду.</dd>
+ <dt><a href="/uk/docs/Web/JavaScript/Typed_arrays">Типізовані масиви у JavaScript</a></dt>
+ <dd>Типізовані масиви у JavaScript надають механізм доступу до необроблених бінарних даних.</dd>
+ <dt><a href="/uk/docs/Web/JavaScript/Memory_Management">Керування пам'яттю</a></dt>
+ <dd>Життєвий цикл пам'яті та збирання сміття у JavaScript.</dd>
+ <dt><a href="/uk/docs/Web/JavaScript/EventLoop">Мультипотокова модель та Цикл подій</a></dt>
+ <dd>JavaScript має мультипотокову подель, яка грунтується на "циклі подій".</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Документація">Документація</h2>
+
+<p>Перегляньте повну документацію по <a href="/uk/docs/Web/JavaScript/Reference">JavaScript</a>.</p>
+
+<dl>
+ <dt><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects">Стандартні об'єкти</a></dt>
+ <dd>Ознайомтесь зі стандартними вбудованими об'єктами {{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Error")}}, {{jsxref("Function")}}, {{jsxref("JSON")}}, {{jsxref("Math")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("RegExp")}}, {{jsxref("String")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}} , {{jsxref("WeakSet")}} та ін.</dd>
+ <dt><a href="/uk/docs/Web/JavaScript/Reference/Operators">Вирази та оператори</a></dt>
+ <dd>Дізнайтесь більше про особливості поведінки у JavaScript операторів {{jsxref("Operators/instanceof", "instanceof")}}, {{jsxref("Operators/typeof", "typeof")}}, {{jsxref("Operators/new", "new")}}, {{jsxref("Operators/this", "this")}}, <a href="/uk/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">пріоритети операторів</a> тощо.</dd>
+ <dt><a href="/uk/docs/Web/JavaScript/Reference/Statements">Викази та декларації</a></dt>
+ <dd>Усвідомте, як працюють {{jsxref("Statements/do...while", "do-while")}}, {{jsxref("Statements/for...in", "for-in")}}, {{jsxref("Statements/for...of", "for-of")}}, {{jsxref("Statements/try...catch", "try-catch")}}, {{jsxref("Statements/let", "let")}}, {{jsxref("Statements/var", "var")}}, {{jsxref("Statements/const", "const")}}, {{jsxref("Statements/if...else", "if-else")}}, {{jsxref("Statements/switch", "switch")}} та інші викази й ключовики JavaScript.</dd>
+ <dt><a href="/uk/docs/Web/JavaScript/Reference/Functions">Функції</a></dt>
+ <dd>Навчіться застосовувати функції JavaScript для розробки власних додатків.</dd>
+</dl>
+
+<h2 id="Інструменти_та_ресурси">Інструменти та ресурси</h2>
+
+<p>Корисні інструменти для створення та зневадження (дослідження) вашого коду JavaScript.</p>
+
+<dl>
+ <dt><a href="/uk/docs/Tools">Інструменти розробника у Firefox</a></dt>
+ <dd><a href="/uk/docs/Tools/Scratchpad">Блокнот</a>, <a href="/uk/docs/Tools/Web_Console">Консоль</a>, <a href="/uk/docs/Tools/Profiler">Профілювання JavaScript</a>, <a href="/uk/docs/Tools/Debugger">Зневаджувач</a> та ін.</dd>
+ <dt><a href="/uk/docs/Web/JavaScript/Shells">Оболонки JavaScript</a></dt>
+ <dd>Надають Вам можливіть швидко протестувати сніпети JavaScript.</dd>
+ <dt><a href="https://togetherjs.com/">TogetherJS</a></dt>
+ <dd>
+ <p>Спрощують командну роботу. Додайте TogetherJS до Вашого сайту, і Ваші відвідувачі матимуть можливість  допомагати одне одному у реальному часі.</p>
+ </dd>
+ <dt><a href="http://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt>
+ <dd>Питання з тегом "JavaScript" на ресурсі Stack Overflow.</dd>
+ <dt><a href="/uk/docs/Web/JavaScript/New_in_JavaScript">Версії JavaScript та примітки до випуску</a></dt>
+ <dd>Переглядайте історію розвитку компонентів JavaScript та поточний статус їхньої підтримки.</dd>
+ <dt><a href="https://jsfiddle.net/">JSFiddle</a></dt>
+ <dd>Наживо редагуйте JavaScript, CSS й HTML та миттєво отримуйте результати. Використовуйте зовнішні ресурси та співпрацюйте з вашою командою онлайн.</dd>
+ <dt><a href="https://plnkr.co/">Plunker</a></dt>
+ <dd>Plunker — це онлайн-спільнота для створення, співпраці і обміном вашими ідеями у галузі веб-розробки. Редагуйте ваш JavaScript, CSS і HTML файли, та одразу отримуйте результат і файлову структуру.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/uk/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/uk/web/javascript/inheritance_and_the_prototype_chain/index.html
new file mode 100644
index 0000000000..365b96ee79
--- /dev/null
+++ b/files/uk/web/javascript/inheritance_and_the_prototype_chain/index.html
@@ -0,0 +1,306 @@
+---
+title: Наслідування та ланцюжок прототипів
+slug: Web/JavaScript/Inheritance_and_the_prototype_chain
+translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain
+---
+<div>{{jsSidebar("Advanced")}}</div>
+
+<p>JavaScript є дещо незвичним для розробників із досвідом у клас-орієнтованих мовах програмування (таких як Java чи C++), оскільки він є динамічним і не надає реалізації класу на рівні мови (ключове слово <code>class</code> введене в ES2015, але є синтаксичним цукром, тому JavaScript залишається прототип-орієнтованою мовою).</p>
+
+<p>Якщо йдеться про наслідування, то JavaScript має лише одну конструкцію: обʼєкти. Кожен обʼєкт містить у якості прихованої властивості посилання на інший обʼєкт, який називається <strong>прототипом</strong> даного.<strong> </strong>Цей прототип у свою чергу має свій прототип<strong>, </strong>і так далі, поки не досягаємо обʼєкта, прототипом якого є <code>null</code>. За визначенням, <code>null</code> не має прототипу і слугує фінальним значенням у цьому <strong>ланцюжку прототипів</strong>.</p>
+
+<p>Майже всі обʼєкти в JavaScript є екземплярами {{jsxref("Object")}}, який стоїть на вершині ланцюжка прототипів.</p>
+
+<p>Прототипна модель наслідування нерідко розглядається як одна зі слабкостей JavaScript, але фактично вона є потужнішою за класичну. Класичну модель, наприклад, досить нескладно побудувати на основі прототипної.</p>
+
+<p> </p>
+
+<h2 id="Наслідування_за_допомогою_ланцюжка_прототипів">Наслідування за допомогою ланцюжка прототипів</h2>
+
+<h3 id="Наслідування_властивостей">Наслідування властивостей</h3>
+
+<p>Обʼєкти в JavaScript є динамічними "наборами" властивостей (будемо називати їх <strong>власними властивостями</strong>). Обʼєкти в JavaScript містять посилання на свій обʼєкт-прототип. При зверненні до будь-якої властивості обʼєкта пошук цієї властивості відбувається не лише всередині обʼєкта, але і в його прототипі, і у прототипі прототипа, і так далі, поки властивість із заданим імʼям не буде знайдена, або не буде досягнуто кінця ланцюжка прототипів.</p>
+
+<div class="note">
+<p>Відповідно до стандарту ECMAScript, запис <code>someObject.[[Prototype]]</code> використовується для вказання прототипа <code>someObject</code>. Починаючи з ECMAScript 2015, доступ до <code>[[Prototype]]</code> отримують за допомогою {{jsxref("Object.getPrototypeOf()")}} та {{jsxref("Object.setPrototypeOf()")}}. Це еквівалентно властивості JavaScript <code>__proto__</code>, яка не відповідає стандарту, але де-факто імплементована у більшості браузерів.</p>
+
+<p>Ви не повинні плутати це з <code><em>func</em>.prototype</code>, властивістю функції, яка натомість визначає, що <code>[[Prototype]]</code> має бути присвоєний усім <em>екземплярам</em> обʼєктів, створених цією функцією як конструктором. Властивість <code><strong>Object.prototype</strong></code> представляє прототип {{jsxref("Object")}}.</p>
+</div>
+
+<p>Ось що відбувається при спробі звернення до властивості:</p>
+
+<pre class="brush: js">// За допомогою функції f створимо обʼєкт o із власними властивостями a і b:
+let f = function () {
+   this.a = 1;
+   this.b = 2;
+}
+let o = new f(); // {a: 1, b: 2}
+
+// додаємо властивості у прототип фунції f
+ f.prototype.b = 3;
+ f.prototype.c = 4;
+
+// не присвоюйте значення f.prototype = {b:3,c:4}; це зруйнує ланцюжок прототипів
+// o.[[Prototype]] має властивості b та c.
+// o.[[Prototype]].[[Prototype]] це Object.prototype.
+// Нарешті, o.[[Prototype]].[[Prototype]].[[Prototype]] це null.
+// Це кінець ланцюжка прототипів, оскільки null,
+// за визначенням, не має [[Prototype]].
+// Отже, повністю ланцюжок прототипів виглядатиме так:
+// {a: 1, b: 2} ---&gt; {b: 3, c: 4} ---&gt; Object.prototype ---&gt; null
+
+console.log(o.a); // 1
+// Чи є 'a' власною влативістю для o? Так, і її значення 1.
+
+console.log(o.b); // 2
+// Чи є 'b' власною властивістю для o? Так, і її значення 2.
+// Прототип також має властивість 'b', але вона не відвідується.
+// Це називається "затінюванням властивості".
+
+console.log(o.c); // 4
+// Чи є 'c' власною властивістю для o? Ні, перевіряємо його прототип.
+// Чи є 'c' власною властивістю для o.[[Prototype]]? Так, і її значення 4.
+
+console.log(o.d); // undefined
+// Чи є 'd' власною властивістю для o? Ні, перевіряємо його прототип.
+// Чи є 'd' власною властивістю для o.[[Prototype]]? Ні, перевіряємо його прототип.
+// o.[[Prototype]].[[Prototype]] це null, закінчуємо пошук,
+// властивості не знайдено, повертаємо undefined.</pre>
+
+<p><a href="https://repl.it/@khaled_hossain_code/prototype">Посилання на код</a></p>
+
+<p>Присвоєння значення властивості обʼєкта створює власну властивість. Єдиним винятком є той випадок, коли властивість успадковується разом із <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">геттером або сеттером</a>.</p>
+
+<h3 id="Успадкування_методів">Успадкування "методів"</h3>
+
+<p>JavaScript не має "методів" у тому вигляді, як у клас-орієнтованих мовах. У JavaScript будь-яку функцію можна додати до обʼєкта в якості властивості. Успадкована фукція поводиться так само як і будь-яка інша властивість, включаючи затінювання властивостей, як було показано вище (в даному випадку це є певною формою <em>заміщення методу</em>).</p>
+
+<p>Коли виконується успадкована функція, значення <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> вказує на обʼєкт, що її наслідує, а не на обʼєкт-прототип, у якому функція є власною властивістю.</p>
+
+<pre class="brush: js">var o = {
+  a: 2,
+  m: function() {
+    return this.a + 1;
+  }
+};
+
+console.log(o.m()); // 3
+// Коли тут викликається o.m, 'this' вказує на o
+
+var p = Object.create(o);
+// p є обʼєктом, що наслідує від o
+
+p.a = 4; // створюється власна властивість 'a' для p
+console.log(p.m()); // 5
+// коли викликається p.m, 'this' вказує на p.
+// Тобто коли p наслідує функцію m обʼєкта o,
+// 'this.a' означає p.a, власну властивість 'a' обʼєкта p
+</pre>
+
+<h2 id="Різні_способи_створення_обʼєктів_та_результуючого_ланцюжка_прототипів">Різні способи створення обʼєктів та результуючого ланцюжка прототипів</h2>
+
+<h3 id="Обʼєкти_що_створені_за_допомогою_синтаксичних_конструкцій">Обʼєкти, що створені за допомогою синтаксичних конструкцій</h3>
+
+<pre class="brush: js">var o = {a: 1};
+
+// The newly created object o has Object.prototype as its [[Prototype]]
+// o has no own property named 'hasOwnProperty'
+// hasOwnProperty is an own property of Object.prototype.
+// So o inherits hasOwnProperty from Object.prototype
+// Object.prototype has null as its prototype.
+// o ---&gt; Object.prototype ---&gt; null
+
+var b = ['yo', 'whadup', '?'];
+
+// Arrays inherit from Array.prototype
+// (which has methods indexOf, forEach, etc.)
+// The prototype chain looks like:
+// b ---&gt; Array.prototype ---&gt; Object.prototype ---&gt; null
+
+function f() {
+  return 2;
+}
+
+// Functions inherit from Function.prototype
+// (which has methods call, bind, etc.)
+// f ---&gt; Function.prototype ---&gt; Object.prototype ---&gt; null
+</pre>
+
+<h3 id="За_допомогою_конструктора">За допомогою конструктора</h3>
+
+<p>Конструктор в JavaScript це "просто" функція, яка може бути викликана з <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">новим оператором</a>.</p>
+
+<pre class="brush: js">function Graph() {
+  this.vertices = [];
+  this.edges = [];
+}
+
+Graph.prototype = {
+  addVertex: function(v) {
+    this.vertices.push(v);
+  }
+};
+
+var g = new Graph();
+// g is an object with own properties 'vertices' and 'edges'.
+// g.[[Prototype]] is the value of Graph.prototype when new Graph() is executed.
+</pre>
+
+<h3 id="За_допомогою_Object.create">За допомогою <code>Object.create</code></h3>
+
+<p>У ECMAScript 5 введений новий метод: {{jsxref("Object.create()")}}. Виклик цього методу створює новий об'єкт. Прототип цього об'єкту це перший аргумент функції:</p>
+
+<pre class="brush: js">var a = {a: 1};
+// a ---&gt; Object.prototype ---&gt; null
+
+var b = Object.create(a);
+// b ---&gt; a ---&gt; Object.prototype ---&gt; null
+console.log(b.a); // 1 (inherited)
+
+var c = Object.create(b);
+// c ---&gt; b ---&gt; a ---&gt; Object.prototype ---&gt; null
+
+var d = Object.create(null);
+// d ---&gt; null
+console.log(d.hasOwnProperty);
+// undefined, because d doesn't inherit from Object.prototype
+</pre>
+
+<div>
+<h3 id="With_the_class_keyword">With the <code>class</code> keyword</h3>
+
+<p>ECMAScript 2015 introduced a new set of keywords implementing <a href="/en-US/docs/Web/JavaScript/Reference/Classes">classes</a>. Although these constructs look like those familiar to developers of class-based languages, they are not the same. JavaScript remains prototype-based. The new keywords include {{jsxref("Statements/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}, {{jsxref("Classes/static", "static")}}, {{jsxref("Classes/extends", "extends")}}, and {{jsxref("Operators/super", "super")}}.</p>
+
+<pre class="brush: js">'use strict';
+
+class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}
+
+class Square extends Polygon {
+  constructor(sideLength) {
+    super(sideLength, sideLength);
+  }
+  get area() {
+    return this.height * this.width;
+  }
+  set sideLength(newLength) {
+    this.height = newLength;
+    this.width = newLength;
+  }
+}
+
+var square = new Square(2);
+</pre>
+
+<h3 id="Продуктивність">Продуктивність</h3>
+
+<p>The lookup time for properties that are high up on the prototype chain can have a negative impact on performance, and this may be significant in code where performance is critical. Additionally, trying to access nonexistent properties will always traverse the full prototype chain.</p>
+
+<p>Also, when iterating over the properties of an object, <strong>every</strong> enumerable property that is on the prototype chain will be enumerated.</p>
+
+<p>To check whether an object has a property defined on <em>itself</em> and not somewhere on its prototype chain, it is necessary to use the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> method which all objects inherit from <code>Object.prototype</code>.</p>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> is the only thing in JavaScript which deals with properties and does <strong>not</strong> traverse the prototype chain.</p>
+
+<p>Note: It is <strong>not</strong> enough to check whether a property is <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>. The property might very well exist, but its value just happens to be set to <code>undefined</code>.</p>
+</div>
+
+<h3 id="Bad_practice_Extension_of_native_prototypes">Bad practice: Extension of native prototypes</h3>
+
+<p>One mis-feature that is often used is to extend <code>Object.prototype</code> or one of the other built-in prototypes.</p>
+
+<p>This technique is called monkey patching and breaks <em>encapsulation</em>. While used by popular frameworks such as Prototype.js, there is still no good reason for cluttering built-in types with additional <em>non-standard</em> functionality.</p>
+
+<p>The <strong>only</strong> good reason for extending a built-in prototype is to backport the features of newer JavaScript engines, like <code>Array.forEach</code>.</p>
+
+<h2 id="Приклад">Приклад </h2>
+
+<p><code>B</code> shall inherit from <code>A</code>:</p>
+
+<pre class="brush: js">function A(a) {
+  this.varA = a;
+}
+
+// What is the purpose of including varA in the prototype when A.prototype.varA will <em>always</em> be shadowed by
+// this.varA, given the definition of function A above?
+A.prototype = {
+  varA: null,  // Shouldn't we strike varA from the prototype as doing nothing?
+      // perhaps intended as an optimization to allocate space in hidden classes?
+      // https://developers.google.com/speed/articles/optimizing-javascript#Initializing instance variables
+      // would be valid if varA wasn't being initialized uniquely for each instance
+  doSomething: function() {
+    // ...
+  }
+};
+
+function B(a, b) {
+  A.call(this, a);
+  this.varB = b;
+}
+B.prototype = Object.create(A.prototype, {
+  varB: {
+    value: null,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  },
+  doSomething: {
+    value: function() { // override
+      A.prototype.doSomething.apply(this, arguments); // call super
+      // ...
+    },
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }
+});
+B.prototype.constructor = B;
+
+var b = new B();
+b.doSomething();
+</pre>
+
+<p>The important parts are:</p>
+
+<ul>
+ <li>Types are defined in <code>.prototype</code>.</li>
+ <li>You use <code>Object.create()</code> to inherit.</li>
+</ul>
+
+<h2 id="prototype_та_Object.getPrototypeOf"><code>prototype</code> та <code>Object.getPrototypeOf</code></h2>
+
+<p>JavaScript is a bit confusing for developers coming from Java or C++, as it's all dynamic, all runtime, and it has no classes at all. It's all just instances (objects). Even the "classes" we simulate are just a function object.</p>
+
+<p>You probably already noticed that our <code>function A</code> has a special property called <code>prototype</code>. This special property works with the JavaScript <code>new </code>operator. The reference to the prototype object is copied to the internal <code>[[Prototype]]</code> property of the new instance. For example, when you do <code>var a1 = new A()</code>, JavaScript (after creating the object in memory and before running function <code>A()</code> with <code>this</code> defined to it) sets <code>a1.[[Prototype]] = A.prototype</code>. When you then access properties of the instance, JavaScript first checks whether they exist on that object directly, and if not, it looks in <code>[[Prototype]]</code>. This means that all the stuff you define in <code>prototype</code> is effectively shared by all instances, and you can even later change parts of <code>prototype</code> and have the changes appear in all existing instances, if you wanted to.</p>
+
+<p>If, in the example above, you do <code>var a1 = new A(); var a2 = new A();</code> then <code>a1.doSomething</code> would actually refer to <code>Object.getPrototypeOf(a1).doSomething</code>, which is the same as the <code>A.prototype.doSomething</code> you defined, i.e. <code>Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething</code>.</p>
+
+<p>In short, <code>prototype</code> is for types, while <code>Object.getPrototypeOf()</code> is the same for instances.</p>
+
+<p><code>[[Prototype]]</code> is looked at <em>recursively</em>, i.e. <code>a1.doSomething</code>, <code>Object.getPrototypeOf(a1).doSomething</code>, <code>Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething</code> etc., until it's found or <code>Object.getPrototypeOf </code>returns null.</p>
+
+<p>So, when you call</p>
+
+<pre class="brush: js">var o = new Foo();</pre>
+
+<p>JavaScript actually just does</p>
+
+<pre class="brush: js">var o = new Object();
+o.[[Prototype]] = Foo.prototype;
+Foo.call(o);</pre>
+
+<p>(or something like that) and when you later do</p>
+
+<pre class="brush: js">o.someProp;</pre>
+
+<p>it checks whether <code>o</code> has a property <code>someProp</code>. If not, it checks <code>Object.getPrototypeOf(o).someProp</code>, and if that doesn't exist it checks <code>Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp</code>, and so on.</p>
+
+<div>
+<h2 id="Висновки">Висновки</h2>
+
+<p>It is <strong>essential</strong> to understand the prototypal inheritance model before writing complex code that makes use of it. Also, be aware of the length of the prototype chains in your code and break them up if necessary to avoid possible performance problems. Further, the native prototypes should <strong>never</strong> be extended unless it is for the sake of compatibility with newer JavaScript features.</p>
+</div>
diff --git a/files/uk/web/javascript/memory_management/index.html b/files/uk/web/javascript/memory_management/index.html
new file mode 100644
index 0000000000..0022a81129
--- /dev/null
+++ b/files/uk/web/javascript/memory_management/index.html
@@ -0,0 +1,204 @@
+---
+title: Керування пам'яттю
+slug: Web/JavaScript/Memory_Management
+tags:
+  - JavaScript
+  - Збирання сміття
+  - пам'ять
+  - продуктивність
+translation_of: Web/JavaScript/Memory_Management
+---
+<div>{{JsSidebar("Advanced")}}</div>
+
+<p>У низькорівневих мовах, наприклад C, існують примітивні функції для ручного керування пам'яттю, такі як <a href="https://pubs.opengroup.org/onlinepubs/009695399/functions/malloc.html">malloc()</a> та <a href="https://en.wikipedia.org/wiki/C_dynamic_memory_allocation#Overview_of_functions">free()</a>. В той же час JavaScript автоматично виділяє пам'ять при створенні об'єктів та звільняє її, коли вони більше не використовуються (<em>збирання сміття</em>). Ця автоматичність є потенційним джерелом плутанини: вона може дати розробникам хибне враження, що їм не потрібно хвилюватись щодо керування пам'яттю.</p>
+
+<h2 id="Життєвий_цикл_памяті">Життєвий цикл пам'яті</h2>
+
+<p>Незалежно від мови програмування, життєвий цикл пам'яті завжди приблизно той самий:</p>
+
+<ol>
+ <li>Виділення потрібної пам'яті</li>
+ <li>Використання виділеної пам'яті (читання, запис)</li>
+ <li>Вивільнення виділеної пам'яті, коли вона більше не потрібна</li>
+</ol>
+
+<p>Друга частина в усіх мовах є явною. Перша та остання частини є явними у низькорівневих мовах, але, як правило, неявні у мовах високого рівня, таких як JavaScript.</p>
+
+<h3 id="Виділення_памяті_у_JavaScript">Виділення пам'яті у JavaScript</h3>
+
+<h4 id="Ініціалізація_значень">Ініціалізація значень</h4>
+
+<p>Щоб не турбувати розробника виділеннями пам'яті, JavaScript автоматично виділяє пам'ять, коли оголошуються початкові значення.</p>
+
+<pre class="brush: js">var n = 123; // виділяє пам'ять для числа
+var s = 'блабла'; // виділяє пам'ять для рядка
+
+var o = {
+  a: 1,
+  b: null
+}; // виділяє пам'ять для об'єкта та значень, що він містить
+
+// (як з об'єктом) виділяє пам'ять для масиву та
+// значень, що він містить
+var a = [1, null, 'аовл'];
+
+function f(a) {
+  return a + 2;
+} // виділяє пам'ять для функції (об'єкт, який можна викликати)
+
+// функціональні вирази також виділяють пам'ять для об'єкта
+someElement.addEventListener('click', function() {
+  someElement.style.backgroundColor = 'blue';
+}, false);
+</pre>
+
+<h4 id="Виділення_памяті_через_виклики_функцій">Виділення пам'яті через виклики функцій</h4>
+
+<p>Виклики деяких функцій виділяють пам'ять під об'єкт.</p>
+
+<pre class="brush: js">var d = new Date(); // виділяє пам'ять під об'єкт Date
+
+var e = document.createElement('div'); // видділяє пам'ять під елемент DOM</pre>
+
+<p>Деякі методи виділяють пам'ять для нових значень чи об'єктів:</p>
+
+<pre class="brush: js">var s = 'йцуке';
+var s2 = s.substr(0, 3); // s2 - новий рядок
+// Оскільки рядки є незмінними,
+// JavaScript може вирішити не виділяти пам'ять,
+// а лише зберегти діапазон [0, 3].
+
+var a = ['ouais ouais', 'nan nan'];
+var a2 = ['generation', 'nan nan'];
+var a3 = a.concat(a2);
+// новий масив з 4 елементів, що є
+// поєданням елементів a та a2.
+</pre>
+
+<h3 id="Використання_значень">Використання значень</h3>
+
+<p>Використання значень, по суті, означає читання та запис у виділеній пам'яті. Це можна зробити зчитуванням та записом значення змінної чи властивості об'єкта, чи навіть передачею аргументу у функцію.</p>
+
+<h3 id="Звільнення_памяті_коли_вона_більше_не_потрібна">Звільнення пам'яті, коли вона більше не потрібна</h3>
+
+<p>Більшість проблем керування пам'яттю виникають на цій стадії. Найскладніший аспект цього етапу полягає у визначенні, коли виділена пам'ять більше не потрібна. </p>
+
+<p>Низькорівневі мови вимагають, щоб розробник вручну визначав, у якій точці програми виділена пам'ять більше не потрібна, та звільняв її.</p>
+
+<p>Деякі високорівневі мови, такі як JavaScript, використовують форму автоматичного керування пам'яттю, відому як <a href="https://uk.wikipedia.org/wiki/%D0%97%D0%B1%D0%B8%D1%80%D0%B0%D0%BD%D0%BD%D1%8F_%D1%81%D0%BC%D1%96%D1%82%D1%82%D1%8F">збирання сміття</a> (ЗС). Збирач сміття відслідковує виділення пам'яті та визначає момент, коли блок виділеної пам'яті більше не потрібний, і повертає його. Цей автоматичний процес є неточним, оскільки загальна проблема визначення, чи потрібна наразі та чи інша ділянка пам'яті, є <a href="https://uk.wikipedia.org/wiki/%D0%90%D0%BB%D0%B3%D0%BE%D1%80%D0%B8%D1%82%D0%BC%D1%96%D1%87%D0%BD%D0%B0_%D1%80%D0%BE%D0%B7%D0%B2%27%D1%8F%D0%B7%D0%BD%D1%96%D1%81%D1%82%D1%8C">нерозв'язною</a>.</p>
+
+<h2 id="Збирання_сміття">Збирання сміття</h2>
+
+<p>Як було зазначено вище, загальна проблема автоматичного визначення того, що якась ділянка пам'яті "більше не потрібна", є нерозв'язною. Як наслідок, збирачі сміття впроваджують обмеження вирішення загальної проблеми. Цей розділ пояснює концепції,  необхідні для розуміння головних алгоритмів збирання сміття та відповідних обмежень.</p>
+
+<h3 id="Посилання">Посилання</h3>
+
+<p>Головна концепція, на яку покладаються алгоритми збирачів сміття - це концепція <em>посилань</em>. У контексті керування пам'яттю об'єкт посилається на інший об'єкт, якщо звертається до нього (явно чи неявно). Наприклад, об'єкт JavaScript має посилання на свій <a href="/uk/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">прототип</a> (неявне посилання) та на значення своїх властивостей (явне посилання).</p>
+
+<p>У цьому контексті поняття "об'єкта" є ширшим, ніж звичайні об'єкти JavaScript, і містить також області видимості функцій (або глобальну область видимості).</p>
+
+<h3 id="Збирання_сміття_через_підрахунок_посилань">Збирання сміття через підрахунок посилань</h3>
+
+<p>Це найпримітивніший алгоритм збирання сміття. Цей алгоритм звужує проблему з визначення того, чи об'єкт досі є потрібним, до визначення того, чи мають інші об'єкти досі посилання на даний об'єкт. Об'єкт називається "сміттям", або підлягає збиранню, якщо на нього вказує нуль посилань.</p>
+
+<h4 id="Приклад">Приклад</h4>
+
+<pre class="brush: js">var x = {
+  a: {
+    b: 2
+  }
+};
+// Створено 2 об'єкта. Один має посилання у іншому як одна з його властивостей.
+// Інший має посилання через присвоєння його змінній 'x'.
+// Зрозуміло, що жоден з них не може бути прибраний.
+
+
+var y = x;      // Змінна 'y' - друга сутність, що має посилання на об'єкт.
+
+x = 1;          // Тепер об'єкт, що початково був присвоєний 'x', має унікальне посилання,
+                // втілене у змінній 'y'.
+
+var z = y.a;    // Посилання на властивість 'a' об'єкта.
+                //   Цей об'єкт тепер має 2 посилання: одне у вигляді властивості,
+                //   інше у вигляді змінної 'z'.
+
+y = 'mozilla';  // Об'єкт, що початково був присвоєний 'x', тепер має нуль посилань.
+                //   Він може бути прибраний.
+                //   Однак, на його властивість 'a' досі посилається
+                //   змінна 'z', тому її не можна вивільнити.
+
+z = null;       // Властивість 'a' об'єкта, що початково був присвоєний x,
+                //   має нуль посилань. Об'єкт тепер може бути прибраний.
+</pre>
+
+<h4 id="Обмеження_Циклічні_посилання">Обмеження: Циклічні посилання</h4>
+
+<p>Існує обмеження у випадку циклічних посилань. У наступному прикладі два об'єкти створені з властивостями, в яких вони посилаются один на одного, таким чином створюючи цикл. Вони вийдуть за межі області видимості, коли завершиться виклик функції. В цей момент вони стають непотрібними, і їхня виділена пам'ять має бути повернена. Однак, алгоритм, що підраховує посилання, не вважатиме їх готовими для повернення, оскільки кожен з двох об'єктів має принаймні одне посилання, що вказує на нього, в результаті жоден з них не позначається для збирання сміття. Циклічні посилання є типовою причиною витоків пам'яті.</p>
+
+<pre class="brush: js">function f() {
+  var x = {};
+  var y = {};
+  x.a = y;        // x посилається на y
+  y.a = x;        // y посилається на x
+
+  return 'йцуке';
+}
+
+f();
+</pre>
+
+<h4 id="Приклад_з_реального_життя">Приклад з реального життя</h4>
+
+<p>Internet Explorer 6 та 7 відомі тим, що їхні збирачі сміття для об'єктів DOM працюють на основі підрахунку посилань. Цикли є типовою помилкою, що призводить до витоків пам'яті:</p>
+
+<pre class="brush: js">var div;
+window.onload = function() {
+  div = document.getElementById('myDivElement');
+  div.circularReference = div;
+  div.lotsOfData = new Array(10000).join('*');
+};
+</pre>
+
+<p>У наведеному прикладі DOM-елемент "myDivElement" має циклічне посилання на самого себе у властивості "circularReference". Якщо ця властивість не буде явно видалена чи обнулена, збирач сміття, що підраховує посилання, завжди матиме принаймні одне наявне посилання і триматиме DOM-елемент у пам'яті, навіть якщо він був видалений з DOM-дерева. Якщо DOM-елемент містить великий об'єм даних (проілюстровано у наведеному прикладі властивістю "lotsOfData"), пам'ять, зайнята цими даними, ніколи не буде вивільнена, що може призвести до проблем, пов'язаних з пам'яттю, наприклад, переглядач ставатиме все повільнішим.</p>
+
+<h3 id="Алгоритм_маркування_та_прибирання_mark-and-sweep">Алгоритм маркування та прибирання (mark-and-sweep)</h3>
+
+<p>Цей алгоритм звужує визначення "об'єкта, який більше не потрібен" до "недосяжного об'єкта".</p>
+
+<p>Даний алгоритм використовує набір об'єктів, що називаються <em>коренями. </em>У JavaScript корінь є глобальним об'єктом. Періодично збирач сміття починатиме від цих коренів, знаходитиме усі об'єкти, що мають посилання у коренях, далі усі об'єкти, що мають посилання у них, і т. д. Таким чином, починаючи від коренів, збирач сміття знайде усі <em>досяжні</em> об'єкти та збере усі недосяжні об'єкти.</p>
+
+<p>Цей алгоритм є покращенням попереднього, оскільки об'єкт, що має нуль посилань, є об'єктивно недосяжним. Протилежне не є істиною, як ми бачили на прикладі циклічних посилань.</p>
+
+<p>Станом на 2012 рік усі сучасні переглядачі використовують збирачі сміття з алгоритмом маркування та прибирання. Усі покращення в галузі збирання сміття у JavaScript (генераційне/інкрементне/конкурентне/паралельне збирання сміття) за останні кілька років є покращеннями реалізації даного алгоритму, а не покращеннями самого алгоритму збирання сміття чи скороченням його визначення моменту, коли "об'єкт більше не потрібен".</p>
+
+<h4 id="Циклічні_посилання_більше_не_є_проблемою">Циклічні посилання більше не є проблемою</h4>
+
+<p>У наведеному вище прикладі, коли завершується виклик функції, два об'єкти більше не мають посилань з жодного ресурсу, досяжного з глобального об'єкта. Як наслідок, збирач сміття визнає їх недосяжними та поверне виділену під них пам'ять.</p>
+
+<h4 id="Обмеження_Ручне_вивільнення_памяті">Обмеження: Ручне вивільнення пам'яті</h4>
+
+<p>Бувають випадки, коли було б зручно власноруч визначити, коли й яка пам'ять буде звільнена. Щоб звільнити пам'ять об'єкта, його треба зробити явно недосяжним.</p>
+
+<p>Станом на 2019 рік немає можливості явно чи програмно запустити збирання сміття у JavaScript.</p>
+
+<h2 id="Node.js">Node.js</h2>
+
+<p>Node.js пропонує додаткові можливості та інструменти для конфігурування та відлагодження проблем з пам'яттю, які можуть бути недоступні для JavaScript, що виконується у середовищі переглядача.</p>
+
+<h4 id="Прапори_рушія_V8">Прапори рушія V8</h4>
+
+<p>Максимальний розмір доступної пам'яті купи може бути збільшений за допомогою прапору:</p>
+
+<p><code>node --<em>max-old-space-size=6000</em> index.js</code></p>
+
+<p>Ми також можемо викликати збирач сміття для відлагодження проблем з пам'яттю, використовуючи прапор та <a href="https://nodejs.org/uk/docs/guides/debugging-getting-started/">Chrome Debugger</a>:</p>
+
+<pre class="brush: bash">node --expose-gc --inspect index.js</pre>
+
+<h4 id="Див._також">Див. також</h4>
+
+<ul>
+ <li><a class="external" href="http://www.ibm.com/developerworks/web/library/wa-memleak/">Стаття IBM про "Шаблони витоків пам'яті у JavaScript" (2007)</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/magazine/ff728624.aspx">Стаття Kangax про те, як зареєструвати обробник подій та запобігти витокам пам'яті (2010)</a></li>
+ <li><a href="/uk/docs/Mozilla/Performance" title="https://developer.mozilla.org/en-US/docs/Mozilla/Performance">Продуктивність</a></li>
+</ul>
diff --git a/files/uk/web/javascript/new_in_javascript/1.7/index.html b/files/uk/web/javascript/new_in_javascript/1.7/index.html
new file mode 100644
index 0000000000..ac7a93e3fd
--- /dev/null
+++ b/files/uk/web/javascript/new_in_javascript/1.7/index.html
@@ -0,0 +1,38 @@
+---
+title: Нове у JavaScript 1.7
+slug: Web/JavaScript/New_in_JavaScript/1.7
+tags:
+  - JavaScript
+  - версії
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.7
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>Нижче наведений журнал змін для JavaScript 1.7. Ця версія була додана у <a href="/en-US/Firefox/Releases/2">Firefox 2</a> (жовтень 2006).</p>
+
+<p>JavaScript 1.7 є оновленням мови, що запроваджує декілька нових функцій, зокрема, генератори, ітератори, <code>let</code>-вирази та деструктуризаційне присвоювання.</p>
+
+<h2 id="Використання_JavaScript_1.7">Використання JavaScript 1.7</h2>
+
+<p>Для використання деяких нових функцій JavaScript 1.7 вам необхідно вказати, що ви бажаєте використовувати JavaScript 1.7. У коді HTML чи XUL використовуйте:</p>
+
+<pre class="brush: html">&lt;script type="application/javascript;version=1.7"&gt;&lt;/script&gt;</pre>
+
+<p>Якщо ви використовуєте <a href="/uk/docs/Mozilla/Projects/SpiderMonkey/Introduction_to_the_JavaScript_shell">оболонку JavaScript</a>, вам необхідно встановити версію, яку ви бажаєте використовувати, за допомогою перемикача <code>-version 170</code> в командному рядку, або функцією <code>version()</code>:</p>
+
+<pre class="brush:js">version(170);
+</pre>
+
+<p>Функції, які потребують використання нових ключових слів "yield" та "let" вимагають зазначити версію 1.7, тому що існуючий код може використовувати ці ключові слова в якості змінних чи імен функцій. Функції, які не запроваджують нових ключових слів (деструктуризаційне присвоювання та заповнення масивів) можуть використовуватись без вказання версії JavaScript.</p>
+
+<h2 id="Нові_функції_JavaScript_1.7">Нові функції JavaScript 1.7</h2>
+
+<p>Наведена функціональність, додана з JavaScript 1.7, раніше не була частиною стандарту ECMA-262. У новіших версіях Firefox реалізацію було оновлено для роботи з семантикою, зазначеною у 6-й версії ECMAScript. Будь ласка, дивіться різницю у статтях за посиланнями.</p>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators">Ітератори та генератори</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Array_comprehensions#Відмінності_від_заповнень_у_JS1.7JS1.8">Заповнення масивів</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/let">Оператор <code>let</code></a> (підтримка виразу <code>let</code> була припинена у Gecko 41, дивіться {{bug(1023609)}}).</li>
+ <li><a href="/uk/docs/const">Оператор const</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Деструктуризація">Деструктуризаційне присвоєння</a> (підтримка стилю деструктуризації for-in JS1.7 була припинена у Gecko 40, дивіться {{bug(1083498)}}).</li>
+</ul>
diff --git a/files/uk/web/javascript/new_in_javascript/index.html b/files/uk/web/javascript/new_in_javascript/index.html
new file mode 100644
index 0000000000..081bcc5623
--- /dev/null
+++ b/files/uk/web/javascript/new_in_javascript/index.html
@@ -0,0 +1,73 @@
+---
+title: Нове у JavaScript
+slug: Web/JavaScript/New_in_JavaScript
+tags:
+  - JavaScript
+  - NeedsTranslation
+  - TopicStub
+  - Versions
+translation_of: Archive/Web/JavaScript/New_in_JavaScript
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>This chapter contains information about JavaScript's version history and implementation status for Mozilla/SpiderMonkey-based JavaScript applications, such as Firefox.</p>
+
+<h2 id="ECMAScript_версії">ECMAScript версії</h2>
+
+<dl>
+ <dt><a href="/uk/docs/Web/JavaScript/Language_Resources">Language resources</a></dt>
+ <dd>Learn more about the ECMAScript standards on which the JavaScript language is based on.</dd>
+ <dt><a href="/uk/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5 support</a></dt>
+ <dd>Implementation status for the current standard ECMA-262 Edition 5.1 in Mozilla-based engines and products.</dd>
+ <dt><a href="/uk/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">ECMAScript 2015 support</a></dt>
+ <dd>Implementation status for the draft ECMA-262 Edition 6 (ES2015) in Mozilla-based engines and products.</dd>
+ <dt><a href="/uk/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_7_support_in_Mozilla">ECMAScript 2016 support</a></dt>
+ <dd>Implementation status for the upcoming ECMA-262 Edition 7 (ES2016) in Mozilla-based engines and products.</dd>
+</dl>
+
+<h2 id="JavaScript_release_notes">JavaScript release notes</h2>
+
+<dl>
+ <dt><a href="/uk/docs/Web/JavaScript/New_in_JavaScript/Firefox_JavaScript_changelog">Firefox JavaScript changelog</a></dt>
+ <dd>See this changelog for JavaScript features implemented in Firefox 5 and later.</dd>
+</dl>
+
+<h2 id="JavaScript_версії">JavaScript версії</h2>
+
+<p><strong>Deprecated</strong> ({{deprecated_inline}}). The explicit versioning and opt-in of language features was Mozilla-specific and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=867609">is in process of being removed</a>. Firefox 4 was the last version which referred to an JavaScript version (1.8.5). With new ECMA standards, JavaScript language features are now often mentioned with their initial definition in ECMA-262 Editions such as ES2015.</p>
+
+<p>JavaScript was released as version 1.0 in March 1996 in Netscape Navigator 2.0 and Internet Explorer 2.0.</p>
+
+<dl>
+ <dt><a href="/uk/docs/Web/JavaScript/New_in_JavaScript/1.1">JavaScript 1.1</a></dt>
+ <dd>Version shipped in Netscape Navigator 3.0. Released on August 19, 1996.</dd>
+ <dt><a href="/uk/docs/Web/JavaScript/New_in_JavaScript/1.2">JavaScript 1.2</a></dt>
+ <dd>Version shipped in Netscape Navigator 4.0-4.05. Released on June 11, 1997.</dd>
+ <dt><a href="/uk/docs/Web/JavaScript/New_in_JavaScript/1.3">JavaScript 1.3</a></dt>
+ <dd>Version shipped in Netscape Navigator 4.06-4.7x. Released on October 19, 1998.<br>
+ Standardization work to be compliant with ECMA-262 1st and 2nd Edition.</dd>
+ <dt><a href="/uk/docs/Web/JavaScript/New_in_JavaScript/1.4">JavaScript 1.4</a></dt>
+ <dd>Version shipped in Netscape's server side JavaScript. Released in 1999.</dd>
+ <dt><a href="/uk/docs/Web/JavaScript/New_in_JavaScript/1.5">JavaScript 1.5</a></dt>
+ <dd>Version shipped in Netscape Navigator 6.0 and Firefox 1.0. Release on November 14, 2000.<br>
+ Standardization work to be compliant with ECMA-262 3rd Edition.</dd>
+ <dt><a href="/uk/docs/Web/JavaScript/New_in_JavaScript/1.6">JavaScript 1.6</a></dt>
+ <dd>Version shipped in Firefox 1.5. Released in November 2005.<br>
+ Includes ECMAScript for XML (E4X), new <code>Array</code> methods plus <code>String</code> and <code>Array</code> generics.</dd>
+ <dt><a href="/uk/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7</a></dt>
+ <dd>Version shipped in Firefox 2. Released in October 2006.<br>
+ Includes generators, iterators, array comprehensions, <code>let</code> expressions, and destructuring assignment.</dd>
+ <dt><a href="/uk/docs/Web/JavaScript/New_in_JavaScript/1.8">JavaScript 1.8</a></dt>
+ <dd>Version shipped in Firefox 3. Released in June 2008.<br>
+ Includes expression closures, generator expressions and <code>Array.reduce()</code></dd>
+ <dt><a href="/uk/docs/Web/JavaScript/New_in_JavaScript/1.8.1">JavaScript 1.8.1</a></dt>
+ <dd>Version shipped in Firefox 3.5. Released on June 30, 2009.<br>
+ Includes the TraceMonkey JIT and supports native JSON.</dd>
+ <dt>JavaScript 1.8.2</dt>
+ <dd>Version shipped in Firefox 3.6. Released June 22, 2009.<br>
+ Includes only minor changes.</dd>
+ <dt><a href="/uk/docs/Web/JavaScript/New_in_JavaScript/1.8.5">JavaScript 1.8.5</a></dt>
+ <dd>Version shipped in Firefox 4. Released July 27, 2010.<br>
+ Includes many new features for ECMA-262 Edition 5 compliance.<br>
+ This is the last JavaScript version.</dd>
+</dl>
diff --git a/files/uk/web/javascript/oglyad_tehnologiy_javascript/index.html b/files/uk/web/javascript/oglyad_tehnologiy_javascript/index.html
new file mode 100644
index 0000000000..cb9564fe7b
--- /dev/null
+++ b/files/uk/web/javascript/oglyad_tehnologiy_javascript/index.html
@@ -0,0 +1,87 @@
+---
+title: Огляд технологій JavaScript
+slug: Web/JavaScript/oglyad_tehnologiy_JavaScript
+translation_of: Web/JavaScript/JavaScript_technologies_overview
+---
+<div>{{JsSidebar("Introductory")}}</div>
+
+<h2 id="Introduction">Introduction</h2>
+
+<p>Whereas <a href="/en-US/docs/Web/HTML">HTML</a> defines a webpage's structure and content and <a href="/en-US/docs/Web/CSS">CSS</a> sets the formatting and appearance, <a href="/en-US/docs/Web/JavaScript">JavaScript</a> adds interactivity to a webpage and creates rich web applications.</p>
+
+<p>However, the umbrella term "JavaScript" as understood in a web browser context contains several very different elements. One of them is the core language (ECMAScript), another is the collection of the <a href="/en-US/docs/Web/Reference/API">Web APIs</a>, including the DOM (Document Object Model).</p>
+
+<h2 id="JavaScript_the_core_language_(ECMAScript)">JavaScript, the core language (ECMAScript)</h2>
+
+<p>The core language of JavaScript is standardized by the ECMA TC39 committee as a language named <a href="/en-US/docs/JavaScript/Language_Resources">ECMAScript</a>.</p>
+
+<p>This core language is also used in non-browser environments, for example in <a href="http://nodejs.org/">node.js</a>.</p>
+
+<h3 id="What_falls_under_the_ECMAScript_scope">What falls under the ECMAScript scope?</h3>
+
+<p>Among other things, ECMAScript defines:</p>
+
+<ul>
+ <li>Language syntax (parsing rules, keywords, control flow, object literal initialization...)</li>
+ <li>Error handling mechanisms (throw, try/catch, ability to create user-defined Error types)</li>
+ <li>Types (boolean, number, string, function, object...)</li>
+ <li>The global object. In a browser, this global object is the window object, but ECMAScript only defines the APIs not specific to browsers, e.g. <code>parseInt</code>, <code>parseFloat</code>, <code>decodeURI</code>, <code>encodeURI</code>...</li>
+ <li>A prototype-based inheritance mechanism</li>
+ <li>Built-in objects and functions (<code>JSON</code>, <code>Math</code>, <code>Array.prototype</code> methods, Object introspection methods...)</li>
+ <li>Strict mode</li>
+</ul>
+
+<h3 id="Browser_support">Browser support</h3>
+
+<p>As of October 2016, the current versions of the major Web browsers implement <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5.1</a> and <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_2015_support_in_Mozilla">ECMAScript 2015</a>, but older versions (still in use) implement ECMAScript 5 only.</p>
+
+<h3 id="Future">Future</h3>
+
+<p>The major 6th Edition of ECMAScript was officially approved and published as a standard on June 17, 2015 by the ECMA General Assembly. Since then ECMAScript Editions are published on a yearly basis.</p>
+
+<h3 id="Internationalization_API">Internationalization API</h3>
+
+<p>The <a href="http://ecma-international.org/ecma-402/1.0/">ECMAScript Internationalization API Specification</a> is an addition to the ECMAScript Language Specification, also standardized by Ecma TC39. The internationalization API provides collation (string comparison), number formatting, and date-and-time formatting for JavaScript applications, letting the applications choose the language and tailor the functionality to their needs. The initial standard was approved in December 2012; the status of implementations in browsers is tracked in the documentation of the <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Intl"><code>Intl</code> object</a>. The Internationalization specification is nowadays also ratified on a yearly basis and browsers constantly improve their implementation.</p>
+
+<h2 id="DOM_APIs">DOM APIs</h2>
+
+<h3 id="WebIDL">WebIDL</h3>
+
+<p>The <a href="http://www.w3.org/TR/WebIDL/">WebIDL specification</a> provides the glue between the DOM technologies and ECMAScript.</p>
+
+<h3 id="The_Core_of_the_DOM">The Core of the DOM</h3>
+
+<p>The Document Object Model (DOM) is a cross-platform, <strong>language-independent convention</strong> for representing and interacting with objects in HTML, XHTML and XML documents. Objects in the <strong>DOM tree</strong> may be addressed and manipulated by using methods on the objects. The {{glossary("W3C")}} standardizes the Core Document Object Model, which defines language-agnostic interfaces that abstract HTML and XML documents as objects, and also defines mechanisms to manipulate this abstraction. Among the things defined by the DOM, we can find:</p>
+
+<ul>
+ <li>The document structure, a tree model, and the DOM Event architecture in <a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">DOM core</a>: <code>Node</code>, <code>Element</code>, <code>DocumentFragment</code>, <code>Document</code>, <code>DOMImplementation</code>, <code>Event</code>, <code>EventTarget</code>, …</li>
+ <li>A less rigorous definition of the DOM Event Architecture, as well as specific events in <a href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html">DOM events</a>.</li>
+ <li>Other things such as <a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html">DOM Traversal</a> and <a href="http://html5.org/specs/dom-range.html">DOM Range</a>.</li>
+</ul>
+
+<p>From the ECMAScript point of view, objects defined in the DOM specification are called "host objects".</p>
+
+<h3 id="HTML_DOM">HTML DOM</h3>
+
+<p><a href="http://www.whatwg.org/html">HTML</a>, the Web's markup language, is specified in terms of the DOM. Layered above the abstract concepts defined in DOM Core, HTML also defines the <em>meaning</em> of elements. The HTML DOM includes such things as the <code>className</code> property on HTML elements, or APIs such as {{ domxref("document.body") }}.</p>
+
+<p>The HTML specification also defines restrictions on documents; for example, it requires all children of a <code>ul</code> element, which represents an unordered list, to be <code>li</code> elements, as those represent list items. In general, it also forbids using elements and attributes that aren't defined in a standard.</p>
+
+<p>Looking for the <a href="/en-US/docs/DOM/document"><code>Document</code> object</a>, <a href="/en-US/docs/DOM/window"><code>Window</code> object</a>, and the other DOM elements? Read the <a href="/en-US/docs/Web/API/Document_Object_Model">DOM documentation</a>.</p>
+
+<h2 id="Other_notable_APIs">Other notable APIs</h2>
+
+<ul>
+ <li>The <code>setTimeout</code> and <code>setInterval</code> functions were first specified on the <code><a href="http://www.whatwg.org/html/#window">Window</a></code> interface in HTML Standard.</li>
+ <li><a href="https://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> makes it possible to send asynchronous HTTP requests.</li>
+ <li>The <a href="http://dev.w3.org/csswg/cssom/">CSS Object Model</a> abstract CSS rules as objects.</li>
+ <li><a href="http://www.whatwg.org/specs/web-workers/current-work/">WebWorkers </a>allows parallel computation.</li>
+ <li><a href="http://www.whatwg.org/C/#network">WebSockets</a> allows low-level bidirectional communication.</li>
+ <li><a href="http://www.whatwg.org/html/#2dcontext">Canvas 2D Context</a> is a drawing API for {{htmlelement("canvas")}}.</li>
+</ul>
+
+<h3 id="Browser_support_2">Browser support</h3>
+
+<p>As every web developer has experienced, <a href="http://ejohn.org/blog/the-dom-is-a-mess/">the DOM is a mess</a>. Browser support uniformity varies a lot from feature to feature, mainly because many important DOM features have very unclear, specifications (if any), and different web browsers add incompatible features for overlapping use cases (like the Internet Explorer event model). As of June 2011, the W3C and particularly the WHATWG are defining older features in detail to improve interoperability, and browsers in turn can improve their implementations based on these specifications.</p>
+
+<p>One common, though perhaps not the most reliable, approach to cross-browser compatibility is to use JavaScript libraries, which abstract DOM features and keep their APIs working the same in different browsers. Some of the most widely used frameworks are <a href="http://jquery.com/">jQuery</a>, <a href="http://www.prototypejs.org/">prototype</a>, and <a href="http://developer.yahoo.com/yui/">YUI</a>.</p>
diff --git a/files/uk/web/javascript/reference/classes/constructor/index.html b/files/uk/web/javascript/reference/classes/constructor/index.html
new file mode 100644
index 0000000000..488a9c1829
--- /dev/null
+++ b/files/uk/web/javascript/reference/classes/constructor/index.html
@@ -0,0 +1,119 @@
+---
+title: Конструктор
+slug: Web/JavaScript/Reference/Classes/constructor
+tags:
+  - Classes
+  - ECMAScript6
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Classes/constructor
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>Метод <code>constructor</code> — це особливий метод, призначений для створення й започаткування (ініціалізації) новоствореного примірника класу.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">constructor([аргументи]) { … }</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Клас може мати лише один метод з іменем «constructor». Спроба оголосити декілька методів «constructor» для одного класу матиме наслідком помилку {{jsxref("Global_Objects/SyntaxError", "SyntaxError")}}.</p>
+
+<p>Метод <code>constructor</code> може звернутися до однойменного методу батьківського класу (надкласу) через ключове слово <code>{{jsxref("Operators/super", "super")}}</code>.</p>
+
+<p>За відсутності оголошеного методу <code>constructor</code> буде використано типовий започаткувач (конструктор).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_методу_constructor">Використання методу <code>constructor</code></h3>
+
+<p>Цей шмат коду взято з <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">переглянути наживо</a>):</p>
+
+<pre class="brush: js">class Square extends Polygon {
+  constructor(length) {
+    // Наступний рядок здійснює виклик успадкованого від Polygon
+    // конструктора, передаючи до нього власні параметри.
+    super(length, length);
+
+    // Завважте, що в класах-нащадках виклик super() завжди має передувати
+    // найпершому звертанню до this. Інакше матимете помилку.
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.area = value;
+  }
+}</pre>
+
+<h3 id="Інший_приклад">Інший приклад</h3>
+
+<p>Погляньте також на цей приклад:</p>
+
+<pre class="brush: js">class Polygon {
+    constructor() {
+        this.name = "Polygon";
+    }
+}
+
+class Square extends Polygon {
+    constructor() {
+        super();
+    }
+}
+
+let newInstance = new Square();
+console.log(newInstance.name);  // виводить "Polygon"</pre>
+
+<h3 id="Типові_конструктори">Типові конструктори</h3>
+
+<p>Якщо метод <code>constructor</code> не оголошено, буде використано типовий конструктор. Для первинного класу (що не успадковує інших) то є метод з порожнім тілом:</p>
+
+<pre class="brush: js">constructor() {}
+</pre>
+
+<p>Натомість для вторинного класу (що успадковує якийсь інший клас) типовим конструктором є такий:</p>
+
+<pre class="brush: js">constructor(...args) {
+  super(...args);
+}</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Первинне визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.classes.constructor")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/super">super()</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/class">вираз <code>class</code></a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/class">оголошення <code>class</code></a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Classes">Класи</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/classes/extends/index.html b/files/uk/web/javascript/reference/classes/extends/index.html
new file mode 100644
index 0000000000..fb64cf21aa
--- /dev/null
+++ b/files/uk/web/javascript/reference/classes/extends/index.html
@@ -0,0 +1,112 @@
+---
+title: extends
+slug: Web/JavaScript/Reference/Classes/extends
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Класи
+translation_of: Web/JavaScript/Reference/Classes/extends
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>Ключове слово <strong><code>extends</code></strong> використовується у <a href="/uk/docs/Web/JavaScript/Reference/Statements/class">оголошеннях класів</a> або у <a href="/uk/docs/Web/JavaScript/Reference/Operators/class">виразах класів</a> для створення дочірнього класу від іншого класу.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/classes-extends.html", "taller")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">class ChildClass extends ParentClass { ... }</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Ключове слово <code>extends</code> може використовуватись для створення підкласів з користувацьких класів, як і з вбудованих об'єктів.</p>
+
+<p>Значенням <code>.prototype</code> батьківського класу має бути {{jsxref("Object")}} або {{jsxref("null")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_extends">Використання <code>extends</code></h3>
+
+<p>Перший приклад створює клас на ім'я <code>Square</code> (квадрат) з класу на ім'я <code>Polygon</code> (багатокутник). Даний приклад взятий з цього <a href="https://googlechrome.github.io/samples/classes-es6/index.html">зразка </a><a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(джерело)</a>.</p>
+
+<pre class="brush: js">class Square extends Polygon {
+  constructor(length) {
+    // Тут він викликає конструктор батьківського класу
+    // та надає значення ширини й довжини багатокутника
+    super(length, length);
+    // Заувага: У похідному класі super() має викликатися до
+    // використання 'this'. Інакше виникне помилка посилання.
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+}</pre>
+
+<h3 id="Використання_extends_із_вбудованими_обєктами">Використання <code>extends</code> із вбудованими об'єктами</h3>
+
+<p>Цей приклад розширює вбудований об'єкт {{jsxref("Date")}}. Даний приклад взяти з цього <a href="https://googlechrome.github.io/samples/classes-es6/index.html">зразка</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(джерело)</a>.</p>
+
+<pre class="brush: js">class myDate extends Date {
+  constructor() {
+    super();
+  }
+
+  getFormattedDate() {
+    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    return this.getDate() + '-' + months[this.getMonth()] + '-' + this.getFullYear();
+  }
+}</pre>
+
+<h3 id="Розширення_null">Розширення <code>null</code></h3>
+
+<p>Розширення {{jsxref("null")}} працює, як для звичайних класів, за винятком того, що прототип не успадковується від {{jsxref("Object.prototype")}}.</p>
+
+<pre class="brush: js">class nullExtends extends null {
+  constructor() {}
+}
+
+Object.getPrototypeOf(nullExtends); // Function.prototype
+Object.getPrototypeOf(nullExtends.prototype) // null
+
+new nullExtends(); //ReferenceError: this is not defined
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-class-definitions', 'extends')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.classes.extends")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Classes">Класи</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/super">super</a></li>
+ <li><a href="https://medium.com/beginners-guide-to-mobile-web-development/super-and-extends-in-javascript-es6-understanding-the-tough-parts-6120372d3420">Anurag Majumdar - Super &amp; Extends in JavaScript</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/classes/index.html b/files/uk/web/javascript/reference/classes/index.html
new file mode 100644
index 0000000000..ec1694bfd1
--- /dev/null
+++ b/files/uk/web/javascript/reference/classes/index.html
@@ -0,0 +1,418 @@
+---
+title: Класи
+slug: Web/JavaScript/Reference/Classes
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Класи
+  - конструктори
+  - наслідування
+translation_of: Web/JavaScript/Reference/Classes
+---
+<div>{{JsSidebar("Classes")}}</div>
+
+<p>Класи в JavaScript були додані в стандарті ECMAScript 6 і є насамперед синтаксичним цукром для існуючого прототипного наслідування у JavaScript. Синтаксис класів <em>не впроваджує</em> нову модель об'єктно-орієнтованого наслідування у JavaScript.</p>
+
+<h2 id="Визначення_класів">Визначення класів</h2>
+
+<p>Класи - це, по факту, "особливі <a href="/uk/docs/Web/JavaScript/Reference/Functions">функції</a>", і так само, як ви можете визначити <a href="/uk/docs/Web/JavaScript/Reference/Operators/function">функціональний вираз</a> та <a href="/uk/docs/Web/JavaScript/Reference/Statements/function">оголошення функції</a>, синтаксис класу складається з двох компонентів: <a href="/uk/docs/Web/JavaScript/Reference/Operators/class">виразу класу</a> and <a href="/uk/docs/Web/JavaScript/Reference/Statements/class">оголошення класу</a>.</p>
+
+<h3 id="Оголошення_класу">Оголошення класу</h3>
+
+<p>Одним зі способів визначення класу є <strong>оголошення класу</strong>. Для оголошення класу використовується ключове слово <code>class</code> з назвою класу (у прикладі нижче "Rectangle").</p>
+
+<pre class="brush: js">class Rectangle {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}</pre>
+
+<h4 id="Підняття">Підняття</h4>
+
+<p>Важлива відмінність між <strong>оголошеннями функції</strong> та <strong>класу</strong> полягає в тому, що оголошення функції {{Glossary("Hoisting", "піднімається")}}, а оголошення класу ні. Спочатку необхідно оголосити клас, і тільки потім звертатись до нього, інакше подібний код викине помилку {{jsxref("ReferenceError")}}:</p>
+
+<pre class="brush: js example-bad">const p = new Rectangle(); // ReferenceError
+
+class Rectangle {}
+</pre>
+
+<h3 id="Вираз_класу">Вираз класу</h3>
+
+<p><strong>Вираз класу</strong> - це інший спосіб визначення класу. Вираз класу може бути іменованим або неіменованим. Ім'я, надане іменованому виразу класу, є локальним для тіла класу. (Хоча його можна отримати через властивість класу (не екземпляра) {{jsxref("Function.name", "name")}}).</p>
+
+<pre class="brush: js">// не іменований
+let Rectangle = class {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+console.log(Rectangle.name);
+// виведе "Rectangle"
+
+// іменований
+let Rectangle = class Rectangle2 {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+console.log(Rectangle.name);
+// виведе "Rectangle2"
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Заувага:</strong> <strong>Вирази</strong> класів підпадають під такі самі обмеження підняття, які описані у розділі {{anch("Оголошення класу")}}.</p>
+</div>
+
+<h2 id="Тіло_класу_та_визначення_методів">Тіло класу та визначення методів</h2>
+
+<p>Тіло класу - це та частина, що знаходиться у фігурних дужках <code>{}</code>. Тут ви визначаєте складові класу, такі як методи або конструктор.</p>
+
+<h3 id="Строгий_режим">Строгий режим</h3>
+
+<p>Код у тілі класу виконується у <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">строгому режимі</a>, тобто, код, записаний тут, є предметом більш строгого синтаксису заради підвищення продуктивності. Деякі помилки, які пройшли б непоміченими, будуть викидатися, а певні ключові слова є зарезервованими для майбутніх версій ECMAScript.</p>
+
+<h3 id="Конструктор">Конструктор</h3>
+
+<p>Метод <code><a href="/uk/docs/Web/JavaScript/Reference/Classes/constructor">constructor</a></code> - це спеціальний метод для створення та ініціалізації об'єктів, створених ключовим словом <code>class</code>. У класі може бути лише один спеціальний метод з ім'ям "constructor". Якщо клас містить більше одного метода <code>constructor</code>, виникне помилка {{jsxref("SyntaxError")}}.</p>
+
+<p>Конструктор може звертатися до конструктора батьківського класу за допомогою ключового слова <code>super</code>.</p>
+
+<h3 id="Методи_прототипу">Методи прототипу</h3>
+
+<p>Дивіться також <a href="/uk/docs/Web/JavaScript/Reference/Functions/Method_definitions">визначення методів</a>. </p>
+
+<pre class="brush: js">class Rectangle {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+  // гетер
+  get area() {
+    return this.calcArea();
+  }
+  // метод
+  calcArea() {
+    return this.height * this.width;
+  }
+}
+
+const square = new Rectangle(10, 10);
+
+console.log(square.area); // 100</pre>
+
+<h3 id="Статичні_методи">Статичні методи</h3>
+
+<p>Ключове слово <code><a href="/uk/docs/Web/JavaScript/Reference/Classes/static">static</a></code> визначає статичний метод класу. Статичні методи класу викликаються без <a href="/uk/docs/Learn/JavaScript/Objects/Object-oriented_JS#Створення_реальних_об'єктів" title='Прикладом екземпляра класу є "var john = new Person();"'>створення екземпляра </a>свого класу і <strong>не можуть</strong> бути викликані через екземпляр класу. Статичні методи часто використовують для створеня функцій-утиліт для застосунків.</p>
+
+<pre class="brush: js">class Point {
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+
+    static distance(a, b) {
+        const dx = a.x - b.x;
+        const dy = a.y - b.y;
+
+        return Math.hypot(dx, dy);
+    }
+}
+
+const p1 = new Point(5, 5);
+const p2 = new Point(10, 10);
+p1.distance; //undefined
+p2.distance; //undefined
+
+console.log(Point.distance(p1, p2)); // 7.0710678118654755</pre>
+
+<h3 id="Пакування_через_прототипні_та_статичні_методи">Пакування через прототипні та статичні методи</h3>
+
+<p>Коли статичний або прототипний метод викликається без значення для <em>this</em>, значенням <em>this</em> всередині метода буде <code>undefined</code>. Ця поведінка буде такою самою навіть якщо директива <code>"use strict"</code> не задана, тому що код в межах тіла класу завжди виконується у строгому режимі.</p>
+
+<pre class="brush: js">class Animal {
+  speak() {
+    return this;
+  }
+  static eat() {
+    return this;
+  }
+}
+
+let obj = new Animal();
+obj.speak(); // Animal {}
+let speak = obj.speak;
+speak(); // undefined
+
+Animal.eat() // class Animal
+let eat = Animal.eat;
+eat(); // undefined</pre>
+
+<p>Якщо наведений приклад написаний з використанням традиційного синтаксису функцій, то автоматичне пакування при викликах методів відбуватиметься у нестрогому режимі, на основі початкового значення <em>this</em>. Якщо початковим значенням є <code>undefined</code>, <em>this</em> буде присвоєний глобальний об'єкт.</p>
+
+<p>Автопакування не відбудеться у строгому режимі, значення <em>this</em> залишиться незмінним.</p>
+
+<pre class="brush: js">function Animal() { }
+
+Animal.prototype.speak = function() {
+  return this;
+}
+
+Animal.eat = function() {
+  return this;
+}
+
+let obj = new Animal();
+let speak = obj.speak;
+speak(); // global object
+
+let eat = Animal.eat;
+eat(); // global object</pre>
+
+<h3 id="Властивості_екземпляра">Властивості екземпляра</h3>
+
+<p>Властивості екземпляра повинні визначатися всередині методів класу:</p>
+
+<pre class="brush: js">class Rectangle {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}</pre>
+
+<p>Статичні (на боці класу) властивості-значення та прототипні властивості-значення повинні визначатися за межами оголошення класу:</p>
+
+<pre class="brush: js">Rectangle.staticWidth = 20;
+Rectangle.prototype.prototypeWidth = 25;</pre>
+
+<h3 id="Оголошення_полів_класу">Оголошення полів класу</h3>
+
+<div class="blockIndicator warning">
+<p>Оголошення публічних та приватних полів є <a href="https://github.com/tc39/proposal-class-fields">експериментальною функціональністю (stage 3)</a>, запропонованою на <a href="https://tc39.github.io/beta/">TC39</a>, комітеті стандартів JavaScript. Підтримка у переглядачах є обмеженою, але функціональність можна використовувати через збирачі пакетів з системами на кшталт <a href="https://babeljs.io/">Babel</a>.</p>
+</div>
+
+<h4 id="Оголошення_публічних_полів">Оголошення публічних полів</h4>
+
+<p>З синтаксисом оголошення полів JavaScript наведений вище приклад можна записати наступним чином:</p>
+
+<pre class="brush: js">class Rectangle {
+  height = 0;
+  width;
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}</pre>
+
+<p>З оголошенням полів заздалегідь оголошення класу стає більш самозадокументованим, а поля завжди присутні.</p>
+
+<p>Як бачимо, оголошені поля можуть мати або не мати значення за замовчуванням.</p>
+
+<h4 id="Оголошення_приватних_полів">Оголошення приватних полів</h4>
+
+<p>З використанням приватних полів визначення можна вдосконалити наступним чином.</p>
+
+<pre class="brush: js">class Rectangle {
+  #height = 0;
+  #width;
+  constructor(height, width) {
+    this.#height = height;
+    this.#width = width;
+  }
+}</pre>
+
+<p>Буде помилкою посилатися на приватні поля поза межами класу; вони доступні для читання або запису тільки всередині тіла класу. Визначаючи щось, невидиме за межами класу, ви забезпечуєте умови, за яких користувачі ваших класів не зможуть покладатися на внутрішні властивості, які можуть змінюватись між версіями.</p>
+
+<p>Приватні поля можуть оголошуватися лише одразу при оголошенні полів.</p>
+
+<p>Приватні поля не можуть створюватись пізніше через присвоювання, як це роблять нормальні властивості.</p>
+
+<p>Щоб дізнатись більше, дивіться також <a href="/uk/docs/Web/JavaScript/Reference/Classes/Class_fields">поля класу</a>.</p>
+
+<h2 id="Створення_підкласу_за_допомогою_extends">Створення підкласу за допомогою <code>extends</code></h2>
+
+<p>Ключове слово <code><a href="/uk/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> використовують у <em>оголошенні класу</em> або у <em>виразі класу</em>, щоб створити клас, як дочірній від іншого класу.</p>
+
+<pre class="brush: js">class Animal {
+  constructor(name) {
+    this.name = name;
+  }
+
+  speak() {
+    console.log(`${this.name} видає звуки.`);
+  }
+}
+
+class Dog extends Animal {
+  constructor(name) {
+    super(name); // викликати конструктор суперкласу та передати параметром ім'я
+  }
+
+  speak() {
+    console.log(`${this.name} гавкає.`);
+  }
+}
+
+let d = new Dog('Мінні');
+d.speak(); // Мінні гавкає.</pre>
+
+<p>Якщо у підкласі присутній конструктор, він має спочатку викликати super(), перед використанням "this".</p>
+
+<p>Можна також розширювати через <code>extend</code> традиційні "класи" на основі функцій:</p>
+
+<pre class="brush: js">function Animal (name) {
+  this.name = name;
+}
+
+Animal.prototype.speak = function () {
+  console.log(`${this.name} видає звуки.`);
+}
+
+class Dog extends Animal {
+  speak() {
+    console.log(`${this.name} гавкає.`);
+  }
+}
+
+let d = new Dog('Мінні');
+d.speak(); // Мінні гавкає.
+
+//Заувага: Для однойменних методів, дочірній метод переважає над батьківським</pre>
+
+<p>Зауважте, що класи не можуть розширювати звичайні об'єкти (не конструктори). Якщо бажаєте успадкуватись від звичайного об'єкта, можете натомість використати {{jsxref("Object.setPrototypeOf()")}}:</p>
+
+<pre class="brush: js">const Animal = {
+  speak() {
+    console.log(`${this.name} видає звуки.`);
+  }
+};
+
+class Dog {
+  constructor(name) {
+    this.name = name;
+  }
+}
+
+// Якщо ви цього не зробите, то отримаєте помилку, викликавши speak
+Object.setPrototypeOf(Dog.prototype, Animal);
+
+let d = new Dog('Мінні');
+d.speak(); // Мінні видає звуки.</pre>
+
+<h2 id="Species">Species</h2>
+
+<p>Можливо, ви захочете повернути об'єкти {{jsxref("Array")}} у своєму похідному класі масиву <code>MyArray</code>. Шаблон species дозволяє перевизначати початкові конструктори.</p>
+
+<p>Наприклад, використовуючи такі методи, як {{jsxref("Array.map", "map()")}}, що повертає конструктор за замовчуванням, ви хочете, щоб ці методи повертали батьківський об'єкт <code>Array</code> замість об'єкту <code>MyArray</code>. Символ {{jsxref("Symbol.species")}} дозволяє це зробити:</p>
+
+<pre class="brush: js">class MyArray extends Array {
+  // Заміщення Symbol.species батьківським конструктором Array
+  static get [Symbol.species]() { return Array; }
+}
+var a = new MyArray(1,2,3);
+var mapped = a.map(x =&gt; x * x);
+
+console.log(mapped instanceof MyArray); // false
+console.log(mapped instanceof Array);   // true
+</pre>
+
+<h2 id="Виклик_методів_суперкласу_за_допомогою_super">Виклик методів суперкласу за допомогою <code>super</code></h2>
+
+<p>Ключове слово <code><a href="/uk/docs/Web/JavaScript/Reference/Operators/super">super</a></code> використовують для виклику відповідних методів суперкласу. Це одна з переваг над прототипним наслідуванням.</p>
+
+<pre class="brush: js">class Cat {
+  constructor(name) {
+    this.name = name;
+  }
+
+  speak() {
+    console.log(this.name + ' видає звуки.');
+  }
+}
+
+class Lion extends Cat {
+  speak() {
+    super.speak();
+    console.log(this.name + ' ричить.');
+  }
+}
+</pre>
+
+<h2 id="Домішки">Домішки</h2>
+
+<p>Абстрактні підкласи, або <em>домішки</em>, це шаблони для створення класів. В ECMAScript підклас може мати лише один суперклас, тому множинне наслідування, наприклад, кількох класів інструментів, неможливе. Функціональність має бути надана суперкласом. </p>
+
+<p>У ECMAScript для реалізації домішок може використовуватись функція з суперкласом в якості параметра та підкласом, що розширює цей суперклас, в якості значення, що повертається:</p>
+
+<pre class="brush: js">let calculatorMixin = Base =&gt; class extends Base {
+  calc() { }
+};
+
+let randomizerMixin = Base =&gt; class extends Base {
+  randomize() { }
+};
+</pre>
+
+<p>Клас, що використовує ці домішки, може бути записаний так:</p>
+
+<pre class="brush: js">class Foo { }
+class Bar extends calculatorMixin(randomizerMixin(Foo)) { }</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2017')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.classes")}}</p>
+
+<h2 id="Запуск_у_Чернетці">Запуск у Чернетці</h2>
+
+<p>Клас не можна перевизначати. Якщо ви працюєте з кодом у Чернетці (меню Firefox Інструменти &gt; Веб-розробка &gt; Чернетка), і 'Запускаєте' визначення класу з тим самим ім'ям двічі, ви отримаєте дивну помилку SyntaxError: redeclaration of let &lt;ім'я-класу&gt;.</p>
+
+<p>Щоб перезапустити визначення, використовуйте меню Чернетки Виконати &gt; Перезавантажити і запустити.<br>
+ Будь ласка, голосуйте за помилку <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1428672">#1428672</a>.</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Functions">Функції</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/class">Оголошення класу</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/class">Вираз класу</a></li>
+ <li>{{jsxref("Operators/super", "super")}}</li>
+ <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-classes/">Блог-стаття: "ES6 In Depth: Classes"</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/classes/static/index.html b/files/uk/web/javascript/reference/classes/static/index.html
new file mode 100644
index 0000000000..3f676d3d6e
--- /dev/null
+++ b/files/uk/web/javascript/reference/classes/static/index.html
@@ -0,0 +1,137 @@
+---
+title: static
+slug: Web/JavaScript/Reference/Classes/static
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Static
+  - Класи
+  - Статичний
+translation_of: Web/JavaScript/Reference/Classes/static
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>Ключове слово <code><strong>static</strong></code> визначає статичний метод класу. Статичні методи не викликаються на екземплярах класу. Вони натомість викликаються на самому класі. Часто це допоміжні функції, такі як функції для створення чи клонування об'єктів.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/classes-static.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">static <em>methodName</em>() { ... }</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Виклики статичного методу виконуються безпосередньо через клас, і неможливі на екземплярах класу. Статичні методи часто застосовуються для створення різноманітних допоміжних функцій.</p>
+
+<h2 id="Виклик_статичних_методів">Виклик статичних методів</h2>
+
+<h3 id="З_іншого_статичного_методу">З іншого статичного методу</h3>
+
+<p>Щоб звернутися до статичного методу зсередини іншого статичного методу в межах одного класу, можна використати ключове слово <code><a href="/uk/docs/Web/JavaScript/Reference/Operators/this">this</a></code>.</p>
+
+<pre class="brush: js">class StaticMethodCall {
+  static staticMethod() {
+    return 'Викликано статичний метод';
+  }
+  static anotherStaticMethod() {
+    return this.staticMethod() + ' зсередини іншого статичного методу';
+  }
+}
+StaticMethodCall.staticMethod();
+// 'Викликано статичний метод'
+
+StaticMethodCall.anotherStaticMethod();
+// 'Викликано статичний метод зсередини іншого статичного методу'</pre>
+
+<h3 id="Зсередини_конструктора_класу_чи_інших_звичайних_методів">Зсередини конструктора класу, чи інших звичайних методів</h3>
+
+<p>Статичні методи недоступні напряму за ключовим словом <code><a href="/uk/docs/Web/JavaScript/Reference/Operators/this">this</a></code> зсередини нестатичних методів. Слід викликати їх, використовуючи ім'я класу: <code>CLASSNAME.STATIC_METHOD_NAME()</code>; або ж звертаючись до методу як до властивості конструктора: <code>this.constructor.STATIC_METHOD_NAME()</code>.</p>
+
+<pre class="brush: js">class StaticMethodCall {
+  constructor() {
+    console.log(StaticMethodCall.staticMethod());
+    // 'Викликано статичний метод.'
+
+    console.log(this.constructor.staticMethod());
+    // 'Викликано статичний метод.'
+  }
+
+  static staticMethod() {
+    return 'Викликано статичний метод.';
+  }
+}</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Наступний приклад демонструє декілька аспектів:</p>
+
+<ol>
+ <li>Яким чином статичний метод реалізується у класі.</li>
+ <li>Що цей клас із статичним членом може наслідуватись підкласом.</li>
+ <li>Як статичний метод викликати можна, а як — ні.</li>
+</ol>
+
+<pre class="brush: js">class Triple {
+  static triple(n) {
+    if (n === undefined) {
+      n = 1;
+    }
+    return n * 3;
+  }
+}
+
+class BiggerTriple extends Triple {
+  static triple(n) {
+    return super.triple(n) * super.triple(n);
+  }
+}
+
+console.log(Triple.triple());        // 3
+console.log(Triple.triple(6));       // 18
+
+var tp = new Triple();
+
+console.log(BiggerTriple.triple(3));
+// 81 (Створення екземпляру предка ніяк не вплинуло на метод нащадка)
+
+console.log(tp.triple());
+// 'tp.triple is not a function'.
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Примітка</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Первинне визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</div>
+
+<p>{{Compat("javascript.classes.static")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/class">Вираз класу</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/class">Оголошення класу</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Classes">Класи</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/deprecated_and_obsolete_features/index.html b/files/uk/web/javascript/reference/deprecated_and_obsolete_features/index.html
new file mode 100644
index 0000000000..bb1159f6d0
--- /dev/null
+++ b/files/uk/web/javascript/reference/deprecated_and_obsolete_features/index.html
@@ -0,0 +1,293 @@
+---
+title: Deprecated and obsolete features
+slug: Web/JavaScript/Reference/Deprecated_and_obsolete_features
+tags:
+  - Deprecated
+  - JavaScript
+  - NeedsTranslation
+  - Obsolete
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Deprecated_and_obsolete_features
+---
+<p>{{JsSidebar("More")}}</p>
+
+<p>This page lists features of JavaScript that are deprecated (that is, still available but planned for removal) and obsolete (that is, no longer usable).</p>
+
+<h2 id="Deprecated_features">Deprecated features</h2>
+
+<p>These deprecated features can still be used, but should be used with caution because they are expected to be removed entirely sometime in the future. You should work to remove their use from your code.</p>
+
+<h3 id="RegExp_properties">RegExp properties</h3>
+
+<p>the following properties are deprecated. This does not affect their use in {{jsxref("String.replace", "replacement strings", "", 1)}}:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Property</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.n", "$1-$9")}}</td>
+   <td>
+    <p>Parenthesized substring matches, if any.<br>
+     <strong>Warning:</strong> Using these properties can result in problems, since browser extensions can modify them. Avoid them!</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.input", "$_")}}</td>
+   <td>See <code>input</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.multiline", "$*")}}</td>
+   <td>See <code>multiline</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.lastMatch", "$&amp;")}}</td>
+   <td>See <code>lastMatch</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.lastParen", "$+")}}</td>
+   <td>See <code>lastParen</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.leftContext", "$`")}}</td>
+   <td>See <code>leftContext</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.rightContext", "$'")}}</td>
+   <td>See <code>rightContext</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.input", "input")}}</td>
+   <td>The string against which a regular expression is matched.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.lastMatch", "lastMatch")}}</td>
+   <td>The last matched characters.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.lastParen", "lastParen")}}</td>
+   <td>The last parenthesized substring match, if any.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.leftContext", "leftContext")}}</td>
+   <td>The substring preceding the most recent match.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.rightContext", "rightContext")}}</td>
+   <td>The substring following the most recent match.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The following are now properties of <code>RegExp</code> instances, no longer of the <code>RegExp</code> object:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Property</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.global", "global")}}</td>
+   <td>Whether or not to test the regular expression against all possible matches in a string, or only against the first.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.ignoreCase", "ignoreCase")}}</td>
+   <td>Whether or not to ignore case while attempting a match in a string.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.lastIndex", "lastIndex")}}</td>
+   <td>The index at which to start the next match.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.multiline", "multiline")}}</td>
+   <td>Whether or not to search in strings across multiple lines.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.source", "source")}}</td>
+   <td>The text of the pattern.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RegExp_methods">RegExp methods</h3>
+
+<ul>
+ <li>The {{jsxref("RegExp.compile", "compile()")}} method is deprecated.</li>
+ <li>The <code>valueOf</code> method is no longer specialized for <code>RegExp</code>. Use {{jsxref("Object.valueOf()")}}.</li>
+</ul>
+
+<h3 id="Function_properties">Function properties</h3>
+
+<ul>
+ <li>The {{jsxref("Global_Objects/Function/caller", "caller")}} and {{jsxref("Global_Objects/Function/arguments", "arguments")}} properties are deprecated, because they leak the function caller. Instead of the arguments property, you should use the {{jsxref("Functions/arguments", "arguments")}} object inside function closures.</li>
+</ul>
+
+<h3 id="Legacy_generator">Legacy generator</h3>
+
+<ul>
+ <li>{{jsxref("Statements/Legacy_generator_function", "Legacy generator function statement")}} and {{jsxref("Operators/Legacy_generator_function", "Legacy generator function expression")}} are deprecated. Use {{jsxref("Statements/function*", "function* statement")}} and {{jsxref("Operators/function*", "function* expression")}} instead.</li>
+ <li>{{jsxref("Operators/Array_comprehensions", "JS1.7/JS1.8 Array comprehension", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} and {{jsxref("Operators/Generator_comprehensions", "JS1.7/JS1.8 Generator comprehension", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} are deprecated.</li>
+</ul>
+
+<h3 id="Iterator">Iterator</h3>
+
+<ul>
+ <li>{{jsxref("Global_Objects/StopIteration", "StopIteration")}} is deprecated.</li>
+ <li>{{jsxref("Global_Objects/Iterator", "Iterator")}} is deprecated.</li>
+</ul>
+
+<h3 id="Object_methods">Object methods</h3>
+
+<ul>
+ <li>{{jsxref("Object.watch", "watch")}} and {{jsxref("Object.unwatch", "unwatch")}} are deprecated. Use {{jsxref("Proxy")}} instead.</li>
+ <li><code>__iterator__</code> is deprecated.</li>
+ <li>{{jsxref("Object.noSuchMethod", "__noSuchMethod__")}} is deprecated. Use {{jsxref("Proxy")}} instead.</li>
+</ul>
+
+<h3 id="Date_methods">Date methods</h3>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Date/getYear", "getYear")}} and {{jsxref("Global_Objects/Date/setYear", "setYear")}} are affected by the Year-2000-Problem and have been subsumed by {{jsxref("Global_Objects/Date/getFullYear", "getFullYear")}} and {{jsxref("Global_Objects/Date/setFullYear", "setFullYear")}}.</li>
+ <li>You should use {{jsxref("Global_Objects/Date/toISOString", "toISOString")}} instead of the deprecated {{jsxref("Global_Objects/Date/toGMTString", "toGMTString")}} method in new code.</li>
+ <li>{{jsxref("Global_Objects/Date/toLocaleFormat", "toLocaleFormat")}} is deprecated.</li>
+</ul>
+
+<h3 id="Functions">Functions</h3>
+
+<ul>
+ <li>{{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}} are deprecated. Use regular {{jsxref("Operators/function", "functions")}} or {{jsxref("Functions/Arrow_functions", "arrow functions", "", 1)}} instead.</li>
+</ul>
+
+<h3 id="Proxy">Proxy</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Archive/Web/Old_Proxy_API">Proxy.create</a> and <a href="/en-US/docs/Archive/Web/Old_Proxy_API">Proxy.createFunction</a> are deprecated. Use {{jsxref("Proxy")}} instead.</li>
+ <li>The following traps are obsolete:
+  <ul>
+   <li><code>hasOwn</code> ({{bug(980565)}}, Firefox 33).</li>
+   <li><code>getEnumerablePropertyKeys</code> ({{bug(783829)}}, Firefox 37)</li>
+   <li><code>getOwnPropertyNames</code> ({{bug(1007334)}}, Firefox 33)</li>
+   <li><code>keys</code> ({{bug(1007334)}}, Firefox 33)</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Escape_sequences">Escape sequences</h3>
+
+<ul>
+ <li>Octal escape sequences (\ followed by one, two, or three octal digits) are deprecated in string and regular expression literals.</li>
+ <li>The {{jsxref("Global_Objects/escape", "escape")}} and {{jsxref("Global_Objects/unescape", "unescape")}} functions are deprecated. Use {{jsxref("Global_Objects/encodeURI", "encodeURI")}}, {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}}, {{jsxref("Global_Objects/decodeURI", "decodeURI")}} or {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} to encode and decode escape sequences for special characters.</li>
+</ul>
+
+<h3 id="String_methods">String methods</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/tag/HTML%20wrapper%20methods">HTML wrapper methods</a> like {{jsxref("String.prototype.fontsize")}} and {{jsxref("String.prototype.big")}}.</li>
+ <li>{{jsxref("String.prototype.quote")}} is removed from Firefox 37.</li>
+ <li>non standard <code>flags</code> parameter in {{jsxref("String.prototype.search")}}, {{jsxref("String.prototype.match")}}, and {{jsxref("String.prototype.replace")}} are deprecated.</li>
+ <li>{{jsxref("String.prototype.substr")}} probably won't be removed anytime soon, but it's defined in <a href="https://www.ecma-international.org/ecma-262/9.0/index.html#sec-string.prototype.substr" rel="noopener">Annex B</a> of the ECMA-262 standard, whose <a href="https://www.ecma-international.org/ecma-262/9.0/index.html#sec-additional-ecmascript-features-for-web-browsers">introduction</a> states: "… Programmers should not use or assume the existence of these features and behaviours when writing new ECMAScript code. …"</li>
+</ul>
+
+<h2 id="Obsolete_features">Obsolete features</h2>
+
+<p>These obsolete features have been entirely removed from JavaScript and can no longer be used as of the indicated version of JavaScript.</p>
+
+<h3 id="Object">Object</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Property</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Object/count", "__count__")}}</td>
+   <td>Returns the number of enumerable properties directly on a user-defined object.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Object/Parent", "__parent__")}}</td>
+   <td>Points to an object's context.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Object/eval", "Object.prototype.eval()")}}</td>
+   <td>Evaluates a string of JavaScript code in the context of the specified object.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.observe()")}}</td>
+   <td>Asynchronously observing the changes to an object.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.unobserve()")}}</td>
+   <td>Remove observers.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.getNotifier()")}}</td>
+   <td>Creates an object that allows to synthetically trigger a change.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Function">Function</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Property</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Function/arity", "arity")}}</td>
+   <td>Number of formal arguments.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Array">Array</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Property</td>
+   <td>Description</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Array.observe()")}}</td>
+   <td>Asynchronously observing changes to Arrays.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Array.unobserve()")}}</td>
+   <td>Remove observers.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Number">Number</h3>
+
+<ul>
+ <li>{{jsxref("Number.toInteger()")}}</li>
+</ul>
+
+<h3 id="ParallelArray">ParallelArray</h3>
+
+<ul>
+ <li>{{jsxref("ParallelArray")}}</li>
+</ul>
+
+<h3 id="Statements">Statements</h3>
+
+<ul>
+ <li>{{jsxref("Statements/for_each...in", "for each...in")}} is deprecated. Use {{jsxref("Statements/for...of", "for...of")}} instead.</li>
+ <li>Destructuring {{jsxref("Statements/for...in", "for...in")}} is deprecated. Use {{jsxref("Statements/for...of", "for...of")}} instead.</li>
+ <li>let blocks and let expressions are obsolete.</li>
+</ul>
+
+<h3 id="E4X">E4X</h3>
+
+<p>See <a href="/en-US/docs/Archive/Web/E4X">E4X</a> for more information.</p>
+
+<h3 id="Sharp_variables">Sharp variables</h3>
+
+<p>See <a href="/en-US/docs/Archive/Web/Sharp_variables_in_JavaScript">Sharp variables in JavaScript</a> for more information.</p>
diff --git a/files/uk/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html b/files/uk/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html
new file mode 100644
index 0000000000..3dce39dba0
--- /dev/null
+++ b/files/uk/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html
@@ -0,0 +1,76 @@
+---
+title: Протокол застарілого ітератора
+slug: >-
+  Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - застарілий ітератор
+translation_of: >-
+  Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol
+---
+<div>{{jsSidebar("More")}}</div>
+
+<div class="warning"><strong>Нестандартний.</strong> Протокол застарілого ітератора був особливою функціональністю SpiderMonkey, яка була прибрана у Firefox 58+. Для використання у майбутньому розгляньте цикли <a href="/uk/docs/Web/JavaScript/Reference/Statements/for...of">for..of</a> та <a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору">протокол ітератора</a>.</div>
+
+<h2 id="Протокол_застарілого_ітератора_лише_для_Firefox">Протокол застарілого ітератора лише для Firefox</h2>
+
+<p>Firefox, до версії 26, реалізовував інший протокол ітератора, схожий на стандартний <a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору">Протокол ітератора ES2015</a>.</p>
+
+<p>Об'єкт є застарілим ітератором, коли реалізує метод <code>next()</code> з наступною семантикою, та викидає {{jsxref("Global_Objects/StopIteration", "StopIteration")}} в кінці перебору.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Властивість</th>
+   <th scope="col">Значення</th>
+  </tr>
+  <tr>
+   <td><code>next</code></td>
+   <td>Функція з нулем аргументів, яка повертає значення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Різниця_між_протоколами_ітератора_ES2015_та_застарілого_ітератора">Різниця між протоколами ітератора ES2015 та застарілого ітератора</h3>
+
+<ul>
+ <li>Значення поверталось безпосередньо як повернене значення викликів <code>next</code>, а не як властивість <code>value</code> поверненого об'єкта</li>
+ <li>Переривання перебору виражалось викиданням об'єкта {{jsxref("Global_Objects/StopIteration", "StopIteration")}}.</li>
+</ul>
+
+<h3 id="Простий_приклад_зі_старим_протоколом">Простий приклад зі старим протоколом</h3>
+
+<pre class="brush: js">function makeIterator(array){
+    var nextIndex = 0;
+
+    return {
+       next: function(){
+           if(nextIndex &lt; array.length){
+               return array[nextIndex++];
+           else
+               throw new StopIteration();
+       }
+    }
+}
+
+var it = makeIterator(['yo', 'ya']);
+
+console.log(it.next()); // 'yo'
+console.log(it.next()); // 'ya'
+try{
+    console.log(it.next());
+}
+catch(e){
+    if(e instanceof StopIteration){
+         // перебір завершено
+    }
+}
+</pre>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators">Ітератори та генератори</a></li>
+ <li>Більше <a href="/uk/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">застарілої та некомендованої функціональності</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/errors/cant_delete/index.html b/files/uk/web/javascript/reference/errors/cant_delete/index.html
new file mode 100644
index 0000000000..91369f763c
--- /dev/null
+++ b/files/uk/web/javascript/reference/errors/cant_delete/index.html
@@ -0,0 +1,59 @@
+---
+title: 'TypeError: property "x" is non-configurable and can''t be deleted'
+slug: Web/JavaScript/Reference/Errors/Cant_delete
+tags:
+  - JavaScript
+  - TypeError
+  - Строгий режим
+  - помилка
+translation_of: Web/JavaScript/Reference/Errors/Cant_delete
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Повідомлення">Повідомлення</h2>
+
+<pre class="syntaxbox">TypeError: Calling delete on 'x' is not allowed in strict mode (Edge)
+TypeError: property "x" is non-configurable and can't be deleted. (Firefox)
+TypeError: Cannot delete property 'x' of #&lt;Object&gt; (Chrome)
+</pre>
+
+<h2 id="Тип_помилки">Тип помилки</h2>
+
+<p>{{jsxref("TypeError")}} тільки у строгому режимі.</p>
+
+<h2 id="Що_сталось">Що сталось?</h2>
+
+<p>Була спроба видалити властивість, але ця властивість <a href="/uk/docs/Web/JavaScript/Data_structures#Properties">недоступна для налаштування</a>. Атрибут <code>configurable</code> котролює, чи властивість об'єкта може бути видалена, та чи можна змінювати її атрибути (інші, крім <code>writable</code>).</p>
+
+<p>Ця помилка виникає лише у <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">строгому режимі</a>. У нестрогому режимі оператор повертає <code>false</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Властивості, недоступні для налаштування, не є дуже поширеними, але їх можна створити за допомогою {{jsxref("Object.defineProperty()")}} або {{jsxref("Object.freeze()")}}.</p>
+
+<pre class="brush: js example-bad">'use strict';
+var obj = Object.freeze({name: 'Elsa', score: 157});
+delete obj.score;  // TypeError
+
+'use strict';
+var obj = {};
+Object.defineProperty(obj, 'foo', {value: 2, configurable: false});
+delete obj.foo;  // TypeError
+
+'use strict';
+var frozenArray = Object.freeze([0, 1, 2]);
+frozenArray.pop();  // TypeError
+</pre>
+
+<p>Існують також кілька недоступних для налаштування властивостей, вбудованих у JavaScript. Можливо, ви намагались видалити математичну константу.</p>
+
+<pre class="brush: js example-bad">'use strict';
+delete Math.PI;  // TypeError</pre>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/delete">Оператор delete</a></li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/errors/deprecated_tolocaleformat/index.html b/files/uk/web/javascript/reference/errors/deprecated_tolocaleformat/index.html
new file mode 100644
index 0000000000..226aba7150
--- /dev/null
+++ b/files/uk/web/javascript/reference/errors/deprecated_tolocaleformat/index.html
@@ -0,0 +1,93 @@
+---
+title: 'Warning: Date.prototype.toLocaleFormat is deprecated'
+slug: Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat
+tags:
+  - Error
+  - JavaScript
+  - застереження
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<p>Застереження JavaScript "Date.prototype.toLocaleFormat is deprecated; consider using Intl.DateTimeFormat instead" виникає, коли використовується нестандартний метод {{jsxref("Date.prototype.toLocaleFormat")}}.</p>
+
+<h2 id="Повідомлення">Повідомлення</h2>
+
+<pre class="syntaxbox notranslate">Warning: Date.prototype.toLocaleFormat is deprecated; consider using Intl.DateTimeFormat instead
+</pre>
+
+<h2 id="Тип_помилки">Тип помилки</h2>
+
+<p>Застереження. Виконання JavaScript не буде зупинене.</p>
+
+<h2 id="Що_сталось">Що сталось?</h2>
+
+<p>Нестандартний метод {{jsxref("Date.prototype.toLocaleFormat")}} застарів та більше не рекомендований до використання. Він використовує рядок форматування в такому ж форматі, який очікується функцією <code>strftime()</code> у C. <strong>Функція більше недоступна у Firefox 58+</strong>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застарілий_синтаксис">Застарілий синтаксис</h3>
+
+<p>Метод {{jsxref("Date.prototype.toLocaleFormat")}} застарів та буде прибраний (без кросбраузерної підтримки, доступний лише у Firefox).</p>
+
+<pre class="brush: js example-bad notranslate">var today = new Date();
+var date = today.toLocaleFormat('%A, %e. %B %Y');
+
+console.log(date);
+// У німецькій локалі
+// "Freitag, 10. März 2017"</pre>
+
+<h3 id="Альтернативний_стандартний_синтаксис_за_допомогою_ECMAScript_Intl_API">Альтернативний стандартний синтаксис за допомогою ECMAScript Intl API</h3>
+
+<p>Стандарт ECMA-402 (ECMAScript Intl API) визначає стандартні об'єкти та методи, які вможливлюють чутливе до мови форматування дати та часу (доступні у Chrome 24+, Firefox 29+, IE11+, Safari10+).</p>
+
+<p>Ви тепер можете або використати метод {{jsxref("Date.prototype.toLocaleDateString")}}, якщо ви бажаєте просто відформатувати одну дату.</p>
+
+<pre class="brush: js example-good notranslate">var today = new Date();
+var options = { weekday: 'long', year: 'numeric',
+                month: 'long', day: 'numeric' };
+var date = today.toLocaleDateString('de-DE', options);
+
+console.log(date);
+// "Freitag, 10. März 2017"
+</pre>
+
+<p>Або ви можете скористатись об'єктом {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}, який дозволяє кешувати об'єкт, в якому більшість обчислень вже зроблені, тому форматування відбувається швидко. Це корисно, якщо у вас є цикл дат для форматування.</p>
+
+<pre class="brush: js example-good notranslate">var options = { weekday: 'long', year: 'numeric',
+                month: 'long', day: 'numeric' };
+var dateFormatter = new Intl.DateTimeFormat('de-DE', options)
+
+var dates = [Date.UTC(2012, 11, 20, 3, 0, 0),
+             Date.UTC(2014, 04, 12, 8, 0, 0)];
+
+dates.forEach(date =&gt; console.log(dateFormatter.format(date)));
+
+// "Donnerstag, 20. Dezember 2012"
+// "Montag, 12. Mai 2014"
+</pre>
+
+<h3 id="Альтернативний_стандартний_синтаксис_з_використанням_методів_Date">Альтернативний стандартний синтаксис з використанням методів Date</h3>
+
+<p>Об'єкт {{jsxref("Date")}} пропонує декілька методів для створення налаштованого рядка дати.</p>
+
+<pre class="brush: js example-bad notranslate">(new Date()).toLocaleFormat("%Y%m%d");
+// "20170310"
+</pre>
+
+<p>Можна перетворити на:</p>
+
+<pre class="brush: js example-good notranslate">let now = new Date();
+let date = now.getFullYear() * 10000 +
+          (now.getMonth() + 1) * 100 + now.getDate();
+
+console.log(date);
+// "20170310"</pre>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleFormat")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleDateString")}}</li>
+ <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/errors/index.html b/files/uk/web/javascript/reference/errors/index.html
new file mode 100644
index 0000000000..c295fccea6
--- /dev/null
+++ b/files/uk/web/javascript/reference/errors/index.html
@@ -0,0 +1,31 @@
+---
+title: JavaScript error reference
+slug: Web/JavaScript/Reference/Errors
+tags:
+  - Debugging
+  - Error
+  - Errors
+  - Exception
+  - JavaScript
+  - NeedsTranslation
+  - TopicStub
+  - exceptions
+translation_of: Web/JavaScript/Reference/Errors
+---
+<p>{{jsSidebar("Errors")}}</p>
+
+<p>Below, you'll find a list of errors which are thrown by JavaScript. These errors can be a helpful debugging aid, but the reported problem isn't always immediately clear. The pages below will provide additional details about these errors. Each error is an object based upon the {{jsxref("Error")}} object, and has a <code>name</code> and a <code>message</code>.</p>
+
+<p>Errors displayed in the Web console may include a link to the corresponding page below to help you quickly comprehend the problem in your code.</p>
+
+<h2 id="List_of_errors">List of errors</h2>
+
+<p>In this list, each page is listed by name (the type of error) and message (a more detailed human-readable error message). Together, these two properties provide a starting point toward understanding and resolving the error. For more information, follow the links below!</p>
+
+<p>{{ListSubPages("/en-US/docs/Web/JavaScript/Reference/Errors")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a>: Beginner's introductory tutorial on fixing JavaScript errors.</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/errors/invalid_for-in_initializer/index.html b/files/uk/web/javascript/reference/errors/invalid_for-in_initializer/index.html
new file mode 100644
index 0000000000..f856c96758
--- /dev/null
+++ b/files/uk/web/javascript/reference/errors/invalid_for-in_initializer/index.html
@@ -0,0 +1,77 @@
+---
+title: 'SyntaxError: for-in loop head declarations may not have initializers'
+slug: Web/JavaScript/Reference/Errors/Invalid_for-in_initializer
+tags:
+  - Error
+  - JavaScript
+  - SyntaxError
+  - Строгий режим
+  - помилка
+translation_of: Web/JavaScript/Reference/Errors/Invalid_for-in_initializer
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<p>Виняток, що викидається лише у <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">строгому режимі</a> JavaScript, "for-in loop head declarations may not have initializers", виникає, коли шапка циклу <a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> містить вираз ініціалізації, наприклад |<code>for (var i = 0 in obj)</code>|. Це не дозволено у циклах for-in у строгому режимі.</p>
+
+<h2 id="Повідомлення">Повідомлення</h2>
+
+<pre class="syntaxbox notranslate">SyntaxError: for-in loop head declarations cannot have an initializer (Edge)
+SyntaxError: for-in loop head declarations may not have initializers (Firefox)
+SyntaxError: for-in loop variable declaration may not have an initializer. (Chrome)
+</pre>
+
+<h2 id="Тип_помилки">Тип помилки</h2>
+
+<p>{{jsxref("SyntaxError")}} лише у <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">строгому режимі</a>.</p>
+
+<h2 id="Що_сталось">Що сталось?</h2>
+
+<p>Шапка циклу<a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in"> for...in</a> містить вираз ініціалізації. Тобто, було оголошено змінну та присвоєно їй значення |<code>for (var i = 0 in obj)</code>|. У нестрогому режимі таке оголошення просто ігнорується та сприймається як <code>|for (var i in obj)|</code>. Однак, у <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">строгому режимі</a> викидається помилка <code>SyntaxError</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Цей приклад викидає помилку <code>SyntaxError</code>:</p>
+
+<pre class="brush: js example-bad notranslate">"use strict";
+
+var obj = {a: 1, b: 2, c: 3 };
+
+for (var i = 0 in obj) {
+  console.log(obj[i]);
+}
+
+// SyntaxError: for-in loop head declarations may not have initializers
+</pre>
+
+<h3 id="Правильний_цикл_for-in">Правильний цикл for-in</h3>
+
+<p>Ви можете прибрати ініціалізатор (<code>i = 0</code>) з шапки циклу for-in.</p>
+
+<pre class="brush: js example-good notranslate">"use strict";
+
+var obj = {a: 1, b: 2, c: 3 };
+
+for (var i in obj) {
+  console.log(obj[i]);
+}
+</pre>
+
+<h3 id="Перебір_масиву">Перебір масиву</h3>
+
+<p>Цикл for...in <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in#Array_iteration_and_for...in">не варто використовувати для перебору масиву</a>. Чи намагались ви використати цикл <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for">for</a></code> замість <code>for-in</code> для перебору {{jsxref("Array", "масиву")}}? Цикл <code>for</code> також дозволяє використання ініціалізатора:</p>
+
+<pre class="brush: js example-good notranslate">var arr = [ "a", "b", "c" ]
+
+for (var i = 2; i &lt; arr.length; i++) {
+  console.log(arr[i]);
+}
+
+// "c"</pre>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code></li>
+ <li><code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code> – також не дозволяє ініціалізатор як у строгому, так і у нестрогому режимах.</li>
+ <li><code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for">for</a></code> – найкращий для перебору масивів, дозволяє визначати ініціалізатор.</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/errors/json_bad_parse/index.html b/files/uk/web/javascript/reference/errors/json_bad_parse/index.html
new file mode 100644
index 0000000000..a4f20078c6
--- /dev/null
+++ b/files/uk/web/javascript/reference/errors/json_bad_parse/index.html
@@ -0,0 +1,112 @@
+---
+title: 'SyntaxError: JSON.parse: bad parsing'
+slug: Web/JavaScript/Reference/Errors/JSON_bad_parse
+tags:
+  - JSON
+  - JavaScript
+  - Method
+  - Property
+  - SyntaxError
+  - Помилки
+translation_of: Web/JavaScript/Reference/Errors/JSON_bad_parse
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Повідомлення">Повідомлення</h2>
+
+<pre class="syntaxbox">SyntaxError: JSON.parse: unterminated string literal
+SyntaxError: JSON.parse: bad control character in string literal
+SyntaxError: JSON.parse: bad character in string literal
+SyntaxError: JSON.parse: bad Unicode escape
+SyntaxError: JSON.parse: bad escape character
+SyntaxError: JSON.parse: unterminated string
+SyntaxError: JSON.parse: no number after minus sign
+SyntaxError: JSON.parse: unexpected non-digit
+SyntaxError: JSON.parse: missing digits after decimal point
+SyntaxError: JSON.parse: unterminated fractional number
+SyntaxError: JSON.parse: missing digits after exponent indicator
+SyntaxError: JSON.parse: missing digits after exponent sign
+SyntaxError: JSON.parse: exponent part is missing a number
+SyntaxError: JSON.parse: unexpected end of data
+SyntaxError: JSON.parse: unexpected keyword
+SyntaxError: JSON.parse: unexpected character
+SyntaxError: JSON.parse: end of data while reading object contents
+SyntaxError: JSON.parse: expected property name or '}'
+SyntaxError: JSON.parse: end of data when ',' or ']' was expected
+SyntaxError: JSON.parse: expected ',' or ']' after array element
+SyntaxError: JSON.parse: end of data when property name was expected
+SyntaxError: JSON.parse: expected double-quoted property name
+SyntaxError: JSON.parse: end of data after property name when ':' was expected
+SyntaxError: JSON.parse: expected ':' after property name in object
+SyntaxError: JSON.parse: end of data after property value in object
+SyntaxError: JSON.parse: expected ',' or '}' after property value in object
+SyntaxError: JSON.parse: expected ',' or '}' after property-value pair in object literal
+SyntaxError: JSON.parse: property names must be double-quoted strings
+SyntaxError: JSON.parse: expected property name or '}'
+SyntaxError: JSON.parse: unexpected character
+SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data
+</pre>
+
+<h2 id="Тип_помилки">Тип помилки</h2>
+
+<p>{{jsxref("Global_Objects/SyntaxError", "SyntaxError")}}</p>
+
+<h2 id="Що_трапилося">Що трапилося?</h2>
+
+<p>Метод {{jsxref("JSON.parse()")}} здійснює розбір JSON в переданому рядку. Він викидає цю помилку, якщо рядок містить неправильний JSON (виявлено неналежний синтаксис).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="JSON.parse()_не_дозволяє_використовувати_прикінцеві_коми"><code>JSON.parse()</code> не дозволяє використовувати прикінцеві коми</h3>
+
+<p>Обидва наведені рядки викидають SyntaxError:</p>
+
+<pre class="brush: js example-bad">JSON.parse('[1, 2, 3, 4,]');
+JSON.parse('{"foo": 1,}');
+// SyntaxError JSON.parse: unexpected character
+// at line 1 column 14 of the JSON data
+</pre>
+
+<p>Задля належного розбору JSON оминайте використання прикінцевих ком:</p>
+
+<pre class="brush: js example-good">JSON.parse('[1, 2, 3, 4]');
+JSON.parse('{"foo": 1}');</pre>
+
+<h3 id="Ім'я_властивості_має_бути_рядком_в_подвійних_лапках">Ім'я властивості має бути рядком в подвійних лапках</h3>
+
+<p>Не можна використовувати одинарні лапки, як-от 'foo':</p>
+
+<pre class="brush: js example-bad">JSON.parse("{'foo': 1}");
+// SyntaxError: JSON.parse: expected property name or '}'
+// at line 1 column 2 of the JSON data</pre>
+
+<p>Натомість має бути "foo":</p>
+
+<pre class="brush: js example-good">JSON.parse('{"foo": 1}');</pre>
+
+<h3 id="Провідні_нулі_та_десяткові_крапки">Провідні нулі та десяткові крапки</h3>
+
+<p>Не можна вказувати провідні нулі (як у числі 01) та розділові крапки без якнайменше одного десяткового знака:</p>
+
+<pre class="brush: js example-bad">JSON.parse('{"foo": 01}');
+// SyntaxError: JSON.parse: expected ',' or '}' after property value
+// in object at line 1 column 2 of the JSON data
+
+JSON.parse('{"foo": 1.}');
+// SyntaxError: JSON.parse: unterminated fractional number
+// at line 1 column 2 of the JSON data
+</pre>
+
+<p>Провідні нулі приберіть, а на місці відсутніх десяткових знаків (якщо жодного значущого немає) напишіть просто нуль:</p>
+
+<pre class="brush: js example-good">JSON.parse('{"foo": 1}');
+JSON.parse('{"foo": 1.0}');
+</pre>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("JSON")}}</li>
+ <li>{{jsxref("JSON.parse()")}}</li>
+ <li>{{jsxref("JSON.stringify()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/errors/more_arguments_needed/index.html b/files/uk/web/javascript/reference/errors/more_arguments_needed/index.html
new file mode 100644
index 0000000000..c0ede70788
--- /dev/null
+++ b/files/uk/web/javascript/reference/errors/more_arguments_needed/index.html
@@ -0,0 +1,46 @@
+---
+title: 'TypeError: More arguments needed'
+slug: Web/JavaScript/Reference/Errors/More_arguments_needed
+translation_of: Web/JavaScript/Reference/Errors/More_arguments_needed
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Помилка">Помилка</h2>
+
+<pre class="syntaxbox">TypeError: Object.create requires more than 0 arguments
+TypeError: Object.setPrototypeOf requires more than 1 argument
+TypeError: Object.defineProperties requires more than 0 arguments
+</pre>
+
+<h2 id="Тип_помилки">Тип помилки</h2>
+
+<p>{{jsxref("TypeError")}}.</p>
+
+<h2 id="Щось_пішло_не_так">Щось пішло не так?</h2>
+
+<p>Для виконання функції потрібні аргументи функції. Справа в тому, що для виконання функції потрібні параметри, ви повинні вказати їх на початок визову функції, в дужках.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Визов Object.create() функції потребує щонайменьше один! аргумент.</p>
+
+<p>Визов Object.setPrototypeOf({}) методу(функції) потребує два! аргументи.</p>
+
+<pre class="brush: js example-bad">var obj = Object.create();
+// TypeError: Object.create requires more than 0 arguments
+
+var obj = Object.setPrototypeOf({});
+// TypeError: Object.setPrototypeOf requires more than 1 argument
+</pre>
+
+<p>Це можливо виправити вказавши аргументи функції під час визову, наприклад:</p>
+
+<pre class="brush: js example-good">var obj = Object.create(null);
+
+var obj = Object.setPrototypeOf({}, null);</pre>
+
+<h2 id="Дивись_також">Дивись також</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Functions</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/errors/negative_repetition_count/index.html b/files/uk/web/javascript/reference/errors/negative_repetition_count/index.html
new file mode 100644
index 0000000000..7d0dc1abfb
--- /dev/null
+++ b/files/uk/web/javascript/reference/errors/negative_repetition_count/index.html
@@ -0,0 +1,48 @@
+---
+title: 'RangeError: repeat count must be non-negative'
+slug: Web/JavaScript/Reference/Errors/Negative_repetition_count
+tags:
+  - Error
+  - JavaScript
+  - RangeError
+  - String
+  - помилка
+  - рядок
+translation_of: Web/JavaScript/Reference/Errors/Negative_repetition_count
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Повідомлення">Повідомлення</h2>
+
+<pre class="syntaxbox">RangeError: argument out of range
+RangeError: repeat count must be non-negative (Firefox)
+RangeError: Invalid count value (Chrome)
+</pre>
+
+<h2 id="Тип_помилки">Тип помилки</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="Що_сталось">Що сталось?</h2>
+
+<p>Був викликаний метод {{jsxref("String.prototype.repeat()")}}. Він має параметр <code>count</code>, що вказує, скільки разів потрібно повторити рядок. Його значення має бути від 0 та менше за позитивну {{jsxref("Infinity","нескінченність")}}, та не може бути від'ємним числом. Діапазон дозволених значень можна описати так: [0, +∞).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Помилкове_використання">Помилкове використання</h3>
+
+<pre class="brush: js example-bad">'абв'.repeat(-1); // RangeError </pre>
+
+<h3 id="Правильне_використання">Правильне використання</h3>
+
+<pre class="brush: js example-good">'абв'.repeat(0);    // ''
+'абв'.repeat(1);    // 'абв'
+'абв'.repeat(2);    // 'абвабв'
+'абв'.repeat(3.5);  // 'абвабвабв' (count буде перетворений на ціле число)
+</pre>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.repeat()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/errors/not_a_constructor/index.html b/files/uk/web/javascript/reference/errors/not_a_constructor/index.html
new file mode 100644
index 0000000000..cf4e4a383a
--- /dev/null
+++ b/files/uk/web/javascript/reference/errors/not_a_constructor/index.html
@@ -0,0 +1,91 @@
+---
+title: 'TypeError: "x" is not a constructor'
+slug: Web/JavaScript/Reference/Errors/Not_a_constructor
+translation_of: Web/JavaScript/Reference/Errors/Not_a_constructor
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Повідомлення">Повідомлення</h2>
+
+<pre class="syntaxbox">TypeError: "x" is not a constructor
+
+TypeError: Math is not a constructor
+TypeError: JSON is not a constructor
+TypeError: Symbol is not a constructor
+TypeError: Reflect is not a constructor
+TypeError: Intl is not a constructor
+TypeError: SIMD is not a constructor
+TypeError: Atomics is not a constructor
+</pre>
+
+<h2 id="Тип_помилки">Тип помилки</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="В_чому_справа">В чому справа?</h2>
+
+<p>Була спроба використати об'єкт чи змінну як конструктор, але сам об'єкт чи змінна не є конструктором. Дивись {{Glossary("constructor")}} чи <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a> для більш детальної інформації.</p>
+
+<p>У JavaScript існує багато глобальних об'єктів, наприклад {{jsxref("String")}} чи {{jsxref("Array")}}, які можуть створюватись конструкторами використовуючи синтаксис <code>new</code>. Однак, деякі глобальні об'єкти не можуть, їх властивості і методи статичні. Наступні об'єкти являються стандартом JavaScript, вони вбудовані і не мають конструкторів: {{jsxref("Math")}}, {{jsxref("JSON")}}, {{jsxref("Symbol")}}, {{jsxref("Reflect")}}, {{jsxref("Intl")}}, {{jsxref("SIMD")}}, {{jsxref("Atomics")}}.</p>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">Генератори функцій</a> не можуть використовуватись також.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Помилкові_випадки">Помилкові випадки</h3>
+
+<pre class="brush: js example-bad">var Car = 1;
+new Car();
+// TypeError: Car не має конструктора
+
+new Math();
+// TypeError: Math не є конструктором
+
+new Symbol();
+// TypeError: Symbol не є конструктором
+
+function* f() {};
+var obj = new f;
+// TypeError: f не є конструктором
+</pre>
+
+<h3 id="Конструктор_Car">Конструктор Car</h3>
+
+<p>Для того щоб створити класс-конструктор, потрібно вказати його як функцію. В дужках ви можете вказати його статичні методи, наприклад виробника, модель, рік створення автомобілю. Щоб зробити це опишіть свою модель наступним чином:</p>
+
+<pre class="brush: js">function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+</pre>
+
+<p>Тепер ви можете створювати об'єкти классу Car, наприклад <code>mycar</code>:</p>
+
+<pre class="brush: js">var mycar = new Car('Eagle', 'Talon TSi', 1993);</pre>
+
+<h3 id="Обіцянка">Обіцянка</h3>
+
+<p>Спроба повернути з функції екземляр класу, з виконанням його методу, під час виконання якоїсь функції(з ходу), вам не потрібно використовувати синтаксис типу <em>new Promise(...)</em>.</p>
+
+<p>Це є помилкою(виклик конктруктору класу Promise поза синтаксисом), виконання коду буде зупинено з помилкою <code>TypeError: this is not a constructor</code> вийняток:</p>
+
+<pre class="brush: js example-bad">return new Promise.resolve(true);
+</pre>
+
+<p>Замість цього використовуй статичні методи  класу<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve"> Promise.resolve()</a> чи <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject">Promise.reject()</a> <a href="https://en.wikipedia.org/wiki/Method_(computer_programming)#Static_methods">static methods</a>:</p>
+
+<pre class="brush: js">// Це допустимо, але дуже нечитабельний синтаксис:
+return new Promise((resolve, reject) =&gt; { resolve(true); })
+
+// Замість цього, просто використовуйте статичні методи класу Promise:
+return Promise.resolve(true);
+return Promise.reject(false);
+</pre>
+
+<h2 id="Дивись_також">Дивись також</h2>
+
+<ul>
+ <li>{{Glossary("constructor")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/errors/not_a_function/index.html b/files/uk/web/javascript/reference/errors/not_a_function/index.html
new file mode 100644
index 0000000000..6130a8bef2
--- /dev/null
+++ b/files/uk/web/javascript/reference/errors/not_a_function/index.html
@@ -0,0 +1,124 @@
+---
+title: 'TypeError: "x" не є функцією'
+slug: Web/JavaScript/Reference/Errors/Not_a_function
+tags:
+  - JavaScript
+  - TypeError
+  - Помилки
+translation_of: Web/JavaScript/Reference/Errors/Not_a_function
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Повідомлення">Повідомлення</h2>
+
+<pre class="syntaxbox">TypeError: "x" не є функцією
+</pre>
+
+<h2 id="Тип_помилки">Тип помилки</h2>
+
+<p>{{jsxref("TypeError")}}.</p>
+
+<h2 id="Що_пішло_не_так">Що пішло не так?</h2>
+
+<p>Була с<span id="result_box" lang="uk"><span>проба викликати значення з функції, але значення насправді не є функцією.</span> <span>Деякий код очікує, що ви надішлете функцію, але це не відбулося</span></span>.</p>
+
+<p>Можило <span id="result_box" lang="uk"><span>в назві функції є опечатка?</span> Можливо <span>метод, що викликаєтся на об'єкті не має цієї функції?</span></span> Наприклад, об'єкти JavaScript не мають функції <code>map</code> , але об'єкт масиву JavaScript має.</p>
+
+<p><span id="result_box" lang="uk"><span>Є багато вбудованих функцій, які потребують функцій зворотнього виклику.</span> <span>Вам доведеться надати функцію, щоб ці методи працювали належним чином</span></span>:</p>
+
+<ul>
+ <li>Коли працюєте з {{jsxref("Array")}} або {{jsxref("TypedArray")}} об'єктами:
+  <ul>
+   <li>{{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.forEach()")}}, {{jsxref("Array.prototype.map()")}}, {{jsxref("Array.prototype.filter()")}},  {{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}}, {{jsxref("Array.prototype.find()")}}</li>
+  </ul>
+ </li>
+ <li>Коли працюєте з {{jsxref("Map")}} і {{jsxref("Set")}} об'єктами:
+  <ul>
+   <li>{{jsxref("Map.prototype.forEach()")}} та {{jsxref("Set.prototype.forEach()")}}</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Помилка_в_назві_фунції">Помилка в назві фунції</h3>
+
+<p>В цьому випадку, <span id="result_box" lang="uk"><span>що трапляється занадто часто, в назві методу є помилка</span></span>:</p>
+
+<pre class="brush: js example-bad">var x = document.getElementByID('foo');
+// TypeError: document.getElementByID is not a function
+</pre>
+
+<p>Правильна назва функції є <code>getElementByI<strong>d</strong></code>:</p>
+
+<pre class="brush: js example-good">var x = document.getElementById('foo');
+</pre>
+
+<h3 id="Функція_що_викликана_на_неправильному_об'єкті">Функція, що викликана на неправильному об'єкті</h3>
+
+<p><span id="result_box" lang="uk"><span>Для деяких методів вам необхідно надати функцію зворотнього виклику, і вона буде працювати тільки на певних об'єктах</span></span>. Наприклад, використано {{jsxref("Array.prototype.map()")}}, який буде працювати лише з об'єктом {{jsxref("Array")}}.</p>
+
+<pre class="brush: js example-bad">var obj = {a: 13, b: 37, c: 42};
+
+obj.map(function(num) {
+  return num * 2;
+});
+
+// TypeError: obj.map is not a function</pre>
+
+<p>Використовуйте замість цього масив:</p>
+
+<pre class="brush: js example-good">var numbers = [1, 4, 9];
+
+numbers.map(function(num) {
+  return num * 2;
+});
+
+// Array [2, 8, 18]
+</pre>
+
+<h3 id="Функція_має_назву_що_співпадає_з_існуючою_раніш_властивістю"><span class="short_text" id="result_box" lang="uk"><span>Функція має назву, що співпадає з існуючою раніш властивістю</span></span></h3>
+
+<p><span id="result_box" lang="uk"><span>Іноді під час створення класу ви можете мати властивість та функцію з тим самим ім'ям.</span> <span>Після виклику функції компілятор вважає, що функція перестає існувати.</span></span></p>
+
+<pre class="brush: js example-bad">var Dog = function () {
+ this.age = 11;
+ this.color = "black";
+ this.name = "Ralph";
+ return this;
+}
+
+Dog.prototype.name = function(name) {
+ this.name = name;
+ return this;
+}
+
+
+var myNewDog = new Dog();
+myNewDog.name("Cassidy"); //Uncaught TypeError: myNewDog.name is not a function
+</pre>
+
+<p><span class="short_text" id="result_box" lang="uk"><span>Використовуйте інше ім'я властивості</span></span>:</p>
+
+<pre class="brush: js example-good">var Dog = function () {
+ this.age = 11;
+ this.color = "black";
+ this.dogName = "Ralph"; //Using this.dogName instead of .name
+ return this;
+}
+
+Dog.prototype.name = function(name) {
+ this.dogName = name;
+ return this;
+}
+
+
+var myNewDog = new Dog();
+myNewDog.name("Cassidy"); //Dog { age: 11, color: 'black', dogName: 'Cassidy' }
+</pre>
+
+<h2 id="Дивись_також">Дивись також</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Функції</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/errors/resulting_string_too_large/index.html b/files/uk/web/javascript/reference/errors/resulting_string_too_large/index.html
new file mode 100644
index 0000000000..3ece6370b3
--- /dev/null
+++ b/files/uk/web/javascript/reference/errors/resulting_string_too_large/index.html
@@ -0,0 +1,53 @@
+---
+title: 'RangeError: repeat count must be less than infinity'
+slug: Web/JavaScript/Reference/Errors/Resulting_string_too_large
+tags:
+  - Error
+  - JavaScript
+  - RangeError
+  - String
+  - помилка
+  - рядок
+translation_of: Web/JavaScript/Reference/Errors/Resulting_string_too_large
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Повідомлення">Повідомлення</h2>
+
+<pre class="syntaxbox">RangeError: argument out of range (Edge)
+RangeError: repeat count must be less than infinity and not overflow maximum string size (Firefox)
+
+RangeError: Invalid count value (Chrome)
+</pre>
+
+<h2 id="Тип_помилки">Тип помилки</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="Що_сталось">Що сталось?</h2>
+
+<p>Був викликаний метод {{jsxref("String.prototype.repeat()")}}. Він має параметр <code>count</code>, що вказує, скільки разів потрібно повторити рядок. Його значення має бути від 0 та менше за позитивну {{jsxref("Infinity","нескінченність")}}, та не може бути від'ємним числом. Діапазон дозволених значень можна описати так: [0, +∞).</p>
+
+<p>Отриманий в результаті рядок також не може бути більшим за максимальний розмір рядка, який може відрізнятись між рушіями JavaScript. У Firefox (SpiderMonkey) максимальний розмір рядка дорівнює 2<sup>28</sup> -1 (<code>0xFFFFFFF</code>).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Помилкове_використання">Помилкове використання</h3>
+
+<pre class="brush: js example-bad">'абв'.repeat(Infinity); // RangeError
+'а'.repeat(2**28);      // RangeError
+</pre>
+
+<h3 id="Правильне_використання">Правильне використання</h3>
+
+<pre class="brush: js example-good">'абв'.repeat(0);    // ''
+'абв'.repeat(1);    // 'абв'
+'абв'.repeat(2);    // 'абвабв'
+'абв'.repeat(3.5);  // 'абвабвабв' (count буде перетворений на ціле число)
+</pre>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.repeat()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/functions/arguments/@@iterator/index.html b/files/uk/web/javascript/reference/functions/arguments/@@iterator/index.html
new file mode 100644
index 0000000000..247d90c724
--- /dev/null
+++ b/files/uk/web/javascript/reference/functions/arguments/@@iterator/index.html
@@ -0,0 +1,77 @@
+---
+title: 'arguments[@@iterator]()'
+slug: Web/JavaScript/Reference/Functions/arguments/@@iterator
+tags:
+  - JavaScript
+  - arguments
+  - Властивість
+  - функції
+translation_of: Web/JavaScript/Reference/Functions/arguments/@@iterator
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>Початковим значенням властивості <code><strong>@@iterator</strong></code> є та сама функція, що є початковим значенням властивості {{jsxref("Array.prototype.values")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>arguments</var>[Symbol.iterator]()</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Перебір_за_допомогою_циклу_for...of">Перебір за допомогою циклу <code>for...of</code></h3>
+
+<pre class="brush: js">function f() {
+  // ваш переглядач має підтримувати цикл for..of
+  // та оголошення змінних у циклах for через let
+  for (let letter of arguments) {
+    console.log(letter);
+  }
+}
+f('w', 'y', 'k', 'o', 'p');
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-createunmappedargumentsobject', ' CreateUnmappedArgumentsObject')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-createmappedargumentsobject', ' CreateMappedArgumentsObject')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-createunmappedargumentsobject', 'CreateUnmappedArgumentsObject')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-createmappedargumentsobject', 'CreateMappedArgumentsObject')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.functions.arguments.@@iterator")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.values()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/functions/arguments/caller/index.html b/files/uk/web/javascript/reference/functions/arguments/caller/index.html
new file mode 100644
index 0000000000..3695367816
--- /dev/null
+++ b/files/uk/web/javascript/reference/functions/arguments/caller/index.html
@@ -0,0 +1,55 @@
+---
+title: arguments.caller
+slug: Web/JavaScript/Reference/Functions/arguments/caller
+tags:
+  - Functions
+  - JavaScript
+  - arguments
+  - Властивість
+  - застаріла
+translation_of: Archive/Web/JavaScript/arguments.caller
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>{{obsolete_header}}</p>
+
+<p>Застаріла властивість <strong><code>arguments.caller</code></strong> використовувалась, щоб надавати функцію, яка викликала поточну функцію, що виконується. Ця властивість була прибрана та більше не працює.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Ця властивість більше недоступна, але ви можете скористатись {{jsxref("Function.caller")}}.</p>
+
+<pre class="brush: js">function whoCalled() {
+   if (whoCalled.caller == null)
+      console.log('Я викликана з глобальної області видимості.');
+   else
+      console.log('Функція ' + whoCalled.caller + ' викликала мене!');
+}</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Наступний код використовувався для перевірки значення <code>arguments.caller</code> у функції, але він більше не працює.</p>
+
+<pre class="brush: js example-bad">function whoCalled() {
+   if (arguments.caller == null)
+      console.log('Я викликана з глобальної області видимості.');
+   else
+      console.log('Функція ' + arguments.caller + ' викликала мене!');
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Не є частиною жодного стандарту. Реалізована у JavaScript 1.1 та прибрана у {{bug(7224)}} через потенційну вразливість для безпеки.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.functions.arguments.caller")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/functions/arguments/index.html b/files/uk/web/javascript/reference/functions/arguments/index.html
new file mode 100644
index 0000000000..90a2963025
--- /dev/null
+++ b/files/uk/web/javascript/reference/functions/arguments/index.html
@@ -0,0 +1,282 @@
+---
+title: Об'єкт arguments
+slug: Web/JavaScript/Reference/Functions/arguments
+tags:
+  - JavaScript
+  - аргументи
+  - методи
+  - функції
+translation_of: Web/JavaScript/Reference/Functions/arguments
+---
+<div>
+<div>{{jsSidebar("Functions")}}</div>
+</div>
+
+<p>Подібний до масиву об'єкт <strong><code>arguments</code></strong> описує аргументи, які було передано у функцію.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">arguments
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Об'єкт <code>arguments</code> — це локальна змінна, яка доступна всередині кожної функції. Цей об'єкт містить інформацію про кількість та значення всіх параметрів, що їх було передано до функції під час її виклику. Для читання чи змінювання значень аргументів можна скористатися синтаксисом доступу до елементів масиву, де індекс першого переданого аргументу починається з <code>0</code>.</p>
+
+<p>Для прикладу, якщо в функцію передано три аргументи, звернутися до них можна так:</p>
+
+<pre class="brush: js">arguments[0]
+arguments[1]
+arguments[2]
+</pre>
+
+<p>Значення можна не лише читати, а й змінювати таким чином:</p>
+
+<pre class="brush: js">arguments[1] = 'new value';
+</pre>
+
+<p>Об'єкт <code>arguments</code> не є {{jsxref("Array", "масивом")}}. Він подібний до масиву, але не має жодних властивостей масиву, крім <a href="/uk/docs/Web/JavaScript/Reference/Functions/arguments/length">length</a> (довжини). Наприклад, він не має методу <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/pop">pop</a>. Проте його можна перетворити на справжній масив:</p>
+
+<pre class="brush: js">var args = Array.prototype.slice.call(arguments);
+var args = [].slice.call(arguments);
+</pre>
+
+<p>Також можна скористатися методом {{jsxref("Array.from()")}} або <a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператор_розпакування">оператором розпакування</a>, щоб перетворити arguments на справжній масив:</p>
+
+<pre class="brush: js">var args = Array.from(arguments);
+
+// ES2015
+var args = [...arguments];
+</pre>
+
+<div class="warning">
+<p>Застосування методу <code>slice</code> до <code>arguments</code> заважає оптимізації в деяких рушіях JavaScript (<a href="https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments">наприклад, V8</a>). Отже, якщо вас це обходить, створюйте новий масив шляхом перебору елементів псевдомасиву arguments. Можна також скористатися конструктором <code>Array</code> як функцією:</p>
+
+<pre class="brush: js">var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));
+</pre>
+</div>
+
+<p>Об'єкт <code>arguments</code> корисний в тих випадках, коли кількість аргументів функції заздалегідь невідома. Існує чимало прикладів того, коли функцію можна викликати із різною множиною аргументів, реалізуючи таким чином поведінку на кшталт «перевантаження», яке в чистому вигляді відсутнє в JavaScript. Очевидно, що така «перевантажена» функція не завше може задовольнитися переліком формальних аргументів однієї <a href="/uk/docs/Glossary/Signature/Function">сигнатури</a>. Саме тут arguments може стати в нагоді.</p>
+
+<p>Завважте, що властивість <a href="/uk/docs/Web/JavaScript/Reference/Functions/arguments/length">arguments.length</a> — це кількість фактичних (а не формальних) аргументів, які дійсно було передано до функції. Натомість для визначення кількості формальних параметрів, оголошених сигнатурою функції, скористайтесь властивістю <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/length">Function.length</a>.</p>
+
+<p>Як свідчить <code>typeof</code>, <code>arguments</code> є об'єктом:</p>
+
+<pre class="brush: js">console.log(typeof arguments);  // 'object'</pre>
+
+<p>Тип кожного окремого аргументу можна визначити за допомогою typeof та індексації псевдомасиву <code>arguments</code>:</p>
+
+<pre class="brush: js">console.log(typeof arguments[0]);  // значення typeof конкретного аргументу</pre>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code></dt>
+ <dd>Посилання на функцію, що саме виконується.</dd>
+ <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/caller">arguments.caller</a></code> {{ Obsolete_inline() }}</dt>
+ <dd>Посилання на функцію, з якої здійснили виклик поточної (яка саме виконується).</dd>
+ <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/length">arguments.length</a></code></dt>
+ <dd>Кількість аргументів, що було фактично передано до функції.</dd>
+ <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/@@iterator">arguments[@@iterator]</a></code></dt>
+ <dd>Вертає новий ітератор масиву, що містить значення за кожним індексом в <code>arguments</code>.</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Функція_що_з'єднує_кілька_рядків">Функція, що з'єднує кілька рядків</h3>
+
+<p>В цьому прикладі наведно функцію, яка з'єднує кілька рядків в один. Єдиний формальний аргумент функції — це рядок, що виступатиме розділовою послідовністю символів між складовими, що підлягають з'єднуванню. Це можна втілити наступним чином:</p>
+
+<pre class="brush:js">function myJoin(separator) {
+  var args = Array.prototype.slice.call(arguments, 1);
+  return args.join(separator);
+}</pre>
+
+<p>Отже, можна передавати довільну кількість аргументів, послідовність яких (окрім першого, що виступає розділовою послідовністю символів) перетворюється на масив, а тоді з'єднується за допомогою {{jsxref("Array.join()")}}.</p>
+
+<p>Отож маємо:</p>
+
+<pre class="brush:js">// вертає "камінь, ножиці, папір"
+myJoin(", ", "камінь", "ножиці", "папір");
+
+// вертає "я; дух; одвічна стихія; потопа"
+myJoin("; ", "я", "дух", "одвічна стихія", "потопа");
+
+// вертає "Чому Пінгвіни Живуть Зимою Без Своїх Фантазій"
+myJoin(" ", "Чому", "Пінгвіни", "Живуть", "Зимою", "Без", "Своїх", "Фантазій");</pre>
+
+<h3 id="Функція_що_створює_HTML-списки">Функція, що створює HTML-списки</h3>
+
+<p>В наступному прикладі наведено функцію, що створює HTML-розмітку списку. Єдиний формальний аргумент функції — текстовий рядок, що визначає різновид списку ("o" для впорядкованого списку, чи то пак — нумерованого, — або "u" для невпорядкованого). Решта аргументів, визначатиме власне елементи списку. Одна з можливих реалізацій виглядає наступним чином:</p>
+
+<pre class="brush:js">function list(type) {
+  var markup = "&lt;" + type + "l&gt;";
+
+  for (var i = 1; i &lt; arguments.length; i++) {
+    markup += "&lt;li&gt;" + arguments[i] + "&lt;/li&gt;";
+  }
+  markup += "&lt;/" + type + "l&gt;";
+
+  return markup
+}</pre>
+
+<p>До функції можна передати будь-яку кількість аргументів, створивши список з довільною кількістю елементів. Наприклад, так:</p>
+
+<pre class="brush:js">var markup = list("u", "Крижина", "Стежина", "Чужина");
+
+console.log(markup);  // виводить "&lt;ul&gt;&lt;li&gt;Крижина&lt;/li&gt;&lt;li&gt;Стежина&lt;/li&gt;&lt;li&gt;Чужина&lt;/li&gt;&lt;ul&gt;"
+</pre>
+
+<h3 id="Решта_типові_та_деструктуризовані_параметри">Решта, типові та деструктуризовані параметри</h3>
+
+<p>Об'єкт <code>arguments</code> можна використовувати в поєднанні з <a href="/uk/docs/Web/JavaScript/Reference/Functions/решта_параметрів">рештою</a>, <a href="/uk/docs/Web/JavaScript/Reference/Functions/Default_parameters">типовими</a> та <a href="/uk/docs/Web/JavaScript/Reference/Operators/Деструктуризація">деструктуризованими</a> параметрами.</p>
+
+<pre class="brush: js">function foo(...args) {
+  return arguments;
+}
+
+foo(1, 2, 3);  // вертає {"0": 1, "1": 2, "2": 3}
+</pre>
+
+<p>І хоча присутність <em>решти</em>, <em>типових</em> чи <em>деструктуризованих</em> параметрів не змінює поведінки об'єкта <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode#Спрощення_eval_та_arguments">arguments в суворому режимі</a>, в звичайному режимі все ж є невеличка різниця. За відсутності <em>решти</em>, <em>типових</em> чи <em>деструктуризованих</em> параметрів функція, яка виконується в звичайному (не в суворому) режимі, передбачає збереження зв'язку між значеннями формальних параметрів та значеннями, що їх містить об'єкт <code>arguments</code>:</p>
+
+<pre class="brush: js">function foo(a) {
+  arguments[0] = 99;  // змінюючи arguments[0] ми також змінюємо a
+  console.log(a);
+}
+
+foo(10);  // 99</pre>
+
+<p>І навпаки:</p>
+
+<pre class="brush: js">function foo(a) {
+  a = 99;  // змінюючи a ми також змінюємо arguments[0]
+  console.log(arguments[0]);
+}
+
+foo(10);  // 99</pre>
+
+<p>Натомість, наявність таких (<em>решти</em>, <em>типових</em> чи <em>деструктуризованих</em>) параметрів той зв'язок порушує:</p>
+
+<pre class="brush: js">function foo(a = 55) {
+  arguments[0] = 99;  // змінюючи arguments[0] ми більше не впливаємо на a
+  console.log(a);
+}
+
+foo(10); // 10</pre>
+
+<p>І навпаки:</p>
+
+<pre class="brush: js">function foo(a = 55) {
+  a = 99;  // змінюючи a ми більше не впливаємо на arguments[0]
+  console.log(arguments[0]);
+}
+
+foo(10); // 10</pre>
+
+<p>Ба більше:</p>
+
+<pre class="brush: js">function foo(a = 55) {
+  console.log(arguments[0]);
+}
+
+foo();  // undefined</pre>
+
+<p>Ясна річ, цей зв'язок поширюється лише на значення змінних, а не на вміст об'єктів:</p>
+
+<pre class="brush: js">function foo(object = {}) {
+  object.value = 222;
+  console.debug(arguments[0].value);
+}
+
+foo({value: 111});  // Object {value: 222}</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Первинне визначення. Реалізовано у JavaScript 1.1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/functions/arguments/length/index.html b/files/uk/web/javascript/reference/functions/arguments/length/index.html
new file mode 100644
index 0000000000..77246c5b4e
--- /dev/null
+++ b/files/uk/web/javascript/reference/functions/arguments/length/index.html
@@ -0,0 +1,85 @@
+---
+title: arguments.length
+slug: Web/JavaScript/Reference/Functions/arguments/length
+tags:
+  - JavaScript
+  - arguments
+  - Властивість
+  - функції
+translation_of: Web/JavaScript/Reference/Functions/arguments/length
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>Властивість <strong><code>arguments.length</code></strong> містить кількість аргументів, переданих у функцію.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">arguments.length</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Властивість <code>arguments.length</code> надає кількість аргументів, які фактично передані у функцію. Вона може бути більшою або меншою, ніж визначена кількість параметрів (дивіться {{jsxref("Function.length")}}).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_arguments.length">Використання <code>arguments.length</code></h3>
+
+<p>В цьому прикладі ми визначаємо функцію, яка рахує суму двох або більше аргументів.</p>
+
+<pre class="brush: js">function adder(base /*, n2, ... */) {
+  base = Number(base);
+  for (var i = 1; i &lt; arguments.length; i++) {
+    base += Number(arguments[i]);
+  }
+  return base;
+}
+</pre>
+
+<div class="note">
+<p>Зауважте різницю між {{jsxref("Function.length")}} та arguments.length</p>
+</div>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.functions.arguments.length")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Function.length")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/functions/get/index.html b/files/uk/web/javascript/reference/functions/get/index.html
new file mode 100644
index 0000000000..00b002aad0
--- /dev/null
+++ b/files/uk/web/javascript/reference/functions/get/index.html
@@ -0,0 +1,175 @@
+---
+title: гетер
+slug: Web/JavaScript/Reference/Functions/get
+tags:
+  - ECMAScript 2015
+  - ECMAScript 5
+  - JavaScript
+  - функції
+translation_of: Web/JavaScript/Reference/Functions/get
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>Синтаксис <strong><code>get</code></strong> прив'язує властивість об'єкта до функції, яка викликатиметься під час звернення до властивості.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/functions-getter.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">{get <var>prop</var>() { ... } }
+{get [<var>expression</var>]() { ... } }</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>prop</var></code></dt>
+ <dd>Ім'я властивості, яка прив'язується до наданої функції.</dd>
+ <dt><code><var>expression</var></code></dt>
+ <dd>Починаючи з ECMAScript 2015, ви також можете використовувати вираз для обчислюваного імені властивості, яка прив'язується до наданої функції.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Іноді потрібно надати доступ до властивості, яка повертає динамічно обчислюване значення, або ви можете захотіти відобразити статус внутрішньої змінної без потреби використовувати явні виклики методів. У JavaScript це можна здійснити використанням <em>гетера</em>.</p>
+
+<p>Змінна не може одночасно мати прив'язаний гетер та містити значення, але <em>можливо</em> використати гетер в поєднанні з сетером, щоб створити свого роду псевдовластивість.</p>
+
+<p>Пам'ятайте наступне, працюючи з синтаксисом <code>get</code>:</p>
+
+<ul>
+ <li>Він може мати ідентифікатор, який є або числом, або рядком;</li>
+ <li>Він повинен мати рівно нуль параметрів (дивіться більше інформації у статті <a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Несумісна зміна <abbr title="ECMAScript 5th edition">ES5</abbr>: літеральні функції гетерів та сетерів тепер повинні мати рівно нуль аргументів та один аргумент</a>);</li>
+ <li>Він не повинен з'являтись у об'єктному літералі з іншим гетером чи введеними даними для тієї ж властивості(<code>{ get x() { }, get x() { } }</code> та <code>{ x: ..., get x() { } }</code> заборонені).</li>
+</ul>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Визначення_гетерів_на_нових_обєктах_у_обєктних_ініціалізаторах">Визначення гетерів на нових об'єктах у об'єктних ініціалізаторах</h3>
+
+<p>Це створить псевдовластивість <code>latest</code> для об'єкта <code>obj</code>, яка повертатиме останній елемент масиву у <code>log</code>.</p>
+
+<pre class="brush: js notranslate">const obj = {
+  log: ['приклад','тест'],
+  get latest() {
+    if (this.log.length === 0) return undefined;
+    return this.log[this.log.length - 1];
+  }
+}
+console.log(obj.latest); // "тест"
+</pre>
+
+<p>Зауважте, що спроба присвоїти значення <code>latest</code> не змінить її.</p>
+
+<h3 id="Видалення_гетера_оператором_delete">Видалення гетера оператором <code>delete</code></h3>
+
+<p>Якщо вам потрібно прибрати гетер, ви можете його просто {{jsxref("Operators/delete", "видалити")}}:</p>
+
+<pre class="brush: js notranslate">delete <var>obj</var>.latest;
+</pre>
+
+<h3 id="Визначення_гетера_на_існуючому_обєкті_за_допомогою_defineProperty">Визначення гетера на існуючому об'єкті за допомогою <code>defineProperty</code></h3>
+
+<p>Щоб додати гетер до існуючого об'єкта пізніше в будь-який момент, використовуйте {{jsxref("Object.defineProperty()")}}.</p>
+
+<pre class="brush: js notranslate">const o = {a: 0};
+
+Object.defineProperty(o, 'b', { get: function() { return this.a + 1; } });
+
+console.log(o.b) // Запускає гетер, який вертає a + 1 (тобто 1)</pre>
+
+<h3 id="Використання_обчислюваного_імені_властивості">Використання обчислюваного імені властивості</h3>
+
+<pre class="brush: js notranslate">const expr = 'foo';
+
+const obj = {
+  get [expr]() { return 'bar'; }
+};
+
+console.log(obj.foo); // "bar"</pre>
+
+<h3 id="Розумні_самопереписувані_ліниві_гетери">Розумні / самопереписувані / ліниві гетери</h3>
+
+<p>Гетери дають можливість <em>визначити</em> властивість об'єкта, але вони не <em>обчислюють</em> значення властивості до звернення. Гетер відкладає вартість обчислення значення, доки значення не знадобиться. Якщо воно ніколи не знадобиться, ви ніколи за це не заплатите.</p>
+
+<p>Додаткова техніка оптимізації, що полягає у відкладені обчислення значення властивості та кешуванні її для пізнішого звернення, створює <strong>розумні (або "<a href="https://uk.wikipedia.org/wiki/%D0%9C%D0%B5%D0%BC%D0%BE%D1%96%D0%B7%D0%B0%D1%86%D1%96%D1%8F">мемоізовані</a>") гетери</strong>. Значення обчислюється під час першого виклику гетера, після чого кешується, а отже, наступні виклики повертають кешоване значення, не переобчислюючи його. Це неймовірно корисно у наступних ситуаціях:</p>
+
+<ul>
+ <li>Якщо обчислення значення властивості є дорогим (витрачає багато оперативної пам'яті чи часу процесора, створює потоки виконавців, отримує файл, і т.д.).</li>
+ <li>Якщо значення не потрібне вам просто зараз. Воно використовуватиметься пізніше, або в певних випадках не використовуватиметься взагалі.</li>
+ <li>Якщо воно використовується, до нього відбувається декілька звернень, і немає потреби його переобчислювати, значення ніколи не змінюється і не потребує переобчислення.</li>
+</ul>
+
+<div class="note">
+<p>Це означає, що не варто писати лінивий гетер для властивості, чиє значення ви плануєте змінювати, бо, якщо гетер лінивий, він не буде його переобчислювати.</p>
+
+<p>Зауважте, що гетери не є ані “лінивими”, ані “мемоізованими” від природи; ви маєте реалізувати цю техніку, якщо вам потрібна така поведінка.</p>
+</div>
+
+<p>У наступному прикладі об'єкт має гетер як особисту властивість. Під час отримання властивості вона видаляється з об'єкта та повторно додається, але цього разу неявно, як властивість-значення. Наприкінці повертається значення.</p>
+
+<pre class="brush: js notranslate">get notifier() {
+  delete this.notifier;
+  return this.notifier = document.getElementById('bookmarked-notification-anchor');
+},</pre>
+
+<p>Для коду Firefox, дивіться також модуль <code>XPCOMUtils.jsm</code>, який визначає функцію <code><a href="/uk/docs/Mozilla/JavaScript_code_modules/XPCOMUtils.jsm#defineLazyGetter()">defineLazyGetter()</a></code>.</p>
+
+<h3 id="get_проти_defineProperty"><code>get</code> проти <code>defineProperty</code></h3>
+
+<p>Хоча ключове слово <code>get</code> та метод {{jsxref("Object.defineProperty()")}} дають схожі результати, існує тонка різниця між ними при використанні з {{jsxref("classes", "класами")}}.</p>
+
+<p>При використанні <code>get</code>, властивість буде визначена на прототипі екземпляру, в той час як {{jsxref("Object.defineProperty()")}} визначає властивість на екземплярі, до якого застосовується.</p>
+
+<pre class="brush: js notranslate">class Example {
+  get hello() {
+    return 'привіт';
+  }
+}
+
+const obj = new Example();
+console.log(obj.hello);
+// "привіт"
+
+console.log(Object.getOwnPropertyDescriptor(obj, 'hello'));
+// undefined
+
+console.log(
+  Object.getOwnPropertyDescriptor(
+    Object.getPrototypeOf(obj), 'hello'
+  )
+);
+// { configurable: true, enumerable: false, get: function get hello() { return 'привіт'; }, set: undefined }</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікації</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.functions.get")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Functions/set">сетер</a></li>
+ <li>{{jsxref("Operators/delete", "delete")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.__defineGetter__", "__defineGetter__")}}</li>
+ <li>{{jsxref("Object.__defineSetter__", "__defineSetter__")}}</li>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Working_with_Objects#Визначення_гетерів_та_сетерів">Визначення гетерів та сетерів</a> у посібнику JavaScript</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/functions/index.html b/files/uk/web/javascript/reference/functions/index.html
new file mode 100644
index 0000000000..c8edad0b53
--- /dev/null
+++ b/files/uk/web/javascript/reference/functions/index.html
@@ -0,0 +1,605 @@
+---
+title: Functions
+slug: Web/JavaScript/Reference/Functions
+translation_of: Web/JavaScript/Reference/Functions
+---
+<div>AEA{{jsSidebar("Functions")}}</div>
+
+<p>Загалом функція - це "підпрограма", що може бути <em>викликана </em>за допомогою зовнішнього (або внутрішнього у випадку рекурсії) коду. Так само, як і програма, функція складається з послідовності інструкцій, що називаються <em>тілом функції. </em>Функція приймає <em>значення</em> і вертає також <em>значення</em>.<br>
+ <br>
+ В JavaScript, функції - це об'єкти першого класу (first-class objects). Вони можуть мати <em>властивості</em> (properties) та <em>методи</em> (methods) так само, як і будь-які інші об'єкти. Вирізняє їх від інших об'єктів те, як вони викликаються. Загалом, функції є функціональними об'єктами (<code><a href="/uk/docs/JavaScript/Reference/Global_Objects/Function">Function</a></code> objects).<br>
+ <br>
+ Додаткові приклади і пояснення, див. також на <a href="/uk/docs/Web/JavaScript/Guide/Functions">JavaScript guide about functions</a>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Кожна функція в JavaScript є об'єктом. Перегляньте {{jsxref("Function")}}, для отримання інформації про властивості та методи, об'єктів функцій.</p>
+
+<p>Функції не те ж саме, що й процедури. Функція завжди повертає значення, а процедура може не завжди повертати значення.</p>
+
+<p>Щоб повернути значення інше ніж default (за замовчуванням), функція мусить мати <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code> оператор, який визначає яке значення має бути повернуто. Функція без оператора return буде повертати значення, яке встановлене за замовчуванням(default).<br>
+ <br>
+ У випадку, коли конструктор (<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a>) викликається з оператором <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code>, дефолтним значенням стає значення параметра <code>this</code>. Для всіх інших функцій значення, яке буде повертатися за замовчуванням буде {{jsxref("undefined")}}.</p>
+
+<p>Параметри, що передаються при виклику функції, називаються<em>аргументами. </em>Аргументи передаються в функцію за <em>значенням</em>. При зміні значення аргументу, ця зміна жодним чином не відображається в глобальній області видимості або в функціі виклику.<br>
+ <br>
+ However, object references are values, too, and they are special: if the function changes the referred object's properties, that change is visible outside the function, as shown in the following example:</p>
+
+<pre class="brush: js">/* Оголошення функції 'myFunc' */
+function myFunc(theObject) {
+   theObject.brand = "Toyota";
+ }
+
+ /*
+  * Оголошення змінної 'mycar';
+  * створення і ініціалізація нового об'єкту;
+  * присвоєння об'єкту до 'mycar'
+  */
+ var mycar = {
+   brand: "Honda",
+   model: "Accord",
+   year: 1998
+ };
+
+ /* Виведе 'Honda' */
+ console.log(mycar.brand);
+
+ /* Pass object reference to the function */
+ myFunc(mycar);
+
+ /*
+  * Logs 'Toyota' as the value of the 'brand' property
+  * of the object, as changed to by the function.
+  */
+ console.log(mycar.brand);
+</pre>
+
+<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code> keyword</a> does not refer to the currently executing function, so you must refer to <code>Function</code> objects by name, even within the function body.</p>
+
+<h2 id="Оголошення_функцій">Оголошення функцій</h2>
+
+<p>Є кілька способів оголошення функції:</p>
+
+<h3 id="The_function_declaration_function_statement">The function declaration (<code>function</code> statement)</h3>
+
+<p>Існує спеціальний синтаксис для оголошення функцій (докладніше див. <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a>): </p>
+
+<pre class="syntaxbox">function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Назва функціі.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Назва аргументу, що передається в функцію. Функція може приймати до 255 аргументів.</dd>
+</dl>
+
+<dl>
+ <dt><code>statements</code></dt>
+ <dd>Інструкціі, що складають тіло функціі.</dd>
+</dl>
+
+<h3 id="The_function_expression_function_expression">The function expression (<code>function</code> expression)</h3>
+
+<p>Функціональний вираз схожиий на оголошення функції (function declaration) і має такий самий синтаксис (докладніше див. <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a>):</p>
+
+<pre class="syntaxbox">function [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Назва функції. Може бути пропущена, тоді функція стане анонімною.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Назва аргументу, що передається в функцію. Функція може приймати до 255 аргументів.</dd>
+ <dt><code>statements</code></dt>
+ <dd>Інструкціі, що складають тіло функціі.</dd>
+</dl>
+
+<h3 id="The_generator_function_declaration_function*_statement">The generator function declaration (<code>function*</code> statement)</h3>
+
+<div class="note">
+<p><strong>Примітка:</strong>  Generator functions є<em> експериментальною технологією,</em> частиною ECMAScript 6 proposal,  і поки що не підтримуються всіма браузерами.</p>
+</div>
+
+<p>There is a special syntax for generator function declarations (see {{jsxref('Statements/function*', 'function* statement')}} for details):</p>
+
+<pre class="syntaxbox">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Назва функції.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Назва аргументу, що передається в функцію. Функція може приймати до 255 аргументів.</dd>
+</dl>
+
+<dl>
+ <dt><code>statements</code></dt>
+ <dd>Інструкціі, що складають тіло функціі.</dd>
+</dl>
+
+<h3 id="The_generator_function_expression_function*_expression">The generator function expression (<code>function*</code> expression)</h3>
+
+<div class="note">
+<p><strong>Примітка:</strong>  Generator functions є<em> експериментальною технологією,</em> частиною ECMAScript 6 proposal,  і поки що не підтримуються всіма браузерами.</p>
+</div>
+
+<p>A generator function expression is similar to and has the same syntax as a generator function declaration (see {{jsxref('Operators/function*', 'function* expression')}} for details):</p>
+
+<pre class="syntaxbox">function* [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Назва функції. Може бути пропущена, тоді функція стане анонімною.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Назва аргументу, що передається в функцію. Функція може приймати до 255 аргументів.</dd>
+ <dt><code>statements</code></dt>
+ <dd>Інструкціі, що складають тіло функціі.</dd>
+</dl>
+
+<h3 id="The_arrow_function_expression_>">The arrow function expression (=&gt;)</h3>
+
+<div class="note">
+<p><strong>Примітка:</strong> Стрілочні функції (arrow function expressions) є<em> експериментальною технологією,</em> частиною ECMAScript 6 proposal,  і поки що не підтримуються всіма браузерами.</p>
+</div>
+
+<p>Стрілочні функції (arrow function expression) мають коротший синтаксис і лексично прив'язують значення <code>this</code> (докладніше див. <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>):</p>
+
+<pre class="syntaxbox">([param[, param]]) =&gt; {
+   statements
+}
+
+param =&gt; expression
+</pre>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Назва аргументу. Якщо функція не має аргументів, це позначається скобками <code>()</code>. Якщо функція приймає тільки один аргумент, скобки можна опустити (як в <code>foo =&gt; 1</code>).</dd>
+ <dt><code>statements or expression</code></dt>
+ <dd>Декілька інструкції повинні бути в квадратних скобках. Якщо тіло функції містить тільки одну інструкцію, скобки можна опустити. Ця інструкція також є неявним зворотним значенням функції. </dd>
+</dl>
+
+<h3 id="The_Function_constructor">The <code>Function</code> constructor</h3>
+
+<div class="note">
+<p><strong>Примітка:</strong> Використання конструктора <code>Function</code> для створення  функцій не рекомендується, оскільки воно потребує перетворення тіла функції на строку. Це може перешкоджати деяким оптимізаціям  JS двіжка та створювати інші проблеми.</p>
+</div>
+
+<p class="syntaxbox">Як і всі інші об'єкти, об'єкти {{jsxref("Function")}} можна створювати за допомогою оператора  <code>new</code>:</p>
+
+<pre class="syntaxbox">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>)</pre>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>Zero or more names to be used by the function as formal parameters. Each must be a proper JavaScript identifier.</dd>
+</dl>
+
+<dl>
+ <dt><code>functionBody</code></dt>
+ <dd>Cтрока, що містить інструкції, що складають тіло функції.</dd>
+</dl>
+
+<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p>
+
+<h3 id="The_GeneratorFunction_constructor">The <code>GeneratorFunction</code> constructor</h3>
+
+<div class="note">
+<p><strong>Note:</strong> <code>GeneratorFunction</code> не є глобальним об'єктом, але може бути отриманий з generator function instance (докладніше див. {{jsxref("GeneratorFunction")}}):</p>
+</div>
+
+<div class="note">
+<p><strong>Примітка:</strong> Використання конструктора <code>GeneratorFunction</code> для створення  функцій не рекомендується, оскільки воно потребує перетворення тіла функції на строку. Це може перешкоджати деяким оптимізаціям  JS двіжка та створювати інші проблеми.</p>
+</div>
+
+<p>Як і всі інші об'єкти, об'єкти {{jsxref("GeneratorFunction")}}  можна створювати за допомогою оператора  <code>new</code>:</p>
+
+<pre class="syntaxbox">new GeneratorFunction (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>)
+</pre>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>Zero or more names to be used by the function as formal argument names. Each must be a string that conforms to the rules for a valid JavaScript identifier or a list of such strings separated with a comma; for example "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd>
+</dl>
+
+<dl>
+ <dt><code>functionBody</code></dt>
+ <dd>A string containing the JavaScript statements comprising the function definition.</dd>
+</dl>
+
+<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p>
+
+<h2 id="Параметри_функції">Параметри функції</h2>
+
+<div class="note">
+<p><strong>Примітка:</strong> Default and rest parameters є<em> експериментальною технологією,</em> частиною ECMAScript 6 proposal,  і поки що не підтримуються всіма браузерами.</p>
+</div>
+
+<h3 id="Default_parameters">Default parameters</h3>
+
+<p>Default function parameters allow formal parameters to be initialized with default values if no value or <code>undefined</code> is passed. For more details, see<a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters"> default parameters</a>.</p>
+
+<h3 id="Rest_parameters">Rest parameters</h3>
+
+<p>The rest parameter syntax allows to represent an indefinite number of arguments as an array. For more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a>.</p>
+
+<h2 id="Обєкт_arguments">Об'єкт <code>arguments</code></h2>
+
+<p>До аргументів функції можна звернутися всередині самої функції за допомогою об'єкта <code>arguments</code>. (Докладніше див. <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>)</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></code>: An array-like object containing the arguments passed to the currently executing function.</li>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code> {{Deprecated_inline}}: The currently executing function.</li>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/caller">arguments.caller</a></code> {{Obsolete_inline}} : The function that invoked the currently executing function.</li>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code>: The number of arguments passed to the function.</li>
+</ul>
+
+<h2 id="Defining_method_functions">Defining method functions</h2>
+
+<h3 id="Getter_and_setter_functions">Getter and setter functions</h3>
+
+<p>You can define getters (accessor methods) and setters (mutator methods) on any standard built-in object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></dt>
+ <dd>
+ <p>Binds an object property to a function that will be called when that property is looked up.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></dt>
+ <dd>Binds an object property to a function to be called when there is an attempt to set that property.</dd>
+</dl>
+
+<h3 id="Method_definition_syntax">Method definition syntax</h3>
+
+<div class="note">
+<p><strong>Note:</strong> <em>Method definitions are experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p>
+</div>
+
+<p>Starting with ECMAScript 6, you are able to define own methods in a shorter syntax, similar to the getters and setters. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a> for more information.</p>
+
+<pre class="brush: js">var obj = {
+  foo() {},
+  bar() {}
+};</pre>
+
+<h2 id="Function_constructor_vs._function_declaration_vs._function_expression"><code>Function</code> constructor vs. function declaration vs. function expression</h2>
+
+<p>Compare the following:</p>
+
+<p>A function defined with the <code>Function</code> constructor assigned to the variable <code>multiply:</code></p>
+
+<pre class="brush: js">function multiply(x, y) {
+   return x * y;
+}
+</pre>
+
+<p>A <em>function expression</em> of an anonymous function assigned to the variable <code>multiply:</code></p>
+
+<pre class="brush: js">var multiply = function(x, y) {
+   return x * y;
+};
+</pre>
+
+<p>A <em>function expression</em> of a function named <code>func_name</code> assigned to the variable <code>multiply:</code></p>
+
+<pre class="brush: js">var multiply = function func_name(x, y) {
+   return x * y;
+};
+</pre>
+
+<h3 id="Відмінності">Відмінності</h3>
+
+<p>All do approximately the same thing, with a few subtle differences:</p>
+
+<p>There is a distinction between the function name and the variable the function is assigned to. The function name cannot be changed, while the variable the function is assigned to can be reassigned. The function name can be used only within the function's body. Attempting to use it outside the function's body results in an error (or <code>undefined</code> if the function name was previously declared via a <code>var</code> statement). For example:</p>
+
+<pre class="brush: js">var y = function x() {};
+alert(x); // throws an error
+</pre>
+
+<p>The function name also appears when the function is serialized via <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toString"><code>Function</code>'s toString method</a>.</p>
+
+<p>On the other hand, the variable the function is assigned to is limited only by its scope, which is guaranteed to include the scope where the function is declared in.</p>
+
+<p>As the 4th example shows, the function name can be different from the variable the function is assigned to. They have no relation to each other.A function declaration also creates a variable with the same name as the function name. Thus, unlike those defined by function expressions, functions defined by function declarations can be accessed by their name in the scope they were defined in:</p>
+
+<p>A function defined by '<code>new Function'</code> does not have a function name. However, in the <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> JavaScript engine, the serialized form of the function shows as if it has the name "anonymous". For example, <code>alert(new Function())</code> outputs:</p>
+
+<pre class="brush: js">function anonymous() {
+}
+</pre>
+
+<p>Since the function actually does not have a name, <code>anonymous</code> is not a variable that can be accessed within the function. For example, the following would result in an error:</p>
+
+<pre class="brush: js">var foo = new Function("alert(anonymous);");
+foo();
+</pre>
+
+<p>Unlike functions defined by function expressions or by the <code>Function</code> constructor, a function defined by a function declaration can be used before the function declaration itself. For example:</p>
+
+<pre class="brush: js">foo(); // alerts FOO!
+function foo() {
+   alert('FOO!');
+}
+</pre>
+
+<p>A function defined by a function expression inherits the current scope. That is, the function forms a closure. On the other hand, a function defined by a <code>Function</code> constructor does not inherit any scope other than the global scope (which all functions inherit).</p>
+
+<p>Functions defined by function expressions and function declarations are parsed only once, while those defined by the <code>Function</code> constructor are not. That is, the function body string passed to the <code>Function</code> constructor must be parsed each and every time the constructor is called. Although a function expression creates a closure every time, the function body is not reparsed, so function expressions are still faster than "<code>new Function(...)</code>". Therefore the <code>Function</code> constructor should generally be avoided whenever possible.</p>
+
+<p>It should be noted, however, that function expressions and function declarations nested within the function generated by parsing a <code>Function constructor</code> 's string aren't parsed repeatedly. For example:</p>
+
+<pre class="brush: js">var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))();
+foo(); // The segment "function() {\n\talert(bar);\n}" of the function body string is not re-parsed.</pre>
+
+<p>A function declaration is very easily (and often unintentionally) turned into a function expression. A function declaration ceases to be one when it either:</p>
+
+<ul>
+ <li>becomes part of an expression</li>
+ <li>is no longer a "source element" of a function or the script itself. A "source element" is a non-nested statement in the script or a function body:</li>
+</ul>
+
+<pre class="brush: js">var x = 0;               // source element
+if (x == 0) {            // source element
+   x = 10;               // not a source element
+   function boo() {}     // not a source element
+}
+function foo() {         // source element
+   var y = 20;           // source element
+   function bar() {}     // source element
+   while (y == 10) {     // source element
+      function blah() {} // not a source element
+      y++;               // not a source element
+   }
+}
+</pre>
+
+<h3 id="Приклади">Приклади</h3>
+
+<pre class="brush: js">// function declaration
+function foo() {}
+
+// function expression
+(function bar() {})
+
+// function expression
+x = function hello() {}
+
+
+if (x) {
+   // function expression
+   function world() {}
+}
+
+
+// function declaration
+function a() {
+   // function declaration
+   function b() {}
+   if (0) {
+      // function expression
+      function c() {}
+   }
+}
+</pre>
+
+<h2 id="Conditionally_defining_a_function">Conditionally defining a function</h2>
+
+<p>Functions can be conditionally defined using either //function statements// (an allowed extension to the <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262 Edition 3</a> standard) or the <code>Function</code> constructor. Please note that such <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=609832">function statements are no longer allowed in ES5 strict</a>. Additionally, this feature does not work consistently cross-browser, so you should not rely on it.</p>
+
+<p>In the following script, the <code>zero</code> function is never defined and cannot be invoked, because '<code>if (0)</code>' evaluates its condition to false:</p>
+
+<pre class="brush: js">if (0) {
+   function zero() {
+      document.writeln("This is zero.");
+   }
+}
+</pre>
+
+<p>If the script is changed so that the condition becomes '<code>if (1)</code>', function <code>zero</code> is defined.</p>
+
+<p>Note: Although this kind of function looks like a function declaration, it is actually an expression (or statement), since it is nested within another statement. See differences between function declarations and function expressions.</p>
+
+<p>Note: Some JavaScript engines, not including <a href="/en-US/docs/SpiderMonkey">SpiderMonkey</a>, incorrectly treat any function expression with a name as a function definition. This would lead to <code>zero</code> being defined, even with the always-false <code>if</code> condition. A safer way to define functions conditionally is to define the function anonymously and assign it to a variable:</p>
+
+<pre class="brush: js">if (0) {
+   var zero = function() {
+      document.writeln("This is zero.");
+   }
+}
+</pre>
+
+<h2 id="Приклади_2">Приклади</h2>
+
+<h3 id="Returning_a_formatted_number">Returning a formatted number</h3>
+
+<p>The following function returns a string containing the formatted representation of a number padded with leading zeros.</p>
+
+<pre class="brush: js">// This function returns a string padded with leading zeros
+function padZeros(num, totalLen) {
+   var numStr = num.toString();             // Initialize return value as string
+   var numZeros = totalLen - numStr.length; // Calculate no. of zeros
+   for (var i = 1; i &lt;= numZeros; i++) {
+      numStr = "0" + numStr;
+   }
+   return numStr;
+}
+</pre>
+
+<p>The following statements call the padZeros function.</p>
+
+<pre class="brush: js">var result;
+result = padZeros(42,4); // returns "0042"
+result = padZeros(42,2); // returns "42"
+result = padZeros(5,4);  // returns "0005"
+</pre>
+
+<h3 id="Determining_whether_a_function_exists">Determining whether a function exists</h3>
+
+<p>You can determine whether a function exists by using the <code>typeof</code> operator. In the following example, a test is peformed to determine if the <code>window</code> object has a property called <code>noFunc</code> that is a function. If so, it is used; otherwise some other action is taken.</p>
+
+<pre class="brush: js"> if ('function' == typeof window.noFunc) {
+   // use noFunc()
+ } else {
+   // do something else
+ }
+</pre>
+
+<p>Note that in the <code>if</code> test, a reference to <code>noFunc</code> is used—there are no brackets "()" after the function name so the actual function is not called.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>New: Arrow functions, Generator functions, default parameters, rest parameters.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Generator function</td>
+   <td>39</td>
+   <td>{{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>26</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Arrow function</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Generator function</td>
+   <td>{{CompatUnknown}}</td>
+   <td>39</td>
+   <td>{{CompatGeckoMobile("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>26</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Arrow function</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Також_див.">Також див.</h2>
+
+<ul>
+ <li>{{jsxref("Statements/function", "function statement")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Statements/function*", "function* statement")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li>{{jsxref("Functions/Arrow_functions", "Arrow functions")}}</li>
+ <li>{{jsxref("Functions/Default_parameters", "Default parameters")}}</li>
+ <li>{{jsxref("Functions/rest_parameters", "Rest parameters")}}</li>
+ <li>{{jsxref("Functions/arguments", "Arguments object")}}</li>
+ <li>{{jsxref("Functions/get", "getter")}}</li>
+ <li>{{jsxref("Functions/set", "setter")}}</li>
+ <li>{{jsxref("Functions/Method_definitions", "Method definitions")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope" title="JavaScript/Reference/Functions_and_function_scope">Functions and function scope</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/functions/method_definitions/index.html b/files/uk/web/javascript/reference/functions/method_definitions/index.html
new file mode 100644
index 0000000000..3930fff286
--- /dev/null
+++ b/files/uk/web/javascript/reference/functions/method_definitions/index.html
@@ -0,0 +1,219 @@
+---
+title: Method definitions
+slug: Web/JavaScript/Reference/Functions/Method_definitions
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Об'єкт
+  - Синтаксис
+  - Скорочення
+  - функції
+translation_of: Web/JavaScript/Reference/Functions/Method_definitions
+---
+<div>{{JsSidebar("Functions")}}</div>
+
+<p>Починаючи з ECMAScript 2015, з'явився скорочений спосіб визначення методів для обєктів. Який допоможе вам простіше привязати функцію до імя методу обєкта.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/functions-definitions.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">var obj = {
+  <var>property</var>( <var>parameters…</var> ) {},
+  *<var>generator</var>( <var>parameters…</var> ) {},
+  async property( <var>parameters…</var> ) {},
+  async* generator( <var>parameters…</var> ) {},
+
+  // з обчисленими ключами:
+  [property]( <var>parameters…</var> ) {},
+  *[generator]( <var>parameters…</var> ) {},
+  async [property]( <var>parameters…</var> ) {},
+
+  // порівняйте getter/setter синтаксис:
+  get <var>property</var>() {},
+  set <var>property</var>(<var>value</var>) {}
+};
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Скорочений синтаксис подібний до синтаксису <a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> і <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a> оголошенних в ECMAScript 2015.</p>
+
+<p>Отже, цей код:</p>
+
+<pre class="brush: js notranslate">var obj = {
+  foo: function() {
+    /* код */
+  },
+  bar: function() {
+    /* код */
+  }
+};
+</pre>
+
+<p>Ви здатні скоротити до:</p>
+
+<pre class="brush: js notranslate">var obj = {
+  foo() {
+    /* код */
+  },
+  bar() {
+    /* код */
+  }
+};
+
+</pre>
+
+<h3 id="Генераторні_методи">Генераторні методи</h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">Генераторні методи</a> також можуть бути визначенні за допомогою скороченного синтаксису. Користуючить ними:</p>
+
+<ul>
+ <li>зірочка (*)  повинна бути перед іменем генераторного методу. Тобто, <code>* g(){}</code> - це працюватиме, <code>g *(){}</code> - це ні.</li>
+ <li>всі не генераторні визначення методів не можуть використовувати ключове слово <code>yield</code>. Це означає, що <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">застарілі генераторні функції</a> також не працюватимуть і викинуть {{jsxref("SyntaxError")}}. Завжди використовуйте <code>yield</code> разом із зірочкою (*).</li>
+</ul>
+
+<pre class="brush: js;highlight[12] notranslate">// Використовуючи названу властивіть
+var obj2 = {
+  g: function* () {
+    var index = 0;
+    while (true)
+      yield index++;
+  }
+};
+
+// Ідентичний обєкт використовуючи скорочений синтаксис
+var obj2 = {
+  * g() {
+    var index = 0;
+    while (true)
+      yield index++;
+  }
+};
+
+var it = obj2.g();
+console.log(it.next().value); // 0
+console.log(it.next().value); // 1</pre>
+
+<h3 id="Async_методи">Async методи</h3>
+
+<p>{{jsxref("Statements/async_function", "Async methods", "", 1)}} також можуть бути визначенні використовуючи скорочення.</p>
+
+<pre class="brush: js;highlight[12] notranslate">// Використовуючи названу властивіть
+var obj3 = {
+  f: async function () {
+    await some_promise;
+  }
+};
+
+// Ідентичний обєкт використовуючи скорочений синтаксис
+var obj3 = {
+  async f() {
+    await some_promise;
+  }
+};
+</pre>
+
+<h3 id="Async_генераторні_методи">Async генераторні методи</h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">Генераторні методи</a> також можуть бути {{jsxref("Statements/async_function", "async", "", 1)}}.</p>
+
+<pre class="brush: js notranslate">var obj4 = {
+  f: async function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+  }
+};
+
+// Ідентичний обєкт використовуючи скорочений синтаксис
+var obj4 = {
+  async* f() {
+   yield 1;
+   yield 2;
+   yield 3;
+  }
+};</pre>
+
+<h3 id="Визначенні_методи_за_допомогою_скорочення_-_не_є_конструкторами">Визначенні методи за допомогою скорочення - не є конструкторами</h3>
+
+<p>Любі визначенні методи за допомогою скорочення не є конструктором і викинуть {{jsxref("TypeError")}}, якщо ви попробуєте створити <span class="tlid-translation translation" lang="uk"><span title="">екземпляр обєкту за допомогою них</span></span>.</p>
+
+<pre class="brush: js example-bad notranslate">var obj = {
+  method() {}
+};
+new obj.method; // TypeError: obj.method is not a constructor
+
+var obj = {
+  * g() {}
+};
+new obj.g; // TypeError: obj.g is not a constructor (changed in ES2016)
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Базові_випадки">Базові випадки</h3>
+
+<pre class="brush: js;highlight[3] notranslate">var obj = {
+  a: 'foo',
+  b() { return this.a; }
+};
+console.log(obj.b()); // "foo"
+</pre>
+
+<h3 id="Обчисленні_імена_властивостей">Обчисленні імена властивостей</h3>
+
+<p>Скороченний синтаксис також підтримує обчисленні імена властивостей.</p>
+
+<pre class="brush: js;highlight[4] notranslate">var bar = {
+  foo0: function() { return 0; },
+  foo1() { return 1; },
+  ['foo' + 2]() { return 2; }
+};
+
+console.log(bar.foo0()); // 0
+console.log(bar.foo1()); // 1
+console.log(bar.foo2()); // 2</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td>Changed that generator methods should also not have a [[Construct]] trap and will throw when used with <code>new</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_браузерів">Підтримка браузерів</h2>
+
+
+
+<p>{{Compat("javascript.functions.method_definitions")}}</p>
+
+<h2 id="Дивитися_також"><span class="tlid-translation translation" lang="uk"><span title="">Дивитися також</span></span></h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></code></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/functions/set/index.html b/files/uk/web/javascript/reference/functions/set/index.html
new file mode 100644
index 0000000000..b26e0e2824
--- /dev/null
+++ b/files/uk/web/javascript/reference/functions/set/index.html
@@ -0,0 +1,152 @@
+---
+title: сетер
+slug: Web/JavaScript/Reference/Functions/set
+tags:
+  - ECMAScript 2015
+  - ECMAScript 5
+  - JavaScript
+  - set
+  - функції
+translation_of: Web/JavaScript/Reference/Functions/set
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>Оператор <strong><code>set</code></strong> прив'язує властивість об'єкта до функції, яка буде викликана під час спроби присвоїти значення даній властивості.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/functions-setter.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">{set <em>prop</em>(<em>val</em>) { . . . }}
+{set [expression](<em>val</em>) { . . . }}</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><em><code>prop</code></em></dt>
+ <dd>Ім'я властивості, котра має бути прив'язана до даної функції.</dd>
+</dl>
+
+<dl>
+ <dt><em><code>val</code></em></dt>
+ <dd>Псевдонім змінної, що містить значення, для якого виконується спроба присвоїти його властивості <em><code>prop</code></em>.</dd>
+ <dt><em>expression</em></dt>
+ <dd>Починаючи від ECMAScript 2015, можна також використовувати вираз для обчислюваного імені властивості, до якої буде прив'язана дана функція.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>У JavaScript сетер можна використати для виконання функції під час здійснення спроби змінити певну властивість. Найчастіше сетери використовуються у поєднанні з ґетерами для створення свого роду псевдовластивостей. Не можна водночас мати сетера на властивості, яка містить фактичне значення.</p>
+
+<p>Зауважте особливість використання синтаксису <code>set</code>:</p>
+
+<div>
+<ul>
+ <li>Він може мати ідентифікатор, який є або числом, або рядком;</li>
+ <li>Він повинен мати рівно один параметр (дивіться більше інформації у статті <a href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow noopener">Несумісна зміна <abbr title="ECMAScript 5th edition">ES5</abbr>: літеральні функції гетерів та сетерів тепер повинні мати рівно нуль аргументів та один аргумент</a>);</li>
+ <li>Він не повинен з'являтись у об'єктному літералі з іншим сетером чи введеними даними для тієї ж властивості.<br>
+  ( <code>{ set x(v) { }, set x(v) { } }</code> та <code>{ x: ..., set x(v) { } }</code> заборонені)</li>
+</ul>
+</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Визначення_сетерів_на_нових_обєктах_у_обєктних_ініціалізаторах">Визначення сетерів на нових об'єктах у об'єктних ініціалізаторах</h3>
+
+<p>Наступний код визначає псевдовластивість <code>current</code> об'єкта <code>language</code>. Коли <code>current</code> присвоюється значення, це змінює <code>log</code> на таке саме значення:</p>
+
+<pre class="brush: js notranslate">const language = {
+  set current(name) {
+    this.log.push(name);
+  },
+  log: []
+}
+
+language.current = 'EN';
+console.log(language.log); // ['EN']
+
+language.current = 'UA';
+console.log(language.log); // ['EN', 'UA']
+</pre>
+
+<p>Зверніть увагу, що  властивість <code>current</code> не визначена, і будь-які спроби звернутись до неї повернуть значення <code>undefined</code>.</p>
+
+<h3 id="Видалення_сетера_оператором_delete">Видалення сетера оператором <code>delete</code></h3>
+
+<p>Якщо вам потрібно прибрати сетер, ви можете його просто {{jsxref("Operators/delete", "видалити")}}:</p>
+
+<pre class="brush: js notranslate">delete o.current;
+</pre>
+
+<h3 id="Визначення_сетера_на_існуючому_обєкті_за_допомогою_defineProperty">Визначення сетера на існуючому об'єкті за допомогою <code>defineProperty</code></h3>
+
+<p>Щоб додати сетер до <em>існуючого</em> об'єкта, використовуйте {{jsxref("Object.defineProperty()")}}.</p>
+
+<pre class="brush: js notranslate">const o = {a: 0};
+
+Object.defineProperty(o, 'b', {
+ set: function(x) { this.a = x / 2; }
+});
+
+o.b = 10;
+// Запускає сетер, який присвоює 10 / 2 (5) властивості 'a'
+
+console.log(o.a)
+// 5</pre>
+
+<h3 id="Використання_обчислюваного_імені_властивості">Використання обчислюваного імені властивості</h3>
+
+<pre class="brush: js notranslate">const expr = 'foo';
+
+const obj = {
+  baz: 'bar',
+  set [expr](v) { this.baz = v; }
+};
+
+console.log(obj.baz);
+// "bar"
+
+obj.foo = 'baz';
+// запустити сетер
+
+console.log(obj.baz);
+// "baz"
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.functions.set")}}</p>
+
+<div id="compat-mobile"></div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Functions/get">гетер</a></li>
+ <li>{{jsxref("Operators/delete", "delete")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.__defineGetter__", "__defineGetter__")}}</li>
+ <li>{{jsxref("Object.__defineSetter__", "__defineSetter__")}}</li>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Working_with_Objects#Визначення_гетерів_та_сетерів">Визначення гетерів та сетерів</a> у посібнику JavaScript</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/functions/решта_параметрів/index.html b/files/uk/web/javascript/reference/functions/решта_параметрів/index.html
new file mode 100644
index 0000000000..f117aecc60
--- /dev/null
+++ b/files/uk/web/javascript/reference/functions/решта_параметрів/index.html
@@ -0,0 +1,211 @@
+---
+title: Залишкові параметри
+slug: Web/JavaScript/Reference/Functions/решта_параметрів
+tags:
+  - JavaScript
+  - Rest
+  - параметри
+  - функції
+translation_of: Web/JavaScript/Reference/Functions/rest_parameters
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<div>Синтаксис <strong>залишкових параметрів</strong> дозволяє представити невизначену кількість аргументів у вигляді масиву.</div>
+
+<div></div>
+
+<p>{{EmbedInteractiveExample("pages/js/functions-restparameters.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">function f(a, b, ...theArgs) {
+  // ...
+}
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Перед останнім параметром функції може стояти <code>...</code>, в результаті решта аргументів (наданих користувачем) будуть розміщені у  "стандартному" масиві JavaScript.</p>
+
+<p>Лише останній параметр може бути "залишковим".</p>
+
+<pre class="brush: js notranslate">function myFun(a, b, ...manyMoreArgs) {
+  console.log("a", a);
+  console.log("b", b);
+  console.log("manyMoreArgs", manyMoreArgs);
+}
+
+myFun("один", "два", "три", "чорити", "п'ять", "шість");
+
+// Виведе:
+// a, один
+// b, два
+// manyMoreArgs, ["три", "чотири", "п'ять", "шість"]</pre>
+
+<h3 id="Різниця_між_залишковими_параметрами_та_обєктом_arguments">Різниця між залишковими параметрами та об'єктом <code>arguments</code></h3>
+
+<p>Існують три основні відмінності між залишковими параметрами та об'єктом {{jsxref("Functions/arguments", "arguments")}}:</p>
+
+<ul>
+ <li>залишковими є лише ті параметри, яким не надали окремого імені, в той час, як об'єкт <code>arguments</code> містить усі аргументи, передані у функцію;</li>
+ <li>об'єкт <code>arguments</code> не є справжнім масивом, в той час, як залишкові параметри є екземплярами {{jsxref("Global_Objects/Array", "Array")}}, тобто, методи на кшталт {{jsxref("Array.sort", "sort")}}, {{jsxref("Array.map", "map")}}, {{jsxref("Array.forEach", "forEach")}} чи {{jsxref("Array/pop", "pop")}} можуть викликатись безпосередньо на них;</li>
+ <li>об'єкт <code>arguments</code> має також власну, специфічну функціональність (наприклад, властивість <code>callee</code>).</li>
+</ul>
+
+<h3 id="Від_arguments_до_масиву">Від arguments до масиву</h3>
+
+<p>Залишкові параметри були запроваджені, щоб зменшити кількість шаблонного коду, спричиненого об'єктом arguments.</p>
+
+<pre class="brush: js notranslate">// До появи залишкових параметрів, "arguments" можна було перетворити на масив таким чином:
+
+function f(a, b) {
+
+  let normalArray = Array.prototype.slice.call(arguments);
+  // -- або --
+  let normalArray = [].slice.call(arguments);
+  // -- або --
+  let normalArray = Array.from(arguments);
+
+  let first = normalArray.shift(); // OK, вертає перший аргумент
+  let first = arguments.shift(); // ERROR (arguments не є справжнім масивом)
+}
+
+// Тепер ми легко можемо отримати звичайний масив за допомогою залишкових параметрів
+
+function f(...args) {
+  let normalArray = args;
+  let first = normalArray.shift(); // OK, вертає перший аргумент
+}</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_залишкових_параметрів">Використання залишкових параметрів</h3>
+
+<p>У цьому прикладі перший аргумент відповідає <code>"a"</code>, а другий <code>"b"</code>, отже, ці іменовані аргументи можуть використовуватись як звичайні.</p>
+
+<p>Однак, третій аргумент, <code>"manyMoreArgs"</code>, буде масивом, який містить 3-й, 4-й, 5-й, 6-й ... n-й -- стільки аргументів, скільки надасть користувач.</p>
+
+<pre class="brush: js notranslate">function myFun(a, b, ...manyMoreArgs) {
+  console.log("a", a);
+  console.log("b", b);
+  console.log("manyMoreArgs", manyMoreArgs);
+}
+
+myFun("один", "два", "три", "чотири", "п'ять", "шість");
+
+// a, один
+// b, два
+// manyMoreArgs, ["три", "чотири", "п'ять", "шість"]</pre>
+
+<p>Нижче... хоча тут всього одне значення, останній аргумент все одно додається у масив.</p>
+
+<pre class="brush: js notranslate">// використовуємо ту саму функцію з наведеного вище прикладу
+
+myFun("один", "два", "три");
+
+// a, один
+// b, два
+// manyMoreArgs, ["три"]</pre>
+
+<p>Нижче... третій аргумент не був переданий, але "manyMoreArgs" все одно є масивом (хоча й порожнім).</p>
+
+<pre class="brush: js notranslate">// використовуємо ту саму функцію з наведеного вище прикладу
+
+myFun("один", "два");
+
+// a, один
+// b, два
+// manyMoreArgs, []</pre>
+
+<h3 id="Кількість_аргументів">Кількість аргументів</h3>
+
+<p>Оскільки <code>theArgs</code> є масивом, кількість його елементів надається властивістю <code>length</code>:</p>
+
+<pre class="brush: js notranslate">function fun1(...theArgs) {
+  console.log(theArgs.length);
+}
+
+fun1()         // 0
+fun1(5)        // 1
+fun1(5, 6, 7)  // 3</pre>
+
+<h3 id="Звичайний_параметр_та_залишкові_параметри">Звичайний параметр та залишкові параметри</h3>
+
+<p>У наступному прикладі залишковий параметр використовується, щоб зібрати усі аргументи після першого у масиві. Далі кожен з них помножується на перший параметр, і масив повертається:</p>
+
+<pre class="brush: js notranslate">function multiply(multiplier, ...theArgs) {
+  return theArgs.map(function(element) {
+    return multiplier * element;
+  });
+}
+
+let arr = multiply(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]</pre>
+
+<h3 id="Використання_з_обєктом_arguments">Використання з об'єктом arguments</h3>
+
+<p>Методи <code>Array</code> можуть використовуватись на залишкових параметрах, але не на об'єкті <code>arguments</code>:</p>
+
+<pre class="brush: js notranslate">function sortRestArgs(...theArgs) {
+  var sortedArgs = theArgs.sort();
+  return sortedArgs;
+}
+
+console.log(sortRestArgs(5, 3, 7, 1)); // виводить [1, 3, 5, 7]
+
+function sortArguments() {
+  var sortedArgs = arguments.sort();
+  return sortedArgs; // цього ніколи не станеться
+}
+
+// викидає TypeError: arguments.sort is not a function
+console.log(sortArguments(5, 3, 7, 1));
+</pre>
+
+<p>Щоб скористатись методами <code>Array</code> на об'єкті <code>arguments</code>, він спочатку має бути перетворений на справжній масив.</p>
+
+<pre class="brush: js notranslate">function sortArguments() {
+  var args = Array.from(arguments);
+  var sortedArgs = args.sort();
+  return sortedArgs;
+}
+console.log(sortArguments(5, 3, 7, 1)); // [1, 3, 5, 7]</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("javascript.functions.rest_parameters")}}</p>
+</div>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Spread_syntax" title="spread operator">Оператор розкладу</a> (також ‘<code>...</code>’)</li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments">Об'єкт arguments</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array">Array</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Functions" title="Functions and function scope">Функції</a></li>
+ <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters">Original proposal at ecmascript.org</a></li>
+ <li><a class="external" href="http://javascriptweblog.wordpress.com/2011/01/18/javascripts-arguments-object-and-beyond/">JavaScript arguments object and beyond</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Деструктуризація">Деструктуризаційне присвоєння</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/functions/стрілкові_функції/index.html b/files/uk/web/javascript/reference/functions/стрілкові_функції/index.html
new file mode 100644
index 0000000000..f1638d8d84
--- /dev/null
+++ b/files/uk/web/javascript/reference/functions/стрілкові_функції/index.html
@@ -0,0 +1,362 @@
+---
+title: Стрілкові функції
+slug: Web/JavaScript/Reference/Functions/Стрілкові_функції
+translation_of: Web/JavaScript/Reference/Functions/Arrow_functions
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p><strong>Вирази стрілкових функцій </strong>мають більш короткий синтаксис, аніж <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">функціональні вирази</a> і не мають свого власного <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a>, і <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a>. Вони не можуть бути використані як конструктор і завжди анонімні.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Basic_Syntax">Basic Syntax</h3>
+
+<pre class="syntaxbox"><strong>(<em></em></strong><em>параметр1</em><strong><em></em></strong>,<em>параметр2</em>, …, <em>параметрN</em><strong>) =&gt; {</strong> <em>оператори</em> <strong>}</strong>
+<strong>(</strong><em>параметр1</em>, <em>параметр2</em>, …, <em>параметрN</em><strong>) =&gt;</strong> <em>вираз</em>
+// еквівалентно до запису: <strong>(</strong><em>параметр1</em>,<em>параметр2</em>, …, <em>параметрN</em><strong>)</strong> =&gt; { return <em>вираз</em>; }
+
+// Якщо у функції тільки один параметр, то дужки не обов'язкові:
+<em>(параметр)</em> <strong>=&gt; {</strong> <em>оператори</em> <strong>}</strong>
+<em>параметр</em> <strong>=&gt;</strong> { <em>оператори </em>}
+<em>параметр</em> <strong>=&gt;</strong> <em>вираз</em>
+
+
+// Список параметрів для функції без параметрів повинен бути записаний у парі фігурних дужок.
+() =&gt; { <em>оператори</em> }
+</pre>
+
+<h3 id="Advanced_Syntax">Advanced Syntax</h3>
+
+<pre class="syntaxbox">// Візьміть тіло функції у дужки, якщо вона повертає об'єкт
+<em>params</em> =&gt; ({<em>foo: bar</em>})
+
+// Залишкові параметри та параметри за замовчуванням підтримуються як і в звичайних функціях
+(<em>параметр1</em>, <em>параметр2</em>, <strong>...залишкові параметри</strong>) =&gt; { <em>оператори</em> }
+(<em>параметр1</em> <strong>= значення_за_замовчуванням</strong>, <em>параметр2</em>, …, параметрN <strong>= значення_за_замовчуваннямN</strong>) =&gt; { <em>оператори</em> }
+
+// Деструктиризація в списку параметрів також підтримується:
+let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) =&gt; a + b + c;
+f();
+// 6
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Див. також <a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 In Depth: Arrow functions" on hacks.mozilla.org</a>.</p>
+
+<p>Появу стрілкових функцій зумовили два фактори: можливість більш короткого запису і випадки, коли сутність <code>this</code> не обов'язкова.</p>
+
+<h3 id="Коротший_запис">Коротший запис</h3>
+
+<pre class="brush: js">var materials = [
+  'Hydrogen',
+  'Helium',
+  'Lithium',
+  'Beryllium'
+];
+
+materials.<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(function(material) {
+  return material.length;
+}); // [8, 6, 7, 9]
+
+materials.<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>((material) =&gt; {
+  return material.length;
+}); // [8, 6, 7, 9]
+
+materials.<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(material =&gt; material.length); // [8, 6, 7, 9]
+</pre>
+
+<h3 id="Спільний_this">Спільний <code>this</code></h3>
+
+<p>До появи стрілкових функцій кожна нова функція мала власне значення <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> :</p>
+
+<ul>
+ <li>новий об'єкт у випадку конструктора</li>
+ <li>undefined для викликів функції в <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a></li>
+ <li>контекст об'єкту при виклику функції як методу об'єкту</li>
+ <li>і т. ін.</li>
+</ul>
+
+<p>Це все було далеким від ідеалів об'єктно-орієнтованого програмування.</p>
+
+<pre class="brush: js">function Person() {
+  // The Person() constructor defines `this` as an instance of itself.
+  this.age = 0;
+
+  setInterval(function growUp() {
+    // In non-strict mode, the growUp() function defines `this`
+    // as the global object, which is different from the `this`
+    // defined by the Person() constructor.
+    this.age++;
+  }, 1000);
+}
+
+var p = new Person();</pre>
+
+<p>В ECMAScript 3/5 ця проблема вирішувалась шляхом присвоєння значення <code>this</code> змінній, оголошеній всередині функції.</p>
+
+<pre class="brush: js">function Person() {
+  var that = this;
+  that.age = 0;
+
+  setInterval(function growUp() {
+    // The callback refers to the `that` variable of which
+    // the value is the expected object.
+    that.age++;
+  }, 1000);
+}</pre>
+
+<p>Або можна створити <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bound function</a> (прив'язану функцію), в яку передати значення <code>this</code> для функції (функція <code>growUp()</code> в прикладі вище).</p>
+
+<p>Стрілкова функція не має власного контексту <code>this</code>, а використовує <code>this</code> з контексту вище. Тому в коді, наведеному нижче, <code>this</code> для функції <code>setInterval</code> має таке ж значення, як і <code>this</code> зовнішньої функції:</p>
+
+<pre class="brush: js">function Person(){
+  this.age = 0;
+
+  setInterval(() =&gt; {
+    this.age++; // |this| properly refers to the person object
+  }, 1000);
+}
+
+var p = new Person();</pre>
+
+<h4 id="Relation_with_strict_mode">Relation with strict mode</h4>
+
+<p>Given that <code>this</code> comes from the surrounding lexical context, <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> rules with regard to <code>this</code> are ignored.</p>
+
+<pre class="brush: js">var f = () =&gt; { 'use strict'; return this; };
+f() === window; // or the global object</pre>
+
+<p>All other strict mode rules apply normally.</p>
+
+<h4 id="Invoked_through_call_or_apply">Invoked through call or apply</h4>
+
+<p>Since arrow functions do not have their own <code>this</code>, the methods <code>call()</code> or <code>apply()</code> can only pass in parameters. <code>thisArg</code> is ignored.</p>
+
+<pre class="brush: js">var adder = {
+  base: 1,
+
+  add: function(a) {
+    var f = v =&gt; v + this.base;
+    return f(a);
+  },
+
+  addThruCall: function(a) {
+    var f = v =&gt; v + this.base;
+    var b = {
+      base: 2
+    };
+
+    return f.call(b, a);
+  }
+};
+
+console.log(adder.add(1));         // This would log to 2
+console.log(adder.addThruCall(1)); // This would log to 2 still</pre>
+
+<h3 id="No_binding_of_arguments">No binding of <code>arguments</code></h3>
+
+<p>Arrow functions do not have their own <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code> object</a>. Thus, in this example, <code>arguments</code> is simply a reference to the arguments of the enclosing scope:</p>
+
+<pre class="brush: js">var arguments = [1, 2, 3];
+var arr = () =&gt; arguments[0];
+
+arr(); // 1
+
+function foo(n) {
+  var f = () =&gt; arguments[0] + n; // <em>foo</em>'s implicit arguments binding. arguments[0] is n
+  return f(10);
+}
+
+foo(1); // 2</pre>
+
+<p>In most cases, using <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a> is a good alternative to using an <code>arguments</code> object.</p>
+
+<pre class="brush: js">function foo(n) {
+  var f = (...args) =&gt; args[0] + n;
+  return f(10);
+}
+
+foo(1); // 11</pre>
+
+<h3 id="Arrow_functions_used_as_methods">Arrow functions used as methods</h3>
+
+<p>As stated previously, arrow function expressions are best suited for non-method functions. Let's see what happens when we try to use them as methods:</p>
+
+<pre class="brush: js">'use strict';
+var obj = {
+  i: 10,
+  b: () =&gt; console.log(this.i, this),
+  c: function() {
+    console.log(this.i, this);
+  }
+}
+obj.b(); // prints undefined, Window {...} (or the global object)
+obj.c(); // prints 10, Object {...}</pre>
+
+<p>Arrow functions do not have their own <code>this</code>. Another example involving {{jsxref("Object.defineProperty()")}}:</p>
+
+<pre class="brush: js">'use strict';
+var obj = {
+  a: 10
+};
+
+Object.defineProperty(obj, 'b', {
+  get: () =&gt; {
+    console.log(this.a, typeof this.a, this);
+    return this.a + 10; // represents global object 'Window', therefore 'this.a' returns 'undefined'
+  }
+});
+</pre>
+
+<h3 id="Use_of_the_new_operator">Use of the <code>new</code> operator</h3>
+
+<p>Arrow functions cannot be used as constructors and will throw an error when used with <code>new</code>.</p>
+
+<pre class="brush: js">var Foo = () =&gt; {};
+var foo = new Foo(); // TypeError: Foo is not a constructor</pre>
+
+<h3 id="Use_of_prototype_property">Use of <code>prototype</code> property</h3>
+
+<p>Arrow functions do not have a <code>prototype</code> property.</p>
+
+<pre class="brush: js">var Foo = () =&gt; {};
+console.log(Foo.prototype); // undefined
+</pre>
+
+<h3 id="Use_of_the_yield_keyword">Use of the <code>yield</code> keyword</h3>
+
+<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code> keyword may not be used in an arrow function's body (except when permitted within functions further nested within it). As a consequence, arrow functions cannot be used as generators.</p>
+
+<h2 id="Тіло_функції">Тіло функції</h2>
+
+<p>Arrow functions can have either a "concise body" or the usual "block body".</p>
+
+<p>In a concise body, only an expression is specified, which becomes the explicit return value. In a block body, you must use an explicit <code>return</code> statement.</p>
+
+<pre class="brush: js">var func = x =&gt; x * x;
+// concise body syntax, implied "return"
+
+var func = (x, y) =&gt; { return x + y; };
+// with block body, explicit "return" needed
+</pre>
+
+<h2 id="Повернення_літерала_обєкта">Повернення літерала об'єкта</h2>
+
+<p>Keep in mind that returning object literals using the concise body syntax <code>params =&gt; {object:literal}</code> will not work as expected.</p>
+
+<pre class="brush: js">var func = () =&gt; { foo: 1 };
+// Calling func() returns undefined!
+
+var func = () =&gt; { foo: function() {} };
+// SyntaxError: function statement requires a name</pre>
+
+<p>This is because the code inside braces ({}) is parsed as a sequence of statements (i.e. <code>foo</code> is treated like a label, not a key in an object literal).</p>
+
+<p>Remember to wrap the object literal in parentheses.</p>
+
+<pre class="brush: js">var func = () =&gt; ({foo: 1});</pre>
+
+<h2 id="Розрив_рядка">Розрив рядка</h2>
+
+<p>An arrow function cannot contain a line break between its parameters and its arrow.</p>
+
+<pre class="brush: js">var func = ()
+           =&gt; 1;
+// SyntaxError: expected expression, got '=&gt;'</pre>
+
+<h2 id="Порядок_розбору">Порядок розбору</h2>
+
+<p>Although the arrow in an arrow function is not an operator, arrow functions have special parsing rules that interact differently with <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">operator precedence</a> compared to regular functions.</p>
+
+<pre class="brush: js">let callback;
+
+callback = callback || function() {}; // ok
+
+callback = callback || () =&gt; {};
+// SyntaxError: invalid arrow-function arguments
+
+callback = callback || (() =&gt; {});    // ok
+</pre>
+
+<h2 id="Ще_приклади">Ще приклади</h2>
+
+<pre class="brush: js">// An empty arrow function returns undefined
+let empty = () =&gt; {};
+
+(() =&gt; 'foobar')();
+// Returns "foobar"
+// (this is an Immediately Invoked Function Expression
+// see 'IIFE' in glossary)
+
+var simple = a =&gt; a &gt; 15 ? 15 : a;
+simple(16); // 15
+simple(10); // 10
+
+let max = (a, b) =&gt; a &gt; b ? a : b;
+
+// Easy array filtering, mapping, ...
+
+var arr = [5, 6, 13, 0, 1, 18, 23];
+
+var sum = arr.reduce((a, b) =&gt; a + b);
+// 66
+
+var even = arr.filter(v =&gt; v % 2 == 0);
+// [6, 0, 18]
+
+var double = arr.map(v =&gt; v * 2);
+// [10, 12, 26, 0, 2, 36, 46]
+
+// More concise promise chains
+promise.then(a =&gt; {
+  // ...
+}).then(b =&gt; {
+  // ...
+});
+
+// Parameterless arrow functions that are visually easier to parse
+setTimeout( () =&gt; {
+  console.log('I happen sooner');
+  setTimeout( () =&gt; {
+    // deeper code
+    console.log('I happen later');
+  }, 1);
+}, 1);
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкова виознака.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div>
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.functions.arrow_functions")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 In Depth: Arrow functions" on hacks.mozilla.org</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/@@iterator/index.html b/files/uk/web/javascript/reference/global_objects/array/@@iterator/index.html
new file mode 100644
index 0000000000..3ab9407b4e
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/@@iterator/index.html
@@ -0,0 +1,116 @@
+---
+title: 'Array.prototype[@@iterator]()'
+slug: Web/JavaScript/Reference/Global_Objects/Array/@@iterator
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Ітератор
+  - Масив
+  - метод
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@iterator
+---
+<div>{{JSRef}}</div>
+
+<p>Початковим значенням властивості <code><strong>@@iterator</strong></code> є та сама функція, яка є початковим значенням властивості {{jsxref("Array.prototype.values()", "values()")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>[Symbol.iterator]()</code></pre>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Початкове значення, що надається <strong>ітератором</strong> {{jsxref("Array.prototype.values()", "values()")}}. За замовчуванням, використання <code>arr[Symbol.iterator]</code> поверне функцію {{jsxref("Array.prototype.values()", "values()")}}.</p>
+
+<h2 id="Приклад">Приклад</h2>
+
+<h3 id="Перебір_за_допомогою_циклу_for...of">Перебір за допомогою циклу <code>for...of</code></h3>
+
+<pre class="brush: js">var arr = ['a', 'b', 'c', 'd', 'e'];
+var eArr = arr[Symbol.iterator]();
+// ваш переглядач має підтримувати цикл for..of
+// та змінні, оголошені через let, у циклах for
+// також можна використати const та var
+for (let letter of eArr) {
+  console.log(letter);
+}
+</pre>
+
+<h3 id="Альтернативний_перебір">Альтернативний перебір</h3>
+
+<pre class="brush: js">var arr = ['а', 'б', 'в', 'г', 'ґ'];
+var eArr = arr[Symbol.iterator]();
+console.log(eArr.next().value); // а
+console.log(eArr.next().value); // б
+console.log(eArr.next().value); // в
+console.log(eArr.next().value); // г
+console.log(eArr.next().value); // ґ
+</pre>
+
+<h3 id="Випадок_використання_позначення_через_квадратні_дужки">Випадок використання позначення через квадратні дужки</h3>
+
+<p>Використовувати цей синтаксис замість позначення через крапку (<code>Array.prototype.values()</code>) зручно, коли ви не знаєте заздалегідь, яким буде об'єкт. Якщо ви маєте функцію, що приймає ітератор та перебирає значення, але не знаєте, чи матиме цей об'єкт метод [Iterable].prototype.values. Це може бути вбудований об'єкт, такий як <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/String/@@iterator">String</a>, або користувацький об'єкт.</p>
+
+<pre class="brush: js">function logIterable(it) {
+  var iterator = it[Symbol.iterator]();
+  // ваш переглядач має підтримувати цикл for..of
+  // та змінні, оголошені через let, у циклах for
+  // також можна використати const та var
+  for (let letter of iterator) {
+      console.log(letter);
+  }
+}
+
+// Масив
+logIterable(['а', 'б', 'в']);
+// а
+// б
+// в
+
+// рядок
+logIterable('абв');
+// а
+// б
+// в</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Array.@@iterator")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.keys()")}}</li>
+ <li>{{jsxref("Array.prototype.entries()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Array.prototype.values()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/@@species/index.html b/files/uk/web/javascript/reference/global_objects/array/@@species/index.html
new file mode 100644
index 0000000000..df18a2a627
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/@@species/index.html
@@ -0,0 +1,72 @@
+---
+title: 'get Array[@@species]'
+slug: Web/JavaScript/Reference/Global_Objects/Array/@@species
+tags:
+  - Array
+  - JavaScript
+  - Масив
+  - метод
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@species
+---
+<div>{{JSRef}}</div>
+
+<p>Властивість-аксесор <code><strong>Array[@@species]</strong></code> повертає конструктор <code>Array</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">Array[Symbol.species]
+</pre>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Конструктор {{jsxref("Array")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Властивість-аксесор <code>species</code> повертає конструктор за замовчуванням для об'єктів <code>Array</code>. Конструктори підкласів можуть його заміщувати, змінюючи присвоєння конструктора.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Species_у_звичайних_обєктах">Species у звичайних об'єктах</h3>
+
+<p>Властивість <code>species</code> повертає функцію-конструктор за замовчуванням, для об'єктів <code>Array</code> це конструктор <code>Array</code>:</p>
+
+<pre class="brush: js notranslate">Array[Symbol.species]; // функція Array()</pre>
+
+<h3 id="Species_у_похідних_обєктах">Species у похідних об'єктах</h3>
+
+<p>У похідному об'єкті колекцій (наприклад, у вашому користувацькому масиві <code>MyArray</code>), <code>species</code> для <code>MyArray</code> поверне конструктор <code>MyArray</code>. Однак, ви, можливо, захочете переписати цю поведінку, щоб повертати батьківські об'єкти <code>Array</code> у методах свого похідного класу:</p>
+
+<pre class="brush: js notranslate">class MyArray extends Array {
+  // Переписати Symbol.species у MyArray на батьківський конструктор Array
+  static get [Symbol.species]() { return Array; }
+}</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-array-@@species', 'get Array [ @@species ]')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.@@species")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Symbol.species")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/@@unscopables/index.html b/files/uk/web/javascript/reference/global_objects/array/@@unscopables/index.html
new file mode 100644
index 0000000000..2ded6c458e
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/@@unscopables/index.html
@@ -0,0 +1,76 @@
+---
+title: 'Array.prototype[@@unscopables]'
+slug: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Властивість
+  - Масив
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables
+---
+<div>{{JSRef}}</div>
+
+<p>Символьна властивість <code><strong>@@unscopable</strong></code> містить імена властивостей, що не були включені у стандарт ECMAScript до версії ES2015. Ці властивості виключені з прив'язок оператора <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/with">with</a></code>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Стандартні властивості масивів, що виключені з прив'язок <code>with</code>, наступні:</p>
+
+<ul>
+ <li>{{jsxref("Array.prototype.copyWithin()", "copyWithin()")}}</li>
+ <li>{{jsxref("Array.prototype.entries()", "entries()")}}</li>
+ <li>{{jsxref("Array.prototype.fill()", "fill()")}}</li>
+ <li>{{jsxref("Array.prototype.find()", "find()")}}</li>
+ <li>{{jsxref("Array.prototype.findIndex()", "findIndex()")}}</li>
+ <li>{{jsxref("Array.prototype.includes()", "includes()")}}</li>
+ <li>{{jsxref("Array.prototype.keys()", "keys()")}}</li>
+ <li>{{jsxref("Array.prototype.values()", "values()")}}</li>
+</ul>
+
+<p>Дивіться {{jsxref("Symbol.unscopables")}}, щоб дізнатись, як задати <code>unscopables</code> для ваших власних об'єктів.</p>
+
+<p>{{js_property_attributes(0,0,1)}}</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_у_оточеннях_with">Використання у оточеннях with</h3>
+
+<p>Наступний код чудово працює у ES5 та більш ранніх версіях. Однак, у ECMAScript 2015 та пізніших версіях був запроваджений метод {{jsxref("Array.prototype.keys()")}}. Це означає, що всередині середовищ <code>with</code> "keys" тепер буде методом, а не змінною. Саме тут вступає у гру вбудована символьна властивість <code>@@unscopables</code> <code>Array.prototype[@@unscopables]</code>, яка не дає деяким методам масивів потрапити у область видимості <code>with</code>.</p>
+
+<pre class="brush: js notranslate">var keys = [];
+
+with (Array.prototype) {
+  keys.push('something');
+}
+
+Object.keys(Array.prototype[Symbol.unscopables]);
+// ["copyWithin", "entries", "fill", "find", "findIndex",
+//  "includes", "keys", "values"]</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.@@unscopables")}}</p>
+</div>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.unscopables")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/array/index.html b/files/uk/web/javascript/reference/global_objects/array/array/index.html
new file mode 100644
index 0000000000..84bcbb52a0
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/array/index.html
@@ -0,0 +1,87 @@
+---
+title: Конструктор Array()
+slug: Web/JavaScript/Reference/Global_Objects/Array/Array
+tags:
+  - JavaScript
+  - Конструктор
+  - Масив
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/Array
+---
+<div>{{JSRef}}</div>
+
+<p>Конструктор <code>Array()</code> використовується для створення об'єктів {{jsxref("Array")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>]
+
+new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]])
+new Array(<var>arrayLength</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>element<em>N</em></code></dt>
+ <dd>Масив JavaScript ініціалізується наданими елементами, окрім випадку, коли у конструктор <code>Array</code> передається єдиний аргумент, і цей аргумент - число (дивіться нижче параметр arrayLength). Зауважте, що цей особливий випадок стосується лише масивів JavaScript, створених конструктором <code>Array</code>, а не масивних літералів, створених дужковим синтаксисом.</dd>
+ <dt><code>arrayLength</code></dt>
+ <dd>Якщо єдиним аргументом, переданим у конструктор <code>Array</code> є ціле число між 0 та 2<sup>32</sup>-1 (включно), це створює новий масив JavaScript, в якого властивості <code>length</code> присвоюється це число (<strong>Заувага: </strong>мається на<strong> </strong>увазі масив довжиною <code>arrayLength</code> з порожних елементів, а не елементів, заповнених значеннями <code>undefined</code>). Якщо аргумент є будь-яким іншим числом, викидається виняток {{jsxref("RangeError")}}.</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Нотація_масивного_літералу">Нотація масивного літералу</h3>
+
+<p>Масиви можна створювати за допомогою <a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar#Array_literals">літералів</a>:</p>
+
+<pre class="brush: js">let fruits = ['Яблуко', 'Банан'];
+
+console.log(fruits.length); // 2
+console.log(fruits[0]);     // "Яблуко"
+</pre>
+
+<h3 id="Конструктор_масиву_з_єдиним_параметром">Конструктор масиву з єдиним параметром</h3>
+
+<p>Масиви можна створювати за допомогою конструктора з єдиним числовим параметром. Властивості масиву <code>length</code> присвоюється це число, а всі елементи масиву є порожніми.</p>
+
+<pre class="brush: js">let fruits = new Array(2);
+
+console.log(fruits.length); // 2
+console.log(fruits[0]);     // undefined
+</pre>
+
+<h3 id="Конструктор_масиву_з_кількома_параметрами">Конструктор масиву з кількома параметрами</h3>
+
+<p>Якщо у конструктор передається більше одного параметра, створюється новий об'єкт {{jsxref("Array")}} з наданими елементами.</p>
+
+<pre class="brush: js">let fruits = new Array('Яблуко', 'Банан');
+
+console.log(fruits.length); // 2
+console.log(fruits[0]);     // "Яблуко"
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array-constructor', 'Array constructor')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Array.Array")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>Клас {{jsxref("Array")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/concat/index.html b/files/uk/web/javascript/reference/global_objects/array/concat/index.html
new file mode 100644
index 0000000000..5b56573f93
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/concat/index.html
@@ -0,0 +1,168 @@
+---
+title: Array.prototype.concat()
+slug: Web/JavaScript/Reference/Global_Objects/Array/concat
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Масив
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>concat()</strong></code> повертає новий масив, що складається із масиву, в контексті якого метод був викликаний, поєднаного із масивом (масивами) та/або іншими значеннями, що були передані як аргументи.</p>
+
+
+
+<p>{{EmbedInteractiveExample("pages/js/array-concat.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>new_array</var> = <var>old_array</var>.concat(<var>value1</var>[, <var>value2</var>[, ...[, <var>valueN</var>]]])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>value<em>N</em></code></dt>
+ <dd>Масиви та/або значення, які поєднуються в новий масив. Якщо всі параметри <code>value<em>N</em></code> пропущені, метод <code>concat</code> повертає дрібну копію існуючого масиву, на якому був викликаний. Додаткову інформацію дивіться нижче в описі.</dd>
+</dl>
+
+<h3 id="Повернене_значення">Повернене значення</h3>
+
+<p>Новий екземпляр об'єкта {{jsxref("Array")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>concat</code> створює новий масив, який складається із елементів об'єкта, на якому метод був викликаний, а також із елементів кожного аргумента (якщо цей аргумент - масив) або з самого аргумента (якщо він не є масивом). Метод не заходить у аргументи вкладених масивів.</p>
+
+<p>Метод <code>concat</code> не змінює <code>this</code> або будь-який з масивів, що передані як аргументи, але натомість повертає дрібну копію, яка містить копії тих самих елементів, об'єднані з початкових масивів. Елементи початкових масивів копіюються в новий масив таким чином:</p>
+
+<ul>
+ <li>Посилання на об'єкти (а не самі об'єкти): <code>concat</code> копіює посилання на об'єкти у новий масив. І початковий, і новий масиви посилаються на той самий об'єкт. Іншими словами, якщо об'єкт, на який посилаються, буде змінено, то зміни будуть видимими для нового та початкового масивів. Це стосується також тих елементів аргументів масиву, які також є масивами.</li>
+ <li>Рядки, числа та булеві значення (не об'єкти {{jsxref("Global_Objects/String", "String")}}, {{jsxref("Global_Objects/Number", "Number")}}, та {{jsxref("Global_Objects/Boolean", "Boolean")}}): <code>concat</code> копіює значення рядків та чисел у новий масив.</li>
+</ul>
+
+<div class="note">
+<p><strong>Примітка:</strong> об'єднання масиву (масивів) чи значення (значень) не змінить початкові дані. Більше того, будь-яка операція над новим масивом (тільки якщо елемент не є посиланням на об'єкт) не матиме жодного впливу на початкові масиви, і навпаки.</p>
+</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Об'єднання_двох_масивів">Об'єднання двох масивів</h3>
+
+<p>Наступний код об'єднує два масиви:</p>
+
+<pre class="brush: js">const letters = ['a', 'b', 'c'],
+const numeric = [1, 2, 3];
+
+letters.concat(numeric);
+// Результат: ['a', 'b', 'c', 1, 2, 3]
+</pre>
+
+<h3 id="Об'єднання_трьох_масивів">Об'єднання трьох масивів</h3>
+
+<p>Наступний код об'єднує три масиви:</p>
+
+<pre class="brush: js">var num1 = [1, 2, 3],
+    num2 = [4, 5, 6],
+    num3 = [7, 8, 9];
+
+var numbers = num1.concat(num2, num3);
+
+console.log(numbers);
+// Результат: [1, 2, 3, 4, 5, 6, 7, 8, 9]
+</pre>
+
+<h3 id="Об'єднання_значень_у_масив">Об'єднання значень у масив</h3>
+
+<p>Наступний код об'єднує три значення у масив:</p>
+
+<pre class="brush: js">var letters = ['a', 'b', 'c'];
+
+var alphaNumeric = letters.concat(1, [2, 3]);
+
+console.log(alphaNumeric);
+// Результат: ['a', 'b', 'c', 1, 2, 3]
+</pre>
+
+
+
+<h3 id="Об'єднанная_вкладених_масивів">Об'єднанная вкладених масивів</h3>
+
+<p>Наступний код об'єднує вкладені масиви та демонструє утримання посилань:</p>
+
+<pre class="brush: js">const num1 = [[1]];
+const num2 = [2, [3]];
+
+const numbers = num1.concat(num2);
+
+console.log(numbers);
+// результат: [[1], 2, [3]]
+
+// змінити перший елемент num1
+num1[0].push(4);
+
+console.log(numbers);
+// результат: [[1, 4], 2, [3]]</pre>
+
+
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Початкове визначення. Реалізоване в JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_із_веб-переглядачами">Сумісність із веб-переглядачами</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Array.concat")}}</p>
+
+<div id="compat-mobile"></div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} — додавання/видалення елементів із кінця масиву</li>
+ <li>{{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} — додавання/видалення елементів із початку масиву</li>
+ <li>{{jsxref("Array.splice", "splice")}} — додавання/видалення елементів із зазначеного місця масиву</li>
+ <li>{{jsxref("String.prototype.concat()")}}</li>
+ <li>{{jsxref("Symbol.isConcatSpreadable")}} – налаштування вирівнювання</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/copywithin/index.html b/files/uk/web/javascript/reference/global_objects/array/copywithin/index.html
new file mode 100644
index 0000000000..b2d5e837e2
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/copywithin/index.html
@@ -0,0 +1,188 @@
+---
+title: Array.prototype.copyWithin()
+slug: Web/JavaScript/Reference/Global_Objects/Array/copyWithin
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Масив
+  - метод
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/copyWithin
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>copyWithin()</strong></code> додає дрібну копію частини масиву в іншу позицію в тому ж масиві та повертає його без зміни довжини.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-copywithin.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>arr</var>.copyWithin(<var>target[, start[, end]]</var>)
+</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>Індекс (нумерується з 0), куди потрібно скопіювати послідовність. Якщо індекс є від'ємним, <code>target</code> буде рахуватися з кінця масиву.</dd>
+ <dd>Якщо значення <code>target</code> дорівнює або більше за <code>arr.length</code>, нічого не скопіюється. Якщо індекс <code>target</code> більший за <code>start</code>, скопійована послідовність буде обрізана відповідно до <code>arr.length</code>.</dd>
+ <dt><code>start</code> {{optional_inline}}</dt>
+ <dd>Індекс (нумерується з 0), з якого потрібно починати копіювання елементів. Якщо він від'ємний, <code>start</code> буде рахуватися з кінця.</dd>
+ <dd>Якщо параметр <code>start</code> не заданий, <code>copyWithin</code> буде копіювати, починаючи з індекса 0. </dd>
+ <dt><code>end</code> {{optional_inline}}</dt>
+ <dd>Індекс (нумерується з 0), на якому потрібно закінчити копіювання елементів. <code>copyWithin</code> копіює до, але не включаючи, <code>end</code>. Якщо індекс від'ємний, <code>end</code> буде рахуватися з кінця.</dd>
+ <dd>Якщо параметр <code>end</code> не заданий, <code>copyWithin</code> буде копіювати до останнього індекса (за замовченням <code>arr.length</code>).</dd>
+</dl>
+
+<h3 id="Значення_яке_повертається">Значення, яке повертається</h3>
+
+<p>Змінений масив.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>copyWithin</code> працює, як <code>memmove</code> у C та C++, і є дуже продуктивним методом для зсунення даних у {{jsxref("Array", "масиві")}}. Це особливо стосується метода {{jsxref("TypedArray/copyWithin", "TypedArray")}} з такою ж самою назвою. Послідовність копіюється та вставляється однією операцією; вставлена послідовність міститиме скопійовані значення, навіть коли ділянки копіювання та вставки накладаються.</p>
+
+<p>Функція <code>copyWithin</code> є навмисно <em>загальною</em>, вона не вимагає, щоб її <code>this</code> був об'єктом {{jsxref("Array")}}.</p>
+
+<p>Метод <code>copyWithin</code> є методом модифікації. Він не змінює довжину об'єкта <code>this</code>, але він змінює його зміст та створює нові властивості в разі необхідності.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">[1, 2, 3, 4, 5].copyWithin(-2);
+// [1, 2, 3, 1, 2]
+
+[1, 2, 3, 4, 5].copyWithin(0, 3);
+// [4, 5, 3, 4, 5]
+
+[1, 2, 3, 4, 5].copyWithin(0, 3, 4);
+// [4, 2, 3, 4, 5]
+
+[1, 2, 3, 4, 5].copyWithin(-2, -3, -1);
+// [1, 2, 3, 3, 4]
+
+[].copyWithin.call({length: 5, 3: 1}, 0, 3);
+// {0: 1, 3: 1, length: 5}
+
+// ES2015 типізовані масиви є підкласами Array
+var i32a = new Int32Array([1, 2, 3, 4, 5]);
+
+i32a.copyWithin(0, 2);
+// Int32Array [3, 4, 5, 4, 5]
+
+// На платформах, які ще не сумісні з ES2015:
+[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
+// Int32Array [4, 2, 3, 4, 5]
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<pre class="brush: js">if (!Array.prototype.copyWithin) {
+  Object.defineProperty(Array.prototype, 'copyWithin', {
+    value: function(target, start/*, end*/) {
+    // Кроки 1-2.
+    if (this == null) {
+      throw new TypeError('this is null or not defined');
+    }
+
+    var O = Object(this);
+
+    // Кроки 3-5.
+    var len = O.length &gt;&gt;&gt; 0;
+
+    // Кроки 6-8.
+    var relativeTarget = target &gt;&gt; 0;
+
+    var to = relativeTarget &lt; 0 ?
+      Math.max(len + relativeTarget, 0) :
+      Math.min(relativeTarget, len);
+
+    // Кроки 9-11.
+    var relativeStart = start &gt;&gt; 0;
+
+    var from = relativeStart &lt; 0 ?
+      Math.max(len + relativeStart, 0) :
+      Math.min(relativeStart, len);
+
+    // Кроки 12-14.
+    var end = arguments[2];
+    var relativeEnd = end === undefined ? len : end &gt;&gt; 0;
+
+    var final = relativeEnd &lt; 0 ?
+      Math.max(len + relativeEnd, 0) :
+      Math.min(relativeEnd, len);
+
+    // Крок 15.
+    var count = Math.min(final - from, len - to);
+
+    // Кроки 16-17.
+    var direction = 1;
+
+    if (from &lt; to &amp;&amp; to &lt; (from + count)) {
+      direction = -1;
+      from += count - 1;
+      to += count - 1;
+    }
+
+    // Крок 18.
+    while (count &gt; 0) {
+      if (from in O) {
+        O[to] = O[from];
+      } else {
+        delete O[to];
+      }
+
+      from += direction;
+      to += direction;
+      count--;
+    }
+
+    // Крок 19.
+    return O;
+  },
+  configurable: true,
+  writable: true
+  });
+}</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.copyWithin")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/entries/index.html b/files/uk/web/javascript/reference/global_objects/array/entries/index.html
new file mode 100644
index 0000000000..b55d83c2e5
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/entries/index.html
@@ -0,0 +1,96 @@
+---
+title: Array.prototype.entries()
+slug: Web/JavaScript/Reference/Global_Objects/Array/entries
+tags:
+  - Array
+  - ECMAScript6
+  - JavaScript
+  - Ітератор
+  - Масив
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>entries()</strong></code> повертає новий об'єкт ітератора масиву (<code><strong>Array Iterator</strong></code>), який містить пари ключ-значення для кожного індексу в масиві.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-entries.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>array</var>.entries()</pre>
+
+<h3 id="Значення_яке_повертається">Значення, яке повертається</h3>
+
+<p>Новий об'єкт ітератора {{jsxref("Array", "масиву")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Ітерування_за_індексом_та_елементом">Ітерування за індексом та елементом</h3>
+
+<pre class="brush:js">const a = ['a', 'b', 'c'];
+
+for (const [index, element] of a.entries())
+  console.log(index, element);
+
+// 0 'a'
+// 1 'b'
+// 2 'c'
+</pre>
+
+<h3 id="Використання_циклу_for…of">Використання циклу <a href="/uk/docs/Web/JavaScript/Reference/Statements/for...of">for…of</a></h3>
+
+<pre class="brush:js">var a = ['a', 'b', 'c'];
+var iterator = a.entries();
+
+for (let e of iterator) {
+  console.log(e);
+}
+// [0, 'a']
+// [1, 'b']
+// [2, 'c']
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.entries")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.keys()")}}</li>
+ <li>{{jsxref("Array.prototype.values()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору">Протоколи перебору</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/every/index.html b/files/uk/web/javascript/reference/global_objects/array/every/index.html
new file mode 100644
index 0000000000..4eb5b229f0
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/every/index.html
@@ -0,0 +1,195 @@
+---
+title: Array.prototype.every()
+slug: Web/JavaScript/Reference/Global_Objects/Array/every
+tags:
+  - Array
+  - ECMAScript6
+  - JavaScript
+  - Масив
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/every
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>every()</strong></code> перевіряє, чи всі елементи масиву відповідають умові, що задана функцією, яка передається як аргумент. Повертає булеве значення.</p>
+
+<pre class="brush: js">function isBigEnough(element, index, array) {
+  return element &gt;= 10;
+}
+
+[12, 5, 8, 130, 44].every(isBigEnough);   // false
+[12, 54, 18, 130, 44].every(isBigEnough); // true</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>arr</var>.every(<var>callback(element[, index[, array]])[, thisArg]</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Функція, яка перевіряє кожен елемент масиву. Приймає три аргументи:
+ <dl>
+  <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">element</span></font></dt>
+  <dd>Поточний елемент, який обробляється в масиві.</dd>
+  <dt><code>index</code> {{Optional_inline}}</dt>
+  <dd>Індекс поточного елемента, який обробляється в масиві.</dd>
+  <dt><code>array</code> {{Optional_inline}}</dt>
+  <dd>Масив для якого був викликаний метод <code>every</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code>{{Optional_inline}}</dt>
+ <dd>Значення, що використовується як <code>this</code> при виконанні <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p><code><strong>true</strong></code>, якщо функція callback повернула {{Glossary("truthy", "правдиве")}} значення для кожного елементу масиву; інакше, <code><strong>false</strong></code>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>every</code> виконує функцію <code>callback</code> один раз для кожного елементу масиву поки не знайдено хоча б один елемент, функція <code>callback</code> якого повертає {{Glossary("falsy", "хибне")}} значення. Якщо такий елемент знайдено, метод <code>every </code>одразу повертає <code>false</code>. В іншому ж випадку, якщо функція <code>callback</code> повернула {{Glossary("truthy", "правдиве")}} значення для усіх елементів, <code>every</code> повертає <code>true</code>.  Функція <code>callback</code> викликається тільки для тих індексів масиву, які мають присвоєні значення; вона не викликається для тих індексів, котрі були видалені або котрим ніколи не присвоювалися значення.</p>
+
+<p>Функція <code>callback</code> викликається з трьома аргументами: значення елементу, індекс елементу в масиві і масив по якому робиться перебір.</p>
+
+<p>Якщо параметр <code>thisArg</code> переданий в <code>every</code>, то він буде використовуватися функцією <code>callback</code> як значення <code>this</code>, коли та буде викликана. В іншому випадку буде передано значення <code>undefined</code> як її значення <code>this</code>. Значення <code>this</code> зрештою видиме для функції <code>callback</code> і визначається відповідно до <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">звичайних правил для визначення this яке видиме функцією</a>.</p>
+
+<p>Метод <code>every</code> не змінює масив, на якому він був викликаний.</p>
+
+<p>Діапазон елементів, які обробляються методом <code>every()</code> встановлюється перед першим виконанням функції <code>callback</code>. Елементи, які додаються в масив після того, як метод <code>every()</code>був викликаний, не будуть обходитися функцією <code>callback</code>. Якщо існуючі елементи масиву змінилися, то їхні значення, які передаються в функцію <code>callback</code> будуть значеннями на момент обходу їх методом <code>every()</code>; якщо існуючі елементи масиву видалили, то метод <code>every()</code> обходити їх не буде.</p>
+
+<p>Метод <code>every</code> схожий за дією на математичний символ "для кожного <img alt="\forall \!\," src="https://wikimedia.org/api/rest_v1/media/math/render/svg/e06890cf9ed539c62153aee819bfd33584ad57d9">". Зокрема, для порожнього масиву він повертає true. (Всі елементи порожнього набору задовольняють будь-якому заданому стану.)</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Перевірка_значення_кожного_елементу_масиву">Перевірка значення кожного елементу масиву</h3>
+
+<p>Даний приклад перевіряє чи всі елементи масиву більші ніж 10.</p>
+
+<pre class="brush: js">function isBigEnough(element, index, array) {
+  return element &gt;= 10;
+}
+[12, 5, 8, 130, 44].every(isBigEnough);   // false
+[12, 54, 18, 130, 44].every(isBigEnough); // true
+</pre>
+
+<h3 id="Викристання_стрілочних_функцій">Викристання стрілочних функцій</h3>
+
+<p><a href="/uk/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Стрілочні функції</a> надають коротший синтаксис для такої ж самої перевірки.</p>
+
+<pre class="brush: js">[12, 5, 8, 130, 44].every(x =&gt; x &gt;= 10); // false
+[12, 54, 18, 130, 44].every(x =&gt; x &gt;= 10); // true</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Метод <code>every</code> був доданий до ECMA-262 стандарту у 5-ій версії; як такий він може бути не реалізований в усіх реалізаціях стандарту. Ви можете обійти цю проблему, вставивши наступний код на початку ваших скриптів, що дозволить використовувати метод <code>every</code> у тих версіях, які не підтримують його початково. Цей алгоритм є саме тим, що зазначений у  ECMA-262, 5-ій версії, за умови, що <code>Object</code> і <code>TypeError</code> мають свої первинні значення і що <code>callbackfn.call</code> прирівнюється до первинного значення {{jsxref("Function.prototype.call")}}</p>
+
+<pre class="brush: js">if (!Array.prototype.every) {
+  Array.prototype.every = function(callbackfn, thisArg) {
+    'use strict';
+    var T, k;
+
+    if (this == null) {
+      throw new TypeError('this дорівнює null або не визначений');
+    }
+
+    // 1. Нехай O буде результатом виклику ToObject з передачею значення
+    //    this в якості аргумента.
+    var O = Object(this);
+
+    // 2. Нехай lenValue буде результатом виклику внутрішнього метода O
+    //    Get з аргументом "length".
+    // 3. Нехай len буде результатом ToUint32(lenValue).
+    var len = O.length &gt;&gt;&gt; 0;
+
+    // 4. Якщо IsCallable(callbackfn) повертає false, викинути виняток TypeError.
+    if (typeof callbackfn !== 'function') {
+      throw new TypeError();
+    }
+
+    // 5. Якщо thisArg було передано, хай T буде thisArg; інакше хай T буде undefined.
+    if (arguments.length &gt; 1) {
+      T = thisArg;
+    }
+
+    // 6. Нехай k дорівнює 0.
+    k = 0;
+
+    // 7. Повторювати, доки k &lt; len
+    while (k &lt; len) {
+
+      var kValue;
+
+      // а. Нехай Pk буде ToString(k).
+      //   Це неявно для операндів LHS оператора in
+      // б. Нехай kPresent буде результатом виклику внутрішнього метода
+      //    O HasProperty з аргументом Pk.
+      //    Цей крок можна поєднати з в
+      // в. Якщо kPresent дорівнює true, тоді
+      if (k in O) {
+
+        // i. Нехай kValue буде результатом виклику внутрішнього метода
+        //    O Get з аргументом Pk.
+        kValue = O[k];
+
+        // ii. Нехай testResult буде результатом виклику внутрішнього метода
+        //      callbackfn Call з T в якості значення this і списком аргументів,
+        //      який містить kValue, k, та O.
+        var testResult = callbackfn.call(T, kValue, k, O);
+
+        // iii. Якщо ToBoolean(testResult) дорівнює false, повернути false.
+        if (!testResult) {
+          return false;
+        }
+      }
+      k++;
+    }
+    return true;
+  };
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Початкове визначення. Реалізовано у JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Array.every")}}</p>
+
+<div id="compat-mobile"></div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.every()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/fill/index.html b/files/uk/web/javascript/reference/global_objects/array/fill/index.html
new file mode 100644
index 0000000000..666360dc76
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/fill/index.html
@@ -0,0 +1,155 @@
+---
+title: Array.prototype.fill()
+slug: Web/JavaScript/Reference/Global_Objects/Array/fill
+tags:
+  - Array
+  - ECMAScript6
+  - JavaScript
+  - Масив
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>fill()</strong></code> заповнює (змінює) всі елементи масиву з початкового індексу (за замовчуванням нуль) до кінцевого індексу (за замовчуванням довжина масиву) статичним значенням. Метод повертає змінений масив.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-fill.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>arr</var>.fill(<var>value[</var>, <var>start[<var>, <var>end]]</var>)</var></var>
+</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Величина, якою потрібно заповнити масив.</dd>
+ <dt><code>start</code> {{optional_inline}}</dt>
+ <dd>Початковий індекс, за замовчуванням 0.</dd>
+ <dt><code>end</code> {{optional_inline}}</dt>
+ <dd>Кінцевий індекс, за замовчуванням <code>this.length</code>.</dd>
+</dl>
+
+<h3 id="Значення_яке_повертається">Значення, яке повертається</h3>
+
+<p>Змінений масив.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>fill</code> приймає три аргументи: <code>value</code>, <code>start</code> та <code>end</code>. Аргументи <code>start</code> та <code>end</code> є необов'язковими й за замовчуванням дорівнюють <code>0</code> та значенню <code>length</code> об'єкта <code>this</code>.</p>
+
+<p>Якщо значення <code>start</code> є від'ємним, воно сприймається як <code>length+start</code>, де <code>length</code> - це довжина масиву. Якщо значення <code>end</code> є від'ємним, воно сприймається як <code>length+end</code>.</p>
+
+<p>Метод <code>fill</code> є навмисно загальним, він не вимагає, щоб значенням <code>this</code> був об'єкт Array.</p>
+
+<p><code>fill</code> є методом модифікації, він змінить сам об'єкт <code>this</code> та поверне його, а не просто його копію.</p>
+
+<p>Коли у <code>fill</code> передається об'єкт, він копіює посилання та заповнює масив посиланнями на цей об'єкт.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">[1, 2, 3].fill(4);               // [4, 4, 4]
+[1, 2, 3].fill(4, 1);            // [1, 4, 4]
+[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
+[1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
+[1, 2, 3].fill(4, 3, 3);         // [1, 2, 3]
+[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
+[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
+[1, 2, 3].fill(4, 3, 5);         // [1, 2, 3]
+Array(3).fill(4);                // [4, 4, 4]
+[].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}
+
+// Об'єкти за посиланнями.
+var arr = Array(3).fill({}) // [{}, {}, {}];
+arr[0].hi = "привіт"; // [{ hi: "привіт" }, { hi: "привіт" }, { hi: "привіт" }]
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<pre class="brush: js">if (!Array.prototype.fill) {
+  Object.defineProperty(Array.prototype, 'fill', {
+    value: function(value) {
+
+      // Кроки 1-2.
+      if (this == null) {
+        throw new TypeError('this is null or not defined');
+      }
+
+      var O = Object(this);
+
+      // Кроки 3-5.
+      var len = O.length &gt;&gt;&gt; 0;
+
+      // Кроки 6-7.
+      var start = arguments[1];
+      var relativeStart = start &gt;&gt; 0;
+
+      // Крок 8.
+      var k = relativeStart &lt; 0 ?
+        Math.max(len + relativeStart, 0) :
+        Math.min(relativeStart, len);
+
+      // Кроки 9-10.
+      var end = arguments[2];
+      var relativeEnd = end === undefined ?
+        len : end &gt;&gt; 0;
+
+      // Крок 11.
+      var final = relativeEnd &lt; 0 ?
+        Math.max(len + relativeEnd, 0) :
+        Math.min(relativeEnd, len);
+
+      // Крок 12.
+      while (k &lt; final) {
+        O[k] = value;
+        k++;
+      }
+
+      // Крок 13.
+      return O;
+    }
+  });
+}
+</pre>
+
+<p>Якщо вам потрібно підтримувати зовсім застарілі рушії JavaScript, які не підтримують <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, краще взагалі не використовувати поліфіли методів <code>Array.prototype</code>, оскільки ви не зможете зробити їх не перелічуваними.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.fill")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("TypedArray.prototype.fill()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/filter/index.html b/files/uk/web/javascript/reference/global_objects/array/filter/index.html
new file mode 100644
index 0000000000..e36b7abc4d
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/filter/index.html
@@ -0,0 +1,235 @@
+---
+title: Array.prototype.filter()
+slug: Web/JavaScript/Reference/Global_Objects/Array/filter
+tags:
+  - Array
+  - ECMAScript5
+  - JavaScript
+  - Prototype
+  - polyfill
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>filter()</strong></code> створює новий масив з усіма елементами, що пройшли перевірку вказаною функцією.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-filter.html")}}</div>
+
+<p class="hidden">Першокод цього прикладу збережено у репозиторії GitHub. Якщо ви хочете долучитися до створення чи поліпшення таких прикладів, пропонуйте нам свої зміни до репозиторію <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])</var></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Функція-<abbr title="предикат">присудок</abbr>, що перевіряє кожен елемент масиву та повертає <code>true</code>, щоб зберегти елемент, або <code>false</code>, щоб видалити. Приймає три аргументи:</dd>
+ <dd>
+ <dl>
+  <dt><code>element</code></dt>
+  <dd>Значення чергового елемента масиву.</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>Індекс чергового елемента в масиві.</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd>Масив, до якого застосовано <code>filter()</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code>{{optional_inline}}</dt>
+ <dd>Значення, що використовується як <code><strong>this</strong></code>, коли викликається <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>Новий масив з елементами, що пройшли пере́вірку. Якщо жоден елемент не пройшов перевірку, повертає порожній масив.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>filter()</code> перебирає всі елементи масиву за зростанням індексу, викликає для кожного функцію <code>callback</code>, та створює новий масив зі значень, для яких виклик <code>callback</code> повертає {{glossary("Truthy", "істинне значення")}}. Метод оминає властивості, які було видалено або не було <abbr title="ініціалізовано">започатковано</abbr> — в розріджених масивах.</p>
+
+<p>Функція <code>callback</code> викликається з трьома аргументами:</p>
+
+<ul>
+ <li>значення елемента;</li>
+ <li>індекс елемента;</li>
+ <li>масив по якому робиться обхід.</li>
+</ul>
+
+<p>Якщо для <code>filter()</code> вказано параметр <code>thisArg</code>, його буде використано як <code>this</code> для функції <code>callback</code>. Інакше буде використано значення {{jsxref("undefined")}}. Зрештою, значення <code>this</code> для функції <code>callback</code> визначатиметься відповідно до <a href="/uk/docs/Web/JavaScript/Reference/Operators/this" rel="nofollow">загальних правил</a>.</p>
+
+<p>Метод <code>filter()</code> не змінює масив, на якому його викликано.</p>
+
+<p>Множина індексів елементів, що їх перебиратиме <code>filter()</code>, з'ясовується ще до першого виклику <code>callback</code>. Елементи, додані після здійснення виклику <code>filter()</code>, буде знехтувано. Якщо наявні елементи масиву було змінено або видалено, до функції <code>callback</code> потрапить те значення елемента, яке він мав безпосередньо перед відповідним викликом <code>callback</code>. Видалені елементи опрацьовано не буде.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Вилучення_замалих_чисел">Вилучення замалих чисел</h3>
+
+<p>Наведений приклад за допомогою метода <code>filter()</code> створює новий масив, що міститиме лише числа, які перевищують 10:</p>
+
+<pre class="brush: js">function isBigEnough(value) {
+  return value &gt;= 10;
+}
+
+var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
+// filtered дорівнює [12, 130, 44]
+</pre>
+
+<h3 id="Фільтрування_неправильних_записів_з_JSON">Фільтрування неправильних записів з JSON</h3>
+
+<p>Цей приклад використовує метод <code>filter()</code>, щоб створити відфільтрований JSON з усіх елементів, які мають ненульове, числове значення <code>id</code>:</p>
+
+<pre class="brush: js">var arr = [
+  { id: 15 },
+  { id: -1 },
+  { id: 0 },
+  { id: 3 },
+  { id: 12.2 },
+  { },
+  { id: null },
+  { id: NaN },
+  { id: 'undefined' }
+];
+
+var invalidEntries = 0;
+
+function isNumber(obj) {
+  return obj !== undefined &amp;&amp; typeof(obj) === 'number' &amp;&amp; !isNaN(obj);
+}
+
+function filterByID(item) {
+  if (isNumber(item.id) &amp;&amp; item.id !== 0) {
+    return true;
+  }
+  invalidEntries++;
+  return false;
+}
+
+var arrByID = arr.filter(filterByID);
+
+console.log('Відфільтрований масив\n', arrByID);
+// Відфільтрований масив
+// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]
+
+console.log('Кількість неправильних записів = ', invalidEntries);
+// Кількість неправильних записів = 5</pre>
+
+<h3 id="Пошук_у_масиві">Пошук у масиві</h3>
+
+<p>Цей приклад використовує <code>filter()</code>, щоб відфільтрувати масив за пошуковим критерієм:</p>
+
+<pre class="brush: js">var fruits = ['яблуко', 'банан', 'виноград', 'манго', 'кокос'];
+
+/**
+ * Фільтрувати елементи масиву за пошуковим критерієм (запитом)
+ */
+function filterItems(arr, query) {
+  return arr.filter(function(el) {
+      return el.toLowerCase().indexOf(query.toLowerCase()) !== -1;
+  })
+}
+
+console.log(filterItems(fruits, 'ко'));  // ['яблуко', 'кокос']
+console.log(filterItems(fruits, 'ан'));  // ['банан', 'манго']</pre>
+
+<h4 id="Реалізація_ES2015">Реалізація ES2015</h4>
+
+<pre class="brush: js">const fruits = ['яблуко', 'банан', 'виноград', 'манго', 'кокос'];
+
+/**
+* Фільтрувати елементи масиву за пошуковим критерієм (запитом)
+*/
+const filterItems = (arr, query) =&gt; {
+  return arr.filter(el =&gt; el.toLowerCase().indexOf(query.toLowerCase()) !== -1);
+};
+
+console.log(filterItems(fruits, 'ко')); // ['яблуко', 'кокос']
+console.log(filterItems(fruits, 'ан')); // ['банан', 'манго']</pre>
+
+<h2 id="Запасний_варіант_(поліфіл)">Запасний варіант (поліфіл)</h2>
+
+<p>Метод <code>filter()</code> був доданий до стандарту ECMA-262 у 5-й версії; таким чином, він може не бути присутній у всіх реалізаціях стандарту. Ви можете обійти цю проблему, вставивши наведений нижче код на початку ваших скриптів, це дозволить використовувати <code>filter()</code> у версіях ECMA-262, які не підтримують його початково. Цей алгоритм є точним еквівалентом впровадженого у 5-й версії ECMA-262, за умови, що <code>fn.call</code> відповідає початковому значенню {{jsxref("Function.prototype.bind()")}}, і {{jsxref("Array.prototype.push()")}} не було змінено.</p>
+
+<pre class="brush: js">if (!Array.prototype.filter) {
+    Array.prototype.filter = function(func, thisArg) {
+        'use strict';
+        if (!((typeof func === 'Function' || typeof func === 'function') &amp;&amp; this) )
+            throw new TypeError();
+
+        var len = this.length &gt;&gt;&gt; 0,
+            res = new Array(len),  // попередньо створений масив
+            t = this, c = 0, i = -1;
+
+        var kValue;
+        if (thisArg === undefined){
+          while (++i !== len){
+            // перевіряє, чи заданий ключ
+            if (i in this){
+              kValue = t[i]; // у цьому випадку t змінюється у функції callback
+              if (func(t[i], i, t)){
+                res[c++] = kValue;
+              }
+            }
+          }
+        }
+        else {
+          while (++i !== len) {
+            // перевіряє, чи заданий ключ
+            if (i in this){
+              kValue = t[i];
+              if (func.call(thisArg, t[i], i, t)){
+                res[c++] = kValue;
+              }
+            }
+          }
+        }
+
+        res.length = c; // зменшити масив до правильного розміру
+        return res;
+    };
+}</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Початкова виознака. Запроваджено у JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<div>{{Compat("javascript.builtins.Array.filter")}}</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/find/index.html b/files/uk/web/javascript/reference/global_objects/array/find/index.html
new file mode 100644
index 0000000000..a08566da73
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/find/index.html
@@ -0,0 +1,233 @@
+---
+title: Array.prototype.find()
+slug: Web/JavaScript/Reference/Global_Objects/Array/find
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - polyfill
+  - Довідка
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/find
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>find()</code></strong> повертає <strong>значення</strong> <strong>першого елемента </strong>в масиві, що задовільняє передану функцію тестування. Інакше вертається {{jsxref("undefined")}}.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-find.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<p>Зверніть увагу також на метод {{jsxref("Array.prototype.findIndex", "findIndex()")}}, що натомість повертає <strong>індекс</strong> знайденого елемента масиву, а не значення.</p>
+
+<p>Якщо вам необхідно знайти позицію елемента або дізнатись, чи існує елемент в масиві, використовуйте {{jsxref("Array.prototype.indexOf()")}} або {{jsxref("Array.prototype.includes()")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><var>arr.find(callback(element[, index[, array]])[, thisArg])</var></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Функція, що виконується для кожного значення в масиві і приймає три аргументи:
+ <dl>
+  <dt><code>element</code></dt>
+  <dd>Значення поточного елемента масиву.</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>Індекс поточного елемента масиву.</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd>Масив, для якого було викликано <code>find</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code> {{Optional_inline}}</dt>
+ <dd>Необов'язковий об'єкт, що використовується в якості <code>this</code> при виконанні <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p><strong>Значення</strong> <strong>першого елемента</strong> в масиві, який задовольняє надану перевірочну функцію. Інакше повертається {{jsxref("undefined")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>find</code> виконує функцію <code>callback</code> один раз для кожного елемента в масиві, аж поки не буде знайдено такий, для якого <code>callback</code> повертає <a href="/uk/docs/Glossary/Truthy">правдиве значення</a>. Щойно такий елемент знайдено, <code>find</code> одразу ж повертає значення цього елемента. В іншому випадку, <code>find</code>  повертає {{jsxref("undefined")}}. Функція <code>callback</code> викликається для кожного індексу масиву з <code>0</code> по <code>length - 1</code> і виконується для усіх елементів, не лише для тих, які мають присвоєні значення. Це означає, що цей метод може бути менш ефективним для розріджених масивів у порівнянні з методами, які обробляють лише ті, елементи, яким присвоєні значення.</p>
+
+<p>Функція <code>callback</code> викликається з трьома аргументами: значення елемента, індекс елемента і об'єкт <code>Array</code>, перебір якого здійснюється.</p>
+
+<p>Якщо параметр <code>thisArg</code> передано до <code>find</code>, його буде використано як <code>this</code> для кожного виклику <code>callback</code>. Якщо його не передано, тоді використовуватиметься {{jsxref("undefined")}}.</p>
+
+<p>Метод <code>find()</code> не змінює масив, для якого викликається.</p>
+
+<p>Діапазон елементів, що їх має обробити <code>find</code>, визначається ще до першого виклику функції <code>callback</code>. Тому <code>callback</code> не обробляє елементи, додані до масиву після того, як почалося виконання <code>find</code>. Якщо існуючий, ще не опрацьований елемент масиву, змінюється функцією <code>callback</code>, його значення, що передається до <code>callback</code>, буде значенням на той момент, коли <code>find</code> доходить до індексу цього елемента. Видалені елементи все одно опрацьовуються.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Знайти_обєкт_в_масиві_за_однією_з_його_властивостей">Знайти об'єкт в масиві за однією з його властивостей</h3>
+
+<pre class="brush: js notranslate">var inventory = [
+    {name: 'яблука', quantity: 2},
+    {name: 'банани', quantity: 0},
+    {name: 'вишні', quantity: 5}
+];
+
+function findCherries(fruit) {
+    return fruit.name === 'вишні';
+}
+
+console.log(inventory.find(findCherries));
+// виводить { name: 'вишні', quantity: 5 }
+</pre>
+
+<h4 id="Використання_стрілочної_функції_ES2015">Використання стрілочної функції ES2015</h4>
+
+<pre class="brush: js notranslate">const inventory = [
+    {name: 'яблука', quantity: 2},
+    {name: 'банани', quantity: 0},
+    {name: 'вишні', quantity: 5}
+];
+
+const result = inventory.find( fruit =&gt; fruit.name === 'вишні' );
+
+console.log(result) // { name: 'вишні', quantity: 5 }
+</pre>
+
+<h3 id="Знайти_просте_число_у_масиві">Знайти просте число у масиві</h3>
+
+<p>Наступний приклад знаходить елемент у масиві, який є простим числом (або повертає {{jsxref("undefined")}}, якщо простого числа немає):</p>
+
+<pre class="brush: js notranslate">function isPrime(element, index, array) {
+  var start = 2;
+  while (start &lt;= Math.sqrt(element)) {
+    if (element % start++ &lt; 1) {
+      return false;
+    }
+  }
+  return element &gt; 1;
+}
+
+[4, 6, 8, 12].find(isPrime);  // вертає undefined, простих чисел не знайдено
+[4, 5, 8, 12].find(isPrime);  // вертає 5
+</pre>
+
+<p>Наступні приклади демонструють, що неіснуючі та видалені елементи теж опрацьовуються, і що значення, передане до функції зворотного виклику - це їхнє значення на момент перевірки.</p>
+
+<pre class="brush: js notranslate">// Створити масив без елементів за індексами 2, 3 та 4
+const array = [0,1,,,,5,6];
+
+// Виводить всі індекси, не лише ті, які мають присвоєні значення
+array.find(function(value, index) {
+  console.log('Індекс ' + index + ' має значення ' + value);
+});
+
+// Виводить всі індекси, в тому числі видалені
+array.find(function(value, index) {
+
+  // Видалити елемент 5 в першій ітерації
+  if (index == 0) {
+    console.log('Видалення елемента array[5] зі значенням ' + array[5]);
+    delete array[5];
+  }
+  // Елемент 5 перевіряється, хоч і був видалений
+  console.log('Індекс ' + index + ' має значення ' + value);
+});
+// очікуваний результат:
+// Видалення елемента array[5] зі значенням 5
+// Індекс 0 має значення 0
+// Індекс 1 має значення 1
+// Індекс 2 має значення undefined
+// Індекс 3 має значення undefined
+// Індекс 4 має значення undefined
+// Індекс 5 має значення undefined
+// Індекс 6 має значення 6
+</pre>
+
+<h2 id="Запасний_варіант_поліфіл">Запасний варіант (поліфіл)</h2>
+
+<p>Цей метод був доданий у ECMAScript 2015, тож, можливо, поки наявний не у всякій реалізації JavaScript. Проте, ви можете використати наступний код для забезпечення запасного варіанту <code>Array.prototype.find</code>:</p>
+
+<pre class="brush: js notranslate">// https://tc39.github.io/ecma262/#sec-array.prototype.find
+if (!Array.prototype.find) {
+  Object.defineProperty(Array.prototype, 'find', {
+    value: function(predicate) {
+     // 1. Нехай O дорівнює ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+
+      // 2. Нехай len дорівнює ? ToLength(? Get(O, "length")).
+      var len = o.length &gt;&gt;&gt; 0;
+
+      // 3. Якщо IsCallable(predicate) дорівнює false, викинути виняток TypeError.
+      if (typeof predicate !== 'function') {
+        throw new TypeError('предикат має бути функцією');
+      }
+
+      // 4. Якщо надано thisArg, нехай T дорівнює thisArg; інакше нехай T дорівнює undefined.
+      var thisArg = arguments[1];
+
+      // 5. Нехай k дорівнює 0.
+      var k = 0;
+
+      // 6. Повторювати, поки k &lt; len
+      while (k &lt; len) {
+        // a. Нехай Pk дорівнює ! ToString(k).
+        // b. Нехай kValue дорівнює ? Get(O, Pk).
+        // c. Нехай testResult дорівнює ToBoolean(? Call(predicate, T, « kValue, k, O »)).
+        // d. Якщо testResult дорівнює true, повернути kValue.
+        var kValue = o[k];
+        if (predicate.call(thisArg, kValue, k, o)) {
+          return kValue;
+        }
+        // e. Збільшити k на 1.
+        k++;
+      }
+
+      // 7. Повернути undefined.
+      return undefined;
+    }
+  });
+}
+</pre>
+
+<p>Якщо вам потрібно забезпечити підтримку вкрай застарілих рушіїв JavaScript, в яких відсутня підтримка <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, було б краще взагалі не додавати методів до <code>Array.prototype</code> через відсутність можливості заборонити їх перебір.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікації</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.find', 'Array.prototype.find')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Первинне визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Array.find")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.findIndex()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/findindex/index.html b/files/uk/web/javascript/reference/global_objects/array/findindex/index.html
new file mode 100644
index 0000000000..550a072e19
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/findindex/index.html
@@ -0,0 +1,187 @@
+---
+title: Array.prototype.findIndex()
+slug: Web/JavaScript/Reference/Global_Objects/Array/findIndex
+tags:
+  - Array
+  - ECMAScript6
+  - JavaScript
+  - Масив
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Метод <code><strong>findIndex()</strong></code> повертає <strong>індекс</strong> першого елемента у масиві, <strong>який задовольняє надану перевірочну функцію</strong>. Інакше повертаєтсья -1, зазначаючи, що жодний елемент не пройшов перевірку.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-findindex.html")}}</div>
+
+
+
+<p>Дивіться також метод {{jsxref("Array.find", "find()")}}, який повертає <strong>значення</strong> елемента масиву замість індексу.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>arr</var>.findIndex<code>(callback(element[, index[, array]])[, thisArg])</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Функція, яка виконується на кожному значенні масиву, поки не поверне <code>true</code>, зазначаючи, що відповідний елемент знайдений. Вона приймає три аргументи:
+ <dl>
+  <dt><code>element</code></dt>
+  <dd>Поточний елемент масиву, який обробляється.</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>Індекс поточного елементу, що обробляється.</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd>Масив, для якого був викликаний метод <code>findIndex</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code>{{optional_inline}}</dt>
+ <dd>Необов'язковий об'єкт для використання у якості <code>this</code> під час виконання <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Індекс першого елемента у масиві, який успішно пройшов перевірку. Інакше <strong>-1</strong>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>findIndex</code> виконує функцію <code>callback</code> один раз для кожного індексу <code>0..length-1</code> (включно) у масиві, поки не знайде той, для якого <code>callback</code> поверне правдиве значення (таке, що <a href="/uk/docs/Glossary/Type_Conversion">приводиться</a> до <code>true</code>).</p>
+
+<p>Якщо такий елемент знайдено, <code>findIndex</code> негайно повертає його індекс. Якщо функція зворотного виклику так і не повертає правдиве значення (або довжина масиву <code>length</code> дорівнює 0), <code>findIndex</code> повертає -1. На відміну від інших методів масивів, таких як {{jsxref("Array.some")}}, <code>callback</code> <strong>викликається</strong> навіть для індексів, що не мають значень.</p>
+
+<p><code>callback</code> викликається з трьома аргументами:</p>
+
+<ol>
+ <li>Значення елемента</li>
+ <li>Індекс елемента</li>
+ <li>Об'єкт Array, який перебирається</li>
+</ol>
+
+<p>Якщо параметр <code>thisArg</code> передається до <code>findIndex</code>, він буде використаний у якості <code>this</code> всередині кожного виклику <code>callback</code>. Якщо він не наданий, то використовується {{jsxref("undefined")}}.</p>
+
+<p>Діапазон елементів, які опрацьовує <code>findIndex</code>, встановлюється до першого виклику <code>callback</code>. <code>callback</code> не обробляє елементи, додані до масиву після того, як почалося виконання <code>findIndex</code>. Якщо існуючий, ще не опрацьований елемент масиву змінюється функцією <code>callback</code>, його значення, що передається до <code>callback</code> буде значенням на той момент, коли <code>findIndex</code> доходить до індексу цього елементу. <a href="/uk/docs/Web/JavaScript/Reference/Operators/delete">Видалені</a> елементи все одно опрацьовуються.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Знайти_індекс_простого_числа_у_масиві">Знайти індекс простого числа у масиві</h3>
+
+<p>Наступний приклад повертає індекс першого елементу у масиві, який є простим числом, або -1, якщо там нема жодного простого числа.</p>
+
+<pre class="brush: js">function isPrime(element, index, array) {
+  var start = 2;
+  while (start &lt;= Math.sqrt(element)) {
+    if (element % start &lt; 1) {
+      return false;
+    } else {
+      start++;
+    }
+  }
+  return element &gt; 2;
+}
+
+console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, не знайдено
+console.log([4, 6, 7, 12].findIndex(isPrime)); // 2 (array[2] дорівнює 7)
+</pre>
+
+<h3 id="Знайти_індекс_використувуючи_стрілочну_функцію">Знайти індекс, використувуючи стрілочну функцію</h3>
+
+<p>Наступний приклад знаходить індекс фрукта, використувуючи стрілочну функцію:</p>
+
+<pre class="brush: js">const fruits = ["яблуко", "банан", "диня", "чорниці", "грейпфрут"];
+
+const index = fruits.findIndex(fruit =&gt; fruit === "чорниці");
+
+console.log(index); // 3
+console.log(fruits[index]); // чорниці
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.findindex
+if (!Array.prototype.findIndex) {
+  Object.defineProperty(Array.prototype, 'findIndex', {
+    value: function(predicate) {
+     // 1. Нехай O дорівнює ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+
+      // 2. Нехай len дорівнює ? ToLength(? Get(O, "length")).
+      var len = o.length &gt;&gt;&gt; 0;
+
+      // 3. Якщо IsCallable(predicate) дорівнює false, викинути виняток TypeError.
+      if (typeof predicate !== 'function') {
+        throw new TypeError('предикат має бути функцією');
+      }
+
+      // 4. Якщо наданий thisArg, нехай T дорівнює thisArg; інакше нехай T дорівнює undefined.
+      var thisArg = arguments[1];
+
+      // 5. Нехай k дорівнює 0.
+      var k = 0;
+
+      // 6. Повторювати, поки k &lt; len
+      while (k &lt; len) {
+        // a. Нехай Pk дорівнює ! ToString(k).
+        // b. Нехай kValue дорівнює ? Get(O, Pk).
+        // c. Нехай testResult дорівнює ToBoolean(? Call(predicate, T, « kValue, k, O »)).
+        // d. Якщо testResult дорівнює true, повернути k.
+        var kValue = o[k];
+        if (predicate.call(thisArg, kValue, k, o)) {
+          return k;
+        }
+        // e. Збільшити k на 1.
+        k++;
+      }
+
+      // 7. Повернути -1.
+      return -1;
+    },
+    configurable: true,
+    writable: true
+  });
+}
+</pre>
+
+<p>Якщо вам потрібно підтримувати зовсім застарілі рушії JavaScript, які не підтримують <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, краще взагалі не використовувати поліфіли методів <code>Array.prototype</code>, оскільки ви не зможете зробити їх не перелічуваними.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.findindex', 'Array.prototype.findIndex')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.findIndex")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/flat/index.html b/files/uk/web/javascript/reference/global_objects/array/flat/index.html
new file mode 100644
index 0000000000..ff20a8d058
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/flat/index.html
@@ -0,0 +1,150 @@
+---
+title: Array.prototype.flat()
+slug: Web/JavaScript/Reference/Global_Objects/Array/flat
+tags:
+  - Array
+  - JavaScript
+  - Масив
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>flat()</strong></code> створює новий масив який містить всі елементи вкладених масивів до вказаної глибини.</p>
+
+<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatten.html")}}</p>
+
+
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox"><var>var newArray = arr</var>.flat(<em>[</em><var>depth]</var>);</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>depth</code> {{optional_inline}}</dt>
+ <dd>Глибина, що вказує до якого рівня вкладеності масивів має відбуватись вирівнювання. За замовчуванням 1.</dd>
+</dl>
+
+<h3 id="Вихідне_значення">Вихідне значення</h3>
+
+<p>Новий масив, що містить елементи вкладених масивів.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Вирівнювання_вкладених_масивів">Вирівнювання вкладених масивів</h3>
+
+<pre class="brush: js">var arr1 = [1, 2, [3, 4]];
+arr1.flat();
+// [1, 2, 3, 4]
+
+var arr2 = [1, 2, [3, 4, [5, 6]]];
+arr2.flat();
+// [1, 2, 3, 4, [5, 6]]
+
+var arr3 = [1, 2, [3, 4, [5, 6]]];
+arr3.flat(2);
+// [1, 2, 3, 4, 5, 6]
+</pre>
+
+<h3 id="Вирівнювання_і_прогалини_в_масиві">Вирівнювання і прогалини в масиві</h3>
+
+<p>Метод <code>flat</code> видаляє порожні елементи масивів:</p>
+
+<pre class="brush: js">var arr4 = [1, 2, , 4, 5];
+arr4.flat();
+// [1, 2, 4, 5]
+</pre>
+
+<h2 id="Альтернатива">Альтернатива</h2>
+
+<h3 id="reduce_і_concat"><code>reduce</code> і <code>concat</code></h3>
+
+<pre class="brush: js">var arr1 = [1, 2, [3, 4]];
+arr1.flat();
+
+//вирівняти один рівень масиву
+arr1.reduce((acc, val) =&gt; acc.concat(val), []); // [1, 2, 3, 4]
+
+//або
+const flatSingle = arr =&gt; [].concat(...arr);</pre>
+
+<pre class="brush: js">//щоб здійснити глибоке вирівнювання, використовуйте рекурсію з reduce і concat
+var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
+
+function flattenDeep(arr1) {
+   return arr1.reduce((acc, val) =&gt; Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []);
+}
+flattenDeep(arr1); // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
+</pre>
+
+<pre class="brush: js">//глибоке вирівнювання без рекурсії, використовуючи stack
+var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
+function flatten(input) {
+  const stack = [...input];
+  const res = [];
+  while (stack.length) {
+    // викидаємо значення зі стеку
+    const next = stack.pop();
+    if (Array.isArray(next)) {
+      // додаємо елементи масиву, не змінюючи вхідного масиву
+      stack.push(...next);
+    } else {
+      res.push(next);
+    }
+  }
+  //перевертаємо масив, щоб порядок сортування відповідав вхідному
+  return res.reverse();
+}
+flatten(arr1); // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]</pre>
+
+<pre class="brush: js">//глибоке вирівнювання з рекурсією
+function flatten(array) {
+  var flattend = [];
+  (function flat(array) {
+    array.forEach(function(el) {
+      if (Array.isArray(el)) flat(el);
+      else flattend.push(el);
+    });
+  })(array);
+  return flattend;
+}</pre>
+
+<div class="hidden">
+<p>Будь ласка, не додавайте поліфіли в цю статтю. За довідкою дивіться: <a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a></p>
+</div>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-flatMap/#sec-Array.prototype.flat"><code>Array.prototype.flat</code> proposal</a></td>
+   <td>Finished (4)</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.flat")}}</p>
+</div>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.flatMap()")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/flatmap/index.html b/files/uk/web/javascript/reference/global_objects/array/flatmap/index.html
new file mode 100644
index 0000000000..58033475d1
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/flatmap/index.html
@@ -0,0 +1,152 @@
+---
+title: Array.prototype.flatMap()
+slug: Web/JavaScript/Reference/Global_Objects/Array/flatMap
+tags:
+  - Array
+  - JavaScript
+  - flatMap
+  - Масив
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/flatMap
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>flatMap()</strong></code> спочатку виконує надану функцію на кожному елементі, а після цього вирівнює отриманий результат і зберігає його у новий масив. Це аналогічно послідовному виклику {{jsxref("Array.prototype.map","map()")}} та {{jsxref("Array.prototype.flat","flat()")}} з глибиною 1, але <code>flatMap()</code> буває доволі корисним, оскільки об'єднання обох методів у один є трохи ефективнішим.</p>
+
+<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatmap.html")}}</p>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>var new_array = arr</var>.flatMap(function <var>callback(currentValue[, index[, array]]) {
+    // повернути елемент для нового масиву new_array
+}</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Функція, яка створює елемент для нового масиву. Приймає три аргументи:
+ <dl>
+  <dt></dt>
+  <dt><code>currentValue</code></dt>
+  <dd>Поточний елемент масиву, що обробляється.</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>Індекс поточного елемента, що обробляється.</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd>Масив, для якого був викликаний метод <code>flatMap</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code>{{optional_inline}}</dt>
+ <dd>Значення, що використовується як <code>this</code> під час виконання <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Новий масив, в якому кожний елемент є результатом виклику функції <code>callback</code>, вирівняний до глибини 1.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Дивіться детальний опис функції зворотного виклику у {{jsxref("Array.prototype.map()")}}. Метод <code>flatMap</code> є ідентичним послідовному виклику методів <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a></code> та <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/flat">flat</a></code> з глибиною 1.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="map()_та_flatMap()"><code>map()</code> та <code>flatMap()</code></h3>
+
+<pre class="brush: js">let arr1 = [1, 2, 3, 4];
+
+arr1.map(x =&gt; [x * 2]);
+// [[2], [4], [6], [8]]
+
+arr1.flatMap(x =&gt; [x * 2]);
+// [2, 4, 6, 8]
+
+// вирівнюється тільки один рівень
+arr1.flatMap(x =&gt; [[x * 2]]);
+// [[2], [4], [6], [8]]
+</pre>
+
+<p>В той час як наведений вище результат міг бути отриманий використанням самого <code>map</code>, нижче приклад, який краще демонструє використання <code>flatMap</code>.</p>
+
+<p>Давайте створимо список слів зі списку речень.</p>
+
+<pre class="brush: js">let arr1 = ["Сьогодні сонячно у", "", "Львові"];
+
+arr1.map(x =&gt; x.split(" "));
+// [["Сьогодні","сонячно","у"],[""],["Львові"]]
+
+arr1.flatMap(x =&gt; x.split(" "));
+// ["Сьогодні","сонячно","у", "", "Львові"]</pre>
+
+<p>Зверніть увагу, що довжина результуючого списку може відрізнятися від довжини початкового списку.</p>
+
+<h3 id="Для_додавання_та_видалення_елементів_під_час_виконання_map()">Для додавання та видалення елементів під час виконання <code>map()</code></h3>
+
+<p>Метод <code>flatMap</code> можна використовувати, щоб додавати та видаляти елементи (змінювати кількість елементів) під час виконання <code>map</code>. Іншими словами, він дозволяє кожен з множини елементів перетворювати на множину елементів (обробляючи кожен елемент окремо), а не завжди <em>1-1</em>. В цьому плані він протилежність метода <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/filter">filter</a>. Просто поверніть 1-елементний масив, щоб залишити елемент, багатоелементний масив, щоб додати елементи, або порожній масив, щоб видалити елемент.</p>
+
+<pre class="brush: js">// Припустимо, ми бажаємо видалити всі від'ємні числа та розбити непарні числа на парне число та 1
+let a = [5, 4, -3, 20, 17, -33, -4, 18]
+//       |\  \  x   |  | \   x   x   |
+//      [4,1, 4,   20, 16, 1,       18]
+
+a.flatMap( (n) =&gt;
+  (n &lt; 0) ?      [] :
+  (n % 2 == 0) ? [n] :
+                 [n-1, 1]
+)
+
+// очікуваний результат: [4, 1, 4, 20, 16, 1, 18]
+</pre>
+
+<h2 id="Альтернатива">Альтернатива</h2>
+
+<h3 id="reduce()_та_concat()"><code>reduce()</code> та <code>concat()</code></h3>
+
+<pre class="brush: js">var arr1 = [1, 2, 3, 4];
+
+arr1.flatMap(x =&gt; [x * 2]);
+// є еквівалентом
+arr1.reduce((acc, x) =&gt; acc.concat([x * 2]), []);
+// [2, 4, 6, 8]
+</pre>
+
+<p>Зауважте, однак, що цей метод краще не застосовувати для великих масивів, бо він буде неефективним: на кожній ітерації він створює новий тимчасовий масив, який треба прибирати збирачу сміття, і він копіює елементи з поточного масива-накопичувача у новий масив замість того, щоб просто додати нові елементи у існуючий масив.</p>
+
+<div class="hidden">
+<p>Будь ласка, не додавайте поліфіли у цю статтю. За довідкою, звертайтесь: <a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a></p>
+</div>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комент</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-flatMap/#sec-Array.prototype.flatMap"><code>Array.prototype.flatMap</code></a></td>
+   <td>Завершено (4)</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.flatMap")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.flat()")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/foreach/index.html b/files/uk/web/javascript/reference/global_objects/array/foreach/index.html
new file mode 100644
index 0000000000..97a354787f
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/foreach/index.html
@@ -0,0 +1,290 @@
+---
+title: Array.prototype.forEach()
+slug: Web/JavaScript/Reference/Global_Objects/Array/forEach
+tags:
+  - ECMAScript5
+  - JavaScript
+  - Method
+  - Prototype
+  - Довідка
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>forEach()</strong></code> виконує надану функцію один раз для кожного елемента масиву.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-foreach.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>arr.forEach(callback(currentValue [, index [, array]])[, thisArg]);</var></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Функція, що виконується для кожного елемента. Приймає три аргументи:</dd>
+ <dd>
+ <dl>
+  <dt><code>currentValue</code></dt>
+  <dd>Черговий елемент масиву, що обробляється.</dd>
+  <dt><code>index</code> {{optional_inline}}</dt>
+  <dd>Індекс чергового елемента в масиві.</dd>
+  <dt><code>array</code> {{optional_inline}}</dt>
+  <dd>Масив, для якого було викликано <code>forEach()</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code> {{optional_inline}}</dt>
+ <dd>
+ <p>Значення, що використовується як <code><strong>this</strong></code> при виконанні <code>callback</code>.</p>
+ </dd>
+</dl>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p><code>undefined</code>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>forEach()</code> викликає надану функцію <code>callback</code> для кожного елемента масиву у порядку зростання. Оминає властивості, які було видалено або не було <abbr title="ініціалізовано">започатковано</abbr> (тобто, в розріджених масивах, <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#sparseArray">дивіться приклад, наведений нижче</a>).</p>
+
+<p>Функція <em><code>callback</code></em> викликається з трьома аргументами:</p>
+
+<ol>
+ <li>значення елемента;</li>
+ <li>індекс елемента;</li>
+ <li>масив, що перебирається.</li>
+</ol>
+
+<p>Якщо для <code>forEach()</code> вказано параметр <em><code>thisArg</code></em>, його буде використано як <code>this</code> для функції <code>callback</code>. Зрештою значення <code>this</code> для функції <em><code>callback</code></em> визначатиметься відповідно до <a href="/uk/docs/Web/JavaScript/Reference/Operators/this">загальних правил</a>.</p>
+
+<p>Множина індексів елементів, що їх перебиратиме <code>forEach()</code> з'ясовується ще до першого виклику <em><code>callback</code></em>. Елементи, додані після здійснення виклику <code>forEach()</code>, буде знехтувано (<em><code>callback</code></em> для жодного з них не викликатиметься). Якщо змінити або видалити якийсь з елементів масиву, до функції <code>callback</code> потрапить те значення елемента, яке він мав безпосередньо перед відповідним викликом <code>callback</code>. Якщо елемент видалено до відвідування, відвідано не буде. Якщо вже відвіданий елемент видалено упродовж перебирання (наприклад, за допомогою {{jsxref("Array.prototype.shift()", "shift()")}}), подальші елементи будуть пропущені — <a href="#Якщо_масив_змінено_під_час_перебору_деякі_елементи_може_бути_пропущено">дивіться приклади нижче у статті</a>.</p>
+
+<p>Метод <code>forEach()</code> виконує функцію <em><code>callback</code></em> один раз для кожного елемента масиву. На відміну від {{jsxref("Array.prototype.map()", "map()")}} чи {{jsxref("Array.prototype.reduce()", "reduce()")}}, він завжди вертає значення {{jsxref("undefined")}}, тож продовжити ланцюжок викликів після нього неможливо. Досить типовим є виклик <code>forEach()</code> наприкінці ланцюжка методів з метою виконання додаткових дій.</p>
+
+<p>Сам метод <code>forEach()</code> не змінює масив, на якому його викликано, втім усередині функції <em><code>callback</code></em> це можливо.</p>
+
+<div class="note">
+<p><strong>Заувага:</strong> Зупинити чи перервати цикл <code>forEach()</code> неможливо без викидання винятку. Якщо вам це потрібно, метод <code>forEach()</code> — не ліпший вибір. </p>
+
+<p>Завчасне переривання може бути виконане за допомогою:</p>
+
+<ul>
+ <li>Простого циклу <a href="/uk/docs/Web/JavaScript/Reference/Statements/for">for</a></li>
+ <li>Циклів <a href="/uk/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a> / <a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in">for..in</a></li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.findIndex()")}}</li>
+</ul>
+
+<p>Методи масивів: {{jsxref("Array.prototype.every()", "every()")}}, {{jsxref("Array.prototype.some()", "some()")}}, {{jsxref("Array.prototype.find()", "find()")}} та {{jsxref("Array.prototype.findIndex()", "findIndex()")}} перевіряють елементи масиву функцією-предикатом, яка повертає правдиве значення, якщо наступна ітерація необхідна.</p>
+</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="sparseArray" name="sparseArray">Операція не виконується для неініціалізованих значень (розріджені масиви)</h3>
+
+<pre class="brush: js">const arraySparse = [1,3,,7];
+let numCallbackRuns = 0;
+
+arraySparse.forEach(function(element){
+  console.log(element);
+  numCallbackRuns++;
+});
+
+console.log("numCallbackRuns: ", numCallbackRuns);
+
+// 1
+// 3
+// 7
+// numCallbackRuns: 3
+// коментар: як бачите, пропущене значення між 3 та 7 не викликало функцію.</pre>
+
+<h3 id="Перетворення_циклу_for_на_forEach">Перетворення циклу for на forEach</h3>
+
+<pre class="brush: js">const items = ['щось', 'то', 'має', 'бути'];
+const copy = [];
+
+// було
+for (let i = 0; i &lt; items.length; i++) {
+  copy.push(items[i])
+}
+
+// стане
+items.forEach(function(item) {
+  copy.push(item)
+});</pre>
+
+<h3 id="Друк_вмісту_масиву">Друк вмісту масиву</h3>
+
+<div class="blockIndicator note">
+<p><strong>Заувага:</strong> Для того, щоб відобразити вміст масиву у консолі, ви можете скористатись методом {{domxref("Console/table", "console.table()")}}, який виведе відформатовану версію масиву. Наступний приклад ілюструє інший спосіб це зробити, за допомогою <code>forEach()</code>.</p>
+</div>
+
+<p>Наведений код виводить значення кожного елемента масиву з нового рядка:</p>
+
+<pre class="brush:js">function logArrayElements(element, index, array) {
+  console.log('array[' + index + '] = ' + element);
+}
+
+// Завважте, що індекс 2 буде пропущено,
+// позаяк елемента на тому місці в масиві немає.
+[2, 5, , 9].forEach(logArrayElements);
+
+// Буде виведено у консоль:
+// array[0] = 2
+// array[1] = 5
+// array[3] = 9
+</pre>
+
+<h3 id="Використання_thisArg">Використання <em><code>thisArg</code></em></h3>
+
+<p>Наведений приклад змінює властивості об'єкта відповідно до кожного елемента в отриманому масиві:</p>
+
+<pre class="brush:js">function Counter() {
+  this.sum = 0;
+  this.count = 0;
+}
+
+Counter.prototype.add = function(array) {
+  array.forEach(function(entry) {
+    this.sum += entry;
+    ++this.count;
+  }, this);
+  // ^---- Зверніть увагу!
+};
+
+const obj = new Counter();
+obj.add([2, 5, 9]);
+obj.count;
+// 3
+obj.sum;
+// 16
+</pre>
+
+<p>Оскільки для <code>forEach()</code> вказано параметр <code>thisArg</code>, для кожного виклику <code>callback</code> (тут безіменної функції) він вживатиметься як <code>this</code>.</p>
+
+<div class="note">
+<p>Якщо передавати аргумент функції за допомогою <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкового запису функції</a>, то параметр <em><code>thisArg</code></em> можна не вказувати, позаяк стрілкова функція лексично прив'язує значення {{jsxref("Operators/this", "this")}}.</p>
+</div>
+
+<h3 id="Функція_копіювання_об'єкта">Функція копіювання об'єкта</h3>
+
+<p>Наступний код створює копію наданого об'єкта. Існує чимало способів створення копії об'єкта. Наведений приклад є лише одним з них і насправді призначений лише для наочного пояснення того, як працює <code>Array.prototype.forEach()</code> на прикладі використання нових функцій ECMAScript 5 з <code>Object.*</code> для роботи з керованими властивостями:</p>
+
+<pre class="brush: js">function copy(obj) {
+  const copy = Object.create(Object.getPrototypeOf(obj));
+  const propNames = Object.getOwnPropertyNames(obj);
+
+  propNames.forEach(function(name) {
+    const desc = Object.getOwnPropertyDescriptor(obj, name);
+    Object.defineProperty(copy, name, desc);
+  });
+
+  return copy;
+}
+
+const obj1 = {a: 1, b: 2};
+const obj2 = copy(obj1);  // obj2 тепер схожий на obj1
+</pre>
+
+<h3 id="Якщо_масив_змінено_під_час_перебору_інші_елементи_може_бути_пропущено">Якщо масив змінено під час перебору, інші елементи може бути пропущено</h3>
+
+<p>Наведений приклад виводить у консоль послідовно "перший", "другий" та "четвертий". Коли перебір сягне другого елемента (що має значення "другий"), виклик <code>words.shift()</code> видалить перший елемент масиву, а всі, що лишаться, посунуться на одне місце ліворуч — "четвертий" стане наступним (після поточного), і "третій" таким чином буде пропущено:</p>
+
+<pre class="brush:js">var words = ['перший', 'другий', 'третій', 'четвертий'];
+
+words.forEach(function(word) {
+  console.log(word);
+
+  if (word === 'другий') {
+    words.shift();
+  }
+});
+
+// перший
+// другий
+// четвертий
+</pre>
+
+<h3 id="Вирівнювання_масиву">Вирівнювання масиву</h3>
+
+<p>Даний приклад наведено суто для навчальння. Якщо вам потрібно вирівняти масив вбудованими методами, ви можете скористатись методом {{jsxref("Array.prototype.flat()")}} (очікується у ES2019 та вже реалізований у деяких переглядачах).</p>
+
+<pre class="brush: js">/**
+* Вирівнює переданий масив у одномірний
+*
+* @params {array} arr
+* @returns {array}
+*/
+function flatten(arr) {
+  const result = [];
+
+  arr.forEach((i) =&gt; {
+    if (Array.isArray(i)) {
+      result.push(...flatten(i))
+    } else {
+      result.push(i)
+    }
+  });
+
+  return result;
+}
+
+// Використання
+const problem = [1, 2, 3, [4, 5, [6, 7], 8, 9]]
+
+flatten(problem) // [1, 2, 3, 4, 5, 6, 7, 8, 9]</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.18', 'Array.prototype.forEach')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Початкова виознака. Запроваджено у JavaScript 1.6.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div>
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Array.forEach")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.findIndex()")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("Array.prototype.filter()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Map.prototype.forEach()")}}</li>
+ <li>{{jsxref("Set.prototype.forEach()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/from/index.html b/files/uk/web/javascript/reference/global_objects/array/from/index.html
new file mode 100644
index 0000000000..7cfb6325b8
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/from/index.html
@@ -0,0 +1,242 @@
+---
+title: Array.from()
+slug: Web/JavaScript/Reference/Global_Objects/Array/from
+tags:
+  - Array
+  - ECMAScript6
+  - Масив
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/from
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>Array.from()</strong></code> створює новий екземпляр <code>Array</code> (дрібну копію) з подібного до масиву або ітерабельного об'єкта.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-from.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Array.from(<em>arrayLike</em>[, <em>mapFn</em>[, <em>thisArg</em>]])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>arrayLike</code></dt>
+ <dd>Подібний до масиву або ітерабельний об'єкт, який треба перетворити на масив.</dd>
+ <dt><code>mapFn</code> {{Optional_inline}}</dt>
+ <dd>Функція Map для виклику на кожному елементі масиву.</dd>
+ <dt><code>thisArg</code> {{Optional_inline}}</dt>
+ <dd>Значення <code>this</code> для функції <code>mapFn</code>.</dd>
+</dl>
+
+<h3 id="Значення_яке_повертається">Значення, яке повертається</h3>
+
+<p>Новий екземпляр {{jsxref("Array")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p><code>Array.from()</code> дозволяє створювати масиви з:</p>
+
+<ul>
+ <li>подібних до масивів об'єктів (об'єктів з властивістю <code>length</code> та елементами, що мають числові індекси) або</li>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/iterable">ітерабельних об'єктів</a> (об'єктів, з яких можна отримати елементи, таких як {{jsxref("Map")}} та {{jsxref("Set")}}).</li>
+</ul>
+
+<p><code>Array.from()</code> має необов'язковий параметр <code>mapFn</code>, який дозволяє виконати функцію {{jsxref("Array.prototype.map", "map")}} на кожному елементі масиву (або об'єкта підкласу), який створюється. Іншими словами, <code>Array.from(obj, mapFn, thisArg)</code> має той самий результат, що й <code>Array.from(obj).map(mapFn, thisArg)</code>, тільки він не створює проміжний масив. Це особливо важливо для певних підкласів масивів, таких як <a href="/uk/docs/Web/JavaScript/Typed_arrays">типізовані масиви</a>, оскільки проміжний масив обов'язково урізав би значення для перетворення у відповідний тип.</p>
+
+<p>Властивість <code>length</code> методу <code>from()</code> дорівнює 1.</p>
+
+<p>У ES2015, синтаксис класів дозволяє створення підкласів як для вбудованих класів, так і для тих, що створені користувачем; в результаті статичні методи, такі як <code>Array.from</code> "успадковуються" підкласами класу <code>Array</code> і створюють нові екземпляри підкласу, а не класу <code>Array</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Масив_з_рядка">Масив з рядка</h3>
+
+<pre class="brush: js">Array.from('foo');
+// [ "f", "o", "o" ]</pre>
+
+<h3 id="Масив_з_обєкта_Set">Масив з об'єкта <code>Set</code></h3>
+
+<pre class="brush: js">const set = new Set(['foo', 'bar', 'baz', 'foo']);
+Array.from(set);
+// [ "foo", "bar", "baz" ]</pre>
+
+<h3 id="Масив_з_обєкта_Map">Масив з об'єкта <code>Map</code></h3>
+
+<pre class="brush: js">const map = new Map([[1, 2], [2, 4], [4, 8]]);
+Array.from(map);
+// [[1, 2], [2, 4], [4, 8]]
+
+const mapper = new Map([['1', 'a'], ['2', 'b']]);
+Array.from(mapper.values());
+// ['a', 'b'];
+
+Array.from(mapper.keys());
+// ['1', '2'];
+</pre>
+
+<h3 id="Масив_з_подібного_до_масиву_обєкта_arguments">Масив з подібного до масиву об'єкта (arguments)</h3>
+
+<pre class="brush: js">function f() {
+  return Array.from(arguments);
+}
+
+f(1, 2, 3);
+
+// [ 1, 2, 3 ]</pre>
+
+<h3 id="Використання_стрілкових_функцій_та_Array.from">Використання стрілкових функцій та <code>Array.from()</code></h3>
+
+<pre class="brush: js">// Використання стрілкової функції в якості функції map
+// для маніпулювання елементами
+Array.from([1, 2, 3], x =&gt; x + x);
+// [2, 4, 6]
+
+
+// Генерування послідовності чисел
+// Оскільки масив ініціалізується значенням `undefined` на кожній позиції,
+// значення `v` нижче дорівнюватиме `undefined`
+Array.from({length: 5}, (v, i) =&gt; i);
+// [0, 1, 2, 3, 4]
+</pre>
+
+<h3 id="Генератор_послідовності_range">Генератор послідовності (range)</h3>
+
+<pre class="brush: js">// Функція генератора послідовності (зазвичай відома як "range", напр. у Clojure, PHP та ін.)
+const range = (start, stop, step) =&gt; Array.from({ length: (stop - start) / step + 1}, (_, i) =&gt; start + (i * step));
+
+// Згенерувати числа у діапазоні 0..4
+range(0, 4, 1);
+// [0, 1, 2, 3, 4]
+
+// Згенерувати числа у діапазоні 1..10 з кроком 2
+range(1, 10, 2);
+// [1, 3, 5, 7, 9]
+
+// Згенерувати алфавіт з допомогою Array.from, користуючись тим, що він впорядкований як послідовність
+range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x =&gt; String.fromCharCode(x));
+// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Метод <code>Array.from</code> був доданий до стандарту ECMA-262 у 6-й версії (ES2015); таким чином, він може не існувати у інших реалізаціях стандарту. Ви можете обійти цю проблему, вставивши наступний код на початку ваших скриптів, що дозволить використовувати метод <code>Array.from</code> у реалізаціях, які не мають його вбудованої підтримки. Цей алгоритм саме той, що визначений у ECMA-262, у 6-й версії, за умови, що <code>Object</code> та <code>TypeError</code> мають свої первинні значення і <code>callback.call</code> дорівнює первинному значенню {{jsxref("Function.prototype.call")}}. На додаток, оскільки справжні ітерабельні об'єкти не можуть мати поліфілу, ця реалізація не підтримує загальні ітерабельні об'єкти, визначені у 6-й версії ECMA-262.</p>
+
+<pre class="brush: js">// Функціональні кроки ECMA-262, версія 6, 22.1.2.1
+if (!Array.from) {
+  Array.from = (function () {
+    var toStr = Object.prototype.toString;
+    var isCallable = function (fn) {
+      return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
+    };
+    var toInteger = function (value) {
+      var number = Number(value);
+      if (isNaN(number)) { return 0; }
+      if (number === 0 || !isFinite(number)) { return number; }
+      return (number &gt; 0 ? 1 : -1) * Math.floor(Math.abs(number));
+    };
+    var maxSafeInteger = Math.pow(2, 53) - 1;
+    var toLength = function (value) {
+      var len = toInteger(value);
+      return Math.min(Math.max(len, 0), maxSafeInteger);
+    };
+
+    // Властивість length метода from дорівнює 1.
+    return function from(arrayLike/*, mapFn, thisArg */) {
+      // 1. Нехай C дорівнює значенню this.
+      var C = this;
+
+      // 2. Нехай items дорівнює ToObject(arrayLike).
+      var items = Object(arrayLike);
+
+      // 3. ReturnIfAbrupt(items).
+      if (arrayLike == null) {
+        throw new TypeError('Array.from requires an array-like object - not null or undefined');
+      }
+
+      // 4. Якщо mapfn дорівнює undefined, тоді нехай mapping дорівнює false.
+      var mapFn = arguments.length &gt; 1 ? arguments[1] : void undefined;
+      var T;
+      if (typeof mapFn !== 'undefined') {
+        // 5. інакше
+        // 5. а Якщо IsCallable(mapfn) дорівнює false, викинути виняток TypeError.
+        if (!isCallable(mapFn)) {
+          throw new TypeError('Array.from: when provided, the second argument must be a function');
+        }
+
+        // 5. б. Якщо надано thisArg, нехай T дорівнює thisArg; інакше нехай T дорівнює undefined.
+        if (arguments.length &gt; 2) {
+          T = arguments[2];
+        }
+      }
+
+      // 10. Нехай lenValue дорівнює Get(items, "length").
+      // 11. Нехай len дорівнює ToLength(lenValue).
+      var len = toLength(items.length);
+
+      // 13. Якщо IsConstructor(C) дорівнює true, тоді
+      // 13. а. Нехай A дорівнює результату виклику внутрішнього метода С [[Construct]]
+      // зі списком аргументів, що містить єдиний елемент len.
+      // 14. a. Інакше, нехай A дорівнює ArrayCreate(len).
+      var A = isCallable(C) ? Object(new C(len)) : new Array(len);
+
+      // 16. Нехай k дорівнює 0.
+      var k = 0;
+      // 17. Повторювати, доки k &lt; len… (також кроки a - h)
+      var kValue;
+      while (k &lt; len) {
+        kValue = items[k];
+        if (mapFn) {
+          A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
+        } else {
+          A[k] = kValue;
+        }
+        k += 1;
+      }
+      // 18. Нехай putStatus дорівнює Put(A, "length", len, true).
+      A.length = len;
+      // 20. Повернути A.
+      return A;
+    };
+  }());
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.from', 'Array.from')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Array.from")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("TypedArray.from()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/includes/index.html b/files/uk/web/javascript/reference/global_objects/array/includes/index.html
new file mode 100644
index 0000000000..3030f78d9f
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/includes/index.html
@@ -0,0 +1,135 @@
+---
+title: Array.prototype.includes()
+slug: Web/JavaScript/Reference/Global_Objects/Array/includes
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - polyfill
+  - Довідка
+  - Масив
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes
+---
+<div>{{JSRef}}</div>
+
+<p><font face="Open Sans, Arial, sans-serif">Метод </font><code><strong>includes()</strong></code> з'ясовує, чи масив містить елемент із вказаним значенням, та вертає відповідно <code>true</code> або <code>false</code>.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-includes.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">arr.includes(valueToFind[, fromIndex])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><em><code>valueToFind</code></em></dt>
+ <dd>Значення елемента, який слід знайти.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Примітка: </strong>При порівнянні рядків та літер, <code>includes()</code> <strong>чутливий до регістру</strong>.</p>
+</div>
+
+<dl>
+ <dt><em>fromIndex</em> {{optional_inline}}</dt>
+ <dd>Позиція у масиві, з якої потрібно починати пошук <code>valueToFind</code>; перша літера шукатиметься за індексом <code>fromIndex</code>, якщо <code>fromIndex</code> є позитивним значенням, або за індексом <code>array.length + fromIndex</code>, якщо <code>fromIndex</code> від'ємний (використовуючи {{interwiki("wikipedia", "Модуль_(математика)", "абсолютну величину")}} <code>fromIndex</code> як кількість літер з кінця масиву, де потрібно починати пошук). За замовчуванням дорівнює 0.</dd>
+</dl>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>Значення {{jsxref("Boolean")}}, яке дорівнює <code>true</code>, якщо значення <code>valueToFind</code> знайдене у масиві (або у частині масиву, якщо заданий параметр <code>fromIndex</code>). Всі нульові значення вважаються рівними, незалежно від знаку (тому -0 вважатиметься рівним і 0, і +0), але <code>false</code> не вважається тим самим, що й 0.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примітка:</strong> Технічно кажучи, <code>includes()</code> використовує алгоритм <code><a href="/uk/docs/Web/JavaScript/Equality_comparisons_and_sameness#Same-value-zero_equality">sameValueZero</a></code> для визначення того, чи знайдено заданий елемент.</p>
+</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">[1, 2, 3].includes(2);      // true
+[1, 2, 3].includes(4);      // false
+[1, 2, 3].includes(3, 3);   // false
+[1, 2, 3].includes(3, -1);  // true
+[1, 2, NaN].includes(NaN);  // true
+</pre>
+
+<h3 id="fromIndex_більший_або_дорівнює_довжині_масиву"><em><code>fromIndex</code></em> більший або дорівнює довжині масиву</h3>
+
+<p>Якщо <em><code>fromIndex</code></em> дорівнює або перевищує довжину масиву, пошук не здійснюється й завжди вертається <code>false</code>:</p>
+
+<pre class="brush: js">var arr = ['a', 'b', 'c'];
+
+arr.includes('c', 3);    // вертає false
+arr.includes('c', 100);  // вертає false</pre>
+
+<h3 id="Обчислений_індекс_менший_за_0">Обчислений індекс менший за 0</h3>
+
+<p>Якщо значення <em><code>fromIndex</code></em> від'ємне, використовується обчислений індекс для визначення позиції, з якої починати пошук <em><code>valueToFind</code></em> у масиві. Якщо обчислений індекс менший або дорівнює <code>-1 * array.length</code>, пошук здійснюється у всьому масиві.</p>
+
+<pre class="brush: js">// Довжина масиву дорівнює 3
+// fromIndex дорівнює -100
+// Обчислений індекс дорівнює 3 + (-100) = -97
+
+var arr = ['a', 'b', 'c'];
+
+arr.includes('a', -100); // true
+arr.includes('b', -100); // true
+arr.includes('c', -100); // true
+arr.includes('a', -2); // false</pre>
+
+<h3 id="Застосування_includes()_як_загального_метода">Застосування <code>includes()</code> як загального метода</h3>
+
+<p>Реалізація метода <code>includes()</code> є зумисне узагальненою. Об'єкт, на який вказує <code>this</code>, не обов'язково повинен належати до класу <code>Array</code>, тож використання <code>includes()</code> можна поширити на інші масивоподібні об'єкти. В наведеному нижче прикладі його застосовано до об'єкта <code>{{jsxref("Functions/arguments", "arguments")}}</code>:</p>
+
+<pre class="brush: js">(function() {
+  console.log([].includes.call(arguments, 'a'));  // виводить true
+  console.log([].includes.call(arguments, 'd'));  // виводить false
+})('a','b','c');
+</pre>
+
+<div class="hidden">
+<p>Будь ласка, не додавайте поліфіли у довідкові статті. Більше інформації дивіться у дискусії <a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a></p>
+</div>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td>
+   <td>{{Spec2('ES7')}}</td>
+   <td>Початкова виознака.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Array.includes")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray.prototype.includes()")}}</li>
+ <li>{{jsxref("String.prototype.includes()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.findIndex()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/index.html b/files/uk/web/javascript/reference/global_objects/array/index.html
new file mode 100644
index 0000000000..18045d9c84
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/index.html
@@ -0,0 +1,431 @@
+---
+title: Array
+slug: Web/JavaScript/Reference/Global_Objects/Array
+tags:
+  - Array
+  - JavaScript
+  - Масив
+translation_of: Web/JavaScript/Reference/Global_Objects/Array
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Array</code></strong> є глобальним об'єктом, що використовується для створення масивів; які є високорівневими, спископодібними об'єктами.</p>
+
+<p><strong>Створення масиву</strong></p>
+
+<pre class="brush: js">var fruits = ["Яблуко", "Банан"];
+
+console.log(fruits.length);
+// 2
+</pre>
+
+<p><strong>Доступ до елементів масиву (за індексом)</strong></p>
+
+<pre class="brush: js">var first = fruits[0];
+// Яблуко
+
+var last = fruits[fruits.length - 1];
+// Банан
+</pre>
+
+<p><strong>Обхід елементів масиву</strong></p>
+
+<pre class="brush: js">fruits.forEach(function (item, index, array) {
+  console.log(item, index);
+});
+// Яблуко 0
+// Банан 1
+</pre>
+
+<p><strong>Додавання в кінець масиву</strong></p>
+
+<pre class="brush: js">var newLength = fruits.push("Апельсин");
+// ["Яблуко", "Банан", "Апельсин"]
+</pre>
+
+<p><strong>Видалення елемента з кінця масиву</strong></p>
+
+<pre class="brush: js">var last = fruits.pop(); // видалити Апельсин (з кінця)
+// ["Яблуко", "Банан"];
+</pre>
+
+<p><strong>Видалення елемента з початку масиву</strong></p>
+
+<pre class="brush: js">var first = fruits.shift(); // видалити Яблуко з початку
+// ["Банан"];
+</pre>
+
+<p><strong>Додавання елемента до початку масиву</strong></p>
+
+<pre class="brush: js">var newLength = fruits.unshift("Полуниця") // додади до початку
+// ["Полуниця", "Банан"];
+</pre>
+
+<p><strong>Пошук індексу елемента в масиві</strong></p>
+
+<pre class="brush: js">fruits.push("Манго");
+// ["Полуниця", "Банан", "Манго"]
+
+var pos = fruits.indexOf("Банан");
+// 1
+</pre>
+
+<p><strong>Видалення елемента масиву за його індексом (позицією)</strong></p>
+
+<pre class="brush: js">var removedItem = fruits.splice(pos, 1); // ось, як видаляється елемент
+// ["Полуниця", "Манго"]
+</pre>
+
+<p><strong>Видалення елементів починаючи з певного індексу</strong></p>
+
+<pre class="brush: js">var vegetables = ['Капуста', 'Ріпа', 'Редька', 'Морква'];
+console.log(vegetables);
+// ["Капуста", "Ріпа", "Редька", "Морква"]
+
+var pos = 1, n = 2;
+
+var removedItems = vegetables.splice(pos, n);
+// ось так видаляються елементи, n визначає кількість елементів на видалення,
+// від цієї позиції (pos) в напрямку кінця масиву.
+
+console.log(vegetables);
+// ["Капуста", "Морква"] (початковий масив змінено)
+
+console.log(removedItems);
+// ["Ріпа", "Редька"]</pre>
+
+<p><strong>Копіювання масиву</strong></p>
+
+<pre class="brush: js">var shallowCopy = fruits.slice(); // ось так робиться копія
+// ["Полуниця", "Манго"]
+</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>]
+new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]])
+new Array(<var>arrayLength</var>)</code>
+</pre>
+
+<dl>
+ <dt>
+ <h3 id="Параметри">Параметри</h3>
+ </dt>
+</dl>
+
+<p><code>element<em>N</em></code></p>
+
+<dl>
+ <dd>Масив у JavaScript ініціалізується за допомогою наперед заданих елементів, за виключенням тієї ситуації коли в конструктор <code>Array</code> передається тільки один аргумент і він є числом (див. параметр <code>arrayLength</code> нижче). Зверніть увагу на те, що це спрацьовує лише у тому випадку, якщо масив створено за допомогою  конструктора <code>Array</code>, а не через літерали масивів створених з допомогою синтаксу квадратних дужок.</dd>
+ <dt><code>arrayLength</code></dt>
+ <dd>Якщо єдиним аргументом (вхідним параметром) конструктора <code>Array</code> є ціле число від 0 до 2<sup>32</sup>-1 (включно), буде повернено новий JavaScript-масив з властивістю length рівною цьому числу.  <strong>Зверніть увагу</strong>, що цей масив матиме пусті слоти, а не слоти зі значеннями <code>undefined</code>. Якщо аргументом буде будь-яке інше число, виникне виняток <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/RangeError">RangeError</a>.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Масиви - це спископодібні об'єкти, чий прототип має методи для операцій обходу та зміни масиву. Ані довжина масиву, ані типи його елементів не є незмінними. Довжина масиву може змінитись будь-коли, як і позиція даних в масиві; тому їх використання залежить від рішення програміста. Взагалі, це зручні характеристики; але якщо ці особливості не є бажаними для ваших конкретних цілей, ви можете розглянути можливість використання типізованих масивів.</p>
+
+<p>Масиви не можуть використовувати рядки у якості індексів елементів (як <a href="https://uk.wikipedia.org/wiki/%D0%90%D1%81%D0%BE%D1%86%D1%96%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D0%B8%D0%B9_%D0%BC%D0%B0%D1%81%D0%B8%D0%B2">асоціативні масиви</a>), а тільки цілі числа(індекси). Присвоєння або звернення через не цілочисельні значення, з використанням <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">квадратних дужок</a> (або <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Operators/Property_Accessors">через крапку</a>), не присвоїть або не отримає елемент з самого списку масиву, але присвоїть чи отримає доступ до змінної, пов'язаної з <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Data_structures#Properties">колекцією властивостей об'єкта</a>(властивості) цього масиву. Об'єктні властивості масиву та список елементів масиву є відокремленими, і <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Guide/Indexed_collections#Array_methods">операції обходу та зміни </a>цього масиву не застосовуються до цих іменованих властивостей.</p>
+
+<h3 id="Доступ_до_елементів_масиву">Доступ до елементів масиву</h3>
+
+<p>Масиви в JavaScript індексуються з нуля: перший елемент масиву має індекс, який дорівнює 0, а індекс останнього елемента відповідає значенню властивості масиву {{jsxref("Array.length", "length")}} мінус 1. Використання неправильного індексу повертає <code>undefined</code>.</p>
+
+<pre class="brush: js">var arr = ['це перший елемент', 'це другий елемент'];
+console.log(arr[0]);              // виводить 'це перший елемент'
+console.log(arr[1]);              // виводить 'це другий елемент'
+console.log(arr[arr.length - 1]); // виводить 'це другий елемент'
+</pre>
+
+<p>Елементи масиву є властивостями об'єкта, так само, як <code>toString</code> є властивістю, але спроби звернутися до елемента масиву наступним чином згенерує синтаксичну помилку через неправильне ім'я властивості:</p>
+
+<pre class="brush: js">console.log(arr.0); // є синтаксична помилка
+</pre>
+
+<p>В масивах JavaScript немає нічого особливого, що призводить до цього. До властивостей JavaScript, які починаються з цифри, не можна звертатися через крапку; необхідно звертатися через квадратні дужки. Наприклад, якщо ви маєте об'єкт з властивістю під назвою <code>'3d'</code>, до неї можна звертатися тільки через квадратні дужки. Приклад:</p>
+
+<pre class="brush: js">var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
+console.log(years.0);   // є синтаксична помилка
+console.log(years[0]);  // працює вірно
+</pre>
+
+<pre class="brush: js">renderer.3d.setTexture(model, 'character.png');     // є синтаксична помилка
+renderer['3d'].setTexture(model, 'character.png');  // працює вірно
+</pre>
+
+<p>Зверніть увагу, що <code>'3d'</code> має писатися в лапках. Індекси масивів JavaScript також можна писати в лапках (напр., <code>years['2']</code> замість <code>years[2]</code>), хоча це не обов'язково. Індекс 2 у <code>years[2]</code> примусово перетворюється на рядок рушієм JavaScript через неявне перетворення <code>toString</code>. Саме через це <code>'2'</code> та <code>'02'</code> займали б два різні слоти в об'єкті <code>years</code> і наступний приклад дорівнював би <code>true</code>:</p>
+
+<pre class="brush: js">console.log(years['2'] != years['02']);
+</pre>
+
+<p>Схожим чином до властивостей об'єкта, які є зарезервованими словами (!) можна звертатися тільки через рядкові значення у квадратних дужках (але до них можна звертатися через крапку у firefox 40.0a2 наприклад):</p>
+
+<pre class="brush: js">var promise = {
+  'var'  : 'text',
+  'array': [1, 2, 3, 4]
+};
+
+console.log(promise['array']);
+</pre>
+
+<h3 id="Зв'язок_між_length_та_числовими_властивостями">Зв'язок між <code>length</code> та числовими властивостями</h3>
+
+<p>У масивах JavaScript властивість {{jsxref("Array.length", "length")}} та числові властивості взаємопов'язані. Декілька з вбудованих методів масивів (напр., {{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}}, і т.д.) враховують значення властивості {{jsxref("Array.length", "length")}} під час виконання. Інші методи (напр., {{jsxref("Array.push", "push")}}, {{jsxref("Array.splice", "splice")}}, і т.д.) призводять до зміни властивості масиву {{jsxref("Array.length", "length")}}.</p>
+
+<pre class="brush: js">var fruits = [];
+fruits.push('банан', 'яблуко', 'персик');
+
+console.log(fruits.length); // 3
+</pre>
+
+<p>Присвоєння властивості до масиву JavaScript змінить властивість масиву {{jsxref("Array.length", "length")}} відповідним чином, якщо властивість є коректним індексом масиву, і цей індекс знаходиться поза поточними межами масиву:</p>
+
+<pre class="brush: js">fruits[5] = 'манго';
+console.log(fruits[5]); // 'манго'
+console.log(Object.keys(fruits));  // ['0', '1', '2', '5']
+console.log(fruits.length); // 6
+</pre>
+
+<p>Збільшення значення {{jsxref("Array.length", "length")}}.</p>
+
+<pre class="brush: js">fruits.length = 10;
+console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
+console.log(fruits.length); // 10
+</pre>
+
+<p>Однак, зменшення значення властивості {{jsxref("Array.length", "length")}} видаляє елементи.</p>
+
+<pre class="brush: js">fruits.length = 2;
+console.log(Object.keys(fruits)); // ['0', '1']
+console.log(fruits.length); // 2
+</pre>
+
+<p>Це пояснюється далі на сторінці {{jsxref("Array.length")}}.</p>
+
+<h3 id="Створення_масиву_з_використанням_результату_пошуку_збігів">Створення масиву з використанням результату пошуку збігів</h3>
+
+<p>Пошук збігів між регулярним виразом та рядком може створити масив JavaScript. Цей масив має властивості та елементи, які надають інформацію про збіг. Такий масив повертається методами {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}} та {{jsxref("String.replace")}}. Щоб краще пояснити ці властивості та елементи, подивіться на наступний приклад, а тоді зверніться до таблиці нижче:</p>
+
+<pre class="brush: js">// Пошук послідовності з однієї d, далі одна або більше b, далі одна d
+// Запам'ятати всі b і d, яка йде за ними
+// Ігнорувати регістр
+
+var myRe = /d(b+)(d)/i;
+var myArray = myRe.exec('cdbBdbsbz');
+</pre>
+
+<p>Властивості та елементи, які повертаються в результаті даного пошуку збігів:</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td class="header">Властивість/Елемент</td>
+   <td class="header">Опис</td>
+   <td class="header">Приклад</td>
+  </tr>
+  <tr>
+   <td><code>input</code></td>
+   <td>Властивість тільки для читання, відображає початковий рядок, в якому виконується пошук збігів з регулярним виразом.</td>
+   <td>cdbBdbsbz</td>
+  </tr>
+  <tr>
+   <td><code>index</code></td>
+   <td>Властивість тільки для читання, індекс збігу у рядку, нумерується з нуля.</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td><code>[0]</code></td>
+   <td>Елемент тільки для читання, який містить символи останнього збігу.</td>
+   <td>dbBd</td>
+  </tr>
+  <tr>
+   <td><code>[1], ...[n]</code></td>
+   <td>Елементи тільки для читання, які містять підрядки збігу, що заключені у дужки, якщо такі є у регулярному виразі. Кількість можливих підрядків у дужках є необмеженою.</td>
+   <td>[1]: bB<br>
+    [2]: d</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt><code>Array.length</code></dt>
+ <dd>Властивість length конструктора <code>Array</code>, дорівнює 1.</dd>
+ <dt>{{jsxref("Array.prototype")}}</dt>
+ <dd>Дозволяє додавати властивості до усіх масивів.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<dl>
+ <dt>{{jsxref("Array.from()")}}</dt>
+ <dd>Створює новий екземпляр <code>Array</code> з подібного до масиву або ітерабельного об'єкта.</dd>
+ <dt>{{jsxref("Array.isArray()")}}</dt>
+ <dd>Повертає true, якщо змінна є масивом, якщо ні, то повертає false.</dd>
+ <dt>{{jsxref("Array.of()")}}</dt>
+ <dd>Створює новий екземпляр <code>Array</code> з кількістю аргументів, заданих через змінну, незважаючи на кількість або тип аргументів.</dd>
+</dl>
+
+<h2 id="Екземпляри_Array"><code>Екземпляри Array</code></h2>
+
+<p>Всі екземпляри <code>Array</code> наслідуються від {{jsxref("Array.prototype")}}. Прототип конструктора <code>Array</code> може бути змінений, що вплине на всі екземпляри <code>Array</code>.</p>
+
+<h3 id="Властивості_2">Властивості</h3>
+
+<div>{{page('uk/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Властивості')}}</div>
+
+<h3 id="Методи_2">Методи</h3>
+
+<h4 id="Методи_модифікації">Методи модифікації</h4>
+
+<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Методи_модифікації')}}</div>
+
+<h4 id="Методи_доступу">Методи доступу</h4>
+
+<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Методи_доступу')}}</div>
+
+<h4 id="Методи_перебору">Методи перебору</h4>
+
+<div>{{page('uk/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Методи_перебору')}}</div>
+
+<h2 id="Загальні_методи_масивів">Загальні методи масивів</h2>
+
+<div class="warning">
+<p><strong>Загальні методи масивів є нестандартними, застарілими і будуть прибрані найближчим часом.</strong></p>
+</div>
+
+<p>Іноді ви б хотіли застосувати методи масивів на рядках або інших подібних до масиву об'єктах (таких як {{jsxref("Functions/arguments", "arguments", "", 1)}} у функції). В такому випадку, ви розглядаєте рядок як масив символів (чи не об'єкт масиву як масив). Наприклад, для того, щоб перевірити, що кожний символ у змінній <var>str</var> є літерою, ви б написали:</p>
+
+<pre class="brush: js">function isLetter(character) {
+  return character &gt;= 'a' &amp;&amp; character &lt;= 'z';
+}
+
+if (Array.prototype.every.call(str, isLetter)) {
+  console.log("Рядок '" + str + "' містить тільки літери!");
+}
+</pre>
+
+<p>Такий запис є доволі марнотратним, і у JavaScript 1.6 було запроваджено загальне скорочення:</p>
+
+<pre class="brush: js">if (Array.every(str, isLetter)) {
+  console.log("Рядок '" + str + "' містить тільки літери!");
+}</pre>
+
+<p>{{jsxref("Global_Objects/String", "Загальні методи", "#String_generic_methods", 1)}} також доступні у {{jsxref("String", "рядках")}}.</p>
+
+<p>Вони <strong>не є</strong> частиною стандартів ECMAScript і не підтримуються не Gecko оглядачами. У якості стандартної альтернативи, ви можете перетворити ваш об'єкт на справжній масив з допомогою методу {{jsxref("Array.from()")}}; хоча цей метод може не підтримуватися у старих оглядачах:</p>
+
+<pre class="brush: js">if (Array.from(str).every(isLetter)) {
+  console.log("Рядок '" + str + "' містить тільки літери!");
+}</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Створення_масиву">Створення масиву</h3>
+
+<p>Наступний приклад створює масив <code>msgArray</code> довжиною 0, потім додає значення елементам <code>msgArray[0]</code> та <code>msgArray[99]</code>, змінюючи довжину масиву на 100.</p>
+
+<pre class="brush: js">var msgArray = [];
+msgArray[0] = 'Привіт';
+msgArray[99] = 'світ';
+
+if (msgArray.length === 100) {
+  console.log('Довжина масиву 100.');
+}
+</pre>
+
+<h3 id="Створення_двовимірного_масиву">Створення двовимірного масиву</h3>
+
+<p>Наступний код створює шахівницю у вигляді двовимірного масиву рядків. Перший хід робиться копіюванням 'п' з (6,4) до (4,4). Стара позиція (6,4) робиться порожньою.</p>
+
+<pre class="brush: js">var board = [
+  ['Т','Н','С','Ф','К','С','Н','Т'],
+  ['П','П','П','П','П','П','П','П'],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  ['п','п','п','п','п','п','п','П'],
+  ['т','н','с','ф','к','с','н','т'] ];
+
+console.log(board.join('\n') + '\n\n');
+
+// Перемістити королівського пішака вперед на 2
+board[4][4] = board[6][4];
+board[6][4] = ' ';
+console.log(board.join('\n'));
+</pre>
+
+<p>Ось результат:</p>
+
+<pre class="eval">Т,Н,С,Ф,К,С,Н,Т
+П,П,П,П,П,П,П,П
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+п,п,п,п,п,п,п,п
+т,н,с,ф,к,с,н,т
+
+Т,Н,С,Ф,К,С,Н,Т
+П,П,П,П,П,П,П,П
+ , , , , , , ,
+ , , , , , , ,
+ , , , ,п, , ,
+ , , , , , , ,
+п,п,п,п, ,п,п,п
+т,н,с,ф,к,с,н,т
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4', 'Array')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Додано нові методи: {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array-objects', 'Array')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Додано нові методи: {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Додано новий метод: {{jsxref("Array.prototype.includes()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-оглядачами">Сумісність з веб-оглядачами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Array")}}</p>
+
+<div id="compat-mobile"></div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Working_with_Objects#Indexing_object_properties">JavaScript Guide: “Indexing object properties”</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">JavaScript Guide: “Predefined Core Objects: <code>Array</code> Object”</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a></li>
+ <li><a href="https://github.com/plusdude/array-generics">Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Typed_arrays">Типізовані масиви</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/indexof/index.html b/files/uk/web/javascript/reference/global_objects/array/indexof/index.html
new file mode 100644
index 0000000000..049c3ab869
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/indexof/index.html
@@ -0,0 +1,260 @@
+---
+title: Array.prototype.indexOf()
+slug: Web/JavaScript/Reference/Global_Objects/Array/indexOf
+tags:
+  - Array
+  - JavaScript
+  - Масив
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>indexOf()</strong></code> повертає перший індекс, за яким даний елемент був знайдений в масиві, а якщо він відсутній, то повертає -1.</p>
+
+<div class="note">
+<p><strong>Примітка:</strong> Щодо метода String, дивіться {{jsxref("String.prototype.indexOf()")}}.</p>
+</div>
+
+<pre class="brush: js">var a = [2, 9, 9];
+a.indexOf(2); // 0
+a.indexOf(7); // -1
+
+if (a.indexOf(7) === -1) {
+  // елемент не існує у масиві
+}
+</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>arr</var>.indexOf(<var>searchElement[</var>, <var>fromIndex]</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>searchElement</code></dt>
+ <dd>Елемент, який потрібно знайти.</dd>
+ <dt><code>fromIndex</code> {{optional_inline}}</dt>
+ <dd>Індекс, з якого починається пошук. Якщо індекс більше або дорівнює довжині масиву, повертається  -1, що означає, що масив не буде шукатися. Якщо значення показника є від'ємним числом, то воно трактується як зміщення від кінця масиву.</dd>
+ <dd><code>Примітка:</code> якщо наданий індекс від'ємний, масив все ще ітерується спереду назад. Якщо індекс  рівний 0, то буде проведений пошук по всьому масиву. За замовчуванням: 0 (виконується пошук по всьому масиву).</dd>
+</dl>
+
+<h3 id="Значення_яке_повертається">Значення, яке повертається</h3>
+
+<p>Перший індекс елемента в масиві; якщо не знайдено, то <strong>-1</strong>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p><code>indexOf()</code> порівнює <code>searchElement</code> з елементами Масиву, використовуючи <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">строгу рівність</a> (той самий метод, що використовується з допомогою <code>===</code> або потрійним дорівнює).</p>
+
+<h2 id="Приклад">Приклад</h2>
+
+<h3 id="Використання_indexOf()">Використання <code>indexOf()</code></h3>
+
+<p>У наступному прикладі <code>indexOf()</code> використовується для пошуку значень в масиві.</p>
+
+<pre class="brush: js">var array = [2, 9, 9];
+array.indexOf(2);     // 0
+array.indexOf(7);     // -1
+array.indexOf(9, 2);  // 2
+array.indexOf(2, -1); // -1
+array.indexOf(2, -3); // 0
+</pre>
+
+<h3 id="Пошук_всіх_відопвідностей_на_елементі">Пошук всіх відопвідностей на елементі</h3>
+
+<pre class="brush: js">var indices = [];
+var array = ['a', 'b', 'a', 'c', 'a', 'd'];
+var element = 'a';
+var idx = array.indexOf(element);
+while (idx != -1) {
+  indices.push(idx);
+  idx = array.indexOf(element, idx + 1);
+}
+console.log(indices);
+// [0, 2, 4]
+</pre>
+
+<h3 id="Пошук_чи_існує_елемент_в_масиві_і_його_оновлення">Пошук, чи існує елемент в масиві, і його оновлення </h3>
+
+<pre class="brush: js">function updateVegetablesCollection (veggies, veggie) {
+    if (veggies.indexOf(veggie) === -1) {
+        veggies.push(veggie);
+        console.log('Оновлений набір овочів : ' + veggies);
+    } else if (veggies.indexOf(veggie) &gt; -1) {
+        console.log(veggie + ' вже існує у наборі овочів.');
+    }
+}
+
+var veggies = ['картопля', 'помідор', 'чилі', 'зелений перець'];
+
+updateVegetablesCollection(veggies, 'шпинат');
+// Оновлений набір овочів: картопля,помідор,чилі,зелений перець,шпинат
+updateVegetablesCollection(veggies, 'шпинат');
+// шпинат вже існує у наборі овочів.
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p><code>indexOf()</code> був доданий в стандарт ECMA-262 в 5-му виданні; як такий він може бути присутнім не у всіх браузерах. Це можна обійти, використовуючи наступний код на початку скриптів. Це дозволить вам використовувати метод <code>indexOf()</code>, коли ще немає вбудованої підтримки в браузері. Цей алгоритм збігається із зазначеною в ECMA-262, 5-е видання, припускаючи, що{{jsxref("Global_Objects/TypeError", "TypeError")}} і {{jsxref("Math.abs()")}} має свої оригінальні значення.</p>
+
+<pre class="brush: js">if (!Array.prototype.indexOf) {
+  Array.prototype.indexOf = function indexOf(member, startFrom) {
+    /*
+   У спрощеному режимі, якщо змінна `this` має значення null або
+ undefined, то вона встановлюється в об'єкт window. В іншому випадку
+ `this` автоматично перетворюється в об'єкт. У строгому режимі, якщо
+ змінна 'this' має значення null або undefined, генерується 'TypeError'.
+    */
+    if (this == null) {
+      throw new TypeError("Array.prototype.indexOf() - can't convert `" + this + "` to object");
+    }
+
+    var
+      index = isFinite(startFrom) ? Math.floor(startFrom) : 0,
+      that = this instanceof Object ? this : new Object(this),
+      length = isFinite(that.length) ? Math.floor(that.length) : 0;
+
+    if (index &gt;= length) {
+      return -1;
+    }
+
+    if (index &lt; 0) {
+      index = Math.max(length + index, 0);
+    }
+
+    if (member === undefined) {
+      /*
+        Оскільки `member` не визначено, ключі, які не існують,
+        будуть мати те ж значення, що і `member`, і, отже, повинні
+        бути перевірені.
+      */
+      do {
+        if (index in that &amp;&amp; that[index] === undefined) {
+          return index;
+        }
+      } while (++index &lt; length);
+    } else {
+      do {
+        if (that[index] === member) {
+          return index;
+        }
+      } while (++index &lt; length);
+    }
+
+    return -1;
+  };
+}</pre>
+
+<p>Однак, якщо ви більше зацікавлені у всіх маленьких технічних бітах, визначених стандартом ECMA, і менше стурбовані продуктивністю або лаконічністю, то ви можете знайти це більш описове заповнення більш корисним.</p>
+
+<pre class="brush: js">// Кроки продукції ECMA-262, Edition 5, 15.4.4.14
+// Посилання: http://es5.github.io/#x15.4.4.14
+if (!Array.prototype.indexOf) {
+  Array.prototype.indexOf = function(searchElement, fromIndex) {
+
+    var k;
+
+    // 1. Нехай o є результатом виклику ToObject, що передає це
+    //    значення в якості аргументу.
+    if (this == null) {
+      throw new TypeError('"this" is null or not defined');
+    }
+
+    var o = Object(this);
+
+    // 2. Нехай lenValue є результатом виклику Get,
+    //    внутрішнього методу o з аргументом "length".
+    // 3. Нехай len буде ToUint32(lenValue).
+    var len = o.length &gt;&gt;&gt; 0;
+
+    // 4. Якщо len рівне 0, return -1.
+    if (len === 0) {
+      return -1;
+    }
+
+    // Якщо аргумент fromIndex був переданий, let n =
+    // ToInteger(fromIndex); інакше let n = 0.
+    var n = fromIndex | 0;
+
+    // 6. Якщо n &gt;= len, return -1.
+    if (n &gt;= len) {
+      return -1;
+    }
+
+    // 7. Якщо n &gt;= 0, то нехай k дорівнює n.
+    // 8. Інакше, n&lt;0, нехай k дорівнює len - abs(n).
+    //    Якщо k менше, ніж 0, тоді нехай k дорівнює 0.
+    k = Math.max(n &gt;= 0 ? n : len - Math.abs(n), 0);
+
+    // 9. Повторювати, доки k &lt; len
+    while (k &lt; len) {
+      // а. Нехай Pk дорівнює ToString(k). Це неочевидно для лівосторонніх операндів оператора in
+      // б. Нехай kPresent буде результатом виклику
+      //    внутрішнього метода o HasProperty з аргументом Pk.
+      //    Цей крок можна поєднати з в
+      // в. Якщо kPresent дорівнює true, тоді
+      //    i.  Нехай elementK буде результатом виклику
+      //        внутрішнього метода o Getwith з аргументом ToString(k).
+      //   ii.  Нехай те саме буде результатом застосування
+      //        Алгоритму Строгого Порівняння (Strict Equality Comparison Algorithm)
+      //        до searchElement та elementK.
+      //  iii.  Якщо те саме дорівнює true, повернути k.
+      if (k in o &amp;&amp; o[k] === searchElement) {
+        return k;
+      }
+      k++;
+    }
+    return -1;
+  };
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Початкове визначення. Реалізовано у JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.indexOf")}}</p>
+</div>
+
+<h2 id="Примітки_щодо_сумісності">Примітки щодо сумісності</h2>
+
+<ul>
+ <li>Починаючи з Firefox 47 {{geckoRelease(47)}},  цей метод більше не повертатиме <code>-0</code>. Наприклад, <code>[0].indexOf(0, -0)</code> тепер завжди повертатиме <code>+0</code> ({{bug(1242043)}}).</li>
+</ul>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/isarray/index.html b/files/uk/web/javascript/reference/global_objects/array/isarray/index.html
new file mode 100644
index 0000000000..8f7b888535
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/isarray/index.html
@@ -0,0 +1,131 @@
+---
+title: Array.isArray()
+slug: Web/JavaScript/Reference/Global_Objects/Array/isArray
+tags:
+  - Array
+  - ECMAScript5
+  - JavaScript
+  - Method
+  - polyfill
+  - Довідка
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray
+---
+<div>{{JSRef}}</div>
+
+<div>Метод <code><strong>Array.isArray()</strong></code> з'ясовує, чи є передане значення {{jsxref("Array", "масивом")}}.</div>
+
+<div></div>
+
+<pre class="brush: js">Array.isArray([1, 2, 3]);    // true
+Array.isArray({foo: 123});   // false
+Array.isArray('foobar');     // false
+Array.isArray(undefined);    // false
+</pre>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox">Array.isArray(<var>value</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Значення, яке має бути перевірено.</dd>
+</dl>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>Значення <code>true</code>, якщо <code>value</code> є {{jsxref("Array", "масивом")}}; <code>false</code> — якщо ні.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо передане значення є {{jsxref("Array", "масивом")}}, повертається <code>true</code>, інакше повертається <code>false</code>.</p>
+
+<p>Більш докладні відомості дивіться у статті «<a href="http://web.mit.edu/jwalden/www/isArray.html">Як з'ясувати абсолютно точно, чи є об'єкт у JavaScript масивом</a>». При використанні екземпляра {{jsxref("TypedArray")}} завжди повертається <code>false</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">//Всі наведені далі виклики вертають true:
+Array.isArray([]);
+Array.isArray([1]);
+Array.isArray(new Array());
+Array.isArray(new Array('a', 'b', 'c', 'd'));
+Array.isArray(new Array(3));
+// Маловідомий факт: Array.prototype сам є масивом:
+Array.isArray(Array.prototype);
+
+//Всі наведені далі виклики вертають false:
+Array.isArray();
+Array.isArray({});
+Array.isArray(null);
+Array.isArray(undefined);
+Array.isArray(17);
+Array.isArray('Array');
+Array.isArray(true);
+Array.isArray(false);
+Array.isArray(new Uint8Array(32));
+Array.isArray({ __proto__: Array.prototype });</pre>
+
+<h3 id="instanceof_проти_isArray"><code>instanceof</code> проти <code>isArray</code></h3>
+
+<p>Для перевірки, чи є об'єкт екземпляром <code>Array</code>, метод <code>Array.isArray</code> підходить краще, ніж <code>instanceof</code>, тому що він працює між фреймами (<code>iframes</code>).</p>
+
+<pre class="brush: js">var iframe = document.createElement('iframe');
+document.body.appendChild(iframe);
+xArray = window.frames[window.frames.length-1].Array;
+var arr = new xArray(1,2,3); // [1,2,3]
+
+// Коректна перевірка екземпляра Array
+Array.isArray(arr);  // true
+// Вважається небезпечним, бо не працює між фреймами
+arr instanceof Array; // false</pre>
+
+<h2 id="Запасний_варіант_(поліфіл)">Запасний варіант (поліфіл)</h2>
+
+<p>Наступний код, запущений перед будь-яким іншим кодом, створить метод <code>Array.isArray()</code>, якщо він недоступний початково.</p>
+
+<pre class="brush: js">if (!Array.isArray) {
+  Array.isArray = function(arg) {
+    return Object.prototype.toString.call(arg) === '[object Array]';
+  };
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Початкова виознака. Запроваджено у JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Array.isArray")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/join/index.html b/files/uk/web/javascript/reference/global_objects/array/join/index.html
new file mode 100644
index 0000000000..116fb03bec
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/join/index.html
@@ -0,0 +1,114 @@
+---
+title: Array.prototype.join()
+slug: Web/JavaScript/Reference/Global_Objects/Array/join
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Масив
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/join
+---
+<div>{{JSRef}}</div>
+
+<p><code>Метод<strong> join()</strong></code> створює та повертає рядок, що об'єднує всі елементи масиву (або <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">подібного до масиву об'єкта</a>), розділені комами або заданим роздільником. Якщо масив містить лише один елемент, то він буде повернений без роздільника.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-join.html")}}</div>
+
+<p class="hidden">Джерело цього інтерактивного прикладу знаходиться в GitHub репозиторії. Якщо ви бажаєте зробити внесок до проекту інтерактивних прикладів, будь ласка, склонуйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та надішліть нам пулл реквест.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>arr</var>.join(<em>[</em><var>separator]</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>separator</code> {{optional_inline}}</dt>
+ <dd>Визначає рядок, що розділить кожну пару сусідніх елементів масиву. Роздільник перетворюється на рядок, якщо це необхідно. Якщо він пропущений, елементи масиву будуть розділені комою (","). Якщо <code>separator</code> є порожнім рядком, усі елементи будуть обʼєднані без жодних знаків між ними.</dd>
+</dl>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>Рядок з усіма обʼєднаними елементами масиву. Якщо <code><em>arr</em>.length</code> дорівнює  <code>0</code>, буде повернений порожній рядок.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Рядкові представлення усіх елементів масиву поєднуються в один рядок.</p>
+
+<div class="warning">
+<p>Якщо елемент дорівнює <code>undefined</code> або <code>null</code>, він перетворюється на порожній рядок.</p>
+</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Обʼєднання_масиву_різними_шляхами">Обʼєднання масиву різними шляхами</h3>
+
+<p class="syntaxbox">В наступному прикладі створюється масив <code>a</code> із трьома елементами, після чого поєднується чотири рази: використовуючи роздільник за замовчуванням, кому та пробіл, плюс, порожній рядок.</p>
+
+<pre class="brush: js">var a = ['Вітер', 'Вода', 'Вогонь'];
+a.join();      // 'Вітер,Вода,Вогонь'
+a.join(', ');  // 'Вітер, Вода, Вогонь'
+a.join(' + '); // 'Вітер + Вода + Вогонь'
+a.join('');    // 'ВітерВодаВогонь'</pre>
+
+<h3 id="Обʼєднання_подібного_до_масиву_об'єкта">Обʼєднання подібного до масиву об'єкта</h3>
+
+<p>В наступному прикладі подібний до масиву об'єкт (<code><a href="/uk/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code>) об'єднується шляхом виклику {{jsxref("Function.prototype.call")}} для <code>Array.prototype.join</code>.</p>
+
+<pre class="brush: js">function f(a, b, c) {
+  var s = Array.prototype.join.call(arguments);
+  console.log(s); // '<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">1,a,true'</span></span></span></span>
+}
+f(1, 'a', true);
+//очікуваний результат: "1,a,true"
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення. Запроваджено у JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div>
+<div class="hidden">Таблиця сумісності на цій сторінці створена з структурованих даних. Якщо ви бажаєте зробити внесок,  будь ласка, перевірте  <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> та надішліть нам пулл реквест.</div>
+
+<p>{{Compat("javascript.builtins.Array.join")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("Array.prototype.toString()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.join()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/keys/index.html b/files/uk/web/javascript/reference/global_objects/array/keys/index.html
new file mode 100644
index 0000000000..d631dea894
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/keys/index.html
@@ -0,0 +1,82 @@
+---
+title: Array.prototype.keys()
+slug: Web/JavaScript/Reference/Global_Objects/Array/keys
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Prototype
+  - Довідка
+  - Масив
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/keys
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>keys()</strong></code> вертає новий об'єкт <abbr title="Array Iterator">перебирача</abbr> ключів (індексів) масиву.</p>
+
+
+
+<p>{{EmbedInteractiveExample("pages/js/array-keys.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>arr</var>.keys()</pre>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>Новий об'єкт <abbr title="ітератора">перебирача</abbr> {{jsxref("Array")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Перебирач_ключів_розрідженого_масиву_не_оминає_прогалин">Перебирач ключів розрідженого масиву не оминає прогалин</h3>
+
+<pre class="brush: js">var arr = ['a', , 'c'];
+var sparseKeys = Object.keys(arr);
+var denseKeys = [...arr.keys()];
+console.log(sparseKeys);  // виводить ['0', '2']
+console.log(denseKeys);   // виводить [0, 1, 2]
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкова виознака.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div>
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Array.keys")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.values()")}}</li>
+ <li>{{jsxref("Array.prototype.entries()")}}</li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору">Протоколи перебору</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/lastindexof/index.html b/files/uk/web/javascript/reference/global_objects/array/lastindexof/index.html
new file mode 100644
index 0000000000..97ae6e5457
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/lastindexof/index.html
@@ -0,0 +1,166 @@
+---
+title: Array.prototype.lastIndexOf()
+slug: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf
+tags:
+  - Array
+  - ECMAScript5
+  - JavaScript
+  - Масив
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>lastIndexOf()</strong></code> повертає останній індекс, за яким заданий елемент було знайдено у масиві, або -1, якщо елемент не знайдено. Пошук відбувається в зворотному порядку, починаючи з індексу <code>fromIndex</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-lastindexof.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>arr</var>.lastIndexOf(<var>searchElement[</var>, <var>fromIndex]</var>)
+</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>searchElement</code></dt>
+ <dd>Елемент, який потрібно знайти у масиві.</dd>
+ <dt><code>fromIndex</code> {{optional_inline}}</dt>
+ <dd>Індекс, з якого починається пошук у зворотному порядку. За замовченням дорівнює довжині масиву мінус один (<code>arr.length - 1</code>), тобто пошук відбуватиметься у всьому масиві. Якщо індекс більше або дорівнює довжині масиву, пошук відбуватиметься у всьому масиві. Якщо індекс є від'ємним, він вважається відступом від кінця масиву. Зверніть увагу, що навіть якщо індекс є від'ємним, пошук все одно відбувається з кінця масиву. Якщо обчислений індекс є від'ємним, повертається -1, тобто пошук не відбувається.</dd>
+</dl>
+
+<h3 id="Значення_яке_повертається">Значення, яке повертається</h3>
+
+<p>Останній індекс елемента у масиві; <strong>-1</strong>, якщо елемент не знайдений.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>lastIndexOf</code> порівнює <code>searchElement</code> з елементами масиву, використовуючи <a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Ідентичність_строга_рівність_()">строгу рівність</a> (метод, що використовує оператор === або потрійне дорівнює).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_lastIndexOf">Використання <code>lastIndexOf</code></h3>
+
+<p>Наступний приклад використовує <code>lastIndexOf</code>, щоб знайти значення у масиві.</p>
+
+<pre class="brush: js">var numbers = [2, 5, 9, 2];
+numbers.lastIndexOf(2);     // 3
+numbers.lastIndexOf(7);     // -1
+numbers.lastIndexOf(2, 3);  // 3
+numbers.lastIndexOf(2, 2);  // 0
+numbers.lastIndexOf(2, -2); // 0
+numbers.lastIndexOf(2, -1); // 3
+</pre>
+
+<h3 id="Знаходження_всіх_позицій_входжень_елемента">Знаходження всіх позицій входжень елемента</h3>
+
+<p>Наступний приклад використовує <code>lastIndexOf</code>, щоб знайти всі індекси елемента у заданому масиві, використовуючи {{jsxref("Array.prototype.push", "push")}}, щоб додати їх до іншого масиву по мірі знаходження.</p>
+
+<pre class="brush: js">var indices = [];
+var array = ['a', 'b', 'a', 'c', 'a', 'd'];
+var element = 'a';
+var idx = array.lastIndexOf(element);
+while (idx != -1) {
+  indices.push(idx);
+  idx = (idx &gt; 0 ? array.lastIndexOf(element, idx - 1) : -1);
+}
+
+console.log(indices);
+// [4, 2, 0]
+</pre>
+
+<p>Зверніть увагу, що ми маємо окремо обробити випадок <code>idx == 0</code>, тому що елемент завжди буде знайдений, незважаючи на параметр  <code>fromIndex</code>, якщо це перший елемент масиву. В цьому відмінність від методу {{jsxref("Array.prototype.indexOf", "indexOf")}}.</p>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Метод <code>lastIndexOf</code> був доданий до стандарту ECMA-262 у 5-й версії; таким чином, він може не бути присутній в інших реалізаціях стандарту. Ви можете обійти цю проблему, вставивши наступний код на початку ваших скриптів, це дозволить використовувати <code>lastIndexOf</code> у реалізаціях, які не підтримують його початково. Цей алгоритм є саме тим, що зазначений у 5-й версії ECMA-262, за умови, що {{jsxref("Object")}}, {{jsxref("TypeError")}}, {{jsxref("Number")}}, {{jsxref("Math.floor")}}, {{jsxref("Math.abs")}} та {{jsxref("Math.min")}} мають свої початкові значення.</p>
+
+<pre class="brush: js">// Функціональні кроки ECMA-262, версії 5, 15.4.4.15
+// Довідка: http://es5.github.io/#x15.4.4.15
+if (!Array.prototype.lastIndexOf) {
+  Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) {
+    'use strict';
+
+    if (this === void 0 || this === null) {
+      throw new TypeError();
+    }
+
+    var n, k,
+      t = Object(this),
+      len = t.length &gt;&gt;&gt; 0;
+    if (len === 0) {
+      return -1;
+    }
+
+    n = len - 1;
+    if (arguments.length &gt; 1) {
+      n = Number(arguments[1]);
+      if (n != n) {
+        n = 0;
+      }
+      else if (n != 0 &amp;&amp; n != (1 / 0) &amp;&amp; n != -(1 / 0)) {
+        n = (n &gt; 0 || -1) * Math.floor(Math.abs(n));
+      }
+    }
+
+    for (k = n &gt;= 0 ? Math.min(n, len - 1) : len - Math.abs(n); k &gt;= 0; k--) {
+      if (k in t &amp;&amp; t[k] === searchElement) {
+        return k;
+      }
+    }
+    return -1;
+  };
+}
+</pre>
+
+<p>Знову ж таки, зауважте, що ця реалізація прагне повної сумісності з <code>lastIndexOf</code> у Firefox на рушії JavaScript SpiderMonkey, в тому числі у декількох можливих граничних ситуаціях. Якщо ви плануєте використовувати її у застосунках з реального життя, то можете обраховувати <code>from</code> менш складним кодом, якщо знехтуєте цими ситуаціями.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.15', 'Array.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.lastIndexOf")}}</p>
+</div>
+
+<h2 id="Примітки_щодо_сумісності">Примітки щодо сумісності</h2>
+
+<ul>
+ <li>Починаючи з Firefox 47 {{geckoRelease(47)}}, цей метод більше не повертатиме <code>-0</code>. Для прикладу, <code>[0].lastIndexOf(0, -0)</code> тепер завжди повертатиме <code>+0</code> ({{bug(1242043)}}).</li>
+</ul>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/length/index.html b/files/uk/web/javascript/reference/global_objects/array/length/index.html
new file mode 100644
index 0000000000..c407dc290b
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/length/index.html
@@ -0,0 +1,139 @@
+---
+title: array.length
+slug: Web/JavaScript/Reference/Global_Objects/Array/length
+tags:
+  - Array
+  - JavaScript
+  - Property
+  - Властивість
+  - Масив
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/length
+---
+<div>{{JSRef}}</div>
+
+<p>Властивість <code><strong>length</strong></code> об'єкта, який є екземпляром типу <code>Array</code>, встановлює або повертає кількість елементів у цьому масиві. Значення є цілим беззнаковим 32-бітним числом, що завжди є більшим за найбільший індекс у масиві.</p>
+
+<p><span style="font-size: 1rem; letter-spacing: -0.00278rem;">{{EmbedInteractiveExample("pages/js/array-length.html")}}</span></p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Опис"><strong style="color: #4d4e53; font-size: 2.143rem; font-weight: 700; letter-spacing: -1px;">О</strong><strong style="color: #4d4e53; font-size: 2.143rem; font-weight: 700; letter-spacing: -1px;">пис</strong></h2>
+
+<p>Значенням властивості <code>length</code> є ціле додатне число, менше за 2 в степені 32 (2<sup>32</sup>).</p>
+
+<pre class="brush: js">var namelistA = new Array(4294967296); //2 в степені 32 = 4294967296
+var namelistC = new Array(-100) //від'ємне число
+
+console.log(namelistA.length); //RangeError: Invalid array length
+console.log(namelistC.length); //RangeError: Invalid array length
+
+var namelistB = [];
+namelistB.length = Math.pow(2,32)-1; //встановити довжину масиву меншу, ніж 2 в степені 32
+console.log(namelistB.length);
+
+//4294967295</pre>
+
+<p>Ви можете присвоїти значення властивості <code>length</code>, щоб скоротити масив. Коли ви розширюєте масив, змінюючи його довжину (властивість <code>length</code>), збільшується кількість фактичних елементів; наприклад, якщо ви присвоїли <code>length</code> 3, коли елементів насправді 2, масив тепер містить 3 елементи, в результаті третій є неітерабельним порожнім елементом.</p>
+
+<pre class="brush: js">var arr = [1, 2];
+console.log(arr);
+// [ 1, 2 ]
+
+arr.length = 5; // встановити довжину 5, маючи 2 елементи.
+console.log(arr);
+// [ 1, 2, &lt;3 порожні елементи&gt; ]
+
+arr.forEach(element =&gt; console.log(element));
+// 1
+// 2</pre>
+
+<p class="brush: js">Таким чином, поле <code>length</code> не обов'язково вказує на кількість визначених значень у масиві. Дивіться також <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array#Зв'язок_між_length_та_числовими_властивостями" title="Relationship between length and numerical properties">Зв'язок між length та числовими властивостями</a>.</p>
+
+<p>{{js_property_attributes(1, 0, 0)}}</p>
+
+<ul>
+ <li><code>Writable (Доступний для запису)</code>: Якщо цей атрибут встановлений у <code>false</code>, значення цієї властивості не можна змінити.</li>
+ <li><code>Enumerable (Доступний для переліку)</code>: Якщо цей атрибут встановлений у <code>true</code>, властивість ітерується під час виконання циклів <a href="/uk/docs/Web/JavaScript/Reference/Statements/for">for</a> або <a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in">for..in</a>.</li>
+ <li><code>Configurable (Доступний для налаштування)</code>: Якщо цей атрибут встановлений у <code>false</code>, будь-які спроби видалити властивість або змінити її атрибути (доступність для запису, переліку або налаштування) не спрацюють.</li>
+</ul>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Циклічне_проходження_по_масиву">Циклічне проходження по масиву</h3>
+
+<p>В наступному прикладі, проходження по масиву <code>numbers</code> відбувається зважаючи на властивість <code>length</code>. Значення кожного елементу подвоюється.</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3, 4, 5];
+
+for (var i = 0; i &lt; numbers.length; i++) {
+  numbers[i] *= 2;
+}
+// numbers тепер [2, 4, 6, 8, 10]
+</pre>
+
+<h3 id="Скорочення_масиву">Скорочення масиву</h3>
+
+<p>Наступний приклад скорочує масив <code>statesUS</code> до довжини 3, якщо його поточна довжина більша, ніж 3.</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3, 4, 5];
+
+if (numbers.length &gt; 3) {
+  numbers.length = 3;
+}
+
+console.log(numbers); // [1, 2, 3]
+console.log(numbers.length); // 3</pre>
+
+<h3 id="Створення_порожнього_масиву_фіксованої_довжини">Створення порожнього масиву фіксованої довжини</h3>
+
+<pre class="brush: js">var numbers = [];
+numbers.length = 10;
+console.log(numbers); // [empty × 10]</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Array.length")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/map/index.html b/files/uk/web/javascript/reference/global_objects/array/map/index.html
new file mode 100644
index 0000000000..2c71a1fe6f
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/map/index.html
@@ -0,0 +1,349 @@
+---
+title: Array.prototype.map()
+slug: Web/JavaScript/Reference/Global_Objects/Array/map
+tags:
+  - Array
+  - ECMAScript5
+  - JavaScript
+  - Масив
+  - метод
+  - поліфіл
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/map
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>map()</strong></code> <strong>створює новий масив</strong> з результатами виклику наданої функції на кожному елементі масиву, який викликав метод.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-map.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request." </p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js"><var>var new_array = arr.map(function callback(currentValue[, index[, array]]) {
+    // Повернути елемент нового масиву new_array
+}[, thisArg])</var></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Функція, яка повертає елемент нового масиву. Приймає три аргументи:</dd>
+ <dd>
+ <dl>
+  <dt><code>currentValue</code></dt>
+  <dd>Поточний елемент масиву.</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>Індекс поточного елементу масиву</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd>Сам масив, на якому був викликаний <code>map</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code>{{optional_inline}}</dt>
+ <dd>Значення, що буде використане як <code>this</code> при виконанні <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається_(return_value)">Значення, що повертається (return value)</h3>
+
+<p>Новий масив, кожен елемент якого є результатом функції <code>callback</code>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>map</code> викликає передану <code>callback-функцію</code> <strong>один раз для кожного елементу</strong> масиву, в заданому порядку, та створює новий масив з результатів. <code>callback</code> викликаться тільки для індексів яким відповідають значення, включно з <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a>. Функція не викликається для елеметів значення яких відсутні (мається на увазі, індекси які не були явно задані, які були видалені або яким не було присвоєне значення).</p>
+
+<p>Остільки <code>map</code> створює новий масив, викликати його, якщо ви не збираєтесь використовувати повернений масив, є антишаблоном; скористайтесь натомість <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach"><code>forEach</code></a> або <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Statements/for...of"><code>for-of</code></a>. Ознаки того, що вам не підходить метод <code>map</code>: А) Ви не використовуєте масив, який він повертає, і/або Б) Ви не повертаєте значення у функції <code>callback</code>.</p>
+
+<p><code>callback</code> викликається з трьома аргументами: значення елемента, індекс елемента, та масив на якому операцію було викликано.</p>
+
+<p>Якщо <code>thisArg</code> параметр переданий в <code>map</code>, він буде використовуватись як ключове слово this  для <code>callback-функції</code>. В іншому випадку, значення {{jsxref("undefined")}} буде використане як <code>this</code>. Значення this, яке спостерігається в callback-функції, в кінцевому рахунку визначається згідно <a href="/uk/docs/Web/JavaScript/Reference/Operators/this">звичайних правил для визначення this, видимого з функції</a>.</p>
+
+<p><code>map</code> не змінює масив, на якому був викликаний (хоча <code>callback</code>, якщо був викликаний, може змінити).</p>
+
+<p>Діапазон елементів, які обробляє метод map, визначений до того як callback-функція буде визвана вперше. Елементи які будуть додані до масиву після виклику map, не будуть оброблені callback-функцією. Якщо існуючі в масиві елементи змінені або видалені, їхні значення при потраплянні в callback-функцію, будуть такими якими вони є на той час коли map обробляє їх. Елементи які були видалені до і після того як map був визваний, ігноруються. </p>
+
+<p>Згідно з алгоритмом, визначеним у специфікації, якщо масив на якому було викликано map, розріджений, то масив на виході теж буде розрідженим, залишаючи ті ж самі індекси пустими.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Перетворення_масиву_з_числами_в_масив_квадратних_коренів">Перетворення масиву з числами в масив квадратних коренів</h3>
+
+<p>Наступний код бере масив з числами і створює новий масив, який складається з квадратних коренів чисел з першого масиву.</p>
+
+<pre class="brush: js">var numbers = [1, 4, 9];
+var roots = numbers.map(function(num) {
+return Math.sqrt(num)
+});
+// roots тепер [1, 2, 3]
+// numbers залишається [1, 4, 9]
+</pre>
+
+<h3 id="Використання_map_для_переформатування_об'єктів_в_масиві">Використання map для переформатування об'єктів в масиві</h3>
+
+<p>Наступний код використовує масив з об'єктами щоб створити новий масив з переформатованими об'єктами.</p>
+
+<pre class="brush: js">var kvArray = [{key:1, value:10},
+               {key:2, value:20},
+               {key:3, value: 30}];
+
+var reformattedArray = kvArray.map(obj =&gt;{
+   var rObj = {};
+   rObj[obj.key] = obj.value;
+   return rObj;
+});
+// reformattedArray тепер [{1:10}, {2:20}, {3:30}],
+
+// kvArray залишається:
+// [{key:1, value:10},
+//  {key:2, value:20},
+//  {key:3, value: 30}]
+</pre>
+
+<h3 id="Перетворення_масиву_чисел_використовуючи_функцію_з_аргументом">Перетворення масиву чисел використовуючи функцію з аргументом</h3>
+
+<p>Наступний код показує як map працює коли функція що потребує один аргумент, використовує його.  Аргумент буде автоматично присвоєний з кожного елементу масиву коли map буде проходитись по оригінальному масиву..</p>
+
+<pre class="brush: js">var numbers = [1, 4, 9];
+var doubles = numbers.map(function(num) {
+  return num * 2;
+});
+
+// doubles тепер [2, 8, 18]
+// numbers залишається [1, 4, 9]
+</pre>
+
+<h3 id="Загальне_використання_map">Загальне використання <code>map</code></h3>
+
+<p>Цей приклад показує як використовувати map на рядках ({{jsxref("String")}}) щоб отримати масив байтів в ASCII кодуванні яке відображає значення літер:</p>
+
+<pre class="brush: js">var map = Array.prototype.map;
+var a = map.call('Hello World', function(x) {
+   return x.charCodeAt(0);
+});
+// a тепер дорівнює [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
+</pre>
+
+<h3 id="Загальне_використання_map_з_querySelectorAll">Загальне використання <code>map</code> з <code>querySelectorAll</code></h3>
+
+<p>Даний приклад показує, як виконати перебір набору об'єктів, отриманих методом <code>querySelectorAll</code>. Тому що метод <code>querySelectorAll</code> повертає <strong><em>NodeList</em></strong>, який є колекцією об'єктів.</p>
+
+<p>У даному випадку ми повертаємо значення всіх вибраних опцій на екрані:</p>
+
+<pre class="brush: js">var elems = document.querySelectorAll('select option:checked');
+var values = Array.prototype.map.call(elems, function(obj) {
+  return obj.value;
+});
+</pre>
+
+<p>Це простіше зробити методом {{jsxref("Array.from()")}}.</p>
+
+<h3 id="Хитрий_спосіб_використання">Хитрий спосіб використання</h3>
+
+<p>(<a href="http://www.wirfs-brock.com/allen/posts/166">натхненний цим блог-постом</a>)</p>
+
+<p>Загальноприйнято використовувати функцію callback з одним аргументом (елемент по якому проходиться функція). Деякі функції також використовуються з одним аргументом, хоча можуть приймати і більше додаткових аргументів, що не є обов'язковими. Це може призводити до неочікуваної поведінки.</p>
+
+<p>Розглянемо:</p>
+
+<pre class="brush: js">["1", "2", "3"].map(parseInt);</pre>
+
+<p>Хоча можна було б очікувати <code>[1, 2, 3]</code>, справжнім результатом буде <code>[1, NaN, NaN]</code>.</p>
+
+<p>Метод <code>parseInt</code> часто використовується з одним аргументом, але приймає два. Перший - це вираз, а другий - основа системи числення для функції зворотного виклику. <code>Array.prototype.map</code> передає 3 аргументи:</p>
+
+<ul>
+ <li>елемент</li>
+ <li>індекс</li>
+ <li>масив</li>
+</ul>
+
+<p>Третій аргумент ігнорується методом parseInt, <u>але не другий</u>, звідси й можлива плутанина. Ось стислий огляд кроків перебору:</p>
+
+<pre class="brush: js">// parseInt(string, radix) -&gt; map(parseInt(value, index))
+/*  first iteration (index is 0): */ parseInt("1", 0); // 1
+/* second iteration (index is 1): */ parseInt("2", 1); // NaN
+/*  third iteration (index is 2): */ parseInt("3", 2); // NaN</pre>
+
+<p>Поговоримо про рішення.</p>
+
+<pre class="brush: js">function returnInt(element) {
+  return parseInt(element, 10);
+}
+
+['1', '2', '3'].map(returnInt); // [1, 2, 3]
+// Результатом є масив чисел (як і очікувалось)
+
+// Те саме, але з використанням лаконічного стрілкового синтаксису
+['1', '2', '3'].map( str =&gt; parseInt(str) );
+
+// Простіший спосіб досягти вищевказаного
+['1', '2', '3'].map(Number); // [1, 2, 3]
+
+// На відміну від parseInt(), Number() також поверне десятковий або експоненціальний запис:
+['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]
+// Для порівняння, якщо використати parseInt() для попереднього масиву:
+['1.1', '2.2e2', '3e300'].map( str =&gt; parseInt(str) ); // [1, 2, 3]</pre>
+
+<p>Ще один варіант результату метода map, що викликається з parseInt в якості параметра, виглядає наступним чином:</p>
+
+<pre class="brush: js">var xs = ['10', '10', '10'];
+
+xs = xs.map(parseInt);
+
+console.log(xs);
+// Результат 10,NaN,2 може бути неочікуваним, з огляду вищеописане.</pre>
+
+<h3 id="Масив_містить_значення_undefined">Масив містить значення undefined</h3>
+
+<p>Коли повертається undefined або нічого не повертається:</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3, 4];
+var filteredNumbers = numbers.map(function(num, index) {
+  if(index &lt; 2) {
+     return num;
+  }
+});
+// filteredNumbers дорівнює [1, 2, undefined, undefined]
+// numbers досі дорівнює [1, 2, 3, 4]</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p><font face="Consolas, Liberation Mono, Courier, monospace">Метод <code>map</code> </font>був доданий до ECMA-262 стандарту в 5-тій редакції; тому він може бути присутнім не у всіх реалізаціях стандарту. Ви можете обійти це, вставляючи наступний код на початок вашого скритпу, дозволяючи використовувати map в реалізаціях які ще його не підтримують. Цей алгоритм є точно таким який вказаний в  ECMA-262, 5му виданні, передбачаючи що {{jsxref("Object")}}, {{jsxref("TypeError")}}, і {{jsxref("Array")}} мають свої власні значення  і що <code>callback.call</code> обчислює початкове значення <code>{{jsxref("Function.prototype.call")}}</code>.</p>
+
+<pre class="brush: js">// Функціональні кроки ECMA-262, версія 5, 15.4.4.19
+// Довідка: http://es5.github.io/#x15.4.4.19
+if (!Array.prototype.map) {
+
+  Array.prototype.map = function(callback, thisArg) {
+
+    var T, A, k;
+
+    if (this == null) {
+      throw new TypeError(' this is null or not defined');
+    }
+
+    // 1. Нехай O дорівнює результату виклику ToObject з |this|
+    //    в якості аргументу.
+    var O = Object(this);
+
+    // 2. Нехай lenValue дорівнює результату виклику внутрішнього методу O
+    //    Get з аргументом "length".
+    // 3. Нехай len дорівнює ToUint32(lenValue).
+    var len = O.length &gt;&gt;&gt; 0;
+
+    // 4. Якщо IsCallable(callback) дорівнює false, викинути виняток TypeError.
+    // Див.: http://es5.github.com/#x9.11
+    if (typeof callback !== 'function') {
+      throw new TypeError(callback + ' is not a function');
+    }
+
+    // 5. Якщо надано thisArg, нехай T дорівнює thisArg; інакше нехай T дорівнює undefined.
+    if (arguments.length &gt; 1) {
+      T = thisArg;
+    }
+
+    // 6. Нехай A дорівнює новому масиву, створеному виразом new Array(len),
+    //    де Array - це стандартний вбудований конструктор з таким ім'ям,
+    //    а len дорівнює значенню len.
+    A = new Array(len);
+
+    // 7. Нехай k дорівнює 0
+    k = 0;
+
+    // 8. Повторювати, доки k &lt; len
+    while (k &lt; len) {
+
+      var kValue, mappedValue;
+
+      // а. Нехай Pk дорівнює ToString(k).
+      //   Цей метод неявно застосовується до лівого операнда оператора in
+      // б. Нехай kPresent дорівнює результату виклику внутрішнього методу O
+      //    HasProperty з аргументом Pk.
+      //   Цей крок можна об'єднати з в
+      // в. Якщо kPresent дорівнює true, тоді
+      if (k in O) {
+
+        // і. Нехай kValue дорівнює результату виклику внутрішнього методу O
+        //    Get з аргументом Pk.
+        kValue = O[k];
+
+        // ii. Нехай mappedValue дорівнює результату виклику внутрішнього
+        //     методу callback Call з T у якості значення this та списком
+        //     аргументів, що містить kValue, k та O.
+        mappedValue = callback.call(T, kValue, k, O);
+
+        // iii. Викликати внутрішній метод A DefineOwnProperty з аргументами
+        // Pk, Property Descriptor
+        // { Value: mappedValue,
+        //   Writable: true,
+        //   Enumerable: true,
+        //   Configurable: true },
+        // та false.
+
+        // У переглядачах, що підтримують Object.defineProperty, використовуйте:
+        // Object.defineProperty(A, k, {
+        //   value: mappedValue,
+        //   writable: true,
+        //   enumerable: true,
+        //   configurable: true
+        // });
+
+        // Для найкращої підтримки переглядачів, використовуйте:
+        A[k] = mappedValue;
+      }
+      // г. Збільшити k на 1.
+      k++;
+    }
+
+    // 9. повернути A
+    return A;
+  };
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>
+    <p>Початкове визначення. Реалізоване в JavaScript 1.6.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Array.map")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>Об'єкт {{jsxref("Map")}}</li>
+ <li>{{jsxref("Array.from()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/observe/index.html b/files/uk/web/javascript/reference/global_objects/array/observe/index.html
new file mode 100644
index 0000000000..3e3a386c83
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/observe/index.html
@@ -0,0 +1,89 @@
+---
+title: Array.observe()
+slug: Web/JavaScript/Reference/Global_Objects/Array/observe
+tags:
+  - JavaScript
+  - Масив
+  - застарілий
+  - метод
+translation_of: Archive/Web/JavaScript/Array.observe
+---
+<div>{{JSRef}} {{obsolete_header}}</div>
+
+<p>Метод <strong><code>Array.observe()</code></strong> використовувався для асинхронного спостереження за змінами у масивах, схоже на  {{jsxref("Object.observe()")}} у об'єктах. Він надавав послідовність змін в порядку виникнення. Як і <code>Object.observe()</code>, він викликається з допустимим списком типів <code>["add", "update", "delete", "splice"]</code>. Однак, цей API застарілий та був прибраний з переглядачів. Ви можете натомість використати більш загальний об'єкт {{jsxref("Proxy")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Array.observe(<var>arr</var>, <var>callback</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>arr</code></dt>
+ <dd>Масив для спостереження.</dd>
+ <dt><code>callback</code></dt>
+ <dd>Функція, яка викликається кожен раз, коли відбуваються зміни, з наступним аргументом:
+ <dl>
+  <dt><code>changes</code></dt>
+  <dd>Масив об'єктів, кожен з яких відображає зміну. Властивості цих об'єктів змін:
+  <ul>
+   <li><strong><code>name</code></strong>: Ім'я властивості, яка була змінена.</li>
+   <li><strong><code>object</code></strong>: Змінений масив після того, як відбулась зміна.</li>
+   <li><strong><code>type</code></strong>: Строка, що вказує тип зміни. Один з <code>"add"</code>, <code>"update"</code>, <code>"delete"</code>, або <code>"splice"</code>.</li>
+   <li><strong><code>oldValue</code></strong>: Тільки для типів <code>"update"</code> та <code>"delete"</code>. Значення перед зміною.</li>
+   <li><strong><code>index</code></strong>: Тільки для типу <code>"splice"</code>. Індекс, за яким відбулася зміна.</li>
+   <li><strong><code>removed</code></strong>: Тільки для типу <code>"splice"</code>. Масив видалених елементів.</li>
+   <li><strong><code>addedCount</code></strong>: Тільки для типу <code>"splice"</code>. Кількість доданих елементів.</li>
+  </ul>
+  </dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Функція <code>callback</code> викликається кожен раз, коли у <code>arr</code> відбувається зміна, з масивом усіх змін у порядку, в якому вони відбувались.</p>
+
+<div class="note">
+<p>Зміни, зроблені методами масивів, такими як <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop"><code>Array.prototype.pop()</code></a>, будуть записані як <code>"splice"</code>. Зміни, пов'язані з призначенням величин за індексом, які не змінюють довжину масиву, можуть бути записані як <code>"update"</code>.</p>
+</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Логування_різних_типів_змін">Логування різних типів змін</h3>
+
+<pre class="brush: js">var arr = ['a', 'b', 'c'];
+
+Array.observe(arr, function(changes) {
+  console.log(changes);
+});
+
+arr[1] = 'B';
+// [{type: 'update', object: &lt;arr&gt;, name: '1', oldValue: 'b'}]
+
+arr[3] = 'd';
+// [{type: 'splice', object: &lt;arr&gt;, index: 3, removed: [], addedCount: 1}]
+
+arr.splice(1, 2, 'beta', 'gamma', 'delta');
+// [{type: 'splice', object: &lt;arr&gt;, index: 1, removed: ['B', 'c'], addedCount: 3}]
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p><a href="https://github.com/arv/ecmascript-object-observe">Strawman proposal specification</a>.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.observe")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="//stackoverflow.com/q/29269057/778272">Under what condition would Array.observe's “add” event trigger?</a></li>
+ <li>{{jsxref("Array.unobserve()")}} {{obsolete_inline}}</li>
+ <li>{{jsxref("Object.observe()")}} {{obsolete_inline}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/of/index.html b/files/uk/web/javascript/reference/global_objects/array/of/index.html
new file mode 100644
index 0000000000..457b8696bf
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/of/index.html
@@ -0,0 +1,100 @@
+---
+title: Array.of()
+slug: Web/JavaScript/Reference/Global_Objects/Array/of
+tags:
+  - Array
+  - ECMAScript6
+  - Масив
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/of
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>Array.of()</strong></code> створює новий екземпляр <code>Array</code> з заданої кількості аргументів, незважаючи на кількість або тип аргументів.</p>
+
+<p>Різниця між <code><strong>Array.of()</strong></code> та конструктором <code><strong>Array</strong></code> полягає у поводженні з цілочисельними аргументами: <code><strong>Array.of(7)</strong></code> створює масив з єдиним елементом <code>7</code>, в той час як <code><strong>Array(7)</strong></code> створює порожній масив з величиною властивості <code>length</code>, що дорівнює 7 (<strong>Зауважте:</strong> мається на увазі масив з <code>7</code> порожніми елементами, а не елементами, що дорівнюють <code>undefined</code>).</p>
+
+<pre class="brush: js">Array.of(7);       // [7]
+Array.of(1, 2, 3); // [1, 2, 3]
+
+Array(7);          // масив з 7-ми порожніх елементів
+Array(1, 2, 3);    // [1, 2, 3]
+</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Array.of(<var>element0</var>[, <var>element1</var>[, ...[, <var>elementN</var>]]])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>element<em>N</em></code></dt>
+ <dd>Елементи, з яких треба створити масив.</dd>
+</dl>
+
+<h3 id="Значення_яке_повертається">Значення, яке повертається</h3>
+
+<p>Новий екземпляр {{jsxref("Array")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Ця функція є частиною стандарту ECMAScript 2015. Щоб дізнатися більше, дивіться <a href="https://gist.github.com/rwaldron/1074126">проект <code>Array.of</code> та <code>Array.from</code></a> та <a href="https://gist.github.com/rwaldron/3186576">поліфіл <code>Array.of</code></a>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">Array.of(1);         // [1]
+Array.of(1, 2, 3);   // [1, 2, 3]
+Array.of(undefined); // [undefined]
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Виконання цього коду перед будь-яким іншим кодом створить метод <code>Array.of()</code>, якщо він не підтримується початково.</p>
+
+<pre class="brush: js">if (!Array.of) {
+  Array.of = function() {
+    return Array.prototype.slice.call(arguments);
+    // Або
+    let vals = []
+    for(let prop in arguments){
+        vals.push(arguments[prop])
+    }
+    return vals.slice()
+}</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.of', 'Array.of')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.of")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Array.from()")}}</li>
+ <li>{{jsxref("TypedArray.of()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/pop/index.html b/files/uk/web/javascript/reference/global_objects/array/pop/index.html
new file mode 100644
index 0000000000..7be2a9f433
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/pop/index.html
@@ -0,0 +1,118 @@
+---
+title: Array.prototype.pop()
+slug: Web/JavaScript/Reference/Global_Objects/Array/pop
+tags:
+  - JavaScript
+  - Масив
+  - метод
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>pop()</strong></code> видаляє останній елемент масиву та повертає цей елемент.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-pop.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.pop()</code>
+</pre>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Видалений елемент масиву; {{jsxref("undefined")}}, якщо масив був порожній.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>pop</code> видаляє останній елемент масиву та повертає його.</p>
+
+<p>Метод <code>pop</code> є навмисно загальним; він може бути {{jsxref("Function.call", "викликаний", "", 1)}} або {{jsxref("Function.apply", "застосований", "", 1)}} до об'єктів, схожих на масиви. Об'єкти, які не мають властивості <code>length</code>, що відображає останній елемент в серії послідовних числових властивостей, які починаються з нуля, можуть поводити себе неправильно.</p>
+
+<p>Якщо ви викличите <code>pop()</code> на порожньому масиві, він поверне {{jsxref("undefined")}}.</p>
+
+<p>Метод {{jsxref("Array.prototype.shift()")}} має схожу з <code>pop</code> поведінку, але застосовується до першого елемента масиву.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Видалення_останнього_елемента_масиву">Видалення останнього елемента масиву</h3>
+
+<p>Наступний код створює масив <code>myFish</code> , який містить чотири елементи, а потім видаляє останній елемент.</p>
+
+<pre class="brush: js">var myFish = ['янгол', 'клоун', 'мандарин', 'осетер'];
+
+console.log(myFish); // ['янгол', 'клоун', 'мандарин', 'осетер']
+
+var popped = myFish.pop();
+
+console.log(myFish); // ['янгол', 'клоун', 'мандарин' ]
+
+console.log(popped); // 'осетер'
+</pre>
+
+<h3 id="Використання_apply(_)_або_call_(_)_на_подібних_до_масиву_об'єктах">Використання apply( ) або call ( ) на подібних до масиву об'єктах</h3>
+
+<p>Наступний код створює подібний до масиву об'єкт <code>myFish</code>, який має чотири елементи та параметр довжини length, потім видаляє його останній елемент та зменшує параметр length.</p>
+
+<pre><code>var myFish = {0:'янгол', 1:'клоун', 2:'мандарин', 3:'осетер', length: 4};
+
+var popped = Array.prototype.pop.call(myFish); //такий самий синтаксис для apply( )
+
+console.log(myFish); // {0:'янгол', 1:'клоун', 2:'мандарин', length: 3}
+
+console.log(popped); // 'осетер'</code></pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарі</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Первинне визначення. Реалізовано у JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Array.pop")}}</p>
+
+<div id="compat-mobile"></div>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()")}}</li>
+ <li>{{jsxref("Array.prototype.shift()")}}</li>
+ <li>{{jsxref("Array.prototype.unshift()")}}</li>
+ <li>{{jsxref("Array.prototype.splice()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/prototype/index.html b/files/uk/web/javascript/reference/global_objects/array/prototype/index.html
new file mode 100644
index 0000000000..a4af191650
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/prototype/index.html
@@ -0,0 +1,185 @@
+---
+title: Array.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Array/prototype
+tags:
+  - Array
+  - JavaScript
+  - Property
+  - Джава Скріпт
+  - Масив
+  - Поле
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype
+---
+<div>{{JSRef}}</div>
+
+<p>Поле <strong><code>Array.prototype</code></strong> представляє собою прототип для конструктора {{jsxref("Array")}} і дозволяє вам додавати нові поля і методи до всіх об'єктів-масивів (Array).</p>
+
+<pre><code>// Якщо JavaScript не реалізовує метод first() початково,
+// додайте новий метод, який буде повертати перший елемент масиву.
+
+if (!Array.prototype.first) {
+  Array.prototype.first = function() {
+    return this[0];
+  }
+}</code>
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Екземпляри {{jsxref("Array")}} успадковуються від <code>Array.prototype</code>. Як і з всіх конструкторів, ви можете змінити прототип конструктора об'єкта, щоб внести зміни у всі екземпляри {{jsxref("Array")}}. Для прикладу, це використовується для {{Glossary("Polyfill", "polyfilling")}}.</p>
+
+<p>Маловідомий факт: <code>Array.prototype</code> сам є масивом {{jsxref("Array")}}:</p>
+
+<pre class="brush: js">Array.isArray(Array.prototype); // true
+</pre>
+
+<p>{{js_property_attributes(0, 0, 0)}}</p>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt><code>Array.prototype.constructor</code></dt>
+ <dd>Визначає функцію, що створює прототип об'єкта.</dd>
+ <dt>{{jsxref("Array.prototype.length")}}</dt>
+ <dd>Відображає кількість елементів в масиві.</dd>
+ <dt>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</dt>
+ <dd>Символ, який містить назви властивостей, які повинні бути виключені з області зв'язування <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code>.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<h3 id="Методи_модифікації">Методи модифікації</h3>
+
+<p>Ці методи модифікують масив:</p>
+
+<dl>
+ <dt>{{jsxref("Array.prototype.copyWithin()")}}</dt>
+ <dd>Копіює послідовність елементів масиву всередині масиву.</dd>
+ <dt>{{jsxref("Array.prototype.fill()")}}</dt>
+ <dd>Заповнює всі елементи масиву від початкового індексу до кінцевого статичними значеннями.</dd>
+ <dt>{{jsxref("Array.prototype.pop()")}}</dt>
+ <dd>Видаляє та повертає останній елемент масиву.</dd>
+ <dt>{{jsxref("Array.prototype.push()")}}</dt>
+ <dd>Додає один чи більше елементів  в кінець масиву та повертає нову довжину масиву.</dd>
+ <dt>{{jsxref("Array.prototype.reverse()")}}</dt>
+ <dd>Змінює порядок елементів масиву на протилежний, викорустовуючи той самий масив — перший стає останнім, а останній - першим.</dd>
+ <dt>{{jsxref("Array.prototype.shift()")}}</dt>
+ <dd>Видаляє та повертає перший елемент масиву.</dd>
+ <dt>{{jsxref("Array.prototype.sort()")}}</dt>
+ <dd>Сортує елементи всередині масиву, та повертає цей масив.</dd>
+ <dt>{{jsxref("Array.prototype.splice()")}}</dt>
+ <dd>Добавляє і/або видаляє елементи з масиву.</dd>
+ <dt>{{jsxref("Array.prototype.unshift()")}}</dt>
+ <dd>Добавляє один або більше елементів у початок масиву та повертає нову довжину масиву.</dd>
+</dl>
+
+<h3 id="Методи_доступу">Методи доступу</h3>
+
+<p>Ці методи не модифікують масив та повертають якесь його представлення.</p>
+
+<dl>
+ <dt>{{jsxref("Array.prototype.concat()")}}</dt>
+ <dd>Повертає новий масив, який складається з цього масиву, об'єднаного з іншим(и) масив(ом/ами) та/або іншими значеннями.</dd>
+ <dt>{{jsxref("Array.prototype.includes()")}} {{experimental_inline}}</dt>
+ <dd>Визначає, чи масив містить певний елемент,  повертаючи, відповідно, <code>true</code> або <code>false</code>.</dd>
+ <dt>{{jsxref("Array.prototype.indexOf()")}}</dt>
+ <dd>Повертає перший (останній) індекс елемента всередині даного масиву, який дорівнює вказаному значенню, або -1 якщо нічого не було знайдено.</dd>
+ <dt>{{jsxref("Array.prototype.join()")}}</dt>
+ <dd>Об'єднує всі елементи масиву у рядок.</dd>
+ <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Повертає останній (найбільший) індекс елемента всередині даного масиву, який рівний вказаному значенню, або -1 якщо нічого не було знайдено.</dd>
+ <dt>{{jsxref("Array.prototype.slice()")}}</dt>
+ <dd>Витягує частину масиву та повертає новий масив.</dd>
+ <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Повертає літерал масиву, який відображає вказаний масив; ви можете використовувати це значення для створення нового масиву. Перевизначає метод {{jsxref("Object.prototype.toSource()")}}.</dd>
+ <dt>{{jsxref("Array.prototype.toString()")}}</dt>
+ <dd>Повертає рядок, яка відображає даний масив та його елементи. Перевизначає метод {{jsxref("Object.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt>
+ <dd>Повертає локалізований рядок, яка відображає даний масив та його елементи. Перевизначає метод {{jsxref("Object.prototype.toLocaleString()")}}.</dd>
+</dl>
+
+<h3 id="Методи_перебору">Методи  перебору</h3>
+
+<p>Декілька методів приймають у якості аргументів функції, які будуть викликані у процесі обробки масиву. Коли ці методи викликаються, довжина поля <code>length</code> вибраного масиву запам'ятовується, і будь-які елементи, додані поза цією довжиною зсередини функції зворотнього виклику (callback), не будуть обходитися. Інші зміни до масиву (встановлення значення елементу або його видалення) можуть впливати на результат операції, якщо метод після цього звертається до зміненого елемента. Хоча специфічна поведінка цих методів у даних випадках є добре визначеною, не варто на неї надто покладатися, щоб не заплутати тих, хто може прочитати ваш код. Якщо вам необхідно змінити даний масив, краще скопіюйте його у новий масив.</p>
+
+<dl>
+ <dt>{{jsxref("Array.prototype.entries()")}}</dt>
+ <dd>Повертає новий об'єкт <code>Array Iterator</code>, який містить пари ключ/значення для кожного індекса в даному масиві.</dd>
+ <dt>{{jsxref("Array.prototype.every()")}}</dt>
+ <dd>Повертає <code>true</code>, якщо кожен елемент у цьому масиві виконує умови переданої тест-функції.</dd>
+ <dt>{{jsxref("Array.prototype.filter()")}}</dt>
+ <dd>Створює новий масив зі всіма елементами цього масиву, для яких передана функція фільтрації повертае <code>true</code>.</dd>
+ <dt>{{jsxref("Array.prototype.find()")}}</dt>
+ <dd>Повертає знайдене у масиві значення, якщо елемент у цьому масиві виконує умови переданої тест-функції або <code>undefined</code> якщо елемента не знайдено.</dd>
+ <dt>{{jsxref("Array.prototype.findIndex()")}}</dt>
+ <dd>Повертає знайдений у масиві індекс, якщо елемент у цьому масиві виконує умови переданої тест-функції або <code>-1</code> якщо елемента не знайдено.</dd>
+ <dt>{{jsxref("Array.prototype.forEach()")}}</dt>
+ <dd>Викликає функцію для кожного елементу масиву.</dd>
+ <dt>{{jsxref("Array.prototype.keys()")}}</dt>
+ <dd>Повертає новий об'єкт <code>Array Iterator</code>, який містить ключі для кожного індекса в даному масиві.</dd>
+ <dt>{{jsxref("Array.prototype.map()")}}</dt>
+ <dd>Створює новий масив з результатами виклику на кожному елементі масиву переданої функції.</dd>
+ <dt>{{jsxref("Array.prototype.reduce()")}}</dt>
+ <dd>Застосовує функцію над акумулятором та кожним значенням даного масиву (зліва направо), щоб скоротити його до єдиного значення.</dd>
+ <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt>
+ <dd>Застосовує функцію над акумулятором та кожним значенням даного масиву (справа наліво), щоб скоротити його до єдиного значення.</dd>
+ <dt>{{jsxref("Array.prototype.some()")}}</dt>
+ <dd>Повертає <code>true</code>, якщо принаймні один елемент у цьому масиві виконує умови переданої тест-функції.</dd>
+ <dt>{{jsxref("Array.prototype.values()")}}</dt>
+ <dd>Повертає новий об'єкт <code>Array Iterator</code>, який містить значення для кожного індекса в масиві.</dd>
+ <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}</dt>
+ <dd>Повертає новий об'єкт <code>Array Iterator</code>, який містить значення для кожного індекса в масиві.</dd>
+</dl>
+
+<h3 id="Загальні_методи_(нестандартні)">Загальні методи (нестандартні)</h3>
+
+<p>Багато методів на JavaScript об'єкті Array спроектовані таким чином, щоб їх можна було застосувати на всіх об'ектах, які "виглядають як" масиви. Таким чином, вони можуть бути використані на будь-якому об'єкті, у якого є поле <code>length</code>, а також тих об'єктах, доступ до яких можна отримати завдяки числовим назвам полів (як з індексацією масиву <code>array[5]</code>). Деякі методи, такі як {{jsxref("Array.join", "join")}}, лише зчитують довжину (length) і числові поля об'єктів, на яких вони викликаються. Інші, такі як {{jsxref("Array.reverse", "reverse")}}, вимагають, щоб числові поля об'єкту та поле <code>length</code> були доступні для редагування; тому ці методи можуть не викликатися на об'єктах типу {{jsxref("String")}}, який не дозволяє редагувати його поле <code>length</code> або синтезовані числові поля.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Додані методи <code>copyWithin()</code>, <code>fill()</code>, <code>entries()</code>, <code>keys()</code>, <code>values()</code>, <code>find()</code>, <code>findIndex().</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype', 'Array.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Доданий метод <code>includes()</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_із_веб-переглядачами">Сумісність із веб-переглядачами</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Array.prototype")}}</p>
+
+<div id="compat-mobile"></div>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/push/index.html b/files/uk/web/javascript/reference/global_objects/array/push/index.html
new file mode 100644
index 0000000000..af185f399f
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/push/index.html
@@ -0,0 +1,136 @@
+---
+title: Array.prototype.push()
+slug: Web/JavaScript/Reference/Global_Objects/Array/push
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/push
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>push()</strong></code> додає один або більше елементів у кінець масиву та повертає нову довжину масиву.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-push.html")}}</div>
+
+<p class="hidden">Джерело цього інтерактивного прикладу зберігається у репозіторії на GitHub. Якщо ви бажаєте залучитися до проекту зі створення інтерактивних прикладів, будь ласка, скопіюйте це посилання <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та надішліть нам  pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>arr</var>.push(<var>element1</var>[, ...[, <var>elementN</var>]])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>element<em>N</em></code></dt>
+ <dd>Елементи, що додаються у кінець масиву.</dd>
+</dl>
+
+<h3 id="Повернене_значення">Повернене значення</h3>
+
+<p>Нова {{jsxref("Array.length", "length")}} властивість об'єкта, на якому був визваний цей метод.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>push</code> додає значення у масив.</p>
+
+<p><code>push</code> було навмисно створено загальним методом. Він може використовуватися з {{jsxref("Function.call", "call()")}} або {{jsxref("Function.apply", "apply()")}} на об'єктах, подібних до масивів. Метод <code>push</code> спирається на властивість <code>length</code>, щоб розуміти, з якого місця починати додавання заданих значень. Якщо властивість <code>length</code> неможливо перетворити на число, використовується індекс рівний 0. До цього також належить випадок, коли властивості <code>length</code> взагалі не існує, y цьому разі <code>length</code> також буде створено.</p>
+
+<p>Хоча {{jsxref("Global_Objects/String", "strings", "", 1)}} - це найближчі, масивоподібні об'єкти, з ними неможливо використовувати цей метод, оскільки рядки є незмінними.  Аналогічно до найближчого, масивоподібного об'єкта {{jsxref("Functions/arguments", "arguments", "", 1)}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Додавання_елементів_у_масив">Додавання елементів у масив</h3>
+
+<p>Наступний приклад створює <code>sports</code> масив з двома елементами, потім у нього додаються еще два елементи. Змінна <code>total</code> містить нову довжину масиву.</p>
+
+<pre class="brush: js">var sports = ['soccer', 'baseball'];
+var total = sports.push('football', 'swimming');
+
+console.log(sports); // ['soccer', 'baseball', 'football', 'swimming']
+console.log(total);  // 4
+</pre>
+
+<h3 id="Поєднання_двох_масивів">Поєднання двох масивів</h3>
+
+<p>Цей приклад використовує {{jsxref("Function.apply", "apply()")}} для того, щоб запушити усі елементи з другого масиву.</p>
+
+<p><em>Не</em> використовуйте цей метод, якщо другий масив (<code>moreVegs</code> у цьому прикладі) занадто великий, оскільки максимальна кількість параметрів, які може вмістити одна функція обмежена, як доводить це практика. Дивиться {{jsxref("Function.apply", "apply()")}} для отримання більш докладної інформації.</p>
+
+<pre class="brush: js">var vegetables = ['parsnip', 'potato'];
+var moreVegs = ['celery', 'beetroot'];
+
+// Merge the second array into the first one
+// Equivalent to vegetables.push('celery', 'beetroot');
+Array.prototype.push.apply(vegetables, moreVegs);
+
+console.log(vegetables); // ['parsnip', 'potato', 'celery', 'beetroot']
+</pre>
+
+<h3 id="Використання_об'єкта_у_масивоподібний_спосіб">Використання об'єкта у масивоподібний спосіб</h3>
+
+<p>Як зазначено вище, <code>push</code> було навмисно створено загаліним методом, і це може зіграти нам на користь. <code>Array.prototype.push</code> добре працює на об'єктах, як це показує наш приклад. Зауважте, що ми не створюємо масив для зберігання колекції об'єктів. Натомість ми зберігаємо колекцію у самому об'єкті та використовуємо метод <code>call</code> на <code>Array.prototype.push</code>, щоб змусити його думати, начебто ми використовуємо його на масиві, і це працює, завдяки тому, що JavaScript дозволяє нам встановлювати контекст використання, як нам зручно.</p>
+
+<pre class="brush: js">var obj = {
+    length: 0,
+
+    addElem: function addElem(elem) {
+        // obj.length is automatically incremented
+        // every time an element is added.
+        [].push.call(this, elem);
+    }
+};
+
+// Let's add some empty objects just to illustrate.
+obj.addElem({});
+obj.addElem({});
+console.log(obj.length);
+// → 2
+</pre>
+
+<p>Зверніть увагу, що <code>obj</code> хоч і не є масивом, метод <code>push</code> успішно збільшив його властивість <code>length</code> так само, наче б ми мали справу зі справжнім масивом.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікації</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Початкове визначення. Реалізоване в JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.7', 'Array.prototype.push')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.push', 'Array.prototype.push')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.push', 'Array.prototype.push')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+<div>
+<div class="hidden">Таблиця сумісності на цій сторінці береться зі струкрутованих даних. кщо ви бажаєте залучитися до створення цих даних, будь ласка, перегляньте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> та надішліть нам  pull request.</div>
+
+<p>{{Compat("javascript.builtins.Array.push")}}</p>
+</div>
+
+<h2 id="Дивиться_також">Дивиться також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.pop()")}}</li>
+ <li>{{jsxref("Array.prototype.shift()")}}</li>
+ <li>{{jsxref("Array.prototype.unshift()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/reduce/index.html b/files/uk/web/javascript/reference/global_objects/array/reduce/index.html
new file mode 100644
index 0000000000..0f9ce6e0e2
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/reduce/index.html
@@ -0,0 +1,578 @@
+---
+title: Array.prototype.reduce()
+slug: Web/JavaScript/Reference/Global_Objects/Array/Reduce
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - Reduce
+  - Масив
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>reduce()</strong></code> виконує функцію <strong>reducer</strong> (функцію вказуєте ви) для кожного елемента масиву та повертає єдине значення.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-reduce.html")}}</div>
+
+
+
+<p>Функія <strong>reducer</strong> отримує чотири параметри:</p>
+
+<ol>
+ <li>Accumulator (<em><code>acc</code></em>) - Акумулятор</li>
+ <li>Current Value (<code><em>cur</em></code>) - Поточне значення</li>
+ <li>Current Index (<em><code>idx</code></em>) - Поточний індекс</li>
+ <li>Source Array (<em><code>src</code></em>) - Вхідний масив</li>
+</ol>
+
+<p>Функція <strong>reducer</strong> повертає значення та присовює його акумулятору. Значення аккумулятора запам'ятовується через усі ітерації і повертається наприкінці як єдиний результат.</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="notranslate"><var>arr</var>.reduce(<var>callback</var>( <var>accumulator</var>, <var>currentValue</var>[, <var>index</var>[, <var>array</var>]] )[,
+<var>initialValue</var>])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><em><code>callback</code></em></dt>
+ <dd>Фунція, що виконується з кожним елементом масиву (приймає 4 аргументи):
+ <dl>
+  <dt><em><code>accumulator</code></em></dt>
+  <dd>Акумулює значення, які повертає <code>callback</code>. В акумуляторі зберігається попереднє значення результату виклику <code>callback</code> функції або <code>initialValue</code>, якщо воно було надано (дивись нижче).</dd>
+  <dt><em><code>currentValue</code></em></dt>
+  <dd>Поточний елемент, над яким виконується дія.</dd>
+  <dt><em><code>currentIndex</code></em>{{optional_inline}}</dt>
+  <dd>Індекс поточного елемента, над яким виконується дія. Починається із 0 індексу, якщо, було надано значення <code>initialValue</code>, інакше з 1 .</dd>
+  <dt><em><code>array</code></em>{{optional_inline}}</dt>
+  <dd>Масив, для якого було викликано <code>reduce()</code>.</dd>
+ </dl>
+ </dd>
+ <dt><em><code>initialValue</code></em>{{optional_inline}}</dt>
+ <dd>Значення, що буде використане як перший аргумент під час виклику <code>callback</code> функції. Якщо це значення не було задане, буде використано перший елемент масиву. Виклик <code>reduce()</code> на порожньому масиві без вказання initial value призведе до помилки.</dd>
+</dl>
+
+<h3 id="Значення_яке_буде_повернене">Значення, яке буде повернене</h3>
+
+<p>Значення, що зберігається в акумуляторі після останньої ітерації.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p><code>reduce()</code> виконує <em><code>callback</code> </em>функцію один раз для кожного елемента масиву за виключенням дірок (порожніх елементів). Функція отримує чотири аргументи:</p>
+
+<ul>
+ <li><em><code>accumulator</code></em></li>
+ <li><em><code>currentValue</code></em></li>
+ <li><em><code>currentIndex</code></em></li>
+ <li><em><code>array</code></em></li>
+</ul>
+
+<p>При першому виклику <em><code>callback</code> </em>функції <em><code>accumulator</code></em> і <em><code>currentValue</code></em> можуть мати одне із двох значень. Якщо значення <em><code>initialValue</code></em> задане при виклику <code>reduce()</code>, значення <em><code>accumulator</code></em> дорівнюватиме значенню <em><code>initialValue</code></em>, а <em><code>currentValue</code></em> дорівнюватиме першому елементу масиву. Якщо значення <em><code>initialValue</code></em> не задане, <em><code>accumulator</code></em> буде рівним першому елементу масиву, а <em><code>currentValue</code></em> -- другому.</p>
+
+<div class="note">
+<p><strong>Примітка:</strong> Якщо значення <code>initialValue</code> не задане, <code>reduce()</code> виконуватиме <code>callback</code> функцію починаючи з індексу 1, пропустивши перший індекс. Якщо <code>initialValue</code> задане, виконання почнеться із 0-го індексу.</p>
+</div>
+
+<p>Якщо масив порожній і значення <code>initialValue</code> не задане, буде створено помилку {{jsxref("TypeError")}}. Якщо масив складається тільки з одного елемента (незалежно від його позиції) і значення <code>initialValue</code> не задане, або якщо значення <code>initialValue</code> задане, але масив порожній, буде повернуто єдине наявне значення, а <em>функція <code>callback</code> не буде викликана</em>.</p>
+
+<p>Зазвичай безпечніше вказувати початкове значення (<code>initialValue</code>), адже без нього можливі три різні результати (див. приклад).</p>
+
+<pre class="brush: js notranslate">var maxCallback = ( acc, cur ) =&gt; Math.max( acc.x, cur.x );
+var maxCallback2 = ( max, cur ) =&gt; Math.max( max, cur );
+
+// reduce() без initialValue
+[ { x: 22 }, { x: 42 } ].reduce( maxCallback ); // 42
+[ { x: 22 }            ].reduce( maxCallback ); // { x: 22 }
+[                      ].reduce( maxCallback ); // TypeError
+
+// map/reduce; краще рішення, працюватиме також для порожніх чи великих масивів
+[ { x: 22 }, { x: 42 } ].map( el =&gt; el.x )
+                        .reduce( maxCallback2, -Infinity );
+</pre>
+
+<h3 id="Як_працює_reduce">Як працює reduce()</h3>
+
+<p>Нехай відбувся наступний виклик <code>reduce()</code>:</p>
+
+<pre class="brush: js notranslate">[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
+  return accumulator + currentValue;
+});
+</pre>
+
+<p><code>callback</code> буде викликано чотири рази із наступними аргументами та значеннями, поверненими при кожному виклику:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col"><code>callback</code></th>
+   <th scope="col"><code>accumulator</code></th>
+   <th scope="col"><code>currentValue</code></th>
+   <th scope="col"><code>currentIndex</code></th>
+   <th scope="col"><code>array</code></th>
+   <th scope="col">повернене<br>
+    значення</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">перший виклик</th>
+   <td><code>0</code></td>
+   <td><code>1</code></td>
+   <td>1</td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">другий виклик</th>
+   <td><code>1</code></td>
+   <td><code>2</code></td>
+   <td>2</td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>3</code></td>
+  </tr>
+  <tr>
+   <th scope="row">третій виклик</th>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td>3</td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>6</code></td>
+  </tr>
+  <tr>
+   <th scope="row">четвертий виклик</th>
+   <td><code>6</code></td>
+   <td><code>4</code></td>
+   <td>4</td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>10</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Значення, повернене <code>reduce()</code> буде значенням, отриманим при останньому виклику <code>callback</code> (<code>10</code>).</p>
+
+<p>The value returned by <code>reduce()</code> would be that of the last callback invocation (<code>10</code>).</p>
+
+<p>Можна також задати {{jsxref("Functions/Arrow_functions", "Arrow Function","",1)}} замість повної функції. Наступний код згенерує такий самий результат, як код у попередньому блоці.</p>
+
+<pre class="brush: js notranslate">[0, 1, 2, 3, 4].reduce( (accumulator, currentValue, currentIndex, array) =&gt; accumulator + currentValue );
+</pre>
+
+<p>Якщо початкове значення (<code>initialValue)</code> задати як другий аргумент функції <code>reduce()</code>, результат буде наступним:</p>
+
+<pre class="brush: js notranslate">[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) =&gt; {
+    return accumulator + currentValue;
+}, 10);
+</pre>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col"><code>callback</code></th>
+   <th scope="col"><code>accumulator</code></th>
+   <th scope="col"><code>currentValue</code></th>
+   <th scope="col"><code>currentIndex</code></th>
+   <th scope="col"><code>array</code></th>
+   <th scope="col">повернене значення</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">перший виклик</th>
+   <td><code>10</code></td>
+   <td><code>0</code></td>
+   <td><code>0</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>10</code></td>
+  </tr>
+  <tr>
+   <th scope="row">другий виклик</th>
+   <td><code>10</code></td>
+   <td><code>1</code></td>
+   <td><code>1</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>11</code></td>
+  </tr>
+  <tr>
+   <th scope="row">третій виклик</th>
+   <td><code>11</code></td>
+   <td><code>2</code></td>
+   <td><code>2</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>13</code></td>
+  </tr>
+  <tr>
+   <th scope="row">четвертий виклик</th>
+   <td><code>13</code></td>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>16</code></td>
+  </tr>
+  <tr>
+   <th scope="row">
+    <p>п'ятий виклик</p>
+   </th>
+   <td><code>16</code></td>
+   <td><code>4</code></td>
+   <td><code>4</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>20</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Значення, повернене функцією <code>reduce()</code> у цьому випадку дорівнюватиме <code>20</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Сума_усіх_елементів_масиву">Сума усіх елементів масиву</h3>
+
+<pre class="brush: js notranslate">var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
+  return accumulator + currentValue;
+}, 0);
+// sum is 6
+
+</pre>
+
+<p>Приклад вище, реалізований за допомогою arrow function:</p>
+
+<pre class="brush: js notranslate">var total = [ 0, 1, 2, 3 ].reduce(
+  ( accumulator, currentValue ) =&gt; accumulator + currentValue,
+  0
+);</pre>
+
+<h3 id="Сума_значень_у_масиві_обєктів">Сума значень у масиві об'єктів</h3>
+
+<p>Щоб підсумувати значення, що знаходяться у масиві об'єктів, Ви <strong>повинні</strong> вказати початкове значення для того, щоб для кожного із елементів була викликана Ваша функція.</p>
+
+<pre class="brush: js notranslate">var initialValue = 0;
+var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) {
+    return accumulator + currentValue.x;
+},initialValue)
+
+console.log(sum) // logs 6
+</pre>
+
+<p>Також за допомогою arrow function: </p>
+
+<pre class="brush: js notranslate">var initialValue = 0;
+var sum = [{x: 1}, {x:2}, {x:3}].reduce(
+    (accumulator, currentValue) =&gt; accumulator + currentValue.x
+    ,initialValue
+);
+
+console.log(sum) // logs 6</pre>
+
+<h3 id="Сплюснути_flatten_масив_масивів">Сплюснути (flatten) масив масивів</h3>
+
+<p>Сплющення (flattening) - процес, у результаті якого із масиву масивів отримуємо один масив, що містить елементи усіх вкладених масивів.</p>
+
+<pre class="brush: js notranslate">var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
+  function(accumulator, currentValue) {
+    return accumulator.concat(currentValue);
+  },
+  []
+);
+// flattened is [0, 1, 2, 3, 4, 5]
+</pre>
+
+<p>Також за допомогою arrow function:</p>
+
+<pre class="brush: js notranslate">var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
+  ( accumulator, currentValue ) =&gt; accumulator.concat(currentValue),
+  []
+);
+</pre>
+
+<h3 id="Підрахунок_кількості_однакових_значень_у_обєкті">Підрахунок кількості однакових значень у об'єкті</h3>
+
+<pre class="brush: js notranslate">var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
+
+var countedNames = names.reduce(function (allNames, name) {
+  if (name in allNames) {
+    allNames[name]++;
+  }
+  else {
+    allNames[name] = 1;
+  }
+  return allNames;
+}, {});
+// countedNames is:
+// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }
+</pre>
+
+<h3 id="Групування_обєктів_за_властивістю_property">Групування об'єктів за властивістю (property)</h3>
+
+<pre class="brush: js notranslate">var people = [
+  { name: 'Alice', age: 21 },
+  { name: 'Max', age: 20 },
+  { name: 'Jane', age: 20 }
+];
+
+function groupBy(objectArray, property) {
+  return objectArray.reduce(function (acc, obj) {
+    var key = obj[property];
+    if (!acc[key]) {
+      acc[key] = [];
+    }
+    acc[key].push(obj);
+    return acc;
+  }, {});
+}
+
+var groupedPeople = groupBy(people, 'age');
+// groupedPeople is:
+// {
+//   20: [
+//     { name: 'Max', age: 20 },
+//     { name: 'Jane', age: 20 }
+//   ],
+//   21: [{ name: 'Alice', age: 21 }]
+// }
+</pre>
+
+<h3 id="Bonding_arrays_contained_in_an_array_of_objects_using_the_spread_operator_and_initialValue">Bonding arrays contained in an array of objects using the spread operator and initialValue</h3>
+
+<pre class="brush: js notranslate">// friends - an array of objects
+// where object field "books" - list of favorite books
+var friends = [{
+  name: 'Anna',
+  books: ['Bible', 'Harry Potter'],
+  age: 21
+}, {
+  name: 'Bob',
+  books: ['War and peace', 'Romeo and Juliet'],
+  age: 26
+}, {
+  name: 'Alice',
+  books: ['The Lord of the Rings', 'The Shining'],
+  age: 18
+}];
+
+// allbooks - list which will contain all friends' books +
+// additional list contained in initialValue
+var allbooks = friends.reduce(function(accumulator, currentValue) {
+  return [...accumulator, ...currentValue.books];
+}, ['Alphabet']);
+
+// allbooks = [
+//   'Alphabet', 'Bible', 'Harry Potter', 'War and peace',
+//   'Romeo and Juliet', 'The Lord of the Rings',
+//   'The Shining'
+// ]</pre>
+
+<h3 id="Видалення_повторюваних_значень_у_масиві">Видалення повторюваних значень у масиві</h3>
+
+<pre class="brush: js notranslate">let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
+let result = arr.sort().reduce((accumulator, current) =&gt; {
+    const length = accumulator.length
+    if (length === 0 || accumulator[length - 1] !== current) {
+        accumulator.push(current);
+    }
+    return accumulator;
+}, []);
+console.log(result); //[1,2,3,4,5]
+</pre>
+
+<h3 id="Запуск_Promises_у_послідовності">Запуск Promises у послідовності</h3>
+
+<pre class="brush: js notranslate">/**
+ * Runs promises from array of functions that can return promises
+ * in chained manner
+ *
+ * @param {array} arr - promise arr
+ * @return {Object} promise object
+ */
+function runPromiseInSequence(arr, input) {
+  return arr.reduce(
+    (promiseChain, currentFunction) =&gt; promiseChain.then(currentFunction),
+    Promise.resolve(input)
+  );
+}
+
+// promise function 1
+function p1(a) {
+  return new Promise((resolve, reject) =&gt; {
+    resolve(a * 5);
+  });
+}
+
+// promise function 2
+function p2(a) {
+  return new Promise((resolve, reject) =&gt; {
+    resolve(a * 2);
+  });
+}
+
+// function 3  - will be wrapped in a resolved promise by .then()
+function f3(a) {
+ return a * 3;
+}
+
+// promise function 4
+function p4(a) {
+  return new Promise((resolve, reject) =&gt; {
+    resolve(a * 4);
+  });
+}
+
+const promiseArr = [p1, p2, f3, p4];
+runPromiseInSequence(promiseArr, 10)
+  .then(console.log);   // 1200
+</pre>
+
+<h3 id="Function_composition_enabling_piping">Function composition enabling piping</h3>
+
+<pre class="brush: js notranslate">// Building-blocks to use for composition
+const double = x =&gt; x + x;
+const triple = x =&gt; 3 * x;
+const quadruple = x =&gt; 4 * x;
+
+// Function composition enabling pipe functionality
+const pipe = (...functions) =&gt; input =&gt; functions.reduce(
+    (acc, fn) =&gt; fn(acc),
+    input
+);
+
+// Composed functions for multiplication of specific values
+const multiply6 = pipe(double, triple);
+const multiply9 = pipe(triple, triple);
+const multiply16 = pipe(quadruple, quadruple);
+const multiply24 = pipe(double, triple, quadruple);
+
+// Usage
+multiply6(6); // 36
+multiply9(9); // 81
+multiply16(16); // 256
+multiply24(10); // 240
+
+</pre>
+
+<h3 id="write_map_using_reduce">write map using reduce</h3>
+
+<pre class="brush: js notranslate">if (!Array.prototype.mapUsingReduce) {
+  Array.prototype.mapUsingReduce = function(callback, thisArg) {
+    return this.reduce(function(mappedArray, currentValue, index, array) {
+      mappedArray[index] = callback.call(thisArg, currentValue, index, array);
+      return mappedArray;
+    }, []);
+  };
+}
+
+[1, 2, , 3].mapUsingReduce(
+  (currentValue, index, array) =&gt; currentValue + index + array.length
+); // [5, 7, , 10]
+
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js notranslate">// Production steps of ECMA-262, Edition 5, 15.4.4.21
+// Reference: http://es5.github.io/#x15.4.4.21
+// https://tc39.github.io/ecma262/#sec-array.prototype.reduce
+if (!Array.prototype.reduce) {
+  Object.defineProperty(Array.prototype, 'reduce', {
+    value: function(callback /*, initialValue*/) {
+      if (this === null) {
+        throw new TypeError( 'Array.prototype.reduce ' +
+          'called on null or undefined' );
+      }
+      if (typeof callback !== 'function') {
+        throw new TypeError( callback +
+          ' is not a function');
+      }
+
+      // 1. Let O be ? ToObject(this value).
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length &gt;&gt;&gt; 0;
+
+      // Steps 3, 4, 5, 6, 7
+      var k = 0;
+      var value;
+
+      if (arguments.length &gt;= 2) {
+        value = arguments[1];
+      } else {
+        while (k &lt; len &amp;&amp; !(k in o)) {
+          k++;
+        }
+
+        // 3. If len is 0 and initialValue is not present,
+        //    throw a TypeError exception.
+        if (k &gt;= len) {
+          throw new TypeError( 'Reduce of empty array ' +
+            'with no initial value' );
+        }
+        value = o[k++];
+      }
+
+      // 8. Repeat, while k &lt; len
+      while (k &lt; len) {
+        // a. Let Pk be ! ToString(k).
+        // b. Let kPresent be ? HasProperty(O, Pk).
+        // c. If kPresent is true, then
+        //    i.  Let kValue be ? Get(O, Pk).
+        //    ii. Let accumulator be ? Call(
+        //          callbackfn, undefined,
+        //          « accumulator, kValue, k, O »).
+        if (k in o) {
+          value = callback(value, o[k], k, o);
+        }
+
+        // d. Increase k by 1.
+        k++;
+      }
+
+      // 9. Return accumulator.
+      return value;
+    }
+  });
+}
+</pre>
+
+<p>If you need to support truly obsolete JavaScript engines that don't support <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty()</a></code>, it's best not to polyfill <code>Array.prototype</code> methods at all, as you can't make them <strong>non-enumerable</strong>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce()')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.8.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.reduce")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reduceRight()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/reduceright/index.html b/files/uk/web/javascript/reference/global_objects/array/reduceright/index.html
new file mode 100644
index 0000000000..2471147574
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/reduceright/index.html
@@ -0,0 +1,364 @@
+---
+title: Array.prototype.reduceRight()
+slug: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight
+tags:
+  - Array
+  - ECMAScript5
+  - JavaScript
+  - Масив
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>reduceRight()</strong></code> застосовує функцію до акумулятора та кожного елемента масиву (справа наліво), зменшуючи його до єдиного значення.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-reduce-right.html")}}</div>
+
+
+
+<p>Дивіться також {{jsxref("Array.prototype.reduce()")}}, який виконується зліва направо.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>arr.reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue])</var></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Функція, яка виконується на кожному елементі масиву. Приймає чотири аргументи:
+ <dl>
+  <dt><code>accumulator</code></dt>
+  <dd>Значення, яке було повернене з попереднього виклику функції, або <code>initialValue</code>, якщо є. (Дивіться нижче.)</dd>
+  <dt><code>currentValue</code></dt>
+  <dd>Поточний елемент масиву, що опрацьовується.</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>Індекс поточного елемента масиву.</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd>Масив, для якого було викликано <code>reduceRight()</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>initialValue</code>{{optional_inline}}</dt>
+ <dd>Значення, що використовується в якості акумулятора для першого виклику <code>callback</code>. Якщо початкового значення нема, то буде використаний та пропущений останній елемент масиву. Виклик <code>reduce</code> або <code>reduceRight</code> на порожньому масиві без початкового значення створить виняток <code>TypeError</code>.</dd>
+</dl>
+
+<h3 id="Значення_яке_повертається">Значення, яке повертається</h3>
+
+<p>Значення, що є результатом зменшення.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>reduceRight</code> виконує функцію зворотного виклику один раз для кожного елемента у масиві, крім порожніх елементів, отримуючи чотири аргументи: початкове значення (або значення від попереднього виклику функції), значення поточного елемента, поточний індекс та масив, обхід якого виконується.</p>
+
+<p>Виклик функції <code>callback</code> у reduceRight виглядатиме десь так:</p>
+
+<pre class="brush: js">array.reduceRight(function(accumulator, currentValue, index, array) {
+  // ...
+});
+</pre>
+
+<p>Коли функція викликається вперше, <code>accumulator</code> та <code>currentValue</code> можуть мати одне з двох значень. Якщо значення <code>initialValue</code> було надане під час виклику <code>reduceRight</code>, тоді <code>accumulator</code> дорівнюватиме <code>initialValue</code>, а <code>currentValue</code> останньому елементу масиву. Якщо значення <code>initialValue</code> не визначено, тоді <code>accumulator</code> дорівнюватиме останньому елементу масиву, а <code>currentValue</code> передостанньому.</p>
+
+<p>Якщо масив порожній, а <code>initialValue</code> не надано, то буде викинуто виняток {{jsxref("TypeError")}}. Якщо масив має лише один елемент (незалежно від позиції), і немає значення <code>initialValue</code>, або якщо <code>initialValue</code> надано, але масив порожній, це єдине значення повернеться без виклику <code>callback</code>.</p>
+
+<p>Для прикладу, функція може виглядати так:</p>
+
+<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(accumulator, currentValue, index, array) {
+  return accumulator + currentValue;
+});
+</pre>
+
+<p>Функція зворотного виклику буде виконана чотири рази, аргументи та значення, які повертаються, наведені нижче:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col"><code>callback</code></th>
+   <th scope="col"><code>accumulator</code></th>
+   <th scope="col"><code>currentValue</code></th>
+   <th scope="col"><code>index</code></th>
+   <th scope="col"><code>array</code></th>
+   <th scope="col">вертає</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">перший виклик</th>
+   <td><code>4</code></td>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>7</code></td>
+  </tr>
+  <tr>
+   <th scope="row">другий виклик</th>
+   <td><code>7</code></td>
+   <td><code>2</code></td>
+   <td><code>2</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>9</code></td>
+  </tr>
+  <tr>
+   <th scope="row">третій виклик</th>
+   <td><code>9</code></td>
+   <td><code>1</code></td>
+   <td><code>1</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>10</code></td>
+  </tr>
+  <tr>
+   <th scope="row">четвертий виклик</th>
+   <td><code>10</code></td>
+   <td><code>0</code></td>
+   <td><code>0</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>10</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Значення, яке повертає <code>reduceRight</code> буде тим, яке вертає останній виклик <code>callback</code> (<code>10</code>).</p>
+
+<p>А якби ви надали значення <code>initialValue</code>, результат виглядав би так:</p>
+
+<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(accumulator, currentValue, index, array) {
+  return accumulator + currentValue;
+}, 10);
+</pre>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col"><code>callback</code></th>
+   <th scope="col"><code>accumulator</code></th>
+   <th scope="col"><code>currentValue</code></th>
+   <th scope="col"><code>index</code></th>
+   <th scope="col"><code>array</code></th>
+   <th scope="col">вертає</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">перший виклик</th>
+   <td><code>10</code></td>
+   <td><code>4</code></td>
+   <td><code>4</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>14</code></td>
+  </tr>
+  <tr>
+   <th scope="row">другий виклик</th>
+   <td><code>14</code></td>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>17</code></td>
+  </tr>
+  <tr>
+   <th scope="row">третій виклик</th>
+   <td><code>17</code></td>
+   <td><code>2</code></td>
+   <td><code>2</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>19</code></td>
+  </tr>
+  <tr>
+   <th scope="row">четвертий виклик</th>
+   <td><code>19</code></td>
+   <td><code>1</code></td>
+   <td><code>1</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>20</code></td>
+  </tr>
+  <tr>
+   <th scope="row">п'ятий виклик</th>
+   <td><code>20</code></td>
+   <td><code>0</code></td>
+   <td><code>0</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>20</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Цього разу <code>reduceRight</code>, звісно, повернув би <code>20</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Знайти_суму_елементів_масиву">Знайти суму елементів масиву</h3>
+
+<pre class="brush: js">var sum = [0, 1, 2, 3].reduceRight(function(a, b) {
+  return a + b;
+});
+// сума дорівнює 6
+</pre>
+
+<h3 id="Вирівняти_масив_масивів">Вирівняти масив масивів</h3>
+
+<pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
+    return a.concat(b);
+}, []);
+// Результат [4, 5, 2, 3, 0, 1]
+
+</pre>
+
+<h3 id="Виконати_послідовно_набір_асинхронних_функцій_з_функціями_зворотного_виклику_щоб_кожна_передавала_свій_результат_у_наступну">Виконати послідовно набір асинхронних функцій з функціями зворотного виклику, щоб кожна передавала свій результат у наступну</h3>
+
+<pre class="brush: js">const waterfall = (...functions) =&gt; (callback, ...args) =&gt;
+  functions.reduceRight(
+    (composition, fn) =&gt; (...results) =&gt; fn(composition, ...results),
+    callback
+  )(...args);
+
+const randInt = max =&gt; Math.floor(Math.random() * max)
+
+const add5 = (callback, x) =&gt; {
+  setTimeout(callback, randInt(1000), x + 5);
+};
+const mult3 = (callback, x) =&gt; {
+  setTimeout(callback, randInt(1000), x * 3);
+};
+const sub2 = (callback, x) =&gt; {
+  setTimeout(callback, randInt(1000), x - 2);
+};
+const split = (callback, x) =&gt; {
+  setTimeout(callback, randInt(1000), x, x);
+};
+const add = (callback, x, y) =&gt; {
+  setTimeout(callback, randInt(1000), x + y);
+};
+const div4 = (callback, x) =&gt; {
+  setTimeout(callback, randInt(1000), x / 4);
+};
+
+const computation = waterfall(add5, mult3, sub2, split, add, div4);
+computation(console.log, 5) // -&gt; 14
+
+// те саме, що й:
+
+const computation2 = (input, callback) =&gt; {
+  const f6 = x=&gt; div4(callback, x);
+  const f5 = (x, y) =&gt; add(f6, x, y);
+  const f4 = x =&gt; split(f5, x);
+  const f3 = x =&gt; sub2(f4, x);
+  const f2 = x =&gt; mult3(f3, x);
+  add5(f2, input);
+}</pre>
+
+<h3 id="Різниця_між_reduce_та_reduceRight">Різниця між <code>reduce</code> та <code>reduceRight</code></h3>
+
+<pre class="brush: js">var a = ['1', '2', '3', '4', '5'];
+var left  = a.reduce(function(prev, cur)      { return prev + cur; });
+var right = a.reduceRight(function(prev, cur) { return prev + cur; });
+
+console.log(left);  // "12345"
+console.log(right); // "54321"</pre>
+
+<h3 id="Визначення_композиції_функцій">Визначення композиції функцій</h3>
+
+<p>Концепція композиції функцій проста - вона об'єднує функції. Це послідовний, справа наліво, виклик кожної функції з результатом попередньої.</p>
+
+<pre class="brush: js">/**
+ * Композиція функцій - це підхід, в якому результат однієї функції
+ * передається у іншу і т.д.
+ *
+ * h(x) = f(g(x))
+ *
+ * Виконання функцій відбувається справа наліво
+ *
+ * <a href="https://uk.wikipedia.org/wiki/Композиція_функцій">https://uk.wikipedia.org/wiki/Композиція_функцій</a>
+ */
+
+const compose = (...args) =&gt; (value) =&gt; args.reduceRight((acc, fn) =&gt; fn(acc), value)
+
+// Збільшує передане число на 1
+const inc = (n) =&gt; n + 1
+
+// Подвоює передане значення
+const double = (n) =&gt; n * 2
+
+// використання композиції функцій
+console.log(compose(double, inc)(2)); // 6
+
+// використання композиції функцій
+console.log(compose(inc, double)(2)); // 5
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Метод <code>reduceRight</code> був доданий до стандарту ECMA-262 у 5-й версії; таким чином, він може не бути присутній у всіх реалізаціях стандарту. Ви можете обійти цю проблему, вставивши наступний код на початку ваших скриптів, це дозволить використовувати метод <code>reduceRight</code> у версіях, які не підтримують його початково.</p>
+
+<pre class="brush: js">// Функціональні кроки ECMA-262, версія 5, 15.4.4.22
+// Довідка: http://es5.github.io/#x15.4.4.22
+if ('function' !== typeof Array.prototype.reduceRight) {
+  Array.prototype.reduceRight = function(callback /*, initialValue*/) {
+    'use strict';
+    if (null === this || 'undefined' === typeof this) {
+      throw new TypeError('Array.prototype.reduce called on null or undefined');
+    }
+    if ('function' !== typeof callback) {
+      throw new TypeError(callback + ' is not a function');
+    }
+    var t = Object(this), len = t.length &gt;&gt;&gt; 0, k = len - 1, value;
+    if (arguments.length &gt;= 2) {
+      value = arguments[1];
+    } else {
+      while (k &gt;= 0 &amp;&amp; !(k in t)) {
+        k--;
+      }
+      if (k &lt; 0) {
+        throw new TypeError('Reduce of empty array with no initial value');
+      }
+      value = t[k--];
+    }
+    for (; k &gt;= 0; k--) {
+      if (k in t) {
+        value = callback(value, t[k], k, t);
+      }
+    }
+    return value;
+  };
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.22', 'Array.prototype.reduceRight')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.8.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.reduceRight")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/reverse/index.html b/files/uk/web/javascript/reference/global_objects/array/reverse/index.html
new file mode 100644
index 0000000000..e1d3dade19
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/reverse/index.html
@@ -0,0 +1,89 @@
+---
+title: Array.prototype.reverse()
+slug: Web/JavaScript/Reference/Global_Objects/Array/reverse
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Довідка
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>reverse()</strong></code> перевертає масив <em><a href="https://en.wikipedia.org/wiki/In-place_algorithm">на місці</a></em>, змінюючи послідовність елементів на протилежну. Тобто, перший елемент стає останнім, а останній — першим.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-reverse.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>a</var>.reverse()</pre>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>Перевернутий масив.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>reverse()</code> змінює масив, для якого його викликано, спротилежнюючи послідовність елементів, і вертає посилання на той масив.</p>
+
+<p>Метод <code>reverse</code> є навмисно загальним; його можна викликати або застосувати до об'єктів, які схожі на масиви. Об'єкти, які не мають властивості <code>length</code>, що відображає останню з серії послідовних, числових властивостей, що починаються з нуля, можуть поводитися непередбачувано.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Перевертання_елементів_у_масиві">Перевертання елементів у масиві</h3>
+
+<p>У наведеному прикладі започатковується масив <code>a</code> з трьома елементами, а тоді їх порядок спротилежнюється. Виклик методу <code>reverse()</code> повертає посилання на перевернутий масив <code>а</code>.</p>
+
+<pre class="brush: js">var a = ['спершу', 'було', 'слово'];
+var reversed = a.reverse();
+
+console.log(reversed === a);  // виводить true
+console.log(a);               // виводить ['слово', 'було', 'спершу']
+console.log(reversed);        // виводить ['слово', 'було', 'спершу']
+</pre>
+
+<h3 id="Перевертання_елементів_у_подібному_до_масиву_обєкті">Перевертання елементів у подібному до масиву об'єкті</h3>
+
+<p>Наступний приклад створює подібний до масиву об'єкт <code>a</code>, що містить три елементи та властивість довжини, а тоді перевертає цей об'єкт. Виклик методу <code>reverse()</code> повертає посилання на перевернутий об'єкт <code>a</code>.</p>
+
+<pre class="brush: js">const a = {0: 1, 1: 2, 2: 3, length: 3};
+
+console.log(a); // {0: 1, 1: 2, 2: 3, length: 3}
+
+Array.prototype.reverse.call(a); //такий самий синтаксис для apply()
+
+console.log(a); // {0: 3, 1: 2, 2: 1, length: 3}</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div>
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Array.reverse")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.join()")}}</li>
+ <li>{{jsxref("Array.prototype.sort()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.reverse()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/shift/index.html b/files/uk/web/javascript/reference/global_objects/array/shift/index.html
new file mode 100644
index 0000000000..7c3d20f114
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/shift/index.html
@@ -0,0 +1,141 @@
+---
+title: Array.prototype.shift()
+slug: Web/JavaScript/Reference/Global_Objects/Array/shift
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><strong>shift()</strong></span></font> видаляє <strong>перший</strong> елемент з масиву і повертає цей елемент. Цей метод змінює довжину масиву.</p>
+
+<pre class="brush: js">var a = [1, 2, 3];
+a.shift();
+
+console.log(a); // [2, 3]</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>arr</var>.shift()</pre>
+
+<h3 id="Повернене_значення">Повернене значення</h3>
+
+<p>Видалений елемент.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>shift</code> видаляє елемент із нульовим індексом і  зсуває значення з послідовними індексами назад, потім повертає видалене значення. Якщо {{jsxref("Array.length", "length")}} властивість рівна 0, {{jsxref("undefined")}} повертається.</p>
+
+<p><code>shift</code> є загальним навмисно; Цей метод може бути {{jsxref("Function.call", "викликаний", "", 1)}} чи {{jsxref("Function.apply", "застосований", "", 1)}} до схожих із масивами об'єктів. Об'єкти, які не містять length властивості, що відображає кінець послідовного ряду, базовані на нулі числові властивості можуть себе вести беззмістовним чином.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Видалення_елементу_з_масиву">Видалення елементу з масиву</h3>
+
+<p>Поданий нижче код відображає myFish масив до і після видалення його першого елементу. Також він відображає видалений елемент.</p>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'surgeon'];
+
+console.log('myFish before: ' + myFish);
+// "myFish before: angel,clown,mandarin,surgeon"
+
+var shifted = myFish.shift();
+
+console.log('myFish after: ' + myFish);
+// "myFish after: clown,mandarin,surgeon"
+
+console.log('Removed this element: ' + shifted);
+// "Removed this element: angel"</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Cтатус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Початкове визначення. Впроваджено в JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерна_сумісність">Браузерна сумісність</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Браузер</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базова підтримка</td>
+   <td>{{CompatChrome("1.0")}}</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatIE("5.5")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Браузер</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базова підтримка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Дивись_також">Дивись також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()")}}</li>
+ <li>{{jsxref("Array.prototype.pop()")}}</li>
+ <li>{{jsxref("Array.prototype.unshift()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/slice/index.html b/files/uk/web/javascript/reference/global_objects/array/slice/index.html
new file mode 100644
index 0000000000..0e3b098fda
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/slice/index.html
@@ -0,0 +1,242 @@
+---
+title: Array.prototype.slice()
+slug: Web/JavaScript/Reference/Global_Objects/Array/slice
+tags:
+  - Array
+  - JavaScript
+  - Масив
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>slice()</strong></code> повертає дрібну копію частини масиву у новий масив, починаючи з <code>begin</code> і до <code>end</code> (не включаючи <code>end</code>), де <code>begin</code> та <code>end</code> є індексами елементів масиву. Початковий масив не змінюється.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-slice.html")}}</div>
+
+<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>arr</var>.slice([<var>begin</var>[, <var>end</var>]])
+</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>begin</var></code> {{optional_inline}}</dt>
+ <dd>Індекс на основі нуля, з якого починається копіювання.</dd>
+ <dd>Індекс може бути від'ємним, зазначаючи відступ з кінця послідовності. <code>slice(-2)</code> копіює останні два елементи послідовності.</dd>
+ <dd>Якщо <code><var>begin</var></code> не надано, <code>slice</code> починається з індексу <code>0</code>.</dd>
+ <dd>Якщо <code><var>begin</var></code> більший за довжину послідовності, повертається порожній масив.</dd>
+ <dt><code><var>end</var></code> {{optional_inline}}</dt>
+ <dd>Індекс на основі нуля <em>до</em> якого вібувається копіювання. <code>slice</code> копіює до, але не включаючи <code><var>end</var></code>.</dd>
+ <dd>Наприклад, <code>slice(1,4)</code> копіює з другого по четвертий елемент (елементи за індексами 1, 2 та 3).</dd>
+ <dd>Індекс може бути від'ємним, зазначаючи відступ з кінця послідовності. <code>slice(2,-1)</code> копіює з третього елемента по другий з кінця.</dd>
+ <dd>Якщо <code><var>end</var></code> пропущений, <code>slice</code> копіює до кінця послідовності (<code>arr.length</code>).</dd>
+ <dd>Якщо <code><var>end</var></code> більший за довжину послідовності, <code>slice</code> копіює до кінця послідовності (<code>arr.length</code>).</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Новий масив, який містить скопійовані елементи.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p><code>slice</code> не змінює початковий масив. Він повертає дрібну копію елементів початкового масиву. Елементи початкового масиву копіюються у повернений масив наступним чином:</p>
+
+<ul>
+ <li>Для посилань на об'єкт (але не самих об'єктів), <code>slice</code> копіює посилання на об'єкт у новий масив. І початковий, і новий масиви посилатимуться на той самий об'єкт. Якщо цей об'єкт зміниться, зміни відобразяться у обох масивах, новому та початковому.</li>
+ <li>Для рядків, чисел та булевих значень (не об'єктів {{jsxref("String")}}, {{jsxref("Number")}} та {{jsxref("Boolean")}}), <code>slice</code> копіює значення у новий масив. Зміни у рядках, числах або булевих значеннях одного масиву не відображатимуться у іншому масиві.</li>
+</ul>
+
+<p>Якщо новий елемент додано у якийсь з масивів, інший масив не зміниться.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Повернути_частину_існуючого_масиву">Повернути частину існуючого масиву</h3>
+
+<pre class="brush: js">var fruits = ['Банан', 'Апельсин', 'Лимон', 'Яблуко', 'Манго'];
+var citrus = fruits.slice(1, 3);
+
+// fruits містить ['Банан', 'Апельсин', 'Лимон', 'Яблуко', 'Манго']
+// citrus містить ['Апельсин','Лимон']
+</pre>
+
+<h3 id="Використання_slice">Використання <code>slice</code></h3>
+
+<p>У наступному прикладі <code>slice</code> створює новий масив <code>newCar</code> з <code>myCar</code>. Обидва містять посилання на об'єкт <code>myHonda</code>. Коли колір <code>myHonda</code> змінюється на фіолетовий, обидва масиви відображають зміну.</p>
+
+<pre class="brush: js">// Використання slice, створення newCar з myCar.
+var myHonda = { color: 'червоний', wheels: 4, engine: { cylinders: 4, size: 2.2 } };
+var myCar = [myHonda, 2, 'чудовий стан', 'придбана 1997'];
+var newCar = myCar.slice(0, 2);
+
+// Вивести значення myCar, newCar та колір myHonda
+// з обох масивів.
+console.log('myCar = ' + JSON.stringify(myCar));
+console.log('newCar = ' + JSON.stringify(newCar));
+console.log('myCar[0].color = ' + myCar[0].color);
+console.log('newCar[0].color = ' + newCar[0].color);
+
+// Змінити колір myHonda.
+myHonda.color = 'фіолетовий';
+console.log('Новий колір Honda ' + myHonda.color);
+
+// Вивести колір myHonda з обох масивів.
+console.log('myCar[0].color = ' + myCar[0].color);
+console.log('newCar[0].color = ' + newCar[0].color);
+</pre>
+
+<p>Скрипт запише:</p>
+
+<pre class="brush: js">myCar = [{color: 'червоний', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2,
+         'чудовий стан', 'придбана 1997']
+newCar = [{color: 'червоний', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2]
+myCar[0].color = червоний
+newCar[0].color = червоний
+Новий колір Honda фіолетовий
+myCar[0].color = фіолетовий
+newCar[0].color = фіолетовий
+</pre>
+
+<h2 id="Подібні_до_масиву_об'єкти">Подібні до масиву об'єкти</h2>
+
+<p>Метод <code>slice</code> також може перетворювати подібні до масиву об'єкти/колекції на нові об'єкти Array. Ви просто прив'язуєте метод до об'єкта. {{jsxref("Functions/arguments", "Аргументи")}} всередині функції є прикладом подібного до масиву об'єкта.</p>
+
+<pre class="brush: js">function list() {
+  return Array.prototype.slice.call(arguments);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+</pre>
+
+<p>Прив'язати можна функцією .<code>call</code> з {{jsxref("Function.prototype")}}, також можна скоротити запис, використовуючи  <code>[].slice.call(arguments)</code> замість <code>Array.prototype.slice.call</code>. В будь-якому випадку, все можна спростити за допомогою {{jsxref("Function.prototype.bind", "bind")}}.</p>
+
+<pre class="brush: js">var unboundSlice = Array.prototype.slice;
+var slice = Function.prototype.call.bind(unboundSlice);
+
+function list() {
+  return slice(arguments);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+</pre>
+
+<h2 id="Оптимізація_кросбраузерної_поведінки">Оптимізація кросбраузерної поведінки</h2>
+
+<p>Хоча об'єкти середовища виконання (такі як об'єкти DOM) за специфікацією не зобов'язані відповідати поведінці Mozilla при перетворенні методом <code>Array.prototype.slice</code>, і IE &lt; 9 цього не робить, версії IE починаючи від 9-ї дозволяють це. Використання шима дозволяє  створити надійну кросбраузерну поведінку. Поки інші сучасні переглядачі підтримують цю можливість, як нині роблять IE, Mozilla, Chrome, Safari та Opera, розробники, які читають (підтримують для об'єктів DOM) slice-код, що покладається на цей шим, не будуть введені в оману семантикою; вони спокійно можуть покладатися на семантику, щоб реалізувати тепер вже <em>де-факто</em> стандартну поведінку. (Шим також виправляє роботу IE з другим аргументом <code>slice()</code>, коли він явно заданий як {{jsxref("null")}}/{{jsxref("undefined")}}, чого більш ранні версії IE також не дозволяли, але всі сучасні переглядачі, в тому числі IE &gt;= 9, зараз дозволяють.)</p>
+
+<pre class="brush: js">/**
+ * Шим для "виправлення" слабкої підтримки IE (IE &lt; 9) використання slice
+ * на об'єктах середовища, таких як NamedNodeMap, NodeList та HTMLCollection
+ * (технічно, оскільки об'єкти середовища були залежні від реалізації,
+ * принаймні до ES2015, IE не мав потреби у цій функціональності.)
+ * Також працює для рядків, виправляє IE &lt; 9, дозволяючи явно задане значення
+ * undefined другим аргументом (як у Firefox) та запобігає помилкам
+ * при виклику на інших об'єктах DOM.
+ */
+(function () {
+  'use strict';
+  var _slice = Array.prototype.slice;
+
+  try {
+    // Не можна використовувати з елементами DOM у IE &lt; 9
+    _slice.call(document.documentElement);
+  } catch (e) { // Не працює у IE &lt; 9
+    // Працюватиме для справжніх масивів, подібних до масивів об'єктів,
+    // NamedNodeMap (атрибутів, сутностей, нотацій),
+    // NodeList (напр., getElementsByTagName), HTMLCollection (напр., childNodes),
+    // і не схибить на інших об'єктах DOM (як на елементах DOM у IE &lt; 9)
+    Array.prototype.slice = function(begin, end) {
+      // IE &lt; 9 не любить undefined в якості аргументу end
+      end = (typeof end !== 'undefined') ? end : this.length;
+
+      // Для об'єктів Array використовуємо рідну функцію slice
+      if (Object.prototype.toString.call(this) === '[object Array]'){
+        return _slice.call(this, begin, end);
+      }
+
+      // Для подібних до масивів об'єктів робимо це самостійно.
+      var i, cloned = [],
+        size, len = this.length;
+
+      // Обробляємо від'ємне значення "begin"
+      var start = begin || 0;
+      start = (start &gt;= 0) ? start : Math.max(0, len + start);
+
+      // Обробляємо від'ємне значення "end"
+      var upTo = (typeof end == 'number') ? Math.min(end, len) : len;
+      if (end &lt; 0) {
+        upTo = len + end;
+      }
+
+      // Очікуваний розмір нового масиву
+      size = upTo - start;
+
+      if (size &gt; 0) {
+        cloned = new Array(size);
+        if (this.charAt) {
+          for (i = 0; i &lt; size; i++) {
+            cloned[i] = this.charAt(start + i);
+          }
+        } else {
+          for (i = 0; i &lt; size; i++) {
+            cloned[i] = this[start + i];
+          }
+        }
+      }
+
+      return cloned;
+    };
+  }
+}());
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.10', 'Array.prototype.slice')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Початкове визначення. Реалізовано у JavaScript 1.2.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Array.slice")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.splice()")}}</li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Function.prototype.bind()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/some/index.html b/files/uk/web/javascript/reference/global_objects/array/some/index.html
new file mode 100644
index 0000000000..934df016e0
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/some/index.html
@@ -0,0 +1,206 @@
+---
+title: Array.prototype.some()
+slug: Web/JavaScript/Reference/Global_Objects/Array/some
+tags:
+  - ECMAScript5
+  - Довідка
+  - Масив
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/some
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Метод <strong><code>some()</code></strong> з'ясовує, чи містить масив хоч один елемент, для якого зазначена функція <code>callback</code> повертає <code>true</code> (або значення, що зводиться до <code>true</code>). Повертає значення типу Boolean.</span></p>
+
+<div class="note">
+<p><strong>Зауваження</strong>: для порожнього масиву цей метод незмінно повертає <code>false</code>.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/array-some.html")}}</div>
+
+<p class="hidden">Першокод цього прикладу збережено у репозиторії GitHub. Якщо ви хочете долучитися до створення чи покращення таких прикладів, пропонуйте нам свої зміни до репозиторію <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>arr</var>.some(<var>callback(element[, index[, array]])</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Функція, яка перевіряє елементи. Приймає три аргументи:
+ <dl>
+  <dt><code>element</code></dt>
+  <dd>Значення чергового елемента масиву.</dd>
+  <dt><code>index</code> {{Optional_inline}}</dt>
+  <dd>Індекс чергового елемента в масиві.</dd>
+  <dt><code>array</code>{{Optional_inline}}</dt>
+  <dd>Масив, до якого застосовано <code>some()</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code>{{Optional_inline}}</dt>
+ <dd>Значення, що використовується як <code><strong>this</strong></code> коли викликається <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p><code><strong>true</strong></code>, якщо функція повертає {{Glossary("truthy", "істинне")}} значення принаймні для одного з елементів масива. Інакше <code><strong>false</strong></code>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>some()</code> викликає функцію <code>callback</code> для кожного елемента в масиві один за одним, доки не знайде такий, для якого <code>callback</code> повертає істинне значення (значення, яке стає <code>true</code> внаслідок перетворення на Boolean). Щойно такий елемент знайдено, <code>some()</code> негайно повертає <code>true</code>, не перевіряючи решту елементів. Якщо таких елементів не знайдено, метод <code>some()</code> повертає <code>false</code>.</p>
+
+<p>Зауважте, що <code>callback</code> викликається лише для індексів масиву, яким надано значення. Тож індекси без встановлених значень, а також видалені елементи будуть знехтувані.</p>
+
+<p>Функція <code>callback</code> викликається з трьома аргументами: значення елемента, індекс елемента і об'єкт масиву, для якого викликано метод <code>some()</code>.</p>
+
+<p>Якщо для <code>some()</code> визначено параметр <code>thisArg</code>, його буде використано як значення <code>this</code> для функції <code>callback</code>. В іншому випадку, буде використано значення {{jsxref("undefined")}}. Зрештою, значення <code>this</code> для функції <code>callback</code> буде визначено відповідно до <a href="/uk/docs/Web/JavaScript/Reference/Operators/this">загальних правил</a>.</p>
+
+<p>Метод <code>some()</code> не змінює масив, для якого його викликано.</p>
+
+<p>Межі індексів елементів, які буде перевірено, встановлюються перед найпершим викликом <code>callback</code>. Тож всі елементи, додані в кінець масиву вже під час виконання <code>some()</code>, будуть знехтувані. Якщо значення котрогось елемента буде змінено зсередини <code>callback</code>, наступний виклик <code>callback</code> (якщо такий буде) це врахує. Видалені елементи перевірено не буде.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Перевірка_елементів_масива">Перевірка елементів масива</h3>
+
+<p>В цьому прикладі виклик <code>some()</code> перевіряє, чи містить масив числа більші від 10:</p>
+
+<pre class="brush: js">function isBiggerThan10(element, index, array) {
+  return element &gt; 10;
+}
+
+[2, 5, 8, 1, 4].some(isBiggerThan10);   // вертає false
+[12, 5, 8, 1, 4].some(isBiggerThan10);  // вертає true
+</pre>
+
+<h3 id="Перевірка_елементів_масива_стрілковою_функцією">Перевірка елементів масива стрілковою функцією</h3>
+
+<p>Те саме, що і в попередньому прикладі, але із синтаксисом <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкової функції</a>:</p>
+
+<pre class="brush: js">[2, 5, 8, 1, 4].some(x =&gt; x &gt; 10);   // вертає false
+[12, 5, 8, 1, 4].some(x =&gt; x &gt; 10);  // вертає true
+</pre>
+
+<h3 id="Перевірка_наявності_певного_значення_в_масиві">Перевірка наявності певного значення в масиві</h3>
+
+<p>Щоб відтворити поведінку метода {{jsxref("Array.prototype.includes()", "includes()")}}, функція повертає <code>true</code>, щойно знаходить шукане значення в масиві:</p>
+
+<pre class="brush: js">var fruits = ['яблуко', 'груша', 'персик', 'банан'];
+
+function contains(array, value) {
+  return array.some(function(v) {
+    return value === v;
+  });
+}
+
+contains(fruits, 'вишня');  // вертає false
+contains(fruits, 'банан');  // вертає true</pre>
+
+<h3 id="Перевірка_наявності_певного_значення_в_масиві_стрілковою_функцією">Перевірка наявності певного значення в масиві стрілковою функцією</h3>
+
+<pre class="brush: js">var fruits = ['яблуко', 'груша', 'персик', 'банан'];
+
+function contains(array, value) {
+  return array.some(v =&gt; value === v);
+}
+
+contains(fruits, 'вишня');  // вертає false
+contains(fruits, 'банан');  // вертає true</pre>
+
+<h3 id="Зведення_всякого_значення_до_Boolean">Зведення всякого значення до Boolean</h3>
+
+<pre class="brush: js">var TRUTHY_VALUES = [true, 'true', 1];
+
+function getBoolean(value) {
+  'use strict';
+
+  if (typeof value === 'string') {
+    value = value.toLowerCase().trim();
+  }
+
+  return TRUTHY_VALUES.some(function(t) {
+    return t === value;
+  });
+}
+
+getBoolean(false);    // вертає false
+getBoolean('false');  // вертає false
+getBoolean(1);        // вертає true
+getBoolean('true');   // вертає true</pre>
+
+<h2 id="Запасний_варіант_поліфіл">Запасний варіант (поліфіл)</h2>
+
+<p>Цей метод було стандартизовано 5-им випуском ECMA-262. Для рушіїв, що не мають підтримки цього метода, стане в пригоді наведене нижче рішення. Цей алгоритм аналогічно відповідає вимогам 5-го випуску ECMA-262 за умови, що {{jsxref("Object")}} і {{jsxref("TypeError")}} не було змінено, а виклик <code>callback.call()</code> відповідає очікуваному {{jsxref("Function.prototype.call()")}}:</p>
+
+<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.17
+// Reference: http://es5.github.io/#x15.4.4.17
+if (!Array.prototype.some) {
+  Array.prototype.some = function(fun, thisArg) {
+    'use strict';
+
+    if (this == null) {
+      throw new TypeError('Array.prototype.some called on null or undefined');
+    }
+
+    if (typeof fun !== 'function') {
+      throw new TypeError();
+    }
+
+    var t = Object(this);
+    var len = t.length &gt;&gt;&gt; 0;
+
+    for (var i = 0; i &lt; len; i++) {
+      if (i in t &amp;&amp; fun.call(thisArg, t[i], i, t)) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.17', 'Array.prototype.some')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Початкова виознака. Запроваджено у JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.some', 'Array.prototype.some')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.some', 'Array.prototype.some')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div>
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Array.some")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.some()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/sort/index.html b/files/uk/web/javascript/reference/global_objects/array/sort/index.html
new file mode 100644
index 0000000000..2f592898bd
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/sort/index.html
@@ -0,0 +1,274 @@
+---
+title: Array.prototype.sort()
+slug: Web/JavaScript/Reference/Global_Objects/Array/sort
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>sort()</strong></code> відсортовує елементи масиву <em><a href="https://en.wikipedia.org/wiki/In-place_algorithm">на місці</a></em> та повертає відсортований масив. За замовчуванням порядок сортування будується на перетворенні елементів у рядки, а потім на порівнянні іхньої послідовності значень кодових одиниць UTF-16.</p>
+
+<p>Часова та просторова складність такого сортування не може гарантуватися, оскільки вона залежить від реалізації.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-sort.html")}}</div>
+
+<p class="hidden">Джерело цього інтерактивного прикладу зберігається у репозіторії на GitHub. Якщо ви бажаєте залучитися до проекту зі створення інтерактивних прикладів, будь ласка, скопіюйте це посилання <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та надішліть нам  pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><var>arr</var>.sort(<var>[compareFunction]</var>)
+</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>compareFunction</code> {{optional_inline}}</dt>
+ <dd>Вказує функцію, яка визначає порядок сортування. Якщо не вказувати, елементи масиву будуть перетворені на рядки, а потім відсортовані згідно до значення кодових точок Unicode кожного символу.</dd>
+ <dd>
+ <dl>
+  <dt><code>firstEl</code></dt>
+  <dd>Перший елемент для порівняння.</dd>
+  <dt><code>secondEl</code></dt>
+  <dd>Другий елемент для порівняння.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Повернене_значення">Повернене значення</h3>
+
+<p>Відсортований масив. Зверніть увагу на те, що масив сортується <em><a href="https://en.wikipedia.org/wiki/In-place_algorithm">на місці</a></em>, без створення копії.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо <code>compareFunction</code> не передається, усі визначені (non-<code>undefined</code>) елементи масиву відсортовуються через перетворення у рядки та порівняння цих рядків в UTF-16 порядку кодових точок. Наприклад, "banana" іде перед "cherry". У числовому сортуванні, 9 іде перед 80, але оскільки числа перетворюються на рядки, "80" іде перед "9" в Unicode порядку. Усі <code>undefined</code> елементи відсортуються у кінець масиву. </p>
+
+<div class="blockIndicator note">
+<p><strong>Примітка :</strong> В UTF-16, Unicode символи вище за <code>\uFFFF</code> кодуються як дві сурогатні кодові одиниці, діапазону <code>\uD800</code>-<code>\uDFFF</code>. Значення кожної кодової одиниці враховується для порівняння окремо. Таким чином, символ створений сурогатною парою <code>\uD655\uDE55</code> буде відсортований перед символом <code>\uFF3A</code>.</p>
+</div>
+
+<p>Якщо <code>compareFunction</code> передається, усі визначені (non-<code>undefined</code>) елементи масиву відсортовуються згідно до поверненого значення функції порівняння (усі <code>undefined</code> елементи масиву відсортовуються у кінець масиву, без виклику <code>compareFunction</code>). Якщо <code>a</code> та <code>b</code> є двома елементами, що порівнюються, тоді: </p>
+
+<ul>
+ <li>
+  <p>Якщо <code>compareFunction(a, b)</code> менше ніж 0, сортування поставить <code>a</code> нижче за індексом ніж <code>b</code> (тобто <code>a</code> іде першим).</p>
+ </li>
+ <li>
+  <p>Якщо <code>compareFunction(a, b)</code> повертає 0, сортування залишить <code>a</code> та <code>b</code> незміненими по відношенню один до одного, проте відсортує по відношенню до усіх інших елементів. Зверніть увагу: стандарт ECMAscript не гарантує таку поведінку, отже, не всі браузери (наприклад, Mozilla версій, принаймні, до 2003) додержуються цього.</p>
+ </li>
+ <li>
+  <p>Якщо  <code>compareFunction(a, b)</code> більше ніж 0, сортування поставить <code>b</code> нижче за індексом ніж <code>a</code> (тобто <code>b</code> іде першим).</p>
+ </li>
+ <li><code>compareFunction(a, b)</code> завжди повинна повертати теж саме значення для певної пари елементів <code>a</code> та <code>b</code> , що служать у якості її двух аргументів. Якщо будуть повертатися непослідовні результати, порядок сортування буде невизначеним.</li>
+</ul>
+
+<p>Таким чином, функція порівняння має наступний вигляд:</p>
+
+<pre class="brush: js notranslate">function compare(a, b) {
+  if (a is less than b by some ordering criterion) {
+    return -1;
+  }
+  if (a is greater than b by the ordering criterion) {
+    return 1;
+  }
+  // a must be equal to b
+  return 0;
+}
+</pre>
+
+<p>Для того, щоб порівняти числа замість рядків, функція порівняння може просто відняти <code>b</code> з <code>a</code>. Наступна функція відсортовує масив у порядку зростання (якщо тільки вона не містить <code>Infinity</code> та <code>NaN</code>):</p>
+
+<pre class="brush: js notranslate">function compareNumbers(a, b) {
+  return a - b;
+}
+</pre>
+
+<p>Метод <code>sort</code> зручно використовувати з {{jsxref("Operators/function", "function expressions", "", 1)}}:</p>
+
+<pre class="brush: js notranslate">var numbers = [4, 2, 5, 1, 3];
+numbers.sort(function(a, b) {
+  return a - b;
+});
+console.log(numbers);
+
+// [1, 2, 3, 4, 5]
+</pre>
+
+<p>ES2015 надає {{jsxref("Functions/Arrow_functions", "arrow function expressions", "", 1)}} за допомогою навіть коротшого синтаксису. </p>
+
+<pre class="brush: js notranslate">let numbers = [4, 2, 5, 1, 3];
+numbers.sort((a, b) =&gt; a - b);
+console.log(numbers);
+
+// [1, 2, 3, 4, 5]</pre>
+
+<p>Об'єкти можна сортувати, використовуючи значення однієї зі своїх властивостей. </p>
+
+<pre class="brush: js notranslate">var items = [
+  { name: 'Edward', value: 21 },
+  { name: 'Sharpe', value: 37 },
+  { name: 'And', value: 45 },
+  { name: 'The', value: -12 },
+  { name: 'Magnetic', value: 13 },
+  { name: 'Zeros', value: 37 }
+];
+
+// sort by value
+items.sort(function (a, b) {
+  return a.value - b.value;
+});
+
+// sort by name
+items.sort(function(a, b) {
+  var nameA = a.name.toUpperCase(); // ignore upper and lowercase
+  var nameB = b.name.toUpperCase(); // ignore upper and lowercase
+  if (nameA &lt; nameB) {
+    return -1;
+  }
+  if (nameA &gt; nameB) {
+    return 1;
+  }
+
+  // names must be equal
+  return 0;
+});</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Створення_відображення_та_сортування_масиву">Створення, відображення, та сортування масиву</h3>
+
+<p>У наступному прикладі створюються чотири масиви і відображаються спершу початковий, потім відсортованний масиви. Числові масиви сортуються без функції порівняння, а відсортовані потім - з нею.</p>
+
+<pre class="brush: js notranslate">var stringArray = ['Blue', 'Humpback', 'Beluga'];
+var numericStringArray = ['80', '9', '700'];
+var numberArray = [40, 1, 5, 200];
+var mixedNumericArray = ['80', '9', '700', 40, 1, 5, 200];
+
+function compareNumbers(a, b) {
+  return a - b;
+}
+
+console.log('stringArray:', stringArray.join());
+console.log('Sorted:', stringArray.sort());
+
+console.log('numberArray:', numberArray.join());
+console.log('Sorted without a compare function:', numberArray.sort());
+console.log('Sorted with compareNumbers:', numberArray.sort(compareNumbers));
+
+console.log('numericStringArray:', numericStringArray.join());
+console.log('Sorted without a compare function:', numericStringArray.sort());
+console.log('Sorted with compareNumbers:', numericStringArray.sort(compareNumbers));
+
+console.log('mixedNumericArray:', mixedNumericArray.join());
+console.log('Sorted without a compare function:', mixedNumericArray.sort());
+console.log('Sorted with compareNumbers:', mixedNumericArray.sort(compareNumbers));
+</pre>
+
+<p>Цей приклад буде мати наступний вивід. Згідно до нього, при використанні функції порівняння, числа сортуються належним чином, як самі числа, так і рядки з числами.</p>
+
+<pre class="notranslate">stringArray: Blue,Humpback,Beluga
+Sorted: Beluga,Blue,Humpback
+
+numberArray: 40,1,5,200
+Sorted without a compare function: 1,200,40,5
+Sorted with compareNumbers: 1,5,40,200
+
+numericStringArray: 80,9,700
+Sorted without a compare function: 700,80,9
+Sorted with compareNumbers: 9,80,700
+
+mixedNumericArray: 80,9,700,40,1,5,200
+Sorted without a compare function: 1,200,40,5,700,80,9
+Sorted with compareNumbers: 1,5,9,40,80,200,700
+</pre>
+
+<h3 id="Сортування_не-ASCII_символів">Сортування не-ASCII символів</h3>
+
+<p>Для сортування рідків, які містять символи, що не входять до ASCII, наприклад, рядків з діакритичними знаками (e, é, è, a, ä, тощо), чи рядків мовою іншою за англійську, використовується {{jsxref("String.localeCompare")}}. Ця функція може порівнювати ці символи таким чином, що вони з'являються у правильному порядку. </p>
+
+<pre class="brush: js notranslate">var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu'];
+items.sort(function (a, b) {
+  return a.localeCompare(b);
+});
+
+// items is ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé']
+</pre>
+
+<h3 id="Сортування_за_допомогою_функції_map">Сортування за допомогою функції map()</h3>
+
+<p>Функція <code>compareFunction</code> може викликатися багато разів на елемент всередені масиву. В залежності від характеру <code>compareFunction</code>, це може призводити до високих накладних витрат. Чим більше роботи виконує <code>compareFunction</code>, чим більше елементів їй треба відсортувати, тим доцільнішим буде використання функції <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a> задля цієї задачі. Map() працює наступним чином: функція перебирає масив лише один раз, потім вона перетягує фактичні значення для сортування у тимчасовий масив, відсортовує цей масив, а потім перебирає його для того, щоб досягти правильного порядку. </p>
+
+<pre class="brush: js notranslate" dir="rtl">// the array to be sorted
+var list = ['Delta', 'alpha', 'CHARLIE', 'bravo'];
+
+// temporary array holds objects with position and sort-value
+var mapped = list.map(function(el, i) {
+  return { index: i, value: el.toLowerCase() };
+})
+
+// sorting the mapped array containing the reduced values
+mapped.sort(function(a, b) {
+  if (a.value &gt; b.value) {
+    return 1;
+  }
+  if (a.value &lt; b.value) {
+    return -1;
+  }
+  return 0;
+});
+
+// container for the resulting order
+var result = mapped.map(function(el){
+  return list[el.index];
+});
+</pre>
+
+<p>У відкритому доступі є бібліотека під назвою <a href="https://null.house/open-source/mapsort">mapsort</a>, яка застосовує цей підхід. </p>
+
+<h2 id="Специфікація">Специфікація</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація </th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>
+    <p>Початкове визначення.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.11', 'Array.prototype.sort')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+<div>
+<div class="hidden">Таблиця сумісності на цій сторінці береться зі струкрутованих даних. кщо ви бажаєте залучитися до створення цих даних, будь ласка, перегляньте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> та надішліть нам  pull request.</div>
+
+<p>{{Compat("javascript.builtins.Array.sort")}}</p>
+</div>
+
+<h2 id="Дивиться_також">Дивиться також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reverse()")}}</li>
+ <li>{{jsxref("String.prototype.localeCompare()")}}</li>
+ <li><a href="https://v8.dev/blog/array-sort">About the stability of the algorithm used by V8 engine</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/splice/index.html b/files/uk/web/javascript/reference/global_objects/array/splice/index.html
new file mode 100644
index 0000000000..0565d3f266
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/splice/index.html
@@ -0,0 +1,162 @@
+---
+title: Array.prototype.splice()
+slug: Web/JavaScript/Reference/Global_Objects/Array/splice
+tags:
+  - Array
+  - JavaScript
+  - Масив
+  - метод
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>splice()</strong></code> змінює вміст масиву, видаляючи існуючі та/або додаючи нові елементи.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-splice.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>var arrDeletedItems = array.splice(start[, deleteCount[, item1[, item2[, ...]]]])</var>
+</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>Індекс елемента, з якого розпочнеться зміна масиву. Якщо індекс більший за розмір масиву, <code>start</code> буде рівним довжині масиву. Якщо індекс від'ємний, позначатиме кількість елементів з кінця масиву (починаючи з -1, тобто -n означатиме індекс n-го елемента з кінця, і таким чином є еквівалентом <code>array.length - n</code>). Якщо абсолютна величина <code>start</code> є більшою за довжину масиву, зміни почнуться з індексу 0.</dd>
+ <dt><code>deleteCount</code>{{optional_inline}}</dt>
+ <dd>Число, що вказує на кількість елементів масиву, які необхідно видалити, починаючи з індексу <code>start</code>.</dd>
+ <dd>Якщо аргумент <code>deleteCount</code> не заданий, або його значення більше чи дорівнює <code>arr.length - start</code> (тобто, більше чи дорівнює кількості елементів, які залишились у масиві, починаючи зі <code>start</code>), тоді будуть видалені всі елементи, починаючи зі <code>start</code> і до кінця масиву.</dd>
+ <dd>Якщо <code>deleteCount</code> рівний 0 або від'ємний, жоден елемент не буде видалений. У цьому випадку необхідно вказати хоча б один новий елемент для вставки (див. нижче).</dd>
+ <dt><code>item1, item2, <em>...</em></code>{{optional_inline}}</dt>
+ <dd>Елементи, що будуть додані до масиву, починаючи з індексу <code>start</code>. Якщо не вказати жодного нового елемента, <code>splice()</code> лише видалить елементи з масиву.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Масив видалених елементів. Якщо видалено лише один елемент, метод поверне масив з одним елементом. Якщо жоден з елементів не видалявся, метод повертає пустий масив.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо задана кількість елементів для вставлення відрізняється від кількості елементів на видалення, довжина масиву зміниться після виконання функції.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Видалення_0_елементів_починаючи_з_індексу_2_і_вставлення_drum">Видалення 0 елементів, починаючи з індексу 2, і вставлення "drum"</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> myFish <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'angel'</span><span class="punctuation token">,</span> <span class="string token">'clown'</span><span class="punctuation token">,</span> <span class="string token">'mandarin'</span><span class="punctuation token">,</span> <span class="string token">'sturgeon'</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> removed <span class="operator token">=</span> myFish<span class="punctuation token">.</span><span class="function token">splice</span><span class="punctuation token">(</span><span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'drum'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// myFish дорівнює ["angel", "clown", "drum", "mandarin", "sturgeon"] </span>
+<span class="comment token">// removed дорівнює [], жодний елемент не було видалено</span></code>
+</pre>
+
+<h3 id="Видалення_0_елементів_починаючи_з_індексу_2_і_вставлення_drum_та_guitar">Видалення 0 елементів, починаючи з індексу 2, і вставлення "drum" та "guitar"</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(2, 0, 'drum', 'guitar');
+
+// myFish дорівнює ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
+// removed дорівнює [], жодний елемент не було видалено</pre>
+
+<h3 id="Видалення_1_елемента_починаючи_з_індексу_3">Видалення 1 елемента, починаючи з індексу 3</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> myFish <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'angel'</span><span class="punctuation token">,</span> <span class="string token">'clown'</span><span class="punctuation token">,</span> <span class="string token">'drum'</span><span class="punctuation token">,</span> <span class="string token">'mandarin'</span><span class="punctuation token">,</span> <span class="string token">'sturgeon'</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> removed <span class="operator token">=</span> myFish<span class="punctuation token">.</span><span class="function token">splice</span><span class="punctuation token">(</span><span class="number token">3</span><span class="punctuation token">,</span> <span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// removed дорівнює ["mandarin"]</span>
+<span class="comment token">// myFish дорівнює ["angel", "clown", "drum", "sturgeon"]</span></code></pre>
+
+<h3 id="Видалення_1_елементу_починаючи_з_індексу_2_і_вставлення_trumpet">Видалення 1 елементу, починаючи з індексу 2, і вставлення "trumpet"</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> myFish <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'angel'</span><span class="punctuation token">,</span> <span class="string token">'clown'</span><span class="punctuation token">,</span> <span class="string token">'drum'</span><span class="punctuation token">,</span> <span class="string token">'sturgeon'</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> removed <span class="operator token">=</span> myFish<span class="punctuation token">.</span><span class="function token">splice</span><span class="punctuation token">(</span><span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">1</span><span class="punctuation token">,</span> <span class="string token">'trumpet'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// myFish дорівнює ["angel", "clown", "trumpet", "sturgeon"]</span>
+<span class="comment token">// removed дорівнює ["drum"]</span></code></pre>
+
+<h3 id="Видалення_2-ох_елементів_починаючи_з_індексу_0_і_вставлення_у_масив_елементів_parrot_anemone_і_blue">Видалення 2-ох елементів, починаючи з індексу 0, і вставлення у масив елементів "parrot", "anemone" і "blue"</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> myFish <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'angel'</span><span class="punctuation token">,</span> <span class="string token">'clown'</span><span class="punctuation token">,</span> <span class="string token">'trumpet'</span><span class="punctuation token">,</span> <span class="string token">'sturgeon'</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> removed <span class="operator token">=</span> myFish<span class="punctuation token">.</span><span class="function token">splice</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="string token">'parrot'</span><span class="punctuation token">,</span> <span class="string token">'anemone'</span><span class="punctuation token">,</span> <span class="string token">'blue'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// myFish дорівнює ["parrot", "anemone", "blue", "trumpet", "sturgeon"] </span>
+<span class="comment token">// removed дорівнює ["angel", "clown"]</span></code></pre>
+
+<h3 id="Видалення_2-ох_елементів_починаючи_з_індексу_2">Видалення 2-ох елементів, починаючи з індексу 2</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> myFish <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'parrot'</span><span class="punctuation token">,</span> <span class="string token">'anemone'</span><span class="punctuation token">,</span> <span class="string token">'blue'</span><span class="punctuation token">,</span> <span class="string token">'trumpet'</span><span class="punctuation token">,</span> <span class="string token">'sturgeon'</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> removed <span class="operator token">=</span> myFish<span class="punctuation token">.</span><span class="function token">splice</span><span class="punctuation token">(2</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// myFish дорівнює ["parrot", "anemone", "sturgeon"] </span>
+<span class="comment token">// removed дорівнює ["blue", "trumpet"]</span></code>
+</pre>
+
+<h3 id="Видалення_1-го_елемента_починаючи_з_індексу_-2">Видалення 1-го елемента, починаючи з індексу -2</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(-2, 1);
+
+// myFish дорівнює ["angel", "clown", "sturgeon"]
+// removed дорівнює ["mandarin"]</pre>
+
+<h3 id="Видалення_всіх_елементів_починаючи_з_індексу_2_(включно).">Видалення всіх елементів, починаючи з індексу 2 (включно).</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> myFish <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'angel'</span><span class="punctuation token">,</span> <span class="string token">'clown'</span><span class="punctuation token">,</span> <span class="string token">'mandarin'</span><span class="punctuation token">,</span> <span class="string token">'sturgeon'</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> removed <span class="operator token">=</span> myFish<span class="punctuation token">.</span><span class="function token">splice</span><span class="punctuation token">(</span><span class="number token">2</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// myFish дорівнює ["angel", "clown"] </span>
+<span class="comment token">// removed дорівнює ["mandarin", "sturgeon"]</span></code></pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Початкове визначення. Реалізовано у JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачів">Підтримка веб-переглядачів</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Array.splice")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()", "push()")}} / {{jsxref("Array.prototype.pop()", "pop()")}} — додати/видалити елементи з кінця масиву</li>
+ <li>{{jsxref("Array.prototype.unshift()", "unshift()")}} / {{jsxref("Array.prototype.shift()", "shift()")}} — додати/видалити елементи з початку масиву</li>
+ <li>{{jsxref("Array.prototype.concat()", "concat()")}} — повертає новий масив, складений шляхом об'єднання цього масиву з іншим масивом(-ами) чи значеннями.</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/tolocalestring/index.html b/files/uk/web/javascript/reference/global_objects/array/tolocalestring/index.html
new file mode 100644
index 0000000000..75448b5e72
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/tolocalestring/index.html
@@ -0,0 +1,182 @@
+---
+title: Array.prototype.toLocaleString()
+slug: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString
+tags:
+  - Array
+  - JavaScript
+  - Масив
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>toLocaleString()</strong></code> повертає рядок, що відображає елементи масиву. Елементи перетворюються у рядки, використовуючи свої методи <code>toLocaleString</code>, і ці рядки розділяються символами, що відповідають локалі (наприклад, комою “,”).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-tolocalestring.html")}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>arr</var>.toLocaleString([<var>locales[</var>, <var>options]]</var>);
+</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>locales</code> {{optional_inline}}</dt>
+ <dd>Рядок з міткою мови BCP 47 або масив таких рядків. Щодо загального вигляду та інтерпретації аргументу <code>locales</code> дивіться  {{jsxref("Intl")}}.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Об'єкт з властивостями конфігурації, для числових значень дивіться {{jsxref("Number.prototype.toLocaleString()")}}, а для дат {{jsxref("Date.prototype.toLocaleString()")}}.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Текстовий рядок, що відображає елементи масиву.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_locales_та_options">Використання <code>locales</code> та <code>options</code></h3>
+
+<p>Елементи масиву перетворюються на рядки, використовуючи свої методи <code>toLocaleString</code>.</p>
+
+<ul>
+ <li><code>Object</code>: {{jsxref("Object.prototype.toLocaleString()")}}</li>
+ <li><code>Number</code>: {{jsxref("Number.prototype.toLocaleString()")}}</li>
+ <li><code>Date</code>: {{jsxref("Date.prototype.toLocaleString()")}}</li>
+</ul>
+
+<p>Завжди відображати знак валюти для рядків та чисел у масиві <code>prices</code>:</p>
+
+<pre class="brush: js">var prices = ['￥7', 500, 8123, 12];
+prices.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
+
+// "￥7,￥500,￥8,123,￥12"
+</pre>
+
+<p>Більше прикладів дивіться на сторінках {{jsxref("Intl")}}, {{jsxref("NumberFormat")}} та {{jsxref("DateTimeFormat")}}.</p>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<pre class="brush: js">// https://tc39.github.io/ecma402/#sup-array.prototype.tolocalestring
+if (!Array.prototype.toLocaleString) {
+  Object.defineProperty(Array.prototype, 'toLocaleString', {
+    value: function(locales, options) {
+      // 1. Нехай O дорівнює ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var a = Object(this);
+
+      // 2. Нехай len дорівнює ? ToLength(? Get(A, "length")).
+      var len = a.length &gt;&gt;&gt; 0;
+
+      // 3. Нехай separator дорівнює рядковому значенню
+      //    роздільника елементів списку згідно поточної
+      //    локалі середовища виконання (це значення
+      //    визначається реалізацією).
+      // ЗАУВАГА: В даному випадку ми використовуємо кому
+      var separator = ',';
+
+      // 4. Якщо len дорівнює нулю, повернути порожінй рядок.
+      if (len === 0) {
+        return '';
+      }
+
+      // 5. Нехай firstElement дорівнює ? Get(A, "0").
+      var firstElement = a[0];
+      // 6. Якщо firstElement дорівнює undefined або null, тоді
+      //  a. Нехай R дорівнює порожньому рядку.
+      // 7. Інакше,
+      //  a. Нехай R дорівнює ?
+      //     ToString(?
+      //       Invoke(
+      //        firstElement,
+      //        "toLocaleString",
+      //        « locales, options »
+      //       )
+      //     )
+      var r = firstElement == null ?
+        '' : firstElement.toLocaleString(locales, options);
+
+      // 8. Нехай k дорівнює 1.
+      var k = 1;
+
+      // 9. Повторювати, доки k &lt; len
+      while (k &lt; len) {
+        // а. Нехай S дорівнює рядковому значенню, утвореному
+        //   об'єднанням R та separator.
+        var s = r + separator;
+
+        // б. Нехай nextElement дорівнює ? Get(A, ToString(k)).
+        var nextElement = a[k];
+
+        // в. Якщо nextElement дорівнює undefined або null, тоді
+        //   i. Нехай R дорівнє порожньому рядку.
+        // г. Інакше,
+        //   i. Нехай R дорівнює ?
+        //     ToString(?
+        //       Invoke(
+        //        nextElement,
+        //        "toLocaleString",
+        //        « locales, options »
+        //       )
+        //     )
+        r = nextElement == null ?
+          '' : nextElement.toLocaleString(locales, options);
+
+        // ґ. Нехай R дорівнює рядковому значенню, утвореному
+        //   об'єднанням S та R.
+        r = s + r;
+
+        // д. Збільшити k на 1.
+        k++;
+      }
+
+      // 10. Повернути R.
+      return r;
+    }
+  });
+}
+</pre>
+
+<p>Якщо вам потрібно підтримувати зовсім застарілі рушії JavaScript, які не підтримують <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, краще взагалі не використовувати поліфіли методів <code>Array.prototype</code>, оскільки ви не зможете зробити їх не перелічуваними.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Початкове визначення було надане у ECMAScript 3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sup-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td>Це визначення замінює визначення, надане у ECMA-262.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.toLocaleString")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.toString()")}}</li>
+ <li>{{jsxref("Intl")}}</li>
+ <li>{{jsxref("Object.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Number.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/tosource/index.html b/files/uk/web/javascript/reference/global_objects/array/tosource/index.html
new file mode 100644
index 0000000000..d493fe0e4f
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/tosource/index.html
@@ -0,0 +1,72 @@
+---
+title: Array.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Array/toSource
+tags:
+  - Array
+  - JavaScript
+  - Масив
+  - метод
+  - нестандартний
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/toSource
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<div>Метод <code><strong>toSource()</strong></code> повертає рядкове представлення першокоду масиву.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>arr</var>.toSource()</pre>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Рядкове представлення першокоду масиву.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>toSource()</code> повертає наступні значення:</p>
+
+<ul>
+ <li>Для вбудованого об'єкта {{jsxref("Array")}} <code>toSource()</code> повертає наступний рядок, який вказує, що першокод недоступний:
+
+  <pre class="brush: js">function Array() {
+    [native code]
+}
+</pre>
+ </li>
+ <li>Для екземплярів {{jsxref("Array")}} <code>toSource()</code> повертає рядкове представлення першокоду.</li>
+</ul>
+
+<p>Цей метод зазвичай викликається внутрішньо у JavaScript, а не явно у коді. Ви можете викликати <code>toSource()</code> під час налагодження для дослідження вмісту масиву.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Досліджуємо_першокод_масиву">Досліджуємо першокод масиву</h3>
+
+<p>Для дослідження першокоду масиву:</p>
+
+<pre class="brush: js">var alpha = new Array('a', 'б', 'в');
+
+alpha.toSource();
+//повертає ['a', 'б', 'в']
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Не є частиною жодного стандарту. Реалізовано у JavaScript 1.3.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Array.toSource")}}</p>
+
+<div id="compat-mobile"></div>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+ <li>{{jsxref("Array.prototype.toString()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/tostring/index.html b/files/uk/web/javascript/reference/global_objects/array/tostring/index.html
new file mode 100644
index 0000000000..53505797f4
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/tostring/index.html
@@ -0,0 +1,80 @@
+---
+title: Array.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Array/toString
+tags:
+  - Array
+  - Масив
+  - метод
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>toString()</strong></code> повертає рядкове представлення заданого масиву та його елементів.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-tostring.html")}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>arr</var>.toString()</pre>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Рядкове представлення елементів масиву.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Об'єкт {{jsxref("Array")}} заміщує метод <code>toString</code> об'єкта {{jsxref("Object")}}. Для об'єктів Array метод <code>toString</code> об'єднує масив та повертає один рядок, що містить усі елементи масиву, розділені комами.</p>
+
+<p>JavaScript викликає метод <code>toString</code> автоматично, коли масив потрібно відобразити у вигляді текстового значення або при посиланні на масив у поєднанні рядків.</p>
+
+<h3 id="Семантика_ECMAScript_5">Семантика ECMAScript 5</h3>
+
+<p>Введений у JavaScript 1.8.5 (Firefox 4) та сумісний з семантикою 5-ї версії ECMAScript, метод <code>toString()</code> є загальним і може використовуватися з будь-яким об'єктом. Буде викликаний метод {{jsxref("Object.prototype.toString()")}}, який поверне значення результату.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.2', 'Array.prototype.toString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.toString")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.join()")}}</li>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/unobserve/index.html b/files/uk/web/javascript/reference/global_objects/array/unobserve/index.html
new file mode 100644
index 0000000000..308a8a01d6
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/unobserve/index.html
@@ -0,0 +1,89 @@
+---
+title: Array.unobserve()
+slug: Web/JavaScript/Reference/Global_Objects/Array/unobserve
+tags:
+  - Array
+  - JavaScript
+  - Масив
+  - застарілий
+  - метод
+translation_of: Archive/Web/JavaScript/Array.unobserve
+---
+<div>{{JSRef}} {{obsolete_header}}</div>
+
+<p>Метод Array<strong>.unobserve()</strong> використовувався для видалення спостерігачів, встановлених методом {{jsxref("Array.observe()")}}, але він застарів та був прибраний з переглядачів. Ви можете натомість скористатись більш загальним об'єктом {{jsxref("Proxy")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Array.unobserve(<var>arr</var>, <var>callback</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>arr</code></dt>
+ <dd>Масив, де треба припинити спостереження.</dd>
+ <dt><code>callback</code></dt>
+ <dd>Посилання на спостерігач, який треба припинити викликати кожен раз, коли у масиві <strong>arr</strong> відбувається зміна.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>Array.unobserve()</code> має викликатися після {{jsxref("Array.observe()")}}, щоб прибрати спостерігач з масиву.</p>
+
+<p>Параметр callback має бути посиланням на функцію, а не анонімною функцією, бо це посилання буде використано, щоб прибрати попередній спостерігач. Немає сенсу викликати <strong>Array.unobserve()</strong> з анонімною функцією зворотного виклику, вона не прибере жоден спостерігач.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Припинення_спостереження_за_масивом">Припинення спостереження за масивом</h3>
+
+<pre class="brush: js">var arr = [1, 2, 3];
+
+var observer = function(changes) {
+  console.log(changes);
+}
+
+Array.observe(arr, observer);
+​
+arr.push(4);
+// [{type: "splice", object: &lt;arr&gt;, index: 3, removed:[], addedCount: 1}]
+
+Array.unobserve(arr, observer);
+
+arr.pop();
+// Функція зворотного виклику не викликалась</pre>
+
+<h3 id="Використання_анонімної_функції">Використання анонімної функції</h3>
+
+<pre class="brush: js">var persons = ['Халід', 'Ахмед', 'Мухаммед'];
+
+Array.observe(persons, function (changes) {
+  console.log(changes);
+});
+
+persons.shift();
+// [{type: "splice", object: &lt;arr&gt;, index: 0, removed: [ "Халід" ], addedCount: 0 }]
+
+Array.unobserve(persons, function (changes) {
+  console.log(changes);
+});
+
+persons.push('Абдулла');
+// [{type: "splice", object: &lt;arr&gt;, index: 2, removed: [], addedCount: 1 }]
+// Функція зворотного виклику викликатиметься завжди
+</pre>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.unobserve")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array.observe()")}} {{obsolete_inline}}</li>
+ <li>{{jsxref("Object.observe()")}} {{obsolete_inline}}</li>
+ <li>{{jsxref("Object.unobserve()")}} {{obsolete_inline}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/unshift/index.html b/files/uk/web/javascript/reference/global_objects/array/unshift/index.html
new file mode 100644
index 0000000000..0621da3662
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/unshift/index.html
@@ -0,0 +1,123 @@
+---
+title: Array.prototype.unshift()
+slug: Web/JavaScript/Reference/Global_Objects/Array/unshift
+tags:
+  - Масив
+  - метод
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>unshift()</strong></code> додає один або декілька елементів на початок масиву і повертає новий розмір масиву.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-unshift.html")}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.unshift([<var>element1</var>[, ...[, <var>elementN</var>]]])</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>element<em>N</em></code></dt>
+ <dd>Елементи для додавання в початок масиву.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Нова властивість {{jsxref("Array.length", "length")}} об'єкту, для якого було викликано функцію.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>unshift</code> вставляє задані значення в початок масиву.</p>
+
+
+
+<p>Метод <code>unshift</code> є навмисно загальним; він може бути {{jsxref("Function.call", "викликаний", "", 1)}} або {{jsxref("Function.apply", "застосований", "", 1)}} у об'єктах, схожих на масиви. Об'єкти, які не мають властивості <code>length</code>, що відображає останню з серії послідовних числових властивостей, що починаються з нуля, можуть поводитися непередбачувано.</p>
+
+<p>Будь ласка, зауважте, якщо у параметри передається більше одного значення, вони всі вставляються на початку об'єкта, саме в тому порядку, в якому були передані у параметри. Отже, виклик unshift з <strong>n</strong> аргументів <strong>за один раз</strong>, або виклик <strong>n</strong> разів з <strong>1</strong> аргументом (наприклад, у циклі), не дадуть однаковий результат. Наприклад:</p>
+
+<pre class="brush: js">let arr = [4, 5, 6];
+
+arr.unshift(1, 2, 3);
+console.log(arr);
+// [<strong>1, 2, 3</strong>, 4, 5, 6]
+
+arr = [4, 5, 6]; // скидаємо значення масиву
+
+arr.unshift(1);
+arr.unshift(2);
+arr.unshift(3);
+
+console.log(arr);
+// [<strong>3, 2, 1</strong>, 4, 5, 6]</pre>
+
+
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">var arr = [1, 2];
+
+arr.unshift(0); // результатом виклику буде значення 3, нова довжина масиву
+// arr дорівнює [0, 1, 2]
+
+arr.unshift(-2, -1); // нова довжина масиву дорівнює 5
+// arr дорівнює [-2, -1, 0, 1, 2]
+
+arr.unshift([-4, -3]); // нова довжина масиву дорівнює 6
+// arr дорівнбє [[-4, -3], -2, -1, 0, 1, 2]
+
+arr.unshift([-7, -6], [-5]); // нова довжина масиву дорівнює 8
+// arr дорівнює [ [-7, -6], [-5], [-4, -3], -2, -1, 0, 1, 2 ]</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Назва специфікації</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарій</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Початкове визначення. Реалізовано в JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Array.unshift")}}</p>
+
+<div id="compat-mobile"></div>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()")}}</li>
+ <li>{{jsxref("Array.prototype.pop()")}}</li>
+ <li>{{jsxref("Array.prototype.shift()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/array/values/index.html b/files/uk/web/javascript/reference/global_objects/array/values/index.html
new file mode 100644
index 0000000000..8df5438b95
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/values/index.html
@@ -0,0 +1,93 @@
+---
+title: Array.prototype.values()
+slug: Web/JavaScript/Reference/Global_Objects/Array/values
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Ітератор
+  - Масив
+  - метод
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/values
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>values()</code></strong> повертає новий об'єкт ітератора масиву (<strong><code>Array Iterator</code></strong>), який містить значення кожного елемента масиву.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-values.html")}}</p>
+
+<pre class="brush: js">var a = ['a', 'б', 'в', 'г', 'ґ'];
+var iterator = a.values();
+
+console.log(iterator.next().value); // а
+console.log(iterator.next().value); // б
+console.log(iterator.next().value); // в
+console.log(iterator.next().value); // г
+console.log(iterator.next().value); // ґ</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>arr</var>.values()</pre>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Новий об'єкт ітератора масиву.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Перебір_за_допомогою_циклу_for...of">Перебір за допомогою циклу <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code></h3>
+
+<pre class="brush: js">var arr = ['а', 'б', 'в', 'г', 'ґ'];
+var iterator = arr.values();
+
+for (let letter of iterator) {
+  console.log(letter);
+}
+</pre>
+
+<p><strong>Array.prototype.values</strong> є реалізацією за замовчуванням для <strong>Array.prototype[Symbol.iterator]</strong>.</p>
+
+<pre class="brush: js">Array.prototype.values === Array.prototype[Symbol.iterator]      //true</pre>
+
+<p><strong>TODO</strong>: please write about why we need it, use cases.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.values', 'Array.prototype.values')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.values")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.keys()")}}</li>
+ <li>{{jsxref("Array.prototype.entries()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/asyncfunction/index.html b/files/uk/web/javascript/reference/global_objects/asyncfunction/index.html
new file mode 100644
index 0000000000..d07be9a438
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/asyncfunction/index.html
@@ -0,0 +1,128 @@
+---
+title: AsyncFunction
+slug: Web/JavaScript/Reference/Global_Objects/AsyncFunction
+tags:
+  - JavaScript
+  - Довідка
+  - Конструктор
+translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction
+---
+<div>{{JSRef}}</div>
+
+<p>Конструктор <code><strong>Async</strong></code><strong><code>Function</code></strong> створює новий об'єкт {{jsxref("Statements/async_function", "асинхронної функції")}}. У JavaScript кожна асинхронна функція насправді є об'єктом <code>AsyncFunction</code>.</p>
+
+<p>Зауважте, що <code>AsyncFunction</code> <em>не є</em> глобальним об'єктом. Його можна отримати за допомогою наступного коду:</p>
+
+<pre class="brush: js">Object.getPrototypeOf(async function(){}).constructor
+</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">new AsyncFunction([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>Імена, що використовуватиме функція як формальні імена аргументів. Кожне має бути рядком, що відповідає коректному ідентифікатору JavaScript, або списком таких рядків, розділених комою; наприклад, "<code>x</code>", "<code>theValue</code>" або "<code>a,b</code>".</dd>
+ <dt><code>functionBody</code></dt>
+ <dd>Рядок, що містить інструкції JavaScript, які складають визначення функції.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Об'єкти {{jsxref("Statements/async_function", "асинхронних функцій")}}, створені конструктором <code>AsyncFunction</code>, розбираються, коли створюється функція. Це менш ефективно, ніж оголосити асинхронну функцію через {{jsxref("Statements/async_function", "async function")}} та викликати її у вашому коді, тому що такі функції розбираються з рештою коду.</p>
+
+<p>Усі аргументи, передані у функцію, сприймаються як імена ідентифікаторів параметрів функції, яка має бути створена, у тому порядку, в якому вони передані.</p>
+
+<div class="note">
+<p><strong>Заувага:</strong> {{jsxref("Statements/async_function", "асинхронні функції")}}, створені конструктором <code>AsyncFunction</code>, не утворюють замикань з контекстом свого створення; вони завжди створюються у глобальній області видимості.</p>
+
+<p>Під час виконання вони матимуть доступ тільки до власних локальних змінних та до глобальних, але не до змінних області видимості, в якій був викликаний конструктор <code>AsyncFunction</code>.</p>
+
+<p>Це відрізняється від використання {{jsxref("Global_Objects/eval", "eval")}} з кодом виразу асинхронної функції.</p>
+</div>
+
+<p>Використання конструктора <code>AsyncFunction</code> в якості функції (без оператора <code>new</code>) має такий самий ефект, як і виклик його в якості конструктора.</p>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt><code><strong>AsyncFunction.length</strong></code></dt>
+ <dd>Властивість <code>length</code> конструктора <code>AsyncFunction</code> (її значення дорівнює <code>1</code>).</dd>
+ <dt>{{jsxref("AsyncFunction.prototype")}}</dt>
+ <dd>Дозволяє додавати властивості до усіх об'єктів асинхронних функцій.</dd>
+</dl>
+
+<h2 id="Прототип_AsyncFunction">Прототип <code>AsyncFunction</code></h2>
+
+<h3 id="Властивості_2">Властивості</h3>
+
+<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype', 'Властивості')}}</div>
+
+<h2 id="Екземпляри_AsyncFunction">Екземпляри <code>AsyncFunction</code></h2>
+
+<p>Екземпляри <code>AsyncFunction</code> успадковують методи та властивості від {{jsxref("AsyncFunction.prototype")}}.</p>
+
+<p>Як в усіх конструкторах, ви можете змінювати об'єкт конструктора <code>prototype</code>, щоб вносити зміни до усіх екземплярів <code>AsyncFunction</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Створення_асинхронної_функції_конструктором_AsyncFunction">Створення асинхронної функції конструктором <code>AsyncFunction</code></h3>
+
+<pre class="brush: js">function resolveAfter2Seconds(x) {
+  return new Promise(resolve =&gt; {
+    setTimeout(() =&gt; {
+      resolve(x);
+    }, 2000);
+  });
+}
+
+let AsyncFunction = Object.getPrototypeOf(async function(){}).constructor
+
+let a = new AsyncFunction('a',
+                          'b',
+                          'return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b);');
+
+a(10, 20).then(v =&gt; {
+  console.log(v); // виводить 30 через 4 секунди
+});
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-async-function-objects', 'AsyncFunction object')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Початкове визначення у ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.AsyncFunction")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Statements/async_function", "async function")}}</li>
+ <li>{{jsxref("Operators/async_function", "вираз асинхронної функції")}}</li>
+ <li>{{jsxref("Global_Objects/Function", "Function")}}</li>
+ <li>{{jsxref("Statements/function", "оголошення функції")}}</li>
+ <li>{{jsxref("Operators/function", "функціональний вираз")}}</li>
+ <li>{{jsxref("Functions", "Функції", "", 1)}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/asyncfunction/prototype/index.html b/files/uk/web/javascript/reference/global_objects/asyncfunction/prototype/index.html
new file mode 100644
index 0000000000..c2df6c31db
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/asyncfunction/prototype/index.html
@@ -0,0 +1,59 @@
+---
+title: AsyncFunction.prototype
+slug: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype
+tags:
+  - JavaScript
+  - Властивість
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype
+---
+<div>{{JSRef}}</div>
+
+<p>Властивість <code><strong>AsyncFunction.prototype</strong></code> відображає прототип об'єкта {{jsxref("AsyncFunction")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Об'єкти {{jsxref("AsyncFunction")}} успадковуються від <code>AsyncFunction.prototype</code>. <code>AsyncFunction.prototype</code> не може бути змінений.</p>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt><code><strong>AsyncFunction.constructor</strong></code></dt>
+ <dd>Початковим значенням є {{jsxref("AsyncFunction")}}.</dd>
+ <dt><code><strong>AsyncFunction.prototype[@@toStringTag]</strong></code></dt>
+ <dd>Вертає "AsyncFunction".</dd>
+</dl>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-async-function-constructor-prototype', 'AsyncFunction.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Початкове визначення у ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.AsyncFunction.prototype")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("AsyncFunction")}}</li>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/bigint/asintn/index.html b/files/uk/web/javascript/reference/global_objects/bigint/asintn/index.html
new file mode 100644
index 0000000000..23dc106391
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/bigint/asintn/index.html
@@ -0,0 +1,78 @@
+---
+title: BigInt.asIntN()
+slug: Web/JavaScript/Reference/Global_Objects/BigInt/asIntN
+tags:
+  - BigInt
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/asIntN
+---
+<div>{{JSRef}}</div>
+
+<p>Статичний метод <strong><code>BigInt.asIntN</code></strong> використовується для обертання значення BigInt до цілого числа зі знаком у діапазоні між -2<sup>width-1</sup> та 2<sup>width-1</sup>-1.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/bigint-asintn.html", "taller")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">BigInt.asIntN(<var>width</var>, <var>bigint</var>);</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>width</var></code></dt>
+ <dd>Кількість бітів, доступних для розміру цілого числа.</dd>
+ <dt><code><var>bigint</var></code></dt>
+ <dd>Ціле число, яке треба затиснути, щоб вмістити у надані біти.</dd>
+</dl>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Значення <code><var>bigint</var></code> за модулем 2<sup><code><var>width</var></code></sup> у вигляді цілого числа зі знаком.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Щоб_залишатись_у_64-бітному_діапазоні">Щоб залишатись у 64-бітному діапазоні</h3>
+
+<p>Метод <code>BigInt.asIntN()</code> може бути корисним, якщо потрібно залишатись у діапазоні 64-бітної арифметики.</p>
+
+<pre class="brush: js notranslate">const max = 2n ** (64n - 1n) - 1n;
+
+BigInt.asIntN(64, max);
+// ↪ 9223372036854775807n
+
+BigInt.asIntN(64, max + 1n);
+// ↪ -9223372036854775807n
+// від'ємне число, через переповнення
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-bigint.asintn', 'BigInt.asIntN()')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.BigInt.asIntN")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{JSxRef("BigInt")}}</li>
+ <li>{{JSxRef("BigInt.asUintN()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/bigint/asuintn/index.html b/files/uk/web/javascript/reference/global_objects/bigint/asuintn/index.html
new file mode 100644
index 0000000000..87e7d50cd9
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/bigint/asuintn/index.html
@@ -0,0 +1,77 @@
+---
+title: BigInt.asUintN()
+slug: Web/JavaScript/Reference/Global_Objects/BigInt/asUintN
+tags:
+  - BigInt
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/asUintN
+---
+<div>{{JSRef}}</div>
+
+<p>Статичний метод <strong><code>BigInt.asUintN</code></strong> використовується для обертання значення BigInt до цілого беззнакового числа у діапазоні між 0 та 2<sup>width</sup>-1.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/bigint-asuintn.html", "taller")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">BigInt.asUintN(<var>width</var>, <var>bigint</var>);</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>width</var></code></dt>
+ <dd>Кількість бітів, доступних для розміру цілого числа.</dd>
+ <dt><code><var>bigint</var></code></dt>
+ <dd>Ціле число, яке треба затиснути, щоб вмістити у надані біти.</dd>
+</dl>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Значення <code><var>bigint</var></code> за модулем 2<sup><code><var>width</var></code></sup> у вигляді цілого беззнакового числа.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Щоб_залишатись_у_64-бітному_діапазоні">Щоб залишатись у 64-бітному діапазоні</h3>
+
+<p>Метод <code>BigInt.asUintN()</code> може бути корисним, якщо потрібно залишатись у межах 64-бітної арифметики.</p>
+
+<pre class="brush: js notranslate">const max = 2n ** 64n - 1n;
+
+BigInt.asUintN(64, max);
+// ↪ 18446744073709551615n
+
+BigInt.asUintN(64, max + 1n);
+// ↪ 0n
+// нуль, через переповнення</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-bigint.asuintn', 'BigInt.asUintN()')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.BigInt.asUintN")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{JSxRef("BigInt")}}</li>
+ <li>{{JSxRef("BigInt.asIntN()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/bigint/bigint/index.html b/files/uk/web/javascript/reference/global_objects/bigint/bigint/index.html
new file mode 100644
index 0000000000..5181816ae3
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/bigint/bigint/index.html
@@ -0,0 +1,64 @@
+---
+title: Конструктор BigInt()
+slug: Web/JavaScript/Reference/Global_Objects/BigInt/BigInt
+tags:
+  - BigInt
+  - JavaScript
+  - Довідка
+  - Конструктор
+translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/BigInt
+---
+<div>{{JSRef}}</div>
+
+<p>Конструктор <strong><code>BigInt()</code></strong> повертає значення типу <strong>bigint</strong>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">BigInt(<var>value</var>);
+</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>value</var></code></dt>
+ <dd>Числове значення об'єкта, що створюється. Може бути рядком або цілим числом.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Заувага</strong>: <code>BigInt()</code> не використовується з оператором {{JSxRef("Operators/new", "new")}}.</p>
+</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Створення_нового_обєкта_BigInt">Створення нового об'єкта BigInt</h3>
+
+<pre class="brush: js notranslate">BigInt(123);
+// 123n
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-bigint-constructor', 'BigInt constructor')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.BigInt.BigInt")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>Клас {{jsxref("BigInt")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/bigint/index.html b/files/uk/web/javascript/reference/global_objects/bigint/index.html
new file mode 100644
index 0000000000..89ced05a5d
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/bigint/index.html
@@ -0,0 +1,302 @@
+---
+title: BigInt
+slug: Web/JavaScript/Reference/Global_Objects/BigInt
+tags:
+  - BigInt
+  - JavaScript
+  - Довідка
+  - Клас
+translation_of: Web/JavaScript/Reference/Global_Objects/BigInt
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>BigInt</code></strong> є вбудованим об'єктом, який надає можливість відображати неушкодженими числа, більші за 2<sup>53</sup> - 1</span>, тобто, за найбільше число, яке може надійно відобразити JavaScript за допомогою {{Glossary("Primitive", "примітиву")}} <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число"><code>Number</code></a> та яке передається константою <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER"><code>Number.MAX_SAFE_INTEGER</code></a>. <strong><code>BigInt</code></strong> може використовуватись для довільно великих цілих чисел.</p>
+
+<dl>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p><code>BigInt</code> утворюється додаванням <code>n</code> у кінець цілочисельного літералу — <code>10n</code> — або викликом функції <code>BigInt()</code>.</p>
+
+<pre class="brush: js notranslate">const theBiggestInt = 9007199254740991n
+
+const alsoHuge = BigInt(9007199254740991)
+// ↪ 9007199254740991n
+
+const hugeString = BigInt("9007199254740991")
+// ↪ 9007199254740991n
+
+const hugeHex = BigInt("0x1fffffffffffff")
+// ↪ 9007199254740991n
+
+const hugeBin = BigInt("0b11111111111111111111111111111111111111111111111111111")
+// ↪ 9007199254740991n
+</pre>
+
+<p>Тип <code>BigInt</code> певними рисами схожий на <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число"><code>Number</code></a>, але також відрізняється у кількох ключових моментах — він не може використовуватись з методами вбудованого об'єкта <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Math"><code>Math</code></a> та не може змішуватись з екземплярами <code>Number</code> у операціях; вони мають бути приведені до одного типу. Однак, будьте обережні, перетворюючи значення туди й назад, бо <code>BigInt</code> може втратити точність при перетворенні на <code>Number</code>.</p>
+
+<h3 id="Інформація_про_тип">Інформація про тип</h3>
+
+<p>При перевірці на <code>typeof</code>, <code>BigInt</code> видасть "bigint":</p>
+
+<pre class="brush: js notranslate">typeof 1n === 'bigint'           // true
+typeof BigInt('1') === 'bigint'  // true
+</pre>
+
+<p>При загортанні у <code>Object</code>, <code>BigInt</code> вважатиметься звичайним типом "object":</p>
+
+<pre class="brush: js notranslate">typeof Object(1n) === 'object'  // true
+</pre>
+
+<h3 id="Оператори">Оператори</h3>
+
+<p>Наступні оператори можна використовувати з <code>BigInt</code> (або з загорнутими у об'єкт <code>BigInt</code>): <code>+</code>, <code>*</code>, <code>-</code>, <code>**</code>, <code>%</code>.</p>
+
+<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Бітові оператори</a> також підтримуються, окрім <code>&gt;&gt;&gt;</code> (правий зсув із заповненням нулями), оскільки числа BigInt мають знак.</p>
+
+<p>Також не підтримується унарний оператор (<code>+</code>), <a href="https://github.com/tc39/proposal-bigint/blob/master/ADVANCED.md#dont-break-asmjs">щоб не ламати asm.js</a>.</p>
+
+<pre class="brush: js notranslate">const previousMaxSafe = BigInt(Number.MAX_SAFE_INTEGER)
+// ↪ 9007199254740991n
+
+const maxPlusOne = previousMaxSafe + 1n
+// ↪ 9007199254740992n
+
+const theFuture = previousMaxSafe + 2n
+// ↪ 9007199254740993n, тепер це працює!
+
+const multi = previousMaxSafe * 2n
+// ↪ 18014398509481982n
+
+const subtr = multi – 10n
+// ↪ 18014398509481972n
+
+const mod = multi % 10n
+// ↪ 2n
+
+const bigN = 2n ** 54n
+// ↪ 18014398509481984n
+
+bigN * -1n
+// ↪ –18014398509481984n
+</pre>
+
+<p>Оператор <code>/</code> також працює, як і очікується, з повними числами.</p>
+
+<p>Однак, оскільки це <code>BigInt</code>, а не <code>BigDecimal</code>, ця операція округлить результат в бік <code>0</code> (іншими словами, вона не поверне десяткових знаків).</p>
+
+<div class="blockIndicator warning">
+<p>Дробова частина результату операції буде обрізана при використанні з <code>BigInt</code>.</p>
+</div>
+
+<pre class="brush: js notranslate">const expected = 4n / 2n
+// ↪ 2n
+
+const rounded = 5n / 2n
+// ↪ 2n, а не 2.5n
+
+</pre>
+
+<h3 id="Порівняння">Порівняння</h3>
+
+<p><code>BigInt</code> не є строго рівним <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число"><code>Number</code></a>, але <em>є</em> нестрого рівним:</p>
+
+<pre class="brush: js notranslate">0n === 0
+// ↪ false
+
+0n == 0
+// ↪ true</pre>
+
+<p><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число"><code>Number</code></a> та <code>BigInt</code> можна порівнювати звичайним чином:</p>
+
+<pre class="brush: js notranslate">1n &lt; 2
+// ↪ true
+
+2n &gt; 1
+// ↪ true
+
+2 &gt; 2
+// ↪ false
+
+2n &gt; 2
+// ↪ false
+
+2n &gt;= 2
+// ↪ true</pre>
+
+<p>Їх можна змішувати у масивах та сортувати:</p>
+
+<pre class="brush: js notranslate">const mixed = [4n, 6, -12n, 10, 4, 0, 0n]
+// ↪  [4n, 6, -12n, 10, 4, 0, 0n]
+
+mixed.sort() // звичайна поведінка при сортуванні
+// ↪  [ -12n, 0, 0n, 10, 4n, 4, 6 ]
+
+mixed.sort((a, b) =&gt; a - b)
+// не спрацює, оскільки віднімання не працює при змішуванні типів
+// TypeError: can't convert BigInt to number
+
+// сортування з потрібним порівнянням чисел
+mixed.sort((a, b) =&gt; (a &lt; b) ? -1 : ((a &gt; b) ? 1 : 0)
+// ↪  [ -12n, 0, 0n, 4n, 4, 6, 10 ]
+</pre>
+
+<p>Зауважте, що порівняння чисел <code>BigInt</code>, загорнутих у об'єкт, працюють так само, як з іншими об'єктами, вони рівні тільки при порівнянні одного й того ж самого об'єкта:</p>
+
+<pre class="brush: js notranslate">0n === Object(0n)          // false
+Object(0n) === Object(0n)  // false
+
+const o = Object(0n)
+o === o                    // true
+</pre>
+
+<h3 id="Умовні_конструкції">Умовні конструкції</h3>
+
+<p><code>BigInt</code> поводиться так само, як і <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число"><code>Number</code></a>, у тих випадках, де:</p>
+
+<ul>
+ <li>перетворюється на <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a>: функцією <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a>;</li>
+ <li>використовується з <a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators">логічними операторами</a> <code>||</code>, <code>&amp;&amp;</code> та <code>!</code>; або</li>
+ <li>всередині умовної перевірки, наприклад, в інструкції <a href="/uk/docs/Web/JavaScript/Reference/Statements/if...else"><code>if</code></a>.</li>
+</ul>
+
+<pre class="brush: js notranslate">if (0n) {
+  console.log('Привіт з if!')
+} else {
+  console.log('Привіт з else!')
+}
+
+// ↪ "Привіт з else!"
+
+0n || 12n
+// ↪ 12n
+
+0n &amp;&amp; 12n
+// ↪ 0n
+
+Boolean(0n)
+// ↪ false
+
+Boolean(12n)
+// ↪ true
+
+!12n
+// ↪ false
+
+!0n
+// ↪ true
+</pre>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/BigInt/BigInt"><code>BigInt()</code></a></dt>
+ <dd>Створює нове значення <code>bigint</code>.</dd>
+</dl>
+
+<h2 id="Статичні_методи">Статичні методи</h2>
+
+<dl>
+ <dt><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/BigInt/asIntN"><code>BigInt.asIntN()</code></a></dt>
+ <dd>Обертає значення <code>BigInt</code> до цілого числа зі знаком у діапазоні між <code>-2<var><sup>width</sup></var><sup>-1</sup></code> та <code>2<var><sup>width</sup></var><sup>-1</sup> - 1</code>.</dd>
+ <dt><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/BigInt/asUintN"><code>BigInt.asUintN()</code></a></dt>
+ <dd>Обертає значення <code>BigInt</code> до беззнакового цілого числа у діапазоні між <code>0</code> та <code>2<var><sup>width</sup></var> - 1</code>.</dd>
+</dl>
+
+<h2 id="Методи_екземплярів">Методи екземплярів</h2>
+
+<dl>
+ <dt><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/BigInt/toLocaleString"><code>BigInt.prototype.toLocaleString()</code></a></dt>
+ <dd>Повертає рядок, який відображає число у відповідності до налаштувань мови. Заміщує метод <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/toLocaleString"><code>Object.prototype.toLocaleString()</code></a>.</dd>
+ <dt><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/BigInt/toString"><code>BigInt.prototype.toString()</code></a></dt>
+ <dd>Вертає рядкове представлення вказаного об'єкта з вказаною основою системи числення. Заміщує метод <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/toString"><code>Object.prototype.toString()</code></a>.</dd>
+ <dt><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/BigInt/valueOf"><code>BigInt.prototype.valueOf()</code></a></dt>
+ <dd>Вертає загорнуте примітивне значення вказаного об'єкта. Заміщує метод <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf"><code>Object.prototype.valueOf()</code></a>.</dd>
+</dl>
+
+<h2 id="Рекомендації_щодо_використання">Рекомендації щодо використання</h2>
+
+<h3 id="Перетворення_типів">Перетворення типів</h3>
+
+<p>Оскільки перетворення між <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число"><code>Number</code></a> та <code>BigInt</code> можуть призвести до втрати точності, рекомендується використовувати лише <code>BigInt</code>, коли очікуються значення, більші за 2<sup>53</sup>, і не переключатись між двома типами.</p>
+
+<h3 id="Криптографія">Криптографія</h3>
+
+<p>Операції, що підтримуються на об'єктах <code>BigInt</code>, не є операціями сталого часу. Таким чином, об'єкти <code>BigInt</code> <a href="https://www.chosenplaintext.ca/articles/beginners-guide-constant-time-cryptography.html">непридатні для використання у криптографії</a>.</p>
+
+<h3 id="Використання_у_JSON">Використання у JSON</h3>
+
+<p>Використання <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify"><code>JSON.stringify()</code></a> з будь-яким значенням <code>BigInt</code> спричинить <code>TypeError</code>, оскільки значення <code>BigInt</code> не серіалізуються у JSON за замовчуванням. Однак, ви можете за необхідності реалізувати свій власний метод <code>toJSON</code>:</p>
+
+<pre class="brush: js notranslate">BigInt.prototype.toJSON = function() { return this.toString()  }</pre>
+
+<p>Тепер <code>JSON.stringify</code>, замість викидання винятку, повертає ось такий рядок:</p>
+
+<pre class="brush: js notranslate">JSON.stringify(BigInt(1))
+// '"1"'</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Обчислення_простих_чисел">Обчислення простих чисел</h3>
+
+<pre class="brush: js notranslate">// Повертає true, якщо передане значення BigInt є простим числом
+function isPrime(p) {
+  for (let i = 2n; i * i &lt;= p; i++) {
+    if (p % i === 0n) return false;
+  }
+  return true
+}
+
+// Приймає BigInt в якості аргументу, повертає n-не просте число як BigInt
+function nthPrime(nth) {
+  let maybePrime = 2n
+  let prime = 0n
+
+  while (nth &gt;= 0n) {
+    if (isPrime(maybePrime)) {
+      nth--
+      prime = maybePrime
+    }
+    maybePrime++
+  }
+
+  return prime
+}
+
+nthPrime(20n)
+// ↪ 73n</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("ESDraft", "#sec-bigint-objects", "<code>BigInt</code> objects")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("javascript.builtins.BigInt")}}</p>
+
+<h3 id="Хід_реалізації">Хід реалізації</h3>
+
+<p>Наведена нижче таблиця надає щоденний статус реалізації цієї функціональності, оскільки функціональність ще не досягла кросбраузерної стабільності. Дані генеруються запуском відповідних тестів функціональності у <a href="https://github.com/tc39/test262">Test262</a>, стандартному тестовому наборі JavaScript, на нічній збірці чи на останньому релізі рушія JavaScript кожного веб-переглядача.</p>
+
+<div>{{EmbedTest262ReportResultsTable("BigInt")}}</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число"><code>Number</code></a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER"><code>Number.MAX_SAFE_INTEGER</code></a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/bigint/tolocalestring/index.html b/files/uk/web/javascript/reference/global_objects/bigint/tolocalestring/index.html
new file mode 100644
index 0000000000..b5f9480b8f
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/bigint/tolocalestring/index.html
@@ -0,0 +1,123 @@
+---
+title: BigInt.prototype.toLocaleString()
+slug: Web/JavaScript/Reference/Global_Objects/BigInt/toLocaleString
+tags:
+  - BigInt
+  - Intl
+  - JavaScript
+  - Інтернаціоналізація
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/toLocaleString
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>toLocaleString()</code></strong> повертає рядок, що відображає об'єкт BigInt у відповідності до налаштувань мови.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/bigint-tolocalestring.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><em>bigIntObj</em>.toLocaleString(</code><code>[locales [, options]])</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<p>Аргументи <code>locales</code> та <code>options</code> налаштовують поведінку функції та дозволяють застосункам вказувати мову, чиї правила форматування мають застосовуватись. У тих реалізаціях, які ігнорують аргументи <code>locales</code> та <code>options</code>, локальні налаштування та форма поверненого рядка повністю залежать від реалізації.</p>
+
+<div>Дивіться <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/NumberFormat">конструктор <code>Intl.NumberFormat()</code></a>, щоб дізнатись подробиці щодо цих параметрів та їхнього використання.</div>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Рядок, що відображає надане значення BigInt у відповідності до налаштувань мови.</p>
+
+<h2 id="Швидкодія">Швидкодія</h2>
+
+<p>При форматуванні великої кількості чисел краще створити об'єкт {{jsxref("NumberFormat")}} та використовувати функцію, надану його властивістю {{jsxref("NumberFormat.format")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_toLocaleString">Використання <code>toLocaleString</code></h3>
+
+<p>При загальному використанні, без зазначення мови, повертається рядок у мовному форматі, що стоїть за замовчуванням та з початковими параметрами.</p>
+
+<pre class="brush: js notranslate">var bigint = 3500n;
+
+bigint.toLocaleString();
+// Відображає "3,500" у форматі U.S. English
+</pre>
+
+<h3 id="Використання_locales">Використання <code>locales</code></h3>
+
+<p>Цей приклад демонструє деякі варіації локалізованих форматів чисел. Щоб отримати формат мови, задіяної в інтерфейсі вашого застосутку, переконайтесь, що вказали цю мову (та, можливо, кілька запасних мов) за допомогою аргументу <code>locales</code>:</p>
+
+<pre class="brush: js notranslate">var bigint = 123456789123456789n;
+
+// В німецькій мові крапка розділяє тисячі
+console.log(bigint.toLocaleString('de-DE'));
+// → 123.456.789.123.456.789
+
+// Арабська у більшості арабськомовних країн використовує <a href="https://uk.wikipedia.org/wiki/%D0%86%D0%BD%D0%B4%D0%BE-%D0%B0%D1%80%D0%B0%D0%B1%D1%81%D1%8C%D0%BA%D0%B0_%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0_%D1%87%D0%B8%D1%81%D0%BB%D0%B5%D0%BD%D0%BD%D1%8F">Індо-арабські</a> цифри
+console.log(bigint.toLocaleString('ar-EG'));
+// → ١٢٣٬٤٥٦٬٧٨٩٬١٢٣٬٤٥٦٬٧٨٩
+
+// Індія використовує роздільники тисячі/лакх/крор
+console.log(bigint.toLocaleString('en-IN'));
+// → 1,23,45,67,89,12,34,56,789
+
+// ключ розширення nu налаштовує систему нумерації, наприклад, китайську десяткову
+console.log(bigint.toLocaleString('zh-Hans-CN-u-nu-hanidec'));
+// → 一二三,四五六,七八九,一二三,四五六,七八九
+
+// при запиті мови, яка, можливо, не підтримується, наприклад,
+// балійської, додайте запасні мови, в даному випадку це індонезійська
+console.log(bigint.toLocaleString(['ban', 'id']));
+// → 123.456.789.123.456.789
+</pre>
+
+<h3 id="Використання_options">Використання <code>options</code></h3>
+
+<p>Результат методу <code>toLocaleString</code> можна налаштувати за допомогою аргументу <code>options</code>:</p>
+
+<pre class="brush: js notranslate">var bigint = 123456789123456789n;
+
+// налаштування формату валюти
+console.log(bigint.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }));
+// → 123.456.789.123.456.789,00 €
+
+// японська єна не використовує дробові розряди
+console.log(bigint.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }))
+// → ￥123,456,789,123,456,789
+
+// обмежити трьома значущими цифрами
+console.log(bigint.toLocaleString('en-IN', { maximumSignificantDigits: 3 }));
+// → 1,23,00,00,00,00,00,00,000
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-bigint.prototype.tolocalestring', 'BigInt.prototype.toLocaleString()')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sup-bigint.prototype.tolocalestring', 'BigInt.prototype.toLocaleString()')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.BigInt.toLocaleString")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("BigInt.toString()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/bigint/tostring/index.html b/files/uk/web/javascript/reference/global_objects/bigint/tostring/index.html
new file mode 100644
index 0000000000..60576ed564
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/bigint/tostring/index.html
@@ -0,0 +1,93 @@
+---
+title: BigInt.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/BigInt/toString
+tags:
+  - BigInt
+  - JavaScript
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/toString
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>toString()</code></strong> вертає рядкове представлення вказаного об'єкта {{jsxref("BigInt")}}. Кінцевий символ "n" не є частиною рядка.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/bigint-tostring.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>bigIntObj</var>.toString([<var>radix</var>])</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>radix</code>{{optional_inline}}</dt>
+ <dd>Необов'язковий. Ціле число в діапазоні від 2 до 36, яке вказує основу системи числення для відображення чисел.</dd>
+</dl>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Рядкове представлення вказаного об'єкта {{jsxref("BigInt")}}.</p>
+
+<h3 id="Винятки">Винятки</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Якщо методу <code>toString()</code> надано основу, меншу за 2 чи більшу за 36, викидається {{jsxref("RangeError")}}.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Об'єкт {{jsxref("BigInt")}} заміщує метод <code>toString()</code> об'єкта {{jsxref("Object")}}; він не успадковує {{jsxref("Object.prototype.toString()")}}. Для об'єктів {{jsxref( "BigInt")}} метод <code>toString()</code> вертає рядкове представлення об'єкта у вказаній системі числення.</p>
+
+<p>Метод <code>toString()</code> розбирає перший аргумент та намагається повернути рядкове представлення числа з вказаною основою <em>radix</em>. Для основ, більших за 10, літери алфавіту вказують числа, більші за 9. Наприклад, для шістнадцяткових чисел (основа 16) використовуються літери від <code>a</code> до <code>f</code>.</p>
+
+<p>Якщо аргумент <code>radix</code> не вказаний, основа вважається рівною 10.</p>
+
+<p>Якщо значення <code>bigIntObj</code> від'ємне, знак зберігається. Це відбувається, навіть якщо основа дорівнює <code>2</code>; повернений рядок - це додатне двійкове представлення числа <code>bigIntObj</code> зі знаком <code>-</code> попереду, а <strong>не</strong> <code>bigIntObj</code> у форматі доповняльного коду.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_toString">Використання <code>toString</code></h3>
+
+<pre class="brush: js notranslate">17n.toString();      // '17'
+66n.toString(2);     // '1000010'
+254n.toString(16);   // 'fe'
+-10n.toString(2);    // -1010'
+-0xffn.toString(2);  // '-11111111'
+</pre>
+
+<h3 id="Відємний_нуль_у_BigInt">Від'ємний нуль у <code>BigInt</code></h3>
+
+<p>У <code>BigInt</code> не існує від'ємного нуля, оскільки не існує від'ємних нулів у цілих числах. <code>-0.0</code> є концепцією IEEE для чисел з плаваючою крапкою, яка присутня у JavaScript лише у типі {{jsxref("Число", "Number")}}.</p>
+
+<pre class="brush: js notranslate">(-0n).toString();      // '0'
+BigInt(-0).toString(); // '0'</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-bigint.prototype.tostring', 'BigInt.prototype.toString()')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.BigInt.toString")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("BigInt.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("BigInt.prototype.valueOf()")}}</li>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/bigint/valueof/index.html b/files/uk/web/javascript/reference/global_objects/bigint/valueof/index.html
new file mode 100644
index 0000000000..c3c998995c
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/bigint/valueof/index.html
@@ -0,0 +1,57 @@
+---
+title: BigInt.prototype.valueOf()
+slug: Web/JavaScript/Reference/Global_Objects/BigInt/valueOf
+tags:
+  - BigInt
+  - JavaScript
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/valueOf
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>valueOf()</code></strong> вертає загорнуте примітивне значення об'єкта {{jsxref("BigInt")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/bigint-valueof.html","shorter")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><var>bigIntObj</var>.valueOf()</pre>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>BigInt, що відображає примітивне значення вказаного об'єкта {{jsxref("BigInt")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_valueOf">Використання <code>valueOf</code></h3>
+
+<pre class="brush: js notranslate">typeof Object(1n); // object
+typeof Object(1n).valueOf(); // bigint
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-bigint.prototype.valueof', 'BigInt.prototype.valueOf()')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.BigInt.valueOf")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("BigInt.prototype.toString()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/boolean/boolean/index.html b/files/uk/web/javascript/reference/global_objects/boolean/boolean/index.html
new file mode 100644
index 0000000000..e34eca39fc
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/boolean/boolean/index.html
@@ -0,0 +1,75 @@
+---
+title: Конструктор Boolean()
+slug: Web/JavaScript/Reference/Global_Objects/Boolean/Boolean
+tags:
+  - Boolean
+  - JavaScript
+  - Довідка
+  - Конструктор
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/Boolean
+---
+<div>{{JSRef}}</div>
+
+<p>Конструктор <strong><code>Boolean()</code></strong> використовується для створення об'єктів {{jsxref("Boolean")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/boolean-constructor.html","shorter")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">new Boolean([<var>value</var>])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>value</code> {{optional_inline}}</dt>
+ <dd>Початкове значення об'єкта <code>Boolean</code>.</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Створення_обєктів_Boolean_з_початковим_значенням_false">Створення об'єктів <code>Boolean</code> з початковим значенням <code>false</code></h3>
+
+<pre class="brush: js notranslate">var bNoParam = new Boolean();
+var bZero = new Boolean(0);
+var bNull = new Boolean(null);
+var bEmptyString = new Boolean('');
+var bfalse = new Boolean(false);
+</pre>
+
+<h3 id="Створення_обєктів_Boolean_з_початковим_значенням_true">Створення об'єктів <code>Boolean</code> з початковим значенням <code>true</code></h3>
+
+<pre class="brush: js notranslate">var btrue = new Boolean(true);
+var btrueString = new Boolean('true');
+var bfalseString = new Boolean('false');
+var bSuLin = new Boolean('Su Lin');
+var bArrayProto = new Boolean([]);
+var bObjProto = new Boolean({});</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-boolean-constructor', 'Boolean constructor')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Boolean.Boolean")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Glossary/Boolean">Boolean</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/boolean/index.html b/files/uk/web/javascript/reference/global_objects/boolean/index.html
new file mode 100644
index 0000000000..221625ff80
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/boolean/index.html
@@ -0,0 +1,157 @@
+---
+title: Boolean
+slug: Web/JavaScript/Reference/Global_Objects/Boolean
+tags:
+  - Boolean
+  - JavaScript
+  - Конструктор
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean
+---
+<div>{{JSRef}}</div>
+
+<p>Об'єкт <strong><code>Boolean</code></strong> - це об'єкт-обгортка для значень булевого типу.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">new Boolean([<var>value</var>])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Необов'язковий. Початкове значення об'єкту <code>Boolean</code>.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Значення, передане як перший параметр, перетворюється в логічне значення, якщо це необхідно. Якщо значення опущено або являється <code>0</code>, <code>-0</code>, {{jsxref("null")}}, <code>false</code>, {{jsxref("NaN")}}, {{jsxref("undefined")}}, або порожнім рядком (<code>""</code>), об'єкт міститиме значення <code>false</code>. Всі інші значення, включаючи будь-який об'єкт або рядок <code>"false"</code>, створюють об'єкт із  значенням <code>true</code>.</p>
+
+<p>Не плутайте примітивні <code>Boolean</code> значення <code>true</code> та <code>false</code> з <code>true</code> та <code>false</code> значеннями об'єкту <code>Boolean</code>.</p>
+
+<p>Будь-який об'єкт, значення якого не {{jsxref("undefined")}} чи {{jsxref("null")}}, в тому числі об'єкт <code>Boolean</code> із значенням  <code>false</code>, прирівнюється до <code>true</code> при передачі до умовного виразу. Для прикладу, умова в наступному {{jsxref("Statements/if...else", "if")}} виразі прирівнюється до <code>true</code>:</p>
+
+<pre class="brush: js">var x = new Boolean(false);
+if (x) {
+  // цей код виконуватиметься
+}
+</pre>
+
+<p>Ця поведінка не властива примітивам <code>Boolean</code>. Для прикладу, умова в наступному {{jsxref("Statements/if...else", "if")}} виразі прирівнюється до <code>false</code>:</p>
+
+<pre class="brush: js">var x = false;
+if (x) {
+  // цей код не виконуватиметься
+}
+</pre>
+
+<p>Не використовуйте об'єкт <code>Boolean</code> для перетворення не булевого значення в булеве. Замість цього використайте <code>Boolean</code> як функцію, щоб досягнути цього:</p>
+
+<pre class="brush: js">var x = Boolean(expression);     // рекомендовано
+var x = new Boolean(expression); // не варто використовувати
+</pre>
+
+<p>Якщо ви вказали будь-який об'єкт, включаючи об'єкт <code>Boolean</code> із значенням <code>false</code> в якості значення нового <code>Boolean</code> об'єкту, цей об'єкт матиме значення <code>true</code>.</p>
+
+<pre class="brush: js">var myFalse = new Boolean(false);   // значення false
+var g = Boolean(myFalse);       // значення true
+var myString = new String('Hello'); // строковий об'єкт
+var s = Boolean(myString);      // значення true
+</pre>
+
+<p>Не використовуйте об'єкт <code>Boolean</code> замість примітиву <code>Boolean</code>.</p>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt><code>Boolean.length</code></dt>
+ <dd>
+ <p>Поле довжини із значенням 1.</p>
+ </dd>
+ <dt>{{jsxref("Boolean.prototype")}}</dt>
+ <dd>Представляє прототип конструктора <code>Boolean</code>.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<p>Хоча глобальний <code>Boolean</code> об'єкт не містить жодних власних методів, він успадковує деякі методи через ланцюжок прототипів.</p>
+
+<h2 id="Екземпляри_Boolean">Екземпляри <code>Boolean</code></h2>
+
+<p>Всі екземпляри<code>Boolean</code> успадковуються від {{jsxref("Boolean.prototype")}}. Як і у всіх конструкторів, об'єкт прототипу визначає успадковані властивості та методи екземплярів.</p>
+
+<h3 id="Властивості_2">Властивості</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype', 'Properties')}}</div>
+
+<h3 id="Методи_2">Методи</h3>
+
+<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype', 'Методи')}}</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Створення_об'єктів_Boolean_з_початковим_значенням_false">Створення об'єктів <code>Boolean</code> з початковим значенням <code>false</code></h3>
+
+<pre class="brush: js">var bNoParam = Boolean();
+var bZero = Boolean(0);
+var bNull = Boolean(null);
+var bEmptyString = Boolean('');
+var bfalse = Boolean(false);
+</pre>
+
+<h3 id="Створення_об'єктів_Boolean_з_початковим_значенням_true">Створення об'єктів <code>Boolean</code> з початковим значенням <code>true</code></h3>
+
+<pre class="brush: js">var btrue = Boolean(true);
+var btrueString = Boolean('true');
+var bfalseString = Boolean('false');
+var bSuLin = Boolean('Su Lin');
+var bArrayProto = Boolean([]);
+var bObjProto = Boolean({});
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення. Впроваджено в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.6', 'Boolean')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-boolean-objects', 'Boolean')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-boolean-objects', 'Boolean')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб_переглядачами">Сумісність з веб переглядачами</h2>
+
+<div>
+<div class="hidden">Таблиця сумісності на цій сторінці генерується з структурованих даних. Якщо ви хочете внести свій внесок у дані, будь ласка, завітайте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> та надсилайте свої запити на зміни.</div>
+
+<p>{{Compat("javascript.builtins.Boolean")}}</p>
+</div>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Boolean.prototype")}}</li>
+ <li>{{Glossary("Boolean")}}</li>
+ <li><a href="https://uk.wikipedia.org/wiki/%D0%9B%D0%BE%D0%B3%D1%96%D1%87%D0%BD%D0%B8%D0%B9_%D1%82%D0%B8%D0%BF_%D0%B4%D0%B0%D0%BD%D0%B8%D1%85">Логічний (булевий) тип даних (Wikipedia)</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/boolean/prototype/index.html b/files/uk/web/javascript/reference/global_objects/boolean/prototype/index.html
new file mode 100644
index 0000000000..4ae7e48bcb
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/boolean/prototype/index.html
@@ -0,0 +1,82 @@
+---
+title: Boolean.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype
+tags:
+  - Boolean
+  - JavaScript
+  - Властивість
+  - Поле
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean
+---
+<div>{{JSRef}}</div>
+
+<p>Поле <strong><code>Boolean.prototype</code></strong> представляє прототип конструктора {{jsxref("Boolean")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<div>{{EmbedInteractiveExample("pages/js/boolean-constructor.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь-ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Екземпляри {{jsxref("Boolean")}} наслідуються від <code>Boolean.prototype</code>. Ви можете використовувати об'єкт прототипа конструктора, щоб додавати свої поля та методи до всіх екземплярів {{jsxref("Boolean")}}.</p>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt><code>Boolean.prototype.constructor</code></dt>
+ <dd>Повертає функцію, що створила прототип екземпляра. За замовчування це функція {{jsxref("Boolean")}}.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<dl>
+ <dt>{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Повертає строку, що містить сирець об'єкту {{jsxref("Boolean")}}; використавши її ви можете створити еквівалентний об'єкт. Перевизначає метод {{jsxref("Object.prototype.toSource()")}}.</dd>
+ <dt>{{jsxref("Boolean.prototype.toString()")}}</dt>
+ <dd>Повертає строку <code>"true"</code> чи <code>"false"</code> залежно від значення об'єкту. Перевизначає метод {{jsxref("Object.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("Boolean.prototype.valueOf()")}}</dt>
+ <dd>Повертає примітив значення об'єкту {{jsxref("Boolean")}}. Перевизначає метод {{jsxref("Object.prototype.valueOf()")}}.</dd>
+</dl>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Примітка</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Первинне визначення. Реалізовано у JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-boolean.prototype', 'Boolean.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<div>
+<div class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</div>
+
+<p>{{Compat("javascript.builtins.Boolean.prototype")}}</p>
+</div>
diff --git a/files/uk/web/javascript/reference/global_objects/boolean/tosource/index.html b/files/uk/web/javascript/reference/global_objects/boolean/tosource/index.html
new file mode 100644
index 0000000000..0630c09cde
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/boolean/tosource/index.html
@@ -0,0 +1,58 @@
+---
+title: Boolean.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Boolean/toSource
+tags:
+  - Boolean
+  - JavaScript
+  - Нестандарт
+  - метод
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toSource
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Метод <code><strong>toSource()</strong></code> повертає строку, що представляє сирцевий код об'єкту.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>booleanObj</var>.toSource()
+Boolean.toSource()</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Строка, що представляє сирцевий код об'єкту.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>toSource</code> повертає наступні значення:</p>
+
+<ul>
+ <li>Для вбудованого об'єкту {{jsxref("Boolean")}}, <code>toSource</code> повертає наступну строку (яка означає, що сирцевий код недоступний):
+
+  <pre class="brush: js">function Boolean() {
+    [native code]
+}
+</pre>
+ </li>
+ <li>Для екземплярів {{jsxref("Boolean")}}, <code>toSource</code> повертає строку, що представляє сирцевий код об'єкту.</li>
+</ul>
+
+<p>Цей метод зазвичай викликається всередині у JavaScript, а не прямо у коді.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Не є частиною жодного стандарту. Реалізовано у JavaScript 1.3.</p>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<div>
+<div class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</div>
+
+<p>{{Compat("javascript.builtins.Boolean.toSource")}}</p>
+</div>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/boolean/tostring/index.html b/files/uk/web/javascript/reference/global_objects/boolean/tostring/index.html
new file mode 100644
index 0000000000..307d61dd93
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/boolean/tostring/index.html
@@ -0,0 +1,99 @@
+---
+title: Boolean.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Boolean/toString
+tags:
+  - Boolean
+  - JavaScript
+  - метод
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toString
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>toString()</strong></code> повертає рядкове подання об'єкта Boolean.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/boolean-tostring.html")}}</div>
+
+<p class="hidden">Першокод цього прикладу збережено у репозиторії GitHub. Якщо ви хочете долучитися до створення чи поліпшення таких прикладів, пропонуйте нам свої зміни до репозиторію <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>bool</var>.toString()</code></pre>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>Рядок, що є поданням відповідного значення типу {{jsxref("Boolean")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Об'єкт {{jsxref("Boolean")}} перевизначає метод <code>toString</code> об'єкта {{jsxref("Object")}}, а не успадковує {{jsxref("Object.prototype.toString()")}}. Для об'єктів Boolean метод <code>toString</code> повертає рядкове подання об'єкта.</p>
+
+<p>JavaScript викликає метод <code>toString</code> автоматично, коли треба подати {{jsxref("Boolean")}} як рядкове значення (наприклад, для злучення із іншим рядком).</p>
+
+<p>Для {{glossary("primitive", "простих значень")}} та об'єктів типу {{jsxref("Boolean")}}, вбудований метод <code>toString</code> повертає рядок "<code>true</code>" або "<code>false</code>" залежно від значення Boolean.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_toString">Застосування <code>toString</code></h3>
+
+<p>Наведений приклад засвідчує перетворення простих значень та об'єктів типу Boolean на рядки з відповідним вмістом:</p>
+
+<pre class="brush: js">var objTrue = new Boolean(true);
+var objFalse = new Boolean(false);
+var valTrue = true;
+var valFalse = false;
+
+console.log("true" === true.toString());    // виводить true
+console.log("false" === false.toString());  // виводить true
+
+console.log("true" === objTrue.toString());    // виводить true
+console.log("false" === objFalse.toString());  // виводить true
+console.log("true" === valTrue.toString());    // виводить true
+console.log("false" === valFalse.toString());  // виводить true
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкова виознака.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.6.4.2', 'Boolean.prototype.toString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div>
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Boolean.toString")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/boolean/valueof/index.html b/files/uk/web/javascript/reference/global_objects/boolean/valueof/index.html
new file mode 100644
index 0000000000..b375d67dec
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/boolean/valueof/index.html
@@ -0,0 +1,94 @@
+---
+title: Boolean.prototype.valueOf()
+slug: Web/JavaScript/Reference/Global_Objects/Boolean/valueOf
+tags:
+  - Boolean
+  - JavaScript
+  - метод
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/valueOf
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>valueOf()</strong></code> повертає {{glossary("primitive", "просте значення")}} об'єкта {{jsxref("Boolean")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/boolean-valueof.html")}}</div>
+
+<p class="hidden">Першокод цього прикладу збережено у репозиторії GitHub. Якщо ви хочете долучитися до створення чи поліпшення таких прикладів, пропонуйте нам свої зміни до репозиторію <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>bool</var>.valueOf()</code></pre>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>Просте значення об'єкта {{jsxref("Boolean")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>valueOf</code> об'єкта {{jsxref("Boolean")}} повертає просте значення об'єкта Boolean, а якщо змінна вже містить просте значення, то повертає його без змін:</p>
+
+<pre class="brush: js">var obj = new Boolean(true);
+var val = true;
+
+console.log(obj.valueOf() === true);  // виводить true
+console.log(obj.valueOf() === obj);   // виводить false
+
+console.log(val.valueOf() === true);  // виводить true
+console.log(val.valueOf() === val);   // виводить true</pre>
+
+<p>Цей метод зазвичай викликається всередині JavaScript, а не в коді у явний спосіб.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_valueOf">Застосування <code>valueOf</code></h3>
+
+<pre class="brush: js">var x = new Boolean(false);
+var y = x.valueOf();  // x — об'єкт, а y — просте значення
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Примітка</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкова виознака. Запроваджено у JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.6.4.3', 'Boolean.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div>
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Boolean.valueOf")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.valueOf()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/@@toprimitive/index.html b/files/uk/web/javascript/reference/global_objects/date/@@toprimitive/index.html
new file mode 100644
index 0000000000..3bb645c604
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/@@toprimitive/index.html
@@ -0,0 +1,73 @@
+---
+title: 'Date.prototype[@@toPrimitive]'
+slug: Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>[@@toPrimitive]()</strong></code> перетворює об'єкт <code>Date</code> на просте значення.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><var>Date()[Symbol.toPrimitive](hint);
+</var></pre>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Просте значення наданого об'єкта {{jsxref("Date")}}. В залежності від аргументу, метод може повернути або рядок, або число.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>[@@toPrimitive]()</code> об'єкта {{jsxref("Date")}} повертає просте значення, яке належить або до числового, або до рядкового типу.</p>
+
+<p>Якщо <code>hint</code> дорівнює <code>"string"</code> або <code>"default"</code>, <code>[@@toPrimitive]()</code> намагається викликати метод {{jsxref("Object.prototype.toString()", "toString")}}. Якщо властивість <code>toString</code> не існує, він намагається викликати метод {{jsxref("Object.prototype.valueOf()", "valueOf")}}, а якщо <code>valueOf</code> також не існує, <code>[@@toPrimitive]()</code> викидає помилку {{jsxref("TypeError")}}.</p>
+
+<p>Якщо <code>hint</code> дорівнює <code>"number"</code>, <code>[@@toPrimitive]()</code> спрочатку намагається викликати <code>valueOf</code>, а якщо не вдається, він викликає <code>toString</code>.</p>
+
+<p>JavaScript викликає метод <code>[@@toPrimitive]()</code> для перетворення об'єкта на просте значення. Вам рідко знадобиться викликати метод <code>[@@toPrimitive]()</code> власноруч; JavaScript автоматично викликає його, коли зустрічає об'єкт там, де очікується просте значення.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Повернення_простих_значень_дати">Повернення простих значень дати</h3>
+
+<pre class="brush: js notranslate">const testDate = new Date(1590757517834);
+// "Date Fri May 29 2020 14:05:17 GMT+0100 (British Summer Time)"
+
+testDate[Symbol.toPrimitive]('string');
+// Returns "Date Fri May 29 2020 14:05:17 GMT+0100 (British Summer Time)"
+
+testDate[Symbol.toPrimitive]('number');
+// Returns "1590757517834"
+
+testDate[Symbol.toPrimitive]('default');
+// Returns "Date Fri May 29 2020 14:05:17 GMT+0100 (British Summer Time)"</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype-@@toprimitive', 'Date.prototype.@@toPrimitive')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.@@toPrimitive")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.toPrimitive")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/date/index.html b/files/uk/web/javascript/reference/global_objects/date/date/index.html
new file mode 100644
index 0000000000..690a85f842
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/date/index.html
@@ -0,0 +1,135 @@
+---
+title: Конструктор Date()
+slug: Web/JavaScript/Reference/Global_Objects/Date/Date
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - Конструктор
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/Date
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Створює екземпляр об'єкта JavaScript <strong><code>Date</code></strong>, який відображає єдиний момент часу у незалежному від платформи форматі. </span>Об'єкти <code>Date</code> містять число, яке відображає кількість мілісекунд від 1 січня 1970 року (UTC).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-constructor.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">new Date()
+new Date(<var>value</var>)
+new Date(<var>dateString</var>)
+new Date(<var>year</var>, <var>monthIndex</var> [, <var>day</var> [, <var>hours</var> [, <var>minutes</var> [, <var>seconds</var> [, <var>milliseconds</var>]]]]])
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Заувага:</strong> Єдиним правильним способом створити новий екземпляр об'єкта <code>Date</code> є використання оператора {{jsxref("new")}}. Якщо ви просто викличете безпосередньо об'єкт <code>Date</code>, наприклад, так <code>now = Date()</code>, то повернеться рядок, а не об'єкт <code>Date</code>.</p>
+</div>
+
+<h3 id="Параметри">Параметри</h3>
+
+<p>Існують чотири основні форми конструктора <code>Date()</code>:</p>
+
+<ol>
+ <li>
+  <h4 id="Без_параметрів">Без параметрів</h4>
+
+  <p>Коли не надано жодних параметрів, новостворений об'єкт <code>Date</code> відображає поточну дату та час на момент його створення.</p>
+ </li>
+ <li>
+  <h4 id="Значення_часу_або_часова_мітка">Значення часу або часова мітка</h4>
+
+  <dl>
+   <dt><code><var>value</var></code></dt>
+   <dd>Ціле число, що відображає кількість мілісекунд від 1 січня 1970 року, 00:00:00 UTC (час ECMAScript, еквівалент часу UNIX), при цьому високосні секунди ігноруються. Пам'ятайте, що більшість функцій <a href="http://pubs.opengroup.org/onlinepubs/9699919799/basedefs/V1_chap04.html#tag_04_16">часової мітки UNIX</a> мають точність лише до найближчої секунди.</dd>
+  </dl>
+ </li>
+ <li>
+  <h4 id="Рядок_з_часовою_міткою">Рядок з часовою міткою</h4>
+
+  <dl>
+   <dt><code><var>dateString</var></code></dt>
+   <dd>Рядкове значення дати, надане у форматі, що розпізнається методом {{jsxref("Date.parse()")}}. (Ці формати є <a href="http://tools.ietf.org/html/rfc2822#page-14">часовими мітками стандарту RFC 2822, що відповідають IEНF</a>, а також рядками у <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15">варіації формату ISO8601</a>.)
+   <div class="note">
+   <p><strong>Заувага:</strong> Розбір рядків дати за допомогою конструктора <code>Date</code> (та методу <code>Date.parse()</code>, який працює так само) <em>наполегливо не рекомендується</em> через відмінності та невідповідності між переглядачами.</p>
+
+   <ul>
+    <li>Підтримка формату рядків <a href="https://tools.ietf.org/html/rfc2822">RFC 2822</a> є лише домовленістю.</li>
+    <li>Підтримка форматів ISO 8601 відрізняється в тому, що рядки, які містять лише дату (наприклад, <code>"1970-01-01"</code>), сприймаються як UTC, а не як локальний формат.</li>
+   </ul>
+   </div>
+   </dd>
+  </dl>
+ </li>
+ <li>
+  <h4 id="Значення_окремих_компонентів_дати_та_часу">Значення окремих компонентів дати та часу</h4>
+
+  <p>Маючи принаймні рік та місяць, ця форма <code>Date()</code> вертає об'єкт <code>Date</code>, чиї значення компонентів (рік, місяць, день, години, хвилини, секунди та мілісекунди) усі взяті з наступних параметрів. Будь-яким відсутнім полям надається найменше можливе значення (<code>1</code> для дня (<code><var>day</var></code><var>)</var> та <code>0</code> для усіх інших компонентів).</p>
+
+  <dl>
+   <dt><code><var>year</var></code></dt>
+   <dd>
+   <p>Ціле число, що відображає рік.</p>
+
+   <p>Значення з <code>0</code> по <code>99</code> відповідають рокам з <code>1900</code> по <code>1999</code>. Усі інші значення дорівнюють вказаному року.</p>
+   </dd>
+   <dt><code><var>monthIndex</var></code></dt>
+   <dd>Ціле число, що відображає місяць, починаючи з <code>0</code> для січня, по <code>11</code> для грудня.</dd>
+   <dt><code><var>day</var></code> {{optional_inline}}</dt>
+   <dd>Ціле число, що відображає день місяця. За замовчуванням <code>1</code>.</dd>
+   <dt><code><var>hours</var></code> {{optional_inline}}</dt>
+   <dd>Ціле число, що відображає значення години. За замовчуванням <code>0</code> (північ).</dd>
+   <dt><code><var>minutes</var></code> {{optional_inline}}</dt>
+   <dd>Ціле число, що відображає значення хвилин. За замовчуванням <code>0</code> хвилин з початку години.</dd>
+   <dt><code><var>seconds</var></code> {{optional_inline}}</dt>
+   <dd>Ціле число, що відображає значення секунд. За замовчуванням <code>0</code> секунд з початку хвилини.</dd>
+   <dt><code><var>milliseconds</var></code> {{optional_inline}}</dt>
+   <dd>Ціле число, що відображає значення мілісекунд. За замовчуванням <code>0</code> мілісекунд з початку секунди.</dd>
+  </dl>
+ </li>
+</ol>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Кілька_способів_створити_обєкт_Date">Кілька способів створити об'єкт Date</h3>
+
+<p>Наступні приклади демонструють кілька способів створити дати JavaScript:</p>
+
+<div class="note">
+<p><strong>Заувага:</strong> Розбір рядків дати за допомогою конструктора <code>Date</code> (а також методу <code>Date.parse</code>, вони еквівалентні) наполегливо не рекомендується через відмінності та невідповідності між переглядачами.</p>
+</div>
+
+<pre class="brush: js notranslate">let today = new Date()
+let birthday = new Date('December 17, 1995 03:24:00')
+let birthday = new Date('1995-12-17T03:24:00')
+let birthday = new Date(1995, 11, 17)            // нумерація місяців починається з 0
+let birthday = new Date(1995, 11, 17, 3, 24, 0)</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date-constructor', 'Date')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.Date")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/getdate/index.html b/files/uk/web/javascript/reference/global_objects/date/getdate/index.html
new file mode 100644
index 0000000000..431044f4df
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/getdate/index.html
@@ -0,0 +1,64 @@
+---
+title: Date.prototype.getDate()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getDate
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDate
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>getDate()</code></strong> повертає день місяця для вказаної дати згідно з місцевим часом.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getdate.html","shorter")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getDate()</code></pre>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Ціле число між 1 та 31, що відображає день місяця для наданої дати згідно з місцевим часом.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_getDate">Використання getDate()</h3>
+
+<p>Друга інструкція, наведена нижче, присвоює значення 25 змінній <code>day</code> на основі значення об'єкта {{jsxref("Date")}} на ім'я <code>Xmas95</code>.</p>
+
+<pre class="brush: js notranslate">var Xmas95 = new Date('December 25, 1995 23:15:30');
+var day = Xmas95.getDate();
+
+console.log(day); // 25
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getDate")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCDay()")}}</li>
+ <li>{{jsxref("Date.prototype.setDate()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/getday/index.html b/files/uk/web/javascript/reference/global_objects/date/getday/index.html
new file mode 100644
index 0000000000..9c4a6fe852
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/getday/index.html
@@ -0,0 +1,77 @@
+---
+title: Date.prototype.getDay()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getDay
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDay
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Метод <strong><code>getDay()</code></strong> повертає день тижня для вказаної дати згідно з місцевим часом, де 0 означає неділю.</span> Щоб отримати день місяця, дивіться {{jsxref("Date.prototype.getDate()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getday.html", "shorter")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getDay()</code></pre>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Ціле число між 0 та 6, що відповідає дню тижня для наданої дати згідно з місцевим часом: 0 - неділя, 1 - понеділок, 2 - вівторок і т.д.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_getDay">Використання <code>getDay()</code></h3>
+
+<p>Друга інструкція, наведена нижче, присвоює значення 1 змінній <code>weekday</code> на основі значення об'єкта {{jsxref("Date")}} на ім'я <code>Xmas95</code>. 25 грудня 1995 року - це понеділок.</p>
+
+<pre class="brush: js notranslate">var Xmas95 = new Date('December 25, 1995 23:15:30');
+var weekday = Xmas95.getDay();
+
+console.log(weekday); // 1
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Заувага:</strong> За необхідності можна отримати повну назву дня (наприклад, <code>"понеділок"</code>) за допомогою методу {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} з параметром <code>options</code>. З цим методом інтернаціоналізація стає простішою:</p>
+
+<pre class="brush: js notranslate">var options = { weekday: 'long'};
+console.log(new Intl.DateTimeFormat('en-US', options).format(Xmas95));
+// Monday
+console.log(new Intl.DateTimeFormat('uk', options).format(Xmas95));
+// понеділок
+</pre>
+</div>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getday', 'Date.prototype.getDay')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Date.getDay")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCDay()")}}</li>
+ <li>{{jsxref("Date.prototype.setDate()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/getfullyear/index.html b/files/uk/web/javascript/reference/global_objects/date/getfullyear/index.html
new file mode 100644
index 0000000000..cc94ae8146
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/getfullyear/index.html
@@ -0,0 +1,68 @@
+---
+title: Date.prototype.getFullYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getFullYear
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getFullYear
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>getFullYear()</code></strong> повертає рік вказаної дати згідно з місцевим часом.</p>
+
+<p>Використовуйте цей метод замість методу {{jsxref("Date.prototype.getYear()", "getYear()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getfullyear.html","shorter")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getFullYear()</code></pre>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Число, що відповідає року наданої дати згідно з місцевим часом.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Значення, яке повертає <code>getFullYear()</code>, є абсолютним числом. Для дат між роками 1000 та 9999 <code>getFullYear()</code> повертає чотиризначне число, наприклад, 1995. Використовуйте цю функцію, щоб бути певними, що рік узгоджується з роками після 2000.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_getFullYear">Використання <code>getFullYear()</code></h3>
+
+<p>Наступний приклад присвоює чотиризначне значення поточного року змінній <code>year</code>.</p>
+
+<pre class="brush: js notranslate">var today = new Date();
+var year = today.getFullYear();
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getFullYear")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.getYear()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/gethours/index.html b/files/uk/web/javascript/reference/global_objects/date/gethours/index.html
new file mode 100644
index 0000000000..090762146c
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/gethours/index.html
@@ -0,0 +1,65 @@
+---
+title: Date.prototype.getHours()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getHours
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getHours
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>getHours()</code></strong> повертає годину вказаної дати згідно з місцевим часом.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-gethours.html","shorter")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><var>dateObj</var>.getHours()</pre>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Ціле число між 0 та 23, яке відображає годину наданої дати згідно з місцевим часом.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_getHours">Використання <code>getHours()</code></h3>
+
+<p>Друга інструкція, наведена нижче, присвоює значення 23 змінній <code>hours</code> на основі значення об'єкта {{jsxref("Global_Objects/Date", "Date")}} на ім'я <code>Xmas95</code>.</p>
+
+<pre class="brush: js notranslate">let Xmas95 = new Date('December 25, 1995 23:15:30');
+let hours = Xmas95.getHours();
+
+console.log(hours); // 23
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getHours")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCHours()")}}</li>
+ <li>{{jsxref("Date.prototype.setHours()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/getmilliseconds/index.html b/files/uk/web/javascript/reference/global_objects/date/getmilliseconds/index.html
new file mode 100644
index 0000000000..bef2c69b6d
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/getmilliseconds/index.html
@@ -0,0 +1,61 @@
+---
+title: Date.prototype.getMilliseconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>getMilliseconds()</code></strong> повертає мілісекунди у вказаній даті згідно з місцевим часом.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getmilliseconds.html","shorter")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getMilliseconds()</code></pre>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Число між 0 та 999, що відображає мілісекунди для наданої дати згідно з місцевим часом.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_getMilliseconds">Використання <code>getMilliseconds()</code></h3>
+
+<p>Наступний приклад присвоює значення мілісекунд поточного часу змінній <code>milliseconds</code>:</p>
+
+<pre class="brush: js notranslate">var today = new Date();
+var milliseconds = today.getMilliseconds();
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getMilliseconds")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setMilliseconds()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/getminutes/index.html b/files/uk/web/javascript/reference/global_objects/date/getminutes/index.html
new file mode 100644
index 0000000000..7cd9470003
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/getminutes/index.html
@@ -0,0 +1,61 @@
+---
+title: Date.prototype.getMinutes()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getMinutes
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMinutes
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>getMinutes()</code></strong> повертає хвилини у вказаній даті згідно з місцевим часом.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getminutes.html","shorter")}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getMinutes()</code></pre>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Ціле число між 0 та 59, що відображає хвилини у наданій даті згідно з місцевим часом.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_getMinutes">Використання <code>getMinutes()</code></h3>
+
+<p>Друга інструкція, наведена нижче, присвоює 15 змінній <code>minutes</code> на основі значення об'єкта {{jsxref("Global_Objects/Date", "Date")}} на ім'я <code>Xmas95</code>.</p>
+
+<pre class="brush: js notranslate">var Xmas95 = new Date('December 25, 1995 23:15:30');
+var minutes = Xmas95.getMinutes();
+
+console.log(minutes); // 15
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getMinutes")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMinutes()")}}</li>
+ <li>{{jsxref("Date.prototype.setMinutes()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/getmonth/index.html b/files/uk/web/javascript/reference/global_objects/date/getmonth/index.html
new file mode 100644
index 0000000000..1e1b620d75
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/getmonth/index.html
@@ -0,0 +1,74 @@
+---
+title: Date.prototype.getMonth()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getMonth
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMonth
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>getMonth()</code></strong> повертає місяць у вказаній даті згідно з місцевим часом, як значення на основі нуля (де нуль позначає перший місяць року).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getmonth.html","shorter")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getMonth()</code></pre>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Ціле число між 0 та 11, що відображає місяць у наданій даті згідно з місцевим часом. 0 відповідає січню, 1 лютому, і так далі.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_getMonth">Використання <code>getMonth()</code></h3>
+
+<p>Друга інструкція, наведена нижче, присвоює значення 11 змінній <code>month</code>, на основі значення об'єкта {{jsxref("Date")}} на ім'я <code>Xmas95</code>.</p>
+
+<pre class="brush: js notranslate">var Xmas95 = new Date('December 25, 1995 23:15:30');
+var month = Xmas95.getMonth();
+
+console.log(month); // 11
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Заувага:</strong> За необхідності можна отримати повну назву місяця (наприклад, <code>"січень"</code>) за допомогою методу <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat#Using_options">Intl.DateTimeFormat()</a></code> з параметром <code>options</code>. З цим методом інтернаціоналізація стає простішою:</p>
+
+<pre class="brush: js notranslate">var options = { month: 'long'};
+console.log(new Intl.DateTimeFormat('en-US', options).format(Xmas95));
+// December
+console.log(new Intl.DateTimeFormat('uk', options).format(Xmas95));
+// грудень
+</pre>
+</div>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getMonth")}}</p>
+
+<h2 id="See_also" name="See_also">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMonth()")}}</li>
+ <li>{{jsxref("Date.prototype.setMonth()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/getseconds/index.html b/files/uk/web/javascript/reference/global_objects/date/getseconds/index.html
new file mode 100644
index 0000000000..b96c2f068d
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/getseconds/index.html
@@ -0,0 +1,63 @@
+---
+title: Date.prototype.getSeconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getSeconds
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getSeconds
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>getSeconds()</code></strong> повертає секунди у вказаній даті згідно з місцевим часом.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getseconds.html", "shorter")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getSeconds()</code></pre>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Ціле число між 0 та 59, що відображає секунди у наданій даті згідно з місцевим часом.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_getSeconds">Використання <code>getSeconds()</code></h3>
+
+<p>Друга інструкція, наведена нижче, присвоює значення 30 змінній <code>seconds</code>, на основі значення об'єкта {{jsxref("Global_Objects/Date", "Date")}} на ім'я <code>Xmas95</code>.</p>
+
+<pre class="brush: js notranslate">var Xmas95 = new Date('December 25, 1995 23:15:30');
+var seconds = Xmas95.getSeconds();
+
+console.log(seconds); // 30
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getSeconds")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCSeconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setSeconds()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/gettime/index.html b/files/uk/web/javascript/reference/global_objects/date/gettime/index.html
new file mode 100644
index 0000000000..58fce8fef3
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/gettime/index.html
@@ -0,0 +1,109 @@
+---
+title: Date.prototype.getTime()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getTime
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTime
+---
+<div> {{JSRef}}</div>
+
+<p>Метод <strong><code>getTime()</code></strong> повертає кількість мілісекунд* з початку <a href="https://uk.wikipedia.org/wiki/%D0%A7%D0%B0%D1%81_Unix">часу Unix</a>.</p>
+
+<p>* JavaScript використовує <em>мілісекунди</em> як одиницю вимірювання, тоді як час Unix вимірюється у <em>секундах</em>.</p>
+
+<p><em>getTime() завжди використовує UTC для подання часу. Наприклад, у клієнтському оглядачі в одному часовому поясі getTime() буде таким самим, як і в оглядачі у будь-якому іншому часовому поясі.</em></p>
+
+<div>Ви можете скористатись цим методом, щоб допомогти присвоїти дату та час іншому об'єкту {{jsxref("Date")}}. Цей метод функціонально еквівалентний методу {{jsxref("Date.valueof", "valueOf()")}}.</div>
+
+<div></div>
+
+<div>{{EmbedInteractiveExample("pages/js/date-gettime.html","shorter")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getTime()</code></pre>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Число, що відображає кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та наданою датою.</p>
+
+<h2 id="Зменшена_точність_часу">Зменшена точність часу</h2>
+
+<p>Для захисту від атак за часом чи за цифровими відбитками точність <code>new Date().getTime()</code> може бути округлена, в залежності від налаштувань переглядача. У Firefox параметр <code>privacy.reduceTimerPrecision</code> за замовчуванням увімкнений та дорівнює 20 мс у Firefox 59; у 60 він дорівнює 2 мс.</p>
+
+<pre class="brush: js notranslate">// зменшена точність часу (2 мс) у Firefox 60
+new Date().getTime();
+// 1519211809934
+// 1519211810362
+// 1519211811670
+// ...
+
+
+// зменшена точність часу з увімкненим параметром `privacy.resistFingerprinting`
+new Date().getTime();
+// 1519129853500
+// 1519129858900
+// 1519129864400
+// ...
+</pre>
+
+<p>У Firefox ви також можете увімкнути <code>privacy.resistFingerprinting</code>, точність дорівнюватиме або 100 мс, або значенню <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code>, в залежності від того, що більше.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_getTime_для_копіювання_дати">Використання <code>getTime()</code> для копіювання дати</h3>
+
+<p>Створення об'єкта дати з ідентичним значенням часу.</p>
+
+<pre class="brush: js notranslate">// Оскільки місяці нумеруються з нуля, birthday дорівнює 10 січня 1995
+var birthday = new Date(1994, 12, 10);
+var copy = new Date();
+copy.setTime(birthday.getTime());
+</pre>
+
+<h3 id="Вимірюємо_час_виконання">Вимірюємо час виконання</h3>
+
+<p>Віднімання між двома викликами <code>getTime()</code> на новозгенерованих об'єктах {{jsxref("Date")}} дасть проміжок часу між цими двома викликами. Це можна використати, щоб обчислити час виконання деяких операцій. Дивіться також {{jsxref("Date.now()")}}, щоб запобігти створенню непотрібних екземплярів {{jsxref("Date")}}.</p>
+
+<pre class="brush: js notranslate">var end, start;
+
+start = new Date();
+for (var i = 0; i &lt; 1000; i++) {
+  Math.sqrt(i);
+}
+end = new Date();
+
+console.log('Операція зайняла ' + (end.getTime() - start.getTime()) + ' мсек');
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getTime")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.setTime()")}}</li>
+ <li>{{jsxref("Date.prototype.valueOf()")}}</li>
+ <li>{{jsxref("Date.now()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html b/files/uk/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html
new file mode 100644
index 0000000000..35360a9a7e
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html
@@ -0,0 +1,97 @@
+---
+title: Date.prototype.getTimezoneOffset()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>getTimezoneOffset()</code></strong> повертає різніцю, у хвилинах, між поточним місцевим часовим поясом (налаштування системи хоста) та UTC.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-gettimezoneoffset.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><var>dateObj</var>.getTimezoneOffset()</pre>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Число, що відображає зсув часового поясу, в хвилинах, від дати, що базується на поточних налаштуваннях системи, до UTC.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Зсув часового поясу - це різниця, у хвилинах, між місцевим часом та UTC (<em>Coordinated Universal Time</em>, Всесвітній координований час).</p>
+
+<p>Зауважте, це означає, що зсув є додатнім, якщо локальний часовий пояс розташований за UTC, та від'ємним, якщо він розташований попереду. Наприклад, для часового поясу UTC+10:00 (Австралійський східний стандартний час, Час Чаморро), результатом буде <code>-600</code>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Локальний часовий пояс</th>
+   <th scope="col">UTC-8</th>
+   <th scope="col">UTC</th>
+   <th scope="col">UTC+3</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Значення, що повертається</th>
+   <td>480</td>
+   <td>0</td>
+   <td>-180</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Зсув часового поясу, який повертається, стосується об'єкта Date, на якому викликається метод.</p>
+
+<p>Якщо в системі налаштований перехід на літній час, зсув буде змінюватись, в залежності від дати та часу, які містить об'єкт Date, та дати та часу, на які впливає перехід на літній час.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_getTimezoneOffset">Використання <code>getTimezoneOffset()</code></h3>
+
+<pre class="brush: js notranslate">// Отримати зсув поточного часового поясу для хостового пристрою
+let x = new Date();
+let currentTimeZoneOffsetInHours = x.getTimezoneOffset() / 60;
+// -3
+
+// Отримати зсув часового поясу для Міжнародного дня праці (1 травня) у 2016 р.
+// Будьте обережні, конструктор Date() рахує місяці з 0, тому травень
+// передається числом 4 (а не 5)
+let labourDay = new Date(2016, 4, 1)
+let labourDayOffset = labourDay.getTimezoneOffset() / 60;
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getTimezoneOffset")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/getutcdate/index.html b/files/uk/web/javascript/reference/global_objects/date/getutcdate/index.html
new file mode 100644
index 0000000000..61ef05a778
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/getutcdate/index.html
@@ -0,0 +1,60 @@
+---
+title: Date.prototype.getUTCDate()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCDate
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDate
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>getUTCDate()</code></strong> повертає день місяця у вказаній даті згідно з всесвітнім часом.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getutcdate.html")}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getUTCDate()</code></pre>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Ціле число між 1 та 31, що відображає день місяця у наданій даті згідно з всесвітнім часом.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_getUTCDate">Використання <code>getUTCDate()</code></h3>
+
+<p>Наступний приклад присвоює значення дня поточної дати змінній <code>day</code>.</p>
+
+<pre class="brush: js notranslate">var today = new Date();
+var day = today.getUTCDate();
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getUTCDate")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getDate()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCDay()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCDate()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/getutcday/index.html b/files/uk/web/javascript/reference/global_objects/date/getutcday/index.html
new file mode 100644
index 0000000000..61081ed52f
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/getutcday/index.html
@@ -0,0 +1,62 @@
+---
+title: Date.prototype.getUTCDay()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCDay
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDay
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>getUTCDay()</code></strong> повертає день тижня у вказаній даті згідно з всесвітнім часом, де 0 означає неділю.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getutcday.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getUTCDay()</code></pre>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Ціле число, що відповідає дню тижня для наданої дати, згідно з всесвітнім часом: 0 - неділя, 1 - понеділок, 2 - вівторок, і так далі.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_getUTCDay">Використання <code>getUTCDay()</code></h3>
+
+<p>Наступний приклад присвоює день тижня поточної дати змінній <code>weekday</code>.</p>
+
+<pre class="brush: js notranslate">var today = new Date();
+var weekday = today.getUTCDay();
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcday', 'Date.prototype.getUTCDay')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getUTCDay")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.getDay()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCDate()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/getutcfullyear/index.html b/files/uk/web/javascript/reference/global_objects/date/getutcfullyear/index.html
new file mode 100644
index 0000000000..04416642dc
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/getutcfullyear/index.html
@@ -0,0 +1,65 @@
+---
+title: Date.prototype.getUTCFullYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>getUTCFullYear()</code></strong> повертає рік у вказаній даті згідно з всесвітнім часом.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getutcfullyear.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getUTCFullYear()</code></pre>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Число, що відображає рік у вказаній даті згідно з всесвітнім часом.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Значення, яке повертає <code>getUTCFullYear()</code>, є абсолютним числом, сумісним з 2000-м роком, наприклад, 1995.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_getUTCFullYear">Використання <code>getUTCFullYear()</code></h3>
+
+<p>Наступний приклад присвоює чотиризначне значення поточного року змінній <code>year</code>.</p>
+
+<pre class="brush: js notranslate">var today = new Date();
+var year = today.getUTCFullYear();
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getUTCFullYear")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setFullYear()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/getutchours/index.html b/files/uk/web/javascript/reference/global_objects/date/getutchours/index.html
new file mode 100644
index 0000000000..a784f057a3
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/getutchours/index.html
@@ -0,0 +1,61 @@
+---
+title: Date.prototype.getUTCHours()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCHours
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCHours
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>getUTCHours()</code></strong> повертає години вказаної дати згідно з всесвітнім часом.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getutchours.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getUTCHours()</code></pre>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Ціле число між 0 та 23, що відображає години у вказаній даті згідно з всесвітнім часом.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_getUTCHours">Використання <code>getUTCHours()</code></h3>
+
+<p>Наступний приклад присвоює значення години поточного часу змінній <code>hours</code>.</p>
+
+<pre class="brush: js notranslate">var today = new Date();
+var hours = today.getUTCHours();
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getUTCHours")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getHours()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCHours()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html b/files/uk/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html
new file mode 100644
index 0000000000..cc3cd766f8
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html
@@ -0,0 +1,63 @@
+---
+title: Date.prototype.getUTCMilliseconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Дата
+  - Довідка
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>getUTCMilliseconds()</code></strong> повертає значення мілісекунд у об'єкті часу.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/date-getutcmilliseconds.html","shorter")}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getUTCMilliseconds()</code></pre>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>Ціле число між 0 та 999, що позначає мілісекунди у наданому об'єкті дати. Цей метод є колегою інших методів на основі UTC, що повертають значення годин, хвилин, і т. д.; цей метод повертає значення мілісекунд.</p>
+
+<p>Не слід плутати його з часом Unix. Щоб отримати повну кількість мілісекунд від 1970/01/01, скористайтесь методом ".getTime()".</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_getUTCMilliseconds">Використання <code>getUTCMilliseconds()</code></h3>
+
+<p>Наведений приклад присвоює значення мілісекунд поточного часу змінній <code>milliseconds</code>:</p>
+
+<pre class="brush: js notranslate">var today = new Date();
+var milliseconds = today.getUTCMilliseconds();
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcmilliseconds', 'Date.prototype.getUTCMilliseconds')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Date.getUTCMilliseconds")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/getutcminutes/index.html b/files/uk/web/javascript/reference/global_objects/date/getutcminutes/index.html
new file mode 100644
index 0000000000..5fb37f435c
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/getutcminutes/index.html
@@ -0,0 +1,59 @@
+---
+title: Date.prototype.getUTCMinutes()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>getUTCMinutes()</code></strong> повертає хвилини у вказаній даті згідно з всесвітнім часом.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getutcminutes.html")}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getUTCMinutes()</code></pre>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Ціле число між 0 та 59, що відображає хвилини у наданій даті згідно з всесвітнім часом.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_getUTCMinutes">Використання <code>getUTCMinutes()</code></h3>
+
+<p>Наступний приклад присвоює значення хвилин поточного часу змінній <code>minutes</code>.</p>
+
+<pre class="brush: js notranslate">var today = new Date();
+var minutes = today.getUTCMinutes();
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcminutes', 'Date.prototype.getUTCMinutes')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getUTCMinutes")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getMinutes()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMinutes()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/getutcmonth/index.html b/files/uk/web/javascript/reference/global_objects/date/getutcmonth/index.html
new file mode 100644
index 0000000000..3775a65caa
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/getutcmonth/index.html
@@ -0,0 +1,61 @@
+---
+title: Date.prototype.getUTCMonth()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>getUTCMonth()</code></strong> повертає місяць вказаної дати згідно з всесвітнім часом, як значення на основі нуля (де нуль позначає перший місяць року).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getutcmonth.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getUTCMonth()</code></pre>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Ціле число між 0 та 11, що відповідає місяцю у наданій даті згідно з всесвітнім часом. 0 - січень, 1 - лютий, 2 - березень, і так далі.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_getUTCMonth">Використання <code>getUTCMonth()</code></h3>
+
+<p>Наступний приклад присвоює значення місяця поточної дати змінній <code>month</code>.</p>
+
+<pre class="brush: js notranslate">var today = new Date();
+var month = today.getUTCMonth();
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getUTCMonth")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getMonth()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMonth()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/getutcseconds/index.html b/files/uk/web/javascript/reference/global_objects/date/getutcseconds/index.html
new file mode 100644
index 0000000000..04f184043f
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/getutcseconds/index.html
@@ -0,0 +1,61 @@
+---
+title: Date.prototype.getUTCSeconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Дата
+  - Довідка
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>getUTCSeconds()</code></strong> повертає секунди на зазначену дату відповідно до всесвітнього часу.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/date-getutcseconds.html", "shorter")}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getUTCSeconds()</code></pre>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>Ціле число, між 0 та 59, яке позначає секунди на зазначену дату відповідно до всесвітнього часу.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_getUTCSeconds">Використання <code>getUTCSeconds()</code></h3>
+
+<p>Наведений код призначає секундну частину поточної дати змінній <code>seconds</code>:</p>
+
+<pre class="brush: js notranslate">var today = new Date();
+var seconds = today.getUTCSeconds();
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Date.getUTCSeconds")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getSeconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCSeconds()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/getyear/index.html b/files/uk/web/javascript/reference/global_objects/date/getyear/index.html
new file mode 100644
index 0000000000..a358ac4c2b
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/getyear/index.html
@@ -0,0 +1,107 @@
+---
+title: Date.prototype.getYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getYear
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - застарілий
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getYear
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p>Метод <strong><code>getYear()</code></strong> повертає рік у вказаній даті згідно з місцевим часом. Оскільки <code>getYear()</code> не повертає повне значення року ("проблема 2000 року"), він більше не використовується та був замінений на метод {{jsxref("Date.prototype.getFullYear", "getFullYear()")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getYear()</code></pre>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Число, що відображає рік у наданій даті, згідно з місцевим часом, мінус 1900.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<ul>
+ <li> Для років, що більші або дорівнюють 2000, значення, яке повертає <code>getYear()</code>, дорівнює 100 або більше. Наприклад, якщо рік дорівнює 2026, <code>getYear()</code> поверне 126.</li>
+ <li>Для років між 1900 та 1999 включно, значення, яке повертає <code>getYear()</code>, знаходиться між 0 та 99. Наприклад, якщо рік дорівнює 1976, <code>getYear()</code> поверне 76.</li>
+ <li>Для років, менших за 1900, значення, яке повертає <code>getYear()</code>, менше за 0. Наприклад, якщо рік дорівнює 1800, <code>getYear()</code> поверне -100.</li>
+</ul>
+
+<p>Для врахування років до та після 2000, слід використовувати {{jsxref("Date.prototype.getFullYear", "getFullYear()")}} замість <code>getYear()</code>, щоб вказувалось повне значення року.</p>
+
+<h2 id="Зворотна_сумісність">Зворотна сумісність</h2>
+
+<h3 id="Поведінка_у_JavaScript_1.2_та_старших_версіях">Поведінка у JavaScript 1.2 та старших версіях</h3>
+
+<p>Метод <code>getYear()</code> повертає або 2-значне, або 4-значне значення року:</p>
+
+<ul>
+ <li>Для років між 1900 та 1999 включно, значення, яке повертає <code>getYear()</code> - це значення року мінус 1900. Для прикладу, якщо рік дорівнює 1976, повертається значення 76.</li>
+ <li>Для років, менших за 1900 чи більших за 1999, значення, яке повертає <code>getYear()</code>, є чотиризначним значенням року. Для прикладу, якщо рік дорівнює 1856, повертається значення 1856. Якщо рік дорівнює 2026, повертається 2026.</li>
+</ul>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Роки_між_1900_та_1999">Роки між 1900 та 1999</h3>
+
+<p>Друга інструкція присвоює значення 95 змінній <code>year</code>.</p>
+
+<pre class="brush: js notranslate">var Xmas = new Date('December 25, 1995 23:15:00');
+var year = Xmas.getYear(); // повертає 95
+</pre>
+
+<h3 id="Роки_більші_за_1999">Роки, більші за 1999</h3>
+
+<p>Друга інструкція присвоює значення 100 змінній <code>year</code>.</p>
+
+<pre class="brush: js notranslate">var Xmas = new Date('December 25, 2000 23:15:00');
+var year = Xmas.getYear(); // повертає 100
+</pre>
+
+<h3 id="Роки_менші_за_1900">Роки, менші за 1900</h3>
+
+<p>Друга інструкція присвоює значення -100 змінній <code>year</code>.</p>
+
+<pre class="brush: js notranslate">var Xmas = new Date('December 25, 1800 23:15:00');
+var year = Xmas.getYear(); // повертає -100
+</pre>
+
+<h3 id="Присвоєння_та_отримання_років_між_1900_та_1999">Присвоєння та отримання років між 1900 та 1999</h3>
+
+<p>Третя інструкція присвоює значення 95 змінній <code>year</code>, що означає рік 1995.</p>
+
+<pre class="brush: js notranslate">var Xmas = new Date('December 25, 2015 23:15:00');
+Xmas.setYear(95);
+var year = Xmas.getYear(); // повертає 95
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getyear', 'Date.prototype.getYear')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Date.getYear")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setYear()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/index.html b/files/uk/web/javascript/reference/global_objects/date/index.html
new file mode 100644
index 0000000000..61c26eb1d8
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/index.html
@@ -0,0 +1,269 @@
+---
+title: Date
+slug: Web/JavaScript/Reference/Global_Objects/Date
+tags:
+  - Date
+  - JavaScript
+  - Time
+  - Дата
+  - Час Unix
+translation_of: Web/JavaScript/Reference/Global_Objects/Date
+---
+<div>{{JSRef}}</div>
+
+<div>Об'єкт JavaScript <strong><code>Date</code></strong> відображає єдиний момент у часі у  незалежному від платформи форматі. Об'єкти <code>Date</code> містять число, яке відображає кількість мілісекунд від 1 січня 1970 року за UTC.</div>
+
+<div></div>
+
+<div class="blockIndicator note">
+<p>TC39 працює над об'єктом <a href="https://tc39.es/proposal-temporal/docs/index.html">Temporal</a>, новим API для дати та часу.<br>
+ Читайте більше щодо нього у <a href="https://blogs.igalia.com/compilers/2020/06/23/dates-and-times-in-javascript/">блозі Igalia</a> та заповнюйте <a href="https://forms.gle/iL9iZg7Y9LvH41Nv8">опитування</a>. Він потребує відгуків реальних веб-розробників, але поки що не готовий для повноцінного використання!</p>
+</div>
+
+<h2 id="Опис">Опис</h2>
+
+<h3 id="Час_ECMAScript_та_часові_мітки">Час ECMAScript та часові мітки</h3>
+
+<p>Дата JavaScript вказується як кількість мілісекунд, що пройшли від 1 січня 1970 року за UTC. Ця дата та час не є тим самим, що й <strong>час UNIX</strong> (кількість <em>секунд</em>, що пройшли від опівночі 1 січня 1790 року за UTC), який є базовим значенням для дати та часу, що записуються комп'ютером.</p>
+
+<p><strong>Заувага:</strong> Важливо пам'ятати, що, тоді як значення часу в серці об'єкта Date є значенням UTC, базові методи з отримання дати та часу, або їхніх елементів, усі працюють у локальному (тобто, системному) часовому поясі та зсуві.</p>
+
+<p>Варто зауважити, що максимальне значення <code>Date</code> не співпадає з максимальним безпечним цілим числом (<code>Number.MAX_SAFE_INTEGER</code> дорівнює 9,007,199,254,740,991). Натомість, ECMA-262 визначає, що максимум ±100,000,000 (сто мільйонів) днів відносно 1 січня 1970 року за UTC (тобто, 20 квітня 271821 до н.е. ~ 13 вересня 275760 н.е.) можуть бути представлені стандартним об'єктом <code>Date</code> (що дорівнює ±8,640,000,000,000,000 мілісекундам).</p>
+
+<h3 id="Формат_дати_та_перетворення_часових_поясів">Формат дати та перетворення часових поясів</h3>
+
+<p>Існує велика кількість методів для отримання дати у різних форматах, а також для виконання перетворень часових поясів. Особливо корисні функції, які виводять дату та час у всесвітньому координованому часі (Coordinated Universal Time, UTC), глобальному стандартному часі, визначеному Всесвітнім часовим стандартом (World Time Standard). (Цей час історично відомий як <em>середній час за Гринвічем</em>, бо UTC пролякає вздовж меридіану, що включає Лондон — та сусідній Гринвіч — у Великій Британії.) Пристрій користувача надає місцевий час.</p>
+
+<p>Над додачу до методів для читання та зміни окремих компонентів місцевої дати та часу (таких, як {{jsxref("Date.getDay", "getDay()")}} та {{jsxref("Date.setHours", "setHours()")}}), також існують версії тих самих методів, які читають та змінюють дату та час, використовуючи час UTC (такі, як {{jsxref("Date.getUTCDay()", "getUTCDay()")}} та {{jsxref("Date.setUTCHours", "setUTCHours()")}}).</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{jsxref("Date/Date", "Date()")}}</dt>
+ <dd>Створює новий об'єкт <code>Date</code>.</dd>
+</dl>
+
+<h2 id="Статичні_методи">Статичні методи</h2>
+
+<dl>
+ <dt>{{jsxref("Date.now()")}}</dt>
+ <dd>Вертає ціле число, що позначає поточний час — кількість мілісекунд від 1 січня 1970 року 00:00:00 за UTC без врахування високосних секунд.</dd>
+ <dt>{{jsxref("Date.parse()")}}</dt>
+ <dd>Розбирає рядкове представлення дати та повертає кількість мілісекунд між 00:00:00 за UTC 1 січня 1970 та зазначеною миттю у часі, ігноруючи високосні секунди.</dd>
+ <dd>
+ <div class="note">
+ <p><strong>Заувага:</strong> Розбір рядків з датою (часом) за допомогою метода <code>Date.parse</code> є рішуче небажаним через наявні розбіжності поміж переглядачами.</p>
+ </div>
+ </dd>
+ <dt>{{jsxref("Date.UTC()")}}</dt>
+ <dd>Приймає ті самі параметри, що й найдовша форма конструктора (тобто, від 2 до 7), та вертає кількість мілісекунд від 1 січня 1970 року 00:00:00 за UTC, ігноруючи високосні секунди.</dd>
+</dl>
+
+<h2 id="Методи_екземплярів">Методи екземплярів</h2>
+
+<dl>
+ <dt>{{jsxref("Date.prototype.getDate()")}}</dt>
+ <dd>Повертає день місяця (<code>1</code>–<code>31</code>) для вказаної дати згідно з місцевим часом.</dd>
+ <dt>{{jsxref("Date.prototype.getDay()")}}</dt>
+ <dd>Повертає день тижня (<code>0</code>–<code>6</code>) для вказаної дати згідно з місцевим часом.</dd>
+ <dt>{{jsxref("Date.prototype.getFullYear()")}}</dt>
+ <dd>Повертає рік (4 цифри для 4-значних років) вказаної дати згідно з місцевим часом.</dd>
+ <dt>{{jsxref("Date.prototype.getHours()")}}</dt>
+ <dd>Повертає годину (<code>0</code>–<code>23</code>) у вказаній даті згідно з місцевим часом.</dd>
+ <dt>{{jsxref("Date.prototype.getMilliseconds()")}}</dt>
+ <dd>Повертає мілісекунди (<code>0</code>–<code>999</code>) у вказаній даті згідно з місцевим часом.</dd>
+ <dt>{{jsxref("Date.prototype.getMinutes()")}}</dt>
+ <dd>Повертає хвилини (<code>0</code>–<code>59</code>) у вказаній даті згідно з місцевим часом.</dd>
+ <dt>{{jsxref("Date.prototype.getMonth()")}}</dt>
+ <dd>Повертає місяць (<code>0</code>–<code>11</code>) у вказаній даті згідно з місцевм часом.</dd>
+ <dt>{{jsxref("Date.prototype.getSeconds()")}}</dt>
+ <dd>Повертає секунди (<code>0</code>–<code>59</code>) у вказаній даті згідно з місцевим часом.</dd>
+ <dt>{{jsxref("Date.prototype.getTime()")}}</dt>
+ <dd>Повертає числове значення вказаної дати у вигляді кількості мілісекунд від 1 січня 1970 року 00:00:00 за UTC. (Для більш ранніх дат повертаються від'ємні значення.)</dd>
+ <dt>{{jsxref("Date.prototype.getTimezoneOffset()")}}</dt>
+ <dd>Повертає зсув часового поясу у хвилинах для місцевих налаштувань.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCDate()")}}</dt>
+ <dd>Повертає день місяця (<code>1</code>–<code>31</code>) у вказаній даті згідно зі всесвітнім часом.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCDay()")}}</dt>
+ <dd>Повертає день тижня (<code>0</code>–<code>6</code>) у вказаній даті згідно зі всесвітнім часом.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCFullYear()")}}</dt>
+ <dd>Повертає рік (4 цифри для 4-значних років) у вказаній даті згідно зі всесвітнім часом.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCHours()")}}</dt>
+ <dd>Повертає години (<code>0</code>–<code>23</code>) у вказаній даті згідно зі всесвітнім часом.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</dt>
+ <dd>Повертає мілісекунди (<code>0</code>–<code>999</code>) у вказаній даті згідно зі всесвітнім часом.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCMinutes()")}}</dt>
+ <dd>Повертає хвилини (<code>0</code>–<code>59</code>) у вказаній даті згідно зі всесвітнім часом.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCMonth()")}}</dt>
+ <dd>Повертає місяць (<code>0</code>–<code>11</code>) у вказаній даті згідно зі всесвітнім часом.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCSeconds()")}}</dt>
+ <dd>Повертає секунди (<code>0</code>–<code>59</code>) у вказаній даті згідно зі всесвітнім часом.</dd>
+ <dt>{{jsxref("Date.prototype.getYear()")}}</dt>
+ <dd>Повертає рік (зазвичай, 2–3 цифри) у вказаній даті згідно з місцевим часом. Використовуйте замість нього {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}.</dd>
+ <dt>{{jsxref("Date.prototype.setDate()")}}</dt>
+ <dd>Встановлює день місяця для вказаної дати згідно з місцевим часом.</dd>
+ <dt>{{jsxref("Date.prototype.setFullYear()")}}</dt>
+ <dd>Встановлює повне значення року (наприклад, 4 цифри для 4-значних років) для вказаної дати згідно з місцевим часом.</dd>
+ <dt>{{jsxref("Date.prototype.setHours()")}}</dt>
+ <dd>Встановлює години для вказаної дати згідно з місцевим часом.</dd>
+ <dt>{{jsxref("Date.prototype.setMilliseconds()")}}</dt>
+ <dd>Встановлює мілісекунди для вказаної дати згідно з місцевим часом.</dd>
+ <dt>{{jsxref("Date.prototype.setMinutes()")}}</dt>
+ <dd>Встановлює хвилини для вказаної дати згідно з місцевим часом.</dd>
+ <dt>{{jsxref("Date.prototype.setMonth()")}}</dt>
+ <dd>Встановлює місяць для вказаної дати згідно з місцевим часом.</dd>
+ <dt>{{jsxref("Date.prototype.setSeconds()")}}</dt>
+ <dd>Встановлює секунди для вказаної дати згідно з місцевим часом.</dd>
+ <dt>{{jsxref("Date.prototype.setTime()")}}</dt>
+ <dd>Встановлює об'єкту {{jsxref("Date")}} час, переданий кількістю мілісекунд від 1 січня 1970 року 00:00:00 за UTC. Використовуйте від'ємні значення для більш ранніх дат.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCDate()")}}</dt>
+ <dd>Встановлює день місяця для вказаної дати згідно зі всесвітнім часом.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCFullYear()")}}</dt>
+ <dd>Встановлює повне значення року (наприклад, 4 цифри для 4-значних років) для вказаної дати згідно зі всесвітнім часом.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCHours()")}}</dt>
+ <dd>Встановлює години для вказаної дати згідно зі всесвітнім часом.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</dt>
+ <dd>Встановлює мілісекунди для вказаної дати згідно зі всесвітнім часом.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCMinutes()")}}</dt>
+ <dd>Встановлює хвилини для вказаної дати згідно зі всесвітнім часом.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCMonth()")}}</dt>
+ <dd>Встановлює місяць для вказаної дати згідно зі всесвітнім часом.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCSeconds()")}}</dt>
+ <dd>Встановлює секунди для вказаної дати згідно зі всесвітнім часом.</dd>
+ <dt>{{jsxref("Date.prototype.setYear()")}}</dt>
+ <dd>Встановлює рік (зазвичай, 2–3 цифри) для вказаної дати згідно з місцевим часом. Використовуйте замість нього {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}}.</dd>
+ <dt>{{jsxref("Date.prototype.toDateString()")}}</dt>
+ <dd>Повертає елементи дати об'єкта {{jsxref("Date")}} у вигляді зручного для читання рядка, наприклад, <code>'Thu Apr 12 2018'</code>.</dd>
+ <dt>{{jsxref("Date.prototype.toISOString()")}}</dt>
+ <dd>Перетворює дату на рядок згідно з розширеним форматом ISO 8601.</dd>
+ <dt>{{jsxref("Date.prototype.toJSON()")}}</dt>
+ <dd>Повертає рядок, що відображає об'єкт {{jsxref("Date")}}, використовуючи {{jsxref("Date.prototype.toISOString()", "toISOString()")}}. Призначений для використання методом {{jsxref("JSON.stringify()")}}.</dd>
+ <dt>{{jsxref("Date.prototype.toGMTString()")}}</dt>
+ <dd>Повертає рядок, що відображає об'єкт {{jsxref("Date")}} на основі часового поясу GMT (UTC). Використовуйте замість нього {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}}.</dd>
+ <dt>{{jsxref("Date.prototype.toLocaleDateString()")}}</dt>
+ <dd>Повертає рядкове представлення елементів дати у відповідності до системних налаштувань.</dd>
+ <dt><code><a href="/uk/docs/Archive/Web/JavaScript/Date.toLocaleFormat">Date.prototype.toLocaleFormat()</a></code></dt>
+ <dd>Перетворює дату на рядок, використовуючи рядок форматування.</dd>
+ <dt>{{jsxref("Date.prototype.toLocaleString()")}}</dt>
+ <dd>Повертає рядкове представлення дати відповідно до мовних налаштувань. Заміщує метод {{jsxref("Object.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("Date.prototype.toLocaleTimeString()")}}</dt>
+ <dd>Повертає рядкове представлення часу у відповідності до мовних налаштувань.</dd>
+ <dt>{{jsxref("Date.prototype.toString()")}}</dt>
+ <dd>Повертає рядкове представлення вказаного об'єкта {{jsxref("Date")}}. Заміщує метод {{jsxref("Object.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("Date.prototype.toTimeString()")}}</dt>
+ <dd>Повертає елементи часу об'єкта {{jsxref("Date")}} у вигляді зручного для читання рядка.</dd>
+ <dt>{{jsxref("Date.prototype.toUTCString()")}}</dt>
+ <dd>Перетворює дату на рядок, використовуючи часових пояс UTC.</dd>
+ <dt>{{jsxref("Date.prototype.valueOf()")}}</dt>
+ <dd>Повертає просте значення об'єкта {{jsxref("Date")}}. Заміщує метод {{jsxref("Object.prototype.valueOf()")}}.</dd>
+</dl>
+
+<div></div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Кілька_способів_створити_екземпляр_Date">Кілька способів створити екземпляр <code>Date</code></h3>
+
+<p>Наступні приклади демонструють кілька способів створення дат JavaScript:</p>
+
+<div class="note">
+<p><strong>Заувага:</strong> Розбір рядків з датою за допомогою конструктора <code>Date</code> (або методу <code>Date.parse</code>, що є одне й те саме) є рішуче небажаним через наявні розбіжності поміж переглядачами.</p>
+</div>
+
+<pre class="brush: js notranslate">let today = new Date()
+let birthday = new Date('December 17, 1995 03:24:00')
+let birthday = new Date('1995-12-17T03:24:00')
+let birthday = new Date(1995, 11, 17)            // місяці нумеруються з 0
+let birthday = new Date(1995, 11, 17, 3, 24, 0)
+let birthday = new Date(628021800000)            // передаємо часову мітку
+</pre>
+
+<h3 id="Щоб_отримати_день_місяць_та_рік_або_час"> Щоб отримати день, місяць та рік, або час</h3>
+
+<pre class="brush: js notranslate">let [month, date, year]    = ( new Date() ).toLocaleDateString().split("/")
+let [hour, minute, second] = ( new Date() ).toLocaleTimeString().slice(0,7).split(":")</pre>
+
+<h3 id="Двозначний_рік_відповідає_рокам_1900-1999">Двозначний рік відповідає рокам 1900-1999</h3>
+
+<p>Для створення та отримання дат між <code>0</code> та <code>99</code> роками, слід використовувати методи {{jsxref("Date.prototype.setFullYear()")}} та {{jsxref("Date.prototype.getFullYear()")}}.</p>
+
+<pre class="brush: js notranslate">let date = new Date(98, 1);  // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
+
+// Застарілий метод, тут 98 також обертається на 1998
+date.setYear(98);            // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
+
+date.setFullYear(98);        // Sat Feb 01 0098 00:00:00 GMT+0000 (BST)
+</pre>
+
+<h3 id="Обчислення_тривалості">Обчислення тривалості</h3>
+
+<p>У наведених прикладах показано, як визначити час, що пройшов між двома датами JavaScript.</p>
+
+<p>Через різну тривалість доби (внаслідок переходів між літнім та зимовим часом), місяців та років, вираження обчисленої тривалості в одиницях, більших за години, хвилини та секунди, зустрічає багато проблем та потребує вдумливого дослідження перед застосуванням.</p>
+
+<pre class="brush: js notranslate">// Використання об'єктв Date
+var start = Date.now();
+
+// Тут якісь обчислення, тривалість яких слід з'ясувати
+doSomethingForALongTime();
+let end = Date.now()
+let elapsed = end - start // час, що пройшов, у мілісекундах
+</pre>
+
+<pre class="brush: js notranslate">// Використання вбудованих методів
+let start = new Date()
+
+// Подію, час якої необхідно обчислити:
+doSomethingForALongTime()
+let end = new Date()
+let elapsed = end.getTime() - start.getTime() // час, що пройшов, у мілісекундах
+</pre>
+
+<pre class="brush: js notranslate">// Щоб перевірити функцію та отримати її результат
+function printElapsedTime(fTest) {
+  let nStartTime = Date.now(),
+      vReturn = fTest(),
+      nEndTime = Date.now()
+
+  console.log(`Тривалість: ${ String(nEndTime - nStartTime) } мілісекунд`);
+  return vReturn
+}
+
+let yourFunctionReturn = printElapsedTime(yourFunction)
+</pre>
+
+<div class="note">
+<p><strong>Заувага:</strong> У переглядачах з підтримкою часу високої роздільності {{domxref("window.performance", "Web Performance API", "", 1)}}, метод {{domxref("Performance.now()")}} може забезпечити вищу точність та надійність вимірювання тривалості, ніж {{jsxref("Date.now()")}}.</p>
+</div>
+
+<h3 id="Отримання_кількості_секунд_з_початку_епохи_ECMAScript">Отримання кількості секунд з початку епохи ECMAScript</h3>
+
+<pre class="notranslate">let seconds = Math.floor(Date.now() / 1000)
+</pre>
+
+<p>У цьому випадку важливо повернути тільки ціле число, тому просте ділення не підійде. Також важливо повернути лише секунди, які вже пройшли. (Тому цей код використовує {{jsxref("Math.floor()")}}, а <em>не</em> {{jsxref("Math.round()")}}.)</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date-objects', 'Date')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<div>{{Compat("javascript.builtins.Date.Date")}}</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>Конструктор {{jsxref("Date/Date", "Date()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/now/index.html b/files/uk/web/javascript/reference/global_objects/date/now/index.html
new file mode 100644
index 0000000000..7e03cfbcef
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/now/index.html
@@ -0,0 +1,86 @@
+---
+title: Date.now()
+slug: Web/JavaScript/Reference/Global_Objects/Date/now
+tags:
+  - JavaScript
+  - Method
+  - UTC
+  - polyfill
+  - Дата
+  - Довідка
+  - Час Unix
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/now
+---
+<div>{{JSRef}}</div>
+
+<p>Статичний метод <strong><code>Date.now()</code></strong> вертає кількість мілісекунд від 1 січня 1970 року о 00:00:00 за UTC.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/date-now.html")}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code>var timeInMs = Date.now();</code></pre>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>{{jsxref("Число")}}, що позначає кількість мілісекунд від початку епохи за часом Unix.</p>
+
+<h2 id="Запасний_варіант_поліфіл">Запасний варіант (поліфіл)</h2>
+
+<p>Цей метод було стандартизовано 5-им випуском ECMA-262. Для рушіїв, що не мають підтримки цього метода, стане в пригоді таке рішення:</p>
+
+<pre class="brush: js notranslate">if (!Date.now) {
+  Date.now = function now() {
+    return new Date().getTime();
+  };
+}
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Зменшена_точність_часу">Зменшена точність часу</h3>
+
+<p>Для захисту від атак за часом чи за цифровими відбитками, точність <code>Date.now()</code> може бути округлена, в залежності від налаштувань переглядача.<br>
+ У Firefox параметр <code>privacy.reduceTimerPrecision</code> за замовчуванням увімкнений та дорівнює 20 мс у Firefox 59; у 60 він дорівнюватиме 2 мс.</p>
+
+<pre class="brush: js notranslate">// зменшена точність часу (2 мс) у Firefox 60
+Date.now()
+// 1519211809934
+// 1519211810362
+// 1519211811670
+// ...
+
+// зменшена точність часу з увімкненим параметром `privacy.resistFingerprinting`
+Date.now();
+// 1519129853500
+// 1519129858900
+// 1519129864400
+// ...</pre>
+
+<p>У Firefox ви також можете увімкнути <code>privacy.resistFingerprinting</code>, точність дорівнюватиме або 100 мс, або значенню <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code>, в залежності від того, що більше.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.now', 'Date.now')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Date.now")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{domxref("Performance.now()")}} — вертає поточний час із роздільною здатністю вище мілісекунди для програмного вимірювання швидкодії веб-сторінки</li>
+ <li>{{domxref("console.time()")}} / {{domxref("console.timeEnd()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/parse/index.html b/files/uk/web/javascript/reference/global_objects/date/parse/index.html
new file mode 100644
index 0000000000..a83c917192
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/parse/index.html
@@ -0,0 +1,198 @@
+---
+title: Date.parse()
+slug: Web/JavaScript/Reference/Global_Objects/Date/parse
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/parse
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>Date.parse()</code></strong> розбирає рядкове представлення дати та повертає кількість мілісекунд від 1 січня 1970 року, 00:00:00 за UTC, або <code>NaN</code>, якщо рядок неможливо розібрати чи, в окремих випадках, він містить недозволені значення (наприклад, 2015-02-31).</p>
+
+<p>Не рекомендується використовувати <code>Date.parse</code>, оскільки у версіях до ES5 розбір був повністю залежним від реалізації. Досі існують багато відмінностей у тому, як різні хости розбирають рядки з датами, тому вони мають розбиратися вручну (можна скористатись бібліотекою, якщо очікується багато різних форматів).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-parse.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Прямий виклик:</p>
+
+<pre class="syntaxbox notranslate">Date.parse(<var>dateString</var>)
+</pre>
+
+<p>Неявний виклик:</p>
+
+<pre class="syntaxbox notranslate">new Date(<var>dateString</var>)
+</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>dateString</var></code></dt>
+ <dd>Рядок, що відображає <a href="#Date_Time_String_Format">спрощену версію розширеного календарного формату дати ISO 8601</a>. (Можна використовувати й інші формати, але результат залежитиме від реалізації.)</dd>
+</dl>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Число, що відображає кількість мілісекунд від 1 січня 1970 року, 00:00:00 за UTC, і дату, отриману розбором наданого рядкового представлення дати. Якщо аргумент не відображає дозволене значення дати, повертається {{jsxref("NaN")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>parse()</code> приймає рядок з датою (наприклад, "<code>2011-10-10T14:48:00</code>") та повертає число мілісекунд від 1 січня 1970 року, 00:00:00 за UTC.</p>
+
+<p>Ця функція корисна для присвоєння дати на основі рядкових значень, наприклад, у поєднанні з методом {{jsxref("Date.prototype.setTime()", "setTime()")}} та об'єктом {{jsxref("Global_Objects/Date", "Date")}}.</p>
+
+<h3 id="Рядковий_формат_дати_та_часу">Рядковий формат дати та часу</h3>
+
+<p>Стандартне рядкове представлення дати та часу є спрощенням розширеного календарного формату дати ISO 8601. (Дивіться більше подробиць у розділі <a href="https://tc39.github.io/ecma262/#sec-date-time-string-format">Date Time String Format</a> специфікації ECMAScript.)</p>
+
+<p>Наприклад, "<code>2011-10-10</code>" (<em>лише дата</em>), "<code>2011-10-10T14:48:00</code>" (<em>дата та час</em>) або "<code>2011-10-10T14:48:00.000+09:00</code>" (<em>дата та час</em> з мілісекундами та часовим поясом) можуть бути та будуть розібрані. Коли зсув часового поясу відсутній, форми, що містять лише дату, інтерпретуються як час UTC, а форми з датою та часом інтерпретуються як місцевий час.</p>
+
+<p>Хоча специфікатори часового поясу використовуються під час розбору рядків для інтерпретації аргументу, значення, що повертається, завжди буде кількістю мілісекунд між 1 січня 1970 року 00:00:00 за UTC та точкою у часі, відображеною аргументом, або ж <code>NaN</code>.</p>
+
+<p>Оскіьки <code>parse()</code> - статичний метод {{jsxref("Date")}}, він викликається як <code>Date.parse()</code>, а не як метод екземпляра {{jsxref("Date")}}.</p>
+
+<h3 id="Використання_специфічних_реалізацій_форматів_дати">Використання специфічних реалізацій форматів дати</h3>
+
+<div class="blockIndicator note">
+<p>Цей розділ містить специфічно реалізовану поведінку, яка може не співпадати між різними реалізаціями.</p>
+</div>
+
+<p>Специфікація ECMAScript зазначає: Якщо рядок не відповідає стандартному формату, функція може застосовувати будь-яку специфічно реалізовану евристику чи специфічно реалізований алгоритм розбору. Рядки, які неможливо розібрати, чи дати, що містять недозволені значення елементів у рядках формату ISO, змусять метод <code>Date.parse()</code> повернути {{jsxref("NaN")}}.</p>
+
+<p>Однак, недозволені значення у рядках дат, які не розпізнаються в якості спрощеного формату ISO, визначеного у ECMA-262, можуть повернути або не повернути {{jsxref("NaN")}}, в залежності від переглядача, наданих значень і т.д.:</p>
+
+<pre class="brush: js notranslate">// Рядок не формату ISO з недозволеними значеннями у даті
+new Date('23/25/2014');
+</pre>
+
+<p>це буде сприйнято як локальна дата 25 листопада 2015 у Firefox 30 та як неправильна дата у Safari 7.</p>
+
+<p>Однак, якщо рядок розпізнається як рядок формату ISO та містить недозволені значення, він поверне {{jsxref("NaN")}} в усіх переглядачах, сумісних з ES5 та пізнішими версіями:</p>
+
+<pre class="brush: js notranslate">// Рядок ISO з недозволеними значеннями
+new Date('2014-25-23').toISOString();
+// викидає "RangeError: invalid date" в усіх переглядачах, сумісних з ES5
+</pre>
+
+<p>Специфічну реалізацію SpiderMonkey можна знайти у <a href="https://dxr.mozilla.org/mozilla-central/source/js/src/jsdate.cpp?rev=64553c483cd1#889"><code>jsdate.cpp</code></a>. Рядок "<code>10 06 2014</code>" є прикладом невідповідності формату ISO, і тому використовується особливий алгоритм. Дивіться також цей <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1023155#c6">короткий опис</a> того, як працює розбір.</p>
+
+<pre class="brush: js notranslate">new Date('10 06 2014');
+</pre>
+
+<p>це буде сприйматись як локальна дата 6 жовтня 2014, а не як 10 червня 2014.</p>
+
+<p>Інші приклади:</p>
+
+<pre class="brush: js notranslate">new Date('foo-bar 2014').toString();
+// повертає: "Invalid Date"
+
+Date.parse('foo-bar 2014');
+// повертає: NaN
+</pre>
+
+<h3 id="Відмінності_у_отриманому_часовому_поясі">Відмінності у отриманому часовому поясі</h3>
+
+<div class="blockIndicator note">
+<p>Цей розділ містить специфічно реалізовану поведінку, яка може не співпадати між різними реалізаціями.</p>
+</div>
+
+<p>Отримавши нестандартний рядок дати "<code>March 7, 2014</code>", <code>parse()</code> припускає, що він відноситься до місцевого часового поясу, але отримавши рядок у спрощеній версії розширеного календарного формату ISO 8601, наприклад, "<code>2014-03-07</code>", він припускає часовий пояс UTC (ES5 та ECMAScript 2015). Таким чином, об'єкти {{jsxref("Date")}}, отримані за допомогою цих рядків, можуть відображати різні моменти часу, в залежності від версії ECMAScript, яка підтримується, якщо тільки у системі не встановлений місцевий часовий пояс UTC. Це означає, що два рядки дат, що виглядають еквівалентними, можуть повернути два різних значення, в залежності від формату рядка, який перетворюється.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_Date.parse">Використання <code>Date.parse()</code></h3>
+
+<p>Усі наступні виклики повертають <code>1546300800000</code>. Перший, у відповідності до ES5, застосує час UTC, а інші вказують часовий пояс UTC через специфікацію дати ISO (<code>Z</code> та <code>+00:00</code>)</p>
+
+<pre class="brush: js notranslate">Date.parse("2019-01-01")
+Date.parse("2019-01-01T00:00:00.000Z")
+Date.parse("2019-01-01T00:00:00.000+00:00")
+</pre>
+
+<p>Наступний виклик, який не вказує часовий пояс, поверне 2019-01-01 о 00:00:00 у локальному часовому поясі системи.</p>
+
+<pre class="brush: js notranslate">Date.parse("2019-01-01T00:00:00")
+</pre>
+
+<h3 id="Нестандартні_рядки_дат">Нестандартні рядки дат</h3>
+
+<div class="blockIndicator note">
+<p>Цей розділ містить специфічно реалізовану поведінку, яка може не співпадати між різними реалізаціями.</p>
+</div>
+
+<p>Якщо <code>IPOdate</code> є існуючим об'єктом {{jsxref("Date")}}, йому можна призначити дату 9 серпня 1995 (за локальним часом) наступним чином:</p>
+
+<pre class="brush: js notranslate">IPOdate.setTime(Date.parse('Aug 9, 1995'));
+</pre>
+
+<p>Ще кілька прикладів розбору нестандартних рядків дат:</p>
+
+<pre class="brush: js notranslate">Date.parse('Aug 9, 1995');
+</pre>
+
+<p>Повертає <code>807937200000</code> у часовому поясі GMT-0300 та інші значення у інших часових поясах, оскільки рядок не вказує часовий пояс і не відповідає формату ISO, тому часовий пояс береться локальний.</p>
+
+<pre class="brush: js notranslate">Date.parse('Wed, 09 Aug 1995 00:00:00 GMT');
+</pre>
+
+<p>Повертає <code>807926400000</code>, незалежно від локального часового поясу, оскільки вказано GMT (UTC).</p>
+
+<pre class="brush: js notranslate">Date.parse('Wed, 09 Aug 1995 00:00:00');
+</pre>
+
+<p>Повертає <code>807937200000</code> у часовому поясі GMT-0300 та інші значення у інших часових поясах, оскільки аргумент не містить вказівника часового поясу, і не відповідає формату ISO, а отже, сприймається як локальний.</p>
+
+<pre class="brush: js notranslate">Date.parse('Thu, 01 Jan 1970 00:00:00 GMT');
+</pre>
+
+<p>Повертає <code>0</code>, незалежно від локального часового поясу, оскільки вказано GMT (UTC).</p>
+
+<pre class="brush: js notranslate">Date.parse('Thu, 01 Jan 1970 00:00:00');
+</pre>
+
+<p>Повертає <code>14400000</code> у часовому поясі GMT-0400 та інші значення у інших часових поясах, оскільки часовий пояс не вказано, а рядок не відповідає формату ISO, тому використовується локальний часовий пояс.</p>
+
+<pre class="brush: js notranslate">Date.parse('Thu, 01 Jan 1970 00:00:00 GMT-0400');
+</pre>
+
+<p>Повертає <code>14400000</code>, незалежно від локального часового поясу, оскільки вказано GMT (UTC).</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.parse', 'Date.parse')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Date.parse")}}</p>
+
+<h3 id="Примітки_щодо_сумісності">Примітки щодо сумісності</h3>
+
+<ul>
+ <li>Firefox 49 змінив розбір 2-значних значень року для співпадіння з переглядачем Google Chrome замість Internet Explorer. Тепер 2-значні значення року, менші за <code>50</code>, розбираються як роки 21-го сторіччя. Наприклад, <code>04/16/17</code>, що раніше інтерпретувалось як 16 квітня 1917 року тепер буде 16 квітня 2017 року. Щоб запобігти будь-яких проблем сумісності чи невизначеності, рекомендується використовувати формат ISO 8601, наприклад, "<code>2017-04-16</code>" (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1265136">помилка 1265136</a>).</li>
+ <li>Google Chrome прийме числовий рядок як дозволений параметр <code><em>dateString</em></code>. Це означає, що, наприклад, в той час, як команда <code>!!Date.parse("42")</code> повертає <code>false</code> у Firefox, вона поверне <code>true</code> у Google Chrome, оскільки "<code>42</code>" інтерпретується як 1 січня 2042 року.</li>
+</ul>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.UTC()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/setdate/index.html b/files/uk/web/javascript/reference/global_objects/date/setdate/index.html
new file mode 100644
index 0000000000..4a34fb17fa
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/setdate/index.html
@@ -0,0 +1,79 @@
+---
+title: Date.prototype.setDate()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setDate
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setDate
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>setDate()</code></strong> встановлює день об'єкта {{jsxref("Date")}} відносно початку наразі встановленого місяця.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setdate.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setDate(<var>dayValue</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>dayValue</code></dt>
+ <dd>Ціле число, що відображає день місяця.</dd>
+</dl>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Число мілісекунд між 1 січня 1970 00:00:00 за UTC та наданою датою (об'єкт {{jsxref("Date")}} також змінюється на місці).</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо значення <code>dayValue</code> знаходиться за межами значень діапазону днів місяця, <code>setDate()</code> оновить об'єкт {{jsxref("Date")}} відповідно.</p>
+
+<p>Наприклад, якщо для <code>dayValue</code> надано 0, дата буде встановлена останнім днем попереднього місяця.</p>
+
+<p>Якщо для <code>dayValue</code> надане від'ємне число, дата присвоїться зворотнім відліком від останнього дня попереднього місяця. -1 поверне дату, що на 1 день менша за останній день попереднього місяця.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_setDate">Використання <code>setDate()</code></h3>
+
+<pre class="brush: js notranslate">var theBigDay = new Date(1962, 6, 7); // 1962-07-07 (7 липня 1962)
+theBigDay.setDate(24);  // 1962-07-24 (24 липня 1962)
+theBigDay.setDate(32);  // 1962-08-01 (1 серпня 1962)
+theBigDay.setDate(22);  // 1962-08-22 (22 серпня 1962)
+theBigDay.setDate(0);   // 1962-07-31 (31 липня 1962)
+theBigDay.setDate(98);  // 1962-10-06 (6 жовтня 1962)
+theBigDay.setDate(-50); // 1962-08-11 (11 серпня 1962)
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setDate")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getDate()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCDate()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/setfullyear/index.html b/files/uk/web/javascript/reference/global_objects/date/setfullyear/index.html
new file mode 100644
index 0000000000..9eb3d1c695
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/setfullyear/index.html
@@ -0,0 +1,77 @@
+---
+title: Date.prototype.setFullYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setFullYear
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setFullYear
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>setFullYear()</code></strong> встановлює повне значення року вказаній даті згідно з місцевим часом. Повертає нову часову мітку.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setfullyear.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setFullYear(<var>yearValue</var>[, <var>monthValue</var>[, <var>dateValue</var>]])</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>yearValue</code></dt>
+ <dd>Ціле число, що передає числове значення року, наприклад, 1995.</dd>
+ <dt><code>monthValue</code></dt>
+ <dd>Необов'язковий. Ціле число між 0 та 11, що відображає місяці з січня по грудень.</dd>
+ <dt><code>dateValue</code></dt>
+ <dd>Необов'язковий. Ціле число між 1 та 31, що відображає день місяця. Якщо ви вказуєте параметр <code>dateValue</code>, ви повинні також вказати <code>monthValue</code>.</dd>
+</dl>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Кількість мілісекунд між 1 січня 1970 00:00:00 за UTC та оновленою датою.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо ви не вказуєте параметри <code>monthValue</code> та <code>dateValue</code>, використовуються значення, що повертають методи {{jsxref("Date.prototype.getMonth()", "getMonth()")}} та {{jsxref("Date.prototype.getDate()", "getDate()")}}.</p>
+
+<p>Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, <code>setFullYear()</code> пробує оновити інші параметри та інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вказуєте 15 в якості <code>monthValue</code>, рік збільшується на 1 (<code>yearValue + 1</code>), а 3 використовується як значення місяця.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_setFullYear">Використання <code>setFullYear()</code></h3>
+
+<pre class="brush: js notranslate">var theBigDay = new Date();
+theBigDay.setFullYear(1997);
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setFullYear")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setYear()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/sethours/index.html b/files/uk/web/javascript/reference/global_objects/date/sethours/index.html
new file mode 100644
index 0000000000..8c63be9bb4
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/sethours/index.html
@@ -0,0 +1,82 @@
+---
+title: Date.prototype.setHours()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setHours
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setHours
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>setHours()</code></strong> встановлює години вказаної дати згідно з місцевим часом та повертає кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та часом у оновленому екземплярі {{jsxref("Date")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-sethours.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setHours(<var>hoursValue</var>[, <var>minutesValue</var>[, <var>secondsValue</var>[, <var>msValue</var>]]])</code></pre>
+
+<h3 id="Версії_до_JavaScript_1.3">Версії до JavaScript 1.3</h3>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setHours(<var>hoursValue</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>hoursValue</code></dt>
+ <dd>В ідеалі, ціле число між 0 та 23, що відображає години. Якщо надано значення, більше за 23, дата та час будуть збільшені на додаткові години.</dd>
+ <dt><code>minutesValue</code></dt>
+ <dd>Необов'язковий. В ідеалі, ціле число між 0 та 59, що відображає хвилини. Якщо надано значення, більше за 59, дата та час будуть збільшені на додаткові хвилини.</dd>
+ <dt><code>secondsValue</code></dt>
+ <dd>Необов'язковий. В ідеалі, ціле число між 0 та 59, що відображає секунди. Якщо надано значення, більше за 59, дата та час будуть збільшені на додаткові секунди. Якщо ви вказуєте параметр <code>secondsValue</code>, ви також повинні вказати <code>minutesValue</code>.</dd>
+ <dt><code>msValue</code></dt>
+ <dd>Необов'язковий. В ідеалі, ціле число між 0 та 999, що відображає мілісекунди. Якщо надано значення, більше за 999, дата та час будуть збільшені на додаткові мілісекунди. Якщо ви вказуєте параметр <code>msValue</code>, ви також повинні вказати <code>minutesValue</code> та <code>secondsValue</code>.</dd>
+</dl>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо ви не вказуєте параметри <code>minutesValue</code>, <code>secondsValue</code> та <code>msValue</code>, будуть використані значення, що повертають методи {{jsxref("Date.prototype.getMinutes()", "getMinutes()")}}, {{jsxref("Date.prototype.getSeconds()", "getSeconds()")}} та {{jsxref("Date.prototype.getMilliseconds()", "getMilliseconds()")}}.</p>
+
+<p>Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, <code>setHours()</code> пробує оновити інші параметри та інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 100 в якості <code>secondsValue</code>, хвилини будуть збільшені на 1 (<code>minutesValue + 1</code>), а 40 буде значенням секунд.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_setHours">Використання <code>setHours()</code></h3>
+
+<pre class="brush:js notranslate">var theBigDay = new Date();
+theBigDay.setHours(7);
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.sethours', 'Date.prototype.setHours')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setHours")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getHours()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCHours()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/setmilliseconds/index.html b/files/uk/web/javascript/reference/global_objects/date/setmilliseconds/index.html
new file mode 100644
index 0000000000..5cdcd65fa9
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/setmilliseconds/index.html
@@ -0,0 +1,70 @@
+---
+title: Date.prototype.setMilliseconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>setMilliseconds()</code></strong> встановлює мілісекунди у вказаній даті згідно з місцевим часом.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setmilliseconds.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setMilliseconds(<var>millisecondsValue</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>millisecondsValue</code></dt>
+ <dd>Число між 0 та 999, що відображає мілісекунди.</dd>
+</dl>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо ви вказуєте число, що знаходиться за межами очікуваного діапазону, інформація про дату у об'єкті {{jsxref("Date")}} оновлюється відповідно. Наприклад, якщо ви вкажете 1005, кількість секунд збільшиться на 1, а 5 буде значенням мілісекунд.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_setMilliseconds">Використання <code>setMilliseconds()</code></h3>
+
+<pre class="brush: js notranslate">var theBigDay = new Date();
+theBigDay.setMilliseconds(100);
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setmilliseconds', 'Date.prototype.setMilliseconds')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setMilliseconds")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/setminutes/index.html b/files/uk/web/javascript/reference/global_objects/date/setminutes/index.html
new file mode 100644
index 0000000000..8dae7118e8
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/setminutes/index.html
@@ -0,0 +1,80 @@
+---
+title: Date.prototype.setMinutes()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setMinutes
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMinutes
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>setMinutes()</code></strong> встановлює хвилини для вказаної дати згідно з місцевим часом.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setminutes.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setMinutes(<var>minutesValue</var>[, <var>secondsValue</var>[, <var>msValue</var>]])</code></pre>
+
+<h3 id="Версії_до_JavaScript_1.3">Версії до JavaScript 1.3</h3>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setMinutes(<var>minutesValue</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>minutesValue</code></dt>
+ <dd>Ціле число між 0 та 59, що відображає хвилини.</dd>
+ <dt><code>secondsValue</code></dt>
+ <dd>Необов'язковий. Ціле число між 0 та 59, що відображає секунди.</dd>
+ <dt><code>msValue</code></dt>
+ <dd>Необов'язковий. Ціле число між 0 та 999, що відображає мілісекунди. Якщо ви вказуєте параметр <code>msValue</code>, ви також повинні вказати <code>secondsValue</code>.</dd>
+</dl>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо ви не вказуєте параметри <code>secondsValue</code> та <code>msValue</code>, використовуються значення, що повертають методи {{jsxref("Date.prototype.getSeconds()", "getSeconds()")}} та {{jsxref("Date.prototype.getMilliseconds()", "getMilliseconds()")}}.</p>
+
+<p>Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, <code>setMinutes()</code> пробує оновити інші параметри та інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 100 в якості <code>secondsValue</code>, хвилини будуть збільшені на 1 (<code>minutesValue + 1</code>), а 40 буде значенням секунд.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_setMinutes">Використання <code>setMinutes()</code></h3>
+
+<pre class="brush: js notranslate">var theBigDay = new Date();
+theBigDay.setMinutes(45);
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setminutes', 'Date.prototype.setMinutes')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setMinutes")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getMinutes()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMinutes()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/setmonth/index.html b/files/uk/web/javascript/reference/global_objects/date/setmonth/index.html
new file mode 100644
index 0000000000..6776be81f5
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/setmonth/index.html
@@ -0,0 +1,83 @@
+---
+title: Date.prototype.setMonth()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setMonth
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMonth
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>setMonth()</code></strong> встановлює місяць для вказаної дати згідно зі встановленим значенням року.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setmonth.html")}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setMonth(<var>monthValue</var>[, <var>dayValue</var>])</code></pre>
+
+<h3 id="Версії_до_JavaScript_1.3">Версії до JavaScript 1.3</h3>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setMonth(<var>monthValue</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>monthValue</code></dt>
+ <dd>Ціле число на основі нуля, що позначає зсув у місяцях від початку року. Отже, 0 позначає січень, 11 - грудень, -1 позначає грудень попереднього року, а 12 - січень наступного року.</dd>
+ <dt><code>dayValue</code></dt>
+ <dd>Необов'язковий. Ціле число від 1 до 31, що позначає день місяця.</dd>
+</dl>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо ви не вказуєте параметр <code>dayValue</code>, використовується значення, яке повертає метод {{jsxref("Date.prototype.getDate()", "getDate()")}}.</p>
+
+<p>Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, <code>setMonth()</code> пробує оновити інші параметри та інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 15 в якості <code>monthValue</code>, рік буде збільшений на 1, а 3 буде значенням місяця.</p>
+
+<p>Поточний день місяця впливатиме на поведінку цього методу. Концептуально, він додасть кількість днів, надану поточним значенням дня місяця, до першого дня нового місяця, вказаного у параметрі, щоб повернути нову дату. Наприклад, якщо існуючим значенням є 31-ше серпня 2016, виклик setMonth зі значенням 1 поверне 2 березня 2016. Все тому, що у лютому 2016 було 29 днів.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_setMonth">Використання <code>setMonth()</code></h3>
+
+<pre class="brush: js notranslate">var theBigDay = new Date();
+theBigDay.setMonth(6);
+
+// Стережіться переходів у кінці місяця
+var endOfMonth = new Date(2016, 7, 31);
+endOfMonth.setMonth(1);
+console.log(endOfMonth); //Wed Mar 02 2016 00:00:00
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setMonth")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getMonth()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMonth()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/setseconds/index.html b/files/uk/web/javascript/reference/global_objects/date/setseconds/index.html
new file mode 100644
index 0000000000..7940ff72b8
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/setseconds/index.html
@@ -0,0 +1,78 @@
+---
+title: Date.prototype.setSeconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setSeconds
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setSeconds
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>setSeconds()</code></strong> встановлює секунди для вказаної дати згідно з місцевим часом.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setseconds.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setSeconds(<var>secondsValue</var>[, <var>msValue</var>])</code></pre>
+
+<h3 id="Версії_до_JavaScript_1.3">Версії до JavaScript 1.3</h3>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setSeconds(<var>secondsValue</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>secondsValue</code></dt>
+ <dd>Ціле число між 0 та 59, що відображає секунди.</dd>
+ <dt><code>msValue</code></dt>
+ <dd>Необов'язковий. Число між 0 та 999, що відображає мілісекунди.</dd>
+</dl>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо ви не вказуєте параметр <code>msValue</code>, використовується значення, яке повертає метод {{jsxref("Date.prototype.getMilliseconds()", "getMilliseconds()")}}.</p>
+
+<p>Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, <code>setSeconds()</code> пробує оновити інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 100 в якості <code>secondsValue</code>, хвилини у об'єкті {{jsxref("Date")}} будуть збільшені на 1, а 40 буде значенням секунд.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_setSeconds">Використання <code>setSeconds()</code></h3>
+
+<pre class="brush: js notranslate">var theBigDay = new Date();
+theBigDay.setSeconds(30);
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setseconds', 'Date.prototype.setSeconds')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setSeconds")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getSeconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCSeconds()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/settime/index.html b/files/uk/web/javascript/reference/global_objects/date/settime/index.html
new file mode 100644
index 0000000000..a7ef57235d
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/settime/index.html
@@ -0,0 +1,71 @@
+---
+title: Date.prototype.setTime()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setTime
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setTime
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>setTime()</code></strong> встановлює об'єкту {{jsxref("Date")}} час, переданий кількістю мілісекунд від 1 січня 1970 року, 00:00:00 за UTC.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-settime.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setTime(<var>timeValue</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>timeValue</code></dt>
+ <dd>Ціле число, що відображає кільксть мілісекунд від 1 січня 1970 року, 00:00:00 за UTC.</dd>
+</dl>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датой (власне, значення аргументу).</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Використовуйте <code>setTime()</code>, щоб присвоїти дату та час іншому об'єкту {{jsxref("Date")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_setTime">Застосування <code>setTime()</code></h3>
+
+<pre class="brush: js notranslate">var theBigDay = new Date('July 1, 1999');
+var sameAsBigDay = new Date();
+sameAsBigDay.setTime(theBigDay.getTime());
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.settime', 'Date.prototype.setTime')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setTime")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getTime()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCHours()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/setutcdate/index.html b/files/uk/web/javascript/reference/global_objects/date/setutcdate/index.html
new file mode 100644
index 0000000000..10cd4fabd6
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/setutcdate/index.html
@@ -0,0 +1,70 @@
+---
+title: Date.prototype.setUTCDate()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCDate
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCDate
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>setUTCDate()</code></strong> встановлює день місяця для вказаної дати згідно зі всесвітнім часом.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setutcdate.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setUTCDate(<var>dayValue</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>dayValue</code></dt>
+ <dd>Ціле число від 1 до 31, що відображає день місяця.</dd>
+</dl>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, <code>setUTCDate()</code> пробує оновити інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 40 в якості <code>dayValue</code>, а значенням місяця у об'єкті {{jsxref("Date")}} є червень, день буде змінений на 10, а місяць буде збільшений до липня.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_setUTCDate">Використання <code>setUTCDate()</code></h3>
+
+<pre class="brush: js notranslate">var theBigDay = new Date();
+theBigDay.setUTCDate(20);
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcdate', 'Date.prototype.setUTCDate')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setUTCDate")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.setDate()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/setutcfullyear/index.html b/files/uk/web/javascript/reference/global_objects/date/setutcfullyear/index.html
new file mode 100644
index 0000000000..7a95d10e06
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/setutcfullyear/index.html
@@ -0,0 +1,76 @@
+---
+title: Date.prototype.setUTCFullYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>setUTCFullYear()</code></strong> встановлює повне значення року для вказаної дати згідно зі всесвітнім часом.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setutcfullyear.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setUTCFullYear(<var>yearValue</var>[, <var>monthValue</var>[, <var>dayValue</var>]])</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>yearValue</code></dt>
+ <dd>Ціле число, що вказує числове значення року, наприклад, 1995.</dd>
+ <dt><code>monthValue</code></dt>
+ <dd>Необов'язковий. Ціле число між 0 та 11, що відображає місяці з січня по грудень.</dd>
+ <dt><code>dayValue</code></dt>
+ <dd>Необов'язковий. Ціле число між 1 та 31, що відображає день місяця. Якщо ви вказуєте параметр <code>dayValue</code>, ви повинні також вказати <code>monthValue</code>.</dd>
+</dl>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо ви не вказуєте параметри <code>monthValue</code> та <code>dayValue</code>, використовуються значення, що повертають методи {{jsxref("Date.prototype.getUTCMonth()", "getUTCMonth()")}} та {{jsxref("Date.prototype.getUTCDate()", "getUTCDate()")}}.</p>
+
+<p>Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, <code>setUTCFullYear()</code> пробує оновити інші параметри та інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 15 в якості <code>monthValue</code>, рік буде збільшений на 1 (<code>yearValue + 1</code>), а 3 буде значенням місяця.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_setUTCFullYear">Використання <code>setUTCFullYear()</code></h3>
+
+<pre class="brush: js notranslate">var theBigDay = new Date();
+theBigDay.setUTCFullYear(1997);
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcfullyear', 'Date.prototype.setUTCFullYear')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setUTCFullYear")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setFullYear()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/setutchours/index.html b/files/uk/web/javascript/reference/global_objects/date/setutchours/index.html
new file mode 100644
index 0000000000..d5a0a800f3
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/setutchours/index.html
@@ -0,0 +1,78 @@
+---
+title: Date.prototype.setUTCHours()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCHours
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCHours
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>setUTCHours()</code></strong> встановлює години для вказаної дати згідно зі всесвітнім часом та повертає кількість мілісекунд від 1 січня 1970 року 00:00:00 за UTC до часу, представленого оновленим екземпляром {{jsxref("Date")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setutchours.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setUTCHours(<var>hoursValue</var>[, <var>minutesValue</var>[, <var>secondsValue</var>[, <var>msValue</var>]]])</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>hoursValue</code></dt>
+ <dd>Ціле число між 0 та 23, що відображає години.</dd>
+ <dt><code>minutesValue</code></dt>
+ <dd>Необов'язковий. Ціле число між 0 та 59, що відображає хвилини.</dd>
+ <dt><code>secondsValue</code></dt>
+ <dd>Необов'язковий. Ціле число між 0 та 59, що відображає секунди. Якщо ви вказуєте параметр <code>secondsValue</code>, ви також повинні вказати <code>minutesValue</code>.</dd>
+ <dt><code>msValue</code></dt>
+ <dd>Необов'язковий. Число між 0 та 999, що відображає мілісекунди. Якщо ви вказуєте параметр <code>msValue</code>, ви повинні також вказати <code>minutesValue</code> та <code>secondsValue</code>.</dd>
+</dl>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо ви не вказуєте параметри <code>minutesValue</code>, <code>secondsValue</code> та <code>msValue</code>, будуть використані значення, що повертають методи {{jsxref("Date.prototype.getUTCMinutes()", "getUTCMinutes()")}}, {{jsxref("Date.prototype.getUTCSeconds()", "getUTCSeconds()")}} та {{jsxref("Date.prototype.getUTCMilliseconds()", "getUTCMilliseconds()")}}.</p>
+
+<p>Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, <code>setUTCHours()</code> пробує оновити інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 100 в якості <code>secondsValue</code>, хвилини будуть збільшені на 1 (<code>minutesValue + 1</code>), а 40 буде значенням секунд.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_setUTCHours">Використання <code>setUTCHours()</code></h3>
+
+<pre class="brush: js notranslate">var theBigDay = new Date();
+theBigDay.setUTCHours(8);
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutchours', 'Date.prototype.setUTCHours')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setUTCHours")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCHours()")}}</li>
+ <li>{{jsxref("Date.prototype.setHours()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html b/files/uk/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html
new file mode 100644
index 0000000000..bcdc48d289
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html
@@ -0,0 +1,70 @@
+---
+title: Date.prototype.setUTCMilliseconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>setUTCMilliseconds()</code></strong> встановлює мілісекунди для вказаної дати згідно зі всесвітнім часом.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setutcmilliseconds.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setUTCMilliseconds(<var>millisecondsValue</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>millisecondsValue</code></dt>
+ <dd>Число між 0 та 999, що відображає мілісекунди.</dd>
+</dl>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, <code>setUTCMilliseconds()</code> пробує оновити інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 1100 в якості <code>millisecondsValue</code>, секунди у об'єкті {{jsxref("Date")}} будуть збільшені на 1, а 100 буде значенням мілісекунд.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_setUTCMilliseconds">Використання <code>setUTCMilliseconds()</code></h3>
+
+<pre class="brush: js notranslate">var theBigDay = new Date();
+theBigDay.setUTCMilliseconds(500);
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcmilliseconds', 'Date.prototype.setUTCMilliseconds')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setUTCMilliseconds")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setMilliseconds()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/setutcminutes/index.html b/files/uk/web/javascript/reference/global_objects/date/setutcminutes/index.html
new file mode 100644
index 0000000000..5f1ff13d74
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/setutcminutes/index.html
@@ -0,0 +1,76 @@
+---
+title: Date.prototype.setUTCMinutes()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>setUTCMinutes()</code></strong> встановлює хвилини для вказаної дати згідно зі всесвітнім часом.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setutcminutes.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setUTCMinutes(<var>minutesValue</var>[, <var>secondsValue</var>[, <var>msValue</var>]])</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>minutesValue</code></dt>
+ <dd>Ціле число між 0 та 59, що відображає хвилини.</dd>
+ <dt><code>secondsValue</code></dt>
+ <dd>Необов'язковий. Ціле число між 0 та 59, що відображає секунди.</dd>
+ <dt><code>msValue</code></dt>
+ <dd>Необов'язковий. Число між 0 та 999, що відображає мілісекунди. Якщо ви вказуєте параметр <code>msValue</code>, ви також повинні вказати параметр <code>secondsValue</code>.</dd>
+</dl>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо ви не вказуєте параметри <code>secondsValue</code> та <code>msValue</code>, будуть використані значення, що повертають методи {{jsxref("Date.prototype.getUTCSeconds()", "getUTCSeconds()")}} та {{jsxref("Date.prototype.getUTCMilliseconds()", "getUTCMilliseconds()")}}.</p>
+
+<p>Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, <code>setUTCMinutes()</code> пробує оновити інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 100 в якості <code>secondsValue</code>, хвилини будуть збільшені на 1 (<code>minutesValue + 1</code>), а 40 буде значенням секунд.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_setUTCMinutes">Використання <code>setUTCMinutes()</code></h3>
+
+<pre class="brush: js notranslate">var theBigDay = new Date();
+theBigDay.setUTCMinutes(43);
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcminutes', 'Date.prototype.setUTCMinutes')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setUTCMinutes")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMinutes()")}}</li>
+ <li>{{jsxref("Date.prototype.setMinutes()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/setutcmonth/index.html b/files/uk/web/javascript/reference/global_objects/date/setutcmonth/index.html
new file mode 100644
index 0000000000..75e684e958
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/setutcmonth/index.html
@@ -0,0 +1,74 @@
+---
+title: Date.prototype.setUTCMonth()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>setUTCMonth()</code></strong> встановлює місяць для вказаної дати згідно зі всесвітнім часом.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setutcmonth.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setUTCMonth(<var>monthValue</var>[, <var>dayValue</var>])</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>monthValue</code></dt>
+ <dd>Ціле число між 0 та 11, що відображає місяці з січня по грудень.</dd>
+ <dt><code>dayValue</code></dt>
+ <dd>Необов'язковий. Ціле число з 1 по 31, що відображає день місяця.</dd>
+</dl>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо ви не вказуєте параметр <code>dayValue</code>, буде використане значення, що повертає метод {{jsxref("Date.prototype.getUTCDate()", "getUTCDate()")}}.</p>
+
+<p>Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, <code>setUTCMonth()</code> пробує оновити інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 15 в якості <code>monthValue</code>, рік буде збільшений на 1, а 3 буде значенням місяця.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_setUTCMonth">Використання <code>setUTCMonth()</code></h3>
+
+<pre class="brush: js notranslate">var theBigDay = new Date();
+theBigDay.setUTCMonth(11);
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcmonth', 'Date.prototype.setUTCMonth')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setUTCMonth")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMonth()")}}</li>
+ <li>{{jsxref("Date.prototype.setMonth()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/setutcseconds/index.html b/files/uk/web/javascript/reference/global_objects/date/setutcseconds/index.html
new file mode 100644
index 0000000000..b00f94ca28
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/setutcseconds/index.html
@@ -0,0 +1,74 @@
+---
+title: Date.prototype.setUTCSeconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>setUTCSeconds()</code></strong> встановлює секунди для вказаної дати згідно зі всесвітнім часом.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setutcseconds.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setUTCSeconds(<var>secondsValue</var>[, <var>msValue</var>])</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>secondsValue</code></dt>
+ <dd>Ціле число між 0 та 59, що відображає секунди.</dd>
+ <dt><code>msValue</code></dt>
+ <dd>Необов'язковий. Число між 0 та 999, що відображає мілісекунди.</dd>
+</dl>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленим часом.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо ви не вказуєте параметр <code>msValue</code>, буде використане значення, що повертає метод {{jsxref("Date.prototype.getUTCMilliseconds()", "getUTCMilliseconds()")}}.</p>
+
+<p>Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, <code>setUTCSeconds()</code> пробує оновити інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 100 в якості <code>secondsValue</code>, хвилини у об'єкті {{jsxref("Date")}} будуть збільшені на 1, а 40 буде значенням секунд.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_setUTCSeconds">Використання <code>setUTCSeconds()</code></h3>
+
+<pre class="brush: js notranslate">var theBigDay = new Date();
+theBigDay.setUTCSeconds(20);
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcseconds', 'Date.prototype.setUTCSeconds')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setUTCSeconds")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCSeconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setSeconds()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/setyear/index.html b/files/uk/web/javascript/reference/global_objects/date/setyear/index.html
new file mode 100644
index 0000000000..806d80f3d6
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/setyear/index.html
@@ -0,0 +1,74 @@
+---
+title: Date.prototype.setYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setYear
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - застарілий
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setYear
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p>Метод <strong><code>setYear()</code></strong> встановлює рік для вказаної дати згідно з місцевим часом. Оскільки <code>setYear()</code> не встановлює повне значення року ("проблема 2000 року"), він більше не використовується та був замінений на метод {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setYear(<var>yearValue</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>yearValue</code></dt>
+ <dd>Ціле число.</dd>
+</dl>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо <code>yearValue</code> є числом між 0 та 99 (включно), тоді рік для <code>dateObj</code> встановлюється як <code>1900 + yearValue</code>. Інакше, рік для <code>dateObj</code> встановлюється як <code>yearValue</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_setYear">Використання <code>setYear()</code></h3>
+
+<p>Перші два рядки встановлюють значенням року 1996. Третій встановлює рік 2000.</p>
+
+<pre class="brush: js notranslate">var theBigDay = new Date();
+
+theBigDay.setYear(96);
+theBigDay.setYear(1996);
+theBigDay.setYear(2000);
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setyear', 'Date.prototype.setYear')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setYear")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCFullYear()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/todatestring/index.html b/files/uk/web/javascript/reference/global_objects/date/todatestring/index.html
new file mode 100644
index 0000000000..385c08865c
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/todatestring/index.html
@@ -0,0 +1,81 @@
+---
+title: Date.prototype.toDateString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toDateString
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toDateString
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>toDateString()</code></strong> повертає елементи дати об'єкта {{jsxref("Date")}}, англійською мовою, у наступному форматі, розділені пробілами:</p>
+
+<ol>
+ <li>Перші три літери назви дня тижня</li>
+ <li>Перші три літери назви місяця</li>
+ <li>Двозначний день місяця, заповнений зліва нулем за необхідності</li>
+ <li>Чотиризначне (принаймні) значення року, заповнене зліва нулями за необхідності</li>
+</ol>
+
+<p>Приклад: "Thu Jan 01 1970".</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-todatestring.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.toDateString()</code></pre>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Рядкове відображення елементів дати наданого об'єкта {{jsxref("Date")}} у читабельній формі англійською мовою.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Екземпляри {{jsxref("Date")}} відображають конкретну точку в часі. Виклик {{jsxref("Date.prototype.toString()", "toString()")}} поверне дату, відформатовану у читабельній для людини формі англійською мовою. У <a href="/uk/docs/SpiderMonkey">SpiderMonkey</a> вона складається з елементів дати (день, місяць та рік), за якими йдуть елементи часу (години, хвилини, секунди та часовий пояс). Іноді необхідно отримати рядок, що містить час; це можна зробити за допомогою методу <code>toTimeString()</code>.</p>
+
+<p>Метод <code>toDateString()</code> є особливо корисним, оскільки сумісні рушії, що реалізують <a href="/uk/docs/ECMAScript">ECMA-262</a>, можуть відрізнятись у тому, які рядки повертає метод {{jsxref("Date.prototype.toString()", "toString()")}} для об'єктів {{jsxref("Date")}}, оскільки формат є залежним від реалізації, і прості методи обрізання рядків можуть не створити сумісні результати на різних рушіях.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Базове_використання_toDateString">Базове використання <code>toDateString()</code></h3>
+
+<pre class="brush: js notranslate">var d = new Date(1993, 5, 28, 14, 39, 7);
+
+console.log(d.toString());     // виводить Mon Jun 28 1993 14:39:07 GMT+0300 (Eastern European Summer Time)
+console.log(d.toDateString()); // виводить Mon Jun 28 1993
+</pre>
+
+<div class="note">
+<p><strong>Заувага:</strong> Місяці нумеруються з 0, коли використовуються в якості аргументу {{jsxref("Date")}} (тому 0 відповідає січню, а 11 - грудню).</p>
+</div>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.todatestring', 'Date.prototype.toDateString')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toDateString")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toString()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/togmtstring/index.html b/files/uk/web/javascript/reference/global_objects/date/togmtstring/index.html
new file mode 100644
index 0000000000..a2f855e80f
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/togmtstring/index.html
@@ -0,0 +1,64 @@
+---
+title: Date.prototype.toGMTString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toGMTString
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toGMTString
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p>Метод <strong><code>toGMTString()</code></strong> перетворює дату на рядок, використовуючи Інтернет-конвенції Середнього часу за Гринвічем (англ. <em>Greenwich Mean Time, GMT</em>). Точний формат значення, що повертає <code>toGMTString()</code>, може різнитись, в залежності від платформи та переглядача, загалом, він має відображати зручний для читання рядок дати.</p>
+
+<div class="note">
+<p><strong>Заувага:</strong> метод <code>toGMTString()</code> застарів та більше не рекомендований для використання. Він залишається доступним лише для зворотної сумісності; будь ласка, використовуйте натомість {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}}.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.toGMTString()</code></pre>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Рядкове відображення наданої дати згідно з Інтернет-конвенціями Середнього часу за Гринвічем (GMT).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Простий_приклад">Простий приклад</h3>
+
+<p>У цьому прикладі метод <code>toGMTString()</code> перетворює дату на GMT (UTC) за допомогою зсуву часового поясу операційної системи та повертає рядкове значення схожої форми. Точний формат залежить від платформи.</p>
+
+<pre class="brush: js notranslate">var today = new Date();
+var str = today.toGMTString();  // не рекомендований! використовуйте toUTCString()
+
+console.log(str);               // Mon, 18 Dec 1995 17:28:35 GMT
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.togmtstring', 'Date.prototype.toGMTString')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toGMTString")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toUTCString()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/toisostring/index.html b/files/uk/web/javascript/reference/global_objects/date/toisostring/index.html
new file mode 100644
index 0000000000..c6aef43afd
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/toisostring/index.html
@@ -0,0 +1,93 @@
+---
+title: Date.prototype.toISOString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toISOString
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+  - поліфіл
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toISOString
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>toISOString()</code></strong> повертає рядок у <em>спрощеному</em> розширеному форматі ISO (<a href="https://uk.wikipedia.org/wiki/ISO_8601">ISO 8601</a>), який завжди містить 24 або 27 символів (<code><var>YYYY</var>-<var>MM</var>-<var>DD</var>T<var>HH</var>:<var>mm</var>:<var>ss.sss</var>Z</code> або <code><var>±</var><var>YYYYYY</var>-<var>MM</var>-<var>DD</var>T<var>HH</var>:<var>mm</var>:<var>ss.sss</var>Z</code>, відповідно). Часовий пояс завжди UTC з нульовим зсувом, що позначається суфіксом "<code>Z</code>".</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-toisostring.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.toISOString()</code></pre>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Рядкове представлення наданої дати у форматі <a href="https://uk.wikipedia.org/wiki/ISO_8601">ISO 8601</a> згідно зі всесвітнім часом.</p>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Цей метод був стандартизований у 5-й версії ECMA-262. Рушії, що не були оновлені, щоб підтримувати цей метод, можуть обійти його відсутність за допомогою наступного шиму:</p>
+
+<pre class="brush: js notranslate">if (!Date.prototype.toISOString) {
+  (function() {
+
+    function pad(number) {
+      if (number &lt; 10) {
+        return '0' + number;
+      }
+      return number;
+    }
+
+    Date.prototype.toISOString = function() {
+      return this.getUTCFullYear() +
+        '-' + pad(this.getUTCMonth() + 1) +
+        '-' + pad(this.getUTCDate()) +
+        'T' + pad(this.getUTCHours()) +
+        ':' + pad(this.getUTCMinutes()) +
+        ':' + pad(this.getUTCSeconds()) +
+        '.' + (this.getUTCMilliseconds() / 1000).toFixed(3).slice(2, 5) +
+        'Z';
+    };
+
+  })();
+}
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_toISOString">Використання <code>toISOString()</code></h3>
+
+<pre class="brush: js notranslate">let today = new Date('05 October 2011 14:48 UTC')
+
+console.log(today.toISOString())  // Повертає 2011-10-05T14:48:00.000Z
+</pre>
+
+<p>Наведений вище приклад використовує розбір нестандартного рядкового значення, яке, можливо, не буде коректно розібране у не Mozilla-переглядачах.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toISOString")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toUTCString()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/tojson/index.html b/files/uk/web/javascript/reference/global_objects/date/tojson/index.html
new file mode 100644
index 0000000000..6e03a8664e
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/tojson/index.html
@@ -0,0 +1,69 @@
+---
+title: Date.prototype.toJSON()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toJSON
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Дата
+  - Довідка
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toJSON
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>toJSON()</code></strong> подає об'єкт {{jsxref("Date")}} у вигляді рядка.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/date-tojson.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.toJSON()</code></pre>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>Рядок, що містить текстовий запис зазначеної дати.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Кожний об'єкт {{jsxref("Date")}} позначає певну мить у часі. Виклик <code>toJSON()</code> вертає рядок (за допомогою {{jsxref("Date.prototype.toISOString()", "toISOString()")}}), що являє собою текстовий запис дати, яку позначає об'єкт {{jsxref("Date")}}. Зазвичай цей метод вживається для перетворення об'єктів на текст упродовж серіалізації у {{Glossary("JSON")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_toJSON">Використання <code>toJSON()</code></h3>
+
+<pre class="brush: js notranslate">var jsonDate = (new Date()).toJSON();
+var backToDate = new Date(jsonDate);
+
+console.log(jsonDate); //2015-10-26T07:46:36.611Z</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Date.toJSON")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toUTCString()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/tolocaledatestring/index.html b/files/uk/web/javascript/reference/global_objects/date/tolocaledatestring/index.html
new file mode 100644
index 0000000000..6f60fe1595
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/tolocaledatestring/index.html
@@ -0,0 +1,154 @@
+---
+title: Date.prototype.toLocaleDateString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
+tags:
+  - Date
+  - JavaScript
+  - Інтернаціоналізація
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>toLocaleDateString()</code></strong> повертає рядкове представлення елементів дати у відповідності до налаштувань мови. Нові аргументи <code>locales</code> та <code>options</code> дозволяють застосункам вказувати мову, чиї правила форматування мають застосовуватись, а також дозволяють налаштовувати поведінку функції. У старших реалізаціях, що ігнорують аргументи <code>locales</code> та <code>options</code>, мовні налаштування та форма рядка, що повертається, повністю залежать від реалізації.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-tolocaledatestring.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><var>dateObj</var>.toLocaleDateString([<var>locales</var> [, <var>options</var>]])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<p>Аргументи <code>locales</code> та <code>options</code> налаштовують поведінку функції та дозволяють застосункам вказувати мову, чиї правила форматування мають застосовуватись. У тих реалізаціях, які ігнорують аргументи <code>locales</code> та <code>options</code>, локальні налаштування та форма поверненого рядка повністю залежать від реалізації.</p>
+
+<p>Дивіться <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/DateTimeFormat">конструктор <code>Intl.DateTimeFormat()</code></a>, щоб дізнатись подробиці щодо цих параметрів та їхнього використання.</p>
+
+<p>Значенням за замовчуванням для кожної властивості компонента дати-часу є {{jsxref("undefined")}}, але, якщо властивості <code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code> усі дорівнюють {{jsxref("undefined")}}, тоді <code>year</code>, <code>month</code> та <code>day</code> вважаються числовими значеннями.</p>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Рядкове відображення елементів дати наданого екземпляра {{jsxref("Global_Objects/Date", "Date")}} у відповідності до налаштувань мови.</p>
+
+<h2 id="Швидкодія">Швидкодія</h2>
+
+<p>При форматуванні великої кількості дат краще створити об'єкт {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}} та використовувати функцію, надану його властивістю {{jsxref("DateTimeFormat.prototype.format", "format")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_toLocaleDateString">Використання <code>toLocaleDateString()</code></h3>
+
+<p>При загальному використанні, без зазначення мови, повертається рядок у мовному форматі, що стоїть за замовчуванням, та з початковими параметрами.</p>
+
+<pre class="brush: js notranslate">var date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0));
+
+// toLocaleDateString() без аргументів залежить від реалізації,
+// мова та часовий пояс за замовчуванням
+console.log(date.toLocaleDateString());
+// → "12/11/2012" при використанні мови en-US з часовим поясом America/Los_Angeles
+</pre>
+
+<h3 id="Перевірка_підтримки_аргументів_locales_та_options">Перевірка підтримки аргументів <code>locales</code> та <code>options</code></h3>
+
+<p>Аргументи <code>locales</code> та <code>options</code> ще не підтримуються в усіх переглядачах. Для перевірки їхньої підтримки у реалізації можна скористатись вимогою, згідно якої недозволені мовні позначення відхиляються з винятком {{jsxref("RangeError")}}:</p>
+
+<pre class="brush: js notranslate">function toLocaleDateStringSupportsLocales() {
+  try {
+    new Date().toLocaleDateString('i');
+  } catch (e) {
+    return e.name === 'RangeError';
+  }
+  return false;
+}
+</pre>
+
+<h3 id="Використання_locales">Використання <code>locales</code></h3>
+
+<p>Цей приклад демонструє деякі варіації локалізованих форматів дат. Щоб отримати формат мови, задіяної в інтерфейсі вашого застосутку, переконайтесь, що вказали цю мову (та, можливо, кілька запасних мов) за допомогою аргументу <code>locales</code>:</p>
+
+<pre class="brush: js notranslate">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// наведені приклади припускають використання локального часового поясу для мови;
+// для US це America/Los_Angeles
+
+// В американській англійській використовується порядок місяць-день-рік
+console.log(date.toLocaleDateString('en-US'));
+// → "12/19/2012"
+
+// У британській англійській використовується порядок день-місяць-рік
+console.log(date.toLocaleDateString('en-GB'));
+// → "20/12/2012"
+
+// Корейська мова використовує порядок рік-місяць-день
+console.log(date.toLocaleDateString('ko-KR'));
+// → "2012. 12. 20."
+
+// Подія для перської, важко вручну привести дату до календаря сонячної хіджри
+console.log(date.toLocaleDateString('fa-IR'));
+// → "۱۳۹۱/۹/۳۰"
+
+// Арабська у більшості арабськомовних країн використовує справжні арабські цифри
+console.log(date.toLocaleDateString('ar-EG'));
+// → "<span dir="rtl">٢٠‏/١٢‏/٢٠١٢</span>"
+
+// для японської мови застосунки можуть використати японський календар,
+// де 2012-й був 24-м роком епохи Хейсей
+console.log(date.toLocaleDateString('ja-JP-u-ca-japanese'));
+// → "24/12/20"
+
+// при запиті мови, яка, можливо, не підтримується, наприклад,
+// балійської, додайте запасні мови, в даному випадку це індонезійська
+console.log(date.toLocaleDateString(['ban', 'id']));
+// → "20/12/2012"</pre>
+
+<h3 id="Використання_options">Використання <code>options</code></h3>
+
+<p>Результат методу <code>toLocaleDateString()</code> можна налаштувати за допомогою аргументу <code>options</code>:</p>
+
+<pre class="brush: js notranslate">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// вивести день тижня разом з довгою датою
+var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+console.log(date.toLocaleDateString('de-DE', options));
+// → "Donnerstag, 20. Dezember 2012"
+
+// застосунок може використати час UTC, так, щоб це було видно
+options.timeZone = 'UTC';
+options.timeZoneName = 'short';
+console.log(date.toLocaleDateString('en-US', options));
+// → "Thursday, December 20, 2012, GMT"
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.tolocaledatestring', 'Date.prototype.toLocaleDateString')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sup-date.prototype.tolocaledatestring', 'Date.prototype.toLocaleDateString')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toLocaleDateString")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toString()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/tolocalestring/index.html b/files/uk/web/javascript/reference/global_objects/date/tolocalestring/index.html
new file mode 100644
index 0000000000..292dc6472f
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/tolocalestring/index.html
@@ -0,0 +1,178 @@
+---
+title: Date.prototype.toLocaleString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toLocaleString
+tags:
+  - Date
+  - JavaScript
+  - Інтернаціоналізація
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleString
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>toLocaleString()</code></strong> повертає рядкове представлення дати згідно налаштувань мови.</p>
+
+<p>Нові аргументи <code><var>locales</var></code> та <code><var>options</var></code> дозволяють застосункам вказувати мову, чиї правила форматування мають застосовуватись та налаштовувати поведінку функції.</p>
+
+<p>У старших реалізаціях, які ігнорують аргументи <em><code>locales</code></em> та <em><code>options</code></em>, мовні налаштування та форма поверненого рядка повністю залежать від реалізації.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-tolocalestring.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><var>dateObj</var>.toLocaleString([<var>locales</var>[, <var>options</var>]])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<p>Аргументи <code><var>locales</var></code> та <code><var>options</var></code> налаштовують поведінку функції та дозволяють застосункам вказувати мову, чиї правила форматування мають застосовуватись. У тих реалізаціях, які ігнорують аргументи <em><code>locales</code></em> та <em><code>options</code></em>, мовні налаштування та форма поверненого рядка повністю залежать від реалізації.</p>
+
+<p>Дивіться конструктор {{jsxref("DateTimeFormat/DateTimeFormat", "Intl.DateTimeFormat()")}}, щоб дізнатись подробиці щодо цих параметрів та їхнього використання.</p>
+
+<p>Значенням за замовчуванням для кожної властивості компонента дати-часу є {{jsxref("undefined")}}. Але, якщо властивості <code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code> усі дорівнюють {{jsxref("undefined")}}, тоді <code>year</code>, <code>month</code>, та <code>day</code> вважаються числовими значеннями.</p>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Рядкове представлення наданої дати згідно правил встановленої мови.</p>
+
+<h2 id="Швидкодія">Швидкодія</h2>
+
+<p>При форматуванні великої кількості дат краще створити об'єкт {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}} та використовувати функцію, надану його властивістю {{jsxref("DateTimeFormat.prototype.format", "format")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_toLocaleString">Використання toLocaleString()</h3>
+
+<p>При загальному використанні, без зазначення мови, повертається рядок у мовному форматі, що стоїть за замовчуванням, та з початковими параметрами.</p>
+
+<pre class="brush: js notranslate">let date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0));
+
+// toLocaleString() без аргументів залежить від реалізації,
+// мова та часовий пояс за замовчуванням
+console.log(date.toLocaleString());
+// → "12/11/2012, 7:00:00 PM" при використанні мови en-US з часовим поясом America/Los_Angeles
+</pre>
+
+<h3 id="Перевірка_підтримки_аргументів_locales_та_options">Перевірка підтримки аргументів locales та options</h3>
+
+<p>Аргументи <code><var>locales</var></code> та <code><var>options</var></code> ще не підтримуються в усіх переглядачах. Для перевірки їхньої підтримки у реалізації можна скористатись вимогою, згідно якої недозволені мовні позначення відхиляються з винятком {{jsxref("RangeError")}}:</p>
+
+<pre class="brush: js notranslate">function toLocaleStringSupportsLocales() {
+  try {
+    new Date().toLocaleString('i');
+  } catch (e) {
+    return e instanceof RangeError;
+  }
+  return false;
+}
+</pre>
+
+<h3 id="Використання_locales">Використання locales</h3>
+
+<p>Цей приклад демонструє деякі варіації локалізованих форматів дати та часу. Щоб отримати формат мови, задіяної в інтерфейсі вашого застосутку, переконайтесь, що вказали цю мову (та, можливо, кілька запасних мов) за допомогою аргументу <code><var>locales</var></code>:</p>
+
+<pre class="brush: js notranslate">let date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// наведені приклади припускають використання локального часового поясу для мови;
+// для US це America/Los_Angeles
+
+// американська англійська використовує порядок місяць-день-рік та 12-годинний формат часу з AM/PM
+console.log(date.toLocaleString('en-US'));
+// → "12/19/2012, 7:00:00 PM"
+
+// британська англійська використовує порядок день-місяць-рік та 24-годинний формат часу без AM/PM
+console.log(date.toLocaleString('en-GB'));
+// → "20/12/2012 03:00:00"
+
+// корейська мова використовує порядок рік-місяць-день та 12-годинний формат часу з AM/PM
+console.log(date.toLocaleString('ko-KR'));
+// → "2012. 12. 20. 오후 12:00:00"
+
+// арабська у більшості арабськомовних країн використовує справжні арабські цифри
+console.log(date.toLocaleString('ar-EG'));
+// → "<span dir="rtl">٢٠‏/١٢‏/٢٠١٢ ٥:٠٠:٠٠ ص</span>"
+
+// для японської мови застосунки можуть використати японський календар,
+// де 2012-й був 24-м роком епохи Хейсей
+console.log(date.toLocaleString('ja-JP-u-ca-japanese'));
+// → "24/12/20 12:00:00"
+
+// При запиті мови, яка, можливо, не підтримується, наприклад
+// балійської, додайте запасні мови (в даному випадку це індонезійська)
+console.log(date.toLocaleString(['ban', 'id']));
+// → "20/12/2012 11.00.00"</pre>
+
+<h3 id="Використання_options">Використання options</h3>
+
+<p>Результат методу <code>toLocaleString()</code> можна налаштувати за допомогою аргументу <code><var>options</var></code>:</p>
+
+<pre class="brush: js notranslate">let date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// вивести день тижня разом з довгою датою
+let options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+
+console.log(date.toLocaleString('de-DE', options));
+// → "Donnerstag, 20. Dezember 2012"
+
+// застосунок може використати час UTC, так, щоб це було видно
+options.timeZone = 'UTC';
+options.timeZoneName = 'short';
+
+console.log(date.toLocaleString('en-US', options));
+// → "Thursday, December 20, 2012, GMT"
+
+// іноді навіть в американській англійській потрібен 24-годинний час
+console.log(date.toLocaleString('en-US', { hour12: false }));
+// → "12/19/2012, 19:00:00"
+</pre>
+
+<h3 id="Уникайте_порівнювати_відформатовану_дату_зі_статичними_значеннями">Уникайте порівнювати відформатовану дату зі статичними значеннями</h3>
+
+<p>Як правило, відформатовані значення, що повертає метод <code>toLocaleString()</code>, сумісні між собою. Однак, це може змінитись у майбутньому, і не гарантовано для усіх мов; варіації у форматах виводу визначаються дизайном та дозволені специфікацією.</p>
+
+<p>З найбільш помітного, переглядачі IE та Edge вставляють двонаправлені керівні символи навколо дат, щоб виведений текст правильно поєднувався з іншим текстом.</p>
+
+<p>З цієї причини ви не можете гарантовано порівняти результати <code>toLocaleString()</code> зі статичним значенням:</p>
+
+<pre class="brush: js; example-bad notranslate">"1/1/2019, 01:00:00" === new Date("2019-01-01T01:00:00Z").toLocaleString("en-US");
+// true у Firefox та інших
+// false у IE та Edge</pre>
+
+<div class="blockIndicator note">
+<p><strong>Заувага</strong>: Більше подробиць та прикладів дивіться у цьому <a href="https://stackoverflow.com/questions/25574963/ies-tolocalestring-has-strange-characters-in-results">обговоренні на StackOverflow</a>.</p>
+</div>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleString')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sup-date.prototype.tolocalestring', 'Date.prototype.toLocaleString')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toLocaleString")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toString()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/tolocaletimestring/index.html b/files/uk/web/javascript/reference/global_objects/date/tolocaletimestring/index.html
new file mode 100644
index 0000000000..b94070a1fd
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/tolocaletimestring/index.html
@@ -0,0 +1,152 @@
+---
+title: Date.prototype.toLocaleTimeString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString
+tags:
+  - Date
+  - JavaScript
+  - Інтернаціоналізація
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>toLocaleTimeString()</code></strong> повертає рядкове представлення елементів часу наданої дати згідно налаштувань мови. Нові аргументи <code>locales</code> та <code>options</code> дозволяють застосункам вказувати мову, чиї правила форматування мають застосовуватись, а також дозволяють налаштовувати поведінку функції. У старших реалізаціях, що ігнорують аргументи <code>locales</code> та <code>options</code>, мовні налаштування та форма рядка, що повертається, повністю залежать від реалізації.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-tolocaletimestring.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.toLocaleTimeString([<var>locales[, </var><var>options</var>]])</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<p>Аргументи <code>locales</code> та <code>options</code> налаштовують поведінку функції та дозволяють застосункам вказувати мову, чиї правила форматування мають застосовуватись. У тих реалізаціях, які ігнорують аргументи <code>locales</code> та <code>options</code>, мовні налаштування та форма поверненого рядка повністю залежать від реалізації.</p>
+
+<p>Дивіться конструктор {{jsxref("Intl/DateTimeFormat/DateTimeFormat", "Intl.DateTimeFormat()")}}, щоб дізнатись подробиці щодо цих параметрів та їхнього використання.</p>
+
+<p>Значенням за замовчуванням для кожної властивості компонента дати-часу є <a href="https://wiki.developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>, але, якщо властивості <code>hour</code>, <code>minute</code>, <code>second</code> усі дорівнюють {{jsxref("undefined")}}, тоді <code>hour</code>, <code>minute</code> та <code>second</code> вважаються числовими значеннями.</p>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Рядкове відображення елементів часу наданого екземпляра {{jsxref("Global_Objects/Date", "Date")}} згідно правил встановленої мови.</p>
+
+<h2 id="Швидкодія">Швидкодія</h2>
+
+<p>При форматуванні великої кількості дат краще створити об'єкт {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}} та використовувати функцію, надану його властивістю {{jsxref("DateTimeFormat.prototype.format", "format")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_toLocaleTimeString">Використання toLocaleTimeString()</h3>
+
+<p>При загальному використанні, без зазначення мови, повертається рядок у мовному форматі, що стоїть за замовчуванням, та з початковими параметрами.</p>
+
+<pre class="brush: js notranslate">var date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0));
+
+// toLocaleTimeString() без аргументів залежить від реалізації,
+// мова та часовий пояс за замовчуванням
+console.log(date.toLocaleTimeString());
+// → "7:00:00 PM" при використанні мови en-US з часовим поясом America/Los_Angeles
+</pre>
+
+<h3 id="Перевірка_підтримки_аргументів_locales_та_options">Перевірка підтримки аргументів locales та options</h3>
+
+<p>Аргументи <code>locales</code> та <code>options</code> ще не підтримуються в усіх переглядачах. Для перевірки їхньої підтримки у реалізації можна скористатись вимогою, згідно якої недозволені мовні позначення відхиляються з винятком {{jsxref("RangeError")}}:</p>
+
+<pre class="brush: js notranslate">function toLocaleTimeStringSupportsLocales() {
+  try {
+    new Date().toLocaleTimeString('i');
+  } catch (e) {
+    return e​.name === 'RangeError';
+  }
+  return false;
+}
+</pre>
+
+<h3 id="Використання_locales">Використання locales</h3>
+
+<p>Цей приклад демонструє деякі варіації локалізованих форматів часу. Щоб отримати формат мови, задіяної в інтерфейсі вашого застосутку, переконайтесь, що вказали цю мову (та, можливо, кілька запасних мов) за допомогою аргументу <code>locales</code>:</p>
+
+<pre class="brush: js notranslate">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// наведені приклади припускають використання локального часового поясу для мови;
+// для US це America/Los_Angeles
+
+// американська англійська використовує 12-годинний формат часу з AM/PM
+console.log(date.toLocaleTimeString('en-US'));
+// → "7:00:00 PM"
+
+// британська англійська використовує 24-годинний часовий формат без AM/PM
+console.log(date.toLocaleTimeString('en-GB'));
+// → "03:00:00"
+
+// корейська мова використовує 12-годинний часовий формат з AM/PM
+console.log(date.toLocaleTimeString('ko-KR'));
+// → "오후 12:00:00"
+
+// арабська у більшості арабськомовних країн використовує справжні арабські цифри
+console.log(date.toLocaleTimeString('ar-EG'));
+// → "<span dir="rtl">٧:٠٠:٠٠ م</span>"
+
+// при запиті мови, яка, можливо, не підтримується, наприклад,
+// балійської, додайте запасні мови, в даному випадку це індонезійська
+console.log(date.toLocaleTimeString(['ban', 'id']));
+// → "11.00.00"
+</pre>
+
+<h3 id="Використання_options">Використання options</h3>
+
+<p>Результат методу <code>toLocaleTimeString()</code> можна налаштувати за допомогою аргументу <code>options</code>:</p>
+
+<pre class="brush: js notranslate">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// застосунок може використати час UTC, так, щоб це було видно
+var options = { timeZone: 'UTC', timeZoneName: 'short' };
+console.log(date.toLocaleTimeString('en-US', options));
+// → "3:00:00 AM UTC"
+
+// іноді навіть американській англійській потрібен 24-годинний час
+console.log(date.toLocaleTimeString('en-US', { hour12: false }));
+// → "19:00:00"
+
+// показати лише години та хвилини, використати options та мову за замовчуванням - передати порожній масив
+console.log(date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
+// → "20:01"
+
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.tolocaletimestring', 'Date.prototype.toLocaleTimeString')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sup-date.prototype.tolocaletimestring', 'Date.prototype.toLocaleTimeString')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Date.toLocaleTimeString")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toString()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/tosource/index.html b/files/uk/web/javascript/reference/global_objects/date/tosource/index.html
new file mode 100644
index 0000000000..1ac73ec7a3
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/tosource/index.html
@@ -0,0 +1,49 @@
+---
+title: Date.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toSource
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toSource
+---
+<div>{{JSRef}} {{obsolete_header}}</div>
+
+<p>Метод <strong><code>toSource()</code></strong> повертає рядкове представлення першокоду об'єкта.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><var>dateObj</var>.toSource()
+Date.toSource()</pre>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Рядкове представлення першокоду наданого об'єкта {{jsxref("Global_Objects/Date", "Date")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Вбудована_функція">Вбудована функція</h3>
+
+<p>Для вбудованого об'єкта {{jsxref("Date")}} <code>toSource()</code> повертає наступний рядок, який вказує, що першокод недоступний:</p>
+
+<pre class="brush: js notranslate">function Date() {
+    [native code]
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Не є частиною жодного стандарту.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toSource")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/tostring/index.html b/files/uk/web/javascript/reference/global_objects/date/tostring/index.html
new file mode 100644
index 0000000000..c3c2c9a0b8
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/tostring/index.html
@@ -0,0 +1,110 @@
+---
+title: Date.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toString
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toString
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>toString()</code></strong> повертає рядкове представлення вказаного об'єкта {{jsxref("Date")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-tostring.html","shorter")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><var>dateObj</var>.toString()</pre>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Рядкове представлення наданої дати.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Екземпляри {{jsxref("Date")}} успадковують метод <code>toString()</code> від {{jsxref("Date.prototype")}}, а не від {{jsxref("Object.prototype")}}. <code>Date.prototype.toString()</code> повертає рядкове представлення об'єкта Date у форматі, вказаному у ECMA-262, який можна підсумувати наступним чином:</p>
+
+<ul>
+ <li>День тижня: 3 літери англійської назви дня тижня, наприклад, "Sat"</li>
+ <li>пробіл</li>
+ <li>Місяць: 3 літери англійської назви місяця, наприклад, "Sep"</li>
+ <li>пробіл</li>
+ <li>День: 2-значний день місяця, наприклад, "01"</li>
+ <li>пробіл</li>
+ <li>Рік: 4-значний рік, наприклад, "2018"</li>
+ <li>пробіл</li>
+ <li>Година: 2-значна година, наприклад, "14"</li>
+ <li>двокрапка</li>
+ <li>Хвилини: 2-значні хвилини, наприклад, "53"</li>
+ <li>двокрапка</li>
+ <li>Секунди: 2-значні секунди, наприклад, "26"</li>
+ <li>пробіл</li>
+ <li>Рядок "GMT"</li>
+ <li>Знак зсуву часового поясу, один з:
+  <ul>
+   <li>"+" для додатного зсуву (0 чи більше)</li>
+   <li>"-" для від'ємного зсуву (менше нуля)</li>
+  </ul>
+ </li>
+ <li>Двозначний зсув годин, наприклад, "14"</li>
+ <li>Двозначний зсув хвилин, наприклад, "00"</li>
+ <li>Необов'язково, ім'я часового поясу, що складається з:
+  <ul>
+   <li>пробілу</li>
+   <li>Лівої дужки, тобто, "("</li>
+   <li>Рядкового відображення часового поясу, що залежить від реалізації, і може бути скороченням повної назви (не існує стандарту для імен чи скорочень часових поясів), наприклад, "Line Islands Time" або "LINT"</li>
+   <li>Правої дужки, тобто, ")"</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Приклад: "Sat Sep 01 2018 14:53:26 GMT+1400 (LINT)"</p>
+
+<p>До появи ECMAScript 2018 (версії 9) формат рядка, який повертав метод <code>Date.prototype.toString</code>, залежав від реалізації. Тому не можна покладатися на те, що рядок буде у вказаному форматі.</p>
+
+<p>Метод <code>toString()</code> автоматично викликається, коли дата має бути передана у вигляді текстового значення, наприклад, <code>console.log(new Date())</code>, або коли дата використовується в об'єднанні з рядком, як ось <code>var today = 'Сьогодні ' + new Date()</code>.</p>
+
+<p><code>toString()</code> є загальним методом, він не вимагає, щоб його <code>this</code> був екземпляром {{jsxref("Date")}}. Однак, він повинен мати внутрішню властивість <code>[[TimeValue]]</code>, яку неможливо створити за допомогою вбудованих методів javascript, тому він обмежений використанням з екземплярами {{jsxref("Date")}}. Якщо метод викликається не на екземплярі Date, викидається {{jsxref("TypeError")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_toString">Використання <code>toString()</code></h3>
+
+<p>Наступний код присвоює значення <code>toString()</code> об'єкта {{jsxref("Date")}} змінній <code>myVar</code>:</p>
+
+<pre class="brush: js notranslate">var x = new Date();
+var myVar = x.toString(); // присвоює рядкове значення myVar у такому форматі:
+                          // Mon Sep 08 1998 14:36:22 GMT-0700 (PDT)
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.tostring', 'Date.prototype.toString')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toString")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+ <li>{{jsxref("Date.prototype.toDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/totimestring/index.html b/files/uk/web/javascript/reference/global_objects/date/totimestring/index.html
new file mode 100644
index 0000000000..40f658864c
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/totimestring/index.html
@@ -0,0 +1,68 @@
+---
+title: Date.prototype.toTimeString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toTimeString
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toTimeString
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>toTimeString()</code></strong> повертає елементи часу об'єкта {{jsxref("Date")}} у зручній для читання формі англійською мовою.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-totimestring.html","shorter")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.toTimeString()</code></pre>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Рядкове відображення елементів часу наданої дати у зручній для читання формі англійською мовою.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Екземпляри {{jsxref("Date")}} відображають конкретну точку в часі. Виклик {{jsxref("Date.prototype.toString()", "toString()")}} поверне дату, відформатовану у зручній для читання формі англійською мовою. У <a href="/uk/docs/SpiderMonkey">SpiderMonkey</a> вона складається з елементів дати (день, місяць та рік), за якими йдуть елементи часу (години, хвилини, секунди та часовий пояс). Іноді необхідно отримати рядок, що містить час; це можна зробити за допомогою методу <code>toTimeString()</code>.</p>
+
+<p>Метод <code>toTimeString()</code> є особливо корисним, оскільки сумісні рушії, що реалізують <a href="/uk/docs/ECMAScript">ECMA-262</a> можуть відрізнятись у тому, які рядки повертає метод {{jsxref("Date.prototype.toString()", "toString()")}} для об'єктів {{jsxref("Date")}}, оскільки формат є залежним від реалізації, і прості методи обрізання рядків можуть не створити сумісні результати на різних рушіях.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Базове_використання_toTimeString">Базове використання <code>toTimeString()</code></h3>
+
+<pre class="brush: js notranslate">var d = new Date(1993, 6, 28, 14, 39, 7);
+
+console.log(d.toString());     // Wed Jul 28 1993 14:39:07 GMT-0600 (PDT)
+console.log(d.toTimeString()); // 14:39:07 GMT-0600 (PDT)
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toTimeString")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toString()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/toutcstring/index.html b/files/uk/web/javascript/reference/global_objects/date/toutcstring/index.html
new file mode 100644
index 0000000000..077f04aaad
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/toutcstring/index.html
@@ -0,0 +1,109 @@
+---
+title: Date.prototype.toUTCString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toUTCString
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toUTCString
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>toUTCString()</code></strong> перетворює дату на рядок, використовуючи часовий пояс UTC.</p>
+
+<p>Заснований на <a href="https://tools.ietf.org/html/rfc7231#section-7.1.1.1">rfc7231</a> та змінений згідно з <a href="https://www.ecma-international.org/ecma-262/10.0/index.html#sec-date.prototype.toutcstring">ecma-262 toUTCString</a>, він може мати від'ємні значення у <a href="https://tc39.es/ecma262/#sec-date.prototype.toutcstring">версії 2021</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-toutcstring.html","shorter")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.toUTCString()</code></pre>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Рядкове представлення наданої дати з використанням часового поясу UTC.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Значення, яке повертає <code>toUTCString()</code>, є рядком у формі <code><var>Www</var>, <var>dd</var> <var>Mmm</var> <var>yyyy</var> <var>hh</var>:<var>mm</var>:<var>ss</var> GMT</code>, де:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Рядок</th>
+   <th scope="col">Опис</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><var>Www</var></code></td>
+   <td>День тижня у вигляді трьох літер (наприклад, Sun, Mon, ...)</td>
+  </tr>
+  <tr>
+   <td><code><var>dd</var></code></td>
+   <td>Двозначний день місяця, з першим нулем, якщо необхідно</td>
+  </tr>
+  <tr>
+   <td><code><var>Mmm</var></code></td>
+   <td>Місяць у вигляді трьох літер (наприклад, Jan, Feb, ...)</td>
+  </tr>
+  <tr>
+   <td><code><var>yyyy</var></code></td>
+   <td>Рік, чотири або більше цифр, з першими нулями, якщо необхідно</td>
+  </tr>
+  <tr>
+   <td><code><var>hh</var></code></td>
+   <td>Години, дві цифри з першим нулем, якщо необхідно</td>
+  </tr>
+  <tr>
+   <td><code><var>mm</var></code></td>
+   <td>Хвилини, дві цифри з першим нулем, якщо необхідно</td>
+  </tr>
+  <tr>
+   <td><code><var>ss</var></code></td>
+   <td>Секунди, дві цифри з першим нулем, якщо необхідно</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>До появи ECMAScript 2018, формат значення, яке поверталось, залежив від платформи. Найпоширенішим варіантом була дата у форматі RFC-1123, що є трохи оновленою версією дати у форматі RFC-822.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_toUTCString">Використання <code>toUTCString()</code></h3>
+
+<pre class="brush: js notranslate">let today = new Date('Wed, 14 Jun 2017 00:00:00 PDT');
+let UTCstring = today.toUTCString(); // Wed, 14 Jun 2017 07:00:00 GMT
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toUTCString")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toISOString()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/utc/index.html b/files/uk/web/javascript/reference/global_objects/date/utc/index.html
new file mode 100644
index 0000000000..6abb78eb6d
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/utc/index.html
@@ -0,0 +1,153 @@
+---
+title: Date.UTC()
+slug: Web/JavaScript/Reference/Global_Objects/Date/UTC
+tags:
+  - UTC
+  - Дата
+  - Довідка
+  - Час Unix
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/UTC
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>Date.UTC()</code></strong> приймає той самий перелік параметрів, що й найдовша форма конструктора {{jsxref("Date")}}, та повертає кількість мілісекунд між 00:00:00 першого січня 1970 року та миттю у часі (за UTC), що відповідає переданим параметрам.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-utc.html")}}</div>
+
+<p class="hidden">Першокод цього прикладу збережено у репозиторії GitHub. Якщо ви хочете долучитися до створення чи поліпшення таких прикладів, пропонуйте нам свої зміни до репозиторію <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">Date.UTC(<var>year</var>, <var>month</var>[, <var>day</var>[, <var>hour</var>[, <var>minute</var>[, <var>second</var>[, <var>millisecond</var>]]]]])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>year</code></dt>
+ <dd>Ціле число, що позначає рік. Значення в проміжку 0-99 позначає рік 20-го сторіччя (1900-1999), а всі решта значень — як є (абсолютне значення).</dd>
+ <dt><code>month</code></dt>
+ <dd>Ціле число між 0 та 11, позначає місяць.</dd>
+ <dt><code>day </code>{{optional_inline}}</dt>
+ <dd>Ціле число між 1 та 31, позначає день місяця.</dd>
+ <dt><code>hour </code>{{optional_inline}}</dt>
+ <dd>Ціле число між 0 та 23, позначає годину.</dd>
+ <dt><code>minute </code>{{optional_inline}}</dt>
+ <dd>Ціле число між 0 та 59, позначає хвилини.</dd>
+ <dt><code>second </code>{{optional_inline}}</dt>
+ <dd>Ціле число між 0 та 59, позначає секунди.</dd>
+ <dt><code>millisecond </code>{{optional_inline}}</dt>
+ <dd>Ціле число між 0 та 999, позначає мілісекунди.</dd>
+</dl>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Ціле число, що являє собою кількість мілісекунд між 00:00:00 першого січня 1970 року та моментом часу (за UTC), що відповідає переданим параметрам.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод приймає параметри, що позначають окремі складники дати й часу, та повертає кількість мілісекунд між північчю (00:00:00) першого січня 1970-го року за UTC та вказаною миттю у часі. Всі дати раніше за точку відліку (перше січня 1970-го року) позначаються від'ємними числами.</p>
+
+<p>Зауважте, що лік місяців (другий параметр метода) починається з нуля, а не з одиниці.</p>
+
+<p>Вказуйте повний рік від Різдва Христового; наприклад 1998. Якщо вказано значання між 0 та 99, його буде перетворено на рік 20-го сторіччя (себто 1900 + year); наприклад, 91 позначає 1991 рік.</p>
+
+<p>Між методом <code>UTC()</code> та конструктором <code>{{jsxref("Date")}}</code> є дві відмінності:</p>
+
+<ul>
+ <li><code>Date.UTC()</code> використовує всесвітній (UTC), а не місцевий час;</li>
+ <li><code>Date.UTC()</code> повертає числове значення, а не об'єкт <code>{{jsxref("Date")}}</code>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Заувага:</strong> Якщо значення одного чи декількох вказаних складників виходить за прийнятні межі (скажімо, вказано 13-й місяць чи 70 хвилин), буде скориговано суміжні складники. Себто виклик <code>Date.UTC(2013, 13, 1)</code> є тотожним до <code>Date.UTC(2014, 1, 1)</code> і так само відповідає даті <code>2014-02-01T00:00:00Z</code>. Те саме стосується інших значень: виразам <code>Date.UTC(2013, 2, 1, 0, 70)</code> та <code>Date.UTC(2013, 2, 1, 1, 10)</code> однаково відповідає дата <code>2013-03-01T01:10:00Z</code>.</p>
+</div>
+
+<p>Позаяк <code>UTC()</code> є статичним методом класу <code>{{jsxref("Date")}}</code>, він зазвичай викликається через ім'я класу — <code>Date.UTC()</code>, а не через наявний об'єкт.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_Date.UTC">Використання <code>Date.UTC()</code></h3>
+
+<p>Наведений приклад створює об'єкт типу <code>{{jsxref("Date")}}</code> зі складників дати й часу, що тлумачаться як UTC, а не місцевий час:</p>
+
+<pre class="brush:js notranslate">var independenceDateAsMs = Date.UTC(91, 7, 24, 9, 0, 0);
+console.log(independenceDateAsMs);  // 683024400000
+
+var independenceDate = new Date(independenceDateAsMs);
+console.log(independenceDate);  // Sat Aug 24 1991 12:00:00 GMT+0300 (EEST)
+</pre>
+
+<p>Такий приклад засвідчує, що дати раніше точки відліку (північ першого січня 1970-го року) позначаються від'ємними числами:</p>
+
+<pre class="brush: js notranslate">var ms = Date.UTC(1969, 11, 31, 23, 59, 59, 999);
+console.log(ms);  // -1</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.utc', 'Date.UTC')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.utc', 'Date.UTC')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.4.3', 'Date.UTC')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкова виознака. Запроваджено у JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Date.UTC")}}</p>
+
+<h2 id="Сумісність">Сумісність</h2>
+
+<h3 id="Відсутність_обовязкових_аргументів_Date.UTC">Відсутність обов'язкових аргументів <code>Date.UTC</code></h3>
+
+<p>За відсутності одного чи обох обов'язкових аргументів метод <code>Date.UTC</code> має повертати <code>{{Glossary("NaN")}}</code>. Така поведінка визначена специфікацією ECMAScript 2017. Web-рушії, які не підтримували цю поведінку, було оновлено (див. {{bug(1050755)}}, <a href="https://github.com/tc39/ecma262/pull/642">ecma-262 #642</a>).</p>
+
+<pre class="brush: js notranslate">Date.UTC();
+Date.UTC(1);
+
+// Safari: NaN
+// Chrome/Opera/V8: NaN
+
+// Firefox &lt;54: non-NaN
+// Firefox 54+: NaN
+
+// IE: non-NaN
+// Edge: NaN
+</pre>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.parse()")}}</li>
+</ul>
+
+<h2 id="Дізнатись_більше">Дізнатись більше</h2>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "UTC", "Всесвітній координований час (UTC)")}} у Вікіпедії</li>
+ <li>{{Interwiki("wikipedia", "Час_Unix", "Час Unix")}} у Вікіпедії</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/date/valueof/index.html b/files/uk/web/javascript/reference/global_objects/date/valueof/index.html
new file mode 100644
index 0000000000..6a8f4682d5
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/date/valueof/index.html
@@ -0,0 +1,65 @@
+---
+title: Date.prototype.valueOf()
+slug: Web/JavaScript/Reference/Global_Objects/Date/valueOf
+tags:
+  - Date
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/valueOf
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>valueOf()</code></strong> повертає просте значення об'єкта {{jsxref("Date")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-valueof.html")}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.valueOf()</code></pre>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та наданою датою.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>valueOf()</code> повертає просте значення об'єкта {{jsxref("Date")}} у вигляді числового типу, кількість мілісекунд від опівночі 01 січня, 1970 року за UTC.</p>
+
+<p>Цей метод функціонально еквівалентний методу {{jsxref("Date.prototype.getTime()")}}.</p>
+
+<p>Цей метод зазвичай викликається внутрішньо у JavaScript, а не явно у коді.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_valueOf">Використання <code>valueOf()</code></h3>
+
+<pre class="brush: js notranslate">var x = new Date(56, 6, 17);
+var myVar = x.valueOf();      // присвоює -424713600000 змінній myVar
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.valueof', 'Date.prototype.valueOf')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.valueOf")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.valueOf()")}}</li>
+ <li>{{jsxref("Date.prototype.getTime()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/error/columnnumber/index.html b/files/uk/web/javascript/reference/global_objects/error/columnnumber/index.html
new file mode 100644
index 0000000000..966facf100
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/error/columnnumber/index.html
@@ -0,0 +1,44 @@
+---
+title: Error.prototype.columnNumber
+slug: Web/JavaScript/Reference/Global_Objects/Error/columnNumber
+tags:
+  - Error
+  - JavaScript
+  - Властивість
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/columnNumber
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Властивість <code><strong>columnNumber</strong></code> містить номер стовпця у рядку файла, який спричинив помилку.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_columnNumber">Використання <code>columnNumber</code></h3>
+
+<pre class="brush: js">var e = new Error('Could not parse input');
+throw e;
+console.log(e.columnNumber) // 0
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Не є частиною жодних специфікацій. Нестандартна властивість.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("javascript.builtins.Error.columnNumber")}}</p>
+</div>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype.stack")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.lineNumber")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/error/error/index.html b/files/uk/web/javascript/reference/global_objects/error/error/index.html
new file mode 100644
index 0000000000..4f16905d5a
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/error/error/index.html
@@ -0,0 +1,63 @@
+---
+title: Конструктор Error()
+slug: Web/JavaScript/Reference/Global_Objects/Error/Error
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/Error
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Конструктор <strong><code>Error</code></strong> створює об'єкт помилки.</span></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">new Error([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>message</var></code>{{Optional_Inline}}</dt>
+ <dd>Зрозумілий людині опис помилки.</dd>
+ <dt><code><var>fileName</var></code> {{Non-standard_Inline}}{{Optional_Inline}}</dt>
+ <dd>Значення властивості <code><var>fileName</var></code> створеного об'єкта <code>Error</code>. За замовчуванням містить ім'я файлу, код з якого запустив конструктор <code>Error()</code>.</dd>
+ <dt><code><var>lineNumber</var></code> {{Non-standard_Inline}}{{Optional_Inline}}</dt>
+ <dd>Значення властивості <code><var>lineNumber</var></code> створеного об'єкта <code>Error</code>. За замовчуванням містить номер рядка, де відбувся виклик конструктора <code>Error()</code>.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Коли <code>Error</code> використовується як функція -- без  {{JSxRef("Operators/new", "new")}}, він повертає об'єкт <code>Error</code>. Таким чином, простий виклик <code>Error</code> матиме той самий результат, що й конструювання об'єкта <code>Error</code> через ключове слово <code>new</code>.</p>
+
+<pre class="brush: js;">// це...
+const x = Error('Я був створений викликом функції!')
+
+​​​​// ...має ту саму функціональність, що й це:
+const y = new Error('Я був зконструйований ключовим словом "new"!')</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-error-constructor', 'Error constructor')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Error.Error")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{JSxRef("Statements/throw", "throw")}}</li>
+ <li>{{JSxRef("Statements/try...catch", "try...catch")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/error/filename/index.html b/files/uk/web/javascript/reference/global_objects/error/filename/index.html
new file mode 100644
index 0000000000..046a345326
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/error/filename/index.html
@@ -0,0 +1,47 @@
+---
+title: Error.prototype.fileName
+slug: Web/JavaScript/Reference/Global_Objects/Error/fileName
+tags:
+  - Error
+  - JavaScript
+  - Властивість
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/fileName
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Властивість <code><strong>fileName</strong></code> містить шлях до файлу, який спричинив помилку.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Ця нестандартна властивість містить шлях до файлу, який спричинив дану помилку. При виклику в контексті відладчика, наприклад, у інструментах розробника Firefox, повертається "debugger eval code".</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_fileName">Використання <code>fileName</code></h3>
+
+<pre class="brush: js">var e = new Error('Could not parse input');
+throw e;
+// e.fileName може виглядати як "file:///C:/example.html"
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Не є частиною жодних специфікацій. Нестандартна властивість.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("javascript.builtins.Error.fileName")}}</p>
+</div>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype.stack")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.columnNumber")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.lineNumber")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/error/index.html b/files/uk/web/javascript/reference/global_objects/error/index.html
new file mode 100644
index 0000000000..9df5ca1354
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/error/index.html
@@ -0,0 +1,216 @@
+---
+title: Error
+slug: Web/JavaScript/Reference/Global_Objects/Error
+tags:
+  - Error
+  - JavaScript
+  - помилка
+translation_of: Web/JavaScript/Reference/Global_Objects/Error
+---
+<div>{{JSRef}}</div>
+
+<p>Об'єкти <code>Error</code> викидаються, коли виникає помилка виконання. Об'єкт <code>Error</code> також можна використовувати як базовий об'єкт для винятків, створених користувачем. Дивіться нижче стандартні вбудовані типи помилок.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Помилки виконання спричиняють створення й викидання нових об'єктів <code>Error</code>.</p>
+
+<h3 id="Типи_помилок">Типи помилок</h3>
+
+<p>Окрім загального конструктора <code>Error</code>, у JavaScript існують сім інших базових конструкторів помилок. Щодо обробки винятків на боці клієнта, дивіться розділ <a href="/uk/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Exception_handling_statements">Оператори обробки винятків</a>.</p>
+
+<dl>
+ <dt>{{jsxref("EvalError")}}</dt>
+ <dd>Створює екземпляр помилки, що виникає під час використання глобальної функції {{jsxref("eval", "eval()")}}.</dd>
+ <dt>{{jsxref("InternalError")}} {{non-standard_inline}}</dt>
+ <dd>Створює екземпляр помилки, що виникає, коли викидається внутрішня помилка рушія JavaScript. Наприклад, "too much recursion".</dd>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Створює екземпляр помилки, що виникає, коли значення чисельної змінної або параметра знаходиться поза межами дозволеного діапазону.</dd>
+ <dt>{{jsxref("ReferenceError")}}</dt>
+ <dd>Створює екземпляр помилки, що виникає при зверненні за недійсним посиланням.</dd>
+ <dt>{{jsxref("SyntaxError")}}</dt>
+ <dd>Створює екземпляр синтаксичної помилки, яка виникає під час аналізу коду у {{jsxref("eval", "eval()")}}.</dd>
+ <dt>{{jsxref("TypeError")}}</dt>
+ <dd>Створює екземпляр помилки, що виникає при використанні змінної або параметра невідповідного типу.</dd>
+ <dt>{{jsxref("URIError")}}</dt>
+ <dd>Створює екземпляр помилки, що виникає, коли до {{jsxref("encodeURI", "encodeURI()")}} або {{jsxref("decodeURI", "decodeURI()")}} передаються неправильні параметри.</dd>
+</dl>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Error/Error">Error()</a></dt>
+ <dd>Створює об'єкти <code>Error</code>.</dd>
+</dl>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt><code>Error.prototype</code></dt>
+ <dd>Дозволяє додавати властивості до екземплярів <code>Error</code>.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<p>Глобальний об'єкт <code>Error</code> не має власних методів, однак, він успадковує деякі методи через ланцюжок прототипів.</p>
+
+<h3 id="Нестандартні_методи">Нестандартні методи</h3>
+
+<p>{{Non-standard_Header}}</p>
+
+<dl>
+ <dt>{{JSxRef("Error.captureStackTrace()")}} {{Non-standard_Inline}}</dt>
+ <dd>Функція <strong>V8</strong>, яка створює властивість {{JSxRef("Error.prototype.stack", "stack")}} на екземплярі Error.</dd>
+</dl>
+
+<h2 id="Екземпляри_Error">Екземпляри Error</h2>
+
+<div>{{page('uk/docs/Web/JavaScript/Reference/Global_Objects/Error/prototype', 'Опис')}}</div>
+
+<h3 id="Властивості_2">Властивості</h3>
+
+<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/Error/prototype', 'Властивості')}}</div>
+
+<h3 id="Методи_2">Методи</h3>
+
+<div>{{page('uk/docs/Web/JavaScript/Reference/Global_Objects/Error/prototype', 'Методи')}}</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Викидання_загальної_помилки">Викидання загальної помилки</h3>
+
+<p>Зазвичай ви створюєте об'єкт <code>Error</code> для того, щоб викинути його з допомогою ключового слова {{jsxref("Statements/throw", "throw")}}. Ви можете обробити помилку, використовуючи конструкцію {{jsxref("Statements/try...catch", "try...catch")}}:</p>
+
+<pre class="brush: js">try {
+  throw new Error('Ой-ой!');
+} catch (e) {
+  console.error(e.name + ': ' + e.message);
+}
+</pre>
+
+<h3 id="Обробка_специфічної_помилки">Обробка специфічної помилки</h3>
+
+<p>Ви можете обробляти лише окремі типи помилок, перевіряючи тип помилки з допомогою властивості {{jsxref("Object.prototype.constructor", "constructor")}} або, якщо ви пишете для сучасних рушіїв JavaScript, ключовим словом {{jsxref("Operators/instanceof", "instanceof")}}:</p>
+
+<pre class="brush: js">try {
+  foo.bar();
+} catch (e) {
+  if (e instanceof EvalError) {
+    console.error(e.name + ': ' + e.message);
+  } else if (e instanceof RangeError) {
+    console.error(e.name + ': ' + e.message);
+  }
+  // ... і т.д.
+}
+</pre>
+
+<h3 id="Користувацькі_типи_помилок">Користувацькі типи помилок</h3>
+
+<p>Ви, можливо, захочете визначити свої власні типи помилок, успадкувавши їх від <code>Error</code>, щоб мати можливість викидати новий об'єкт помилки через <code>throw new MyError()</code> та використовувати <code>instanceof MyError</code> для перевірки типу помилки у обробнику винятків. В результаті отримуємо більш чистий та послідовний код обробки помилок. </p>
+
+<p>Дивіться всебічну дискусію <a href="http://stackoverflow.com/questions/1382107/whats-a-good-way-to-extend-error-in-javascript">"What's a good way to extend Error in JavaScript?"</a> на StackOverflow.</p>
+
+<h4 id="Користувацький_клас_помилки_у_ES6">Користувацький клас помилки у ES6</h4>
+
+<div class="warning">
+<p>Babel до 7-ї версії може працювати з методами класу <code>CustomError</code>, але тільки якщо вони оголошені через  <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty()</a>. Інакше старі версії Babel та інші транспілятори не зможуть коректно обробити наступний код без <a href="https://github.com/loganfsmyth/babel-plugin-transform-builtin-extend">додаткових налаштувань</a>.</p>
+</div>
+
+<div class="note">
+<p>Деякі веб-переглядачі включають конструктор <code>CustomError</code> у трасування стеку при використанні класів ES2015.</p>
+</div>
+
+<pre class="brush: js">class CustomError extends Error {
+  constructor(foo = 'bar', ...params) {
+    // Передати залишкові параметри (в тому числі параметри розробника) до батьківського конструктора
+    super(...params)
+
+    // Підтримує правильне трасування стеку в точці, де була викинута помилка (працює лише на V8)
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, CustomError);
+    }
+
+    this.name = 'CustomError'
+    // Користувацька інформація для налагодження
+    this.foo = foo
+    this.date = new Date()
+  }
+}
+
+try {
+  throw new CustomError('baz', 'bazMessage')
+} catch(e) {
+  console.error(e.name)    //CustomError
+  console.error(e.foo)     //baz
+  console.error(e.message) //bazMessage
+  console.error(e.stack)   //stacktrace
+}</pre>
+
+<h4 id="Користувацький_обєкт_помилки_у_ES5">Користувацький об'єкт помилки у ES5</h4>
+
+<div class="warning">
+<p><strong>Всі</strong> веб-переглядачі включають конструктор CustomError у трасування стеку при використанні прототипного оголошення.</p>
+</div>
+
+<pre class="brush: js">function CustomError(foo, message, fileName, lineNumber) {
+  var instance = new Error(message, fileName, lineNumber);
+  instance.name = 'CustomError';
+  instance.foo = foo;
+  Object.setPrototypeOf(instance, Object.getPrototypeOf(this));
+  if (Error.captureStackTrace) {
+    Error.captureStackTrace(instance, CustomError);
+  }
+  return instance;
+}
+
+CustomError.prototype = Object.create(Error.prototype, {
+  constructor: {
+    value: Error,
+    enumerable: false,
+    writable: true,
+    configurable: true
+  }
+});
+
+if (Object.setPrototypeOf){
+  Object.setPrototypeOf(CustomError, Error);
+} else {
+  CustomError.__proto__ = Error;
+}
+
+
+try {
+  throw new CustomError('baz', 'bazMessage');
+} catch(e){
+  console.error(e.name); //CustomError
+  console.error(e.foo); //baz
+  console.error(e.message); //bazMessage
+}</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-error-objects', 'Error')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Error")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Statements/throw", "throw")}}</li>
+ <li>{{jsxref("Statements/try...catch", "try...catch")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/error/linenumber/index.html b/files/uk/web/javascript/reference/global_objects/error/linenumber/index.html
new file mode 100644
index 0000000000..e539638c46
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/error/linenumber/index.html
@@ -0,0 +1,56 @@
+---
+title: Error.prototype.lineNumber
+slug: Web/JavaScript/Reference/Global_Objects/Error/lineNumber
+tags:
+  - Error
+  - JavaScript
+  - Prototype
+  - Властивість
+  - помилка
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/lineNumber
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Властивість <code><strong>lineNumber</strong></code> містить номер рядка у файлі, що спричинив помилку.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_lineNumber">Використання <code>lineNumber</code></h3>
+
+<pre class="brush: js">var e = new Error('Could not parse input');
+throw e;
+console.log(e.lineNumber) // 2
+</pre>
+
+<h3 id="Альтернативний_приклад_використання_події_error">Альтернативний приклад використання події <code>error</code> </h3>
+
+<pre class="brush: js">window.addEventListener('error', function(e) {
+  console.log(e.lineNumber); // 5
+});
+var e = new Error('Could not parse input');
+throw e;
+</pre>
+
+<p>Це нестандартна властивість, їй бракує всебічної підтримки. Дивіться таблицю сумісності з браузерами нижче.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Не є частиною жодних специфікацій. Нестандартна властивість.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("javascript.builtins.Error.lineNumber")}}</p>
+</div>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype.stack")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.columnNumber")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/error/message/index.html b/files/uk/web/javascript/reference/global_objects/error/message/index.html
new file mode 100644
index 0000000000..318f8eb532
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/error/message/index.html
@@ -0,0 +1,57 @@
+---
+title: Error.prototype.message
+slug: Web/JavaScript/Reference/Global_Objects/Error/message
+tags:
+  - Error
+  - JavaScript
+  - Властивість
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/message
+---
+<div>{{JSRef}}</div>
+
+<p>Властивість <code><strong>message</strong></code> - це зрозумілий людині опис помилки.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Ця властивість містить стислий опис помилки, якщо він був наданий. Рушій <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> активно використовує властивість <code>message</code> для винятків. Властивість <code>message</code> у поєднанні з властивістю {{jsxref("Error.prototype.name", "name")}} використовується методом {{jsxref("Error.prototype.toString()")}} для створення рядкового представлення помилки.</p>
+
+<p>За замовчуванням, властивість <code>message</code> є порожнім рядком, але ця поведінка може бути заміщена, наприклад, передачею повідомлення першим аргументом у {{jsxref("Error", "конструктор Error")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Викидання_користувацької_помилки">Викидання користувацької помилки</h3>
+
+<pre class="brush: js">var e = new Error('Could not parse input');
+// e.message дорівнює 'Could not parse input'
+throw e;
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-error.prototype.message', 'Error.prototype.message')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("javascript.builtins.Error.message")}}</p>
+</div>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype.name")}}</li>
+ <li>{{jsxref("Error.prototype.toString()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/error/name/index.html b/files/uk/web/javascript/reference/global_objects/error/name/index.html
new file mode 100644
index 0000000000..bf868bf365
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/error/name/index.html
@@ -0,0 +1,57 @@
+---
+title: Error.prototype.name
+slug: Web/JavaScript/Reference/Global_Objects/Error/name
+tags:
+  - Error
+  - JavaScript
+  - Властивість
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/name
+---
+<div>{{JSRef}}</div>
+
+<p>Властивість <code><strong>name</strong></code> містить ім'я типу помилки. Початкове значення дорівнює "Error".</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>За замовчуванням екземплярам {{jsxref("Error")}} надається ім'я "Error". Властивість <code>name</code>, на додаток до властивості {{jsxref("Error.prototype.message", "message")}}, використовується методом {{jsxref("Error.prototype.toString()")}} для створення рядкового представлення помилки.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Викидання_користувацької_помилки">Викидання користувацької помилки</h3>
+
+<pre class="brush: js">var e = new Error('Malformed input'); // e.name дорівнює 'Error'
+
+e.name = 'ParseError';
+throw e;
+// e.toString() поверне 'ParseError: Malformed input'
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-error.prototype.name', 'Error.prototype.name')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("javascript.builtins.Error.name")}}</p>
+</div>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype.message")}}</li>
+ <li>{{jsxref("Error.prototype.toString()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/error/prototype/index.html b/files/uk/web/javascript/reference/global_objects/error/prototype/index.html
new file mode 100644
index 0000000000..64c7b5eff5
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/error/prototype/index.html
@@ -0,0 +1,114 @@
+---
+title: Error.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Error/prototype
+tags:
+  - Error
+  - JavaScript
+  - Властивість
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Error
+---
+<div>{{JSRef}}</div>
+
+<p>Властивість <code><strong>Error.prototype</strong></code> є прототипом для конструктора {{jsxref("Error")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Всі екземпляри {{jsxref("Error")}} та екземпляри {{jsxref("Global_Objects/Error", "базових конструкторів помилок", "#Типи_помилок", 1)}} успадковуються від <code>Error.prototype</code>. Як в усіх функціях-конструкторах, ви можете використовувати прототип конструктора, щоб додавати властивості чи методи до усіх екземплярів, створених цим конструктором. </p>
+
+<h2 id="Властивості">Властивості</h2>
+
+<h3 id="Стандартні_властивості">Стандартні властивості</h3>
+
+<dl>
+ <dt><code>Error.prototype.constructor</code></dt>
+ <dd>Функція, яка створила прототип екземпляра.</dd>
+ <dt>{{jsxref("Error.prototype.message")}}</dt>
+ <dd>Повідомлення помилки.</dd>
+ <dt>{{jsxref("Error.prototype.name")}}</dt>
+ <dd>Ім'я помилки.</dd>
+</dl>
+
+<h3 id="Спеціальні_розширення">Спеціальні розширення</h3>
+
+<p>{{non-standard_header}}</p>
+
+<h4 id="Microsoft">Microsoft</h4>
+
+<dl>
+ <dt><code><a href="/uk/docs/Web/JavaScript/Microsoft_Extensions/Error.description">Error.description</a></code></dt>
+ <dd>Опис помилки. Властивість схожа на {{jsxref("Error.prototype.message", "message")}}.</dd>
+ <dt><code><a href="/uk/docs/Web/JavaScript/Microsoft_Extensions/Error.number">Error.number</a></code></dt>
+ <dd>Номер помилки.</dd>
+</dl>
+
+<h4 id="Mozilla">Mozilla</h4>
+
+<dl>
+ <dt>{{jsxref("Error.prototype.fileName")}}</dt>
+ <dd>Шлях до файлу, що спричинив помилку.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber")}}</dt>
+ <dd>Номер рядка у файлі, що спричинив помилку.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber")}}</dt>
+ <dd>Номер стовпця у файлі, де виникла помилка.</dd>
+ <dt>{{jsxref("Error.prototype.stack")}}</dt>
+ <dd>Трасування стеку.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<dl>
+ <dt>{{jsxref("Error.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Повертає рядок з кодом, що спричинить створення заданого об'єкта {{jsxref("Error")}}; ви можете використати це значення, щоб створити новий об'єкт. Заміщує метод {{jsxref("Object.prototype.toSource()")}}.</dd>
+ <dt>{{jsxref("Error.prototype.toString()")}}</dt>
+ <dd>Повертає рядок, що представляє заданий об'єкт. Заміщує метод {{jsxref("Object.prototype.toString()")}}.</dd>
+</dl>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення Реалізовано у JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.3.1', 'Error')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-error.prototype', 'Error')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-error.prototype', 'Error')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Error.prototype")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("Object.prototype")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/error/stack/index.html b/files/uk/web/javascript/reference/global_objects/error/stack/index.html
new file mode 100644
index 0000000000..04bb1ff642
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/error/stack/index.html
@@ -0,0 +1,125 @@
+---
+title: Error.prototype.stack
+slug: Web/JavaScript/Reference/Global_Objects/Error/Stack
+tags:
+  - Error
+  - JavaScript
+  - Prototype
+  - Властивість
+  - нестандартна
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/Stack
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Нестандартна властивість <strong><code>stack</code></strong> об'єктів {{jsxref("Error")}} надає звіт про те, які функції були викликані, в якому порядку, з якого рядка файлу та з якими аргументами. Текстовий рядок стеку ведеться з останніх викликів до більш ранніх, і аж до початкового виклику у глобальній області видимості.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Кожний крок буде відокремлений новим рядком, де перша частина є іменем функції (якщо це не виклик з глобальної області видимості), далі через символ (@) розташування файлу (окрім випадку, коли функція є конструктором помилки під час викидання помилки), двокрапка та, якщо доступне розташування файлу, номер рядка. (Зауважте, що об'єкт {{jsxref("Error")}} також має властивості <code>fileName</code>, <code>lineNumber</code> та <code>columnNumber</code> для отримання цієї інформації про помилку, що викидається (але тільки про помилку, а не стек її викликів).)</p>
+
+<p>Зауважте, що це формат, який використовується у Firefox. Не існує стандартного формату. Однак, Safari 6+ та Opera 12- використовують дуже схожий формат. Переглядачі на рушії JavaScript V8 (такі, як Chrome, Opera 15+, Android Browser) та IE10+, з іншого боку, використовують інший формат (дивіться <a href="https://web.archive.org/web/20140210004225/http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx">архів документів MSDN щодо error.stack</a>).</p>
+
+<p><strong>Значення аргументів у стеку</strong>: До версії Firefox 14 після імені функції були б записані значення аргументів, перетворені у рядок, у круглих дужках, одразу перед знаком (<code>@</code>). І якщо об'єкти (або масиви) були б виведені у вигляді <code>"[object Object]"</code>, і, таким чином, не могли бути перетворені назад у справжні об'єкти, то скалярні величини можна відновити (хоча, можливо — це досі доступно у Firefox 14 — легше використовувати <code>arguments.callee.caller.arguments</code>, а ім'я функції можна отримати через <code>arguments.callee.caller.name</code>). <code>"undefined"</code> записується як <code>"(void 0)"</code>. Зауважте, що, якщо рядкові аргументи були передані з такими символами як <code>"@"</code>, <code>"("</code>, <code>")"</code> (або вони присутні в іменах файлів), на них не можна покладатись для розбиття рядка на окремі частини. Таким чином, у Firefox 14 та пізніших версіях це вже не є такою проблемою.</p>
+
+<p>Різні веб-переглядачі встановлюють це значення в різні моменти. Наприклад, Firefox встановлює його при створенні об'єкта {{jsxref("Error")}}, в той час як PhantomJS встановлює його лише при викиданні об'єкта {{jsxref("Error")}}, а реалізація <a href="https://web.archive.org/web/20140210004225/http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx">у архівних документах MSDN</a>, схоже, співпадає з PhantomJS.</p>
+
+<h2 id="Приклад">Приклад</h2>
+
+<p>Наступна HTML-розмітка демонструє використання властивості <code>stack</code> .</p>
+
+<pre class="brush: html">&lt;!DOCTYPE HTML&gt;
+&lt;meta charset="UTF-8"&gt;
+&lt;title&gt;Приклад трасування стеку&lt;/title&gt;
+&lt;body&gt;
+&lt;script&gt;
+function trace() {
+  try {
+    throw new Error('myError');
+  }
+  catch(e) {
+    alert(e.stack);
+  }
+}
+function b() {
+  trace();
+}
+function a() {
+  b(3, 4, '\n\n', undefined, {});
+}
+a('перший виклик, першийАргумент');
+&lt;/script&gt;
+</pre>
+
+<p>За умови, що наведена розмітка збережена як <code>C:\example.html</code> у файловій системі Windows, вона створить діалогове вікно оповіщення з наступним текстом:</p>
+
+<p>Firefox 30 та новіші містять номер стовпця:</p>
+
+<pre><samp>trace@file:///C:/example.html:9:17
+b@file:///C:/example.html:16:13
+a@file:///C:/example.html:19:13
+@file:///C:/example.html:21:9</samp></pre>
+
+<p>З Firefox 14 по Firefox 29:</p>
+
+<pre><samp>trace@file:///C:/example.html:9
+b@file:///C:/example.html:16
+a@file:///C:/example.html:19
+@file:///C:/example.html:21</samp></pre>
+
+<p>Firefox 13 та старші натомість виведуть наступний текст:</p>
+
+<pre><samp>Error("myError")@:0
+trace()@file:///C:/example.html:9
+b(3,4,"\n\n",(void 0),[object Object])@file:///C:/example.html:16
+a("перший виклик, першийАргумент")@file:///C:/example.html:19
+@file:///C:/example.html:21</samp></pre>
+
+<h3 id="Стек_коду_у_eval_та_Function">Стек коду у eval() та Function()</h3>
+
+<p>Починаючи з Firefox 30, стек помилки коду у викликах <code>Function()</code> та <code>eval()</code> тепер створює звіти з більш детальною інформацією щодо номеру рядків та стовпчиків у цих викликах. Виклики Function позначаються записом <code>"&gt; Function"</code>, а виклики eval записом <code>"&gt; eval"</code>.</p>
+
+<pre class="brush: js">try {
+  new Function('throw new Error()')();
+} catch (e) {
+  console.log(e.stack);
+}
+
+// anonymous@file:///C:/example.html line 7 &gt; Function:1:1
+// @file:///C:/example.html:7:6
+
+
+try {
+  eval("eval('FAIL')");
+} catch (x) {
+  console.log(x.stack);
+}
+
+// @file:///C:/example.html line 7 &gt; eval line 1 &gt; eval:1:1
+// @file:///C:/example.html line 7 &gt; eval:1:1
+// @file:///C:/example.html:7:6
+</pre>
+
+<p>Ви також можете скористатися директивою <code>//# sourceURL</code>, щоб присвоїти ім'я коду, що передається. Дивіться також <a href="/uk/docs/Tools/Debugger/How_to/Debug_eval_sources">Відладка коду у eval() та Function()</a> у статтях на сторінці <a href="/uk/docs/Tools/Debugger">Debugger</a>, а також цей <a href="http://fitzgeraldnick.com/weblog/59/">пост</a>.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Не є частиною жодних специфікацій. Нестандартна властивість.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("javascript.builtins.Error.stack")}}</p>
+</div>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Components.stack">Components.stack</a></li>
+ <li>External projects: <a class="link-https" href="https://github.com/csnover/TraceKit/">TraceKit</a> and <a class="link-https" href="https://github.com/eriwen/javascript-stacktrace">javascript-stacktrace</a></li>
+ <li>MSDN: <a class="external" href="http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx" title="http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx">error.stack</a> docs</li>
+ <li><a href="https://github.com/v8/v8/wiki/Stack%20Trace%20API">Overview of the V8 JavaScript stack trace API</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/error/tosource/index.html b/files/uk/web/javascript/reference/global_objects/error/tosource/index.html
new file mode 100644
index 0000000000..7c86a836c7
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/error/tosource/index.html
@@ -0,0 +1,59 @@
+---
+title: Error.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Error/toSource
+tags:
+  - Error
+  - JavaScript
+  - Prototype
+  - метод
+  - помилка
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/toSource
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Метод toSource() повертає код, який може створити таку саму помилку.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>e</var>.toSource()</pre>
+
+<h3 id="Значення_яке_повертається">Значення, яке повертається</h3>
+
+<p>Текстовий рядок з кодом, що викликає помилку.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Виклик методу <code>toSource</code> екземпляра {{jsxref("Error")}} (або інших <em><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Error#Типи_помилок">базових типів</a></em>) поверне текстовий рядок з кодом для створення помилки. Цей рядок може бути обчислений для створення (приблизно) такого самого об'єкта. Звісно, рядок з кодом відповідає структурі конструктора {{jsxref("Error")}}. Для прикладу:</p>
+
+<pre class="brush: js">(new<em>name</em>(<em>message</em> ,<em>fileName</em>,<em>lineNumber</em>))
+</pre>
+
+<p>де наведені атрибути відповідають аналогічним властивостям екземпляра помилки.</p>
+
+<div class="note">
+<p><strong>Примітка:</strong> Зауважте, що властивості, які використовуються методом <code>toSource</code> при створенні текстового рядка, можуть змінюватися і не точно відображатимуть функцію, що використовувалась для створення екземпляра помилки, або ім'я файлу, або номер рядка, де виникла помилка.</p>
+</div>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Не є частиною жодних специфікацій. Реалізовано у JavaScript 1.3.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("javascript.builtins.Error.toSource")}}</p>
+</div>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype.fileName")}}</li>
+ <li>{{jsxref("Error.prototype.lineNumber")}}</li>
+ <li>{{jsxref("Error.prototype.message")}}</li>
+ <li>{{jsxref("Error.prototype.name")}}</li>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/error/tostring/index.html b/files/uk/web/javascript/reference/global_objects/error/tostring/index.html
new file mode 100644
index 0000000000..f8e12300e8
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/error/tostring/index.html
@@ -0,0 +1,98 @@
+---
+title: Error.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Error/toString
+tags:
+  - Error
+  - JavaScript
+  - метод
+  - помилка
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/toString
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>toString()</strong></code> повертає текстовий рядок, що представляє заданий об'єкт {{jsxref("Error")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>e</var>.toString()</code></pre>
+
+<h3 id="Значення_яке_повертається">Значення, яке повертається</h3>
+
+<p>Текстовий рядок, що представляє об'єкт {{jsxref("Error")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Об'єкт {{jsxref("Error")}} заміщує метод {{jsxref("Object.prototype.toString()")}}, що успадковується усіма об'єктами. Його семантика наступна (за умови, що {{jsxref("Object")}} та {{jsxref("String")}} мають свої початкові значення):</p>
+
+<pre class="brush: js">Error.prototype.toString = function() {
+  'use strict';
+
+  var obj = Object(this);
+  if (obj !== this) {
+    throw new TypeError();
+  }
+
+  var name = this.name;
+  name = (name === undefined) ? 'Error' : String(name);
+
+  var msg = this.message;
+  msg = (msg === undefined) ? '' : String(msg);
+
+  if (name === '') {
+    return msg;
+  }
+  if (msg === '') {
+    return name;
+  }
+
+  return name + ': ' + msg;
+};
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">var e = new Error('fatal error');
+console.log(e.toString()); // 'Error: fatal error'
+
+e.name = undefined;
+console.log(e.toString()); // 'Error: fatal error'
+
+e.name = '';
+console.log(e.toString()); // 'fatal error'
+
+e.message = undefined;
+console.log(e.toString()); // ''
+
+e.name = 'привіт';
+console.log(e.toString()); // 'привіт'
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-error.prototype.tostring', 'Error.prototype.toString')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("javascript.builtins.Error.toString")}}</p>
+</div>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/eval/index.html b/files/uk/web/javascript/reference/global_objects/eval/index.html
new file mode 100644
index 0000000000..8f9fae1236
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/eval/index.html
@@ -0,0 +1,323 @@
+---
+title: eval()
+slug: Web/JavaScript/Reference/Global_Objects/eval
+tags:
+  - JavaScript
+  - eval
+  - Обчислення JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/eval
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>Функція <code><strong>eval()</strong></code> обчислює код JavaScript, представлений у вигляді рядка.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Застереження:</strong> Виконання коду JavaScript з текстового рядка - це неймовірний ризик для безпеки. Зловмиснику занадто легко запустити який завгодно код, коли ви використовуєте <code>eval()</code>. Дивіться <a href="#Ніколи_не_використовуйте_eval!">Ніколи не використовуйте eval()!</a> нижче.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-eval.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>eval(<em>string</em>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>string</code></dt>
+ <dd>Рядок, що відображає вираз, інструкцію чи послідовність інструкцій JavaScript. Вираз може містити змінні та властивості існуючих об'єктів.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Значення, отримане в результаті обчислення наданого коду. Якщо значення порожнє, повертається {{jsxref("undefined")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Функція <code>eval()</code> є методом глобального об'єкта.</p>
+
+<p>Аргументом функції <code>eval()</code> є рядок. Якщо у рядку представлений вираз, <code>eval()</code> обчислює цей вираз. Якщо у аргументі представлено одну чи більше інструкцій JavaScript, <code>eval()</code> обчислює ці інструкції. Не викликайте <code>eval()</code> для обчислення арифметичного виразу; JavaScript обчислює арифметичні вирази автоматично.</p>
+
+<p>Якщо ви створили арифметичний вираз у вигляді рядка, ви можете скористатись <code>eval()</code>, щоб обчислити його пізніше. Припустимо, ви маєте змінну <code>x</code>. Ви можете відкласти обчислення виразу, що містить <code>x</code>, присвоївши рядкове значення виразу, скажімо, "<code>3 * x + 2</code>", змінній, а потім викликати <code>eval()</code> пізніше у скрипті.</p>
+
+<p>Якщо аргумент <code>eval()</code> не є рядком, <code>eval()</code> повертає аргумент без змін. У наступному прикладі вказано конструктор <code>String</code>, і <code>eval()</code> повертає об'єкт <code>String</code>, а не обчислений рядок.</p>
+
+<pre class="brush:js">eval(new String('2 + 2')); // повертає об'єкт String, який містить "2 + 2"
+eval('2 + 2');             // повертає 4
+</pre>
+
+<p>Ви можете обійти це обмеження загальним методом, використавши <code>toString()</code>.</p>
+
+<pre class="brush:js">var expression = new String('2 + 2');
+eval(expression.toString());            // повертає 4
+</pre>
+
+<p>Якщо ви використовуєте функцію <code>eval</code> <em>опосередковано</em>, викликаючи її через інше посилання, ніж <code>eval</code>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-10.4.2">згідно ECMAScript 5</a>, вона працює у глобальній області видимості, а не у локальній. Це означає, для прикладу, що оголошення функції створюють глобальні функції, і що обчислюваний код не має доступу до локальних змінних у області видимості, з якої він викликається.</p>
+
+<pre class="brush:js">function test() {
+  var x = 2, y = 4;
+  console.log(eval('x + y'));  // Прямий виклик, використовує локальну область видимості, результат 6
+  var geval = eval; // еквівалентно виклику eval у глобальній області видимості
+  console.log(geval('x + y')); // Непрямий виклик, використовує глобальну область видимості, викидає ReferenceError, бо `x` undefined
+  (0, eval)('x + y'); // інший приклад непрямого виклику
+}
+</pre>
+
+<h2 id="Ніколи_не_використовуйте_eval!">Ніколи не використовуйте <code>eval</code>!</h2>
+
+<p><code>eval()</code> - небезпечна функція, яка виконує переданий код з привілеями того, хто викликає функцію. Якщо ви запустите <code>eval()</code> з рядком, який міг бути уражений зловмисником, ви можете в результаті запустити шкідливий код на машині користувача з дозволами вашої сторінки / розширення. Ще важливіше, що код третьої сторони бачить область видимості, у якій було запущено <code>eval()</code>, що може призвести до можливих атак, способами, до яких схожий {{jsxref("Global_Objects/Function", "конструктор Function")}} не сприйнятливий.</p>
+
+<p>Також метод <code>eval()</code> повільніший, ніж його альтернативи, оскільки йому доводиться викликати інтерпретатор JS, в той час, як багато інших конструкцій оптимізуються сучасними рушіями JS.</p>
+
+<p>Додатково, сучасні інтерпретатори JavaScript перетворюють код JavaScript на машинний код. Це означає, що будь-яке йменування змінних знищується. Тому будь-яке використання eval змусить переглядач виконувати довгі, затратні пошуки імен змінних, щоб зрозуміти, де ця змінна існує у машинному коді, та присвоїти їй значення. До того ж, до змінної можуть бути внесені нові зміни через <code>eval()</code>, наприклад, зміна типу цієї змінної, змушуючи переглядач переобчислювати весь згенерований машинний код, щоб надолужити зміни. Однак, на щастя, існує дуже гарна альтернатива eval: просто використовуйте <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function">window.Function</a>. Приклад того, як можна перетворити код з використанням шкідливого <code>eval()</code> на код з використанням <code>Function</code><code>()</code>, дивіться нижче.</p>
+
+<p>Поганий код з eval:</p>
+
+<pre class="brush:js">function looseJsonParse(obj){
+    return eval(obj);
+}
+console.log(looseJsonParse(
+   "{a:(4-1), b:function(){}, c:new Date()}"
+))
+</pre>
+
+<p>Покращений код без eval:</p>
+
+<pre class="brush:js">function looseJsonParse(obj){
+    return Function('"use strict";return (' + obj + ')')();
+}
+console.log(looseJsonParse(
+   "{a:(4-1), b:function(){}, c:new Date()}"
+))
+</pre>
+
+<p>Порівнюючи ці два фрагменти коду, можна подумати, що вони працюють однаково, але не забувайте: код з eval набагато повільніший. Зверніть увагу на <code>c: new Date()</code> у обчислюваному об'єкті. У функції без eval об'єкт обчислюється у глобальній області видимості, тому переглядач може спокійно припускати, що <code>Date</code> посилається на <code>window.Date</code>, а не на локальну змінну на ім'я <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Date</span></font>. Але у коді, що використовує <code>eval()</code>, переглядач не може цього припускати, бо що, як ваш код виглядає наступним чином:</p>
+
+<pre class="brush:js">function Date(n){
+    return ["Понеділок","Вівторок","Середа","Четвер","П'ятниця","Субота","Неділя"][n%7 || 0];
+}
+function looseJsonParse(obj){
+    return eval(obj);
+}
+console.log(looseJsonParse(
+   "{a:(4-1), b:function(){}, c:new Date()}"
+))
+</pre>
+
+<p>Таким чином, у версії з <code>eval()</code> переглядач змушений запускати затратний пошук, щоб перевірити, чи немає десь локальних змінних на ім'я <code>Date()</code>. Це страшенно неефективно, у порівнянні з <code>Function()</code>.</p>
+
+<p>У цих обставинах, що як вам дійсно потрібно, щоб функція <code>Date</code> могла викликатися з коду всередині <code>Function()</code>? Чи доведеться відступити та повернутися до <code>eval()</code>? Ні! Нізащо. Натомість, спробуйте наступний підхід.</p>
+
+<pre class="brush:js">function Date(n){
+    return ["Понеділок","Вівторок","Середа","Четвер","П'ятниця","Субота","Неділя"][n%7 || 0];
+}
+function runCodeWithDateFunction(obj){
+    return Function('"use strict";return (' + obj + ')')()(
+        Date
+    );
+}
+console.log(runCodeWithDateFunction(
+   "function(Date){ return Date(5) }"
+))
+</pre>
+
+<p>Наведений код може виглядати неефективно повільним через потрійну вкладеність функції, але проаналізуємо переваги наведеного вище методу:</p>
+
+<ul>
+ <li>Він дозволяє мініфікувати код у рядку, переданому до <code>runCodeWithDateFunction</code>.</li>
+ <li>Затрати на виклик функції мінімальні, що разом з набагато меншим за розміром кодом є однозначною перевагою</li>
+ <li><code>Function()</code> легше дозволяє покращити продуктивність вашого коду через <code>"use strict";</code></li>
+ <li>Код не використовує <code>eval()</code>, що робить його на порядки швидшим.</li>
+</ul>
+
+<p>І нарешті, розглянемо мініфікацію. Використовуючи <code>Function()</code>, як це показано вище, ви можете мініфікувати рядок коду, що передається у <code>runCodeWithDateFunction</code> набагато ефективніше, тому що імена аргументів функції також можуть бути мініфіковані, як показано у мініфікованому коді нижче.</p>
+
+<pre class="brush:js">console.log(Function('"use strict";return(function(a){return a(5)})')()(function(a){
+return"Понеділок Вівторок Середа Четвер П'ятниця Субота Неділя".split(" ")[a%7||0]}));</pre>
+
+<p>Існують також інші безпечніші (та швидші!) альтернативи <code>eval()</code> чи <code>Function()</code> для типових випадків використання.</p>
+
+<h3 id="Звернення_до_властивостей">Звернення до властивостей</h3>
+
+<p>Не слід використовувати <code>eval()</code> для перетворення імен властивостей на властивості. Розглянемо наступний приклад, де властивість об'єкта, до якої звертаються, невідома до початку виконання коду. Це можна зробити через eval:</p>
+
+<pre class="brush:js">var obj = { a: 20, b: 30 };
+var propName = getPropName();  // повертає "a" або "b"
+
+eval( 'var result = obj.' + propName );
+</pre>
+
+<p>Однак, метод <code>eval()</code> тут не обов'язковий. Насправді, його використання тут не рекомендоване. Натомість, скористайтесь <a href="/uk/docs/Web/JavaScript/Reference/Operators/Property_Accessors" title="JavaScript/Reference/Operators/Member_Operators">зверненням до властивостей</a>, це набагато швидше та безпечніше:</p>
+
+<pre class="brush:js">var obj = { a: 20, b: 30 };
+var propName = getPropName();  // повертає "a" або "b"
+var result = obj[ propName ];  //  obj[ "a" ] - це те саме, що й obj.a</pre>
+
+<p>Ви навіть можете скористатись цим методом, щоб звернутись до вкладених властивостей. З <code>eval()</code> це виглядало б наступним чином:</p>
+
+<pre class="brush:js">var obj = {a: {b: {c: 0}}};
+var propPath = getPropPath();  // повертає, наприклад, "a.b.c"
+
+eval( 'var result = obj.' + propPath );
+</pre>
+
+<p>Уникнути <code>eval()</code> тут можна, розбивши шлях до властивості на масив та пройшовши у циклі через властивості:</p>
+
+<pre class="brush:js">function getDescendantProp(obj, desc) {
+  var arr = desc.split('.');
+  while (arr.length) {
+    obj = obj[arr.shift()];
+  }
+  return obj;
+}
+
+var obj = {a: {b: {c: 0}}};
+var propPath = getPropPath();  // повертає, наприклад, "a.b.c"
+var result = getDescendantProp(obj, propPath);</pre>
+
+<p>Призначення властивості таким чином працює схоже:</p>
+
+<pre class="brush:js">function setDescendantProp(obj, desc, value) {
+  var arr = desc.split('.');
+  while (arr.length &gt; 1) {
+    obj = obj[arr.shift()];
+  }
+  return obj[arr[0]] = value;
+}
+
+var obj = {a: {b: {c: 0}}};
+var propPath = getPropPath();  // повертає, наприклад, "a.b.c"
+var result = setDescendantProp(obj, propPath, 1);  // obj.a.b.c тепер дорівнюватиме 1</pre>
+
+<h3 id="Використовуйте_функції_замість_обчислення_фрагментів_коду">Використовуйте функції замість обчислення фрагментів коду</h3>
+
+<p>JavaScript має <a class="external" href="https://uk.wikipedia.org/wiki/%D0%A4%D1%83%D0%BD%D0%BA%D1%86%D1%96%D1%8F_%D0%BF%D0%B5%D1%80%D1%88%D0%BE%D0%B3%D0%BE_%D0%BA%D0%BB%D0%B0%D1%81%D1%83" title="https://uk.wikipedia.org/wiki/Функція_першого_класу">функції першого класу</a>, це означає, що ви можете передавати функції як аргументи до інших API, зберігати їх у змінних та властивостях об'єктів, і так далі. Багато API об'єктів DOM створені з метою такого використання, тому ви можете (і маєте) написати:</p>
+
+<pre class="brush: js">// замість setTimeout(" ... ", 1000) використовуйте:
+setTimeout(function() { ... }, 1000);
+
+// замість elt.setAttribute("onclick", "...") використовуйте:
+elt.addEventListener('click', function() { ... } , false); </pre>
+
+<p><a href="/uk/docs/Web/JavaScript/Closures" title="JavaScript/Guide/Closures">Замикання</a> також корисні як спосіб створення параметризованих функцій без поєднання рядків.</p>
+
+<h3 id="Розбір_JSON_перетворення_рядків_на_обєкти_JavaScript">Розбір JSON (перетворення рядків на об'єкти JavaScript)</h3>
+
+<p>Якщо рядок, для якого ви викликаєте <code>eval()</code>, містить дані (наприклад, масив: <code>"[1, 2, 3]"</code>), як протилежність коду, вам слід розглянути перехід на <a href="/uk/docs/Glossary/JSON" title="JSON">JSON</a>, це дозволить рядку використовувати підмножину синтаксису JavaScript для представлення даних. Дивіться також <a href="/uk/docs/Downloading_JSON_and_JavaScript_in_extensions" title="Downloading_JSON_and_JavaScript_in_extensions">Завантаження JSON та JavaScript у розширеннях</a>.</p>
+
+<p>Зауважте, що, оскільки синтаксис JSON є обмеженим, у порівнянні з синтаксисом JavaScript, багато з чинних літералів JavaScript не розбиратимуться як JSON. Наприклад, прикінцеві коми не дозволені у JSON, а імена властивостей (ключі) у об'єкті повинні бути заключені у лапки. Обов'язково використовуйте серіалізатор JSON для створення рядків, які пізніше будуть розібрані як JSON.</p>
+
+<h3 id="Передавайте_дані_замість_коду">Передавайте дані замість коду</h3>
+
+<p>Наприклад, розширення, створене для збирання вмісту веб-сторінок, може мати правила збирання, визначені у <a href="/uk/docs/Web/XPath" title="XPath">XPath</a>, замість коду JavaScript.</p>
+
+<h3 id="Запускайте_код_з_обмеженими_привілеями">Запускайте код з обмеженими привілеями</h3>
+
+<p>Якщо ви мусите запускати код, розгляньте варіант запуску з обмеженими привілеями. Ця порада стосується здебільшого розширень та XUL-застосунків, які можуть використовувати для цього <a href="/uk/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.evalInSandbox" title="Components.utils.evalInSandbox">Components.utils.evalInSandbox</a>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_eval">Використання <code>eval</code></h3>
+
+<p>У наступному коді обидві інструкції, які містять <code>eval()</code>, повертають 42. Перша обчислює рядок "<code>x + y + 1</code>"; друга обчислює рядок "<code>42</code>".</p>
+
+<pre class="brush:js">var x = 2;
+var y = 39;
+var z = '42';
+eval('x + y + 1'); // повертає 42
+eval(z);           // повертає 42
+</pre>
+
+<h3 id="Використання_eval_для_обчислення_рядка_інструкцій_JavaScript">Використання <code>eval</code> для обчислення рядка інструкцій JavaScript</h3>
+
+<p>Наступний приклад використовує <code>eval()</code>, щоб обчислити рядок <code>str</code>. Цей рядок складається з інструкцій JavaScript, які виводять повідомлення та присвоюють змінній <code>z</code> значення 42, якщо <code>x</code> дорівнює п'яти, інакше присвоюють <code>z</code> значення 0. Коли виконується друга інструкція, <code>eval()</code> спричинить виконання цих інструкцій, а також обчислить набір інструкцій та поверне значення, що було присвоєне <code>z</code>.</p>
+
+<pre class="brush:js">var x = 5;
+var str = "if (x == 5) {console.log('z дорівнює 42'); z = 42;} else z = 0;";
+
+console.log('z дорівнює ', eval(str));</pre>
+
+<p>Якщо ви визначаєте декілька значень, то повертається останнє.</p>
+
+<pre class="brush:js">var x = 5;
+var str = "if (x == 5) {console.log('z дорівнює 42'); z = 42; x = 420; } else z = 0;";
+
+console.log('x дорівнює ', eval(str)); // z дорівнює 42  x дорівнює 420
+</pre>
+
+<h3 id="Останній_вираз_обчислюється">Останній вираз обчислюється</h3>
+
+<p><code>eval()</code> повертає значення останнього обчисленого виразу.</p>
+
+<pre class="brush:js">var str = 'if ( a ) { 1 + 1; } else { 1 + 2; }';
+var a = true;
+var b = eval(str);  // повертає 2
+
+console.log('b дорівнює : ' + b);
+
+a = false;
+b = eval(str);  // повертає 3
+
+console.log('b дорівнює : ' + b);</pre>
+
+<h3 id="eval_як_функція_визначення_рядка_потребує_та_на_початку_та_в_кінці"><code>eval</code> як функція визначення рядка, потребує "(" та ")" на початку та в кінці</h3>
+
+<pre class="brush:js">var fctStr1 = 'function a() {}'
+var fctStr2 = '(function a() {})'
+var fct1 = eval(fctStr1)  // повертає undefined
+var fct2 = eval(fctStr2)  // повертає функцію
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.2.1', 'eval')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-eval-x', 'eval')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-eval-x', 'eval')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.eval")}}</p>
+
+<h2 id="Примітки_щодо_Firefox">Примітки щодо Firefox</h2>
+
+<ul>
+ <li>Історично <code>eval()</code> мав необов'язковий другий аргумент, що вказував об'єкт, в контексті якого мало виконуватись обчислення. Цей аргумент був нестандартним, і був остаточно прибраний з Firefox 4. Дивіться {{bug(531675)}}.</li>
+</ul>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/uneval", "uneval()")}}</li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Property accessors</a></li>
+ <li><a href="/uk/Add-ons/WebExtensions/Content_scripts#Using_eval()_in_content_scripts">WebExtensions: Using eval in content scripts</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/evalerror/index.html b/files/uk/web/javascript/reference/global_objects/evalerror/index.html
new file mode 100644
index 0000000000..0a6f515a8e
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/evalerror/index.html
@@ -0,0 +1,98 @@
+---
+title: EvalError
+slug: Web/JavaScript/Reference/Global_Objects/EvalError
+tags:
+  - Error
+  - EvalError
+  - JavaScript
+  - помилка
+translation_of: Web/JavaScript/Reference/Global_Objects/EvalError
+---
+<div>{{JSRef}}</div>
+
+<p>Об'єкт <strong><code>EvalError</code></strong> позначає помилку, пов'язану з використанням глобальної функції {{jsxref("Global_Objects/eval", "eval()")}}. Цей виняток більше не викидається у JavaScript, однак, об'єкт <code>EvalError</code> залишено для сумісності.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>new EvalError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Необов'язковий. Зрозумілий людині опис помилки.</dd>
+ <dt><code>fileName</code> {{non-standard_inline}}</dt>
+ <dd>Необов'язковий. Ім'я файлу, код з якого спричинив виняток.</dd>
+ <dt><code>lineNumber</code> {{non-standard_inline}}</dt>
+ <dd>Необов'язковий. Номер рядка в коді, що спричинив виняток.</dd>
+</dl>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt><code>EvalError.prototype</code></dt>
+ <dd>Дозволяє додавати властивості до об'єктів <code>EvalError</code>.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<p>Сам <code>EvalError</code> не має власних методів, але успадковує деякі методи через ланцюжок прототипів.</p>
+
+<h2 id="Екземпляри_EvalError">Екземпляри EvalError</h2>
+
+<h3 id="Властивості_2">Властивості</h3>
+
+<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/EvalError/prototype', 'Властивості')}}</div>
+
+<h3 id="Методи_2">Методи</h3>
+
+<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/EvalError/prototype', 'Методи')}}</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p><code>EvalError</code> не використовується у нинішній специфікації ECMAScript, а отже, не викидатиметься під час виконання. Однак, сам об'єкт залишається для зворотної сумісності з більш ранніми версіями специфікації.</p>
+
+<h3 id="Створення_EvalError">Створення EvalError</h3>
+
+<pre class="brush: js">try {
+  throw new EvalError('Привіт', 'someFile.js', 10);
+} catch (e) {
+  console.log(e instanceof EvalError); // true
+  console.log(e.message);              // "Привіт"
+  console.log(e.name);                 // "EvalError"
+  console.log(e.fileName);             // "someFile.js"
+  console.log(e.lineNumber);           // 10
+  console.log(e.columnNumber);         // 0
+  console.log(e.stack);                // "@Scratchpad/2:2:9\n"
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("javascript.builtins.EvalError")}}</p>
+</div>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("Global_Objects/eval", "eval()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/evalerror/prototype/index.html b/files/uk/web/javascript/reference/global_objects/evalerror/prototype/index.html
new file mode 100644
index 0000000000..e7f4230c60
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/evalerror/prototype/index.html
@@ -0,0 +1,89 @@
+---
+title: EvalError.prototype
+slug: Web/JavaScript/Reference/Global_Objects/EvalError/prototype
+tags:
+  - Error
+  - EvalError
+  - JavaScript
+  - помилка
+translation_of: Web/JavaScript/Reference/Global_Objects/EvalError
+---
+<div>{{JSRef}}</div>
+
+<p>Властивість <code><strong>EvalError.prototype</strong></code> є прототипом для конструктора {{jsxref("EvalError")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Всі екземпляри {{jsxref("EvalError")}} успадковуються від <code>EvalError.prototype</code>. Ви можете використати прототип, щоб додати властивості та методи до усіх екземплярів.</p>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt><code>EvalError.prototype.constructor</code></dt>
+ <dd>Функція, яка створила прототип об'єкта.</dd>
+ <dt>{{jsxref("Error.prototype.message", "EvalError.prototype.message")}}</dt>
+ <dd>Повідомлення помилки. Хоча ECMA-262 зазначає, що {{jsxref("EvalError")}} повинен мати власну властивість <code>message</code>, у <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> він успадковує {{jsxref("Error.prototype.message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "EvalError.prototype.name")}}</dt>
+ <dd>Ім'я помилки. Успадковано від {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "EvalError.prototype.fileName")}}</dt>
+ <dd>Шлях до файлу, що спричинив помилку. Успадковано від {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "EvalError.prototype.lineNumber")}}</dt>
+ <dd>Номер рядка файлу, в якому виникла помилка. Успадковано від {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "EvalError.prototype.columnNumber")}}</dt>
+ <dd>Номер стовпця у рядку, де виникла помилка. Успадковано від {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "EvalError.prototype.stack")}}</dt>
+ <dd>Трасування стеку. Успадковано від {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<p>Хоча прототип {{jsxref("EvalError")}} не містить власних методів, екземпляри {{jsxref("EvalError")}} успадковують деякі методи через ланцюжок прототипів.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.EvalError")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/function/apply/index.html b/files/uk/web/javascript/reference/global_objects/function/apply/index.html
new file mode 100644
index 0000000000..78183d8102
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/function/apply/index.html
@@ -0,0 +1,239 @@
+---
+title: Function.prototype.apply()
+slug: Web/JavaScript/Reference/Global_Objects/Function/apply
+tags:
+  - Function
+  - JavaScript
+  - Довідка
+  - Функція
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>apply()</strong></code> викликає функцію із заданим значенням <code>this</code> та аргументами, переданими у вигляді масиву (або <a href="/uk/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">подібного до масиву об'єкта</a>).</p>
+
+<div class="note">
+<p><strong>Заувага:</strong> Хоча синтаксис цієї функції є майже ідентичним до синтаксису {{jsxref("Function.call", "call()")}}, фундаментальна відмінність полягає в тому, що метод <code>call()</code> приймає <strong>список аргументів</strong>, тоді як метод <code>apply()</code> приймає <strong>єдиний масив аргументів</strong>.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Заувага:</strong> Коли першим аргументом є undefined або null, схожий результат можна отримати за допомогою <a href="/uk/docs/Web/JavaScript/Reference/Operators/Spread_syntax">оператора розпакування</a> масивів.</p>
+</div>
+
+<p>{{EmbedInteractiveExample("pages/js/function-apply.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>function</var>.apply(<var>thisArg, </var>[<var>argsArray</var>])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>thisArg</code></dt>
+ <dd>Значення <code>this</code>, передане для виклику у функцію <em><code>function</code></em>. Зазначте, що <code>this</code> може не бути фактичним значенням, яке бачить метод: якщо метод є функцією не у {{jsxref("Strict_mode", "строгому режимі", "", 1)}}, {{jsxref("null")}} та {{jsxref("undefined")}} будуть замінені глобальним об'єктом, а прості значення будуть запаковані. Цей аргумент є обов'язковим.</dd>
+ <dt><code>argsArray</code></dt>
+ <dd>Необов'язковий. Подібний до масиву об'єкт, що визначає аргументи, з якими функція має бути викликана, або {{jsxref("null")}} чи {{jsxref("undefined")}}, якщо жодних аргументів не має бути передано у функцію. Починаючи з ECMAScript 5, ці аргументи можуть бути загальними подібними до масиву об'єктами замість масиву. Дивіться нижче інформацію щодо {{anch("Сумісність_з_веб-переглядачами", "сумісності з веб-переглядачами")}}.</dd>
+</dl>
+
+<h3 id="Значення_яке_повертається">Значення, яке повертається</h3>
+
+<p>Результат виконання функції з вказаним значенням <code><strong>this</strong></code> та аргументами.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Ви можете присвоїти інший об'єкт <code>this</code>, коли викликаєте існуючу функцію. <code>this</code> посилається на поточний об'єкт, з якого здійснюється виклик. З <code>apply</code> ви можете написати метод один раз, а потім успадковувати його в іншому об'єкті, без необхідності переписувати метод для нового об'єкта.</p>
+
+<p>Метод <code>apply</code> дуже схожий на {{jsxref("Function.call", "call()")}}, за виключенням типу аргументів, які він підтримує. Ви використовуєте масив аргументів замість списку аргументів (параметрів). З методом <code>apply</code> ви також можете використовувати літерал масиву, для прикладу, <code><em>func</em>.apply(this, ['їсти', 'банани'])</code>, або об'єкт {{jsxref("Array")}}, для прикладу, <code><em>func</em>.apply(this, new Array('їсти', 'банани'))</code>.</p>
+
+<p>Ви також можете використати об'єкт {{jsxref("Functions/arguments", "arguments")}} як параметр <code>argsArray</code>. <code>arguments</code> - локальна змінна функції. Вона може використовуватись для всіх не заданих аргументів об'єкта, який викликається. Таким чином, вам не потрібно знати аргументи об'єкта, що викликається, коли ви використовуєте метод <code>apply</code>. Ви можете скористатись об'єктом <code>arguments,</code> щоб передати усі аргументи. Далі об'єкт, який викликається, відповідає за обробку аргументів.</p>
+
+<p>З появою 5-ї версії ECMAScript, ви також можете використовувати будь-який подібний до масиву об'єкт, отже, на практиці це означає, що він має поле <code>length</code> та цілі числа в якості параметрів у діапазоні <code>(0...length-1)</code>. Як приклад, ви тепер можете використати {{domxref("NodeList")}} або власноруч написаний об'єкт виду <code>{ 'length': 2, '0': 'їсти', '1': 'банани' }</code>.</p>
+
+<div class="note">
+<p>Чимало більш старих переглядачів, в тому числі Chrome &lt;17 та Internet Explorer &lt;9, не приймають подібні до масиву об'єкти і викидатимуть виняток.</p>
+</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_apply_для_додавання_масиву_до_іншого_масиву">Використання <code>apply</code> для додавання масиву до іншого масиву</h3>
+
+<p>Ми можемо використати метод <code>push</code>, щоб додати елемент до масиву. І, оскільки <code>push</code> приймає змінну кількість аргументів, ми також можемо додати кілька елементів за раз. Але, якщо ми передамо у <code>push</code> масив, він додасть, власне, масив єдиним елементом, замість того, щоб додати окремі елементи, і ми отримаємо масив всередині масиву. Що, як ми не цього хотіли? Метод <code>concat</code> має поведінку, яка нам потрібна в цьому випадку, але він не додає елементи у існуючий масив, а створює та повертає новий масив. Але ми хотіли додати елементи у існуючий масив... Що ж робити? Писати цикл? Звісно, ні.</p>
+
+<p>На допомогу приходить <code>apply</code>!</p>
+
+<pre class="brush: js">var array = ['a', 'b'];
+var elements = [0, 1, 2];
+array.push.apply(array, elements);
+console.info(array); // ["a", "b", 0, 1, 2]</pre>
+
+<div class="note"></div>
+
+<h3 id="Використання_apply_та_вбудовані_функції">Використання <code>apply</code> та вбудовані функції</h3>
+
+<p>Розумне використання методу <code>apply</code> дозволяє використовувати вбудовані функції для деяких задач, які в іншому випадку ймовірно були б написані циклічним обходом значень масиву. Як приклад, ми збираємося використати <code>Math.max</code>/<code>Math.min,</code> щоб знайти максимальне/мінімальне значення масиву.</p>
+
+<pre class="brush: js">// мінімальне/максимальне число в масиві
+var numbers = [5, 6, 2, 3, 7];
+
+// використання Math.min/Math.max з apply
+var max = Math.max.apply(null, numbers);
+// Це практично дорівнює Math.max(numbers[0], ...)
+// або Math.max(5, 6, ...)
+
+var min = Math.min.apply(null, numbers);
+
+// в порівнянні з простим алгоритмом на основі цикла
+max = -Infinity, min = +Infinity;
+
+for (var i = 0; i &lt; numbers.length; i++) {
+  if (numbers[i] &gt; max) {
+    max = numbers[i];
+  }
+  if (numbers[i] &lt; min) {
+    min = numbers[i];
+  }
+}
+</pre>
+
+<p>Але будьте обережні: використовуючи <code>apply</code> таким способом, ви ризикуєте перевищити ліміт кількості аргументів рушія JavaScript. Наслідки застосування функції, в якій забагато аргументів (більше, ніж десятки тисяч аргументів), різняться між різними рушіями (JavaScriptCore має жорстко закодований <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=80797">ліміт аргументів 65536</a>) тому, що ліміт (а насправді, навіть природа будь-якої поведінки надмірно великого стеку) є невизначеним. Деякі рушії викинуть виняток. Ще гірше, інші довільно обмежать кількість аргументів, які будуть насправді передані до застосованої функції. Для ілюстрації останнього випадку: якби такий рушій мав обмеження у чотири аргументи (справжні ліміти, звісно, значно більші), то замість цілого масиву у наведеному вище випадку до <code>apply</code> були б передані аргументи <code>5, 6, 2, 3</code>. </p>
+
+<p>Якщо ваш масив значень може вирости до десятків тисяч значень, використовуйте гібридну стратегію: застосовуйте вашу функцію до фрагментів масиву, по одному за раз:</p>
+
+<pre class="brush: js">function minOfArray(arr) {
+  var min = Infinity;
+  var QUANTUM = 32768;
+
+  for (var i = 0, len = arr.length; i &lt; len; i += QUANTUM) {
+    var submin = Math.min.apply(null,
+                                arr.slice(i, Math.min(i+QUANTUM, len)));
+    min = Math.min(submin, min);
+  }
+
+  return min;
+}
+
+var min = minOfArray([5, 6, 2, 3, 7]);
+
+</pre>
+
+<h3 id="Використання_методу_apply_для_ланцюгового_виконання_конструкторів">Використання методу <code>apply</code> для ланцюгового виконання конструкторів</h3>
+
+<p>Ви можете використовувати <code>apply</code> для ланцюгового виконання {{jsxref("Operators/new", "конструкторів", "", 1)}} до об'єкта, подібно до Java. У наступному прикладі ми створимо глобальний метод {{jsxref("Function")}} під назвою <code>construct</code>, котрий дозволить використовувати подібний до масиву об'єкт з конструктором замість списку аргументів.</p>
+
+<pre class="brush: js">Function.prototype.construct = function(aArgs) {
+  var oNew = Object.create(this.prototype);
+  this.apply(oNew, aArgs);
+  return oNew;
+};
+</pre>
+
+<div class="note">
+<p><strong>Заувага:</strong> Метод <code>Object.create(),</code> що використовується вище, є відносно новим. В якості альтернативних методів, будь ласка, розгляньте наступні підходи:</p>
+
+<p>Використання {{jsxref("Object/proto", "Object.__proto__")}}:</p>
+
+<pre class="brush: js">Function.prototype.construct = function (aArgs) {
+  var oNew = {};
+  oNew.__proto__ = this.prototype;
+  this.apply(oNew, aArgs);
+  return oNew;
+};</pre>
+
+<p><a href="/uk/docs/Web/JavaScript/Closures">Замикання</a>:</p>
+
+<pre class="brush: js">Function.prototype.construct = function(aArgs) {
+  var fConstructor = this, fNewConstr = function() {
+    fConstructor.apply(this, aArgs);
+  };
+  fNewConstr.prototype = fConstructor.prototype;
+  return new fNewConstr();
+};</pre>
+
+<p>Конструктор {{jsxref("Function")}}:</p>
+
+<pre class="brush: js">Function.prototype.construct = function (aArgs) {
+  var fNewConstr = new Function("");
+  fNewConstr.prototype = this.prototype;
+  var oNew = new fNewConstr();
+  this.apply(oNew, aArgs);
+  return oNew;
+};</pre>
+</div>
+
+<p>Приклад використання:</p>
+
+<pre class="brush: js">function MyConstructor() {
+  for (var nProp = 0; nProp &lt; arguments.length; nProp++) {
+    this['property' + nProp] = arguments[nProp];
+  }
+}
+
+var myArray = [4, 'Всім привіт!', false];
+var myInstance = MyConstructor.construct(myArray);
+
+console.log(myInstance.property1);                // виведе 'Всім привіт!'
+console.log(myInstance instanceof MyConstructor); // виведе 'true'
+console.log(myInstance.constructor);              // виведе 'MyConstructor'
+</pre>
+
+<div class="note">
+<p><strong>Заувага:</strong> Цей не рідний метод <code>Function.construct</code> не буде працювати з деякими вбудованими конструкторами; такими, як {{jsxref("Date")}}, наприклад. У таких випадках, ви маєте використовувати метод {{jsxref("Function.prototype.bind")}} (наприклад, уявіть собі такий масив, що використовується з конструктором {{jsxref("Global_Objects/Date", "Date")}}: <code>[2012, 11, 4]</code>; у такому випадку вам доведеться написати щось по типу: <code>new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()</code>. Це не найкращий підхід, і, мабуть, не варто це робити у будь-якому виробничому середовищі).</p>
+</div>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Початкове визначення. Реалізовано у JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.4.3', 'Function.prototype.apply')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Function.apply")}}</p>
+
+<div id="compat-mobile"></div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>Об'єкт {{jsxref("Functions/arguments", "arguments")}}</li>
+ <li>{{jsxref("Function.prototype.bind()")}}</li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Functions", "Функції та область видимості функції", "", 1)}}</li>
+ <li>{{jsxref("Reflect.apply()")}}</li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Spread_syntax">Оператор розпакування</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/function/arguments/index.html b/files/uk/web/javascript/reference/global_objects/function/arguments/index.html
new file mode 100644
index 0000000000..009473b14d
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/function/arguments/index.html
@@ -0,0 +1,92 @@
+---
+title: Function.arguments
+slug: Web/JavaScript/Reference/Global_Objects/Function/arguments
+tags:
+  - Function
+  - JavaScript
+  - arguments
+  - Властивість
+  - застаріла
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/arguments
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p>Властивість <code><strong><em>function</em>.arguments</strong></code> посилається на подібний до масиву об'єкт, який відображає аргументи, передані у функцію. Використовуйте натомість просту змінну {{jsxref("Functions/arguments", "arguments")}}. Ця властивість заборонена у строгому режимі.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Синтаксис <code><em>function</em>.arguments</code> є застарілим. Рекомендуємий спосіб звернутися до об'єкта {{jsxref("Functions/arguments", "arguments")}}, що доступний всередині функцій, це просто скористатись змінною  {{jsxref("Functions/arguments", "arguments")}}.</p>
+
+<p>У випадку рекурсії, тобто, якщо функція <code>f</code> з'являється кілька разів у стеку викликів, значення <code>f.arguments</code> відображає аргументи, що відповідають останньому виклику функції.</p>
+
+<p>Значення властивості arguments зазвичай дорівнює null, якщо немає незавершеного виклику функції у процесі (тобто, функція була викликана, але досі не повернула значення).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">function f(n) { g(n - 1); }
+
+function g(n) {
+  console.log('до: ' + g.arguments[0]);
+  if (n &gt; 0) { f(n); }
+  console.log('після: ' + g.arguments[0]);
+}
+
+f(2);
+
+console.log('повернено: ' + g.arguments);
+
+// Результат
+
+// до: 1
+// до: 0
+// після: 0
+// після: 1
+// повернено: null
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.0. Застаріло через {{jsxref("Functions/arguments", "arguments")}} у ES3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-10.6', 'arguments object')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Об'єкт {{jsxref("Functions/arguments", "arguments")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arguments-object', 'arguments object')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Об'єкт {{jsxref("Functions/arguments", "arguments")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arguments-object', 'arguments object')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Об'єкт {{jsxref("Functions/arguments", "arguments")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Function.arguments")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>Об'єкт {{jsxref("Functions/arguments", "arguments")}}</li>
+ <li>{{jsxref("Functions", "Функції та область видимості функції", "", 1)}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/function/arity/index.html b/files/uk/web/javascript/reference/global_objects/function/arity/index.html
new file mode 100644
index 0000000000..bef46fef72
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/function/arity/index.html
@@ -0,0 +1,31 @@
+---
+title: Function.arity
+slug: Web/JavaScript/Reference/Global_Objects/Function/arity
+tags:
+  - JavaScript
+  - Властивість
+  - Функція
+  - застаріла
+translation_of: Archive/Web/JavaScript/Function.arity
+---
+<div>{{JSRef}}{{Obsolete_Header}}</div>
+
+<p class="note">Властивість <code><strong>arity</strong></code> повертала кількість аргументів, очікуваних функцією, однак, вона більше не існує та була замінена властивістю {{jsxref("Function.prototype.length")}}.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Реалізовано JavaScript 1.2. Застаріла у JavaScript 1.4.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Function.arity")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{JSxRef("Function.prototype.length")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/function/bind/index.html b/files/uk/web/javascript/reference/global_objects/function/bind/index.html
new file mode 100644
index 0000000000..9270baeac2
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/function/bind/index.html
@@ -0,0 +1,329 @@
+---
+title: Function.prototype.bind()
+slug: Web/JavaScript/Reference/Global_Objects/Function/bind
+tags:
+  - ECMAScript 2015
+  - Function
+  - JavaScript
+  - Method
+  - Зв'язування
+  - Функція
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>bind()</strong></code> створює нову функцію, яка в момент виклику має певне присвоєне значення <code>this</code>, а також задану послідовність аргументів, що передують будь-яким аргументам, переданим під час виклику нової функції.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/function-bind.html", "taller")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>function</var>.bind(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>thisArg</code></dt>
+ <dd>Значення, що передаватиметься як параметр <code>this</code> до цільової функції, коли зв'язана функція викликається. Це значення ігнорується, якщо зв'язана функція утворена викликом оператора {{jsxref("Operators/new", "new")}}. При використанні <code>bind</code> для створення функції (що подається для зворотного виклику) всередині <code>setTimeout</code>, будь-яке примітивне значення, що передається в якості <code>thisArg</code>, перетворюється на об'єкт. Якщо у <code>bind</code> не було передано жодних аргументів, <code>this</code> області видимості виконання передається як <code>thisArg</code> для нової функції.</dd>
+ <dt><code>arg1, arg2, ...</code></dt>
+ <dd>Аргументи, які будуть передувати аргументам, що були передані у зв'язану функцію, під час виклику цільової функції.</dd>
+</dl>
+
+<h3 id="Значення_яке_повертається">Значення, яке повертається</h3>
+
+<p>Копія заданої функції із заданим значенням <strong><code>this</code></strong> та початковими аргументами.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Функція <code>bind()</code> створює нову зв'язану функцію, яка є екзотичним об'єктом-функцією (термін з ECMAScript 2015), що огортає початкову функцію. Загалом, результатом виклику зв'язаної функції є виконання функції, яку вона огортає.</p>
+
+<p>Зв'язана функція має наступні внутрішні властивості:</p>
+
+<ul>
+ <li><strong><code>[[BoundTargetFunction]]</code> </strong>- обгорнена функція;</li>
+ <li><code><strong>[[BoundThis]]</strong></code> - значення, яке завжди передається як значення <code>this</code><strong>,</strong> коли викликається обгорнена функція.</li>
+ <li><code><strong>[[BoundArguments]]</strong></code> - список значень, елементи якого використовуються як перші аргументи будь-якого виклику обгорненої функції.</li>
+ <li><code><strong>[[Call]]</strong></code> - виконує код, що пов'язаний з цим об'єктом. Запускається виразом виклику функції. Аргументами внутрішнього методу є значення <strong>this</strong> та список, що містить аргументи, передані у функцію виразом виклику.</li>
+</ul>
+
+<p>Коли зв'язана функція викликається, вона викликає внутрішній метод <code>[[Call]]</code> на об'єкті <code>[[BoundTargetFunction]]</code> з наступними аргументами <code>Call(<em>boundThis</em>, <em>args</em>)</code>. Де <em><code>boundThis</code></em> - це <code>[[BoundThis]]</code>, а <code>args</code> - це <code>[[BoundArguments]]</code>, за якими йдуть аргументи, передані викликом функції.</p>
+
+<p>Зв'язана функція може також бути створена за допомогою оператора {{jsxref("Operators/new", "new")}}: це працює так, якби замість неї створювалася б цільова функція. Передане значення <code>this</code> ігнорується, а передані аргументи передаються до імітованої функції.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Створення_звязаної_функції">Створення зв'язаної функції</h3>
+
+<p>Найпростіше використання методу <code>bind()</code> - це зробити функцію, яка, незалежно від того, як вона викликається, буде викликатися з конкретним значенням <code>this</code>. Загальною помилкою початківців у JavaScript є витягнути метод з об'єкта, пізніше викликати цю функцію і очікувати, що вона буде використовувати початковий об'єкт в якості <code>this</code> (наприклад, використовуючи цей метод в коді на основі зворотних викликів). Однак, початковий об'єкт, якщо його не відслідковувати, зазвичай, втрачається. Створення зв'язаної функції з функції, яка використовує початковий об'єкт, елегантно вирішує цю проблему:</p>
+
+<pre class="brush: js">this.x = 9;    // тут значення this посилається на глобальний об'єкт переглядача "window"
+var module = {
+  x: 81,
+  getX: function() { return this.x; }
+};
+
+module.getX(); // 81
+
+var retrieveX = module.getX;
+retrieveX();
+// вертає 9 - Функція виконується в глобальній області видимості
+
+// Створюємо нову функцію, прив'язуючи 'this' до об'єкта module
+// Програмісти-новачки можуть переплутати
+// глобальну змінну var x з властивістю x об'єкта module
+var boundGetX = retrieveX.bind(module);
+boundGetX(); // 81
+</pre>
+
+<h3 id="Частково_застосовані_функції">Частково застосовані функції</h3>
+
+<p>Наступне найпростіше використання методу <code>bind()</code> - це зробити функцію з наперед визначеними початковими аргументами. Ці аргументи (якщо вони є) вказуються після наданого значення <code>this</code> і після цього передаються на початку списку аргументів, які передаються в дану функцію. За ними йдуть аргументи, передані у зв'язану функцію під час виклику.</p>
+
+<pre class="brush: js">function list() {
+  return Array.prototype.slice.call(arguments);
+}
+
+function addArguments(arg1, arg2) {
+    return arg1 + arg2
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+
+var result1 = addArguments(1, 2); // 3
+
+// Створити функцію з попередньо заданим першим аргументом
+var leadingThirtysevenList = list.bind(null, 37);
+
+// Створити функцію з попередньо заданим першим аргументом.
+var addThirtySeven = addArguments.bind(null, 37);
+
+var list2 = leadingThirtysevenList();
+// [37]
+
+var list3 = leadingThirtysevenList(1, 2, 3);
+// [37, 1, 2, 3]
+
+var result2 = addThirtySeven(5);
+// 37 + 5 = 42
+
+var result3 = addThirtySeven(5, 10);
+// 37 + 5 = 42, другий аргумент ігнорується</pre>
+
+<h3 id="З_setTimeout">З <code>setTimeout</code></h3>
+
+<p>За замовчуванням, всередині {{domxref("WindowTimers/setTimeout", "window.setTimeout()")}} значенням <code>this</code> буде встановлено об'єкт {{domxref("window")}} (або <code>global</code>). Працюючи з методами класу, що вимагають <code>this</code> для посилання на екземпляри класу, ви можете явно прив'язати <code>this</code> до функції зворотного виклику, щоб зберегти екземпляр.</p>
+
+<pre class="brush: js">function LateBloomer() {
+  this.petalCount = Math.ceil(Math.random() * 12) + 1;
+}
+
+// Запустити declare після затримки у 1 секунду
+LateBloomer.prototype.bloom = function() {
+  window.setTimeout(this.declare.bind(this), 1000);
+};
+
+LateBloomer.prototype.declare = function() {
+  console.log('Я чудова квітка з ' +
+    this.petalCount + ' пелюстками!');
+};
+
+var flower = new LateBloomer();
+flower.bloom();
+// через 1 секунду запускається метод 'declare'</pre>
+
+<h3 id="Звязані_функції_в_ролі_конструкторів">Зв'язані функції в ролі конструкторів</h3>
+
+<div class="warning">
+<p><strong>Застереження:</strong> Цей розділ демонструє можливості JavaScript та документує деякі граничні випадки використання методу <code>bind()</code>. Методи, наведені нижче, є не найкращим способом написання коду, їх не бажано використовувати у будь-якому виробничому середовищі.</p>
+</div>
+
+<p>Зв'язані функції автоматично підходять для використання з оператором {{jsxref("Operators/new", "new")}} для побудови нових екземплярів, створених цільовою функцією. Коли зв'язана функція використовується для створення значення, надане значення <code>this</code> ігнорується. Однак, надані аргументи все одно передаються у виклик конструктора:</p>
+
+<pre class="brush: js">function Point(x, y) {
+  this.x = x;
+  this.y = y;
+}
+
+Point.prototype.toString = function() {
+  return this.x + ',' + this.y;
+};
+
+var p = new Point(1, 2);
+p.toString(); // '1,2'
+
+// не підтримується у поліфілі, що наведений нижче
+
+// працює добре з рідним методом bind:
+
+var YAxisPoint = Point.bind(null, 0/*x*/);
+
+
+var emptyObj = {};
+var YAxisPoint = Point.bind(emptyObj, 0/*x*/);
+
+var axisPoint = new YAxisPoint(5);
+axisPoint.toString(); // '0,5'
+
+axisPoint instanceof Point; // true
+axisPoint instanceof YAxisPoint; // true
+new Point(17, 42) instanceof YAxisPoint; // true
+</pre>
+
+<p>Зауважте, що вам не потрібно робити нічого особливого, щоб створити зв'язану функцію для використання з оператором {{jsxref("Operators/new", "new")}}. Наслідком є те, що вам не потрібно робити нічого особливого, щоб створити зв'язану функцію, яка буде просто викликатися, навіть якщо ви хотіли б зв'язати функцію лише для викликів з оператором {{jsxref("Operators/new", "new")}}.</p>
+
+<pre class="brush: js">// Приклад може бути запущений прямо у консолі JavaScript
+// ...продовження прикладу нагорі
+
+// Може викликатись як звичайна функція
+// (хоча зазвичай це є небажаним)
+YAxisPoint(13);
+
+emptyObj.x + ',' + emptyObj.y;
+// &gt;  '0,13'
+</pre>
+
+<p>Якщо ви бажаєте підтримувати використання зв'язаної функції лише з оператором {{jsxref("Operators/new", "new")}}, або лише викликаючи її, то цільова функція має примусово ввести це обмеження.</p>
+
+<h3 id="Створення_ярликів">Створення ярликів</h3>
+
+<p>Метод <code>bind()</code> також є корисним у випадках, коли ви хочете створити ярлик до функції, котра потребує конкретного значення <code>this</code>.</p>
+
+<p>Візьміть, для прикладу, метод {{jsxref("Array.prototype.slice")}}, який ви хочете використати для перетворення подібного до масиву об'єкта на справжній масив. Ви можете створити такий ярлик:</p>
+
+<pre class="brush: js">var slice = Array.prototype.slice;
+
+// ...
+
+slice.apply(arguments);
+</pre>
+
+<p>З <code>bind()</code> це можна спростити. В наступній частині коду, <code>slice</code> є зв'язаною функцією з функцією {{jsxref("Function.prototype.apply()", "apply()")}} об'єкта {{jsxref("Function.prototype")}}, зі значенням <code>this</code>, яке дорівнює функції {{jsxref("Array.prototype.slice()", "slice()")}} об'єкта {{jsxref("Array.prototype")}}. Це означає що додаткові виклики методу <code>apply()</code> можуть бути усунені:</p>
+
+<pre class="brush: js">// те саме, що й "slice" у попередньому прикладі
+var unboundSlice = Array.prototype.slice;
+var slice = Function.prototype.apply.bind(unboundSlice);
+
+// ...
+
+slice(arguments);
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Оскільки старші переглядачі, загалом, є також повільнішими, набагато критичніше, ніж багатьом здається, створювати продуктивні поліфіли, щоб користування переглядачем не було таким жахливим. Отже, нижче наведені два варіанти поліфілів Function.prototype.bind. Перший набагато менший та спритніший, але не працює при використанні оператора `new`. Другий менш продуктивний та більший за розміром, але дозволяє певне використання оператора `new` на зв'язаних функціях. Загалом, у коді рідко можна зустріти `new`, що використовується на зв'язаній функції, тому, в цілому, краще обирати перший варіант.</p>
+
+<pre class="brush: js">// Не працює з `new funcA.bind(thisArg, args)`
+if (!Function.prototype.bind) (function(){
+  var slice = Array.prototype.slice;
+  Function.prototype.bind = function() {
+    var thatFunc = this, thatArg = arguments[0];
+    var args = slice.call(arguments, 1);
+    if (typeof thatFunc !== 'function') {
+      // найближчий можливий варіант до внутрішньої
+      // функції IsCallable у ECMAScript 5
+      throw new TypeError('Function.prototype.bind - ' +
+             'what is trying to be bound is not callable');
+    }
+    return function(){
+      var funcArgs = args.concat(slice.call(arguments))
+      return thatFunc.apply(thatArg, funcArgs);
+    };
+  };
+})();</pre>
+
+<p>Ви можете це частково обійти, вставивши наступний код на початку ваших скриптів, що дозволить використовувати більшу частину функціональності <code>bind()</code> у реалізаціях, які початково її не підтримують.</p>
+
+<pre class="brush: js">// Так, це працює з `new funcA.bind(thisArg, args)`
+if (!Function.prototype.bind) (function(){
+  var ArrayPrototypeSlice = Array.prototype.slice;
+  Function.prototype.bind = function(otherThis) {
+    if (typeof this !== 'function') {
+      // найближчий можливий варіант до внутрішньої
+      // функції IsCallable у ECMAScript 5
+      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
+    }
+
+    var baseArgs= ArrayPrototypeSlice .call(arguments, 1),
+        baseArgsLength = baseArgs.length,
+        fToBind = this,
+        fNOP    = function() {},
+        fBound  = function() {
+          baseArgs.length = baseArgsLength; // скинути до початкових базових аргументів
+          baseArgs.push.apply(baseArgs, arguments);
+          return fToBind.apply(
+                 fNOP.prototype.isPrototypeOf(this) ? this : otherThis, baseArgs
+          );
+        };
+
+    if (this.prototype) {
+      // Function.prototype не має властивості prototype
+      fNOP.prototype = this.prototype;
+    }
+    fBound.prototype = new fNOP();
+
+    return fBound;
+  };
+})();</pre>
+
+<p>Деякі з багатьох відмінностей (також можуть бути й інші, оскільки цей список не претендує на вичерпність) між цим алгоритмом та основним алгоритмом:</p>
+
+<ul>
+ <li>Часткова реалізація покладається на те, що вбудовані методи {{jsxref("Array.prototype.slice()")}}, {{jsxref("Array.prototype.concat()")}}, {{jsxref("Function.prototype.call()")}} та {{jsxref("Function.prototype.apply()")}} мають свої початкові значення.</li>
+ <li>Часткова реалізація створює функції, які не мають незмінної "отруйної таблетки" {{jsxref("Function.caller", "caller")}} та властивостей <code>arguments</code>, що викидають помилку {{jsxref("Global_Objects/TypeError", "TypeError")}} на get, set чи видалення. (Це можна додати, якщо реалізація підтримує {{jsxref("Object.defineProperty")}}, або частково реалізувати [без викидання винятків на видалення], якщо реалізація підтримує розширення {{jsxref("Object.__defineGetter__", "__defineGetter__")}} та {{jsxref("Object.__defineSetter__", "__defineSetter__")}}.)</li>
+ <li>Часткова реалізація створює функції, які мають властивість <code>prototype</code>. (Правильні зв'язані функції її не мають.)</li>
+ <li>Часткова реалізація створює зв'язані функції, чия властивість {{jsxref("Function.length", "length")}} не узгоджується з встановленою у ECMA-262: вона створює функції зі значенням length 0, в той час, як повна реалізація, в залежності від значення length цільової функції та числа попередньо заданих аргументів, може повернути ненульове значення.</li>
+</ul>
+
+<p>Якщо ви вирішили використовувати цю часткову реалізацію, <strong>ви не повинні покладатися на неї у ситуаціях, де її поведінка відрізняється від 5-ї версії ECMA-262!</strong> На щастя, ці відхилення від специфікації не часто (якщо взагалі) зустрічаються у більшості випадків кодування. Якщо ви не розумієте жодних відхилень від специфікації, наведених вище, тоді, у цьому конкретному випадку, буде безпечно не хвилюватись щодо подробиць цих невідповідностей.</p>
+
+<p><strong>Якщо це абсолютно необхідно, а продуктивність неважлива</strong>, значно повільніше рішення (але у більшій відповідності до специфікації) можна знайти тут <a href="https://github.com/Raynos/function-bind">https://github.com/Raynos/function-bind</a>.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.4.5', 'Function.prototype.bind')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Початкове визначення. Реалізовано у 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Function.bind")}}</p>
+
+<div id="compat-mobile"></div>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Functions", "Функції", "", 1)}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/function/call/index.html b/files/uk/web/javascript/reference/global_objects/function/call/index.html
new file mode 100644
index 0000000000..caa12e71b0
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/function/call/index.html
@@ -0,0 +1,168 @@
+---
+title: Function.prototype.call()
+slug: Web/JavaScript/Reference/Global_Objects/Function/call
+tags:
+  - Function
+  - JavaScript
+  - Method
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/call
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>call()</strong></code> викликає функцію із вказаним значенням <code>this</code> та зазначеним переліком аргументів.</p>
+
+<div class="note">
+<p><strong>Заувага:</strong> Хоча за своїм призначенням цей метод і {{jsxref("Function.prototype.apply", "apply()")}} є тотожними, аргументи для викликаної функції передаються в дещо різний спосіб: метод <code>call()</code> приймає їх <strong>перелік</strong>, тоді як метод <code>apply()</code> приймає їх <strong>масив</strong>.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/function-call.html")}}</div>
+
+<p class="hidden">Першокод цього прикладу збережено у репозиторії GitHub. Якщо ви хочете долучитися до створення чи поліпшення таких прикладів, пропонуйте нам свої зміни до репозиторію <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>function</var>.call(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>thisArg</code> {{optional_inline}}</dt>
+ <dd>Значення <code>this</code>, яке буде застосовано для виклику <code>function</code>. Зауважте, що значення <code>thisArg</code> може зазнати перетворень — якщо функція <code>function</code> виконується у {{jsxref("Functions_and_function_scope/Strict_mode", "поблажливому режимі", "", 1)}}, тоді замість {{jsxref("Global_Objects/null", "null")}} та {{jsxref("Global_Objects/undefined", "undefined")}} буде застосовано {{glossary("Global_object", "глобальний об'єкт")}}, а {{glossary("Primitive", "прості величини")}} буде обернено на об'єкти.</dd>
+ <dt><code>arg1, arg2, ...</code> {{optional_inline}}</dt>
+ <dd>Аргументи, що їх буде передано до функції <code>function</code>.</dd>
+</dl>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>Значення, яке внаслідок виклику повернула сама функція <code>function</code>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>call()</code> здійснює виклик функції, заступаючи значення ключового слова <code>this</code> всередині неї значенням, переданим до <code>call()</code> як перший аргумент. Це уможливлює одноразове написання деякої функції з можливістю її надалі викликати для всякого об'єкта так, наче вона є його методом.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Виклик_успадкованих_конструкторів_за_допомогою_call">Виклик успадкованих конструкторів за допомогою <code>call</code></h3>
+
+<p>Методом <code>call()</code> можна скористатись для створення ланцюжка конструкторів об'єкта, як у Java. У наведеному прикладі конструктор <code>Product</code> (виріб) має два параметри: назву (<code>name</code>) й ціну (<code>price</code>). Два інші конструктори — <code>Food</code> (їжа) і <code>Toy</code> (цяцька) — спершу викликають конструктор <code>Product</code>, передаючи потрібні йому значення <code>name</code> і <code>price</code>, а відтак додають окрему властивість <code>category</code> (різновид).</p>
+
+<pre class="brush: js">function Product(name, price) {
+  this.name = name;
+  this.price = price;
+}
+
+function Food(name, price) {
+  Product.call(this, name, price);
+  this.category = 'food';
+}
+
+function Toy(name, price) {
+  Product.call(this, name, price);
+  this.category = 'toy';
+}
+
+var cheese = new Food('feta', 5);
+var fun = new Toy('robot', 40);
+</pre>
+
+<h3 id="Виклик_неназваних_функцій_за_допомогою_метода_call">Виклик неназваних функцій за допомогою метода <code>call</code></h3>
+
+<p>Цей суто надуманий приклад містить використання метода <code>call</code> для виклику анонімної функції на кожному об'єкті з масиву.</p>
+
+<p>Всередині цієї анонімної функції кожен об'єкт отримує окремий метод <code>print</code>, що друкуватиме значення властивостей об'єкта та його розташунок (індекс) в масиві. Передача об'єкта саме як <code>this</code> не є необхідністю, а вжито лише задля наочності.</p>
+
+<pre class="brush: js">var animals = [
+  { species: 'Лев', name: 'Король' },
+  { species: 'Пантера', name: 'Багіра' }
+];
+
+for (var i = 0; i &lt; animals.length; i++) {
+  (function(i) {
+    this.print = function() {
+      console.log(i, this.species, this.name);
+    }
+    this.print();
+  }).call(animals[i], i);
+}
+</pre>
+
+<h3 id="Виклик_функції_та_перевиознака_this_за_допомогою_метода_call">Виклик функції та перевиознака <code>this</code> за допомогою метода <code>call</code></h3>
+
+<p>Під час виклику функції <code>greet</code> в цьому прикладі значення <code>this</code> буде прив'язано до об'єкта <code>obj</code>:</p>
+
+<pre class="brush: js">function greet() {
+  var message = 'Вітаємо, ' + (this.isMale ? 'пане ' : 'пані ') + this.name;
+  console.log(message);
+}
+
+var obj = {
+  isMale: false, name: 'Олено'
+};
+
+greet.call(obj);  // Вітаємо, пані Олено
+</pre>
+
+<h3 id="Виклик_функції_за_допомогою_метода_call_без_зазначення_першого_аргумента">Виклик функції за допомогою метода <code>call</code> без зазначення першого аргумента</h3>
+
+<p>Як засвідчує цей приклад, відсутність першого аргумента метода <code>call</code> має наслідком прив'язування <code>this</code> до {{glossary('global object', 'глобального об\'єкта')}}:</p>
+
+<pre class="brush: js">var name = 'Тарас';
+
+var x = {
+  name: 'Микола',
+  display: function() {
+    console.log('Мене звуть ' + this.name);
+  }
+};
+
+x.display();  // Мене звуть Микола
+x.display.call();  // Мене звуть Тарас
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкова виознака. Запроваджено у JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.4.4', 'Function.prototype.call')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function.prototype.call', 'Function.prototype.call')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function.prototype.call', 'Function.prototype.call')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<div>{{Compat("javascript.builtins.Function.call")}}</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Function.prototype.bind()")}}</li>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+ <li>
+  <p><a href="/uk/docs/Learn/JavaScript/Objects">Вступ до об'єктів JavaScript</a></p>
+ </li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/function/caller/index.html b/files/uk/web/javascript/reference/global_objects/function/caller/index.html
new file mode 100644
index 0000000000..ab2fe55383
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/function/caller/index.html
@@ -0,0 +1,82 @@
+---
+title: Function.caller
+slug: Web/JavaScript/Reference/Global_Objects/Function/caller
+tags:
+  - Function
+  - JavaScript
+  - Властивість
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/caller
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Властивість <code><strong><em>function</em>.caller</strong></code> повертає функцію, яка викликала вказану функцію. Ця властивість заборонена у строгому режимі.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо функція <code>f</code> викликана кодом верхнього рівня, значенням <code>f.caller</code> буде {{jsxref("null")}}, інакше це буде функція, яка викликала <code>f</code>.</p>
+
+<p>Ця властивість замінює застарілу властивість {{jsxref("Functions/arguments/caller", "arguments.caller")}} об'єкта {{jsxref("Functions/arguments", "arguments")}}.</p>
+
+<p>Спеціальна властивість <code>__caller__</code>, яка повертала об'єкт активації функції, що викликала задану функцію, дозволяючи відбудовувати стек викликів, була прибрана з міркувань безпеки.</p>
+
+<h3 id="Примітки">Примітки</h3>
+
+<p>Зауважте, що у випадку рекурсії ви не зможете відбудувати стек викликів за допомогою цієї властивості. Розглянемо:</p>
+
+<pre class="brush: js">function f(n) { g(n - 1); }
+function g(n) { if (n &gt; 0) { f(n); } else { stop(); } }
+f(2);
+</pre>
+
+<p>У момент, коли викликається <code>stop()</code>, стек викликів буде таким:</p>
+
+<pre class="brush: js">f(2) -&gt; g(1) -&gt; f(1) -&gt; g(0) -&gt; stop()
+</pre>
+
+<p>Наступне дорівнює true:</p>
+
+<pre class="brush: js">stop.caller === g &amp;&amp; f.caller === g &amp;&amp; g.caller === f
+</pre>
+
+<p>Отже, якщо ви спробуєте отримати стек викликів у функції <code>stop()</code> ось так:</p>
+
+<pre class="brush: js">var f = stop;
+var stack = 'Стек викликів:';
+while (f) {
+  stack += '\n' + f.name;
+  f = f.caller;
+}
+</pre>
+
+<p>цикл ніколи не зупиниться.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Перевірка_значення_властивості_функції_caller">Перевірка значення властивості функції <code>caller</code></h3>
+
+<p>Наступний код перевіряє значення властивості функції <code>caller</code>.</p>
+
+<pre class="brush: js">function myFunc() {
+  if (myFunc.caller == null) {
+    return 'Ця функція викликана з верхнього рівня!';
+  } else {
+    return 'Ця функція викликана ' + myFunc.caller;
+  }
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Не є частиною жодних специфікацій. Реалізовано у JavaScript 1.5.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Function.caller")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>Помилка реалізації для SpiderMonkey {{bug(65683)}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/function/displayname/index.html b/files/uk/web/javascript/reference/global_objects/function/displayname/index.html
new file mode 100644
index 0000000000..1e18f4a98c
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/function/displayname/index.html
@@ -0,0 +1,80 @@
+---
+title: Function.displayName
+slug: Web/JavaScript/Reference/Global_Objects/Function/displayName
+tags:
+  - Function
+  - JavaScript
+  - Властивість
+  - нестандартна
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/displayName
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Властивість <code><strong><em>function</em>.displayName</strong></code> повертає ім'я, що відображається для функції.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Властивість <code>displayName</code>, якщо вона вказана, повертає ім'я, яке відображається для функції:</p>
+
+<pre class="brush: js">function doSomething() {}
+
+console.log(doSomething.displayName); // "undefined"
+
+var popup = function(content) { console.log(content); };
+
+popup.displayName = 'Показати спливаюче вікно';
+
+console.log(popup.displayName); // "Показати спливаюче вікно"
+</pre>
+
+<p>Ви можете визначити функцію з ім'ям, яке відображається, у {{jsxref("Functions", "функціональному виразі", "", 1)}}:</p>
+
+<pre class="brush: js">var object = {
+  someMethod: function() {}
+};
+
+object.someMethod.displayName = 'someMethod';
+
+console.log(object.someMethod.displayName); // виводить "someMethod"
+
+try { someMethod } catch(e) { console.log(e); }
+// ReferenceError: someMethod is not defined
+</pre>
+
+<p>Ви можете динамічно змінювати властивість <code>displayName</code>:</p>
+
+<pre class="brush: js">var object = {
+  // анонімна
+  someMethod: function(value) {
+    arguments.callee.displayName = 'мій метод (' + value + ')';
+  }
+};
+
+console.log(object.someMethod.displayName); // "undefined"
+
+object.someMethod('123')
+console.log(object.someMethod.displayName); // "мій метод (123)"
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Консолі та профайлери зазвичай використовують цю властивість замість {{jsxref("Function.name", "func.name")}} для відображення імені функції.</p>
+
+<p>Записавши наведений код у консоль, ви маєте побачити щось на кшталт "<code>function My Function()</code>":</p>
+
+<pre class="brush: js">var a = function() {};
+a.displayName = 'My Function';
+
+a; // "function My Function()"</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Не є частиною жодних специфікацій.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Function.displayName")}}</p>
+</div>
diff --git a/files/uk/web/javascript/reference/global_objects/function/index.html b/files/uk/web/javascript/reference/global_objects/function/index.html
new file mode 100644
index 0000000000..f2672fe180
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/function/index.html
@@ -0,0 +1,155 @@
+---
+title: Function
+slug: Web/JavaScript/Reference/Global_Objects/Function
+tags:
+  - Constructor
+  - Function
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/Function
+---
+<div>{{JSRef}}</div>
+
+<p><strong>Конструктор <code>Function</code></strong> створює новий <strong>об'єкт</strong> <code>Function</code>. Прямий виклик конструктора може створювати функції динамічно, але має проблеми з безпекою та схожі з {{jsxref("eval")}} (але менш значні) проблеми з продуктивністю. Однак, на відміну від eval, конструктор Function створює функції, які виконуються тільки у глобальній області видимості.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/function-constructor.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<p>У JavaScript кожна функція є об'єктом <code>Function</code>. Це можна побачити за допомогою коду <code>(function(){}).constructor === Function</code>, який повертає true.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>new Function ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>Імена, які будуть використані функцією в якості імен формальних аргументів. Кожне ім'я має бути рядком, який представляє ідентифікатор JavaScript, або списком таких рядків, розділених комою; наприклад, "<code>x</code>", "<code>theValue</code>" або "<code>a,b</code>".</dd>
+ <dt><code>functionBody</code></dt>
+ <dd>Рядок, що містить інструкції JavaScript, які складають визначення функції.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Об'єкти <code>Function</code>, створені конструктором <code>Function</code>, аналізуються, коли створюється функція. Це менш ефективно, ніж оголошувати функцію <a href="/uk/docs/Web/JavaScript/Reference/Operators/function">функціональним виразом</a> або <a href="/uk/docs/Web/JavaScript/Reference/Statements/function">оголошенням функції</a> та викликати її, бо такі функції аналізуються разом з рештою коду.</p>
+
+<p>Усі аргументи, передані у функцію, сприймаються як імена ідентифікаторів параметрів функції, що має бути створена, в тому порядку, в якому вони передані.</p>
+
+<p>Виклик конструктора <code>Function</code> у вигляді функції (без оператора <code>new</code>) має той самий ефект, що й виклик конструктора.</p>
+
+<h2 id="Властивості_та_методи_обєкта_Function">Властивості та методи об'єкта <code>Function</code></h2>
+
+<p>Глобальний об'єкт <code>Function</code> не має власних методів та властивостей, однак, він успадковує деякі методи та властивості через ланцюжок прототипів від {{jsxref("Function.prototype")}}.</p>
+
+<h2 id="Обєкт_прототипу_Function">Об'єкт прототипу <code>Function</code></h2>
+
+<h3 id="Властивості">Властивості</h3>
+
+<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype', 'Властивості')}}</div>
+
+<h3 id="Методи">Методи</h3>
+
+<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype', 'Методи')}}</div>
+
+<h2 id="Екземпляри_Function">Екземпляри <code>Function</code></h2>
+
+<p>Екземпляри <code>Function</code> успадковують методи та властивості від {{jsxref("Function.prototype")}}. Як і в усіх конструкторах, ви можете змінити об'єкт прототипу конструктора, щоб внести зміни до усіх екземплярів <code>Function</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Визначення_аргументів_у_конструкторі_Function">Визначення аргументів у конструкторі <code>Function</code></h3>
+
+<p>Наступний код створює об'єкт <code>Function</code>, що приймає два аргументи.</p>
+
+<pre class="brush: js">// Цей приклад можна запустити прямо у консолі JavaScript
+
+// Створити функцію, що приймає два аргументи та повертає суму цих аргументів
+var adder = new Function('a', 'b', 'return a + b');
+
+// Виклик функції
+adder(2, 6);
+// &gt; 8
+</pre>
+
+<p>Аргументи "<code>a</code>" та "<code>b</code>" є іменами формальних аргументів, які використовуються у тілі функції, "<code>return a + b</code>".</p>
+
+<h3 id="Різниця_між_конструктором_Function_та_оголошенням_функції">Різниця між конструктором Function та оголошенням функції</h3>
+
+<p>Функції, створені конструктором <code>Function</code>, не утворюють замикань з контекстом свого cтворення; вони завжди cтворюються у глобальній області видимості. Під час виконання вони матимуть доступ лише до власних локальних змінних та глобальних змінних, а не до змінних з області видимості, де був створений конструктор <code>Function</code>. Це відрізняється від {{jsxref("eval")}} з кодом функціонального виразу.</p>
+
+<pre class="brush: js">var x = 10;
+
+function createFunction1() {
+    var x = 20;
+    return new Function('return x;'); // цей |x| звертається до глобального |x|
+}
+
+function createFunction2() {
+    var x = 20;
+    function f() {
+        return x; // цей |x| звертається до локального |x|, записаного вище
+    }
+    return f;
+}
+
+var f1 = createFunction1();
+console.log(f1());          // 10
+var f2 = createFunction2();
+console.log(f2());          // 20</pre>
+
+<p>В той час, як цей код працює у веб-переглядачах, <code>f1()</code> спричинить <code>ReferenceError</code> у Node.js, через те, що <code>x</code> не буде знайдено. Це відбувається тому, що область видимості верхнього рівня у Node не є глобальною областю видимості, і <code>x</code> буде локальною змінною модуля.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3', 'Function')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-objects', 'Function')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Function")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Functions", "Функції та область видимості функції")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Statements/function", "оголошення функції")}}</li>
+ <li>{{jsxref("Operators/function", "функціональний вираз")}}</li>
+ <li>{{jsxref("Statements/function*", "function* statement")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/function/isgenerator/index.html b/files/uk/web/javascript/reference/global_objects/function/isgenerator/index.html
new file mode 100644
index 0000000000..65c42052c7
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/function/isgenerator/index.html
@@ -0,0 +1,56 @@
+---
+title: Function.prototype.isGenerator()
+slug: Web/JavaScript/Reference/Global_Objects/Function/isGenerator
+tags:
+  - Function
+  - JavaScript
+  - застарілий
+  - метод
+  - нестандартний
+translation_of: Archive/Web/JavaScript/Function.isGenerator
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Нестандартний метод <code><strong>isGenerator()</strong></code> використовувався для визначення, чи є функція <a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators.3A_a_better_way_to_build_Iterators">генератором</a>. Він був видалений з Firefox, починаючи з версії 58.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>fun</var>.isGenerator()</code></pre>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Значення {{jsxref("Boolean")}}, яке вказує, чи є надана функція <a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators.3A_a_better_way_to_build_Iterators">генератором</a>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>isGenerator()</code> визначає, чи є функція <em><code>fun</code></em> <a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators.3A_a_better_way_to_build_Iterators">генератором</a>. Він був частиною ранніх пропозицій специфікації Harmony, але не був включений у специфікацію ECMAScript 2015.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">function f() {}
+
+function* g() {
+  yield 42;
+}
+
+console.log('f.isGenerator() = ' + f.isGenerator()); // f.isGenerator() = false
+console.log('g.isGenerator() = ' + g.isGenerator()); // g.isGenerator() = true
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Не є частиною жодних специфікацій. Реалізований у JavaScript 1.8.6.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Function.isGenerator")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators">Ітератори та генератори</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/function/length/index.html b/files/uk/web/javascript/reference/global_objects/function/length/index.html
new file mode 100644
index 0000000000..b5968dd976
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/function/length/index.html
@@ -0,0 +1,91 @@
+---
+title: Function.length
+slug: Web/JavaScript/Reference/Global_Objects/Function/length
+tags:
+  - Function
+  - JavaScript
+  - Властивість
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/length
+---
+<div>{{JSRef}}</div>
+
+<p>Властивість <code><strong>length</strong></code> зазначає кількість параметрів, очікуваних функцією.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/function-length.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0,0,1)}}</div>
+
+<h2 id="Опис">Опис</h2>
+
+<p><code>length</code> - це властивість функціонального об'єкта, вона вказує, скільки аргументів очікує функція, тобто кількість формальних параметрів. Ця кількість не включає {{jsxref("rest_parameters", "залишкові параметри", "", 1)}}, і рахує лише параметри до першого, що має значення по замовчуванню. Для контрасту, властивість {{jsxref("Functions/arguments/length", "arguments.length")}} є локальною властивістю функції, і надає кількість аргументів, що фактично передані у функцію.</p>
+
+<h3 id="Властивість_конструктора_Function">Властивість конструктора Function</h3>
+
+<p>Конструктор {{jsxref("Function")}} теж є об'єктом {{jsxref("Function")}}. Його властивість <code>length</code> має значення 1. Атрибути властивості такі: Writable (доступний для запису): <code>false</code>, Enumerable (доступний для переліку): <code>false</code>, Configurable (доступний для налаштування): <code>true</code>.</p>
+
+<h3 id="Властивість_об'єкта_прототипу_Function">Властивість об'єкта прототипу Function</h3>
+
+<p>Властивість об'єкта прототипу {{jsxref("Function")}} має значення 0.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">console.log(Function.length); /* 1 */
+
+console.log((function()        {}).length); /* 0 */
+console.log((function(a)       {}).length); /* 1 */
+console.log((function(a, b)    {}).length); /* 2 і т.д. */
+
+console.log((function(...args) {}).length);
+// 0, залишкові параметри не рахуються
+
+console.log((function(a, b = 1, c) {}).length);
+// 1, рахуються тільки параметри, розташовані до першого,
+// який має значення за замовчуванням</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.5.1', 'Function.length')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-instances-length', 'Function.length')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Атрибут <code>configurable</code> цієї властивості тепер дорівнює <code>true</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-instances-length', 'Function.length')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Function.length")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/function/name/index.html b/files/uk/web/javascript/reference/global_objects/function/name/index.html
new file mode 100644
index 0000000000..9fa89c9f14
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/function/name/index.html
@@ -0,0 +1,223 @@
+---
+title: Function.name
+slug: Web/JavaScript/Reference/Global_Objects/Function/name
+tags:
+  - ECMAScript 2015
+  - Function
+  - JavaScript
+  - Властивість
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/name
+---
+<div>{{JSRef}}</div>
+
+<p>Властивість тільки для читання об'єкта {{jsxref("Function")}} <code><strong>name</strong></code> відображає ім'я функції, яке було вказане при створенні, або <code>"anonymous"</code> для анонімних функцій.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/function-name.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<p>{{js_property_attributes(0,0,1)}}</p>
+
+<div class="blockIndicator note">
+<p>Зауважте, що у нестандартних реалізаціях до ES2015 атрибут <code>configurable</code> (доступний для налаштування) також мав значення <code>false</code>.</p>
+</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Ім'я_функції">Ім'я функції</h3>
+
+<p>Властивість <code>name</code> повертає ім'я функції.</p>
+
+<pre class="brush: js">function doSomething() {}
+console.log(doSomething.name); // "doSomething"
+</pre>
+
+<h3 id="Ім'я_конструктора_функції">Ім'я конструктора функції</h3>
+
+<p>Функції, створені за допомогою <code>new Function(...)</code> або просто <code>Function(...)</code> створюють об'єкти {{jsxref("Function")}}, а їхнє ім'я "anonymous".</p>
+
+<pre class="brush: js">(new Function).name; // "anonymous"</pre>
+
+<h3 id="Виведені_імена_функцій">Виведені імена функцій</h3>
+
+<p>Змінні та методи можуть вивести ім'я анонімної функції з її синтаксичної позиції (нове у ECMAScript 2015).</p>
+
+<pre class="brush: js">var f = function() {};
+var object = {
+  someMethod: function() {}
+};
+
+console.log(f.name); // "f"
+console.log(object.someMethod.name); // "someMethod"
+</pre>
+
+<p>Ви можете оголосити функцію з ім'ям у {{jsxref("Operators/Function", "функціональному виразі", "", 1)}}:</p>
+
+<pre class="brush: js">var object = {
+  someMethod: function object_someMethod() {}
+};
+console.log(object.someMethod.name); // виведе "object_someMethod"
+
+try { object_someMethod } catch(e) { console.log(e); }
+// ReferenceError: object_someMethod is not defined
+</pre>
+
+<p>Ви не можете змінювати ім'я функції, ця властивість доступна лише для читання:</p>
+
+<div class="hidden">
+<p>Наведений нижче приклад суперечить тому, що сказано на початку цього розділу і не працює як описано.</p>
+</div>
+
+<pre class="brush: js">var object = {
+  // anonymous
+  someMethod: function() {}
+};
+
+object.someMethod.name = 'otherMethod';
+console.log(object.someMethod.name); // someMethod
+</pre>
+
+<p>Однак, щоб змінити її, ви можете скористатись {{jsxref("Object.defineProperty()")}}.</p>
+
+<h3 id="Імена_лаконічних_методів">Імена лаконічних методів</h3>
+
+<pre class="brush: js">var o = {
+  foo(){}
+};
+o.foo.name; // "foo";</pre>
+
+<h3 id="Імена_зв'язаних_функцій">Імена зв'язаних функцій</h3>
+
+<p>Метод {{jsxref("Function.bind()")}} створює функцію, чиїм ім'ям буде "bound" плюс ім'я функції.</p>
+
+<pre class="brush: js">function foo() {};
+foo.bind({}).name; // "bound foo"</pre>
+
+<h3 id="Імена_функцій_для_гетерів_та_сетерів">Імена функцій для гетерів та сетерів</h3>
+
+<p>При використанні властивостей-аксесорів <code><a href="/uk/docs/Web/JavaScript/Reference/Functions/get">get</a></code> та <code><a href="/uk/docs/Web/JavaScript/Reference/Functions/set">set</a></code> у імені функції з'являється "get" або "set".</p>
+
+<pre class="brush: js">let o = {
+  get foo(){},
+  set foo(x){}
+};
+
+var descriptor = Object.getOwnPropertyDescriptor(o, "foo");
+descriptor.get.name; // "get foo"
+descriptor.set.name; // "set foo";</pre>
+
+<h3 id="Імена_функцій_у_класах">Імена функцій у класах</h3>
+
+<p>Ви можете скористатись <code>obj.constructor.name</code>, щоб перевірити "клас" об'єкта (але обов'язково прочитайте застереження нижче):</p>
+
+<pre class="brush: js">function Foo() {}  // Синтаксис ES2015: class Foo {}
+
+var fooInstance = new Foo();
+console.log(fooInstance.constructor.name); // виводить "Foo"</pre>
+
+<div class="blockIndicator warning">
+<p><strong>Застереження:</strong> Інтерпретатор коду встановить значення вбудованої властивості <code>Function.name</code> тільки якщо функція не має своєї властивості з назвою <em>name</em> (дивіться розділ <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-setfunctionname">9.2.11 ECMAScript2015 Language Specification</a>). Однак, ES2015 визначає ключове слово <em>static</em> таким чином, що статичні методі встановлюються як OwnProperty функції-конструктора класу (ECMAScript2015, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-runtime-semantics-classdefinitionevaluation">14.5.14.21.b</a>+ <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-object-initializer-runtime-semantics-propertydefinitionevaluation">12.2.6.9</a>).</p>
+</div>
+
+<p>І тому ми не можемо отримати ім'я класу фактично для жодного класу, що має статичний метод <code>name()</code>:</p>
+
+<pre class="brush: js">class Foo {
+  constructor() {}
+  static name() {}
+}</pre>
+
+<p>З методом <code>static name()</code>, <code>Foo.name</code> тепер містить не ім'я класу, а посилання на функцію <code>name()</code>. Наведене вище оголошення класу у синтаксисі ES2015 буде поводитись у Chrome чи Firefox схоже на наступний фрагмент коду у синтаксисі ES5:</p>
+
+<pre class="brush: js">function Foo() {}
+Object.defineProperty(Foo, 'name', { writable: true });
+Foo.name = function() {};</pre>
+
+<p>Спроба отримати клас <code>fooInstance</code> через <code>fooInstance.constructor.name</code> поверне нам зовсім не ім'я класу, а посилання на статичний метод класу. Приклад:</p>
+
+<pre class="brush: js">let fooInstance = new Foo();
+console.log(fooInstance.constructor.name); // виводить function name()</pre>
+
+<p>Ви могли також побачити у прикладі з синтаксисом ES5, що у Chrome чи Firefox наше статичне оголошення <code>Foo.name</code> стає <em>доступним для запису</em>. Вбудоване оголошення за відсутності користувацького статичного методу є <em>доступним лише для читання</em>:</p>
+
+<pre class="brush: js">Foo.name = 'Привіт';
+console.log(Foo.name);
+// виведе "Привіт", якщо клас має статичну властивість name(), інакше виведе "Foo".</pre>
+
+<p>Таким чином, не можна розраховувати, що вбудована властивість <code>Function.name</code> завжди міститиме ім'я класу.</p>
+
+<h3 id="Символи_в_якості_імен_функцій">Символи в якості імен функцій</h3>
+
+<p>Якщо {{jsxref("Symbol")}} використовується в якості імені функції і має опис, ім'ям метода буде опис у квадратних дужках.</p>
+
+<pre class="brush: js">let sym1 = Symbol("foo");
+let sym2 = Symbol();
+let o = {
+  [sym1]: function(){},
+  [sym2]: function(){}
+};
+
+o[sym1].name; // "[foo]"
+o[sym2].name; // ""</pre>
+
+<h2 id="Компресори_та_мініфікатори_JavaScript">Компресори та мініфікатори JavaScript</h2>
+
+<div class="blockIndicator warning">
+<p><strong>Застереження:</strong> Будьте обережні, використовуючи <code>Function.name</code> та перетворення коду, які здійснюють компресори (мініфікатори) або обфускатори JavaScript. Ці інструменти часто використовуються як частина конвеєра збірки JavaScript, щоб зменшити розмір програми перед розгортанням  у виробничому середовищі. Такі перетворення часто змінюють ім'я функції під час збірки.</p>
+</div>
+
+<p>Подібний першокод:</p>
+
+<pre class="brush: js">function Foo() {};
+let foo = new Foo();
+
+if (foo.constructor.name === 'Foo') {
+  console.log("'foo' є екземпляром 'Foo'");
+} else {
+  console.log('Ой-ой!');
+}</pre>
+
+<p>може бути стиснутий до:</p>
+
+<pre class="brush: js">function a() {};
+let b = new a();
+if (b.constructor.name === 'Foo') {
+  console.log("'foo' є екземпляром 'Foo'");
+} else {
+  console.log('Ой-ой!');
+}</pre>
+
+<p>У нестиснутій версії, програма виконує правдиву гілку і виводить <code>"'foo' є екземпляром 'Foo'"</code>. В той час, як у стиснутій версії вона поводиться по-іншому і виконує гілку else. Якщо ви покладаєтесь на <code>Function.name</code>, як у наведеному вище прикладі, переконайтесь, що ваш конвеєр збірки не змінює імена функцій, або не припускайте, що функція матиме певне ім'я.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-name', 'name')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-name', 'name')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Function.name")}}</p>
+
+<div id="compat-mobile"></div>
diff --git a/files/uk/web/javascript/reference/global_objects/function/prototype/index.html b/files/uk/web/javascript/reference/global_objects/function/prototype/index.html
new file mode 100644
index 0000000000..0b1e30cad1
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/function/prototype/index.html
@@ -0,0 +1,99 @@
+---
+title: Function.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Function/prototype
+tags:
+  - Function
+  - JavaScript
+  - Властивість
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Function
+---
+<div>{{JSRef}}</div>
+
+<p>Властивість <code><strong>Function.prototype</strong></code> є об'єктом прототипу {{jsxref("Function")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Об'єкти {{jsxref("Function")}} успадковуються від <code>Function.prototype</code>.  <code>Function.prototype</code> не можна змінити.</p>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt>{{jsxref("Function.prototype.arguments")}} {{deprecated_inline}}</dt>
+ <dd>Масив, що відповідає аргументам, переданим у функцію. Це застаріла властивість {{jsxref("Function")}}. Використовуйте натомість об'єкт {{jsxref("Functions/arguments", "arguments")}}, доступний всередині функції.</dd>
+ <dt><s class="obsoleteElement">{{jsxref("Function.arity")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">Вказувала кількість аргументів, очікуваних функцією, але була видалена. Використовуйте натомість властивість {{jsxref("Function.length", "length")}}.</s></dd>
+ <dt>{{jsxref("Function.prototype.caller")}} {{non-standard_inline}}</dt>
+ <dd>Вказує функцію, що викликала функцію, яка виконується.</dd>
+ <dt>{{jsxref("Function.prototype.length")}}</dt>
+ <dd>Вказує кількість аргументів, очікуваних функцією.</dd>
+ <dt>{{jsxref("Function.prototype.name")}}</dt>
+ <dd>Ім'я функції.</dd>
+ <dt>{{jsxref("Function.displayName")}} {{non-standard_inline}}</dt>
+ <dd>Ім'я, що відображається для функції.</dd>
+ <dt><code>Function.prototype.constructor</code></dt>
+ <dd>Вказує функцію, яка створює прототип об'єкта. Більше інформації дивіться на сторінці {{jsxref("Object.prototype.constructor")}}.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<dl>
+ <dt>{{jsxref("Function.prototype.apply()")}}</dt>
+ <dd>Викликає функцію та встановлює її <em>this</em> надане значення, аргументи можуть передаватися об'єктом {{jsxref("Array")}}.</dd>
+ <dt>{{jsxref("Function.prototype.bind()")}}</dt>
+ <dd>Створює нову функцію, в якої під час виклику <em>this</em> присвоєне надане значення, з заданою послідовністю аргументів, що передують будь-якім іншим наданим аргументам під час виклику нової функції.</dd>
+ <dt>{{jsxref("Function.prototype.call()")}}</dt>
+ <dd>Викликає (виконує) функцію та присвоює її <em>this</em> надане значення, аргументи можуть передаватися як є.</dd>
+ <dt>{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}</dt>
+ <dd>Повертає <code>true</code>, якщо функція є <a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators">генератором</a>; інакше повертає <code>false</code>.</dd>
+ <dt>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Повертає рядкове представлення першокоду функції. Заміщує метод {{jsxref("Object.prototype.toSource")}}.</dd>
+ <dt>{{jsxref("Function.prototype.toString()")}}</dt>
+ <dd>Повертає рядкове представлення першокоду функції. Заміщує метод {{jsxref("Object.prototype.toString")}}.</dd>
+</dl>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.5.2', 'Function.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-instances-prototype', 'Function.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-instances-prototype', 'Function.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Function.prototype")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/function/tosource/index.html b/files/uk/web/javascript/reference/global_objects/function/tosource/index.html
new file mode 100644
index 0000000000..a4a3cb4d16
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/function/tosource/index.html
@@ -0,0 +1,70 @@
+---
+title: Function.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Function/toSource
+tags:
+  - Function
+  - JavaScript
+  - метод
+  - нестандартний
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/toSource
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Метод <code><strong>toSource()</strong></code> повертає рядкове представлення першокоду об'єкта.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>function</var>.toSource();
+</pre>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Рядкове представлення першокоду об'єкта.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>toSource</code> повертає наступні значення:</p>
+
+<ul>
+ <li>Для вбудованого об'єкта {{jsxref("Function")}} <code>toSource()</code> повертає наступний рядок, який вказує, що першокод недоступний:
+
+  <pre class="brush: js">function Function() {
+  [native code]
+}
+</pre>
+ </li>
+ <li>Для користувацьких функцій <code>toSource()</code> повертає першокод JavaScript, який визначає об'єкт, у вигляді рядка.
+  <pre class="brush: js">// Для прикладу:
+function hello() {
+  console.log("Всім привіт!");
+}
+
+hello.toSource();
+</pre>
+
+  <pre class="brush: js">// Результат:
+"function hello() {
+    console.log(\"Всім привіт!\");
+}"</pre>
+ </li>
+</ul>
+
+<p>Цей метод зазвичай викликається внутрішньо у JavaScript, а не явно у коді. Ви можете викликати <code>toSource()</code> під час налагодження для дослідження вмісту об'єкта.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Не є частиною жодного стандарту. Реалізований у JavaScript 1.3.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Function.toSource")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/function/tostring/index.html b/files/uk/web/javascript/reference/global_objects/function/tostring/index.html
new file mode 100644
index 0000000000..5c4b58e347
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/function/tostring/index.html
@@ -0,0 +1,233 @@
+---
+title: Function.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Function/toString
+tags:
+  - Function
+  - JavaScript
+  - Prototype
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/toString
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>toString()</strong></code> повертає рядкове представлення першокоду функції.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/function-tostring.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>function</var>.toString()</code></pre>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Рядкове представлення першокоду функції.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Об'єкт {{jsxref("Function")}} заміщує метод {{jsxref("Object.prototype.toString", "toString")}}, успадкований від {{jsxref("Object")}}; він не успадковує {{jsxref("Object.prototype.toString")}}. Для визначених користувачем об'єктів {{jsxref("Function")}} метод <code>toString</code> повертає рядок, який містить текстовий сегмент першокоду, що використовувався для визначення функції.</p>
+
+<p>JavaScript викликає метод <code>toString</code> автоматично, коли {{jsxref("Function")}} потрібно відобразити у вигляді текстового значення, наприклад, при поєднанні функції з рядком.</p>
+
+<p>Метод <code>toString()</code> викине виняток типу {{jsxref("TypeError")}} ("Function.prototype.toString called on incompatible object"), якщо його значення <code>this</code> не є об'єктом <code>Function</code>.</p>
+
+<pre class="brush: js example-bad">Function.prototype.toString.call('foo'); // TypeError
+</pre>
+
+<p>Якщо метод <code>toString()</code> викликається на вбудованих функціональних об'єктах або функціях, створених <code>Function.prototype.bind</code>, <code>toString()</code> повертає <em>рядок нативної функції</em>, який виглядає так:</p>
+
+<pre class="brush: js">"function () {\n    [native code]\n}"
+</pre>
+
+<p>Якщо метод <code>toString()</code> викликається на функції, створеної конструктором <code>Function</code>, <code>toString()</code> повертає першокод синтезованої декларації функції, названої "anonymous", з наданими параметрами та тілом функції.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Функція</th>
+   <th scope="col">Результат Function.prototype.toString</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <pre>
+function f(){}</pre>
+   </td>
+   <td>
+    <pre>
+"function f(){}"</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre>
+class A { a(){} }</pre>
+   </td>
+   <td>
+    <pre>
+"class A { a(){} }"</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre>
+function* g(){}</pre>
+   </td>
+   <td>
+    <pre>
+"function* g(){}"</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre>
+a =&gt; a</pre>
+   </td>
+   <td>
+    <pre>
+"a =&gt; a"</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre>
+({ a(){} }.a)</pre>
+   </td>
+   <td>
+    <pre>
+"a(){}"</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre>
+({ *a(){} }.a)</pre>
+   </td>
+   <td>
+    <pre>
+"*a(){}"</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre>
+({ [0](){} }[0])</pre>
+   </td>
+   <td>
+    <pre>
+"[0](){}"</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre>
+Object.getOwnPropertyDescriptor({
+    get a(){}
+}, "a").get</pre>
+   </td>
+   <td>
+    <pre>
+"get a(){}"</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre>
+Object.getOwnPropertyDescriptor({
+    set a(x){}
+}, "a").set</pre>
+   </td>
+   <td>
+    <pre>
+"set a(x){}"</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre>
+Function.prototype.toString</pre>
+   </td>
+   <td>
+    <pre>
+"function toString() { [native code] }"</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre>
+(function f(){}.bind(0))</pre>
+   </td>
+   <td>
+    <pre>
+"function () { [native code] }"</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre>
+Function("a", "b")</pre>
+   </td>
+   <td>
+    <pre>
+"function anonymous(a\n) {\nb\n}"</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікації</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення. Реалізовано у JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function.prototype.tostring', 'Function.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Додані ще специфічні вимоги до рядкового представлення.</td>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/Function-prototype-toString-revision/#sec-introduction"><code>Function.prototype.toString</code> revisions proposal</a></td>
+   <td>Чернетка</td>
+   <td>Стандартизує рядок нативної функції, закінчення рядків.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function.prototype.tostring', 'Function.prototype.toString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Function.toString")}}</p>
+</div>
+
+<h2 id="Примітки_щодо_Firefox">Примітки щодо Firefox</h2>
+
+<ul>
+ <li>Починаючи з Firefox 17, метод <code>Function.prototype.toString()</code> був реалізований зберіганням першокоду функції. Декомпілятор був прибраний, щоб параметр <code>indentation</code> більше не був потрібний. Більше інформації дивіться на сторінці {{bug("761723")}}.</li>
+ <li>Починаюи з Firefox 38 і до 63, метод <code>Function.prototype.toString()</code> викидав об'єкти {{jsxref("Proxy")}} ({{bug(1100936)}} та {{bug(1440468)}}).</li>
+</ul>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/generator/index.html b/files/uk/web/javascript/reference/global_objects/generator/index.html
new file mode 100644
index 0000000000..30ac13af34
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/generator/index.html
@@ -0,0 +1,138 @@
+---
+title: Generator
+slug: Web/JavaScript/Reference/Global_Objects/Generator
+tags:
+  - ECMAScript 2015
+  - Generator
+  - JavaScript
+  - Довідка
+  - генератор
+  - застарілий генератор
+  - застарілий ітератор
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator
+---
+<div>{{JSRef}}</div>
+
+<p>Об'єкт <code><strong>Generator</strong></code> повертається {{jsxref("Statements/function*", "функцією-генератором", "", 1)}} та відповідає як <a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору#Протокол_ітерабельного_обєкта">протоколу ітерабельного об'єкта</a>, так і <a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору#Протокол_ітератора">протоколу ітератора</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen(); // "Generator { }"</pre>
+
+<h2 id="Методи">Методи</h2>
+
+<dl>
+ <dt>{{jsxref("Generator.prototype.next()")}}</dt>
+ <dd>Повертає значення, видане виразом {{jsxref("Operators/yield", "yield")}}.</dd>
+ <dt>{{jsxref("Generator.prototype.return()")}}</dt>
+ <dd>Повертає надане значення та завершує генератор.</dd>
+ <dt>{{jsxref("Generator.prototype.throw()")}}</dt>
+ <dd>Викидає помилку у генераторі (також завершує генератор, якщо помилка не була перехоплена всередині генератора).</dd>
+</dl>
+
+<h2 id="Приклад">Приклад</h2>
+
+<h3 id="Нескінченний_ітератор">Нескінченний ітератор</h3>
+
+<pre class="brush: js">function* idMaker() {
+    var index = 0;
+    while(true)
+        yield index++;
+}
+
+var gen = idMaker(); // "Generator { }"
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+// ...</pre>
+
+<h2 id="Застарілі_обєкти-генератори">Застарілі об'єкти-генератори</h2>
+
+<p>Firefox (SpiderMonkey) також реалізував більш ранню версію генераторів у <a href="/uk/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7</a>, де зірочка (*) у оголошенні функції не була потрібна (ви просто використовували ключове слово <code>yield</code> у тілі функції). Однак, підтримка застарілих генераторів була прибрана, починаючи з Firefox 58 (вийшов 23 січня, 2018) ({{bug(1083482)}}).</p>
+
+<h3 id="Методи_застарілого_генератора">Методи застарілого генератора</h3>
+
+<dl>
+ <dt><code>Generator.prototype.next() </code>{{non-standard_inline}}</dt>
+ <dd>Повертає значення, видане виразом {{jsxref("Operators/yield", "yield")}}. Цей метод відповідає методу <code>next()</code> у об'єкті-генераторі ES2015.</dd>
+ <dt><code>Generator.prototype.close()</code> {{non-standard_inline}}</dt>
+ <dd>Закриває генератор, таким чином, виклик <code>next()</code> викине помилку <a href="/uk/docs/Archive/Web/StopIteration">StopIteration</a>. Цей метод відповідає методу <code>return()</code> у об'єкті-генераторі ES2015.</dd>
+ <dt><code>Generator.prototype.send()</code> {{non-standard_inline}}</dt>
+ <dd>Відсилав значення у генератор. Значення повертається виразом {{jsxref("Operators/yield", "yield")}} та повертає значення, видане наступним виразом {{jsxref("Operators/yield", "yield")}}. Метод <code>send(x)</code> відповідає методу <code>next(x)</code> у об'єкті-генераторі ES2015.</dd>
+ <dt><strong><code>Generator.</code></strong><code>prototype.</code><strong><code>throw()</code> </strong> {{non-standard_inline}}</dt>
+ <dd>Викидає помилку у генераторі. Цей метод відповідає методу <code>throw()</code> у об'єкті-генераторі ES2015.</dd>
+</dl>
+
+<h3 id="Приклад_застарілого_генератора">Приклад застарілого генератора</h3>
+
+<pre class="brush: js">function* fibonacci() {
+  var a = yield 1;
+  yield a * 2;
+}
+
+var it = fibonacci();
+console.log(it);          // "Generator {  }"
+console.log(it.next());   // 1
+console.log(it.send(10)); // 20
+console.log(it.close());  // undefined
+console.log(it.next());   // викидає StopIteration (бо генератор вже закритий)
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator-objects', 'Generator objects')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator-objects', 'Generator objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Generator")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<h3 id="Застарілі_генератори">Застарілі генератори</h3>
+
+<ul>
+ <li>{{jsxref("Statements/Legacy_generator_function", "Застаріла функція-генератор", "", 1)}}</li>
+ <li>{{jsxref("Operators/Legacy_generator_function", "Вираз застарілої функції-генератора", "", 1)}}</li>
+ <li><a href="/uk/docs/Archive/Web/StopIteration">StopIteration</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol">Протокол застарілого ітератора</a></li>
+</ul>
+
+<h3 id="Генератори_ES2015">Генератори ES2015</h3>
+
+<ul>
+ <li>{{jsxref("Functions", "Функції", "", 1)}}</li>
+ <li>{{jsxref("Statements/function", "function")}}</li>
+ <li>{{jsxref("Operators/function", "функціональний вираз")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Statements/function*", "function*")}}</li>
+ <li>{{jsxref("Operators/function*", "вираз function*")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору">Протоколи перебору</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/generator/next/index.html b/files/uk/web/javascript/reference/global_objects/generator/next/index.html
new file mode 100644
index 0000000000..ea558c04ed
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/generator/next/index.html
@@ -0,0 +1,114 @@
+---
+title: Generator.prototype.next()
+slug: Web/JavaScript/Reference/Global_Objects/Generator/next
+tags:
+  - ECMAScript 2015
+  - Generator
+  - JavaScript
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator/next
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>next</strong></code><strong><code>()</code></strong> повертає об'єкт з двома властивостями, <code>done</code> та <code>value</code>. Ви також можете передати параметр у метод <code>next</code>, щоб передати значення у генератор.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>gen</var>.next(value)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Значення, яке передається генератору. Значення буде присвоєне як результат виразу yield, тобто, у [variable] = yield [expression], значення, передане у функцію .next, буде присвоєне [variable]</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object">Об'єкт</a></code> з двома властивостями:</p>
+
+<ul>
+ <li><code>done</code> (булеве значення)
+
+  <ul>
+   <li>Має значення <code>true</code>, якщо ітератор досяг кінця послідовності перебору. В цьому випадку <code>value</code> за бажанням визначає <em>повернене значення</em> ітератора.</li>
+   <li>Має значення <code>false</code>, якщо ітератор зміг видати наступне значення послідовності. Це аналогічно тому, щоб взагалі не вказувати значення властивості <code>done</code>.</li>
+  </ul>
+ </li>
+ <li><code>value</code> - будь-яке значення JavaScript, повернене ітератором. Може бути пропущене, коли <code>done</code> дорівнює <code>true</code>.</li>
+</ul>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_next">Використання <code>next()</code></h3>
+
+<p>Наступний приклад демонструє простий генератор та об'єкт, що його вертає метод <code>next</code>:</p>
+
+<pre class="brush: js">function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen(); // "Generator { }"
+g.next();      // "Object { value: 1, done: false }"
+g.next();      // "Object { value: 2, done: false }"
+g.next();      // "Object { value: 3, done: false }"
+g.next();      // "Object { value: undefined, done: true }"
+</pre>
+
+<h3 id="Передача_значень_генератору">Передача значень генератору</h3>
+
+<p>В цьому прикладі <code>next</code> викликається зі значенням. Зауважте, що перший виклик нічого не залогував, тому що генератор початково нічого не видавав.</p>
+
+<pre class="brush: js">function* gen() {
+  while(true) {
+    var value = yield null;
+    console.log(value);
+  }
+}
+
+var g = gen();
+g.next(1);
+// "{ value: null, done: false }"
+g.next(2);
+// 2
+// "{ value: null, done: false }"
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator.prototype.next', 'Generator.prototype.next')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator.prototype.next', 'Generator.prototype.next')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Generator.next")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><code><a href="/uk/docs/Web/JavaScript/Reference/Statements/function*">function*</a></code></li>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators">Ітератори та генератори</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/generator/return/index.html b/files/uk/web/javascript/reference/global_objects/generator/return/index.html
new file mode 100644
index 0000000000..fd1ebcbeee
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/generator/return/index.html
@@ -0,0 +1,101 @@
+---
+title: Generator.prototype.return()
+slug: Web/JavaScript/Reference/Global_Objects/Generator/return
+tags:
+  - ECMAScript 2015
+  - Generator
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator/return
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>return()</strong></code> вертає надане значення та завершує генератор.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>gen</var>.return(value)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Значення, яке треба повернути.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Значення, надане як аргумент.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_return">Використання <code>return()</code></h3>
+
+<p>Наступний приклад демонструє простий генератор та метод <code>return</code>.</p>
+
+<pre class="brush: js">function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen();
+
+g.next();        // { value: 1, done: false }
+g.return('foo'); // { value: "foo", done: true }
+g.next();        // { value: undefined, done: true }
+</pre>
+
+<p>Якщо <code>return(value)</code> викликається на генераторі, який вже знаходиться у "завершеному" стані, він залишиться у "завершеному" стані. Якщо жодного аргументу не надано, властивість <code>value</code> поверненого об'єкта буде такою ж, як при виклику <code>.next()</code>. Якщо аргумент надано, він буде присвоєний як значення властивості <code>value</code> поверненого об'єкта.</p>
+
+<pre class="brush: js">function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen();
+g.next(); // { value: 1, done: false }
+g.next(); // { value: 2, done: false }
+g.next(); // { value: 3, done: false }
+g.next(); // { value: undefined, done: true }
+g.return(); // { value: undefined, done: true }
+g.return(1); // { value: 1, done: true }
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator.prototype.return', 'Generator.prototype.return')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator.prototype.return', 'Generator.prototype.return')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Generator.return")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><code><a href="/uk/docs/Web/JavaScript/Reference/Statements/function*">function*</a></code></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/generator/throw/index.html b/files/uk/web/javascript/reference/global_objects/generator/throw/index.html
new file mode 100644
index 0000000000..ec8fc9d937
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/generator/throw/index.html
@@ -0,0 +1,100 @@
+---
+title: Generator.prototype.throw()
+slug: Web/JavaScript/Reference/Global_Objects/Generator/throw
+tags:
+  - ECMAScript 2015
+  - Generator
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator/throw
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>throw()</strong></code> відновлює виконання генератора викиданням у ньому помилки та повертає об'єкт з двома властивостями, <code>done</code> та <code>value</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>gen</var>.throw(exception)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>exception</code></dt>
+ <dd>Виняток, який треба викинути. З метою налагоджування корисно робити його <code>instanceof</code> {{jsxref("Error")}}.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object">Об'єкт</a></code> з двома властивостями:</p>
+
+<ul>
+ <li><code>done</code> (булеве значення)
+
+  <ul>
+   <li>Має значення <code>true</code>, якщо ітератор досяг кінця послідовності перебору. В цьому випадку <code>value</code> за бажанням визначає <em>повернене значення</em> ітератора.</li>
+   <li>Має значення <code>false</code>, якщо ітератор зміг видати наступне значення послідовності. Це аналогічно тому, щоб взагалі не вказувати значення властивості <code>done</code>.</li>
+  </ul>
+ </li>
+ <li>будь-яке значення JavaScript, повернене ітератором. Може бути пропущене, коли <code>done</code> дорівнює <code>true</code>.</li>
+</ul>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_throw">Використання <code>throw()</code></h3>
+
+<p>Наступний приклад демонструє простий генератор та помилку, що викидається методом <code>throw</code>. Помилку, як завжди, можна перехопити блоком <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code>.</p>
+
+<pre class="brush: js">function* gen() {
+  while(true) {
+    try {
+       yield 42;
+    } catch(e) {
+      console.log('Перехоплено помилку!');
+    }
+  }
+}
+
+var g = gen();
+g.next();
+// { value: 42, done: false }
+g.throw(new Error('Щось пішло не за планом'));
+// "Перехоплено помилку!"
+// { value: 42, done: false }
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Generator.throw")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><code><a href="/uk/docs/Web/JavaScript/Reference/Statements/function*">function*</a></code></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/generatorfunction/index.html b/files/uk/web/javascript/reference/global_objects/generatorfunction/index.html
new file mode 100644
index 0000000000..cb529b5095
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/generatorfunction/index.html
@@ -0,0 +1,114 @@
+---
+title: GeneratorFunction
+slug: Web/JavaScript/Reference/Global_Objects/GeneratorFunction
+tags:
+  - ECMAScript 2015
+  - GeneratorFunction
+  - JavaScript
+  - Ітератор
+  - Конструктор
+translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction
+---
+<div>{{JSRef}}</div>
+
+<p><strong>Конструктор</strong> <strong><code>GeneratorFunction</code></strong> створює новий об'єкт {{jsxref("Statements/function*", "функції-генератора")}}. У JavaScript кожна функція-генератор насправді є об'єктом <code>GeneratorFunction</code>.</p>
+
+<p>Зауважте, що <code>GeneratorFunction</code> не є глобальним об'єктом. Його можна отримати, виконавши наступний код.</p>
+
+<pre class="brush: js">Object.getPrototypeOf(function*(){}).constructor
+</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>new GeneratorFunction ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>Імена, що використовуватиме функція в якості імен формальних аргументів. Кожне повинне бути рядком, що є коректним ідентифікатором JavaScript або списком таких рядків, розділених комою; наприклад, "<code>x</code>", "<code>theValue</code>" або "<code>a,b</code>".</dd>
+ <dt><code>functionBody</code></dt>
+ <dd>Рядок, що містить інструкції JavaScript, які складають визначення функції.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Об'єкти {{jsxref("Statements/function*", "функцій-генераторів")}}, створені конструктором <code>GeneratorFunction</code>, розбираються, коли створюється функція. Це менш ефективно, ніж оголошення функції-генератора {{jsxref("Statements/function*", "виразом function*")}} та її виклик у вашому коді, тому що такі функції розбираються з рештою коду.</p>
+
+<p>Усі аргументи, передані у функцію, вважаються іменами ідентифікаторів параметрів функції, яка має бути створена, у порядку, в якому вони були передані.</p>
+
+<div class="note">
+<p><strong>Заувага:</strong> {{jsxref("Statements/function*", "функції-генератори")}}, створені конструктором <code>GeneratorFunction</code>, не створюють замикань зі своїм контекстом виконання; вони завжди створюються у глобальній області видимості. Під час виконання вони мають доступ лише до власних локальних змінних та до глобальних, але не до змінних області видимості, в якій був викликаний конструктор <code>GeneratorFunction</code>. Це відрізняється від використання {{jsxref("Global_Objects/eval", "eval")}} з кодом для виразу функції-генератора.</p>
+</div>
+
+<p>Виклик конструктора <code>GeneratorFunction</code> як функції (без оператора <code>new</code>) має такий самий ефект, як і виклик його як конструктора.</p>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt><code><strong>GeneratorFunction.length</strong></code></dt>
+ <dd>Властивість довжини конструктора <code>GeneratorFunction</code>, чиє значення дорівнює 1.</dd>
+ <dt>{{jsxref("GeneratorFunction.prototype")}}</dt>
+ <dd>Дозволяє додавати властивості до усіх об'єктів функцій-генераторів.</dd>
+</dl>
+
+<h2 id="Прототип_GeneratorFunction">Прототип <code>GeneratorFunction</code></h2>
+
+<h3 id="Властивості_2">Властивості</h3>
+
+<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype', 'Властивості')}}</div>
+
+<h2 id="Екземпляри_GeneratorFunction">Екземпляри <code>GeneratorFunction</code></h2>
+
+<p>Екземпляри <code>GeneratorFunction</code> успадковують методи та властивості від {{jsxref("GeneratorFunction.prototype")}}. Як в усіх конструкторах, ви можете змінити прототип конструктора, щоб внести зміни до усіх екземплярів <code>GeneratorFunction</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Створення_функції-генератора_від_конструктора_GeneratorFunction">Створення функції-генератора від конструктора <code>GeneratorFunction</code></h3>
+
+<pre class="brush: js">var GeneratorFunction = Object.getPrototypeOf(function*(){}).constructor
+var g = new GeneratorFunction('a', 'yield a * 2');
+var iterator = g(10);
+console.log(iterator.next().value); // 20
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generatorfunction-objects', 'GeneratorFunction')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generatorfunction-objects', 'GeneratorFunction')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.GeneratorFunction")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Statements/function*", "оператор function*")}}</li>
+ <li>{{jsxref("Operators/function*", "вираз function*")}}</li>
+ <li>{{jsxref("Global_Objects/Function", "Function")}}</li>
+ <li>{{jsxref("Statements/function", "оператор function")}}</li>
+ <li>{{jsxref("Operators/function", "функціональний вираз")}}</li>
+ <li>{{jsxref("Functions", "Функції", "", 1)}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/generatorfunction/prototype/index.html b/files/uk/web/javascript/reference/global_objects/generatorfunction/prototype/index.html
new file mode 100644
index 0000000000..8f8fcce4c0
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/generatorfunction/prototype/index.html
@@ -0,0 +1,65 @@
+---
+title: GeneratorFunction.prototype
+slug: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype
+tags:
+  - ECMAScript 2015
+  - GeneratorFunction
+  - JavaScript
+  - Ітератор
+  - Властивість
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction
+---
+<div>{{JSRef}}</div>
+
+<p>Властивість <code><strong>GeneratorFunction.prototype</strong></code> відображає прототип {{jsxref("GeneratorFunction")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Об'єкти {{jsxref("GeneratorFunction")}} успадковуються від <code>GeneratorFunction.prototype</code>. <code>GeneratorFunction.prototype</code> не можна змінювати.</p>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt><code><strong>GeneratorFunction.constructor</strong></code></dt>
+ <dd>Початковим значенням є {{jsxref("GeneratorFunction")}}.</dd>
+ <dt><code><strong>GeneratorFunction.prototype.prototype</strong></code></dt>
+ <dd>Значення дорівнює <code>%GeneratorPrototype%</code>.</dd>
+</dl>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.GeneratorFunction.prototype")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/globalthis/index.html b/files/uk/web/javascript/reference/global_objects/globalthis/index.html
new file mode 100644
index 0000000000..1ca1578f97
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/globalthis/index.html
@@ -0,0 +1,87 @@
+---
+title: globalThis
+slug: Web/JavaScript/Reference/Global_Objects/globalThis
+translation_of: Web/JavaScript/Reference/Global_Objects/globalThis
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p><span class="seoSummary">Глобальна властивість <code><strong>globalThis</strong></code> містить значення глобального <code>this</code>, яке являється глобальним об'єктом.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-globalthis.html")}}</div>
+
+<p class="hidden">Код для цього інтерактивного приклада зберігається в репозитарії на GitHub. Якщо Ви бажаєте приєднатися до проекту інтерактивних прикладів, будь-ласка зклонуйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та відправте нам "pull request".</p>
+
+<p>{{JS_Property_Attributes(1, 0, 1)}}</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox">globalThis
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Історично, для доступу до глобальних об'єктів використовується різний синтаксис в різних оточеннях JavaScript. В Веб ви можете використовувати {{domxref("Window.window", "window")}}, {{domxref("Window.self", "self")}}, або {{domxref("Window.frames", "frames")}} - але в <a href="/en-US/docs/Web/API/Worker">Веб Воркерах</a> лише <code>self</code> працюватиме. В Node.js нічого з вище-перерахоованого не працюватиме, і ви повинні використовувати <code>global</code>.<br>
+ Ключове слово <code>this</code> ви можете використовувати в середині функцій в не-суворому режимі, інакше <code>this</code> буде <code>undefined</code> в Модулях та в середині функцій в суворому режимі. Ви також можете використовувати <code>Function('return this')()</code>, але середовища, що відключають {{jsxref("eval", "eval()")}}, типу <a href="/en-US/docs/Glossary/CSP">CSP</a> в браузерах, перешкоджають використанню {{jsxref("Function")}} в такому вигляді.</p>
+
+<p>Властивість <code>globalThis</code> надає стандартний метод доступу до глобального значення <code>this</code> (і як наслідок, безпосередньо до глобального об'єкту) не залежно від середовища. Навідміну від подібних властивостей, таких як <code>window</code> та <code>self</code>, воно гарантує роботу в середовищі де є <code>window</code> та де його немає. Таким чином, ви можете отримати доступ до глобального об'єкту навіть не знаючи в якому середовищі працює код. Щоб запам'ятати назву, просто запам'ятайте що в глобальному отчені значення <code>this</code> дорівнює <code>globalThis</code>.</p>
+
+<h3 id="HTML_та_WindowProxy">HTML та WindowProxy</h3>
+
+<p>В різних двіжках об'єкт <code>globalThis</code> буде посиланням до безпосередього глобального об'єкту, але в браузерах, через міркування безпеки в iframe та cross-window взаємодії, він є посиланням до {{jsxref("Proxy")}} навколо фактичного глобалього об'єкту(до якого ви не можете звернутися безпосередньо). Ця відмінність рідко є актуальною для загального використання, але важливо її запам'ятати.</p>
+
+<h3 id="Іменування">Іменування</h3>
+
+<p>Деякі інші популярні варіанти імен, такі як <code>self</code> та <code>global</code> були видалені з розгляду через їх схильність порушити сумістність з існуючим кодом. Детальніше дивіться  <a href="https://github.com/tc39/proposal-global/blob/master/NAMING.md">документ мовних пропозиції</a>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Задовго до <code>globalThis</code>, єдиним надійним крос-платформенним варіантом  отримати глобальний об'єкт для оточення був <code>Function('return this')()</code>. Однак, він був причиною <a href="/en-US/docs/Web/HTTP/CSP">CSP</a> порушень в деяких налаштуваннях, таким чином <a href="https://github.com/paulmillr/es6-shim">es6-shim</a> використовує додаткову перевірку, наприклад:</p>
+
+<pre class="brush: js">var getGlobal = function () {
+  if (typeof self !== 'undefined') { return self; }
+  if (typeof window !== 'undefined') { return window; }
+  if (typeof global !== 'undefined') { return global; }
+  throw new Error('unable to locate global object');
+};
+
+var globals = getGlobal();
+
+if (typeof globals.setTimeout !== 'function') {
+  // нема setTimeout в даному оточенні!
+}
+</pre>
+
+<p>За допомогою <code>globalThis</code>, додатковий пошук/перевірки для глобального об'єкту не потрібні більше:</p>
+
+<pre class="brush: js">if (typeof globalThis.setTimeout !== 'function') {
+  // нема setTimeout в даному оточенні!
+}</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("ESDraft", "#sec-globalthis", "<code>globalThis</code>")}}</td>
+   <td>{{Spec2("ESDraft")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерна_Сумістність">Браузерна Сумістність</h2>
+
+<div class="hidden">Таблиця сумістності на цій сторінці згенерована з структурованних данних. Якщо ви бажаєте прийняти участь в формуванні даних, будь-ласка, перевірте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> та направте нам "pull request".</div>
+
+<p>{{Compat("javascript.builtins.globalThis")}}</p>
+
+<h3 id="Процес_впровадження">Процес впровадження</h3>
+
+<p>Наступна таблиця надає денний статус впровадження для цього нововведення, оскільки  <code>globalThis</code> не отримала крос-браузерну стабільність. Дані згенеровані запуском відносних тестів в<a href="https://github.com/tc39/test262">Test262</a>, стандартного набору JavaScript тестів, в нічній збірці, або останього релізу для кожного браузерного JavaScript "ядра".</p>
+
+<div>{{EmbedTest262ReportResultsTable("globalThis")}}</div>
diff --git a/files/uk/web/javascript/reference/global_objects/index.html b/files/uk/web/javascript/reference/global_objects/index.html
new file mode 100644
index 0000000000..9d69b8718a
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/index.html
@@ -0,0 +1,193 @@
+---
+title: Стандартні вбудовані об'єкти
+slug: Web/JavaScript/Reference/Global_Objects
+tags:
+  - JavaScript
+  - NeedsTranslation
+  - Reference
+  - Référence(2)
+  - TopicStub
+  - Джава Скріпт
+translation_of: Web/JavaScript/Reference/Global_Objects
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>У цьому розділі задокументовано всі стандарти  JavaScript, вбудовані об'єкти, включаючи їх методи і поля.</p>
+
+<div class="onlyinclude">
+<p>Термін "глобальні об'єкти" ("global objects") (або стандартні вбудовані об'єкти) тут не варто плутати з глобальними об'єктами (<strong>global object)</strong>. Тут, глобальні об'єкти посилаються на <strong>об'єкти в глобальній області видимості </strong>(але якщо не використовується строгий режим ECMAScript 5; в такому випадку буде повертатися {{jsxref("undefined")}}). <strong>Глобальний об'єкт </strong>може бути доступний через оператор {{jsxref("Operators/this", "this")}} в глобальній області видимості. Фактично, глобальна область видимості <strong>складається з</strong> полів глобальної області видимості, включаючи успадковані поля, якщо такі є.</p>
+
+<p>Всі інші об'єкти в глобальній області видимості є або <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">створені скріптами користувача</a> або передані хост-додатком. Хост об'єкти доступні в контексті браузера і є задокументованими в цьому <a href="/en-US/docs/Web/API/Reference">API посиланні</a>. Для більш детальної інформації щодо відмінностей <a href="/en-US/docs/DOM/DOM_Reference">DOM</a> і основ <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, дивіться <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">огляд технологій JavaScript</a>.</p>
+
+<h2 id="Стандартні_об'єкти_по_категоріях">Стандартні об'єкти по категоріях</h2>
+
+<h3 id="Поля_значень">Поля значень</h3>
+
+<p>Ці глобальні поля повертають просте значення; вони не мають жодних полів або методів.</p>
+
+<ul>
+ <li>{{jsxref("Infinity")}}</li>
+ <li>{{jsxref("NaN")}}</li>
+ <li>{{jsxref("undefined")}}</li>
+ <li>літерал {{jsxref("null")}}</li>
+</ul>
+
+<h3 id="Поля_методів">Поля методів</h3>
+
+<p>Ці глобальні методи — це методи, які викликаються глобально частіше, ніж на об'єкті і безпосередньо повертають свій результат виконання тому, хто викликав ці методи.</p>
+
+<ul>
+ <li>{{jsxref("Global_Objects/eval", "eval()")}}</li>
+ <li>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</li>
+ <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li>
+ <li>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</li>
+ <li>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</li>
+ <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li>
+ <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li>
+ <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li>
+ <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li>
+ <li>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</li>
+ <li>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</li>
+</ul>
+
+<h3 id="Базові_об'єкти">Базові об'єкти</h3>
+
+<p>Ці об'єкти є базовими або фундаментальними, на яких базуються всі інші об'єкти. Вони включають об'єкти, які відображають загальні об'єкти (general objects), методи (functions) або помилки (errors).</p>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Object", "Object")}}</li>
+ <li>{{jsxref("Global_Objects/Function", "Function")}}</li>
+ <li>{{jsxref("Global_Objects/Boolean", "Boolean")}}</li>
+ <li>{{jsxref("Global_Objects/Symbol", "Symbol")}}</li>
+ <li>{{jsxref("Global_Objects/Error", "Error")}}</li>
+ <li>{{jsxref("Global_Objects/EvalError", "EvalError")}}</li>
+ <li>{{jsxref("Global_Objects/InternalError", "InternalError")}}</li>
+ <li>{{jsxref("Global_Objects/RangeError", "RangeError")}}</li>
+ <li>{{jsxref("Global_Objects/ReferenceError", "ReferenceError")}}</li>
+ <li>{{jsxref("Global_Objects/SyntaxError", "SyntaxError")}}</li>
+ <li>{{jsxref("Global_Objects/TypeError", "TypeError")}}</li>
+ <li>{{jsxref("Global_Objects/URIError", "URIError")}}</li>
+</ul>
+
+<h3 id="Числа_і_дати">Числа і дати</h3>
+
+<p>Ці базові об'єкти відображають числа (numbers), дати (dates), або математичні операції (mathematical calculations).</p>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Number", "Number")}}</li>
+ <li>{{jsxref("Global_Objects/Math", "Math")}}</li>
+ <li>{{jsxref("Global_Objects/Date", "Date")}}</li>
+</ul>
+
+<h3 id="Обробка_тексту">Обробка тексту</h3>
+
+<p>Ці об'єкти відображають рядки і підтримують їх обробку.</p>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+ <li>{{jsxref("RegExp")}}</li>
+</ul>
+
+<h3 id="Індексовані_колекції">Індексовані колекції</h3>
+
+<p>Ці об'єкти відображають колекції даних, які відсортовані по значенню індекса. Вони включають типізовані масиви і масиво-подібні конструкції.</p>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Int8Array")}}</li>
+ <li>{{jsxref("Uint8Array")}}</li>
+ <li>{{jsxref("Uint8ClampedArray")}}</li>
+ <li>{{jsxref("Int16Array")}}</li>
+ <li>{{jsxref("Uint16Array")}}</li>
+ <li>{{jsxref("Int32Array")}}</li>
+ <li>{{jsxref("Uint32Array")}}</li>
+ <li>{{jsxref("Float32Array")}}</li>
+ <li>{{jsxref("Float64Array")}}</li>
+</ul>
+
+<h3 id="Колекції_по_ключах">Колекції по ключах</h3>
+
+<p>Ці об'єкти відображають колекції, які використовують ключі; вони містять елементи, котрі ітеруються в порядку вставлення в колекцію.</p>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakSet")}}</li>
+</ul>
+
+<h3 id="Колекції_векторів">Колекції векторів</h3>
+
+<p>{{Glossary("SIMD")}} векторні типи даних є об'єктами, в яких дані розташовані в лініях.</p>
+
+<ul>
+ <li>{{jsxref("SIMD")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Float32x4", "SIMD.Float32x4")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Float64x2", "SIMD.Float64x2")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Int8x16", "SIMD.Int8x16")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Int16x8", "SIMD.Int16x8")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Int32x4", "SIMD.Int32x4")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Uint8x16", "SIMD.Uint8x16")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Uint16x8", "SIMD.Uint16x8")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Uint32x4", "SIMD.Uint32x4")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Bool8x16", "SIMD.Bool8x16")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Bool16x8", "SIMD.Bool16x8")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Bool32x4", "SIMD.Bool32x4")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Bool64x2", "SIMD.Bool64x2")}} {{experimental_inline}}</li>
+</ul>
+
+<h3 id="Структурні_дані">Структурні дані</h3>
+
+<p>Ці об'єкти відображають і взаємодіють з структурованими буферами даних і зашифрованими даними JavaScript Object Notation (JSON).</p>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("SharedArrayBuffer")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Atomics")}} {{experimental_inline}}</li>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("JSON")}}</li>
+</ul>
+
+<h3 id="Об'єкти_контролю_абстракціями">Об'єкти контролю абстракціями</h3>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Generator")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+</ul>
+
+<h3 id="Відображення">Відображення</h3>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li>{{jsxref("Proxy")}}</li>
+</ul>
+
+<h3 id="Інтернаціоналізація">Інтернаціоналізація</h3>
+
+<p>Доповнення до основ ECMAScript для чутливих до мови функціональних можливостей.</p>
+
+<ul>
+ <li>{{jsxref("Intl")}}</li>
+ <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li>
+ <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</li>
+</ul>
+
+<h3 id="Нестандартні_об'єкти">Нестандартні об'єкти</h3>
+
+<ul>
+ <li>{{jsxref("Iterator")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("ParallelArray")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("StopIteration")}} {{non-standard_inline}}</li>
+</ul>
+
+<h3 id="Інші">Інші</h3>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code></li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/uk/web/javascript/reference/global_objects/infinity/index.html b/files/uk/web/javascript/reference/global_objects/infinity/index.html
new file mode 100644
index 0000000000..5224164faa
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/infinity/index.html
@@ -0,0 +1,79 @@
+---
+title: Infinity
+slug: Web/JavaScript/Reference/Global_Objects/Infinity
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/Infinity
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>Глобальна властивість <code><strong>Infinity</strong></code> є числовим значенням, що представляє нескінченність.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-infinity.html")}}</div>
+
+
+
+<h2 id="Опис">Опис</h2>
+
+<p><code>Infinity</code> - це властивість <em>глобального об'єкта</em>, або, іншими словами, змінна глобальної області видимості.</p>
+
+<p>Початкове значення <code>Infinity</code> дорівнює {{jsxref("Number.POSITIVE_INFINITY")}}. Значення <code>Infinity</code> (позитивна нескінченність) більше будь-якого іншого числа. Математично це значення поводиться так само, як нескінченність; наприклад, будь-яке позитивне число, помножене на <code>Infinity</code>, дорівнює <code>Infinity</code>, а будь-яке число, розділене на <code>Infinity</code>, дорівнює 0.</p>
+
+<p>Як визначено у специфікації ECMAScript 5, <code>Infinity</code> є властивістю тільки для читання (реалізовано у JavaScript 1.8.5 / Firefox 4).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">console.log(Infinity          ); /* Infinity */
+console.log(Infinity + 1      ); /* Infinity */
+console.log(Math.pow(10, 1000)); /* Infinity */
+console.log(Math.log(0)       ); /* -Infinity */
+console.log(1 / Infinity      ); /* 0 */
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення. Реалізовано у JavaScript 1.3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.1.2', 'Infinity')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Infinity")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.isFinite")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/internalerror/index.html b/files/uk/web/javascript/reference/global_objects/internalerror/index.html
new file mode 100644
index 0000000000..59e8b06396
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/internalerror/index.html
@@ -0,0 +1,83 @@
+---
+title: InternalError
+slug: Web/JavaScript/Reference/Global_Objects/InternalError
+tags:
+  - Error
+  - InternalError
+  - JavaScript
+  - помилка
+translation_of: Web/JavaScript/Reference/Global_Objects/InternalError
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p><strong>Об'єкт</strong> <strong><code>InternalError</code> </strong>позначає внутрішню помилку, що виникла у рушії<strong> </strong>JavaScript. Наприклад: <strong>"InternalError</strong>: too much recursion".</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">new InternalError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Необов'язковий. Зрозумілий людині опис помилки.</dd>
+ <dt><code>fileName</code> {{non-standard_inline}}</dt>
+ <dd>Необов'язковий. Ім'я файлу, код з якого спричинив виняток.</dd>
+ <dt><code>lineNumber</code> {{non-standard_inline}}</dt>
+ <dd>Необов'язковий. Номер рядка в коді, що спричинив виняток.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Виняток <code>InternalError</code> викидається, коли виникає внутрішня помилка у рушії JavaScript.</p>
+
+<p>Приклади використання здебільшого стосуються випадків, коли чогось забагато, наприклад:</p>
+
+<ul>
+ <li>"too many switch cases",</li>
+ <li>"too many parentheses in regular expression",</li>
+ <li>"array initializer too large",</li>
+ <li>"too much recursion".</li>
+</ul>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt>{{jsxref("InternalError.prototype")}}</dt>
+ <dd>Дозволяє додавати властивості до об'єктів <code>InternalError</code>.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<p>Сам <code>InternalError</code> не має власних методів, але успадковує деякі методи через ланцюжок прототипів.</p>
+
+<h2 id="Екземпляри_InternalError">Екземпляри <code>InternalError</code></h2>
+
+<h3 id="Властивості_2">Властивості</h3>
+
+<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/InternalError/prototype', 'Властивості')}}</div>
+
+<h3 id="Методи_2">Методи</h3>
+
+<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/InternalError/prototype', 'Методи')}}</div>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Не є частиною жодних специфікацій.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("javascript.builtins.InternalError")}}</p>
+</div>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("InternalError.prototype")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/internalerror/prototype/index.html b/files/uk/web/javascript/reference/global_objects/internalerror/prototype/index.html
new file mode 100644
index 0000000000..bedf48c367
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/internalerror/prototype/index.html
@@ -0,0 +1,62 @@
+---
+title: InternalError.prototype
+slug: Web/JavaScript/Reference/Global_Objects/InternalError/prototype
+tags:
+  - Error
+  - InternalError
+  - JavaScript
+  - Властивість
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/InternalError
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Властивість <code><strong>InternalError.prototype</strong></code> є прототипом конструктора {{jsxref("InternalError")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Всі екземпляри {{jsxref("InternalError")}} успадковуються від <code>InternalError.prototype</code>. Ви можете використати прототип, щоб додати властивості чи методи до усіх екземплярів.</p>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt><code>InternalError.prototype.constructor</code></dt>
+ <dd>Визначає функцію, яка створила прототип об'єкта.</dd>
+ <dt>{{jsxref("Error.prototype.message", "InternalError.prototype.message")}}</dt>
+ <dd>Повідомлення помилки. Успадковано від {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "InternalError.prototype.name")}}</dt>
+ <dd>Ім'я помилки. Успадковано від {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "InternalError.prototype.fileName")}}</dt>
+ <dd>Шлях до файлу, що спричинив помилку. Успадковано від {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "InternalError.prototype.lineNumber")}}</dt>
+ <dd>Номер рядка файлу, в якому виникла помилка. Успаковано від {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "InternalError.prototype.columnNumber")}}</dt>
+ <dd>Номер стовпця у рядку, де виникла помилка. Успаковано від {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "InternalError.prototype.stack")}}</dt>
+ <dd>Трасування стеку. Успаковано від {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<p>Хоча прототип {{jsxref("InternalError")}} не має власних методів, екземпляри {{jsxref("InternalError")}} успадковують деякі методи через ланцюжок прототипів.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Не є частиною жодних специфікацій.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.InternalError")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/isfinite/index.html b/files/uk/web/javascript/reference/global_objects/isfinite/index.html
new file mode 100644
index 0000000000..d1c89ad117
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/isfinite/index.html
@@ -0,0 +1,88 @@
+---
+title: isFinite()
+slug: Web/JavaScript/Reference/Global_Objects/isFinite
+tags:
+  - JavaScript
+  - isFinine
+  - Довідка
+  - метод
+  - функції
+translation_of: Web/JavaScript/Reference/Global_Objects/isFinite
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>Глобальна функція <code><strong>isFinite()</strong></code> визначає, чи є передане значення скінченним числом. За необхідності, параметр спочатку приводиться до числа.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-isfinite.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">isFinite(<var>testValue</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>testValue</var></code></dt>
+ <dd>Значення, яке потрібно перевірити на скінченність.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p><strong><code>false</code></strong>, якщо аргумент є позитивною чи від'ємною {{jsxref("Infinity","нескінченністю")}}, або {{jsxref("NaN")}}, або {{jsxref("undefined")}}; інакше, <strong><code>true</code></strong>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p><code>isFinite</code> є функцією верхнього рівня, не пов'язаною з жодним об'єктом.</p>
+
+<p>Ви можете скористатись цією функцією, щоб визначити, чи є значення скінченним числом. Функція <code>isFinite</code> досліджує число, передане у аргументі. Якщо аргумент дорівнює <code>NaN</code>, позитивній нескінченності чи від'ємній нескінченності, цей метод вертає <code>false</code>; інакше, він вертає <code>true</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_isFinite">Використання isFinite</h3>
+
+<pre class="brush: js notranslate">isFinite(Infinity);  // false
+isFinite(NaN);       // false
+isFinite(-Infinity); // false
+
+isFinite(0);         // true
+isFinite(2e64);      // true
+isFinite(910);       // true
+
+isFinite(null);      // true, дорівнювало б false з більш
+                     // надійним методом Number.isFinite(null)
+
+isFinite('0');       // true, дорівнювало б false з більш
+                     // надійним методом Number.isFinite("0")
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-isfinite-number', 'isFinite')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.isFinite")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Number.isFinite()")}}</li>
+ <li>{{jsxref("Number.NaN")}}</li>
+ <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/isnan/index.html b/files/uk/web/javascript/reference/global_objects/isnan/index.html
new file mode 100644
index 0000000000..96077f3f93
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/isnan/index.html
@@ -0,0 +1,190 @@
+---
+title: isNaN()
+slug: Web/JavaScript/Reference/Global_Objects/isNaN
+translation_of: Web/JavaScript/Reference/Global_Objects/isNaN
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>Функція <code><strong>isNaN()</strong></code> визначає, чи є передане значення типу {{jsxref("NaN")}} чи ні. Примітка: coercion всередині функції<code>isNaN</code> має  <a href="#Description">цікаві</a> правила використання; можливе альтернативне використання {{jsxref("Number.isNaN()")}}, як визначено у ECMAScript 2015.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-isnan.html")}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>isNaN(v<em>alue</em>)</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>The value to be tested.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p><strong><code>true</code></strong> якщо дане значення є {{jsxref("NaN")}}; інакше, <strong><code>false</code></strong>.</p>
+
+<h2 id="Description">Description</h2>
+
+<h3 id="The_necessity_of_an_isNaN_function">The necessity of an <code>isNaN</code> function</h3>
+
+<p>Unlike all other possible values in JavaScript, it is not possible to rely on the equality operators (== and ===) to determine whether a value <em>is</em> {{jsxref("NaN")}} or not, because both <code>NaN == NaN</code> and <code>NaN === NaN</code> evaluate to <code>false</code>. Hence, the necessity of an <code>isNaN</code> function.</p>
+
+<h3 id="Origin_of_NaN_values">Origin of <code>NaN</code> values</h3>
+
+<p><code>NaN</code> values are generated when arithmetic operations result in <em>undefined</em> or <em>unrepresentable</em> values. Such values do not necessarily represent overflow conditions. A <code>NaN</code> also results from attempted coercion to numeric values of non-numeric values for which no primitive numeric value is available.</p>
+
+<p>For example, dividing zero by zero results in a <code>NaN</code> — but dividing other numbers by zero does not.</p>
+
+<h3 id="Confusing_special-case_behavior">Confusing special-case behavior</h3>
+
+<p>Since the very earliest versions of the <code>isNaN</code> function specification, its behavior for non-numeric arguments has been confusing. When the argument to the <code>isNaN</code> function is not of type <a href="http://es5.github.com/#x8.5" title="http://es5.github.com/#x8.5">Number</a>, the value is first coerced to a Number. The resulting value is then tested to determine whether it is {{jsxref("NaN")}}. Thus for non-numbers that when coerced to numeric type result in a valid non-NaN numeric value (notably the empty string and boolean primitives, which when coerced give numeric values zero or one), the "false" returned value may be unexpected; the empty string, for example, is surely "not a number." The confusion stems from the fact that the term, "not a number", has a specific meaning for numbers represented as IEEE-754 floating-point values. The function should be interpreted as answering the question, "is this value, when coerced to a numeric value, an IEEE-754 'Not A Number' value?"</p>
+
+<p>The latest version of ECMAScript (ES2015) contains the {{jsxref("Number.isNaN()")}} function. <code>Number.isNaN(x)</code> will be a reliable way to test whether <code>x</code> is <code>NaN</code> or not. Even with <code>Number.isNaN</code>, however, the meaning of <code>NaN</code> remains the precise numeric meaning, and not simply, "not a number". Alternatively, in absense of <code>Number.isNaN</code>, the expression <code>(x != x)</code> is a more reliable way to test whether variable <code>x</code> is <code>NaN</code> or not, as the result is not subject to the false positives that make <code>isNaN</code> unreliable.</p>
+
+<p>A polyfill for <code>isNaN</code> would be (the polyfill leverages the unique never-equal-to-itself characteristic of <code>NaN</code>):</p>
+
+<pre class="brush: js">var isNaN = function(value) {
+    var n = parseInt(value);
+    return n !== n;
+};</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">isNaN(NaN);       // true
+isNaN(undefined); // true
+isNaN({});        // true
+
+isNaN(true);      // false
+isNaN(null);      // false
+isNaN(37);        // false
+
+// strings
+isNaN('37');      // false: "37" is converted to the number 37 which is not NaN
+isNaN('37.37');   // false: "37.37" is converted to the number 37.37 which is not NaN
+isNaN("37,5");    // true
+isNaN('123ABC');  // true:  parseInt("123ABC") is 123 but Number("123ABC") is NaN
+isNaN('');        // false: the empty string is converted to 0 which is not NaN
+isNaN(' ');       // false: a string with spaces is converted to 0 which is not NaN
+
+// dates
+isNaN(new Date());                // false
+isNaN(new Date().toString());     // true
+
+// This is a false positive and the reason why isNaN is not entirely reliable
+isNaN('blabla');   // true: "blabla" is converted to a number.
+                   // Parsing this as a number fails and returns NaN
+</pre>
+
+<h3 id="Useful_special-case_behavior">Useful special-case behavior</h3>
+
+<p>There is a more usage oriented way to think of <code>isNaN()</code>: If <code>isNaN(x)</code> returns <code>false</code>, you can use <code>x</code> in an arithmetic expression not making the expression return <code>NaN</code>. If it returns <code>true</code>, <code>x</code> will make every arithmetic expression return <code>NaN</code>. This means that in JavaScript, <code>isNaN(x) == true</code> is equivalent to <code>x - 0</code> returning <code>NaN</code> (though in JavaScript <code>x - 0 == NaN</code> always returns false, so you can't test for it). Actually, <code>isNaN(x)</code>, <code>isNaN(x - 0)</code>, <code>isNaN(Number(x))</code>, <code>Number.isNaN(x - 0)</code>, and <code>Number.isNaN(Number(x))</code> always return the same and in JavaScript <code>isNaN(x)</code> is just the shortest possible form to express each of these terms.</p>
+
+<p>You can use this, for example, to test whether an argument to a function is arithmetically processable (usable "like" a number), or if it's not and you have to provide a default value or something else. This way you can have a function that makes use of the full versatility JavaScript provides by implicitly converting values depending on context.</p>
+
+<h2 id="Examples_2">Examples</h2>
+
+<pre class="brush: js">function increment(x) {
+  if (isNaN(x)) x = 0;
+  return x + 1;
+}
+
+// The same effect with Number.isNaN():
+function increment(x) {
+  if (Number.isNaN(Number(x))) x = 0;
+  return x + 1;
+}
+
+// In the following cases for the function's argument x,
+// isNaN(x) is always false, although x is indeed not a
+// number, but can be used as such in arithmetical
+// expressions
+increment('');            // 1: "" is converted to 0
+increment(new String());  // 1: String object representing an empty string is converted to 0
+increment([]);            // 1: [] is converted to 0
+increment(new Array());   // 1: Array object representing an empty array is converted to 0
+increment('0');           // 1: "0" is converted to 0
+increment('1');           // 2: "1" is converted to 1
+increment('0.1');         // 1.1: "0.1" is converted to 0.1
+increment('Infinity');    // Infinity: "Infinity" is converted to Infinity
+increment(null);          // 1: null is converted to 0
+increment(false);         // 1: false is converted to 0
+increment(true);          // 2: true is converted to 1
+increment(new Date());    // returns current date/time in milliseconds plus 1
+
+// In the following cases for the function's argument x,
+// isNaN(x) is always false and x is indeed a number
+increment(-1);            // 0
+increment(-0.1);          // 0.9
+increment(0);             // 1
+increment(1);             // 2
+increment(2);             // 3
+// ... and so on ...
+increment(Infinity);      // Infinity
+
+// In the following cases for the function's argument x,
+// isNaN(x) is always true and x is really not a number,
+// thus the function replaces it by 0 and returns 1
+increment(String);            // 1
+increment(Array);             // 1
+increment('blabla');          // 1
+increment('-blabla');         // 1
+increment(0 / 0);               // 1
+increment('0 / 0');             // 1
+increment(Infinity / Infinity); // 1
+increment(NaN);               // 1
+increment(undefined);         // 1
+increment();                  // 1
+
+// isNaN(x) is always the same as isNaN(Number(x)),
+// but the presence of x is mandatory here!
+isNaN(x) == isNaN(Number(x)); // true for every value of x, including x == undefined,
+                              // because isNaN(undefined) == true and Number(undefined) returns NaN,
+                              // but ...
+isNaN() == isNaN(Number());   // false, because isNaN() == true and Number() == 0
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.2.4', 'isNaN')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-isnan-number', 'isNaN')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-isnan-number', 'isNaN')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.isNaN")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("NaN")}}</li>
+ <li>{{jsxref("Number.isNaN()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/json/index.html b/files/uk/web/javascript/reference/global_objects/json/index.html
new file mode 100644
index 0000000000..af5818da2a
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/json/index.html
@@ -0,0 +1,158 @@
+---
+title: JSON
+slug: Web/JavaScript/Reference/Global_Objects/JSON
+tags:
+  - JSON
+  - JavaScript
+  - Довідка
+  - Об'єкт
+translation_of: Web/JavaScript/Reference/Global_Objects/JSON
+---
+<div>{{JSRef}}</div>
+
+<p>Об'єкт <strong><code>JSON</code></strong> містить методи для розбору <a class="external" href="http://json.org/">JavaScript Object Notation</a> ({{glossary("JSON")}}) і конвертації значень у JSON. Його можна або просто викликати, або конструювати; і окрім своїх двох методів він не має у собі іншої корисної функціональності.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<h3 id="Об'єктна_нотація_JavaScript">Об'єктна нотація JavaScript</h3>
+
+<p>JSON - це синтаксис для серіалізації об'єктів, масивів, чисел, строк, булевих значень, та {{jsxref("null")}}. Він заснований на синтаксисі JavaScript, проте дещо відрізняється від нього: деякий JavaScript не є JSON, і деякий JSON не є JavaScript. Докладніше у <a href="http://timelessrepo.com/json-isnt-a-javascript-subset">JSON: The JavaScript subset that isn't</a>.</p>
+
+<table>
+ <caption>Відмінності JavaScript і JSON</caption>
+ <thead>
+  <tr>
+   <th scope="col">Тип у JavaScript</th>
+   <th scope="col">Відмінність у JSON</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Об'єкти та масиви</td>
+   <td>Назви полів повинні являти собою строки у подвійних лапках; прикінцеві коми заборонені.</td>
+  </tr>
+  <tr>
+   <td>Числа</td>
+   <td>Ведучі нулі також заборонені (При виконанні JSON.stringify нулі просто проігноруються, проте JSON.parse викине SyntaxError); після десяткової крапки повинна слідувати хоча б одна цифра.</td>
+  </tr>
+  <tr>
+   <td>Строки</td>
+   <td>
+    <p>Лише обмежений набір символів можна екранувати; деякі керівні символи заборонені; такі символи юнікоду, як розділювач рядків (<a href="http://unicode-table.com/en/2028/">U+2028</a>) та розділювач абзаців (<a href="http://unicode-table.com/en/2029/">U+2029</a>) дозволені; строки повинні виділятись подвійними лапками. Зверніть увагу на наступні приклади, де {{jsxref("JSON.parse()")}} нормально працює, проте при обчисленні виразу як JavaScript-коду буде отримана помилка {{jsxref("SyntaxError")}}:</p>
+
+    <pre class="brush: js">
+var code = '"\u2028\u2029"';
+JSON.parse(code); // працює
+eval(code); // помилка
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Повний синтаксис JSON виглядає так:</p>
+
+<pre><var>JSON</var> = <strong>null</strong>
+    або <strong>true</strong> або <strong>false</strong>
+    або <var>JSONNumber</var>
+    або <var>JSONString</var>
+    або <var>JSONObject</var>
+    або <var>JSONArray</var>
+
+<var>JSONNumber</var> = <strong>-</strong> <var>PositiveNumber</var>
+          <em>чи</em> <var>PositiveNumber</var>
+<var>PositiveNumber</var> = DecimalNumber
+              або <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var>
+              <em>або</em> <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var> <var>ExponentPart</var>
+              або <var>DecimalNumber</var> <var>ExponentPart</var>
+<var>DecimalNumber</var> = <strong>0</strong>
+             або <var>OneToNine</var> <var>Digits</var>
+<var>ExponentPart</var> = <strong>e</strong> <var>Exponent</var>
+            чи <strong>E</strong> <var>Exponent</var>
+<var>Exponent</var> = <var>Digits</var>
+        <em>або</em> <strong>+</strong> <var>Digits</var>
+        або <strong>-</strong> <var>Digits</var>
+<var>Digits</var> = <var>Digit</var>
+      чи <var>Digits</var> <var>Digit</var>
+<var>Digit</var> = від <strong>0</strong> до <strong>9</strong>
+<var>OneToNine</var> = <strong>від 1</strong> до <strong>9</strong>
+
+<var>JSONString</var> = <strong>""</strong>
+          <em>чи</em> <strong>"</strong> <var>StringCharacters</var> <strong>"</strong>
+<var>StringCharacters</var> = <var>StringCharacter</var>
+                чи <var>StringCharacters</var> <var>StringCharacter</var>
+<var>StringCharacter</var> = будь-який символ
+                  за виключенням <strong>"</strong> або <strong>\</strong> або від U+0000 до U+001F
+               або <var>EscapeSequence</var>
+<var>EscapeSequence</var> = <strong>\"</strong> або <strong>\/</strong> або <strong>\\</strong> або <strong>\b</strong> або <strong>\f</strong> або <strong>\n</strong> або <strong>\r</strong> або <strong>\t</strong>
+              або <strong>\u</strong> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var>
+<var>HexDigit</var> = від <strong>0</strong> до <strong>9</strong>
+        або від <strong>A</strong> до <strong>F</strong>
+        або від <strong>a</strong> до <strong>f</strong>
+
+<var>JSONObject</var> = <strong>{</strong> <strong>}</strong>
+          чи <strong>{</strong> <var>Members</var> <strong>}</strong>
+<var>Members</var> = <var>JSONString</var> <strong>:</strong> <var>JSON</var>
+       чи <var>Members</var> <strong>,</strong> <var>JSONString</var> <strong>:</strong> <var>JSON</var>
+
+<var>JSONArray</var> = <strong>[</strong> <strong>]</strong>
+         <em>чи</em> <strong>[</strong> <var>ArrayElements</var> <strong>]</strong>
+<var>ArrayElements</var> = <var>JSON</var>
+             <em>чи</em> <var>ArrayElements</var> <strong>,</strong> <var>JSON</var>
+</pre>
+
+<p>Беззмістовні пробільні символи можуть бути будь-де за винятком <code><var>JSONNumber</var></code> (числа не повинні містити пробіли) або <code><var>JSONString</var></code> (де це сприймається за частину строки, або призведе до помилки). Символ табуляції (<a href="http://unicode-table.com/en/0009/">U+0009</a>), повернення каретки (<a href="http://unicode-table.com/en/000D/">U+000D</a>), початку рядка (<a href="http://unicode-table.com/en/000A/">U+000A</a>) та пробіл (<a href="http://unicode-table.com/en/0020/">U+0020</a>) - це всі дійсні пробільні символи.</p>
+
+<h2 id="Методи">Методи</h2>
+
+<dl>
+ <dt>{{jsxref("JSON.parse()")}}</dt>
+ <dd>Розбирає строку як JSON, як опція — перетворює результат і його властивості, та повертає його.</dd>
+ <dt>{{jsxref("JSON.stringify()")}}</dt>
+ <dd>Повертає строку JSON відповідно до поданого значення. Як опція — може включити до результату лише певні поля чи замінити значення полів згідно з побажаннями користувача.</dd>
+</dl>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Примітка</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.12', 'JSON')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Первинне визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-json-object', 'JSON')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-json-object', 'JSON')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<div>
+<div>
+<div>
+<div class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.JSON")}}</p>
+</div>
+</div>
+</div>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toJSON()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/json/parse/index.html b/files/uk/web/javascript/reference/global_objects/json/parse/index.html
new file mode 100644
index 0000000000..685832a864
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/json/parse/index.html
@@ -0,0 +1,133 @@
+---
+title: JSON.parse()
+slug: Web/JavaScript/Reference/Global_Objects/JSON/parse
+tags:
+  - ECMAScript5
+  - JSON
+  - JavaScript
+  - Method
+  - Довідка
+translation_of: Web/JavaScript/Reference/Global_Objects/JSON/parse
+---
+<div>{{JSRef}}</div>
+
+<div><span class="seoSummary">Метод <code><strong>JSON.parse()</strong></code> розбирає рядок із JSON, створюючи відповідне до його вмісту значення чи об'єкт. Якщо вказати функцію <code>reviver</code> — другий необов'язковий параметр — її буде використано для перетворення створеного об'єкта та його властивостей перед поверненням.</span>
+
+<div> </div>
+
+<div>{{EmbedInteractiveExample("pages/js/json-parse.html")}}</div>
+
+<p class="hidden">Першокод цього прикладу збережено у репозиторії GitHub. Якщо ви хочете долучитися до створення чи поліпшення таких прикладів, пропонуйте нам свої зміни до репозиторію <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">JSON.parse(<var>text</var>[, <var>reviver</var>])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>text</code></dt>
+ <dd>Рядок, що його має бути розібрано, як JSON. Докладні відомості про синтаксис JSON наведено в статті про об'єкт {{jsxref("JSON")}}.</dd>
+ <dt><code>reviver</code> {{optional_inline}}</dt>
+ <dd>Якщо вказано функцію, її буде використано для перетворення отриманих значень перед поверненням.</dd>
+</dl>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>{{jsxref("Object", "Об'єкт")}}, що відповідає переданому JSON-рядку.</p>
+
+<h3 id="Винятки">Винятки</h3>
+
+<p>Викидає виняток {{jsxref("Global_Objects/SyntaxError", "SyntaxError")}}, якщо вміст переданого рядка не є належним JSON.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_JSON.parse()">Використання <code>JSON.parse()</code></h3>
+
+<pre class="brush: js">JSON.parse('{}');                   // {}
+JSON.parse('{"x": {"value": 1}}');  // {x: {value: 1}}
+JSON.parse('true');                 // true
+JSON.parse('"щось навіщось"');      // "щось навіщось"
+JSON.parse('[1, 5, "false"]');      // [1, 5, "false"]
+JSON.parse('null');                 // null
+</pre>
+
+<h3 id="Використання_параметра_reviver">Використання параметра <code>reviver</code></h3>
+
+<p>Якщо <code>reviver</code> вказано, то його буде використано для <em>перетворення</em> кожного значення, отриманого шляхом розбору JSON-рядка. Кожне значення (об'єкт та всі його властивості) окремо піддається перетворенню за допомогою <code>reviver</code> в порядку зсередини назовні (від властивостей найглибше вкладених об'єктів). Задля перетворення чергової властивості до функції <code>reviver</code> передається два аргументи: ім'я властивості (рядок) та її значення. Посилання <code>this</code> вказує на об'єкт, що містить зазначену властивість.</p>
+
+<p>Якщо функція <code>reviver</code> повертає {{jsxref("undefined")}} (або взагалі не вертає значення), властивість буде видалено з об'єкта. Інакше повернуте значення буде встановлено замість попереднього. Отже, якщо ви маєте на меті перетворити лише деякі значення, для решти функція <code>reviver</code> має вертати значення другого аргументу без змін.</p>
+
+<pre class="brush: js">JSON.parse('{"p": 5, "x": "5"}', function (key, value) {
+  return typeof value === 'number'
+    ? value * 2 // Повернути подвоєне значення, якщо це число.
+    : value     // Решту значень повернути без змін.
+});
+
+// { p: 10, x: "5" }
+
+JSON.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', function (key, value) {
+  // Вивести ім'я чергової властивості (для останньої це порожній рядок — "").
+  console.log(key);
+
+  // Повернути значення властивості без змін.
+  return value;
+});
+
+// 1
+// 2
+// 4
+// 6
+// 5
+// 3
+// ""
+</pre>
+
+<h3 id="Прикінцеві_коми_вважаються_за_помилку">Прикінцеві коми вважаються за помилку</h3>
+
+<pre class="example-bad brush: js example-bad">// Обидва виклики викидають SyntaxError.
+JSON.parse('[1, 2, 3, 4, ]');
+JSON.parse('{"foo" : 1, }');
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.12.2', 'JSON.parse')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Початкова виознака. Запроваджено у JavaScript 1.7.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-json.parse', 'JSON.parse')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-json.parse', 'JSON.parse')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div>
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.JSON.parse")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("JSON.stringify()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/json/stringify/index.html b/files/uk/web/javascript/reference/global_objects/json/stringify/index.html
new file mode 100644
index 0000000000..ca0fdc87fc
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/json/stringify/index.html
@@ -0,0 +1,321 @@
+---
+title: JSON.stringify()
+slug: Web/JavaScript/Reference/Global_Objects/JSON/stringify
+tags:
+  - JSON
+  - JavaScript
+  - stringify
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/JSON/stringify
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>JSON.stringify()</code></strong> подає об'єкт чи {{glossary("Primitive", "просту величину")}} як JSON-рядок, певним чином перетворюючи або оминаючи ті чи ті властивості, якщо вказано необов'язковий другий аргумент — функцію або масив <code>replacer</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/json-stringify.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>JSON.stringify(<var>value</var>[, <var>replacer</var>[, <var>space</var>]])</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Значення, яке слід перетворити на рядок JSON.</dd>
+ <dt><code>replacer</code> {{optional_inline}}</dt>
+ <dd>Функція, що змінює значення перед їхнім перетворенням на JSON, або масив {{jsxref("Global_Objects/String", "рядків")}} та {{jsxref("Global_Objects/Number", "чисел")}}, що окреслюють множину властивостей, які буде включено у створений JSON-рядок. Якщо цей аргумент відсутній чи вказано <code>null</code>, до створеного JSON-рядка потраплять всі наявні властивості об'єкта без змін.</dd>
+ <dt><code>space</code> {{optional_inline}}</dt>
+ <dd>Значення типу {{jsxref("Global_Objects/String", "String")}} або {{jsxref("Число", "Number")}} що використовується для додавання відступів у JSON задля покращення легкочитності. Якщо вказано число — воно означає кількість пропусків в одному відступі. Якщо передати число більше за 10, буде використано 10. Значення менші за 1 вказують на те що відступи не використовуватимуться. Якщо вказано рядок, то його (або перші 10 символів, якщо він задовгий) буде використано як відступ. Якщо ж параметр не вказано (або <code>null</code>), відступи не додаватимуться.</dd>
+</dl>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>Рядок JSON, створений із вказаного значення.</p>
+
+<h3 id="Винятки">Винятки</h3>
+
+<p>Викидає виняток {{jsxref("TypeError")}} ("cyclic object value") у випадку, якщо знайдено циклічне посилання.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Функція <code>JSON.stringify()</code> перетворює значення на рядок, що містить JSON-запис того значення:</p>
+
+<ul>
+ <li>Якщо значення має свій метод <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify$edit#toJSON()_behavior">toJSON()</a>, саме він буде відповідати за дані, що будуть серіалізовані.</li>
+ <li>Об'єкти {{jsxref("Global_Objects/Boolean", "Boolean")}}, {{jsxref("Число", "Number")}} та {{jsxref("Global_Objects/String", "String")}} в типовий спосіб перетворюються на відповідні {{glossary("Primitive", "прості величини")}};</li>
+ <li>{{glossary("Function", "Функцію")}}, {{jsxref("undefined")}} або значення типу {{jsxref("Symbol")}} під час перетворення буде або вилучено (якщо знайдено в об'єкті), або обернено на {{jsxref("null")}} (якщо знайдено в масиві). Метод <code>JSON.stringify</code> також може вертати <code>undefined</code>, якщо йому передано «щирі» величини, як-от <code>JSON.stringify(function(){})</code> чи <code>JSON.stringify(undefined)</code>;</li>
+ <li>Всі властивості, що мають за ключ величину типу {{jsxref("Symbol")}}, буде знехтувано, навіть якщо задіяно функцію <code>replacer</code>;</li>
+ <li>Екземпляри {{jsxref("Date")}} реалізовують функцію <code>toJSON()</code> шляхом повертання рядку (такого ж, як і <code>date.toISOString()</code>), тому вони будуть вважатись рядками.</li>
+ <li>Такі числа, як {{jsxref("Infinity")}} та {{jsxref("NaN")}}, так як і об'єкт {{jsxref("null")}} будуть вважатися за <code>null</code>.</li>
+ <li>Для всіх інших екземплярів {{jsxref("Object")}}, включно з {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}} та {{jsxref("WeakSet")}} будуть серіалізовані лише їх перелічувані поля.</li>
+</ul>
+
+<pre class="brush: js">JSON.stringify({});                   // '{}'
+JSON.stringify(true);                 // 'true'
+JSON.stringify('foo');                // '"foo"'
+JSON.stringify([1, 'false', false]);  // '[1,"false",false]'
+JSON.stringify([NaN, null, Infinity]); // '[null,null,null]'
+JSON.stringify({ x: 5 });             // '{"x":5}'
+
+JSON.stringify(new Date(2006, 0, 2, 15, 4, 5))
+// '"2006-01-02T15:04:05.000Z"'
+
+JSON.stringify({ x: 5, y: 6 });
+// '{"x":5,"y":6}' or '{"y":6,"x":5}'
+JSON.stringify([new Number(1), new String('false'), new Boolean(false)]);
+// '[1,"false",false]'
+
+JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] });
+// '{"x":[10,null,null,null]}'
+
+// Стандартні структури даних
+JSON.stringify([new Set([1]), new Map([[1, 2]]), new WeakSet([{a: 1}]), new WeakMap([[{a: 1}, 2]])]);
+// '[{},{},{},{}]'
+
+// TypedArray
+JSON.stringify([new Int8Array([1]), new Int16Array([1]), new Int32Array([1])]);
+// '[{"0":1},{"0":1},{"0":1}]'
+JSON.stringify([new Uint8Array([1]), new Uint8ClampedArray([1]), new Uint16Array([1]), new Uint32Array([1])]);
+// '[{"0":1},{"0":1},{"0":1},{"0":1}]'
+JSON.stringify([new Float32Array([1]), new Float64Array([1])]);
+// '[{"0":1},{"0":1}]'
+
+// toJSON()
+JSON.stringify({ x: 5, y: 6, toJSON(){ return this.x + this.y; } });
+// '11'
+
+// Значення типу Symbol:
+JSON.stringify({ x: undefined, y: Object, z: Symbol('') });
+// '{}'
+JSON.stringify({ [Symbol('foo')]: 'foo' });
+// '{}'
+JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]);
+// '{}'
+JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) {
+  if (typeof k === 'symbol') {
+    return 'a symbol';
+  }
+});
+// '{}'
+
+// Неперелічувані властивості:
+JSON.stringify( Object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) );
+// '{"y":"y"}'
+
+</pre>
+
+<h3 id="Параметер_replacer">Параметер <code>replacer</code></h3>
+
+<p>Параметр <code>replacer</code> може бути функцією або масивом. Якщо то функція, вона прийматиме два параметри: ключ та значення, яке са́ме перетворюється. Об'єкт, якому належить перетворювана властивість, доступний всередині <code>replacer</code> через <code>this</code>. Спершу функцію буде викликано з порожнім рядком замість ключа й тим об'єктом, який має бути перетворено, а відтак для кожної властивості того об'єкта буде здійснено окремий виклик <code>replacer</code>. Кожен виклик має вертати значення, що належить додати до рядка JSON:</p>
+
+<ul>
+ <li>Якщо повернути {{jsxref("Число", "Number")}}, до JSON буде додано текстовий запис числа як значення властивості;</li>
+ <li>Якщо повернути {{jsxref("String")}}, до JSON буде додано рядок як значення властивості;</li>
+ <li>Якщо повернути {{jsxref("Boolean")}}, до JSON буде додано «true» або «false» як значення властивості;</li>
+ <li>Якщо повернути <code>null</code>, <code>null</code> і буде додано до JSON-рядку.</li>
+ <li>Якщо повернути інший об'єкт або масив, його буде рекурсивно перетворено на JSON в той самий спосіб (викликаючи <code>replacer</code> для кожної його властивості), а тоді додано до JSON як значення властивості (якщо повернутий об'єкт є функцією, до JSON нічого додано не буде);</li>
+ <li>Якщо повернути {{jsxref("undefined")}}, властивість не потрапить до JSON.</li>
+</ul>
+
+<div class="note"><strong>Заувага:</strong> Вилучати елементи масиву за допомогою <code>replacer</code> неможливо — якщо повернути <code>undefined</code>, значення елемента лише обернеться на <code>null</code>.</div>
+
+<div class="note"><strong>Note:</strong> If you wish the replacer to distinguish an initial object from a key with an empty string property (since both would give the empty string as key and potentially an object as value), you will have to keep track of the iteration count (if it is beyond the first iteration, it is a genuine empty string key).</div>
+
+<h4 id="Приклад_із_функцією">Приклад із функцією</h4>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">replacer</span><span class="punctuation token">(</span>key<span class="punctuation token">,</span> value<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// Фільтрація властивостей</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">typeof</span> value <span class="operator token">===</span> <span class="string token">'string'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">return</span> undefined<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">return</span> value<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">var</span> foo <span class="operator token">=</span> <span class="punctuation token">{</span>foundation<span class="punctuation token">:</span> <span class="string token">'Mozilla'</span><span class="punctuation token">,</span> model<span class="punctuation token">:</span> <span class="string token">'box'</span><span class="punctuation token">,</span> week<span class="punctuation token">:</span> <span class="number token">45</span><span class="punctuation token">,</span> transport<span class="punctuation token">:</span> <span class="string token">'car'</span><span class="punctuation token">,</span> month<span class="punctuation token">:</span> <span class="number token">7</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
+JSON<span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span>foo<span class="punctuation token">,</span> replacer<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// '{"week":45,"month":7}'</span></code></pre>
+
+<h4 id="Приклад_із_масивом">Приклад із масивом</h4>
+
+<p>Якщо <code>replacer</code> являється масивом, його значення позначають імена властивостей вхідного об'єкту, що будуть включені в результат.</p>
+
+<p> </p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">JSON<span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span>foo<span class="punctuation token">,</span> <span class="punctuation token">[</span><span class="string token">'week'</span><span class="punctuation token">,</span> <span class="string token">'month'</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// '{"week":45,"month":7}', будуть збережені лише властивості "week" та "month"</span></code></pre>
+
+<h3 id="Параметер_space">Параметер <code>space</code></h3>
+
+<p>Аргумент <code>space</code> може застосовуватись для управління відступами в результуючому рядку. Якщо в якості аргументу дано число, кожен із наступних рівнів серіалізації матиме відступ у вигляді відповідної поданому числу кількості пробілів (але не більше 10). Якщо ж в якості аргументу дано рядок, його і буде використано для виконання відступу (або ж 10 перших символів, якщо сам рядок довший).</p>
+
+<pre class="brush: js">JSON.stringify({ a: 1, b: {c: 2} }, null, 3);
+// Вертає рядок:
+// '{
+//    "a": 1,
+//    "b": {
+//       "c": 2
+//    }
+// }'
+</pre>
+
+<p>А тут замість пропусків буде вжито символ табуляції:</p>
+
+<pre class="brush: js">JSON.stringify({ a: 1, b: {c: 2} }, null, '\t');
+// Вертає рядок:
+// '{
+//     "a": 1,
+//     "b": {
+//         "c": 2
+//     }
+// }'
+</pre>
+
+<h3 id="Особливий_метод_toJSON()">Особливий метод <code>toJSON()</code></h3>
+
+<p>Й хоча методи перетворюваних об'єктів загалом нехтуються, метод з ім'ям <code>toJSON</code> має особливе призначення. Якщо перетворюваний об'єкт має метод <code>toJSON()</code>, його буде викликано, а повернене значення вжито (перетворено на JSON) замість самого об'єкту. <code>JSON.stringify()</code> викликає метод <code>toJSON</code> з одним аргументом:</p>
+
+<p> </p>
+
+<ul>
+ <li>якщо цей об'єкт являється значенням властивості, то ім'я властивості;</li>
+ <li>якщо це масив, то рядок із індексом масиву;</li>
+ <li>порожній рядок, якщо <code>JSON.stringify()</code> було викликано прямо на цьому об'єкті</li>
+</ul>
+
+<p>Наприклад:</p>
+
+<p> </p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> obj <span class="operator token">=</span> <span class="punctuation token">{</span>
+    data<span class="punctuation token">:</span> <span class="string token">'data'</span><span class="punctuation token">,</span>
+
+    <span class="function token">toJSON</span><span class="punctuation token">(</span>key<span class="punctuation token">)</span><span class="punctuation token">{</span>
+        <span class="keyword token">if</span><span class="punctuation token">(</span>key<span class="punctuation token">)</span>
+            <span class="keyword token">return</span> `Тепер я вкладений об'єкт під ключем <span class="string token">'${key}'</span>`<span class="punctuation token">;</span>
+
+        <span class="keyword token">else</span>
+            <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+JSON<span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span>obj<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// '{"data":"data"}'</span>
+
+JSON<span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span><span class="punctuation token">{</span> obj <span class="punctuation token">}</span><span class="punctuation token">)</span>
+<span class="comment token">// '{"obj":"Тепер я вкладений об'єкт під ключем 'obj'"}'</span>
+
+JSON<span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span><span class="punctuation token">[</span> obj <span class="punctuation token">]</span><span class="punctuation token">)</span>
+<span class="comment token">// '["Тепер я вкладений об'єкт під ключем '0'"]'</span></code></pre>
+
+<h3 id="Проблема_із_JSON.stringify()_при_серіалізації_циклічних_посилань">Проблема із <code>JSON.stringify()</code> при серіалізації циклічних посилань</h3>
+
+<p>Зауважте, що, оскільки <a href="https://www.json.org/">JSON format</a> не підтримує об'єктні посилання (хоча є <a href="http://tools.ietf.org/html/draft-pbryan-zyp-json-ref-03">чорновик IETF</a>), при спробі кодування об'єкту із циклічними посиланнями буде отримано {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js example-bad line-numbers  language-js"><code class="language-js"><span class="keyword token">const</span> circularReference <span class="operator token">=</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
+circularReference<span class="punctuation token">.</span>myself <span class="operator token">=</span> circularReference<span class="punctuation token">;</span>
+
+<span class="comment token">// Серіалізація циклічного посилання викине "TypeError: cyclic object value"</span>
+JSON<span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span>circularReference<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Для виконання серіалізації циклічних посилань ви можете використати бібліотеку, що їх підтримує (зокрема <a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a> від Douglas Crockford), або ж реалізувати рішення самостійно, для чого знадобиться пошук і заміна (або видалення) циклічних посилань на підходящі для серіалізації значення.</p>
+
+<h3 class="highlight-spanned" id="Тлумачення_отриманого_JSON_як_коду_JavaScript"><span class="highlight-span">Тлумачення отриманого JSON як коду JavaScript</span></h3>
+
+<p>Завважте, що <a class="external external-icon" href="http://timelessrepo.com/json-isnt-a-javascript-subset" rel="noopener">JSON не є точнісінькою підмножиною JavaScript</a>. Два розділювачі (рядка та параграфу) не треба екранувати у JSON, але потрібно у JavaScript. Тож якщо ви маєте намір застосувати функцію <a class="new" href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/eval" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>eval()</code></a> або скористатися <a class="external external-icon" href="https://uk.wikipedia.org/wiki/JSONP" rel="noopener" title="JSONP">JSONP</a>, доведеться здійснити невеличкі перетворення:</p>
+
+<p> </p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> jsFriendlyJSONStringify <span class="punctuation token">(</span>s<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">return</span> JSON<span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span>s<span class="punctuation token">)</span><span class="punctuation token">.</span>
+        <span class="function token">replace</span><span class="punctuation token">(</span><span class="regex token">/\u2028/g</span><span class="punctuation token">,</span> <span class="string token">'\\u2028'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>
+        <span class="function token">replace</span><span class="punctuation token">(</span><span class="regex token">/\u2029/g</span><span class="punctuation token">,</span> <span class="string token">'\\u2029'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">var</span> s <span class="operator token">=</span> <span class="punctuation token">{</span>
+    a<span class="punctuation token">:</span> String<span class="punctuation token">.</span><span class="function token">fromCharCode</span><span class="punctuation token">(</span><span class="number token">0x2028</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+    b<span class="punctuation token">:</span> String<span class="punctuation token">.</span><span class="function token">fromCharCode</span><span class="punctuation token">(</span><span class="number token">0x2029</span><span class="punctuation token">)</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+<span class="keyword token">try</span> <span class="punctuation token">{</span>
+    <span class="function token">eval</span><span class="punctuation token">(</span><span class="string token">'('</span> <span class="operator token">+</span> JSON<span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span>s<span class="punctuation token">)</span> <span class="operator token">+</span> <span class="string token">')'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span> <span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">e</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "SyntaxError: unterminated string literal"</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">// Якщо ловити виключення не має потреби</span>
+<span class="function token">eval</span><span class="punctuation token">(</span><span class="string token">'('</span> <span class="operator token">+</span> <span class="function token">jsFriendlyJSONStringify</span><span class="punctuation token">(</span>s<span class="punctuation token">)</span> <span class="operator token">+</span> <span class="string token">')'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// console.log у Firefox знімає екранування Юнікоду, якщо</span>
+<span class="comment token">// виводиться в консоль, тому застосуймо alert</span>
+<span class="function token">alert</span><span class="punctuation token">(</span><span class="function token">jsFriendlyJSONStringify</span><span class="punctuation token">(</span>s<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// {"a":"\u2028","b":"\u2029"}</span></code></pre>
+
+<h3 id="Приклад_застосування_JSON.stringify()_із_localStorage">Приклад застосування <code>JSON.stringify()</code> із <code>localStorage</code></h3>
+
+<p>У випадку, якщо ви хочете зберегти об'єкт, створений вашим користувачем і дозволити відновити його навіть після закриття браузера, ось наступний приклад із моделлю застосування <code>JSON.stringify()</code>:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// Створення зразка JSON</span>
+<span class="keyword token">var</span> session <span class="operator token">=</span> <span class="punctuation token">{</span>
+  <span class="string token">'screens'</span><span class="punctuation token">:</span> <span class="punctuation token">[</span><span class="punctuation token">]</span><span class="punctuation token">,</span>
+  <span class="string token">'state'</span><span class="punctuation token">:</span> <span class="keyword token">true</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+session<span class="punctuation token">.</span>screens<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span><span class="punctuation token">{</span> <span class="string token">'name'</span><span class="punctuation token">:</span> <span class="string token">'screenA'</span><span class="punctuation token">,</span> <span class="string token">'width'</span><span class="punctuation token">:</span> <span class="number token">450</span><span class="punctuation token">,</span> <span class="string token">'height'</span><span class="punctuation token">:</span> <span class="number token">250</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+session<span class="punctuation token">.</span>screens<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span><span class="punctuation token">{</span> <span class="string token">'name'</span><span class="punctuation token">:</span> <span class="string token">'screenB'</span><span class="punctuation token">,</span> <span class="string token">'width'</span><span class="punctuation token">:</span> <span class="number token">650</span><span class="punctuation token">,</span> <span class="string token">'height'</span><span class="punctuation token">:</span> <span class="number token">350</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+session<span class="punctuation token">.</span>screens<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span><span class="punctuation token">{</span> <span class="string token">'name'</span><span class="punctuation token">:</span> <span class="string token">'screenC'</span><span class="punctuation token">,</span> <span class="string token">'width'</span><span class="punctuation token">:</span> <span class="number token">750</span><span class="punctuation token">,</span> <span class="string token">'height'</span><span class="punctuation token">:</span> <span class="number token">120</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+session<span class="punctuation token">.</span>screens<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span><span class="punctuation token">{</span> <span class="string token">'name'</span><span class="punctuation token">:</span> <span class="string token">'screenD'</span><span class="punctuation token">,</span> <span class="string token">'width'</span><span class="punctuation token">:</span> <span class="number token">250</span><span class="punctuation token">,</span> <span class="string token">'height'</span><span class="punctuation token">:</span> <span class="number token">60</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+session<span class="punctuation token">.</span>screens<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span><span class="punctuation token">{</span> <span class="string token">'name'</span><span class="punctuation token">:</span> <span class="string token">'screenE'</span><span class="punctuation token">,</span> <span class="string token">'width'</span><span class="punctuation token">:</span> <span class="number token">390</span><span class="punctuation token">,</span> <span class="string token">'height'</span><span class="punctuation token">:</span> <span class="number token">120</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+session<span class="punctuation token">.</span>screens<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span><span class="punctuation token">{</span> <span class="string token">'name'</span><span class="punctuation token">:</span> <span class="string token">'screenF'</span><span class="punctuation token">,</span> <span class="string token">'width'</span><span class="punctuation token">:</span> <span class="number token">1240</span><span class="punctuation token">,</span> <span class="string token">'height'</span><span class="punctuation token">:</span> <span class="number token">650</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// Конвертація рядка JSON через JSON.stringify()</span>
+<span class="comment token">// далі збереження у localStorage із іменем "session</span>"
+localStorage<span class="punctuation token">.</span><span class="function token">setItem</span><span class="punctuation token">(</span><span class="string token">'session'</span><span class="punctuation token">,</span> JSON<span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span>session<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// Приклад, як перетворити рядок, отриманий за допомогою  </span>
+<span class="comment token">// JSON.stringify() і збережений у localStorage назад у JSON-об'єкт</span>
+<span class="keyword token">var</span> restoredSession <span class="operator token">=</span> JSON<span class="punctuation token">.</span><span class="function token">parse</span><span class="punctuation token">(</span>localStorage<span class="punctuation token">.</span><span class="function token">getItem</span><span class="punctuation token">(</span><span class="string token">'session'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// Тепер змінна restoredSession містить об'єкт, що був раніше збережений</span>
+<span class="comment token">// у localStorage</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>restoredSession<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.12.3', 'JSON.stringify')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Первинне визначення. Запроваджено у JavaScript 1.7.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-json.stringify', 'JSON.stringify')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-json.stringify', 'JSON.stringify')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<div>{{Compat("javascript.builtins.JSON.stringify")}}</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("JSON.parse()")}}</li>
+ <li><a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a> – Вводить дві функції: <code>JSON.decycle</code> та <code>JSON.retrocycle</code>. Вони дають можливість кодувати і декодувати циклічні структури і ділянки у розширений і зворотньо сумісний формат JSON.</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/map/index.html b/files/uk/web/javascript/reference/global_objects/map/index.html
new file mode 100644
index 0000000000..9377f478da
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/map/index.html
@@ -0,0 +1,201 @@
+---
+title: Map
+slug: Web/JavaScript/Reference/Global_Objects/Map
+translation_of: Web/JavaScript/Reference/Global_Objects/Map
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Об'єкт <strong><code>Map</code></strong> зберігає пари ключ-значення.</span> Будь-яке значення (і об'єкт, і примітивне значення) може бути використано і як ключ, і як значення.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">new Map([<em>iterable</em>])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>iterable</code></dt>
+ <dd>{{jsxref("Array")}} або інший <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">об'єкт, що перебирається</a>, чиї елементи є парами ключ-значення (масиви з двома елементами, наприклад, <code>[[1, 'one'], [2, 'two']]</code> ). Кожна пара ключ-значення додається до нового <code>Map</code>; значення <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">null</span></font> вважаються <code>undefined</code>.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Об'єкт <code>Map</code> перебирає свої елементи у порядку їх введення — цикл {{jsxref("Statements/for...of", "for...of")}} повертає масив <code>[ключ, значення]</code> під час кожної ітерації.</p>
+
+<p>Слід зазначити, що <code>Map</code>, що є <code>Map</code>'ом об'єкта, especially a dictionary of dictionaries, буде перебиратися у порядку додавання елементів в об'єкт - у довільному порядку і не упорядковано.</p>
+
+<h3 id="Еквівалентність_ключів">Еквівалентність ключів</h3>
+
+<p>Еквівалентність ключів основана на алгоритмі "SameValueZero": <code>NaN</code> вважається <code>NaN</code> (хоча, <code>NaN !== NaN</code>) і всі інші значення вважаються еквівалентними згідно семантики оператора <code>===</code>. У сучасній версії сецифікації ECMAScript <code>-0</code> та <code>+0</code> вважаються еквівалентними, хоча у попередніх версіях було інакше. Більш детально дивіться "Value equality for -0 and 0" у таблиці <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map#Browser_compatibility">сумісності браузерів</a>.</p>
+
+<h3 id="Порівняння_об'єктів_та_maps">Порівняння об'єктів та maps</h3>
+
+<p>{{jsxref("Object", "Objects")}} are similar to <code>Maps</code> in that both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. Because of this (and because there were no built-in alternatives), <code>Object</code>s have been used as <code>Maps</code> historically; however, there are important differences that make using a <code>Map</code> preferable in certain cases:</p>
+
+<ul>
+ <li>The keys of an <code>Object</code> are {{jsxref("String", "Strings")}} and {{jsxref("Symbol", "Symbols")}}, whereas they can be any value for a <code>Map</code>, including functions, objects, and any primitive.</li>
+ <li>You can get the size of a <code>Map</code> easily with the <code>size</code> property, while the number of properties in an <code>Object</code> must be determined manually.</li>
+ <li>A <code>Map</code> is an <a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable</a> and can thus be directly iterated, whereas iterating over an <code>Object</code> requires obtaining its keys in some fashion and iterating over them.</li>
+ <li>An <code>Object</code> has a prototype, so there are default keys in the map that could collide with your keys if you're not careful. As of ES5 this can be bypassed by using <code>map = Object.create(null)</code>, but this is seldom done.</li>
+ <li>A <code>Map</code> may perform better in scenarios involving frequent addition and removal of key pairs.</li>
+</ul>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt><code>Map.length</code></dt>
+ <dd>The value of the <code>length</code> property is 0.</dd>
+ <dt>{{jsxref("Map.@@species", "get Map[@@species]")}}</dt>
+ <dd>The constructor function that is used to create derived objects.</dd>
+ <dt>{{jsxref("Map.prototype")}}</dt>
+ <dd>Represents the prototype for the <code>Map</code> constructor. Allows the addition of properties to all <code>Map</code> objects.</dd>
+</dl>
+
+<h2 id="Map_instances"><code>Map</code> instances</h2>
+
+<p>All <code>Map</code> instances inherit from {{jsxref("Map.prototype")}}.</p>
+
+<h3 id="Properties_2">Properties</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Map/prototype','Properties')}}</p>
+
+<h3 id="Methods">Methods</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Map/prototype','Methods')}}</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_the_Map_object">Using the <code>Map</code> object</h3>
+
+<pre class="brush: js">var myMap = new Map();
+
+var keyString = 'a string',
+    keyObj = {},
+    keyFunc = function() {};
+
+// setting the values
+myMap.set(keyString, "value associated with 'a string'");
+myMap.set(keyObj, 'value associated with keyObj');
+myMap.set(keyFunc, 'value associated with keyFunc');
+
+myMap.size; // 3
+
+// getting the values
+myMap.get(keyString);    // "value associated with 'a string'"
+myMap.get(keyObj);       // "value associated with keyObj"
+myMap.get(keyFunc);      // "value associated with keyFunc"
+
+myMap.get('a string');   // "value associated with 'a string'"
+                         // because keyString === 'a string'
+myMap.get({});           // undefined, because keyObj !== {}
+myMap.get(function() {}) // undefined, because keyFunc !== function () {}
+</pre>
+
+<h3 id="Using_NaN_as_Map_keys">Using <code>NaN</code> as <code>Map</code> keys</h3>
+
+<p><code>NaN</code> can also be used as a key. Even though every <code>NaN</code> is not equal to itself (<code>NaN !== NaN</code> is true), the following example works because <code>NaN</code>s are indistinguishable from each other:</p>
+
+<pre class="brush: js">var myMap = new Map();
+myMap.set(NaN, 'not a number');
+
+myMap.get(NaN); // "not a number"
+
+var otherNaN = Number('foo');
+myMap.get(otherNaN); // "not a number"
+</pre>
+
+<h3 id="Iterating_Maps_with_for..of">Iterating <code>Maps</code> with <code>for..of</code></h3>
+
+<p>Maps can be iterated using a <code>for..of</code> loop:</p>
+
+<pre class="brush: js">var myMap = new Map();
+myMap.set(0, 'zero');
+myMap.set(1, 'one');
+for (var [key, value] of myMap) {
+  console.log(key + ' = ' + value);
+}
+// 0 = zero
+// 1 = one
+
+for (var key of myMap.keys()) {
+  console.log(key);
+}
+// 0
+// 1
+
+for (var value of myMap.values()) {
+  console.log(value);
+}
+// zero
+// one
+
+for (var [key, value] of myMap.entries()) {
+  console.log(key + ' = ' + value);
+}
+// 0 = zero
+// 1 = one
+</pre>
+
+<h3 id="Iterating_Maps_with_forEach()">Iterating <code>Maps</code> with <code>forEach()</code></h3>
+
+<p>Maps can be iterated using the <code>forEach()</code> method:</p>
+
+<pre class="brush: js">myMap.forEach(function(value, key) {
+  console.log(key + ' = ' + value);
+});
+// Will show 2 logs; first with "0 = zero" and second with "1 = one"
+</pre>
+
+<h3 id="Relation_with_Array_objects">Relation with <code>Array</code> objects</h3>
+
+<pre class="brush: js">var kvArray = [['key1', 'value1'], ['key2', 'value2']];
+
+// Use the regular Map constructor to transform a 2D key-value Array into a map
+var myMap = new Map(kvArray);
+
+myMap.get('key1'); // returns "value1"
+
+// Use the Array.from function to transform a map into a 2D key-value Array
+console.log(Array.from(myMap)); // Will show you exactly the same Array as kvArray
+
+// Or use the keys or values iterators and convert them to an array
+console.log(Array.from(myMap.keys())); // Will show ["key1", "key2"]
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map-objects', 'Map')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Map")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=697479">Map and Set bug at Mozilla</a></li>
+ <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets">ECMAScript Harmony proposal</a></li>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakSet")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/abs/index.html b/files/uk/web/javascript/reference/global_objects/math/abs/index.html
new file mode 100644
index 0000000000..b75b1e811c
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/abs/index.html
@@ -0,0 +1,104 @@
+---
+title: Math.abs()
+slug: Web/JavaScript/Reference/Global_Objects/Math/abs
+tags:
+  - JavaScript
+  - Math
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/abs
+---
+<div>{{JSRef}}</div>
+
+<p>Функція <strong><code>Math.abs()</code></strong> повертає абсолютне значення (модуль) числа, що дорівнює:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.abs</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mrow><mo stretchy="false">|</mo><mi>x</mi><mo stretchy="false">|</mo></mrow><mo>=</mo><mrow><mo>{</mo><mtable columnalign="left left"><mtr><mtd><mi>x</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>&gt;</mo><mn>0</mn></mtd></mtr><mtr><mtd><mi>0</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>=</mo><mn>0</mn></mtd></mtr><mtr><mtd><mo>-</mo><mi>x</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>&lt;</mo><mn>0</mn></mtd></mtr></mtable></mrow></mrow></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-abs.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Math.abs(<var>x</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Абсолютне значення данного числа.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Оскільки <code>abs()</code> статичний метод об'єкту <code>Math</code>, він завжди використовується як <code>Math.abs()</code>, а не як метод створеного об'єкту <code>Math</code>  (<code>Math</code> не є конструктором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Поведінка_методу_Math.abs()">Поведінка методу <code>Math.abs()</code></h3>
+
+<p>Передача пустого об'єкту, масиву з кількома числами, не числової строки {{jsxref("undefined")}}/пустої змінної, повертає  {{jsxref("NaN")}}. Передача {{jsxref("null")}}, пустої строки або пустого масиву, повертає - 0.</p>
+
+<pre class="brush: js" dir="rtl">Math.abs('-1');     // 1
+Math.abs(-2);       // 2
+Math.abs(null);     // 0
+Math.abs('');       // 0
+Math.abs([]);       // 0
+Math.abs([2]);      // 2
+Math.abs([1,2]);    // NaN
+Math.abs({});       // NaN
+Math.abs('string'); // NaN
+Math.abs();         // NaN
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Первинне визначення. Реалізовано у JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.1', 'Math.abs')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.abs', 'Math.abs')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.abs', 'Math.abs')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.abs")}}</p>
+
+<h2 id="Дивись_також">Дивись також</h2>
+
+<ul>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li>{{jsxref("Math.trunc()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/acos/index.html b/files/uk/web/javascript/reference/global_objects/math/acos/index.html
new file mode 100644
index 0000000000..f549eb1b4c
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/acos/index.html
@@ -0,0 +1,110 @@
+---
+title: Math.acos()
+slug: Web/JavaScript/Reference/Global_Objects/Math/acos
+tags:
+  - JavaScript
+  - Math
+  - Довідка
+  - арккосинус
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/acos
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math.acos()</code></strong> - це метод, який повертає арккосинус (у радіанах)  від числа, що являється:</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mo stretchy="false">[</mo><mrow><mo>-</mo><mn>1</mn></mrow><mo>;</mo><mn>1</mn><mo stretchy="false">]</mo><mo>,</mo><mspace width="thickmathspace"></mspace><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.acos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arccos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> такий унікальний </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mo stretchy="false">[</mo><mn>0</mn><mo>;</mo><mi>π</mi><mo stretchy="false">],</mo><mspace width="thinmathspace"></mspace><mtext>для якого</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">cos</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.acos}(x)} = \arccos(x) = \text{ унікальний } \; y \in [0; \pi] \, \text{such that} \; \cos(y) = x</annotation></semantics></math></p>
+
+<p>{{EmbedInteractiveExample("pages/js/math-acos.html")}}</p>
+
+<p> </p>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<p> </p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox"><code>Math.acos(<var>x</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+ <dt>
+ <h3 id="Результат">Результат</h3>
+ </dt>
+ <dd>Значення арккосинуса (у радіанах) поданого числа між <strong>-1</strong> та <strong>1</strong>; інакше - {{jsxref("NaN")}}.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p><code>Math.acos(x) метод вертає число між</code>  0 і π радіан,  для <code>x</code> між-1 і 1. Якщо число вийде за межі -1 ... +1,  метод поверне {{jsxref("NaN")}}.</p>
+
+<p>Оскільки <code>acos()</code> є статичним методом в обєкта <code>Math</code>, ви завжди повинні використовувати його як <code>Math.acos()</code>, а не викликати метод на створеному екземплярі обєкта <code>Math</code> (тому що <code>Math</code> не є конструктором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p> </p>
+
+<pre class="brush: js">Math.acos(-2);  // NaN
+Math.acos(-1);  // 3.141592653589793
+Math.acos(0);   // 1.5707963267948966
+Math.acos(0.5); // 1.0471975511965979
+Math.acos(1);   // 0
+Math.acos(2);   // NaN
+</pre>
+
+<p>Для значень менших за -1 або більших за 1, <code>Math.acos()</code> повертає {{jsxref("NaN")}}.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Первинне визначення. Реалізовано у JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.2', 'Math.acos')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.acos', 'Math.acos')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.acos', 'Math.acos')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_браузерами">Підтримка браузерами</h2>
+
+<div>
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+</div>
+
+<div>{{Compat("javascript.builtins.Math.acos")}}</div>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/acosh/index.html b/files/uk/web/javascript/reference/global_objects/math/acosh/index.html
new file mode 100644
index 0000000000..01bdf629fa
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/acosh/index.html
@@ -0,0 +1,91 @@
+---
+title: Math.acosh()
+slug: Web/JavaScript/Reference/Global_Objects/Math/acosh
+tags:
+  - JavaScript
+  - Math
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/acosh
+---
+<div>{{JSRef}}</div>
+
+<p>Функція <strong><code>Math.acosh()</code></strong> повертає гіперболічний арккосинус числа. Тобто:</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>≥</mo><mn>1</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.acosh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="thinmathspace">arcosh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> такий унікальний </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>≥</mo><mn>0, для якого</mn><mspace width="thickmathspace"></mspace><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">cosh</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \geq 1, \mathtt{\operatorname{Math.acosh}(x)} = \operatorname{arcosh}(x) = \text{ the unique } \; y \geq 0 \; \text{such that} \; \cosh(y) = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-acosh.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.acosh(<var>x</var>)</code></pre>
+
+<h3 id="Аргументи">Аргументи</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Гіперболічний арккосинус даного числа. У випадку, якщо аргумент менший за <strong>1</strong> - {{jsxref("NaN")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>У зв'язку із тим, що <code>acosh()</code> - статичний метод <code>Math</code>, слід завжди звертатись до нього у формі <code>Math.acosh()</code>. Намагатись викликати <code>acosh()</code>, звертаючись до методів  створених вами об'єктів <code>Math</code> - некоректно (<code>Math</code> не являється конструктором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_Math.acosh">Використання <code>Math.acosh()</code></h3>
+
+<pre class="brush: js">Math.acosh(-1);  // NaN
+Math.acosh(0);   // NaN
+Math.acosh(0.5); // NaN
+Math.acosh(1);   // 0
+Math.acosh(2);   // 1.3169578969248166
+</pre>
+
+<p>Для значень, що менші за 1 <code>Math.acosh()</code> повертає {{jsxref("NaN")}}.</p>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Для будь-якого <math><semantics><mrow><mi>x</mi><mo>≥</mo><mn>1</mn></mrow><annotation encoding="TeX">x \geq 1</annotation></semantics></math> у нас є <math><semantics><mrow><mo lspace="0em" rspace="thinmathspace">arcosh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mrow><mo>(</mo><mrow><mi>x</mi><mo>+</mo><msqrt><mrow><msup><mi>x</mi><mn>2</mn></msup><mo>-</mo><mn>1</mn></mrow></msqrt></mrow><mo>)</mo></mrow></mrow><annotation encoding="TeX">\operatorname {arcosh} (x) = \ln \left(x + \sqrt{x^{2} - 1} \right)</annotation></semantics></math>. Таким чином ми можемо зімітувати метод за допомогою наступної функції:</p>
+
+<pre class="brush: js">Math.acosh = Math.acosh || function(x) {
+  return Math.log(x + Math.sqrt(x * x - 1));
+};
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікації</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.acosh', 'Math.acosh')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.acosh")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.asinh()")}}</li>
+ <li>{{jsxref("Math.atanh()")}}</li>
+ <li>{{jsxref("Math.cosh()")}}</li>
+ <li>{{jsxref("Math.sinh()")}}</li>
+ <li>{{jsxref("Math.tanh()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/asin/index.html b/files/uk/web/javascript/reference/global_objects/math/asin/index.html
new file mode 100644
index 0000000000..53a2a41b26
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/asin/index.html
@@ -0,0 +1,103 @@
+---
+title: Math.asin()
+slug: Web/JavaScript/Reference/Global_Objects/Math/asin
+tags:
+  - JavaScript
+  - Math
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/asin
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>Math.asin()</code></strong> повертає значення (в радіанах) арксинуса числа, що являється</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mo stretchy="false">[</mo><mrow><mo>-</mo><mn>1</mn></mrow><mo>;</mo><mn>1</mn><mo stretchy="false">]</mo><mo>,</mo><mspace width="thickmathspace"></mspace><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.asin</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arcsin</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> такому унікальному </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mrow><mo>[</mo><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac><mo>;</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><mo>]</mo></mrow><mspace width="thinmathspace"></mspace><mtext>, для якого</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">sin</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.asin}(x)} = \arcsin(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \sin(y) = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-asin.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.asin(<var>x</var>)</code></pre>
+
+<h3 id="Аргументи">Аргументи</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Арксинус  (в радіанах) поданого числа від -1 до 1; інакше - {{jsxref("NaN")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>Math.asin(x)</code> повертає числове значення між <math><semantics><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><annotation encoding="TeX">-\frac{\pi}{2}</annotation></semantics></math> та <math><semantics><mfrac><mi>π</mi><mn>2</mn></mfrac><annotation encoding="TeX">\frac{\pi}{2}</annotation></semantics></math> радіан для <code>x</code> від -1 до 1. Якщо значення <code>x</code> за межами цього проміжку, він повертає {{jsxref("NaN")}}.</p>
+
+<p>Оскільки <code>asin()</code> - це статичний метод об'єкту <code>Math</code>, він завжди використовується як <code>Math.asin()</code>, а не як метод створеного об'єкту <code>Math</code>  (<code>Math</code> не є конструктором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_Math.asin()">Використання <code>Math.asin()</code></h3>
+
+<pre class="brush: js">Math.asin(-2);  // NaN
+Math.asin(-1);  // -1.5707963267948966 (-pi/2)
+Math.asin(0);   // 0
+Math.asin(0.5); // 0.5235987755982989
+Math.asin(1);   // 1.5707963267948966 (pi/2)
+Math.asin(2);   // NaN
+</pre>
+
+<p>Для значень, менших за -1 чи більших за 1, <code>Math.asin()</code> повертає {{jsxref("NaN")}}.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус документу</th>
+   <th scope="col">Примітка</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Первинне визначення. Реалізовано у JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.3', 'Math.asin')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.asin', 'Math.asin')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.asin', 'Math.asin')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.asin")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/asinh/index.html b/files/uk/web/javascript/reference/global_objects/math/asinh/index.html
new file mode 100644
index 0000000000..4d58b44c80
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/asinh/index.html
@@ -0,0 +1,92 @@
+---
+title: Math.asinh()
+slug: Web/JavaScript/Reference/Global_Objects/Math/asinh
+tags:
+  - JavaScript
+  - Math
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/asinh
+---
+<div>{{JSRef}}</div>
+
+<p>Функція <strong><code>Math.asinh()</code></strong> повертає гіперболічний арксинус числа, що являється:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.asinh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="thinmathspace">arsinh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> такий унікальний </mtext><mspace width="thickmathspace"></mspace><mi>y,</mi><mo lspace="0em" rspace="0em">  для якого sinh</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.asinh}(x)} = \operatorname{arsinh}(x) = \text{ the unique } \; y \; \text{such that} \; \sinh(y) = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-asinh.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.asinh(<var>x</var>)</code></pre>
+
+<h3 id="Аргументи">Аргументи</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Гіперболічний арксинус поданого числа.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Оскільки <code>asinh()</code> статичний метод об'єкту <code>Math</code>, він завжди використовується як <code>Math.asinh()</code>, а не як метод створеного об'єкту <code>Math</code>  (<code>Math</code> не є конструктором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_Math.asinh">Застосування <code>Math.asinh()</code></h3>
+
+<pre class="brush: js">Math.asinh(1);  // 0.881373587019543
+Math.asinh(0);  // 0
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>В якості швидкого і брудного трюку для грубої імітації оригіналу можна застосувати формулу <math><semantics><mrow><mo lspace="0em" rspace="thinmathspace">arsinh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mrow><mo>(</mo><mrow><mi>x</mi><mo>+</mo><msqrt><mrow><msup><mi>x</mi><mn>2</mn></msup><mo>+</mo><mn>1</mn></mrow></msqrt></mrow><mo>)</mo></mrow></mrow><annotation encoding="TeX">\operatorname {arsinh} (x) = \ln \left(x + \sqrt{x^{2} + 1} \right)</annotation></semantics></math> у вигляді такої функції:</p>
+
+<pre class="brush: js">Math.asinh = Math.asinh || function(x) {
+  if (x === -Infinity) {
+    return x;
+  } else {
+    return Math.log(x + Math.sqrt(x * x + 1));
+  }
+};
+</pre>
+
+<p>Являючись формально вірною, вона страждає від значної кількості помилок, пов'язаних із обчисленням чисел із плаваючою комою. Точні результати потребують спеціальної обробки додатніх і від'ємних, дрібних і великих значень аргументів, так, як це зроблено, наприклад, у  <a href="https://sourceware.org/git/?p=glibc.git;a=blob;f=sysdeps/ieee754/dbl-64/s_asinh.c">glibc</a> чи <a href="http://git.savannah.gnu.org/cgit/gsl.git/tree/sys/invhyp.c">GNU Scientific Library</a>.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.asinh', 'Math.asinh')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.asinh")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.acosh()")}}</li>
+ <li>{{jsxref("Math.atanh()")}}</li>
+ <li>{{jsxref("Math.cosh()")}}</li>
+ <li>{{jsxref("Math.sinh()")}}</li>
+ <li>{{jsxref("Math.tanh()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/atan/index.html b/files/uk/web/javascript/reference/global_objects/math/atan/index.html
new file mode 100644
index 0000000000..bbc76aade4
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/atan/index.html
@@ -0,0 +1,106 @@
+---
+title: Math.atan()
+slug: Web/JavaScript/Reference/Global_Objects/Math/atan
+tags:
+  - JavaScript
+  - Math
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan
+---
+<div>{{JSRef}}</div>
+
+<p>Функція <strong><code>Math.atan()</code></strong> повертає арктангенс (у радіанах) від числа, що являється:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.atan</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arctan</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> такий унікальний </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mrow><mo>[</mo><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac><mo>;</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><mo>], для якого </mo></mrow><mo lspace="0em" rspace="0em">tan</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.atan}(x)} = \arctan(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \tan(y) = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-atan.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.atan(<var>x</var>)</code></pre>
+
+<h3 id="Аргументи">Аргументи</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Арктангенс (у радіанах) від поданого числа.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>Math.atan()</code> повертає числове значення з-поміж <math><semantics><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><annotation encoding="TeX">-\frac{\pi}{2}</annotation></semantics></math> та <math><semantics><mfrac><mi>π</mi><mn>2</mn></mfrac><annotation encoding="TeX">\frac{\pi}{2}</annotation></semantics></math> радіан.</p>
+
+<p>Оскільки <code>atan()</code> статичний метод об'єкту <code>Math</code>, він завжди використовується як <code>Math.atan()</code>, а не як метод створеного об'єкту <code>Math</code>  (<code>Math</code> не є конструктором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_Math.atan()">Застосування <code>Math.atan()</code></h3>
+
+<pre class="brush: js">Math.atan(1);   // 0.7853981633974483
+Math.atan(0);   // 0
+Math.atan(-0);  // -0
+
+Math.atan(Infinity); <span class="objectBox objectBox-number">  //  1.5707963267948966
+Math.atan(-Infinity);  // -1.5707963267948966
+
+</span>// The angle that the line [(0,0);(x,y)] forms with the x-axis in a Cartesian coordinate system
+Math.atan(y / x);
+</pre>
+
+<p>Зверніть увагу - можливо вам захочеться уникнути використання <strong>±</strong><code>Infinity</code> із стилістичних міркуваня. У цьому випадку {{jsxref("Math.atan2()")}} із <code>0</code> в якості другого аргументу може бути ліпшим варіантом.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус документу</th>
+   <th scope="col">Примітка</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Первинне визначення. Реалізовано у JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.4', 'Math.atan')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.atan', 'Math.atan')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.atan', 'Math.atan')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.atan")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/atan2/index.html b/files/uk/web/javascript/reference/global_objects/math/atan2/index.html
new file mode 100644
index 0000000000..a571a3adc4
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/atan2/index.html
@@ -0,0 +1,119 @@
+---
+title: Math.atan2()
+slug: Web/JavaScript/Reference/Global_Objects/Math/atan2
+tags:
+  - JavaScript
+  - Math
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan2
+---
+<div>{{JSRef}}</div>
+
+<p>Функція <strong><code>Math.atan2()</code></strong> повертає арктангенс частки поданих чисел.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-atan2.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.atan2(<var>y</var>, <var>x</var>)</code></pre>
+
+<h3 id="Аргументи">Аргументи</h3>
+
+<dl>
+ <dt><code>y</code></dt>
+ <dd>Перше число.</dd>
+ <dt><code>x</code></dt>
+ <dd>Друге число.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Арктангенс частки даних аргументів</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>Math.atan2()</code> повертає числове значення з-поміж -π та π, що являє собою кут Тета нахилу вектора <code>(x, y)</code>. Тобто це кут між додатнім напрямком осі OX і вектором <code>(x, y)</code>, виміряний проти годинникової стрілки. Як і інші методи <code>Math</code>,  <code>atan2()</code> повертає значення кута у радіанах.</p>
+
+<div class="note">
+<p>Зауважте порядок розміщення аргументів функції: першою йде координата y, а другою — x.</p>
+</div>
+
+<p> </p>
+
+<p><img alt="A simple diagram showing the angle returned by atan2(y, x)" src="https://mdn.mozillademos.org/files/11557/atan2.png" style="height: 300px; width: 300px;"></p>
+
+<p>На відміну від <code>Math.atan()</code>, що працює із часткою координат <code>x</code> та <code>y</code>, <code>Math.atan2()</code> приймає їх на вхід окремо.</p>
+
+<p>Оскільки <code>atan2()</code> - це статичний метод об'єкту <code>Math</code>, він завжди використовується як <code>Math.atan2()</code>, а не як метод створеного об'єкту <code>Math</code>  (<code>Math</code> не є конструктором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_Math.atan2()">Застосування <code>Math.atan2()</code></h3>
+
+<pre class="brush: js">Math.atan2(90, 15); // 1.4056476493802699
+Math.atan2(15, 90); // 0.16514867741462683
+
+Math.atan2(±0, -0);               // ±PI.
+Math.atan2(±0, +0);               // ±0.
+Math.atan2(±0, -x);               // ±PI for x &gt; 0.
+Math.atan2(±0, x);                // ±0 for x &gt; 0.
+Math.atan2(-y, ±0);               // -PI/2 for y &gt; 0.
+Math.atan2(y, ±0);                // PI/2 for y &gt; 0.
+Math.atan2(±y, -Infinity);        // ±PI for finite y &gt; 0.
+Math.atan2(±y, +Infinity);        // ±0 for finite y &gt; 0.
+Math.atan2(±Infinity, x);         // ±PI/2 for finite x.
+Math.atan2(±Infinity, -Infinity); // ±3*PI/4.
+Math.atan2(±Infinity, +Infinity); // ±PI/4.
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус документу</th>
+   <th scope="col">Примітка</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Первинне визначення. Реалізовано у JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.5', 'Math.atan2')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.atan2', 'Math.atan2')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.atan2', 'Math.atan2')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.atan2")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/atanh/index.html b/files/uk/web/javascript/reference/global_objects/math/atanh/index.html
new file mode 100644
index 0000000000..b99208c599
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/atanh/index.html
@@ -0,0 +1,92 @@
+---
+title: Math.atanh()
+slug: Web/JavaScript/Reference/Global_Objects/Math/atanh
+tags:
+  - JavaScript
+  - Math
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/atanh
+---
+<div>{{JSRef}}</div>
+
+<p>Функція <strong><code>Math.atanh()</code></strong> повертає значення гіперболічного акртангенса числа, що являється:</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mrow><mo>(</mo><mrow><mo>-</mo><mn>1</mn><mo>,</mo><mn>1</mn></mrow><mo>)</mo></mrow><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.atanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="thinmathspace">arctanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> такий унікальний </mtext><mspace width="thickmathspace"></mspace><mi>y, </mi><mspace width="thickmathspace"></mspace><mtext>для якого</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">tanh</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in \left( -1, 1 \right), \mathtt{\operatorname{Math.atanh}(x)} = \operatorname{arctanh}(x) = \text{ the unique } \; y \; \text{such that} \; \tanh(y) = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-atanh.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.atanh(<var>x</var>)</code></pre>
+
+<h3 id="Аргументи">Аргументи</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Гіперболічний арктангенс даного числа.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Оскільки <code>atanh()</code> - статичний метод об'єкту <code>Math</code>, він завжди використовується як <code>Math.atanh()</code>, а не як метод створеного об'єкту <code>Math</code>  (<code>Math</code> не є конструктором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_Math.atanh">Застосування <code>Math.atanh()</code></h3>
+
+<pre class="brush: js">Math.atanh(-2);  // NaN
+Math.atanh(-1);  // -Infinity
+Math.atanh(0);   // 0
+Math.atanh(0.5); // 0.5493061443340548
+Math.atanh(1);   // Infinity
+Math.atanh(2);   // NaN
+</pre>
+
+<p>Для числових значень, що більші за 1 чи менші від -1, результатом є {{jsxref("NaN")}}.</p>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Для <math><semantics><mrow><mrow><mo>|</mo><mi>x</mi><mo>|</mo></mrow><mo>&lt;</mo><mn>1</mn></mrow><annotation encoding="TeX">\left|x\right| &lt; 1</annotation></semantics></math>, ми маємо <math><semantics><mrow><mo lspace="0em" rspace="thinmathspace">artanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mfrac><mn>1</mn><mn>2</mn></mfrac><mo lspace="0em" rspace="0em">ln</mo><mrow><mo>(</mo><mfrac><mrow><mn>1</mn><mo>+</mo><mi>x</mi></mrow><mrow><mn>1</mn><mo>-</mo><mi>x</mi></mrow></mfrac><mo>)</mo></mrow></mrow><annotation encoding="TeX">\operatorname {artanh} (x) = \frac{1}{2}\ln \left( \frac{1 + x}{1 - x} \right)</annotation></semantics></math>, тобто можемо емулювати необхідний функціонал за допомогою наступної функції:</p>
+
+<pre class="brush: js">Math.atanh = Math.atanh || function(x) {
+  return Math.log((1+x)/(1-x)) / 2;
+};
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.atanh', 'Math.atanh')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.atanh")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.acosh()")}}</li>
+ <li>{{jsxref("Math.asinh()")}}</li>
+ <li>{{jsxref("Math.cosh()")}}</li>
+ <li>{{jsxref("Math.sinh()")}}</li>
+ <li>{{jsxref("Math.tanh()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/cbrt/index.html b/files/uk/web/javascript/reference/global_objects/math/cbrt/index.html
new file mode 100644
index 0000000000..ff889e3849
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/cbrt/index.html
@@ -0,0 +1,100 @@
+---
+title: Math.cbrt()
+slug: Web/JavaScript/Reference/Global_Objects/Math/cbrt
+tags:
+  - JavaScript
+  - Math
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/cbrt
+---
+<div>{{JSRef}}</div>
+
+<p>Функція <strong><code>Math.cbrt()</code></strong> повертає кубічний корінь числа. Тобто:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mi>M</mi><mi>a</mi><mi>t</mi><mi>h</mi><mo>.</mo><mi>c</mi><mi>b</mi><mi>r</mi><mi>t</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mroot><mi>x</mi><mn>3</mn></mroot><mo>=</mo><mtext>такий унікальний</mtext><mspace width="thickmathspace"></mspace><mi>y,</mi><mspace width="thickmathspace"></mspace><mtext>для якого</mtext><mspace width="thickmathspace"></mspace><msup><mi>y</mi><mn>3</mn></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{Math.cbrt(x)} = \sqrt[3]{x} = \text{the unique} \; y \; \text{such that} \; y^3 = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-cbrt.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.cbrt(<var>x</var>)</code></pre>
+
+<h3 id="Аргументи">Аргументи</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Кубічний корінь даного числа.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Оскільки <code>cbrt()</code> - це статичний метод об'єкту <code>Math</code>, він завжди використовується як <code>Math.cbrt()</code>, а не як метод створеного об'єкту <code>Math</code>  (<code>Math</code> не є конструктором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_Math.cbrt()">Застосування <code>Math.cbrt()</code></h3>
+
+<pre class="brush: js">Math.cbrt(NaN); // NaN
+Math.cbrt(-1); // -1
+Math.cbrt(-0); // -0
+Math.cbrt(-Infinity); // -Infinity
+Math.cbrt(0); // 0
+Math.cbrt(1); // 1
+Math.cbrt(Infinity); // Infinity
+Math.cbrt(null); // 0
+Math.cbrt(2);  // 1.2599210498948734
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Для всіх <math><semantics><mrow><mi>x</mi><mo>≥</mo><mn>0</mn></mrow><annotation encoding="TeX">x \geq 0</annotation></semantics></math> маємо <math><semantics><mrow><mroot><mi>x</mi><mn>3</mn></mroot><mo>=</mo><msup><mi>x</mi><mrow><mn>1</mn><mo>/</mo><mn>3</mn></mrow></msup></mrow><annotation encoding="TeX">\sqrt[3]{x} = x^{1/3}</annotation></semantics></math>, тобто цей метод може бути зімітованим за допомогою функції:</p>
+
+<pre class="brush: js">if (!Math.cbrt) {
+  Math.cbrt = function(x) {
+    var y = Math.pow(Math.abs(x), 1/3);
+    return x &lt; 0 ? -y : y;
+  };
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус документу</th>
+   <th scope="col">Примітка</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.cbrt', 'Math.cbrt')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Первинне визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.cbrt', 'Math.cbrt')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.cbrt")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.pow()")}}</li>
+ <li>{{jsxref("Math.sqrt()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/ceil/index.html b/files/uk/web/javascript/reference/global_objects/math/ceil/index.html
new file mode 100644
index 0000000000..c4e035d57d
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/ceil/index.html
@@ -0,0 +1,174 @@
+---
+title: Math.ceil()
+slug: Web/JavaScript/Reference/Global_Objects/Math/ceil
+tags:
+  - JavaScript
+  - Math
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/ceil
+---
+<div>{{JSRef}}</div>
+
+<p>Функція <strong><code>Math.ceil()</code></strong> повертає найменше ціле число, що є більшим або дорівнює даному числу.</p>
+
+<p> </p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-ceil.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<p> </p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.ceil(<var>x</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Найменше ціле число, що є більшим або дорівнює даному числу.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Оскільки <code>ceil()</code>є статичним методом <code>Math</code>, він завжди використовується як <code>Math.ceil()</code>, а не метод створеного Вами об'єкту <code>Math</code> (<code>Math</code> не є конструктором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_Math.ceil()">Використання <code>Math.ceil()</code></h3>
+
+<p>Наступні приклади демонструють використання <code>Math.ceil()</code>.</p>
+
+<pre class="brush: js">Math.ceil(.95);    // 1
+Math.ceil(4);      // 4
+Math.ceil(7.004);  // 8
+Math.ceil(-0.95);  // -0
+Math.ceil(-4);     // -4
+Math.ceil(-7.004); // -7
+</pre>
+
+<h3 id="Робота_з_десятковими_числами">Робота з десятковими числами</h3>
+
+<pre class="brush: js">// Замикання
+(function() {
+  /**
+   * Десяткове вирівнювання числа.
+   *
+   * @param {String}  type  Тип вирівнювання.
+   * @param {Number}  value Число.
+   * @param {Integer} exp   Показник степеня (десятковий логарифм від основи округлення).
+   * @returns {Number} Вирівняне значення.
+   */
+  function decimalAdjust(type, value, exp) {
+    // Якщо показник степеня невизначений, або 0...
+    if (typeof exp === 'undefined' || +exp === 0) {
+      return Math[type](value);
+    }
+    value = +value;
+    exp = +exp;
+    // Якщо значення не є числом, або ж показник степеня не цілий...
+    if (isNaN(value) || !(typeof exp === 'number' &amp;&amp; exp % 1 === 0)) {
+      return NaN;
+    }
+    // Зсув
+    value = value.toString().split('e');
+    value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
+    // Зворотній зсув
+    value = value.toString().split('e');
+    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
+  }
+
+  // Десяткове округлення
+  if (!Math.round10) {
+    Math.round10 = function(value, exp) {
+      return decimalAdjust('round', value, exp);
+    };
+  }
+  // Десяткове округлення до нижнього
+  if (!Math.floor10) {
+    Math.floor10 = function(value, exp) {
+      return decimalAdjust('floor', value, exp);
+    };
+  }
+  // Десяткове округлення до верхнього
+  if (!Math.ceil10) {
+    Math.ceil10 = function(value, exp) {
+      return decimalAdjust('ceil', value, exp);
+    };
+  }
+})();
+
+// Округлення
+Math.round10(55.55, -1);   // 55.6
+Math.round10(55.549, -1);  // 55.5
+Math.round10(55, 1);       // 60
+Math.round10(54.9, 1);     // 50
+Math.round10(-55.55, -1);  // -55.5
+Math.round10(-55.551, -1); // -55.6
+Math.round10(-55, 1);      // -50
+Math.round10(-55.1, 1);    // -60
+// Округлення до нижнього
+Math.floor10(55.59, -1);   // 55.5
+Math.floor10(59, 1);       // 50
+Math.floor10(-55.51, -1);  // -55.6
+Math.floor10(-51, 1);      // -60
+// Округлення до верхнього
+Math.ceil10(55.51, -1);    // 55.6
+Math.ceil10(51, 1);        // 60
+Math.ceil10(-55.59, -1);   // -55.5
+Math.ceil10(-59, 1);       // -50
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Первинне визначення. Реалізовано у  JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.6', 'Math.ceil')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.ceil', 'Math.ceil')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.ceil', 'Math.ceil')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.ceil")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li>{{jsxref("Math.trunc()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/clz32/index.html b/files/uk/web/javascript/reference/global_objects/math/clz32/index.html
new file mode 100644
index 0000000000..9c77d005ec
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/clz32/index.html
@@ -0,0 +1,113 @@
+---
+title: Math.clz32()
+slug: Web/JavaScript/Reference/Global_Objects/Math/clz32
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/clz32
+---
+<div>{{JSRef}}</div>
+
+<p>Функція <strong><code>Math.clz32()</code></strong> повертає кількість ведучих нульових бітів 32-бітного двоїчного уявлення даного числа.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-clz32.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.clz32(<var>x</var>)</code></pre>
+
+<h3 id="Аргументи">Аргументи</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Кількість ведучих нульових бітів 32-бітного двоїчного уявлення даного числа.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>"<code>clz32</code>" - це скорочено від <code>CountLeadingZeroes32</code>.</p>
+
+<p>Якщо аргумент <code>x</code> не є числом, він спочатку буде приведений до числового формату, а потім - до 32-бітного беззнакового цілого.</p>
+
+<p>Якщо в результаті 32-бітне беззнакове ціле число є нулем - функція повертає <code>32</code>, тому що всі його біти являються нульовими.</p>
+
+<p>Ця функція, зокрема, дуже помічна для систем, що компілюють щось у JS. Наприклад - <a href="/en-US/docs/Emscripten">Emscripten</a>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_Math.clz32()">Застосування <code>Math.clz32()</code></h3>
+
+<pre class="brush: js">Math.clz32(1);                // 31
+Math.clz32(1000);             // 22
+Math.clz32();                 // 32
+
+[NaN, Infinity, -Infinity, 0, -0, null, undefined, 'foo', {}, []].filter(
+function(n) {
+  return Math.clz32(n) !== 32
+});                           // []
+
+Math.clz32(true);             // 31
+Math.clz32(3.5);              // 30
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Найбільш ефективний поліфіл:</p>
+
+<pre class="brush: js">if (!Math.clz32) {
+  Math.clz32 = function(x) {
+    // Let n be ToUint32(x).
+    // Let p be the number of leading zero bits in
+    // the 32-bit binary representation of n.
+    // Return p.
+    if (x == null || x === 0) {
+      return 32;
+    }
+    return 31 - Math.floor(Math.log(x &gt;&gt;&gt; 0) * Math.LOG2E);
+  };
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус документу</th>
+   <th scope="col">Примітка</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-math.clz32', 'Math.clz32')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Первинне визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.clz32', 'Math.clz32')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.clz32")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math")}}</li>
+ <li>{{jsxref("Math.imul")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/cos/index.html b/files/uk/web/javascript/reference/global_objects/math/cos/index.html
new file mode 100644
index 0000000000..8cce369812
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/cos/index.html
@@ -0,0 +1,83 @@
+---
+title: Math.cos()
+slug: Web/JavaScript/Reference/Global_Objects/Math/cos
+tags:
+  - JavaScript
+  - Math
+  - cos
+  - Довідка
+  - геометрія
+  - косинус
+  - метод
+  - тригонометрія
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/cos
+---
+<div>{{JSRef}}</div>
+
+<p><span style="display: none;"> </span><span class="seoSummary">Статична функція <strong><code>Math.cos()</code></strong> повертає {{interwiki("wikipedia", "косинус")}} поданого кута, який повинен бути вказаним у {{interwiki("wikipedia", "радіан", "радіанах")}}. Значення косинуса дорівнює відношенню</span><math style="display: inline;"><mstyle displaystyle="true"><mfrac><msub><mrow><mtext>довжини</mtext> </mrow><mrow><mrow><mtext>прилеглого катета</mtext> </mrow></mrow></msub><msub><mrow><mtext>довжини</mtext> </mrow><mrow><mrow><mtext>гіпотенузи</mtext> </mrow> </mrow> </msub> </mfrac> </mstyle> </math>.<span style="display: none;"> </span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-cos.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.cos(<var>x</var>)</code></pre>
+
+<h3 id="Аргументи">Аргументи</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Кут у радіанах, косинус якого необхідно отримати.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Косинус даного числа.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>Math.cos()</code> повертає числове значення з-поміж -1 та 1, що відповідає косинусу кута.</p>
+
+<p>Оскільки <code>cos()</code> є статичним методом в обєкта <code>Math</code>, ви завжди повинні використовувати його як <code>Math.cos()</code>, а не викликати метод на створеному екземплярі обєкта <code>Math</code> (тому що <code>Math</code> не є конструктором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_Math.cos">Застосування <code>Math.cos()</code></h3>
+
+<pre class="brush: js">Math.cos(0);           // 1
+Math.cos(1);           // 0.5403023058681398
+
+Math.cos(Math.PI);     // -1
+Math.cos(2 * Math.PI); // 1
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.cos', 'Math.cos')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.cos")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/cosh/index.html b/files/uk/web/javascript/reference/global_objects/math/cosh/index.html
new file mode 100644
index 0000000000..5973ba2868
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/cosh/index.html
@@ -0,0 +1,93 @@
+---
+title: Math.cosh()
+slug: Web/JavaScript/Reference/Global_Objects/Math/cosh
+tags:
+  - JavaScript
+  - Math
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/cosh
+---
+<div>{{JSRef}}</div>
+
+<p>Функція <strong><code>Math.cosh()</code></strong> повертає значення гіперболічного косинуса числа, що може бути також виражене через {{jsxref("Math.E", "сталу e", "", 1)}}:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mo lspace="0em" rspace="thinmathspace">Math.cosh(x)</mo></mstyle><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>+</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow><mn>2</mn></mfrac></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.cosh(x)}} = \frac{e^x + e^{-x}}{2}</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-cosh.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.cosh(<var>x</var>)</code></pre>
+
+<h3 id="Аргументи">Аргументи</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Гіперболічний косинус даного числа.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Оскільки <code>cosh()</code> - це статичний метод об'єкту <code>Math</code>, він завжди використовується як <code>Math.cosh()</code>, а не як метод створеного об'єкту <code>Math</code>  (<code>Math</code> не є конструктором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_Math.cosh">Застосування <code>Math.cosh()</code></h3>
+
+<pre class="brush: js">Math.cosh(0);  // 1
+Math.cosh(1);  // 1.5430806348152437
+Math.cosh(-1); // 1.5430806348152437
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Ця функцію можна зімітувати за допомогою {{jsxref("Math.exp()")}}:</p>
+
+<pre class="brush: js">Math.cosh = Math.cosh || function(x) {
+  return (Math.exp(x) + Math.exp(-x)) / 2;
+}
+</pre>
+
+<p>або ж викликаючи {{jsxref("Math.exp()")}} лише один раз:</p>
+
+<pre class="brush: js">Math.cosh = Math.cosh || function(x) {
+  var y = Math.exp(x);
+  return (y + 1 / y) / 2;
+};
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.cosh', 'Math.cosh')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.cosh")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.acosh()")}}</li>
+ <li>{{jsxref("Math.asinh()")}}</li>
+ <li>{{jsxref("Math.atanh()")}}</li>
+ <li>{{jsxref("Math.sinh()")}}</li>
+ <li>{{jsxref("Math.tanh()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/e/index.html b/files/uk/web/javascript/reference/global_objects/math/e/index.html
new file mode 100644
index 0000000000..d04b6dce98
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/e/index.html
@@ -0,0 +1,85 @@
+---
+title: Math.E
+slug: Web/JavaScript/Reference/Global_Objects/Math/E
+tags:
+  - JavaScript
+  - Math
+  - Властивість
+  - Довідка
+  - Поле
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/E
+---
+<div>{{JSRef}}</div>
+
+<p>Поле <strong><code>Math.E</code></strong> відображає сталу Ейлера <math><semantics><mi>e</mi><annotation encoding="TeX">e</annotation></semantics></math>, основу натуральних логарифмів, що наближено дорівнює 2.718.</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.E</mi></mstyle><mo>=</mo><mi>e</mi><mo>≈</mo><mn>2.718</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.E}} = e \approx 2.718</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-e.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь-ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Опис">Опис</h2>
+
+<p>У зв'язку із тим, що <code>E</code> - це статичне поле <code>Math</code>, слід завжди звертатись до нього <code>Math.E</code>. Намагатись викликати <code>E</code>, звертаючись до полів  створених вами об'єктів <code>Math</code> - некоректно (<code>Math</code> не являється конструктором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_Math.E">Використання <code>Math.E</code></h3>
+
+<p>Наступна функція повертає e:</p>
+
+<pre class="brush: js">function getNapier() {
+  return Math.E;
+}
+
+getNapier(); // 2.718281828459045
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус документу</th>
+   <th scope="col">Примітка</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Первинне визначення. Реалізовано у JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.1', 'Math.E')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.e', 'Math.E')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.e', 'Math.E')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.E")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/exp/index.html b/files/uk/web/javascript/reference/global_objects/math/exp/index.html
new file mode 100644
index 0000000000..770c983bb5
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/exp/index.html
@@ -0,0 +1,76 @@
+---
+title: Math.exp()
+slug: Web/JavaScript/Reference/Global_Objects/Math/exp
+tags:
+  - JavaScript
+  - Math
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/exp
+---
+<div>{{JSRef}}</div>
+
+<p>Функція <strong><code>Math.exp()</code></strong> повертає <code>e<sup>x</sup></code>, де <code>x</code> - аргумент, а <code>e</code> - {{jsxref("Math.E", "число (стала) Ейлера", "", 1)}}, основа натурального логарифму.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-exp.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.exp(<var>x</var>)</code></pre>
+
+<h3 id="Аргументи">Аргументи</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Число, що відображає <code>e<sup>x</sup></code>, де <code>e</code> - це  {{jsxref("Math.E", "стала Ейлера", "", 1)}}, та <code>x</code> - аргумент.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Так як <code>exp()</code> - це статичний метод об'єкту <code>Math</code>, він завжди використовується як <code>Math.exp()</code>, а не як метод створеного об'єкту <code>Math</code>  (<code>Math</code> не є конструктором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_Math.exp">Застосування <code>Math.exp()</code></h3>
+
+<pre class="brush: js">Math.exp(-1); // 0.36787944117144233
+Math.exp(0);  // 1
+Math.exp(1);  // 2.718281828459045
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.exp', 'Math.exp')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.exp")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.E")}}</li>
+ <li>{{jsxref("Math.expm1()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/expm1/index.html b/files/uk/web/javascript/reference/global_objects/math/expm1/index.html
new file mode 100644
index 0000000000..9ff397ce07
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/expm1/index.html
@@ -0,0 +1,85 @@
+---
+title: Math.expm1()
+slug: Web/JavaScript/Reference/Global_Objects/Math/expm1
+tags:
+  - JavaScript
+  - Math
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/expm1
+---
+<div>{{JSRef}}</div>
+
+<p>Функція <strong><code>Math.expm1()</code></strong> повертає результат обчислення виразу <code>e<sup>x</sup> - 1</code>, де <code>x</code> - це аргумент, а {{jsxref("Math.E", "e", "", 1)}} - основа натурального логарифму.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-expm1.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.expm1(<var>x</var>)</code></pre>
+
+<h3 id="Аргументи">Аргументи</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Число, що відображає результат виразу <code>e<sup>x</sup> - 1</code>, де <code>e</code> - це {{jsxref("Math.E", "стала Ейлера", "", 1)}}, а <code>x</code> - аргумент.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Оскільки <code>expm1()</code> - це статичний метод об'єкту <code>Math</code>, він завжди використовується як <code>Math.expm1()</code>, а не як метод створеного об'єкту <code>Math</code>  (<code>Math</code> не є конструктором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосуваня_Math.expm1">Застосуваня <code>Math.expm1()</code></h3>
+
+<pre class="brush: js">Math.expm1(-1); // -0.6321205588285577
+Math.expm1(0);  // 0
+Math.expm1(1);  // 1.718281828459045
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Даний функціонал можна емулювати за допомогою функції {{jsxref("Math.exp()")}}:</p>
+
+<pre class="brush: js">Math.expm1 = Math.expm1 || function(x) {
+  return Math.exp(x) - 1;
+};
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.expm1', 'Math.expm1')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.expm1")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.E")}}</li>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/floor/index.html b/files/uk/web/javascript/reference/global_objects/math/floor/index.html
new file mode 100644
index 0000000000..2507381ebd
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/floor/index.html
@@ -0,0 +1,164 @@
+---
+title: Math.floor()
+slug: Web/JavaScript/Reference/Global_Objects/Math/floor
+tags:
+  - JavaScript
+  - Math
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/floor
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>Math.floor()</code></strong> повертає найбільше ціле число, менше або рівне даному числу.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.floor(<var>x</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Найбільше ціле число, менше або рівне даному числу.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Оскільки <code>floor()</code> є статичним методом об'єкту <code>Math</code>, він завжди використовується як <code>Math.floor()</code>, а не метод створеного Вами об'єкту <code>Math</code> (<code>Math</code> не є конструктором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_Math.floor()">Використання <code>Math.floor()</code></h3>
+
+<pre class="brush: js">Math.floor( 45.95); //  45
+Math.floor( 45.05); //  45
+Math.floor(  4   ); //   4
+Math.floor(-45.05); // -46
+Math.floor(-45.95); // -46
+</pre>
+
+<h3 id="Десяткове_округлення">Десяткове округлення</h3>
+
+<pre class="brush: js">// Замикання
+(function() {
+  /**
+   * Десяткове округлення числа до необхідної точності.
+   *
+   * @param {String}  type  Тип округлення.
+   * @param {Number}  value Число.
+   * @param {Integer} exp   Степінь (десятковий логарифм від основи округлення).
+   * @returns {Number} Округлене число.
+   */
+  function decimalAdjust(type, value, exp) {
+    // Якщо exp невизначений або дорівнює нулю...
+    if (typeof exp === 'undefined' || +exp === 0) {
+      return Math[type](value);
+    }
+    value = +value;
+    exp = +exp;
+    // Якщо value не є числом, або ж степінь exp не являється цілим...
+    if (isNaN(value) || !(typeof exp === 'number' &amp;&amp; exp % 1 === 0)) {
+      return NaN;
+    }
+    // Зсув
+    value = value.toString().split('e');
+    value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
+    // Зворотній зсув
+    value = value.toString().split('e');
+    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
+  }
+
+  // Десяткове округлення
+  if (!Math.round10) {
+    Math.round10 = function(value, exp) {
+      return decimalAdjust('round', value, exp);
+    };
+  }
+  // Десяткове округлення до меншого
+  if (!Math.floor10) {
+    Math.floor10 = function(value, exp) {
+      return decimalAdjust('floor', value, exp);
+    };
+  }
+  // Десяткове округлення до більшого
+  if (!Math.ceil10) {
+    Math.ceil10 = function(value, exp) {
+      return decimalAdjust('ceil', value, exp);
+    };
+  }
+})();
+
+// Округлення
+Math.round10(55.55, -1);   // 55.6
+Math.round10(55.549, -1);  // 55.5
+Math.round10(55, 1);       // 60
+Math.round10(54.9, 1);     // 50
+Math.round10(-55.55, -1);  // -55.5
+Math.round10(-55.551, -1); // -55.6
+Math.round10(-55, 1);      // -50
+Math.round10(-55.1, 1);    // -60
+// Floor
+Math.floor10(55.59, -1);   // 55.5
+Math.floor10(59, 1);       // 50
+Math.floor10(-55.51, -1);  // -55.6
+Math.floor10(-51, 1);      // -60
+// Ceil
+Math.ceil10(55.51, -1);    // 55.6
+Math.ceil10(51, 1);        // 60
+Math.ceil10(-55.59, -1);   // -55.5
+Math.ceil10(-59, 1);       // -50
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.9', 'Math.floor')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.floor', 'Math.floor')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.floor', 'Math.floor')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.floor")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li>{{jsxref("Math.trunc()")}}</li>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/fround/index.html b/files/uk/web/javascript/reference/global_objects/math/fround/index.html
new file mode 100644
index 0000000000..1b7994ccb4
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/fround/index.html
@@ -0,0 +1,114 @@
+---
+title: Math.fround()
+slug: Web/JavaScript/Reference/Global_Objects/Math/fround
+tags:
+  - JavaScript
+  - Math
+  - fround
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/fround
+---
+<div>{{JSRef}}</div>
+
+<p class="seoSummary">Функція <strong><code>Math.fround()</code></strong> повертає найближче зображення числового аргументу у вигляді 32-бітного числа з рухомою комою {{interwiki("wikipedia", "Число_одинарної_точності","одинарної точності" )}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-fround.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>singleFloat</em> = Math.fround(<em>doubleFloat</em>);</pre>
+
+<h3 id="Аргументи">Аргументи</h3>
+
+<dl>
+ <dt><code>doubleFloat</code></dt>
+ <dd>{{jsxref("Number")}}. Якщо аргумент має інший тип - його буде приведено до числа, або ж до {{jsxref("NaN")}} у випадку, якщо таке приведення неможливе.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Зображеня аргументу у вигляді найближчого 32-бітного числа з рухомою комою <span class="seoSummary">{{interwiki("wikipedia", "Число_одинарної_точності","одинарної точності" )}}</span>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>JavaScript всередині використовує 64-бітні числа із рухомою комою подвійної точності. Це забезпечує дуже високу точність обчислень. Однак, інколи у вас може виникнути потреба працювати із 32-бітними числами того ж типу. Зокрема, якщо ви читаєте дані із {{jsxref("Float32Array")}}. Це може викликати певну плутанину: перевірка рівності 64-бітного та 32-бітного чисел може дати негативний результат, навіть якщо числа здаються однаковими.</p>
+
+<p>Щоб вирішити цю проблему, можна застосувати <code>Math.fround()</code> для перетворення 64-бітного числа у 32-бітне. JavaScript всередині продовжить вважати числа за 64-бітні, натомість виконуючи "округлення до найближчого парного" на 23-му біті мантиси, і встановлююючи наступний за нею біт в <code>0</code>. Якщо число виходить за межі 32-бітного із рухомою комою, то в результаті буде отримана <code>{{jsxref("Infinity")}}</code> чи <code>-Infinity</code>.</p>
+
+<p>Оскільки <code>fround()</code>є статичним методом <code>Math</code>, він завжди використовується як <code>Math.fround()</code>, а не метод створеного Вами об'єкту <code>Math</code> (<code>Math</code> не є конструктором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_Math.fround()">Застосування <code>Math.fround()</code></h3>
+
+<p>Число 1.5 може бути точно відтворено у двійковій системі числення, причому 32-бітний і 64-бітний результати будуть однакові:</p>
+
+<pre class="brush: js">Math.fround(1.5); // 1.5
+Math.fround(1.5) === 1.5; // true
+</pre>
+
+<p>Однак, число 1.337 не може бути точно зображено у двійковій системі числення, тож  32-бітне і 64-бітне зображення цього числа будуть відрізнятись:</p>
+
+<pre class="brush: js">Math.fround(1.337); // 1.3370000123977661
+Math.fround(1.337) === 1.337; // false
+</pre>
+
+<p><math><semantics><msup><mn>2</mn><mn>150</mn></msup><annotation encoding="TeX">2^150</annotation></semantics></math> - занадто велике для 32-бітного числа із рухомою комою, тому результатом буде <code>Infinity</code>:</p>
+
+<pre class="brush: js">2 ** 150; // 1.42724769270596e+45
+Math.fround(2 ** 150); // Infinity
+</pre>
+
+<p>Якщо аргумент не може бути приведеним до числа, чи просто являється <a href="https://en.wikipedia.org/wiki/NaN" title="NaN on Wikipedia">not-a-number</a> (<code>NaN</code>), <code>Math.fround()</code> поверне <code>NaN</code>:</p>
+
+<pre class="brush: js">Math.fround('abc'); // NaN
+Math.fround(NaN); // NaN
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Даний функціонал можна відтворити за допомогою наступної функції (за умови наявної підтримки {{jsxref("Float32Array")}}):</p>
+
+<pre class="brush: js">Math.fround = Math.fround || (function (array) {
+  return function(x) {
+    return array[0] = x, array[0];
+  };
+})(new Float32Array(1));
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус документу</th>
+   <th scope="col">Примітка</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.fround', 'Math.fround')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Первинне визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.fround', 'Math.fround')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.fround")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.round()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/hypot/index.html b/files/uk/web/javascript/reference/global_objects/math/hypot/index.html
new file mode 100644
index 0000000000..465d368930
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/hypot/index.html
@@ -0,0 +1,119 @@
+---
+title: Math.hypot()
+slug: Web/JavaScript/Reference/Global_Objects/Math/hypot
+tags:
+  - JavaScript
+  - Math
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/hypot
+---
+<div>{{JSRef}}</div>
+
+<p>Функція <strong><code>Math.hypot()</code></strong> повертає квадратний корінь від суми квадратів поданих аргументів</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.hypot</mo><mo stretchy="false">(</mo><msub><mi>v</mi><mn>1</mn></msub><mo>,</mo><msub><mi>v</mi><mn>2</mn></msub><mo>,</mo><mo>…</mo><mo>,</mo><msub><mi>v</mi><mi>n</mi></msub><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msqrt><mrow><munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mi>n</mi></munderover><msubsup><mi>v</mi><mi>i</mi><mn>2</mn></msubsup></mrow></msqrt><mo>=</mo><msqrt><mrow><msubsup><mi>v</mi><mn>1</mn><mn>2</mn></msubsup><mo>+</mo><msubsup><mi>v</mi><mn>2</mn><mn>2</mn></msubsup><mo>+</mo><mo>…</mo><mo>+</mo><msubsup><mi>v</mi><mi>n</mi><mn>2</mn></msubsup></mrow></msqrt></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.hypot}(v_1, v_2, \dots, v_n)} = \sqrt{\sum_{i=1}^n v_i^2} = \sqrt{v_1^2 + v_2^2 + \dots + v_n^2}</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-hypot.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.hypot([<var>value1</var>[, <var>value2</var>[, ...]]])</code></pre>
+
+<h3 id="Аргументи">Аргументи</h3>
+
+<dl>
+ <dt><code>value1, value2, ...</code></dt>
+ <dd>Числа.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Квадратний корінь від суми квадратів поданих аргументів. Якщо хоча б один з аргументів не може бути приведений до числа - результатом буде {{jsxref("NaN")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Обчислення гіпотенузи прямокутного трикутника чи модуля комплексного числа відбувається за формулою <code>Math.sqrt(v1*v1 + v2*v2)</code>, де v1 та v2 - це катети прямокутного трикутника, або ж дійсна та уявна частини комплексного числа.  Для обчислення відстані у двох, чи більше вимірах, варто просто додати більше квадратів під знак кореня, наприклад: <code>Math.sqrt(v1*v1 + v2*v2 + v3*v3 + v4*v4)</code>.  </p>
+
+<p>Ця ж функція дозволяє робити це швидше і простіше, варто просто викликати <code>Math.hypot(v1, v2)</code> чи <code>Math.hypot(v1, v2, v3, v4, ...)</code>.</p>
+
+<p>Вона також дозволяє уникнути проблеми у випадках, коли гіпотенуза ваших чисел дуже велика.  Найбільше число, яке ви можете зобразити за допомогою чисел подвійної точності у JS - це <span style="line-height: 1.5;"><code>Number.MAX_VALUE = 1.797...e+308</code> .  Якщо ваші вхідні числа більші за 1e154, спроба піднести їх до квадрату у результаті дасть Infinity, що повністю зруйнує результат.  Тобто, <code>Math.sqrt(1e200*1e200 + 1e200*1e200) = Infinity</code> .  Якщо ж ви натомість застосуєте <code>hypot()</code>, ви отримаєте цілком нормальний результат <code>Math.hypot(1e200, 1e200) = 1.4142...e+200</code> .  Це також справедливо для дуже малих чисел.  <code>Math.sqrt(1e-200*1e-200 + 1e-200*1e-200) = 0</code>, але </span><code><span style="line-height: 1.5;">Math.hypot(1e-200, 1e-200) =</span></code><span style="line-height: 1.5;"><code>1.4142...e-200</code>, тобто цілком корисний результат</span><span style="line-height: 1.5;">.</span></p>
+
+<p>Оскільки <code>hypot()</code> - це статичний метод об'єкту <code>Math</code>, він завжди використовується як <code>Math.hypot()</code>, а не як метод створеного об'єкту <code>Math</code>  (<code>Math</code> не є конструктором).</p>
+
+<p>У випадку, якщо функція викликається без аргументів, результатом є +0.</p>
+
+<p>А якщо хоча б один з аргументів не може бути зведеним до числа, в результаті отримаємо {{jsxref("NaN")}}.</p>
+
+<p>Якщо дано лише один аргумент, <code>Math.hypot()</code> повертає такий самий результат, як і <code>Math.abs()</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_Math.hypot">Застосування <code>Math.hypot()</code></h3>
+
+<pre class="brush: js">Math.hypot(3, 4);        // 5
+Math.hypot(3, 4, 5);     // 7.0710678118654755
+Math.hypot();            // 0
+Math.hypot(NaN);         // NaN
+Math.hypot(3, 4, 'foo'); // NaN, +'foo' =&gt; NaN
+Math.hypot(3, 4, '5');   // 7.0710678118654755, +'5' =&gt; 5
+Math.hypot(-3);          // 3, the same as Math.abs(-3)
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Цей функціонал можна легко повторити ось такою функцією:</p>
+
+<pre class="brush: js">Math.hypot = Math.hypot || function() {
+  var y = 0, i = arguments.length;
+  while (i--) y += arguments[i] * arguments[i];
+  return Math.sqrt(y);
+};
+</pre>
+
+<p>Більш складний варіант, який дозволяє уникнути описаних вище проблем виходу за межі точності числового формату:</p>
+
+<pre class="brush: js">Math.hypot = function (x, y) {
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=896264#c28
+  var max = 0;
+  var s = 0;
+  for (var i = 0; i &lt; arguments.length; i += 1) {
+    var arg = Math.abs(Number(arguments[i]));
+    if (arg &gt; max) {
+      s *= (max / arg) * (max / arg);
+      max = arg;
+    }
+    s += arg === 0 &amp;&amp; max === 0 ? 0 : (arg / max) * (arg / max);
+  }
+  return max === 1 / 0 ? 1 / 0 : max * Math.sqrt(s);
+};
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.hypot', 'Math.hypot')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.hypot")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+ <li>{{jsxref("Math.sqrt()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/imul/index.html b/files/uk/web/javascript/reference/global_objects/math/imul/index.html
new file mode 100644
index 0000000000..21f5d59a3e
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/imul/index.html
@@ -0,0 +1,97 @@
+---
+title: Math.imul()
+slug: Web/JavaScript/Reference/Global_Objects/Math/imul
+tags:
+  - JavaScript
+  - Math
+  - imul
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/imul
+---
+<div>{{JSRef}}</div>
+
+<p>Функція <strong><code>Math.imul()</code></strong> повертає результат C-подібного 32-бітного множення двох аргументів.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-imul.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>product</em> = Math.imul(<em>a</em>, <em>b</em>);</pre>
+
+<h3 id="Аргументи">Аргументи</h3>
+
+<dl>
+ <dt><code>a</code></dt>
+ <dd>Перше число.</dd>
+ <dt><code>b</code></dt>
+ <dd>Друге число.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Результат C-подібного 32-бітного множення даних аргументів.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p><code>Math.imul()</code> дає можливість виконувати 32-бітне цілочисельне множення з C-подібною семантикою. Ця особливість дуже корисна для проектів на зразок <a href="http://en.wikipedia.org/wiki/Emscripten">Emscripten</a>.</p>
+
+<p>У зв'язку з тим, що <code>imul()</code> - це статичний метод <code>Math</code>, слід завжди викликати його як <code>Math.imul()</code>, аніж як метод створеного вами об'єкту <code>Math</code> (оскільки <code>Math</code> не являється конструктором).</p>
+
+<p>Якщо ви використаєте звичайні числа із рухомою комою в imul, ви отримаєте значну деградацію продуктивності. Причина криється у доволі коштовній з точки зору ресурсів конвертації числа із рухомою комою у ціле для виконання множення, і зворотній конвертації результату. <code>imul()</code> існує у зв'язку із тим, що він швидший у єдиному (поки що) випадку: застосування у AsmJS. AsmJS дозволяє JIST-оптимізаторам простіше реалізовувати цілі числа всередині у JavaScript. Множення двох чисел, що уже зберігаються як цілі (що, поки що, можливо лише з AsmJS) за допомогою imul - це єдина потенційна можливість для Math.imul покращити продуктивність у сучасних браузерах.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_Math.imul()">Застосування <code>Math.imul()</code></h3>
+
+<pre class="brush: js">Math.imul(2, 4);          // 8
+Math.imul(-1, 8);         // -8
+Math.imul(-2, -2);        // 4
+Math.imul(0xffffffff, 5); // -5
+Math.imul(0xfffffffe, 5); // -10
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Цей метод може бути реалізований за допомогою наступної функції:</p>
+
+<pre class="brush: js">Math.imul = Math.imul || function(a, b) {
+  var aHi = (a &gt;&gt;&gt; 16) &amp; 0xffff;
+  var aLo = a &amp; 0xffff;
+  var bHi = (b &gt;&gt;&gt; 16) &amp; 0xffff;
+  var bLo = b &amp; 0xffff;
+  // зсув на 0 фіксує знак старшої частини
+  // |0 наприкінці перетворює беззнакове значення у число із знаком
+  return ((aLo * bLo) + (((aHi * bLo + aLo * bHi) &lt;&lt; 16) &gt;&gt;&gt; 0) | 0);
+};
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус документу</th>
+   <th scope="col">Примітка</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.imul', 'Math.imul')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Первинне визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.imul', 'Math.imul')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.imul")}}</p>
diff --git a/files/uk/web/javascript/reference/global_objects/math/index.html b/files/uk/web/javascript/reference/global_objects/math/index.html
new file mode 100644
index 0000000000..2a3acad478
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/index.html
@@ -0,0 +1,153 @@
+---
+title: Math
+slug: Web/JavaScript/Reference/Global_Objects/Math
+tags:
+  - JavaScript
+  - Math
+  - Довідка
+translation_of: Web/JavaScript/Reference/Global_Objects/Math
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math</code></strong> - це вбудований об'єкт із полями і методами для реалізації математичних сталих та функцій. Не являється функцією.</p>
+
+<p><code>Math</code> працює з числами типу {{jsxref("Number")}}. Він не підходить для роботи з {{jsxref("BigInt")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>На відміну від багатьох інших глобальних об'єктів, <code>Math</code> не являється конструктором. Всі поля і методи <code>Math</code> статичні. Тобто до сталої Пі потрібно звертатись  <code>Math.PI</code>, а функцію синуса викликати через <code>Math.sin(<var>x</var>)</code>, де <code><var>x</var></code> являється аргументом статичного методу. Всі константи задані із максимальною для дійсних чисел у JavaScript точністю.</p>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt>{{jsxref("Math.E")}}</dt>
+ <dd>Стала Ейлера, основа натуральних логарифмів. Приблизно дорівнює <code>2.718</code>.</dd>
+ <dt>{{jsxref("Math.LN2")}}</dt>
+ <dd>Числове значення натурального логарифму від <code>2</code>. Приблизно дорівнює <code>0.693</code>.</dd>
+ <dt>{{jsxref("Math.LN10")}}</dt>
+ <dd>Числове значення натурального логарифму від <code>10</code>. Приблизно дорівнює <code>2.303</code>.</dd>
+ <dt>{{jsxref("Math.LOG2E")}}</dt>
+ <dd>Логарифм від <math><semantics><mi><code>e</code></mi><annotation encoding="TeX"></annotation></semantics></math><code>e</code> за основою 2, приблизно дорівнює <code>1.443</code>.</dd>
+ <dt>{{jsxref("Math.LOG10E")}}</dt>
+ <dd>Логарифм від <code>e</code> за основою 10, приблизно дорівнює <code>0.434</code>.</dd>
+ <dt>{{jsxref("Math.PI")}}</dt>
+ <dd>Значення відношення довжини кола до його діаметру, наближено дорівнює <code>3.14159</code>.</dd>
+ <dt>{{jsxref("Math.SQRT1_2")}}</dt>
+ <dd>Квадратний корінь від ½ (еквівалентно <math><semantics><mfrac><mn>1</mn><msqrt><mn>2</mn></msqrt></mfrac><annotation encoding="TeX">\frac {1}{\sqrt{2}}</annotation></semantics></math>). Наближено дорівнює <code>0.707</code>.</dd>
+ <dt>{{jsxref("Math.SQRT2")}}</dt>
+ <dd>Значення квадратного кореня від <code>2</code>, наближено <code>1.414</code>.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<div class="note">
+<p>Варто зазначити, що тригонометричні функції (<code>sin()</code>, <code>cos()</code>, <code>tan()</code>, <code>asin()</code>, <code>acos()</code>, <code>atan()</code>, <code>atan2()</code>) очікують (і повертають) значення кутів у радіанах.</p>
+
+<p>Для конвертації радіан в градуси, розділіть значення на <code>(Math.PI / 180)</code>. Або помножте на цю величину для виконання зворотної конвертації</p>
+</div>
+
+<div class="note">
+<p>Майте на увазі, що точність багатьох математичних функцій залежить від конкретної реалізації платформи. Тобто одна і та ж функція у різних браузерах може дати дещо різний результат. Навіть більше - один і той самий JS-рушій на різних ОС чи архітектурах також може дати різні результати!</p>
+</div>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/Math/abs", "Math.abs(x)")}}</dt>
+ <dd>Повертає абсолютне значення (модуль) числа.</dd>
+ <dt>{{jsxref("Global_Objects/Math/acos", "Math.acos(x)")}}</dt>
+ <dd>Повертає арккосинус числа.</dd>
+ <dt>{{jsxref("Global_Objects/Math/acosh", "Math.acosh(x)")}}</dt>
+ <dd>Повертає значення гіперболічного арккосинуса числа.</dd>
+ <dt>{{jsxref("Global_Objects/Math/asin", "Math.asin(x)")}}</dt>
+ <dd>Повертає арксинус числа.</dd>
+ <dt>{{jsxref("Global_Objects/Math/asinh", "Math.asinh(x)")}}</dt>
+ <dd>Повертає значення гіперболічного арксинуса числа.</dd>
+ <dt>{{jsxref("Global_Objects/Math/atan", "Math.atan(x)")}}</dt>
+ <dd>Повертає арктангенс числа.</dd>
+ <dt>{{jsxref("Global_Objects/Math/atanh", "Math.atanh(x)")}}</dt>
+ <dd>Повертає значення гіперболічного арктангенса числа.</dd>
+ <dt>{{jsxref("Global_Objects/Math/atan2", "Math.atan2(y, x)")}}</dt>
+ <dd>Повертає значення арктангенсу частки поданих чисел.</dd>
+ <dt>{{jsxref("Global_Objects/Math/cbrt", "Math.cbrt(x)")}}</dt>
+ <dd>Повертає кубічний корінь числа.</dd>
+ <dt>{{jsxref("Global_Objects/Math/ceil", "Math.ceil(x)")}}</dt>
+ <dd>Повертає число, округлене "до більшого".</dd>
+ <dt>{{jsxref("Global_Objects/Math/clz32", "Math.clz32(x)")}}</dt>
+ <dd>Повертає кількість ведучих нулів 32-бітного цілочисельного уявлення даного числа.</dd>
+ <dt>{{jsxref("Global_Objects/Math/cos", "Math.cos(x)")}}</dt>
+ <dd>Повертає косинус числа.</dd>
+ <dt>{{jsxref("Global_Objects/Math/cosh", "Math.cosh(x)")}}</dt>
+ <dd>Повертає значення гіперболічного косинуса числа.</dd>
+ <dt>{{jsxref("Global_Objects/Math/exp", "Math.exp(x)")}}</dt>
+ <dd>Повертає результат обчислення <code>E<var><sup>x</sup></var></code>, де <code><var>x</var></code> - це аргумент функції, а <code>E</code> - стала Ейлера (<code>2.718</code>…, основа натурального логарифму).</dd>
+ <dt>{{jsxref("Global_Objects/Math/expm1", "Math.expm1(x)")}}</dt>
+ <dd>Повертає різницю <code>exp(x)</code> і 1 (тобто значення виразу <math><semantics><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>-</mo><mn>1</mn></mrow><annotation encoding="TeX">e^x - 1</annotation></semantics></math>).</dd>
+ <dt>{{jsxref("Global_Objects/Math/floor", "Math.floor(x)")}}</dt>
+ <dd>Повертає результат округлення "до меншого".</dd>
+ <dt>{{jsxref("Global_Objects/Math/fround", "Math.fround(x)")}}</dt>
+ <dd>Повертає найближче число із рухомою комою (крапкою)<a href="https://uk.wikipedia.org/wiki/%D0%A7%D0%B8%D1%81%D0%BB%D0%BE_%D0%BE%D0%B4%D0%B8%D0%BD%D0%B0%D1%80%D0%BD%D0%BE%D1%97_%D1%82%D0%BE%D1%87%D0%BD%D0%BE%D1%81%D1%82%D1%96" title="link to the wikipedia page on single precision"> одинарної точності</a> від аргументу.</dd>
+ <dt>{{jsxref("Global_Objects/Math/hypot", "Math.hypot([x[, y[, …]]])")}}</dt>
+ <dd>Повертає квадратний корінь від суми квадратів аргументів.</dd>
+ <dt>{{jsxref("Global_Objects/Math/imul", "Math.imul(x, y)")}}</dt>
+ <dd>Повертає результат 32-бітного цілочисельного множення аргументів.</dd>
+ <dt>{{jsxref("Global_Objects/Math/log", "Math.log(x)")}}</dt>
+ <dd>Повертає натуральний логарифм (㏒<sub>e</sub>, або ln) числа.</dd>
+ <dt>{{jsxref("Global_Objects/Math/log1p", "Math.log1p(x)")}}</dt>
+ <dd>Повертає натуральний логарифм (㏒<sub>e</sub>, або ln) виразу <code>1 + x</code> від числа<math><semantics><mi></mi><annotation encoding="TeX">x</annotation></semantics></math>.</dd>
+ <dt>{{jsxref("Global_Objects/Math/log10", "Math.log10(x)")}}</dt>
+ <dd>Повертає логарифм за основою 10 від аргументу.</dd>
+ <dt>{{jsxref("Global_Objects/Math/log2", "Math.log2(x)")}}</dt>
+ <dd>Повертає логарифм за основою 2 від аргументу.</dd>
+ <dt>{{jsxref("Global_Objects/Math/max", "Math.max([x[, y[, …]]])")}}</dt>
+ <dd>Повертає найбільше із нуля чи більше аргументів.</dd>
+ <dt>{{jsxref("Global_Objects/Math/min", "Math.min([x[, y[, …]]])")}}</dt>
+ <dd>Повертає найменше із нуля чи більше аргументів.</dd>
+ <dt>{{jsxref("Global_Objects/Math/pow", "Math.pow(x, y)")}}</dt>
+ <dd>Повертає результат піднесення до степеня <code>x<sup>y</sup></code>.</dd>
+ <dt>{{jsxref("Global_Objects/Math/random", "Math.random()")}}</dt>
+ <dd>Повертає псевдовипадкове число від <code>0</code> до <code>1</code>.</dd>
+ <dt>{{jsxref("Global_Objects/Math/round", "Math.round(x)")}}</dt>
+ <dd>Повертає значення аргументу, округлене до найближчого цілого.</dd>
+ <dt>{{jsxref("Global_Objects/Math/sign", "Math.sign(x)")}}</dt>
+ <dd>Повертає знак поданого числа. Визначає, чи являється аргумент додатним числом, від'ємним, чи дорівнює 0.</dd>
+ <dt>{{jsxref("Global_Objects/Math/sin", "Math.sin(x)")}}</dt>
+ <dd>Повертає значення синуса аргументу.</dd>
+ <dt>{{jsxref("Global_Objects/Math/sinh", "Math.sinh(x)")}}</dt>
+ <dd>Повертає значення гіперболічного синуса аргументу.</dd>
+ <dt>{{jsxref("Global_Objects/Math/sqrt", "Math.sqrt(x)")}}</dt>
+ <dd>Повертає додатне значення квадратного кореня від аргументу.</dd>
+ <dt>{{jsxref("Global_Objects/Math/tan", "Math.tan(x)")}}</dt>
+ <dd>Повертає значення тангенса аргументу.</dd>
+ <dt>{{jsxref("Global_Objects/Math/tanh", "Math.tanh(x)")}}</dt>
+ <dd>Повертає значення гіперболічного тангенса аргументу.</dd>
+ <dt><code>Math.toSource()</code> {{non-standard_inline}}</dt>
+ <dd>Повертає строку <code>"Math"</code>.</dd>
+ <dt>{{jsxref("Global_Objects/Math/trunc", "Math.trunc(x)")}}</dt>
+ <dd>Повертає цілу частину <code><var>x</var></code>, відкидаючи всю дробову частину.</dd>
+</dl>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math-object', 'Math')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<div>{{Compat("javascript.builtins.Math")}}</div>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/ln10/index.html b/files/uk/web/javascript/reference/global_objects/math/ln10/index.html
new file mode 100644
index 0000000000..82c50b1911
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/ln10/index.html
@@ -0,0 +1,66 @@
+---
+title: Math.LN10
+slug: Web/JavaScript/Reference/Global_Objects/Math/LN10
+tags:
+  - JavaScript
+  - Math
+  - Властивість
+  - Довідка
+  - Поле
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN10
+---
+<div>{{JSRef}}</div>
+
+<p>Поле <strong><code>Math.LN10</code></strong> відображає значення натурального логарифму 10, що наближено дорівнює 2.302:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LN10</mi></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>10</mn><mo stretchy="false">)</mo><mo>≈</mo><mn>2.302</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LN10}} = \ln(10) \approx 2.302</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-ln10.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Опис">Опис</h2>
+
+<p>У зв'язку із тим, що <code>LN10</code> - це статичне поле <code>Math</code>, слід завжди використовувати його через <code>Math.LN10</code>, замість викликання його як поля створених вами об'єктів <code>Math</code> (<code>Math</code> не являється конструктором).</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Використання_Math.LN10">Використання <code>Math.LN10</code></h3>
+
+<p>Наступна функція повертає натуральний логарифм 10:</p>
+
+<pre class="brush:js">function getNatLog10() {
+  return Math.LN10;
+}
+
+getNatLog10(); // 2.302585092994046
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.ln10', 'Math.LN10')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.LN10")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/ln2/index.html b/files/uk/web/javascript/reference/global_objects/math/ln2/index.html
new file mode 100644
index 0000000000..99e5c1f0a3
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/ln2/index.html
@@ -0,0 +1,70 @@
+---
+title: Math.LN2
+slug: Web/JavaScript/Reference/Global_Objects/Math/LN2
+tags:
+  - JavaScript
+  - Math
+  - Властивість
+  - Довідка
+  - Поле
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN2
+---
+<div>{{JSRef}}</div>
+
+<p>Поле <strong><code>Math.LN2</code></strong> відображає значення натурального логарифму 2, що наближено дорівнює 0.693:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LN2</mi></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>2</mn><mo stretchy="false">)</mo><mo>≈</mo><mn>0.693</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LN2}} = \ln(2) \approx 0.693</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-ln2.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+
+
+<h2 id="Опис">Опис</h2>
+
+<p>У зв'язку із тим, що <code>LN2</code> - це статичне поле <code>Math</code>, слід завжди використовувати його через <code>Math.LN2</code>, замість викликання його як поля створених вами об'єктів <code>Math</code> (<code>Math</code> не являється конструктором).</p>
+
+
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_Math.LN2">Використання <code>Math.LN2</code></h3>
+
+<p>Наступна функція повертає натуральний логарифм від 2:</p>
+
+<pre class="brush:js">function getNatLog2() {
+  return Math.LN2;
+}
+
+getNatLog2(); // 0.6931471805599453
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.ln2', 'Math.LN2')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.LN2")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/log/index.html b/files/uk/web/javascript/reference/global_objects/math/log/index.html
new file mode 100644
index 0000000000..df7d650070
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/log/index.html
@@ -0,0 +1,113 @@
+---
+title: Math.log()
+slug: Web/JavaScript/Reference/Global_Objects/Math/log
+tags:
+  - JavaScript
+  - Math
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/log
+---
+<div>{{JSRef}}</div>
+
+<p>Функція <strong><code>Math.log()</code></strong> повертає натуральний логарифм (тобто за основою {{jsxref("Math.E", "e")}}) від числа, що являється:</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>&gt;</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>такий унікальний</mtext><mspace width="thickmathspace"></mspace><mi>y,</mi><mspace width="thickmathspace"></mspace><mtext>для якого</mtext><mspace width="thickmathspace"></mspace><msup><mi>e</mi><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x &gt; 0, \mathtt{\operatorname{Math.log}(x)} = \ln(x) = \text{the unique} \; y \; \text{such that} \; e^y = x</annotation></semantics></math></p>
+
+<p>Функція JavaScript <strong><code>Math.log()</code> </strong>еквівелентна <em>ln(x)</em> у математиці.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-log.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.log(<var>x</var>)</code></pre>
+
+<h3 id="Аргументи">Аргументи</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Натуральний логарифм (за основою {{jsxref("Math.E", "e")}}) даного числа. Якщо число від'ємне - функція повертає {{jsxref("NaN")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо значення аргументу <code>x</code> від'ємне - функція завжди повертає {{jsxref("NaN")}}.</p>
+
+<p>У зв'язку з тим, що <code>log()</code> - це статичний метод <code>Math</code>, слід завжди викликати його як <code>Math.log()</code>, аніж як метод створеного вами об'єкту <code>Math</code> (оскільки <code>Math</code> не являється конструктором).</p>
+
+<p>Якщо вам потрібно отримати значення натурального логарифму від 2 чи 10, застосуйте вбудовані сталі {{jsxref("Math.LN2")}} чи {{jsxref("Math.LN10")}} .  Якщо вам потрібно отримати значення логарифму за основою 2 чи 10 - використайте {{jsxref("Math.log2()")}} або {{jsxref("Math.log10()")}} .  Якщо вам потрібен логарифм за іншою основою, використайте Math.log(x) / Math.log(іншаОснова), як у прикладі нижче; можливо вам також знадобиться попередньо обчислити 1 / Math.log(іншаОснова).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_Math.log()">Застосування <code>Math.log()</code></h3>
+
+<pre class="brush: js">Math.log(-1); // NaN, out of range
+Math.log(0);  // -Infinity
+Math.log(1);  // 0
+Math.log(10); // 2.302585092994046
+</pre>
+
+<h3 id="Застосування_Math.log()_з_іншою_основою">Застосування <code>Math.log()</code> з іншою основою</h3>
+
+<p>Наступна функція повертає логарифм від <code>y</code> за основою <code>x</code> (тобто, <math><semantics><mrow><msub><mo>log</mo><mi>x</mi></msub><mi>y</mi></mrow><annotation encoding="TeX">\log_x y</annotation></semantics></math>):</p>
+
+<pre class="brush: js">function getBaseLog(x, y) {
+  return Math.log(y) / Math.log(x);
+}
+</pre>
+
+<p>Щоправда, якщо ви виконаєте <code>getBaseLog(10, 1000)</code>, вона поверне <code>2.9999999999999996</code> у зв'язку із округленням чисел із рухомою комою. Звісно, це з дуже великою точністю близько до дійсного результату в 3.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Примітка</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Первинне визначення. Реалізовано у JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.10', 'Math.log')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.log', 'Math.log')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.log', 'Math.log')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.log")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/log10/index.html b/files/uk/web/javascript/reference/global_objects/math/log10/index.html
new file mode 100644
index 0000000000..5a55bfb3f4
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/log10/index.html
@@ -0,0 +1,92 @@
+---
+title: Math.log10()
+slug: Web/JavaScript/Reference/Global_Objects/Math/log10
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/log10
+---
+<div>{{JSRef}}</div>
+
+<p>Функція <strong><code>Math.log10()</code></strong> повертає логарифм за основою 10 від поданого числа, що являється</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>&gt;</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log10</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>10</mn></msub><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>таким унікальним</mtext><mspace width="thickmathspace"></mspace><mi>y, для якого</mi><mspace width="thickmathspace"></mspace><mspace width="thickmathspace"></mspace><msup><mn>10</mn><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x &gt; 0, \mathtt{\operatorname{Math.log10}(x)} = \log_10(x) = \text{the unique} \; y \; \text{such that} \; 10^y = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-log10.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Math.log10(<var>x</var>)</pre>
+
+<h3 id="Аргументи">Аргументи</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Логарифм за основою 10 від даного числа. Якщо аргумент від'ємний, то функція повертає {{jsxref("NaN")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо значення <code>x</code> менше 0, результатом являється {{jsxref("NaN")}}.</p>
+
+<p>У зв'язку з тим, що <code>log10()</code> - це статичний метод <code>Math</code>, слід завжди викликати його як <code>Math.log10()</code>, аніж як метод створеного вами об'єкту <code>Math</code> (оскільки <code>Math</code> не являється конструктором).</p>
+
+<p>Ця функція еквівалентна Math.log(x) / Math.log(10).  Для отримання log10(e) слід використовувати вбудовану сталу {{jsxref("Math.LOG10E")}}, яка уже дорівнює 1 / {{jsxref("Math.LN10")}}.  </p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_Math.log10">Застосування <code>Math.log10()</code></h3>
+
+<pre class="brush: js">Math.log10(2);      // 0.3010299956639812
+Math.log10(1);      // 0
+Math.log10(0);      // -Infinity
+Math.log10(-2);     // NaN
+Math.log10(100000); // 5
+</pre>
+
+<h3 id="Поліфіл">Поліфіл</h3>
+
+<p>Метод може бути реалізований за допомогою такої функції:</p>
+
+<pre class="brush: js">Math.log10 = Math.log10 || function(x) {
+  return Math.log(x) * Math.LOG10E;
+};
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.log10', 'Math.log10')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.log10")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/log10e/index.html b/files/uk/web/javascript/reference/global_objects/math/log10e/index.html
new file mode 100644
index 0000000000..a04db0bd60
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/log10e/index.html
@@ -0,0 +1,66 @@
+---
+title: Math.LOG10E
+slug: Web/JavaScript/Reference/Global_Objects/Math/LOG10E
+tags:
+  - JavaScript
+  - Math
+  - Властивість
+  - Довідка
+  - Поле
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG10E
+---
+<div>{{JSRef}}</div>
+
+<p>Поле <strong><code>Math.LOG10E</code></strong> відображає значення логарифму <math><semantics><mi>e</mi><annotation encoding="TeX">e</annotation></semantics></math> за основою 10, що приблизно дорівнює 0.434:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LOG10E</mi></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>10</mn></msub><mo stretchy="false">(</mo><mi>e</mi><mo stretchy="false">)</mo><mo>≈</mo><mn>0.434</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LOG10E}} = \log_10(e) \approx 0.434</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-log10e.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь-ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Опис">Опис</h2>
+
+<p>У зв'язку із тим, що <code>LOG10E</code> - це статичне поле <code>Math</code>, слід завжди звертатись до нього у формі <code>Math.LOG10E</code>. Намагатись викликати <code>LOG10E</code>, звертаючись до полів  створених вами об'єктів <code>Math</code> - некоректно (<code>Math</code> не являється конструктором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_Math.LOG10E">Використання <code>Math.LOG10E</code></h3>
+
+<p>Наступна функція повертає логарифм <math><semantics><mi>e</mi><annotation encoding="TeX">e</annotation></semantics></math> за основою 10:</p>
+
+<pre class="brush:js">function getLog10e() {
+  return Math.LOG10E;
+}
+
+getLog10e(); // 0.4342944819032518
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.log10e', 'Math.LOG10E')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.LOG10E")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/log1p/index.html b/files/uk/web/javascript/reference/global_objects/math/log1p/index.html
new file mode 100644
index 0000000000..99edc4fbf5
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/log1p/index.html
@@ -0,0 +1,94 @@
+---
+title: Math.log1p()
+slug: Web/JavaScript/Reference/Global_Objects/Math/log1p
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/log1p
+---
+<div>{{JSRef}}</div>
+
+<p>Функція <strong><code>Math.log1p()</code></strong> повертає натуральний логарифм (за основою {{jsxref("Math.E", "e")}}) від результату виразу <strong><code>1 + дане число</code></strong>. Тобто</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>&gt;</mo><mo>-</mo><mn>1</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log1p</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>1</mn><mo>+</mo><mi>x</mi><mo stretchy="false">)</mo></mrow><annotation encoding="TeX">\forall x &gt; -1, \mathtt{\operatorname{Math.log1p}(x)} = \ln(1 + x)</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-log1p.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.log1p(<var>x</var>)</code></pre>
+
+<h3 id="Аргументи">Аргументи</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Натуральний логарифм (за основою {{jsxref("Math.E", "e")}}) від <code>1+x</code>. Якщо значення аргументу менше за <strong>-1</strong>, функція повертає {{jsxref("NaN")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Для дуже малих значень <em>x</em>, додавання 1 може повністю або частково зменшити точність .  Числа із рухомою комою подвійної точності, що застосовуються у JS, дають вам приблизно 15 знаків точності.  1 + 1e-15 = 1.000000000000001, але 1 + 1e-16 = 1.000000000000000, тобто 1.0. Просто тому, що 15 останніх знаків при такому округленні зникають.  </p>
+
+<p>Коли ви обчислюєте log(1 + x), ви отримаєте результат, дуже близький до x у випадках, коли x являється малою величиною (саме тому це називається 'натуральним' логарифмом). Якщо ви обчислите Math.log(1 + 1.1111111111e-15) - ви, ймовірно, отримаєте щось близьке до 1.1111111111e-15.  Якщо ж, натомість, ви візьмете логарифм від<span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">1.00000000000000111022 (так, двійкове округлення інколи виглядає не надто гарно)</span><span style="line-height: 1.5;">, ви отримаєте в якості відповіді</span><span style="line-height: 1.5;"> 1.11022...e-15, із лише трьома значущими цифрами. Зате за допомогою Math.log1p(</span>1.1111111111e-15<span style="line-height: 1.5;">) ви отримаєте значно точніший результат - 1.1111111110999995e-15 - із 15 значущими цифрами (власне навіть 16 для цього випадку).</span></p>
+
+<p>Якщо значення <code>x</code> менше, ніж -1, результатом зажди буде {{jsxref("NaN")}}.</p>
+
+<p>У зв'язку з тим, що <code>log1p()</code> - це статичний метод <code>Math</code>, слід завжди викликати його як <code>Math.log1p()</code>, аніж як метод створеного вами об'єкту <code>Math</code> (оскільки <code>Math</code> не являється конструктором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_Math.log1p">Застосування <code>Math.log1p()</code></h3>
+
+<pre class="brush: js">Math.log1p(1);  // 0.6931471805599453
+Math.log1p(0);  // 0
+Math.log1p(-1); // -Infinity
+Math.log1p(-2); // NaN
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Метод може бути відтворений за допомогою наступної функції:</p>
+
+<pre class="brush: js">Math.log1p = Math.log1p || function(x) {
+  return Math.log(1 + x);
+};
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.log1p', 'Math.log1p')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.log1p")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.expm1()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/log2/index.html b/files/uk/web/javascript/reference/global_objects/math/log2/index.html
new file mode 100644
index 0000000000..43e87c72f8
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/log2/index.html
@@ -0,0 +1,102 @@
+---
+title: Math.log2()
+slug: Web/JavaScript/Reference/Global_Objects/Math/log2
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/log2
+---
+<div>{{JSRef}}</div>
+
+<p>Функція <strong><code>Math.log2()</code></strong> повертає логарифм за основою 2 від числа.  Інакше кажучи,</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>&gt;</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log2</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>2</mn></msub><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>такий унікальній</mtext><mspace width="thickmathspace"></mspace><mi>y,</mi><mspace width="thickmathspace"></mspace><mtext>для якого</mtext><mspace width="thickmathspace"></mspace><msup><mn>2</mn><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x &gt; 0, \mathtt{\operatorname{Math.log2}(x)} = \log_2(x) = \text{the unique} \; y \; \text{such that} \; 2^y = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-log2.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.log2(<var>x</var>)</code></pre>
+
+<h3 id="Аргументи">Аргументи</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Логарифм за основою 2 від даного числа. Якщо значення аргументу від'ємне, функція повертає {{jsxref("NaN")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо значення аргументу <code>x</code> менше від 0, результат завжди дорівнює {{jsxref("NaN")}}.</p>
+
+<p>У зв'язку з тим, що <code>log2()</code> - це статичний метод <code>Math</code>, слід завжди викликати його як <code>Math.log2()</code>, аніж як метод створеного вами об'єкту <code>Math</code> (оскільки <code>Math</code> не являється конструктором).</p>
+
+<p>Ця фукнція є еквівалентною комбінації методів Math.log(x) / Math.log(2).  Для log2(e) використовуйте вбудовану сталу {{jsxref("Math.LOG2E")}}, яка дорівнює 1 / {{jsxref("Math.LN2")}}.  </p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_Math.log2()">Застосування <code>Math.log2()</code></h3>
+
+<pre class="brush: js">Math.log2(3);    // 1.584962500721156
+Math.log2(2);    // 1
+Math.log2(1);    // 0
+Math.log2(0);    // -Infinity
+Math.log2(-2);   // NaN
+Math.log2(1024); // 10
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Даний поліфіл емулює функцію <code>Math.log2</code>. Зауважте, що він повертає неточні значення для деяких аргументів (наприклад, 1 &lt;&lt; 29), тому обгорніть його у {{jsxref("Math.round()")}}, якщо працюєте із бітовими масками.</p>
+
+<pre class="brush: js">Math.log2 = Math.log2 || function(x) {
+  return Math.log(x) * Math.LOG2E;
+};
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус документу</th>
+   <th scope="col">Примітка</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-math.log2', 'Math.log2')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Первинне визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.log2', 'Math.log2')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.log2")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/log2e/index.html b/files/uk/web/javascript/reference/global_objects/math/log2e/index.html
new file mode 100644
index 0000000000..fab39f96f0
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/log2e/index.html
@@ -0,0 +1,66 @@
+---
+title: Math.LOG2E
+slug: Web/JavaScript/Reference/Global_Objects/Math/LOG2E
+tags:
+  - JavaScript
+  - Math
+  - Властивість
+  - Довідка
+  - Поле
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG2E
+---
+<div>{{JSRef}}</div>
+
+<p>Поле <strong><code>Math.LOG2E</code></strong> відображає логарифм <math><semantics><mi>e</mi><annotation encoding="TeX">e </annotation></semantics></math> за основою 2, що приблизно дорівнює 1.442:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LOG2E</mi></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>2</mn></msub><mo stretchy="false">(</mo><mi>e</mi><mo stretchy="false">)</mo><mo>≈</mo><mn>1.442</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LOG2E}} = \log_2(e) \approx 1.442</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-log2e.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь-ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Опис">Опис</h2>
+
+<p>У зв'язку із тим, що <code>LOG2E</code> - це статичне поле <code>Math</code>, слід завжди звертатись до нього у формі <code>Math.LOG2E</code>. Намагатись викликати <code>LOG2E</code>, звертаючись до полів  створених вами об'єктів <code>Math</code> - некоректно (<code>Math</code> не являється конструктором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_Math.LOG2E">Застосування <code>Math.LOG2E</code></h3>
+
+<p>Наступна функція повертає логарифм <math><semantics><mi>e</mi><annotation encoding="TeX">e</annotation></semantics></math> за основою 2:</p>
+
+<pre class="brush: js">function getLog2e() {
+  return Math.LOG2E;
+}
+
+getLog2e(); // 1.4426950408889634
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.log2e', 'Math.LOG2E')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.LOG2E")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/max/index.html b/files/uk/web/javascript/reference/global_objects/math/max/index.html
new file mode 100644
index 0000000000..d76643fb1e
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/max/index.html
@@ -0,0 +1,102 @@
+---
+title: Math.max()
+slug: Web/JavaScript/Reference/Global_Objects/Math/max
+tags:
+  - JavaScript
+  - Math
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/max
+---
+<div>{{JSRef}}</div>
+
+<p>Фукнція <strong><code>Math.max()</code></strong> повертає найбільше значення із довільної кількості (0 та більше) аргументів.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-max.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.max([<var>value1</var>[, <var>value2</var>[, ...]]])</code></pre>
+
+<h3 id="Аргументи">Аргументи</h3>
+
+<dl>
+ <dt><code>value1, value2, ...</code></dt>
+ <dd>Числа.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Найбільше із даних чисел. Якщо хоча б один із аргументів неможливо привести до числового типу - буде повернуто {{jsxref("NaN")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>У зв'язку з тим, що <code>max()</code> - це статичний метод <code>Math</code>, слід завжди викликати його як <code>Math.max()</code>, аніж як метод створеного вами об'єкту <code>Math</code> (оскільки <code>Math</code> не являється конструктором).</p>
+
+<p>Якщо не дано жодного аргумента, результатом буде -{{jsxref("Infinity")}}.</p>
+
+<p>Якщо щонайменше один із аргументів не можна привести до числового типу, то результатом буде {{jsxref("NaN")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_Math.max">Застосування <code>Math.max()</code></h3>
+
+<pre class="brush: js">Math.max(10, 20);   //  20
+Math.max(-10, -20); // -10
+Math.max(-10, 20);  //  20
+</pre>
+
+<h4 id="Отримання_найбільшого_з_елементів_масиву">Отримання найбільшого з елементів масиву</h4>
+
+<p>{{jsxref("Array.prototype.reduce", "Array.reduce()")}} може застосовуватись для пошуку найбільшого елементу в числовому масиві шляхом порівняння кожного значення:</p>
+
+<pre class="brush: js">var arr = [1,2,3];
+var max = arr.reduce(function(a, b) {
+    return Math.max(a, b);
+});
+</pre>
+
+<p>Наступна функція використовує {{jsxref("Function.prototype.apply()")}} для отримання найбільшого серед масиву чисел. <code>getMaxOfArray([1, 2, 3])</code> еквівалентна до <code>Math.max(1, 2, 3)</code>, проте ви можете застосовувати <code>getMaxOfArray()</code> для масивів, сформованих у процесі виконання програми. Цей спосіб слід застосовувати лише для масивів з відносно невеликою кількістю елементів.</p>
+
+<pre class="brush: js">function getMaxOfArray(numArray) {
+  return Math.max.apply(null, numArray);
+}</pre>
+
+
+
+<p>Новий <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">оператор поширення (spread operator)</a> - це більш компактний спосіб записати рішення на базі <code>apply</code> для отримання максимуму із масиву чисел:</p>
+
+<pre class="brush: js">var arr = [1, 2, 3];
+var max = Math.max(...arr);
+</pre>
+
+<p>Однак, як оператор поширення (<code>...</code>), так і <code>apply</code> призведуть до помилки або повернуть невірний результат, якщо вхідний масив має забагато елементів, бо вони намагаються передати елементи масиву в якості параметрів функції. Дивіться <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply#Using_apply_and_built-in_functions">Використання методу <code>apply</code> і вбудованих фукнцій</a> для більш докладної інформації. Рішення на базі <code>reduce</code> не має такої проблеми.</p>
+
+
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.max', 'Math.max')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.max")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.min()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/min/index.html b/files/uk/web/javascript/reference/global_objects/math/min/index.html
new file mode 100644
index 0000000000..f5e5993976
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/min/index.html
@@ -0,0 +1,98 @@
+---
+title: Math.min()
+slug: Web/JavaScript/Reference/Global_Objects/Math/min
+tags:
+  - JavaScript
+  - Math
+  - min
+  - Довідка
+  - Мінімум
+  - Найменше
+  - Найменше значення
+  - Найменше число
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/min
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Статична функція <code><strong>Math.min()</strong></code> повертає найменше з чисел, поданих на вхід, або ж {{jsxref("NaN")}}, якщо жоден із аргументів не є числом та не може бути перетворений у нього.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-min.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.min([<var>value1</var>[, <var>value2</var>[, ...]]])</code></pre>
+
+<h3 id="Аргументі">Аргументі</h3>
+
+<dl>
+ <dt><code>value1, value2, ...</code></dt>
+ <dd>Нуль, чи більше чисел, з-поміж яких буде вибрано найменше значення.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Найменше з поданих чисел. Якщо хоча б один із аргументів не можна перетворити на число, результатом буде {{jsxref("NaN")}}. Якщо функція викликана без аргументів, вона поверне {{jsxref("Infinity")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>У зв'язку з тим, що <code>min()</code> - це статичний метод <code>Math</code>, слід завжди викликати його як <code>Math.min()</code>, аніж як метод створеного вами об'єкту <code>Math</code> (оскільки <code>Math</code> не являється конструктором).</p>
+
+<p>Якщо не дано жодного аргументу, результатом буде {{jsxref("Infinity")}}.</p>
+
+<p>Якщо хоча б один із аргументів не може бути приведеним до числа, результатом буде {{jsxref("NaN")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_Math.min">Застосування <code>Math.min()</code></h3>
+
+<p>Знайти мінімальне значення з-поміж <code>x</code> та <code>y</code>, і присвоїти його <code>z</code>:</p>
+
+<pre class="brush: js">var x = 10, y = -20;
+var z = Math.min(x, y);
+</pre>
+
+<h3 id="Вибірка_значень_із_Math.min">Вибірка значень із <code>Math.min()</code></h3>
+
+<p><code>Math.min()</code> часто використовується для того, щоб вибрати значення, що менше або дорівнює якійсь межі. Зокрема, це</p>
+
+<pre class="brush: js">var x = f(foo);
+
+if (x &gt; boundary) {
+  x = boundary;
+}
+</pre>
+
+<p>можна переписати ось так:</p>
+
+<pre class="brush: js">var x = Math.min(f(foo), boundary);
+</pre>
+
+<p>{{jsxref("Math.max()")}} може використовуватись подібним чином для вибірки значень із протилежного боку.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.min', 'Math.min')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.min")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.max()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/pi/index.html b/files/uk/web/javascript/reference/global_objects/math/pi/index.html
new file mode 100644
index 0000000000..de82df2302
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/pi/index.html
@@ -0,0 +1,64 @@
+---
+title: Math.PI
+slug: Web/JavaScript/Reference/Global_Objects/Math/PI
+tags:
+  - JavaScript
+  - Math
+  - Властивість
+  - Довідка
+  - Поле
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/PI
+---
+<div>{{JSRef}}</div>
+
+<p>Поле <strong><code>Math.PI</code></strong> відображає значення відношення довжини кола до його діаметру, що приблизно дорівнює 3.14159:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.PI</mi></mstyle><mo>=</mo><mi>π</mi><mo>≈</mo><mn>3.14159</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.PI}} = \pi \approx 3.14159</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-pi.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь-ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Опис">Опис</h2>
+
+<p>У зв'язку із тим, що <code>PI</code> - це статичне поле <code>Math</code>, слід завжди звертатись до нього у формі <code>Math.PI</code>. Намагатись викликати <code>PI</code>, звертаючись до полів  створених вами об'єктів <code>Math</code> - некоректно (<code>Math</code> не являється конструктором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_Math.PI">Застосування <code>Math.PI</code></h3>
+
+<p>Наступна функція використовує <code>Math.PI</code> для обчислення довжини кола за заданим діаметром:</p>
+
+<pre class="brush: js">function calculateCircumference(radius) {
+  return Math.PI * (radius + radius);
+}
+
+calculateCircumference(1);  // 6.283185307179586
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.pi', 'Math.PI')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.PI")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/pow/index.html b/files/uk/web/javascript/reference/global_objects/math/pow/index.html
new file mode 100644
index 0000000000..951aeccb66
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/pow/index.html
@@ -0,0 +1,117 @@
+---
+title: Math.pow()
+slug: Web/JavaScript/Reference/Global_Objects/Math/pow
+tags:
+  - JavaScript
+  - Math
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/pow
+---
+<div>{{JSRef}}</div>
+
+<p>Функція <strong><code>Math.pow()</code></strong> повертає результат піднесення основи до показника степеня, тобто, <code>основа<sup>степінь</sup></code>.</p>
+
+<p> </p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-pow.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<p> </p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.pow(<var>base</var>, <var>exponent</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>base</code></dt>
+ <dd>Основа степеня.</dd>
+ <dt><code>exponent</code></dt>
+ <dd>Показник степеня, до якого буде піднесено основу.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Число, що відображає значення основи, піднесеної до показника степеня.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Тому що <code>pow()</code> є статичним методом <code>Math</code>, він завжди використовується як <code>Math.pow()</code>, аніж як метод створеного об'єкту <code>Math</code> (<code>Math</code> не має конструктора).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_Math.pow()">Використання <code>Math.pow()</code></h3>
+
+<pre class="brush: js">// просте
+Math.pow(7, 2);    // 49
+Math.pow(7, 3);    // 343
+Math.pow(2, 10);   // 1024
+// дроби як показники степеня
+Math.pow(4, 0.5);  // 2 (корінь квадратний від 4)
+Math.pow(8, 1/3);  // 2 (корінь кубічний від 8)
+Math.pow(2, 0.5);  // 1.4142135623730951 (корінь квадратний від 2)
+Math.pow(2, 1/3);  // 1.2599210498948732 (корінь кубічний від 2)
+// показники степеня зі знаками
+Math.pow(7, -2);   // 0.02040816326530612 (1/49)
+Math.pow(8, -1/3); // 0.5
+// основи зі знаками
+Math.pow(-7, 2);   // 49 (квадрати завжди позитивні)
+Math.pow(-7, 3);   // -343 (куби можуть бути негативними)
+Math.pow(-7, 0.5); // NaN (негативні числа не мають дійсного квадратного кореня)
+// через те, що "парні" та "непарні" корені є близькими один до одного,
+// та через обмеження точності представлення чисел з рухомою комою
+// негативні основи з дробовими показниками степіня завжди повертають NaN
+
+Math.pow(-7, 1/3); // NaN
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення, впроваджене у JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.13', 'Math.pow')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.pow', 'Math.pow')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.pow', 'Math.pow')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.pow")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.cbrt()")}}</li>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.sqrt()")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation" title="Arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value. The standard arithmetic operators are addition (+), subtraction (-), multiplication (*), and division (/).">Exponentiation operator</a> {{experimental_inline}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/random/index.html b/files/uk/web/javascript/reference/global_objects/math/random/index.html
new file mode 100644
index 0000000000..14ee5ccbd5
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/random/index.html
@@ -0,0 +1,113 @@
+---
+title: Math.random()
+slug: Web/JavaScript/Reference/Global_Objects/Math/random
+tags:
+  - JavaScript
+  - Math
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/random
+---
+<div>{{JSRef}}</div>
+
+<p>Функція <strong><code>Math.random()</code></strong> повертає псевдо-випадкове число із рухомою комою з проміжку 0–1 (включно із 0, але не включаючи 1) із приблизно рівномірним розподілом значень на ньому (в подальшому його можна масштабувати до потрібних розмірів). Вихідне зерно-параметр для алгоритму генерації випадкового числа обирається реалізацією; воно не може бути обраним чи перевизначеним користувачем.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-random.html")}}</div>
+
+<div class="note">
+<p><code>Math.random()</code> <em>не надає</em> криптографічно стійких випадкових чисел. Не слід застосовувати їх будь-де у місцях, пов'язаних із інформаційною безпекою. Натомість використовуйте Web Crypto API, а точніше - метод {{domxref("RandomSource.getRandomValues()", "window.crypto.getRandomValues()")}}.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Math.random()</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Псевдовипадкове число із рухомою комою між <code>0</code> (включно) та 1 (виключно).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Зауважте, що числа у JavaScript являються стандартизованими згідно IEEE 754 числами із рухомою комою із поведінкою "округлення до найближчого парного". Тому проміжки, що охоплюються наступними фукнціями (за винятком власне <code>Math.random()</code>) не зовсім точні. За умови дуже великих обраних меж (2<sup>53</sup> чи більших) можливо <em>у дуже рідкісних</em> випадках отримати значення верхньої межі, яке зазвичай виключається.</p>
+
+<h3 id="Отримання_випадкового_числа_з-поміж_0_(включно)_та_1_(виключно)">Отримання випадкового числа з-поміж 0 (включно) та 1 (виключно)</h3>
+
+<pre class="brush: js">function getRandom() {
+  return Math.random();
+}
+</pre>
+
+<h3 id="Отримання_випадкового_числа_з-поміж_двох_значень">Отримання випадкового числа з-поміж двох значень</h3>
+
+<p>Наступний приклад повертає випадкове число між двома вказаними значеннями. Результат не менший від (інколи дорівнює) <code>min</code>, і менший за (але не дорівнює) <code>max</code>.</p>
+
+<pre class="brush: js">function getRandomArbitrary(min, max) {
+  return Math.random() * (max - min) + min;
+}
+</pre>
+
+<h3 id="Отримання_випадкового_цілого_з-поміж_двох_значень">Отримання випадкового цілого з-поміж двох значень</h3>
+
+<p>Наступний приклад повертає випадкове <em>ціле число</em> між двома заданими значеннями. Результат не менший від <code>min</code> (або ж від наступного цілого, більшого за <code>min</code>, якщо <code>min</code> не являється цілим), і менший за (але не дорівнює) <code>max</code>.</p>
+
+<pre class="brush: js">function getRandomInt(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min)) + min; //Включно з мінімальним та виключаючи максимальне значення
+
+}
+</pre>
+
+<div class="note">
+<p>Застосування <code>Math.round()</code> для отримання цілих може виглядати доволі привабливо, проте це призведе до спотворення рівномірного розподілу ймовірності результатів, що може бути неприйнятним для ваших потреб.</p>
+</div>
+
+<h3 id="Отримання_випадкового_цілого_з-поміж_двох_значень_включно">Отримання випадкового цілого з-поміж двох значень, включно</h3>
+
+<p>В той час, коли фукнція <code>getRandomInt()</code> включає до спектру результатів мінімум, вона виключає звідти максимум. Що, якщо вам знадобиться включити до можливих результатів як мінімум, так і максимум? Наступна фукнція <code>getRandomIntInclusive()</code> дозволяє цього досягти:</p>
+
+<pre class="brush: js">function getRandomIntInclusive(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min + 1)) + min; //Включаючи мінімум та максимум
+}</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус документу</th>
+   <th scope="col">Примітка</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Первинне визначення. JavaScript 1.0 (UNIX Only) / JavaScript 1.1 (All platforms).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.14', 'Math.random')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.random', 'Math.random')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.random', 'Math.random')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.random")}}</p>
+
+<p class="countTop"> </p>
diff --git a/files/uk/web/javascript/reference/global_objects/math/sign/index.html b/files/uk/web/javascript/reference/global_objects/math/sign/index.html
new file mode 100644
index 0000000000..a3b2668270
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/sign/index.html
@@ -0,0 +1,116 @@
+---
+title: Math.sign()
+slug: Web/JavaScript/Reference/Global_Objects/Math/sign
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/sign
+---
+<div>{{JSRef}}</div>
+
+<p>Функція <strong><code>Math.sign()</code></strong> повертає знак числа, визначаючи, чи являється число додатнім, від'ємним, або нулем.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-sign.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.sign(<var>x</var>)</code></pre>
+
+<h3 id="Аргументи">Аргументи</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Число, що відображає знак аргументу. Якщо аргумент являється додатнім числом, від'ємним числом, додатнім чи від'ємним нулем, функція поверне відповідно <code>1</code>, <code>-1</code>, <code>0</code> чи <code>-0</code>. В інших випадках результатом буде {{jsxref("NaN")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>У зв'язку з тим, що <code>sign()</code> - це статичний метод <code>Math</code>, слід завжди викликати його як <code>Math.sign()</code>, аніж як метод створеного вами об'єкту <code>Math</code> (оскільки <code>Math</code> не являється конструктором).</p>
+
+<p>Ця функція має 5 різних видів результатів: <code>1</code>, <code>-1</code>, <code>0</code>, <code>-0</code>, <code>NaN</code>. Вони відповідно відображають "додатнє число", "від'ємне число", "додатній нуль", "від'ємний нуль" та {{jsxref("NaN")}}.</p>
+
+<p>Аргумент буде неявно перетворено у <code>number</code> при передачі у функцію.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_Math.sign()">Застосування <code>Math.sign()</code></h3>
+
+<pre class="brush: js">Math.sign(3);     //  1
+Math.sign(-3);    // -1
+Math.sign('-3');  // -1
+Math.sign(0);     //  0
+Math.sign(-0);    // -0
+Math.sign(NaN);   // NaN
+Math.sign('foo'); // NaN
+Math.sign();      // NaN
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<pre class="brush: js">if (!Math.sign) {
+  Math.sign = function(x) {
+    // Якщо x - NaN, результатом буде NaN.
+    // Якщо x - -0, результатом буде -0.
+    // Якщо x - +0, результатом буде +0.
+    // Якщо x від'ємний, але не -0, результатом буде -1.
+    // Якщо x додатній, але не +0, результатом буде +1.
+    return ((x &gt; 0) - (x &lt; 0)) || +x;
+    // Більш наочне уявлення представлено нижче
+    //
+    // ( (x &gt; 0) ? 0 : 1 )  // якщо від'ємний x - то від'ємна 1
+    //          +           // інакще (бо не може бути одночасно - та +)
+    // ( (x &lt; 0) ? 0 : -1 ) // якщо додатній x - то додатня 1
+    //         ||           // якщо x є 0, -0, чи NaN, чи не являється числом,
+    //         +x           // то результатом буде x, (чи) якщо x не є
+    //                      // числом, то x приводиться до чисельного типу
+  };
+}
+</pre>
+
+<p>У наведеному вище поліфілі не потрібно ніяких додаткових приведень типів <code>(x &gt; 0) чи (x &lt; 0)</code>, бо їх віднімання одного від іншого вже вимагає конвертації із булевого типу в числа.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Примітка</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.sign', 'Math.sign')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Первинне визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sign', 'Math.sign')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.sign")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.trunc()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/sin/index.html b/files/uk/web/javascript/reference/global_objects/math/sin/index.html
new file mode 100644
index 0000000000..9a9c2bffe4
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/sin/index.html
@@ -0,0 +1,78 @@
+---
+title: Math.sin()
+slug: Web/JavaScript/Reference/Global_Objects/Math/sin
+tags:
+  - JavaScript
+  - Math
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/sin
+---
+<div>{{JSRef}}</div>
+
+<p>Функція <strong><code>Math.sin()</code></strong> повертає синус числа.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-sin.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.sin(<var>x</var>)</code></pre>
+
+<h3 id="Аргументи">Аргументи</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число (кут у радіанах).</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Синус даного числа.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>Math.sin()</code> повертає число з-поміж -1 та 1, що відповідає синусу даного у радіанах кута.</p>
+
+<p>У зв'язку з тим, що <code>sin()</code> - це статичний метод <code>Math</code>, слід завжди викликати його як <code>Math.sin()</code>, аніж як метод створеного вами об'єкту <code>Math</code> (оскільки <code>Math</code> не являється конструктором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_Math.sin">Застосування <code>Math.sin()</code></h3>
+
+<pre class="brush: js">Math.sin(0);           // 0
+Math.sin(1);           // 0.8414709848078965
+
+Math.sin(Math.PI / 2); // 1
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sin', 'Math.sin')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.sin")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/sinh/index.html b/files/uk/web/javascript/reference/global_objects/math/sinh/index.html
new file mode 100644
index 0000000000..f3e3d83b02
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/sinh/index.html
@@ -0,0 +1,93 @@
+---
+title: Math.sinh()
+slug: Web/JavaScript/Reference/Global_Objects/Math/sinh
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/sinh
+---
+<div>{{JSRef}}</div>
+
+<p>Функція <strong><code>Math.sinh()</code></strong> повертає гіперболічний синус числа. За допомогою{{jsxref("Math.E", "сталої e", "", 1)}} це можна обчислити так:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mo lspace="0em" rspace="thinmathspace">Math.sinh(x)</mo></mstyle><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>-</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow><mn>2</mn></mfrac></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.sinh(x)}} = \frac{e^x - e^{-x}}{2}</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-sinh.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.sinh(<var>x</var>)</code></pre>
+
+<h3 id="Аргументи">Аргументи</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Гіперболічний синус даного числа.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>У зв'язку з тим, що <code>sinh()</code> - це статичний метод <code>Math</code>, слід завжди викликати його як <code>Math.sinh()</code>, аніж як метод створеного вами об'єкту <code>Math</code> (оскільки <code>Math</code> не являється конструктором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_Math.sinh">Застосування <code>Math.sinh()</code></h3>
+
+<pre class="brush: js">Math.sinh(0); // 0
+Math.sinh(1); // 1.1752011936438014
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Такий же результат можна отримати за допомогою фукнції {{jsxref("Math.exp()")}}:</p>
+
+<pre class="brush: js">Math.sinh = Math.sinh || function(x) {
+  return (Math.exp(x) - Math.exp(-x)) / 2;
+}
+</pre>
+
+<p>або ж викликаючи {{jsxref("Math.exp()")}} лише один раз:</p>
+
+<pre class="brush: js">Math.sinh = Math.sinh || function(x) {
+  var y = Math.exp(x);
+  return (y - 1 / y) / 2;
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sinh', 'Math.sinh')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.sinh")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.acosh()")}}</li>
+ <li>{{jsxref("Math.asinh()")}}</li>
+ <li>{{jsxref("Math.atanh()")}}</li>
+ <li>{{jsxref("Math.cosh()")}}</li>
+ <li>{{jsxref("Math.tanh()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/sqrt/index.html b/files/uk/web/javascript/reference/global_objects/math/sqrt/index.html
new file mode 100644
index 0000000000..7ef247ceff
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/sqrt/index.html
@@ -0,0 +1,81 @@
+---
+title: Math.sqrt()
+slug: Web/JavaScript/Reference/Global_Objects/Math/sqrt
+tags:
+  - JavaScript
+  - Math
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/sqrt
+---
+<div>{{JSRef}}</div>
+
+<p>Функція <strong><code>Math.sqrt()</code></strong> повертає квадратний корінь від числа, що являється</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>≥</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mi>M</mi><mi>a</mi><mi>t</mi><mi>h</mi><mo>.</mo><mi>s</mi><mi>q</mi><mi>r</mi><mi>t</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msqrt><mi>x</mi></msqrt><mo>=</mo><mtext>такий унікальний</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>≥</mo><mn>0, для якого</mn><mspace width="thickmathspace"></mspace><mspace width="thickmathspace"></mspace><msup><mi>y</mi><mn>2</mn></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \geq 0, \mathtt{Math.sqrt(x)} = \sqrt{x} = \text{the unique} \; y \geq 0 \; \text{such that} \; y^2 = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-sqrt.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.sqrt(<var>x</var>)</code></pre>
+
+<h3 id="Аргументи">Аргументи</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Квадратний корінь даного числа. Якщо число від'ємне, функція повертає {{jsxref("NaN")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо значення <code>x</code> від'ємне, <code>Math.sqrt()</code> повертає {{jsxref("NaN")}}.</p>
+
+<p>У зв'язку з тим, що <code>sqrt()</code> - це статичний метод <code>Math</code>, слід завжди викликати його як <code>Math.sqrt()</code>, аніж як метод створеного вами об'єкту <code>Math</code> (оскільки <code>Math</code> не являється конструктором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_Math.sqrt">Застосування <code>Math.sqrt()</code></h3>
+
+<pre class="brush: js">Math.sqrt(9); // 3
+Math.sqrt(2); // 1.414213562373095
+
+Math.sqrt(1);  // 1
+Math.sqrt(0);  // 0
+Math.sqrt(-1); // NaN
+Math.sqrt(-0); // -0
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sqrt', 'Math.sqrt')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.sqrt")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.cbrt()")}}</li>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/sqrt1_2/index.html b/files/uk/web/javascript/reference/global_objects/math/sqrt1_2/index.html
new file mode 100644
index 0000000000..a73d0f91af
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/sqrt1_2/index.html
@@ -0,0 +1,65 @@
+---
+title: Math.SQRT1_2
+slug: Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2
+tags:
+  - JavaScript
+  - Math
+  - Властивість
+  - Довідка
+  - Поле
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2
+---
+<div>{{JSRef}}</div>
+
+<p>Поле <strong><code>Math.SQRT1_2</code></strong> відображає значення квадратного кореня від 1/2, що приблизно дорівнює 0.707:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.SQRT1_2</mi></mstyle><mo>=</mo><msqrt><mfrac><mn>1</mn><mn>2</mn></mfrac></msqrt><mo>=</mo><mfrac><mn>1</mn><msqrt><mn>2</mn></msqrt></mfrac><mo>=</mo><mfrac><msqrt><mn>2</mn></msqrt><mn>2</mn></mfrac><mo>≈</mo><mn>0.707</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.SQRT1_2}} = \sqrt{\frac{1}{2}} = \frac{1}{\sqrt{2}} = \frac{\sqrt{2}}{2} \approx 0.707</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-sqrt1_2.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь-ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Опис">Опис</h2>
+
+<p>У зв'язку із тим, що <code>SQRT1_2</code> - це статичне поле <code>Math</code>, слід завжди звертатись до нього у формі <code>Math.SQRT1_2</code>. Намагатись викликати <code>SQRT1_2</code>, звертаючись до полів  створених вами об'єктів <code>Math</code> - некоректно (<code>Math</code> не являється конструктором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_Math.SQRT1_2">Застосування <code>Math.SQRT1_2</code></h3>
+
+<p>Наступна функція повертає значення квадратного кореня від 1/2:</p>
+
+<pre class="brush:js">function getRoot1_2() {
+  return Math.SQRT1_2;
+}
+
+getRoot1_2(); // 0.7071067811865476
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.SQRT1_2")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.pow()")}}</li>
+ <li>{{jsxref("Math.sqrt()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/sqrt2/index.html b/files/uk/web/javascript/reference/global_objects/math/sqrt2/index.html
new file mode 100644
index 0000000000..546d939b3f
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/sqrt2/index.html
@@ -0,0 +1,65 @@
+---
+title: Math.SQRT2
+slug: Web/JavaScript/Reference/Global_Objects/Math/SQRT2
+tags:
+  - JavaScript
+  - Math
+  - Властивість
+  - Довідка
+  - Поле
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT2
+---
+<div>{{JSRef}}</div>
+
+<p>Поле <strong><code>Math.SQRT2</code></strong> відображає значення квадратного кореня із 2, що приблизно дорівнює 1.414:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.SQRT2</mi></mstyle><mo>=</mo><msqrt><mn>2</mn></msqrt><mo>≈</mo><mn>1.414</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.SQRT2}} = \sqrt{2} \approx 1.414</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-sqrt2.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь-ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Опис">Опис</h2>
+
+<p>У зв'язку із тим, що <code>SQRT2</code> - це статичне поле <code>Math</code>, слід завжди звертатись до нього у формі <code>Math.SQRT2</code>. Намагатись викликати <code>SQRT2</code>, звертаючись до полів  створених вами об'єктів <code>Math</code> - некоректно (<code>Math</code> не являється конструктором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_Math.SQRT2">Використання <code>Math.SQRT2</code></h3>
+
+<p>Наступна функція повертає значення квадратного кореня із 2:</p>
+
+<pre class="brush: js">function getRoot2() {
+  return Math.SQRT2;
+}
+
+getRoot2(); // 1.4142135623730951
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sqrt2', 'Math.SQRT2')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.SQRT2")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.pow()")}}</li>
+ <li>{{jsxref("Math.sqrt()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/tan/index.html b/files/uk/web/javascript/reference/global_objects/math/tan/index.html
new file mode 100644
index 0000000000..1a5149a778
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/tan/index.html
@@ -0,0 +1,83 @@
+---
+title: Math.tan()
+slug: Web/JavaScript/Reference/Global_Objects/Math/tan
+tags:
+  - JavaScript
+  - Math
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/tan
+---
+<div>{{JSRef}}</div>
+
+<p>Функція <strong><code>Math.tan()</code></strong> повертає тангенс від числа.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-tan.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.tan(<var>x</var>)</code></pre>
+
+<h3 id="Аргументи">Аргументи</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число, що являє собою кут в радіанах.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Тангенс даного числа.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>Math.tan()</code> повертає числове значення, що відповідає тангенсу поданого кута.</p>
+
+<p>У зв'язку з тим, що <code>tan()</code> - це статичний метод <code>Math</code>, слід завжди викликати його як <code>Math.tan()</code>, аніж як метод створеного вами об'єкту <code>Math</code> (оскільки <code>Math</code> не являється конструктором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_Math.tan">Застосування <code>Math.tan()</code></h3>
+
+<pre class="brush: js">Math.tan(1); // 1.5574077246549023
+</pre>
+
+<p>Так як функція <code>Math.tan()</code> приймає значення в радіанах, але зазвичай зручніше працювати із градусами, наступна функція приймає значення кута в градусах, перетворює його в радіани та повертає тангенс.</p>
+
+<pre class="brush: js">function getTanDeg(deg) {
+  var rad = deg * Math.PI/180;
+  return Math.tan(rad);
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.tan', 'Math.tan')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_в_браузерах">Підтримка в браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.tan")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/tanh/index.html b/files/uk/web/javascript/reference/global_objects/math/tanh/index.html
new file mode 100644
index 0000000000..84bd6008fb
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/tanh/index.html
@@ -0,0 +1,85 @@
+---
+title: Math.tanh()
+slug: Web/JavaScript/Reference/Global_Objects/Math/tanh
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/tanh
+---
+<div>{{JSRef}}</div>
+
+<p>Функція <strong><code>Math.tanh()</code></strong> повертає значення гіперболічного тангенса від числа, що також можна висловити як:</p>
+
+<p><math display="block"><semantics><mrow><mo lspace="0em" rspace="0em">tanh</mo><mi>x</mi><mo>=</mo><mfrac><mrow><mo lspace="0em" rspace="0em">sinh</mo><mi>x</mi></mrow><mrow><mo lspace="0em" rspace="0em">cosh</mo><mi>x</mi></mrow></mfrac><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>-</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>+</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow></mfrac><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>x</mi></mrow></msup><mo>-</mo><mn>1</mn></mrow><mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>x</mi></mrow></msup><mo>+</mo><mn>1</mn></mrow></mfrac></mrow><annotation encoding="TeX">\tanh x = \frac{\sinh x}{\cosh x} = \frac {e^x - e^{-x}} {e^x + e^{-x}} = \frac{e^{2x} - 1}{e^{2x}+1}</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-tanh.html")}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.tanh(<var>x</var>)</code></pre>
+
+<h3 id="Аргументи">Аргументи</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Гіперболічний тангенс даного числа.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>У зв'язку з тим, що <code>tanh()</code> - це статичний метод <code>Math</code>, слід завжди викликати його як <code>Math.tanh()</code>, аніж як метод створеного вами об'єкту <code>Math</code> (оскільки <code>Math</code> не являється конструктором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_Math.tanh">Застосування <code>Math.tanh()</code></h3>
+
+<pre class="brush: js">Math.tanh(0);        // 0
+Math.tanh(Infinity); // 1
+Math.tanh(1);        // 0.7615941559557649
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Даний метод можна емулювати за допомогою функції {{jsxref("Math.exp()")}}:</p>
+
+<pre class="brush: js">Math.tanh = Math.tanh || function(x){
+    var a = Math.exp(+x), b = Math.exp(-x);
+    return a == Infinity ? 1 : b == Infinity ? -1 : (a - b) / (a + b);
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.tanh', 'Math.tanh')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.tanh")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.acosh()")}}</li>
+ <li>{{jsxref("Math.asinh()")}}</li>
+ <li>{{jsxref("Math.atanh()")}}</li>
+ <li>{{jsxref("Math.cosh()")}}</li>
+ <li>{{jsxref("Math.sinh()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/trunc/index.html b/files/uk/web/javascript/reference/global_objects/math/trunc/index.html
new file mode 100644
index 0000000000..d3fa2704c5
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/trunc/index.html
@@ -0,0 +1,128 @@
+---
+title: Math.trunc()
+slug: Web/JavaScript/Reference/Global_Objects/Math/trunc
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/trunc
+---
+<div>{{JSRef}}</div>
+
+<p>Функція <strong><code>Math.trunc()</code></strong> повертає цілу частину числа, повністю відкидаючи дробову.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-trunc.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Math.trunc(<var>x</var>)
+</pre>
+
+<h3 id="Аргументи">Аргументи</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Ціла частина даного числа.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>На відміну від трьох інших методів <code>Math</code> ({{jsxref("Math.floor()")}}, {{jsxref("Math.ceil()")}} та {{jsxref("Math.round()")}}), принцип роботи <code>Math.trunc()</code> дуже простий. Функція просто відкидає кому (крапку) та всі цифри правої частини, не зважаючи на те, являється аргумент додатнім, чи від'ємним.</p>
+
+<p>Аргумент, поданий на вхід цієї функції, буде неявно приведений до чисельного типу.</p>
+
+<p>У зв'язку з тим, що <code>trunc()</code> - це статичний метод <code>Math</code>, слід завжди викликати його як <code>Math.trunc()</code>, аніж як метод створеного вами об'єкту <code>Math</code> (оскільки <code>Math</code> не являється конструктором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Застосування_Math.trunc()">Застосування <code>Math.trunc()</code></h3>
+
+<pre class="brush: js">Math.trunc(13.37);    // 13
+Math.trunc(42.84);    // 42
+Math.trunc(0.123);    //  0
+Math.trunc(-0.123);   // -0
+Math.trunc('-1.123'); // -1
+Math.trunc(NaN);      // NaN
+Math.trunc('foo');    // NaN
+Math.trunc();         // NaN
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<pre class="brush: js">if (!Math.trunc) {
+	Math.trunc = function(v) {
+		v = +v;
+		if (!isFinite(v)) return v;
+
+		return (v - v % 1)   ||   (v &lt; 0 ? -0 : v === 0 ? v : 0);
+
+		// повертає:
+		//  0        -&gt;  0
+		// -0        -&gt; -0
+		//  0.2      -&gt;  0
+		// -0.2      -&gt; -0
+		//  0.7      -&gt;  0
+		// -0.7      -&gt; -0
+		//  Infinity -&gt;  Infinity
+		// -Infinity -&gt; -Infinity
+		//  NaN      -&gt;  NaN
+		//  null     -&gt;  0
+	};
+}
+</pre>
+
+<p>чи:</p>
+
+<pre class="brush: js">if (!Math.trunc) {
+	Math.trunc = function(v) {
+		v = +v;
+		return (v - v % 1)   ||   (!isFinite(v) || v === 0 ? v : v &lt; 0 ? -0 : 0);
+	};
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Примітка</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-math.trunc', 'Math.trunc')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Первинне визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.trunc', 'Math.trunc')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.trunc")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/math/заокругелння/index.html b/files/uk/web/javascript/reference/global_objects/math/заокругелння/index.html
new file mode 100644
index 0000000000..92cc055f83
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/math/заокругелння/index.html
@@ -0,0 +1,194 @@
+---
+title: Math.round()
+slug: Web/JavaScript/Reference/Global_Objects/Math/заокругелння
+tags:
+  - JavaScript
+  - Math
+  - Довідка
+  - Заокруглення
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/round
+---
+<div>{{JSRef}}</div>
+
+<p>Функція <strong><code>Math.round()</code></strong> повертає значення числа заокруглене до найближчого цілого.</p>
+
+<p> </p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-round.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<p> </p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Math.round(<var>x</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h3 id="Повернуте_значення">Повернуте значення</h3>
+
+<p>Значення отриманого числа, округлене до найближчого цілого.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо дробова частина числа більша або рівна 0.5, аргумент буде округлено до найближчого більшого цілого. Якщо дробова частина числа менша 0.5, аргумент буде округлено до найближчого меншого цілого. Якщо дробова частина рівна 0.5, то аргумент буде округлено до найближчого цілого в напрямку +∞.  <strong>Зверніть увагу, що функція round() відрізняється від багатьох мов, які часто приводять цей випадок до наступного цілого числа, віддаленого від нуля</strong> (маємо інший результат у випадку від'ємних чисел з дробовою частиною рівною 0.5).</p>
+
+<p>Оскільки round() - це статичний метод Math, ви завжди використовуєте його як Math.round (), а не як метод об'єкта Math, який ви створили (Math не має конструктора).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">Math.round( 20.49); //  20
+Math.round( 20.5);  //  21
+Math.round( 42  );  //  42
+Math.round(-20.5);  // -20
+Math.round(-20.51); // -21
+</pre>
+
+<h3 id="Десяткове_округлення">Десяткове округлення</h3>
+
+<pre class="brush: js">// Closure
+(function() {
+  /**
+   * Decimal adjustment of a number.
+   *
+   * @param {String}  type  The type of adjustment.
+   * @param {Number}  value The number.
+   * @param {Integer} exp   The exponent (the 10 logarithm of the adjustment base).
+   * @returns {Number} The adjusted value.
+   */
+  function decimalAdjust(type, value, exp) {
+    // If the exp is undefined or zero...
+    if (typeof exp === 'undefined' || +exp === 0) {
+      return Math[type](value);
+    }
+    value = +value;
+    exp = +exp;
+    // If the value is not a number or the exp is not an integer...
+    if (isNaN(value) || !(typeof exp === 'number' &amp;&amp; exp % 1 === 0)) {
+      return NaN;
+    }
+    // If the value is negative...
+    if (value &lt; 0) {
+      return -decimalAdjust(type, -value, exp);
+    }
+    // Shift
+    value = value.toString().split('e');
+    value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
+    // Shift back
+    value = value.toString().split('e');
+    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
+  }
+
+  // Decimal round
+  if (!Math.round10) {
+    Math.round10 = function(value, exp) {
+      return decimalAdjust('round', value, exp);
+    };
+  }
+  // Decimal floor
+  if (!Math.floor10) {
+    Math.floor10 = function(value, exp) {
+      return decimalAdjust('floor', value, exp);
+    };
+  }
+  // Decimal ceil
+  if (!Math.ceil10) {
+    Math.ceil10 = function(value, exp) {
+      return decimalAdjust('ceil', value, exp);
+    };
+  }
+})();
+
+// Round
+Math.round10(55.55, -1);   // 55.6
+Math.round10(55.549, -1);  // 55.5
+Math.round10(55, 1);       // 60
+Math.round10(54.9, 1);     // 50
+Math.round10(-55.55, -1);  // -55.5
+Math.round10(-55.551, -1); // -55.6
+Math.round10(-55, 1);      // -50
+Math.round10(-55.1, 1);    // -60
+Math.round10(1.005, -2);   // 1.01 -- compare this with Math.round(1.005*100)/100 above
+Math.round10(-1.005, -2);  // -1.01
+// Floor
+Math.floor10(55.59, -1);   // 55.5
+Math.floor10(59, 1);       // 50
+Math.floor10(-55.51, -1);  // -55.6
+Math.floor10(-51, 1);      // -60
+// Ceil
+Math.ceil10(55.51, -1);    // 55.6
+Math.ceil10(51, 1);        // 60
+Math.ceil10(-55.59, -1);   // -55.5
+Math.ceil10(-59, 1);       // -50
+</pre>
+
+<h3 id="PHP-Like_rounding_Method">PHP-Like rounding Method</h3>
+
+<p>The code below can be used to add your own version of Math.round to your own namespace which takes a precision parameter. Unlike Decimal rounding in the example above, this performs no conversion to and from strings, and the precision parameter works same way as PHP and Excel whereby a positive 1 would round to 1 decimal place and -1 would round to the tens.</p>
+
+<pre class="brush: js">var myNamespace = {};
+
+myNamespace.round = function(number, precision) {
+    var factor = Math.pow(10, precision);
+    var tempNumber = number * factor;
+    var roundedTempNumber = Math.round(tempNumber);
+    return roundedTempNumber / factor;
+};
+
+myNamespace.round(1234.5678, 1); // 1234.6
+myNamespace.round(1234.5678, -1); // 1230</pre>
+
+<h2 id="Cпецифікації">Cпецифікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення. Впроваджено в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.15', 'Math.round')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.round', 'Math.round')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.round', 'Math.round')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_браузерів">Сумісність браузерів</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.round")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li>{{jsxref("Math.trunc()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/nan/index.html b/files/uk/web/javascript/reference/global_objects/nan/index.html
new file mode 100644
index 0000000000..7a2ee5fd8c
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/nan/index.html
@@ -0,0 +1,91 @@
+---
+title: NaN
+slug: Web/JavaScript/Reference/Global_Objects/NaN
+tags:
+  - JavaScript
+  - Властивість
+  - Довідка
+translation_of: Web/JavaScript/Reference/Global_Objects/NaN
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>Глобальна властивість <code><strong>NaN</strong></code> - це значення, що служить для відображення "не числа" (Not-A-Number).</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-nan.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p><code>NaN</code> є властивістю <em>глобального об'єкта</em>. Іншими словами, це змінна глобальної області видимості.</p>
+
+<p>Початковим значенням <code>NaN</code> є "не число" — так само, як і значення {{jsxref("Number.NaN")}}. У сучасних переглядачах <code>NaN</code> — це властивість, недоступна для запису та налаштування. Навіть якщо у вашому випадку це не так, уникайте її перевизначення. У програмах <code>NaN</code> застосовується досить рідко.</p>
+
+<p>Існує п'ять різних типів операцій, що повертають <code>NaN</code>:</p>
+
+<ul>
+ <li>Число не може бути розібране (наприклад, <code>parseInt("blabla")</code> чи <code>Number(undefined)</code>)</li>
+ <li>Математична операція, в якій результат не є дійсним числом (наприклад, <code>Math.sqrt(-1)</code>)</li>
+ <li>Операндом аргументу є NaN (наприклад, <code>7 ** NaN</code>)</li>
+ <li>Невизначеності (наприклад, 0 * <code>Infinity</code>)</li>
+ <li>Будь-яка операція, що містить рядок та не є операцією додавання (наприклад, "ква"/3)</li>
+</ul>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Первірка_на_NaN">Первірка на <code>NaN</code></h3>
+
+<p><code>NaN</code> не дорівнює (через <code>==</code>, <code>!=</code>, <code>===</code> та <code>!==</code>) будь-якому значенню, в тому числі іншому значенню NaN. Використовуйте {{jsxref("Number.isNaN()")}} або {{jsxref("Global_Objects/isNaN", "isNaN()")}}, щоб якнайточніше визначити, чи значення є NaN. Або ж виконуйте порівняння аргументу із самим собою: тільки NaN не дорівнює собі.</p>
+
+<pre class="brush: js notranslate">NaN === NaN;        // false
+Number.NaN === NaN; // false
+isNaN(NaN);         // true
+isNaN(Number.NaN);  // true
+
+function valueIsNaN(v) { return v !== v; }
+valueIsNaN(1);          // false
+valueIsNaN(NaN);        // true
+valueIsNaN(Number.NaN); // true
+</pre>
+
+<p>Однак, пам'ятайте про відмінність між <code>isNaN()</code> та <code>Number.isNaN()</code>: перший поверне <code>true</code>, якщо аргумент є <code>NaN</code>, або якщо він стане <code>NaN</code> після приведення до чисельного типу, в той час як другий поверне <code>true</code> лише у випадку, якщо аргумент на даний момент є <code>NaN</code>:</p>
+
+<pre class="brush: js notranslate">isNaN('привіт'); // повертає 'true'.
+Number.isNaN('привіт'); // повертає 'false'.
+</pre>
+
+<p>Додатково, деякі методи масивів не знаходять NaN, в той час, як інші знаходять.</p>
+
+<pre class="brush: js notranslate">let arr = [2, 4, NaN, 12];
+arr.indexOf(NaN);                      // -1 (false)
+arr.includes(NaN);                     // true
+arr.findIndex(n =&gt; Number.isNaN(n));   // 2</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-nan', 'NaN')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_у_веб-переглядачах">Підтримка у веб-переглядачах</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</div>
+
+<p>{{Compat("javascript.builtins.NaN")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Number.NaN")}}</li>
+ <li>{{jsxref("Number.isNaN()")}}</li>
+ <li>{{jsxref("isNaN", "isNaN()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/null/index.html b/files/uk/web/javascript/reference/global_objects/null/index.html
new file mode 100644
index 0000000000..2088955324
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/null/index.html
@@ -0,0 +1,93 @@
+---
+title: 'null'
+slug: Web/JavaScript/Reference/Global_Objects/null
+tags:
+  - JavaScript
+  - Literal
+  - Проста величина
+translation_of: Web/JavaScript/Reference/Global_Objects/null
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>Значення <code>null</code> позначає навмисну відсутність будь-якого значення об'єкта. Воно є однією з {{glossary("Primitive", "простих величин")}} у JavaScript.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-null.html")}}</div>
+
+<p class="hidden">Першокод цього прикладу збережено у репозиторії GitHub. Якщо ви хочете долучитися до створення чи поліпшення таких прикладів, пропонуйте нам свої зміни до репозиторію <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Значення <code>null</code> має відповідний літерал:</p>
+
+<pre class="syntaxbox">null</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Власне <code>null</code> не є ідентифікатором властивості глобального об'єкта (змінною в загальній області видимості), як {{jsxref("Global_Objects/undefined", "undefined")}}. Натомість <code>null</code> є значенням, яке свідчить, що змінна не вказує на об'єкт. В різних API значення <code>null</code> часто повертається там, де очікують отримати об'єкт, вказуючи таким чином, що відповідного об'єкта немає.</p>
+
+<pre class="brush: js">// Змінна foo не існує. Вона не була оголошена тож і початкового значння не має:
+foo;  // "ReferenceError: foo is not defined"
+
+// Тепер змінна foo оголошена й існує, але вона не має ані типу, ані значення:
+var foo = null;
+foo;  // виводить "null"
+</pre>
+
+<h3 id="Різниця_між_null_та_undefined">Різниця між <code>null</code> та <code>undefined</code></h3>
+
+<p>Порівнюючи змінну з <code>null</code> чи <code>undefined</code> зважайте на <a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння">різницю між операторами рівності (==) й тотожності (===)</a>, оскільки перший за потреби здійснює перетворення типів.</p>
+
+<pre class="brush: js">typeof null          // "object" (не "null" з метою зворотної сумісності)
+typeof undefined     // "undefined"
+null === undefined   // false
+null  == undefined   // true
+null === null        // true
+null == null         // true
+!null                // true
+isNaN(1 + null)      // false
+isNaN(1 + undefined) // true</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкова виознака.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-4.3.11', 'null value')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-null-value', 'null value')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-null-value', 'null value')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.null")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/undefined", "undefined")}}</li>
+ <li>{{jsxref("Global_Objects/NaN", "NaN")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/__definegetter__/index.html b/files/uk/web/javascript/reference/global_objects/object/__definegetter__/index.html
new file mode 100644
index 0000000000..cf5a10c622
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/__definegetter__/index.html
@@ -0,0 +1,101 @@
+---
+title: Object.prototype.__defineGetter__()
+slug: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__
+tags:
+  - JavaScript
+  - Об'єкт
+  - застарілий
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__
+---
+<div>{{JSRef}}</div>
+
+<div class="warning">
+<p>Ця функціональність не рекомендована до використання на користь визначення гетерів за допомогою <a href="/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів">синтаксису ініціалізації об'єктів</a> або API {{jsxref("Object.defineProperty()")}}. Хоча ця функціональність широко реалізована, вона описана у <a href="https://tc39.github.io/ecma262/#sec-additional-ecmascript-features-for-web-browsers">специфікації ECMAScript</a> тільки задля legacy-використання. Цей метод не бажано використовувати, оскільки існують кращі альтернативи.</p>
+</div>
+
+<p>Метод <code><strong>__defineGetter__</strong></code> прив'язує властивість об'єкта до функції, яка викликатиметься під час звернення до властивості.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>obj</var>.__defineGetter__(<var>prop</var>, <var>func</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Рядок, що містить ім'я властивості, яку треба прив'язати до наданої функції.</dd>
+ <dt><code>func</code></dt>
+ <dd>Функція, що прив'язується до вказаної властивості.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>__defineGetter__</code> дозволяє визначити {{jsxref("Operators/get", "гетер", "", 1)}} на існуючому об'єкті.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">// Нестандартний та не рекомендований спосіб
+
+var o = {};
+o.__defineGetter__('gimmeFive', function() { return 5; });
+console.log(o.gimmeFive); // 5
+
+
+// Стандартні способи
+
+// Використання оператора get
+var o = { get gimmeFive() { return 5; } };
+console.log(o.gimmeFive); // 5
+
+// Використання Object.defineProperty
+var o = {};
+Object.defineProperty(o, 'gimmeFive', {
+  get: function() {
+    return 5;
+  }
+});
+console.log(o.gimmeFive); // 5
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.__defineGetter__', 'Object.prototype.__defineGetter__()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Включено у (нормативний) додаток для додаткової legacy-функціональності ECMAScript для веб-переглядачів (зауважте, що специфікація кодифікує те, що вже реалізовано).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.defineGetter")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.__defineSetter__()")}}</li>
+ <li>Оператор {{jsxref("Operators/get", "get")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.prototype.__lookupGetter__()")}}</li>
+ <li>{{jsxref("Object.prototype.__lookupSetter__()")}}</li>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Посібник JS: Визначення гетерів та сетерів</a></li>
+ <li><a href="https://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/">[Блог-стаття] Прибирання __defineGetter__ та __defineSetter__</a></li>
+ <li>{{bug(647423)}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/__definesetter__/index.html b/files/uk/web/javascript/reference/global_objects/object/__definesetter__/index.html
new file mode 100644
index 0000000000..c8874d8a8a
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/__definesetter__/index.html
@@ -0,0 +1,116 @@
+---
+title: Object.prototype.__defineSetter__()
+slug: Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__
+tags:
+  - JavaScript
+  - Об'єкт
+  - застарілий
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__
+---
+<div>{{JSRef}}</div>
+
+<div class="warning">
+<p>Ця функціональність не рекомендована до використання на користь <a href="/uk/docs/Web/JavaScript/Reference/Operators/%D0%86%D0%BD%D1%96%D1%86%D1%96%D0%B0%D0%BB%D1%96%D0%B7%D0%B0%D1%86%D1%96%D1%8F_%D0%BE%D0%B1%E2%80%99%D1%94%D0%BA%D1%82%D1%96%D0%B2">синтаксису ініціалізації об'єктів</a> або API {{jsxref("Object.defineProperty()")}}.</p>
+
+<p>Однак, оскільки вона широко використовується у Всесвітній мережі, дуже малоймовірно, що веб-переглядачі припинять її підтримку<span class="tlid-translation translation" lang="es"><span title="">.</span></span></p>
+</div>
+
+<p>Метод <code><strong>__defineSetter__</strong></code>  прив'язує властивість об'єкта до функції, яка викликатиметься під час спроби присвоїти значення цієї властивості.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>obj</var>.__defineSetter__(<var>prop</var>, <var>fun</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Рядок, що містить ім'я властивості, яка буде прив'язана до наданої функції.</dd>
+ <dt><code>fun</code></dt>
+ <dd>Функція, що викликатиметься при спробі присвоїти значення вказаної властивості. Ця функція має форму
+ <pre class="brush: js">function(<var>val</var>) { . . . }</pre>
+
+ <dl>
+  <dt><code>val</code></dt>
+  <dd>Псевдонім змінної, яка містить значення для присвоєння <code>prop</code>.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>__defineSetter__</code> дозволяє визначення {{jsxref("Operators/set", "сетера", "", 1)}} на попередньо створеному об'єкті.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">// <span class="tlid-translation translation" lang="es"><span title="">Нестандартний та не рекомендований спосіб</span></span>
+
+var o = {};
+o.__defineSetter__('value', function(val) { this.anotherValue = val; });
+o.value = 5;
+console.log(o.value); // undefined
+console.log(o.anotherValue); // 5
+
+
+// Стандартні способи
+
+// Використання оператора set
+var o = { set value(val) { this.anotherValue = val; } };
+o.value = 5;
+console.log(o.value); // undefined
+console.log(o.anotherValue); // 5
+
+// Використання Object.defineProperty
+var o = {};
+Object.defineProperty(o, 'value', {
+  set: function(val) {
+    this.anotherValue = val;
+  }
+});
+o.value = 5;
+console.log(o.value); // undefined
+console.log(o.anotherValue); // 5
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.__defineSetter__', 'Object.prototype.__defineSetter__()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Включено у (нормативний) додаток для додаткової legacy-функціональності ECMAScript для веб-переглядачів (зауважте, що специфікація кодифікує те, що вже реалізовано).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+<div class="hidden">La tabla de compatibilidad en esta página es generada a partir de datos estructurados. <span class="tlid-translation translation" lang="es"><span title="">Si desea contribuir a los datos, consulte</span></span> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud de extracción.</div>
+
+<p>{{Compat("javascript.builtins.Object.defineSetter")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.__defineGetter__()")}}</li>
+ <li>Оператор {{jsxref("Operators/set", "set")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.prototype.__lookupGetter__()")}}</li>
+ <li>{{jsxref("Object.prototype.__lookupSetter__()")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Посибник JavaScript: Визначення гетерів та сетерів</a></li>
+ <li><a href="http://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/">[Блог-стаття] Прибирання __defineGetter__ та __defineSetter__</a></li>
+ <li>{{bug(647423)}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/__lookupgetter__/index.html b/files/uk/web/javascript/reference/global_objects/object/__lookupgetter__/index.html
new file mode 100644
index 0000000000..d801ac6354
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/__lookupgetter__/index.html
@@ -0,0 +1,89 @@
+---
+title: Object.prototype.__lookupGetter__()
+slug: Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__
+tags:
+  - JavaScript
+  - Об'єкт
+  - застарілий
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p>Метод <code><strong>__lookupGetter__</strong></code> повертає функцію, прив'язану в якості гетера вказаної властивості.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>obj</var>.__lookupGetter__(<var>sprop</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>sprop</code></dt>
+ <dd>Рядок, що містить ім'я властивості, гетер якої має бути повернений.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Функція, прив'язана в якості гетера до вказаної властивості.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо для властивості об'єкта був визначений гетер, неможливо отримати посилання на нього через цю властивість, оскільки властивість посилається на значення, яке повертає ця функція. Методом <code>__lookupGetter__</code> можна отримати посилання на функцію-гетер.</p>
+
+<p>Зараз це стало можливо робити стандартизованими засобами, через {{jsxref("Object.getOwnPropertyDescriptor()")}} та {{jsxref("Object.getPrototypeOf()")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">var obj = {
+  get foo() {
+    return Math.random() &gt; 0.5 ? 'foo' : 'bar';
+  }
+};
+
+
+// Нестандартний та не рекомендований спосіб
+obj.__lookupGetter__('foo');
+// (function() { return Math.random() &gt; 0.5 ? 'foo' : 'bar'; })
+
+
+// Стандартний спосіб
+Object.getOwnPropertyDescriptor(obj, "foo").get;
+// (function() { return Math.random() &gt; 0.5 ? 'foo' : 'bar'; })
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.__lookupGetter__', 'Object.prototype.__lookupGetter__()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Включено у (нормативний) додаток для додаткової legacy-функціональності ECMAScript для веб-переглядачів (зауважте, що специфікація кодифікує те, що вже реалізовано).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.lookupGetter")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.__lookupSetter__()")}}</li>
+ <li>Оператор {{jsxref("Functions/get", "get")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyDescriptor()")}} та {{jsxref("Object.getPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.prototype.__defineGetter__()")}}</li>
+ <li>{{jsxref("Object.prototype.__defineSetter__()")}}</li>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Посібник JavaScript: Визначення гетерів та сетерів</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/__lookupsetter__/index.html b/files/uk/web/javascript/reference/global_objects/object/__lookupsetter__/index.html
new file mode 100644
index 0000000000..c7ce0deb21
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/__lookupsetter__/index.html
@@ -0,0 +1,89 @@
+---
+title: Object.prototype.__lookupSetter__()
+slug: Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__
+tags:
+  - JavaScript
+  - Об'єкт
+  - застарілий
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p>Метод <code><strong>__lookupSetter__</strong></code> повертає функцію, прив'язану в якості сетера вказаної властивості.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>obj</var>.__lookupSetter__(<var>sprop</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>sprop</code></dt>
+ <dd>Рядок, що містить ім'я властивості, сетер якої має бути повернений.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Функція, прив'язана в якості сетера до вказаної властивості.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо для властивості об'єкта був визначений сетер, неможливо отримати посилання на функцію-сетер через цю властивість, оскільки властивість посилається на значення, яке повертає функція-гетер. Методом <code>__lookupSetter__</code> можна отримати посилання на функцію-сетер.</p>
+
+<p>Зараз це стало можливо робити стандартизованим засобом, через {{jsxref("Object.getOwnPropertyDescriptor()")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">var obj = {
+  set foo(value) {
+    this.bar = value;
+  }
+};
+
+
+// Нестандартний та не рекомендований спосіб
+obj.__lookupSetter__('foo')
+// (function(value) { this.bar = value; })
+
+
+// Стандартний спосіб
+Object.getOwnPropertyDescriptor(obj, 'foo').set;
+// (function(value) { this.bar = value; })
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.__lookupSetter__', 'Object.prototype.__lookupSetter__()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Включено у (нормативний) додаток для додаткової legacy-функціональності ECMAScript для веб-переглядачів (зауважте, що специфікація кодифікує те, що вже реалізовано).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.lookupSetter")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.__lookupGetter__()")}}</li>
+ <li>Оператор {{jsxref("Functions/set", "set")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyDescriptor()")}} та {{jsxref("Object.getPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.prototype.__defineGetter__()")}}</li>
+ <li>{{jsxref("Object.prototype.__defineSetter__()")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Посібник JavaScript: Визначення гетерів та сетерів</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/assign/index.html b/files/uk/web/javascript/reference/global_objects/object/assign/index.html
new file mode 100644
index 0000000000..3bbaac64b9
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/assign/index.html
@@ -0,0 +1,273 @@
+---
+title: Object.assign()
+slug: Web/JavaScript/Reference/Global_Objects/Object/assign
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Object
+  - Довідка
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>Object.assign()</code></strong> призначено для копіювання у цільовий об'єкт всіх особистих (не успадкованих) перелічуваних властивостей одного або декількох об'єктів. Метод повертає цільовий об'єкт.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/object-assign.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">Object.assign(<var>target</var>, ...<var>sources</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><em><code>target</code></em></dt>
+ <dd>Цільовий об'єкт.</dd>
+ <dt><em><code>sources</code></em></dt>
+ <dd>Вхідні об'єкти (щонайменше один).</dd>
+</dl>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>Цільовий об'єкт.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Властивості цільового об'єкта будуть заміщені властивостями вхідних об'єктів, якщо вони мають той самий ключ. Пізніші властивості вхідних об'єктів схожим чином заміщують більш ранні.</p>
+
+<p>Метод <code>Object.assign()</code> копіює лише перелічувані та <em>особисті</em> властивості з кожного джерела у цільовий об'єкт. Він використовує <code>[[Get]]</code> на вхідних об'єктах та <code>[[Set]]</code> на цільовому об'єкті, а отже, здійснює виклики гетерів і сетерів. Таким чином, він <em>присвоює</em> властивості, а не просто копіює чи визначає нові властивості. Ця особливість може зробити метод непридатним для приєднання нових властивостей до прототипу, якщо вхідні джерела містять гетери.</p>
+
+<p>Для копіювання визначень властивостей разом з їх перелічуваністю у прототип натомість скористайтеся методами {{jsxref("Object.getOwnPropertyDescriptor()")}} та {{jsxref("Object.defineProperty()")}}.</p>
+
+<p>Копіюються властивості обох типів: як {{jsxref("String","рядкові")}}, так і {{jsxref("Symbol","символьні")}}.</p>
+
+<p>В разі помилки, наприклад, якщо властивість є недоступною для запису, викидається помилка {{jsxref("TypeError")}}, а об'єкт <code>target</code> може бути змінений, якщо будь-які властивості були додані до викидання помилки.</p>
+
+<div class="blockIndicator note">
+<p><strong>Заувага:</strong> <code>Object.assign()</code> не викидає помилок, якщо серед джерел є значення {{jsxref("null")}} чи {{jsxref("undefined")}}.</p>
+</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Клонування_обєкта">Клонування об'єкта</h3>
+
+<pre class="brush: js notranslate">const obj = { a: 1 };
+const copy = Object.assign({}, obj);
+console.log(copy);  // { a: 1 }
+</pre>
+
+<h3 id="Deep_Clone" name="Deep_Clone">Заувага щодо створення глибокої копії</h3>
+
+<p>Для створення глибокої копії необхідно скористатись альтернативними методами, тому що метод <code>Object.assign()</code> копіює значення властивостей. Якщо значенням джерела буде посилання на об'єкт, метод скопіює лише значення посилання.</p>
+
+<pre class="brush: js notranslate">function test() {
+  'use strict';
+
+  let obj1 = { a: 0 , b: { c: 0}};
+  let obj2 = Object.assign({}, obj1);
+  console.log(JSON.stringify(obj2));  // { a: 0, b: { c: 0}}
+
+  obj1.a = 1;
+  console.log(JSON.stringify(obj1));  // { a: 1, b: { c: 0}}
+  console.log(JSON.stringify(obj2));  // { a: 0, b: { c: 0}}
+
+  obj2.a = 2;
+  console.log(JSON.stringify(obj1));  // { a: 1, b: { c: 0}}
+  console.log(JSON.stringify(obj2));  // { a: 2, b: { c: 0}}
+
+  obj2.b.c = 3;
+  console.log(JSON.stringify(obj1));  // { a: 1, b: { c: 3}}
+  console.log(JSON.stringify(obj2));  // { a: 2, b: { c: 3}}
+
+  // Глибока копія
+  obj1 = { a: 0 , b: { c: 0}};
+  let obj3 = JSON.parse(JSON.stringify(obj1));
+  obj1.a = 4;
+  obj1.b.c = 4;
+  console.log(JSON.stringify(obj3));  // { a: 0, b: { c: 0}}
+}
+
+test();</pre>
+
+<h3 id="Злиття_обєктів">Злиття об'єктів</h3>
+
+<pre class="brush: js notranslate">const o1 = { a: 1 };
+const o2 = { b: 2 };
+const o3 = { c: 3 };
+
+const obj = Object.assign(o1, o2, o3);
+
+console.log(obj);  // { a: 1, b: 2, c: 3 }
+console.log(o1);   // { a: 1, b: 2, c: 3 }, змінено сам цільовий об'єкт</pre>
+
+<h3 id="Злиття_обєктів_з_однаковими_властивостями">Злиття об'єктів з однаковими властивостями</h3>
+
+<pre class="brush: js notranslate">const o1 = { a: 1, b: 1, c: 1 };
+const o2 = { b: 2, c: 2 };
+const o3 = { c: 3 };
+
+const obj = Object.assign({}, o1, o2, o3);
+console.log(obj);  // { a: 1, b: 2, c: 3 }</pre>
+
+<p>Властивості перезаписуються однойменними властивостями інших об'єктів, що стоять далі в списку параметрів.</p>
+
+<h3 id="Копіювання_символьних_властивостей">Копіювання символьних властивостей</h3>
+
+<pre class="brush: js notranslate">const o1 = { a: 1 };
+const o2 = { [Symbol('foo')]: 2 };
+
+const obj = Object.assign({}, o1, o2);
+console.log(obj);  // { a : 1, [Symbol("foo")]: 2 }
+Object.getOwnPropertySymbols(obj);  // [Symbol(foo)]
+</pre>
+
+<h3 id="Властивості_з_ланцюжка_прототипів_та_неперелічувані_властивості_скопіювати_не_можна">Властивості з ланцюжка прототипів та неперелічувані властивості скопіювати не можна</h3>
+
+<pre class="brush: js notranslate">const obj = Object.create({ foo: 1 }, { // властивість foo належить до ланцюжка прототипів об'єкта obj
+  bar: {
+    value: 2  // bar є неперелічуваною властивістю
+  },
+  baz: {
+    value: 3,
+    enumerable: true  // baz є перелічуваною особистою властивістю
+  }
+});
+
+const copy = Object.assign({}, obj);
+console.log(copy);  // { baz: 3 }
+</pre>
+
+<h3 id="Прості_величини_буде_загорнуто_у_обєкти">Прості величини буде загорнуто у об'єкти</h3>
+
+<pre class="brush: js notranslate">const v1 = 'абв';
+const v2 = true;
+const v3 = 10;
+const v4 = Symbol('foo');
+
+const obj = Object.assign({}, v1, null, v2, undefined, v3, v4);
+// Прості величини будуть загорнуті, null та undefined ігноруються.
+// Зауважте, лише рядкові обгортки можуть мати особисті неперелічувані властивості.
+console.log(obj); // { "0": "а", "1": "б", "2": "в" }
+</pre>
+
+<h3 id="Винятки_переривають_процес_копіювання">Винятки переривають процес копіювання</h3>
+
+<pre class="brush: js notranslate">const target = Object.defineProperty({}, 'foo', {
+  value: 1,
+  writable: false
+}); // Властивість target.foo доступна лише для читання
+
+Object.assign(target, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz: 4 });
+// TypeError: "foo" is read-only
+// Викидається виняток під час присвоювання target.foo
+
+console.log(target.bar);   // 2, перше джерело було успішно скопійовано
+console.log(target.foo2);  // 3, першу властивість другого джерела було успішно скопійовано
+console.log(target.foo);   // 1, тут трапилась помилка
+console.log(target.foo3);  // undefined, метод assign завершився, властивість foo3 не буде скопійована
+console.log(target.baz);   // undefined, третє джерело також не буде скопійоване
+</pre>
+
+<h3 id="Копіювання_аксесорів">Копіювання аксесорів</h3>
+
+<pre class="brush: js notranslate">const obj = {
+  foo: 1,
+  get bar() {
+    return 2;
+  }
+};
+
+let copy = Object.assign({}, obj);
+console.log(copy);
+// { foo: 1, bar: 2 }, значенням copy.bar буде значення, що поверне геттер obj.bar
+
+// Ця функція присвоювання повністю скопіює дескриптори
+function completeAssign(target, ...sources) {
+  sources.forEach(source =&gt; {
+    let descriptors = Object.keys(source).reduce((descriptors, key) =&gt; {
+      descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
+      return descriptors;
+    }, {});
+    // За замовчуванням, метод Object.assign копіює перелічувані властивості типу Symbol також
+    Object.getOwnPropertySymbols(source).forEach(sym =&gt; {
+      let descriptor = Object.getOwnPropertyDescriptor(source, sym);
+      if (descriptor.enumerable) {
+        descriptors[sym] = descriptor;
+      }
+    });
+    Object.defineProperties(target, descriptors);
+  });
+  return target;
+}
+
+var copy = completeAssign({}, obj);
+console.log(copy);
+// { foo:1, get bar() { return 2 } }
+</pre>
+
+<h2 id="Запасний_варіант_поліфіл">Запасний варіант (поліфіл)</h2>
+
+<p>Наведений {{Glossary("Polyfill", "поліфіл")}} не підтримує символьних властивостей, позаяк ES5 не має такого типу:</p>
+
+<pre class="brush: js notranslate">if (typeof Object.assign != 'function') {
+  // Має бути writable: true, enumerable: false, configurable: true
+  Object.defineProperty(Object, "assign", {
+    value: function assign(target, varArgs) { // .length функції дорівнює 2
+      'use strict';
+      if (target == null || target === undefined) {
+        throw new TypeError('Cannot convert undefined or null to object');
+      }
+
+      var to = Object(target);
+
+      for (var index = 1; index &lt; arguments.length; index++) {
+        var nextSource = arguments[index];
+
+        if (nextSource != null &amp;&amp; nextSource !== undefined) {
+          for (var nextKey in nextSource) {
+            // Запобігає помилок, коли hasOwnProperty заміщено
+            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
+              to[nextKey] = nextSource[nextKey];
+            }
+          }
+        }
+      }
+      return to;
+     },
+     writable: true,
+     configurable: true
+   });
+ }
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.assign', 'Object.assign')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Object.assign")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperties()")}}</li>
+ <li><a href="/uk/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Перелічуваність та належність властивостей</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals">Розклад у об'єктних літералах</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/constructor/index.html b/files/uk/web/javascript/reference/global_objects/object/constructor/index.html
new file mode 100644
index 0000000000..ef2362cdec
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/constructor/index.html
@@ -0,0 +1,237 @@
+---
+title: Object.prototype.constructor
+slug: Web/JavaScript/Reference/Global_Objects/Object/constructor
+tags:
+  - JavaScript
+  - Object
+  - Властивість
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/constructor
+---
+<div>{{JSRef}}</div>
+
+<p>Повертає посилання на функцію-конструктор {{jsxref("Object", "об'єкта")}}, що створила екземпляр об'єкта. Зауважте, що значення цієї властивості є посиланням на саму функцію, а не рядком, що містить ім'я функції. Значення, доступне лише для читання, мають лише примітивні значення, як то <code>1</code>, <code>true</code> або <code>"test"</code>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Усі об'єкти (за виключенням об'єктів, створених через <code>Object.create(null)</code>) матимуть властивість <code>constructor</code>. Об'єкти, створені без явного використання функції-конструктора (тобто, об'єктними та масивними літералами), матимуть властивість <code>constructor</code>, що вказує на конструктор фундаментального об'єкта для цього об'єкта.</p>
+
+<pre class="brush: js">var o = {};
+o.constructor === Object; // true
+
+var o = new Object;
+o.constructor === Object; // true
+
+var a = [];
+a.constructor === Array; // true
+
+var a = new Array;
+a.constructor === Array; // true
+
+var n = new Number(3);
+n.constructor === Number; // true</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Відображення_конструктора_об'єкта">Відображення конструктора об'єкта</h3>
+
+<p>Наступний приклад створює конструктор <code>Tree</code> та об'єкт цього типу, <code>theTree</code>. Далі приклад демонструє властивість <code>constructor</code> об'єкта <code>theTree</code>.</p>
+
+<pre class="brush: js">function Tree(name) {
+  this.name = name;
+}
+
+var theTree = new Tree('Redwood');
+console.log('theTree.constructor дорівнює ' + theTree.constructor);
+</pre>
+
+<p>Цей приклад виведе наступний результат:</p>
+
+<pre class="brush: js">theTree.constructor дорівнює function Tree(name) {
+  this.name = name;
+}
+</pre>
+
+<h3 id="Зміна_конструктора_об'єкта">Зміна конструктора об'єкта</h3>
+
+<p>Наступний приклад покаже як можна змінити конструктор загальних об'єктів. Тільки <code>true</code>, <code>1</code> та <code>"test"</code> не зміняться, оскілки їхні конструктори доступні лише для читання. Цей приклад демонструє, що не завжди безпечно покладатися на властивість об'єкта <code>constructor</code>.</p>
+
+<pre class="brush:js">function Type () {}
+
+var types = [
+  new Array(),
+  [],
+  new Boolean(),
+  true,             // лишається незмінним
+  new Date(),
+  new Error(),
+  new Function(),
+  function () {},
+  Math,
+  new Number(),
+  1,                // лишається незмінним
+  new Object(),
+  {},
+  new RegExp(),
+  /(?:)/,
+  new String(),
+  'test'            // лишається незмінним
+];
+
+for (var i = 0; i &lt; types.length; i++) {
+  types[i].constructor = Type;
+  types[i] = [types[i].constructor, types[i] instanceof Type, types[i].toString()];
+}
+
+console.log(types.join('\n'));
+</pre>
+
+<p>Цей приклад виведе наступний результат (коментарі додані для довідки):</p>
+
+<pre class="brush: js">function Type() {},false,                                     // new Array()
+function Type() {},false,                                     // []
+function Type() {},false,false                                // new Boolean()
+function Boolean() {
+    [native code]
+},false,true                                                  // true
+function Type() {},false,Mon Sep 01 2014 16:03:49 GMT+0600    // new Date()
+function Type() {},false,Error                                // new Error()
+function Type() {},false,function anonymous() {
+
+}                                                             // new Function()
+function Type() {},false,function () {}                       // function () {}
+function Type() {},false,[object Math]                        // Math
+function Type() {},false,0                                    // new Number()
+function Number() {
+    [native code]
+},false,1                                                     // 1
+function Type() {},false,[object Object]                      // new Object()
+function Type() {},false,[object Object]                      // {}
+function Type() {},false,/(?:)/                               // new Regexp()
+function Type() {},false,/(?:)/                               // /(?:)/
+function Type() {},false,                                     // new String()
+function String() {
+    [native code]
+},false,test</pre>
+
+<h3 id="Зміна_конструктора_функції">Зміна конструктора функції</h3>
+
+<p>Переважно ця властивість використовується для визначення функції як <strong>функції-конструктора</strong> з подальшим викликом її з оператором <strong>new</strong> та наслідуванням через ланцюжок прототипів.</p>
+
+<pre class="brush: js">function Parent() {}
+Parent.prototype.parentMethod = function parentMethod() {};
+
+function Child() {}
+Child.prototype = Object.create(Parent.prototype); // перевизначення дочірнього прототипу на прототип Parent
+
+Child.prototype.constructor = Child; // повернення початкового конструктора прототипу Child</pre>
+
+<p>Але коли нам потрібно виконувати цей останній рядок? Нажаль, відповідь - залежить від обставин.</p>
+
+<p>Спробуємо визначити випадки, коли переприсвоєння початкового конструктора зіграє важливу роль, а коли воно стане додатковим непотрібним рядком коду.</p>
+
+<p>Візьмемо наступний випадок: об'єкт має метод <strong>create</strong> для створення самого себе.</p>
+
+<pre class="brush: js">function Parent() {};
+function CreatedConstructor() {}
+
+CreatedConstructor.prototype = Object.create(Parent.prototype);
+
+CreatedConstructor.prototype.create = function create() {
+  return new this.constructor();
+}
+
+new CreatedConstructor().create().create(); // TypeError undefined is not a function, оскільки constructor === Parent</pre>
+
+<p>У наведеному вище прикладі виняток виникне тому, що конструктор посилається на Parent.</p>
+
+<p>Щоб уникнути цього, просто призначте потрібний конструктор, який ви збираєтесь використовувати.</p>
+
+<pre class="brush: js">function Parent() {};
+function CreatedConstructor() {}
+
+CreatedConstructor.prototype = Object.create(Parent.prototype);
+CreatedConstructor.prototype.constructor = CreatedConstructor; // призначте конструктор, який будете використовувати
+
+CreatedConstructor.prototype.create = function create() {
+  return new this.constructor();
+}
+
+new CreatedConstructor().create().create(); // так непогано</pre>
+
+<p>Гаразд, тепер зрозуміло, чому зміна конструктора може бути досить корисною.</p>
+
+<p>Розглянемо інший випадок.</p>
+
+<pre class="brush: js">function ParentWithStatic() {}
+
+ParentWithStatic.startPosition = { x: 0, y:0 };
+ParentWithStatic.getStartPosition = function getStartPosition() {
+  return this.startPosition;
+}
+
+function Child(x, y) {
+  this.position = {
+    x: x,
+    y: y
+  };
+}
+
+Child.prototype = Object.create(ParentWithStatic.prototype);
+Child.prototype.constructor = Child;
+
+Child.prototype.getOffsetByInitialPosition = function getOffsetByInitialPosition() {
+  var position = this.position;
+  var startPosition = this.constructor.getStartPosition(); // error undefined is not a function, оскільки конструктор - Child
+
+  return {
+    offsetX: startPosition.x - position.x,
+    offsetY: startPosition.y - position.y
+  }
+};</pre>
+
+<p>В цьому прикладі нам треба залишити батьківський конструктор, щоб все працювало як слід.</p>
+
+<p><strong>Висновок</strong>: ручна зміна або встановлення конструктора може призвести до різноманітних та іноді заплутаних наслідків. Щоб запобігти цьому, визначте роль конструктора у кожному конкретному випадку. В більшості випадків конструктор не використовується, і в перепризначенні немає необхідності.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.1', 'Object.prototype.constructor')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.1.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Object.constructor")}}</p>
+
+<div id="compat-mobile"></div>
diff --git a/files/uk/web/javascript/reference/global_objects/object/count/index.html b/files/uk/web/javascript/reference/global_objects/object/count/index.html
new file mode 100644
index 0000000000..67940e270a
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/count/index.html
@@ -0,0 +1,44 @@
+---
+title: Object.prototype.__count__
+slug: Web/JavaScript/Reference/Global_Objects/Object/count
+tags:
+  - JavaScript
+  - Object
+  - Властивість
+  - застаріла
+  - нестандартна
+translation_of: Archive/Web/JavaScript/Object.count
+---
+<div>{{JSRef}}{{Non-standard_Header}}{{obsolete_header("gecko2")}}</div>
+
+<p>Властивість <strong><code>__count__</code></strong> містила кількість перелічуваних властивостей об'єкта, але була прибрана.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>obj</var>.__count__</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">{ 1: 1 }.__count__              // 1
+[].__count__                    // 0
+[1].__count__                   // 1
+[1, /* hole */, 2, 3].__count__ // 3
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Не є частиною жодних специфікацій.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.count")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a class="external" href="http://whereswalden.com/2010/04/06/more-changes-coming-to-spidermonkey-the-magical-__count__-property-of-objects-is-being-removed/">[Blog post] More changes coming to SpiderMonkey: the magical __count__ property is being removed</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/create/index.html b/files/uk/web/javascript/reference/global_objects/object/create/index.html
new file mode 100644
index 0000000000..189aba3ebb
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/create/index.html
@@ -0,0 +1,406 @@
+---
+title: Object.create()
+slug: Web/JavaScript/Reference/Global_Objects/Object/create
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - 'Null'
+  - Object
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/create
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>Object.create()</strong></code> створює новий об'єкт, використовуючи існуючий об'єкт як прототип для новоствореного об'єкта.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-create.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Object.create(<var>proto</var>, [<var>propertiesObject</var>])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>proto</var></code></dt>
+ <dd>Об'єкт, що має бути прототипом для новоствореного об'єкта.</dd>
+ <dt><code><var>propertiesObject</var></code><var> </var>{{Optional_inline}}</dt>
+ <dd>Якщо вказаний та не дорівнює {{jsxref("undefined")}}, об'єкт, чиї власні перелічувані властивості (тобто, властивості, визначені на самому об'єкті, а <em>не</em> перелічувані властивості, отримані через ланцюжок прототипів) визначають дескриптори властивостей, що мають бути додані до новоствореного об'єкта, з відповідними іменами властивостей. Ці властивості відповідають другому аргументу {{jsxref("Object.defineProperties()")}}.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Новий об'єкт з зазначеним прототипом та властивостями.</p>
+
+<h3 id="Винятки">Винятки</h3>
+
+<p>Виняток {{jsxref("TypeError")}}, якщо параметр <code>propertiesObject</code> дорівнює {{jsxref("null")}} або це об'єкт, що не є обгорткою простого типу.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Класичне_наслідування_через_Object.create">Класичне наслідування через <code>Object.create()</code></h3>
+
+<p>Нижче наведено приклад використання <code>Object.create()</code> для отримання класичного наслідування. Це приклад одиночного наслідування, єдиного, яке підтримує JavaScript.</p>
+
+<pre class="brush: js">// Shape - батьківський клас
+function Shape() {
+  this.x = 0;
+  this.y = 0;
+}
+
+// метод батьківського класу
+Shape.prototype.move = function(x, y) {
+  this.x += x;
+  this.y += y;
+  console.info('Фігуру переміщено.');
+};
+
+// Rectangle - дочірній клас
+function Rectangle() {
+  Shape.call(this); // виклик батьківського конструктора.
+}
+
+// дочірній клас розширює батьківській клас
+Rectangle.prototype = Object.create(Shape.prototype);
+
+//Якщо ви не призначите Object.prototype.constructor значення Rectangle,
+//він візьме prototype.constructor класу Shape (батьківського).
+//Щоб уникнути цього, ми призначаємо prototype.constructor значення Rectangle (дочірній).
+Rectangle.prototype.constructor = Rectangle;
+
+var rect = new Rectangle();
+
+console.log('Чи є rect екземпляром Rectangle?', rect instanceof Rectangle); // true
+console.log('Чи є rect екземпляром Shape?', rect instanceof Shape); // true
+rect.move(1, 1); // Виводить 'Фігуру переміщено.'
+</pre>
+
+<p>Якщо ви бажаєте успадкуватись від кількох об'єктів, можна використати домішки.</p>
+
+<pre class="brush: js">function MyClass() {
+  SuperClass.call(this);
+  OtherSuperClass.call(this);
+}
+
+// успадкувати від одного класу
+MyClass.prototype = Object.create(SuperClass.prototype);
+// змішати з іншим
+Object.assign(MyClass.prototype, OtherSuperClass.prototype);
+// перепризначити конструктор
+MyClass.prototype.constructor = MyClass;
+
+MyClass.prototype.myMethod = function() {
+  // зробити щось
+};
+</pre>
+
+<p>Метод {{jsxref("Object.assign()")}} копіює властивості з прототипу OtherSuperClass у прототип MyClass, роблячи їх доступними для усіх екземплярів MyClass. <code>Object.assign()</code> був запроваджений у ES2015 і <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Запасний_варіант_(поліфіл)">може бути відтворений поліфілом</a>. Якщо необхідна підтримка більш старих переглядачів, можна використати <code><a href="https://api.jquery.com/jQuery.extend/">jQuery.extend()</a></code> або <code><a href="https://lodash.com/docs/#assign">_.assign()</a></code>.</p>
+
+<h3 id="Використання_аргументу_propertiesObject_у_Object.create">Використання аргументу <code>propertiesObject</code> у <code>Object.create()</code></h3>
+
+<pre class="brush: js">var o;
+
+// створити об'єкт з прототипом null
+o = Object.create(null);
+
+
+o = {};
+// є еквівалентом:
+o = Object.create(Object.prototype);
+
+
+// У цьому прикладі ми створюємо об'єкт з парою
+// зразкових властивостей. (Зауважте, що другий параметр
+// встановлює ключі у відповідності до *дескрипторів властивості*.)
+o = Object.create(Object.prototype, {
+  // foo - це звичайна властивість-значення
+  foo: {
+    writable: true,
+    configurable: true,
+    value: 'hello'
+  },
+  // bar - це властивість-аксесор (має гетер та сетер)
+  bar: {
+    configurable: false,
+    get: function() { return 10; },
+    set: function(value) {
+      console.log('Призначення `o.bar` значення', value);
+    }
+/* з аксесорами ES2015 наш код може виглядати так
+    get() { return 10; },
+    set(value) {
+      console.log('Призначення `o.bar` значення', value);
+    } */
+  }
+});
+
+
+function Constructor() {}
+o = new Constructor();
+// є еквівалентом:
+o = Object.create(Constructor.prototype);
+// Звісно, якщо у функції Constructor присутній
+// код ініціалізації,
+// Object.create() не може його відобразити
+
+
+// Створити новий об'єкт, чиїм прототипом є новий, порожній
+// об'єкт, та додати єдину властивість 'p' зі значенням 42.
+o = Object.create({}, { p: { value: 42 } });
+
+// за замовчуванням властивості НЕДОСТУПНІ для запису,
+// переліку чи налаштування:
+o.p = 24;
+o.p;
+// 42
+
+o.q = 12;
+for (var prop in o) {
+  console.log(prop);
+}
+// 'q'
+
+delete o.p;
+// false
+
+// щоб визначити властивість у ES3
+o2 = Object.create({}, {
+  p: {
+    value: 42,
+    writable: true,
+    enumerable: true,
+    configurable: true
+  }
+});
+/* є еквівалентом:
+o2 = Object.create({p: 42}) */
+
+</pre>
+
+<h2 id="Користувацькі_та_нульові_обєкти">Користувацькі та нульові об'єкти</h2>
+
+<p>Новий об'єкт, створений на основі користувацького об'єкта (особливо об'єкт, створений на основі об'єкта <code>null</code>, який по суті є користувацьким об'єктом, що НЕ МАЄ членів), може поводитись неочікувано. Особливо під час налагодження, оскільки звичайні функції утиліт для перетворення/видалення об'єктних властивостей можуть генерувати помилки або просто втрачати інформацію (особливо якщо використовують перехоплювачі помилок, що ігнорують помилки). Наприклад, ось два об'єкти:</p>
+
+<pre class="brush: js">oco = Object.create( {} );   // створити нормальний об'єкт
+ocn = Object.create( null ); // створити "нульовий" об'єкт
+
+&gt; console.log(oco) // {} -- Виглядає нормально
+&gt; console.log(ocn) // {} -- Поки що теж виглядає нормально
+
+oco.p = 1; // створити просту властивість на нормальному об'єкті
+ocn.p = 0; // створити просту властивість на "нульовому" об'єкті
+
+&gt; console.log(oco) // {p: 1} -- Досі виглядає нормально
+&gt; console.log(ocn) // {p: 0} -- Теж виглядає нормально. АЛЕ СТРИВАЙТЕ...
+</pre>
+
+<p><br>
+ Як показано вище, поки що все виглядає нормальним. Однак, при спробі використати ці об'єкти, їхні відмінності швидко стають очевидними:</p>
+
+<pre class="brush: js">&gt; "oco is: " + oco // виводить "oco is: [object Object]"
+
+&gt; "ocn is: " + ocn // викидає помилку: Cannot convert object to primitive value
+</pre>
+
+<p>Перевірка лише декількох з багатьох базових вбудованих функцій більш чітко демонструє величину проблеми:</p>
+
+<pre class="brush: js">&gt; alert(oco) // виводить [object Object]
+&gt; alert(ocn) // викидає помилку: Cannot convert object to primitive value
+
+&gt; oco.toString() // виводить [object Object]
+&gt; ocn.toString() // викидає помилку: ocn.toString is not a function
+
+&gt; oco.valueOf() // виводить {}
+&gt; ocn.valueOf() // викидає помилку: ocn.valueOf is not a function
+
+&gt; oco.hasOwnProperty("p") // виводить "true"
+&gt; ocn.hasOwnProperty("p") // викидає помилку: ocn.hasOwnProperty is not a function
+
+&gt; oco.constructor // виводить "Object() { [native code] }"
+&gt; ocn.constructor // виводить "undefined"
+</pre>
+
+<p><br>
+ Як вже сказано, ці відмінності можуть швидко зробити процес відлагодження навіть простих на вигляд проблем дуже заплутаним. Наприклад:</p>
+
+<p><em>Проста звичайна функція налагодження:</em></p>
+
+<pre class="brush: js">// вивести пари ключ-значення властивостей верхнього рівня наданого об'єкта
+function ShowProperties(obj){
+  for(var prop in obj){
+    console.log(prop + ": " + obj[prop] + "\n" )
+  }
+}</pre>
+
+<p><br>
+ <em>Не такі прості результати: (особливо якщо перехоплювач помилок сховав повідомлення про помилки)</em></p>
+
+<pre class="brush: js">ob={}; ob.po=oco; ob.pn=ocn; // створити складний об'єкт з наданих вище тестових об'єктів в якості значень властивостей
+
+&gt; ShowProperties( ob ) // вивести властивості верхнього рівня
+- po: [object Object]
+- Error: Cannot convert object to primitive value
+
+Зауважте, що виводиться тільки перша властивість.
+</pre>
+
+<p><br>
+ <em>(Але якщо такий самий об'єкт був просто створений в іншому порядку -- принаймні, в деяких реалізаціях...)</em></p>
+
+<pre class="brush: js">ob={}; ob.pn=ocn; ob.po=oco; // створити знову такий самий об'єкт, але створити ті самі властивості в іншому порядку
+
+&gt; ShowProperties( ob ) // вивести властивості верхнього рівня
+- Error: Cannot convert object to primitive value
+
+Зауважте, що жодна властивість не виводиться.</pre>
+
+<p>Зауважте, що такий відмінний порядок може виникнути статично, через відмінний зафіксований код, як ось тут, а може й динамічно, через порядок, в якому виконуються під час запуску гілки коду з додаванням властивостей, що залежить від вхідних даних та/або випадкових змінних. Знову ж таки, реальний порядок перебору не гарантований, в якому б порядку не додавалися члени об'єкта.</p>
+
+<h4 id="Деякі_рішення_що_не_працюють">Деякі рішення, що не працюють</h4>
+
+<p>Гарне вирішення проблеми відсутніх об'єктних методів не завжди є очевидним.</p>
+
+<p>Пряме додавання відсутнього об'єктного метода зі стандартного об'єкта НЕ працює:</p>
+
+<pre class="brush: js">ocn = Object.create( null ); // створити "нульовий" об'єкт (такий самий, як і раніше)
+
+ocn.toString = Object.toString; // оскільки йому бракує методу, призначити його прямо зі стандартного об'єкта
+
+<span style="letter-spacing: -0.00333rem;">&gt; ocn.toString // виводить "toString() { [native code] }" -- схоже, що відсутній метод тепер додано</span>
+&gt; ocn.toString == Object.toString // виводить "true" -- схоже, це той самий метод, що й у стандартному об'єкті
+
+&gt; ocn.toString() // error: Function.prototype.toString requires that 'this' be a Function
+</pre>
+
+<p><br>
+ Пряме додавання відсутнього об'єктного метода у "прототип" нового об'єкта також не працює, оскільки у нового об'єкта немає справжнього прототипа (що й є справжньою причиною УСІХ цих проблем), і його не можна додати <strong>прямо</strong>:</p>
+
+<pre class="brush: js">ocn = Object.create( null ); // створити "нульовий" об'єкт (такий самий, як і раніше)
+
+ocn.prototype.toString = Object.toString; // Error: Cannot set property 'toString' of undefined
+
+ocn.prototype = {};                       // спробувати створити прототип
+ocn.prototype.toString = Object.toString; // оскільки об'єкту бракує методу, призначити його прямо зі стандартного об'єкта<span style="letter-spacing: -0.00333rem;">
+
+&gt; ocn.toString() // error: ocn.toString is not a function</span>
+</pre>
+
+<p><br>
+ Додавання відсутнього об'єктного метода використанням стандартного об'єкта в якості прототипа нового об'єкта також не працює:</p>
+
+<pre class="brush: js">ocn = Object.create( null );        // створити "нульовий" об'єкт (такий самий, як і раніше)
+Object.setPrototypeOf(ocn, Object); // встановити значенням прототипу нового об'єкта стандартний об'єкт
+
+&gt; ocn.toString() // error: Function.prototype.toString requires that 'this' be a Function
+</pre>
+
+<h4 id="Деякі_вдалі_рішення">Деякі вдалі рішення</h4>
+
+<p>Як вже сказано, пряме додавання відсутнього об'єктного методу зі <strong>стандартного об'єкта </strong>НЕ працює. Однак, пряме додавання <strong>загального</strong> метода ПРАЦЮЄ:</p>
+
+<pre class="brush: js">ocn = Object.create( null ); // створити "нульовий" об'єкт (такий самий, як і раніше)
+
+ocn.toString = toString; // оскільки об'єкту бракує методу, призначити його прямо з загальної версії
+
+&gt; ocn.toString() // виводить "[object Object]"
+&gt; "ocn is: " + ocn // виводить "ocn is: [object Object]"
+
+
+ob={}; ob.pn=ocn; ob.po=oco; // створити складний об'єкт (такий самий, як і раніше)
+
+&gt; ShowProperties(ob) // вивести властивості верхнього рівня
+- po: [object Object]
+- pn: [object Object]
+</pre>
+
+<p>Однак, встановлення загального <strong>прототипу</strong> прототипом нового об'єкта працює навіть краще:</p>
+
+<pre class="brush: js">ocn = Object.create( null );                  // створити "нульовий" об'єкт (такий самий, як і раніше)
+Object.setPrototypeOf(ocn, Object.prototype); // встановити значенням прототипу нового об'єкта "загальний" об'єкт (НЕ стандартний об'єкт)
+</pre>
+
+<p><em>(На додачу до функцій, пов'язаних з рядками, що наведені вище, це також додає:)</em></p>
+
+<pre class="brush: js">&gt; ocn.valueOf() // виводить {}
+&gt; ocn.hasOwnProperty("x") // виводить "false"
+&gt; ocn.constructor // виводить "Object() { [native code] }"
+
+// ...та вся решта властивостей та методів Object.prototype.
+</pre>
+
+<p>Як бачимо, об'єкти, змінені таким чином, тепер виглядають дуже схожими на звичайні об'єкти.</p>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Цей поліфіл покриває основний сценарій використання, а саме, створення нового об'єкта, для якого був обраний прототип, але не бере до уваги другий аргумент.</p>
+
+<p>Зауважте, що в той час як використання <code>null</code> в якості <code>[[Prototype]]</code> підтримується в реальному методі ES5 <code>Object.create</code>, цей поліфіл не може це підтримувати через обмеження, притаманне версіям ECMAScript нижче 5.</p>
+
+<pre class="brush: js"> if (typeof Object.create !== "function") {
+    Object.create = function (proto, propertiesObject) {
+        if (typeof proto !== 'object' &amp;&amp; typeof proto !== 'function') {
+            throw new TypeError("Прототипом об'єкта може бути тільки об'єкт: " + proto);
+        } else if (proto === null) {
+            throw new Error("Реалізація Object.create у цьому браузері є шимом та не підтримує 'null' в якості першого аргументу.");
+        }
+
+        if (typeof propertiesObject != 'undefined') {
+            throw new Error("Реалізація Object.create у цьому браузері є шимом та не підтримує другий аргумент.");
+        }
+
+        function F() {}
+        F.prototype = proto;
+
+        return new F();
+    };
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.5', 'Object.create')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-object.create', 'Object.create')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.create', 'Object.create')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.create")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.defineProperties()")}}</li>
+ <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
+ <li>{{jsxref("Reflect.construct()")}}</li>
+ <li>John Resig's post on <a href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf()</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/defineproperties/index.html b/files/uk/web/javascript/reference/global_objects/object/defineproperties/index.html
new file mode 100644
index 0000000000..342fea9106
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/defineproperties/index.html
@@ -0,0 +1,198 @@
+---
+title: Object.defineProperties()
+slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperties
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - Object
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperties
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>Object.defineProperties()</strong></code> визначає нові або модифікує існуючі властивості прямо на об'єкті, вертаючи цей об'єкт.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-defineproperties.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Object.defineProperties(<var>obj</var>, <var>props</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>obj</var></code></dt>
+ <dd>Об'єкт, на якому визначаються чи модифікуються властивості.</dd>
+ <dt><code><var>props</var></code></dt>
+ <dd>Об'єкт, чиї ключі відображають імена властивостей, які треба визначити чи модифікувати, і чиї значення є об'єктами, що описують ці властивості. Кожне значення у <code>props</code> має бути або дескриптором даних, або дескриптором доступу; воно не може бути обома (детальніше читайте у {{jsxref("Object.defineProperty()")}}).</dd>
+ <dd>Дескриптори даних та дескриптори доступу можуть мати наступні необов'язкові ключі:</dd>
+ <dd>
+ <dl>
+  <dt><code>configurable</code></dt>
+  <dd>Дорівнює <code>true</code> тоді й тільки тоді, коли тип цього дескриптора властивості може бути змінений, і якщо властивість може бути видалена з відповідного об'єкта.<br>
+  <strong>За замовчуванням <code>false</code>.</strong></dd>
+  <dt><code>enumerable</code></dt>
+  <dd>Дорівнює <code>true</code> тоді й тільки тоді, коли ця властивість відображається під час переліку властивостей відповідного об'єкта.<br>
+  <strong>За замовчуванням <code>false</code>.</strong></dd>
+ </dl>
+
+ <p>Дескриптор даних також має наступні необов'язкові ключі:</p>
+
+ <dl>
+  <dt><code>value</code></dt>
+  <dd>Значення, пов'язане з властивістю. Може бути будь-яким з чинних значень JavaScript (числом, об'єктом, функцією і т.д.).<br>
+  <strong>За замовчуванням {{jsxref("undefined")}}.</strong></dd>
+  <dt><code>writable</code></dt>
+  <dd>Дорівнює <code>true</code> тоді й тільки тоді, коли значення, пов'язане з властивістю, може бути змінене {{jsxref("Operators/Оператори_присвоєння", "оператором присвоєння", "", 1)}}.<br>
+  <strong>За замовчуванням <code>false</code>.</strong></dd>
+ </dl>
+
+ <p>Дескриптор доступу також має наступні необов'язкові ключі:</p>
+
+ <dl>
+  <dt><code>get</code></dt>
+  <dd>Функція, що виступає властивістю-гетером, або {{jsxref("undefined")}}, якщо гетера немає. Значення, що повертає функція, буде використане як значення властивості.<br>
+  <strong>За замовчуванням {{jsxref("undefined")}}.</strong></dd>
+  <dt><code>set</code></dt>
+  <dd>Функція, що виступає властивістю-сетером, або {{jsxref("undefined")}}, якщо сетера немає. Функція буде отримувати єдиним аргументом нове значення, що призначається властивості.<br>
+  <strong>За замовчуванням {{jsxref("undefined")}}.</strong></dd>
+ </dl>
+
+ <p>Якщо в дескриптора немає жодного з ключів <code>value</code>, <code>writable</code>, <code>get</code> або <code>set</code>, він сприймається як дескриптор даних. Якщо дескриптор має і <code>value</code> або <code>writable</code>, і <code>get</code> або <code>set</code>, викидається виняток.</p>
+ </dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Об'єкт, переданий у функцію.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>Object.defineProperties</code>, по суті, визначає всі властивості у відповідності до власних перелічуваних властивостей <code>props</code> на об'єкті <code>obj</code>.</p>
+
+<h2 id="Приклад">Приклад</h2>
+
+<pre class="brush: js">var obj = {};
+Object.defineProperties(obj, {
+  'property1': {
+    value: true,
+    writable: true
+  },
+  'property2': {
+    value: 'Привіт',
+    writable: false
+  }
+  // і т.д., і т.п.
+});
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>За умови незміненого середовища виконання, де всі імена та властивості посилаються на свої первинні значення, метод <code>Object.defineProperties</code> є майже повністю еквівалентним (зауважте коментар у <code>isCallable</code>) наступній реімплементації у JavaScript:</p>
+
+<pre class="brush: js;highlight:[8]">function defineProperties(obj, properties) {
+  function convertToDescriptor(desc) {
+    function hasProperty(obj, prop) {
+      return Object.prototype.hasOwnProperty.call(obj, prop);
+    }
+
+    function isCallable(v) {
+      // Увага: відредагуйте за необхідності, якщо інші значення, крім функцій, доступні для виклику.
+      return typeof v === 'function';
+    }
+
+    if (typeof desc !== 'object' || desc === null)
+      throw new TypeError('bad desc');
+
+    var d = {};
+
+    if (hasProperty(desc, 'enumerable'))
+      d.enumerable = !!desc.enumerable;
+    if (hasProperty(desc, 'configurable'))
+      d.configurable = !!desc.configurable;
+    if (hasProperty(desc, 'value'))
+      d.value = desc.value;
+    if (hasProperty(desc, 'writable'))
+      d.writable = !!desc.writable;
+    if (hasProperty(desc, 'get')) {
+      var g = desc.get;
+
+      if (!isCallable(g) &amp;&amp; typeof g !== 'undefined')
+        throw new TypeError('bad get');
+      d.get = g;
+    }
+    if (hasProperty(desc, 'set')) {
+      var s = desc.set;
+      if (!isCallable(s) &amp;&amp; typeof s !== 'undefined')
+        throw new TypeError('bad set');
+      d.set = s;
+    }
+
+    if (('get' in d || 'set' in d) &amp;&amp; ('value' in d || 'writable' in d))
+      throw new TypeError('identity-confused descriptor');
+
+    return d;
+  }
+
+  if (typeof obj !== 'object' || obj === null)
+    throw new TypeError('bad obj');
+
+  properties = Object(properties);
+
+  var keys = Object.keys(properties);
+  var descs = [];
+
+  for (var i = 0; i &lt; keys.length; i++)
+    descs.push([keys[i], convertToDescriptor(properties[keys[i]])]);
+
+  for (var i = 0; i &lt; descs.length; i++)
+    Object.defineProperty(obj, descs[i][0], descs[i][1]);
+
+  return obj;
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.defineproperties', 'Object.defineProperties')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.defineproperties', 'Object.defineProperties')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.7', 'Object.defineProperties')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.8.5</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Object.defineProperties")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li><a href="/uk/docs/Web/JavaScript/Перелічуваність_та_належність_властивостей">Перелічуваність та належність властивостей</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/defineproperty/index.html b/files/uk/web/javascript/reference/global_objects/object/defineproperty/index.html
new file mode 100644
index 0000000000..6e6907e958
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/defineproperty/index.html
@@ -0,0 +1,501 @@
+---
+title: Object.defineProperty()
+slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperty
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - Об'єкт
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperty
+---
+<div>{{JSRef}}</div>
+
+<p>Статичний метод <code><strong>Object.defineProperty()</strong></code> визначає нову властивість безпосередньо на об'єкті, або модифікує існуючу властивість на об'єкті, та повертає об'єкт.</p>
+
+<div class="blockIndicator note">
+<p><strong>Заувага:</strong> Цей метод викликається прямо на конструкторі {{jsxref("Object")}}, а не на екземплярі типу <code>Object</code>.</p>
+</div>
+
+<p>{{EmbedInteractiveExample("pages/js/object-defineproperty.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Object.defineProperty(<var>obj</var>, <var>prop</var>, <var>descriptor</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Об'єкт, на якому визначається властивість.</dd>
+ <dt><code>prop</code></dt>
+ <dd>Ім'я або {{jsxref("Symbol", "символ")}} властивості для визначення чи модифікації.</dd>
+ <dt><code>descriptor</code></dt>
+ <dd>Дескриптор для властивості, що модифікується чи визначається.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Об'єкт, що був переданий у функцію.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Цей метод дозволяє точно додавати чи модифікувати властивість об'єкту. Звичайне додавання властивості через призначення створює властивості, які з'являються під час переліку властивостей (цикл {{jsxref("Statements/for...in", "for...in")}} або метод {{jsxref("Object.keys")}}), чиї значення можуть бути змінені та можуть бути {{jsxref("Operators/delete", "видалені", "", 1)}}. Даний метод дозволяє змінити ці додаткові деталі у стані за замовчуванням. За замовчуванням, значення, додані за допомогою <code>Object.defineProperty()</code>, є незмінними.</p>
+
+<p>Дескриптори властивостей у об'єктах бувають двох основних видів: дескриптори даних та дескриптори доступу. <em>Дескриптор даних</em> - це властивість, що має значення, яке може бути або не бути доступне для запису. <em>Дескриптор доступу</em> -<dfn> це властивість, описана парою функцій </dfn>гетер-сетер. Дескриптор має бути одного з двох видів, і не може належати до обох.</p>
+
+<p>І дескриптори даних, і дескриптори доступу є об'єктами. Вони мають наступні необов'язкові ключі (Значення за замовчуванням у випадку визначення властивостей через Object.defineProperty()):</p>
+
+<dl>
+ <dt><code>configurable</code></dt>
+ <dd>Дорівнює <code>true</code> тоді й тільки тоді, коли тип цього дескриптора властивості може бути змінений, та якщо властивість може бути видалена з відповідного об'єкту.<br>
+ <strong>За замовчуванням <code>false</code>.</strong></dd>
+ <dt><code>enumerable</code></dt>
+ <dd>Дорівнює <code>true</code> тоді й тільки тоді, коли ця властивість з'являється під час переліку властивостей на відповідному об'єкті..<br>
+ <strong>За замовчуванням <code>false</code>.</strong></dd>
+</dl>
+
+<p>Дескриптор даних також має наступні необов'язкові ключі:</p>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Значення, пов'язане з властивістю. Може бути будь-яким з чинних значень JavaScript (числом, об'єктом, функцією і т. д.).<br>
+ <strong>За замовчуванням {{jsxref("undefined")}}.</strong></dd>
+ <dt><code>writable</code></dt>
+ <dd>Дорівнює <code>true</code> тоді й тільки тоді, коли значення, пов'язане з властивістю, може бути змінене за допомогою {{jsxref("Operators/Assignment_Operators", "оператора присвоєння", "", 1)}}.<br>
+ <strong>За замовчуванням <code>false</code>.</strong></dd>
+</dl>
+
+<p>Дескриптор доступу також має наступні необов'язкові ключі:</p>
+
+<dl>
+ <dt><code>get</code></dt>
+ <dd>Функція, що служить гетером властивості, або {{jsxref("undefined")}}, якщо гетера немає. Коли відбувається звернення до властивості, ця функція викликається без аргументів, а <code>this</code> присвоюється об'єкт, через який відбулось звернення до властивості (це може бути не той об'єкт, на якому властивість була визначена, через наслідування).<br>
+ <strong>За замовчуванням {{jsxref("undefined")}}.</strong></dd>
+ <dt><code>set</code></dt>
+ <dd>Функція, що служить сетером властивості, або {{jsxref("undefined")}}, якщо сетера немає. Коли властивості присвоюється значення, функція викликається з одним аргументом (значення, яке присвоюється), а <code>this</code> присвоюється об'єкт, через який відбувається присвоєння.<br>
+ <strong>За замовчуванням {{jsxref("undefined")}}.</strong></dd>
+</dl>
+
+<p>Якщо в дескриптора немає жодного з ключів <code>value</code>, <code>writable</code>, <code>get</code> або <code>set</code>, він сприймається як дескриптор даних. Якщо дескриптор має і <code>value</code> або <code>writable</code>, і <code>get</code> або <code>set</code>, викидається виняток.</p>
+
+<p>Майте на увазі, що ці атрибути не обов'язково є особистими властивостями дескриптора. Успадковані властивості також будуть враховуватись. Щоб впевнитись, що значення за замовчуванням збережуться, ви можете заморозити {{jsxref("Object.prototype")}} заздалегідь, явно вказуючи всі опції, або вказати {{jsxref("null")}} через {{jsxref("Object.create", "Object.create(null)")}}.</p>
+
+<pre class="brush: js">// використовуючи __proto__
+var obj = {};
+var descriptor = Object.create(null); // немає успадкованих властивостей
+// за замовчуванням недоступний для запису, переліку та налаштування
+descriptor.value = 'static';
+Object.defineProperty(obj, 'key', descriptor);
+
+// явно задані ключі
+Object.defineProperty(obj, 'key', {
+  enumerable: false,
+  configurable: false,
+  writable: false,
+  value: 'static'
+});
+
+// перероблення того самого об'єкта
+function withValue(value) {
+  var d = withValue.d || (
+    withValue.d = {
+      enumerable: false,
+      writable: false,
+      configurable: false,
+      value: null
+    }
+  );
+
+  // уникаємо дублювання операції присвоєння значення
+  if (d.value !== value) d.value = value;
+
+  return d;
+}
+// ... і ...
+Object.defineProperty(obj, 'key', withValue('static'));
+
+// якщо замороження доступне, воно запобігає додаванню або
+// видаленню властивостей прототипу об'єкта
+// (value, get, set, enumerable, writable, configurable)
+(Object.freeze || Object)(Object.prototype);</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Якщо хочете дізнатись, як використовувати метод <code>Object.defineProperty</code> з двійковими прапорами, дивіться <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">додаткові приклади</a>.</p>
+
+<h3 id="Створення_властивості">Створення властивості</h3>
+
+<p>Коли зазначеної властивості в об'єкті не існує, <code>Object.defineProperty()</code> створює нову властивість за описом. Поля можуть бути пропущені у дескрипторі, тоді для цих полів будуть задані значення за замовчуванням.</p>
+
+<pre class="brush: js">var o = {}; // Створює новий об'єкт
+
+// Приклад властивості об'єкта, доданої
+// за допомогою defineProperty з дескриптором даних
+Object.defineProperty(o, 'a', {
+  value: 37,
+  writable: true,
+  enumerable: true,
+  configurable: true
+});
+// Властивість 'а' існує в об'єкті o, її значення дорівнює 37
+
+// Приклад властивості об'єкта, доданої
+// за допомогою defineProperty з дескриптором доступу
+var bValue = 38;
+Object.defineProperty(o, 'b', {
+  get: function() { return bValue; },
+  set: function(newValue) { bValue = newValue; },
+  enumerable: true,
+  configurable: true
+});
+o.b; // 38
+// Властивість 'b' існує в об'єкті o, її значення дорівнює 38
+// Значення o.b тепер завжди ідентичне bValue,
+// якщо o.b не була перевизначена
+
+// Не можна змішувати обидва типи
+Object.defineProperty(o, 'conflict', {
+  value: 0x9f91102,
+  get: function() { return 0xdeadbeef; }
+});
+// викидає TypeError: value існує
+// тільки в дескрипторах даних,
+// get існує тільки в дескрипторах доступу</pre>
+
+<h3 id="Модифікація_властивості">Модифікація властивості</h3>
+
+<p>Коли властивість вже існує, <code>Object.defineProperty()</code> намагається модифікувати властивість згідно значень у дескрипторі та поточної конфігурації об'єкта. Якщо атрибут <code>configurable</code> старого дескриптора дорівнював <code>false</code>, властивість вважається недоступною для налаштування. Неможливо змінити жоден атрибут властивості-аксесора, недоступної для налаштування. Для властивості-значення можливо змінити значення, якщо властивість доступна для запису, також можливо змінити атрибут <code>writable</code> з <code>true</code> на <code>false</code>. Неможливо переключатись між типами властивостей, коли властивість недоступна для налаштування.</p>
+
+<p>Помилка {{jsxref("TypeError")}} викидається при спробах змінити атрибути властивості, недоступної для налаштування (окрім <code>value</code> та <code>writable</code>, якщо їх дозволено змінювати), крім випадку, коли поточне та нове значення однакові.</p>
+
+<h4 id="Атрибут_writable">Атрибут writable</h4>
+
+<p>Коли атрибут властивості <code>writable</code> встановлений у <code>false</code>, властивість вважається недоступною для запису. Їй не можна переприсвоїти значення.</p>
+
+<pre class="brush: js">var o = {}; // Створює новий об'єкт
+
+Object.defineProperty(o, 'a', {
+  value: 37,
+  writable: false
+});
+
+console.log(o.a); // виводить 37
+o.a = 25; // Помилка не викидається
+// (Викидалась би у строгому режимі,
+// навіть якщо значеня таке саме)
+console.log(o.a); // виводить 37. Присвоєння не спрацювало.
+
+// строгий режим
+(function() {
+  'use strict';
+  var o = {};
+  Object.defineProperty(o, 'b', {
+    value: 2,
+    writable: false
+  });
+  o.b = 3; // викидає TypeError: "b" доступна лише для читання
+  return o.b; // без попереднього рядка вертає 2
+}());</pre>
+
+<p class="brush: js">Як видно з прикладу, спроби запису у властивість, недоступну для запису, не змінюють її, але й не викидають помилки.</p>
+
+<h4 id="Атрибут_enumerable">Атрибут enumerable</h4>
+
+<p>Атрибут властивості <code>enumerable</code> визначає, чи буде властивість підхоплена методом {{jsxref("Object.assign()")}} або оператором <a href="/uk/docs/Web/JavaScript/Reference/Operators/Spread_syntax">розкладу</a>. Для не {{jsxref("Symbols", "символьних")}} властивостей він також визначає, чи буде властивість з'являтись у циклі {{jsxref("Statements/for...in", "for...in")}} та у {{jsxref("Object.keys()")}}, чи ні.</p>
+
+<pre class="brush: js">var o = {};
+Object.defineProperty(o, 'a', {
+  value: 1,
+  enumerable: true
+});
+Object.defineProperty(o, 'b', {
+  value: 2,
+  enumerable: false
+});
+Object.defineProperty(o, 'c', {
+  value: 3
+}); // enumerable за замовчуванням дорівнює false
+o.d = 4; // enumerable за замовчуванням дорівнює true,
+         // якщо властивість створюється через присвоєння
+Object.defineProperty(o, Symbol.for('e'), {
+  value: 5,
+  enumerable: true
+});
+Object.defineProperty(o, Symbol.for('f'), {
+  value: 6,
+  enumerable: false
+});
+
+for (var i in o) {
+  console.log(i);
+}
+// виводить 'a' та 'd' (у невизначеному порядку)
+
+Object.keys(o); // ['a', 'd']
+
+o.propertyIsEnumerable('a'); // true
+o.propertyIsEnumerable('b'); // false
+o.propertyIsEnumerable('c'); // false
+o.propertyIsEnumerable('d'); // true
+o.propertyIsEnumerable(Symbol.for('e')); // true
+o.propertyIsEnumerable(Symbol.for('f')); // false
+
+var p = { ...o }
+p.a // 1
+p.b // undefined
+p.c // undefined
+p.d // 4
+p[Symbol.for('e')] // 5
+p[Symbol.for('f')] // undefined</pre>
+
+<h4 id="Атрибут_configurable">Атрибут configurable</h4>
+
+<p>Атрибут <code>configurable</code> контролює одночасно, чи може властивість бути видалена з об'єкту, та чи можуть її атрибути (інші, крім <code>value</code> та <code>writable</code>) бути змінені.</p>
+
+<pre class="brush: js">var o = {};
+Object.defineProperty(o, 'a', {
+  get() { return 1; },
+  configurable: false
+});
+
+Object.defineProperty(o, 'a', {
+  configurable: true
+}); // викидає TypeError
+Object.defineProperty(o, 'a', {
+  enumerable: true
+}); // викидає TypeError
+Object.defineProperty(o, 'a', {
+  set() {}
+}); // викидає TypeError (set не був визначений попередньо)
+Object.defineProperty(o, 'a', {
+  get() { return 1; }
+}); // викидає TypeError
+// (хоча новий get робить рівно те саме)
+Object.defineProperty(o, 'a', {
+  value: 12
+}); // викидає TypeError
+// ('value' можна змінити, коли 'configurable' дорівнює false,
+// але не у цьому випадку, через аксесор 'get')
+
+console.log(o.a); // виводить 1
+delete o.a; // Нічого не відбувається
+console.log(o.a); // виводить 1</pre>
+
+<p>Якби атрибут <code>configurable</code> властивості <code>o.a</code> дорівнював <code>true</code>, жодна з помилок не з'явилася б, і властивість була б видалена наприкінці.</p>
+
+<h3 id="Додавання_властивостей_та_значень_за_замовчуванням">Додавання властивостей та значень за замовчуванням</h3>
+
+<p>Важливо враховувати, яким чином задаються значення атрибутів за замовчуванням. Часто є різниця між простим присвоєнням значення через крапкову нотацію та використанням <code>Object.defineProperty()</code>, як показано нижче у прикладі.</p>
+
+<pre class="brush: js">var o = {};
+
+o.a = 1;
+// є еквівалентом:
+Object.defineProperty(o, 'a', {
+  value: 1,
+  writable: true,
+  configurable: true,
+  enumerable: true
+});
+
+// З іншого боку,
+Object.defineProperty(o, 'a', { value: 1 });
+// є еквівалентом:
+Object.defineProperty(o, 'a', {
+  value: 1,
+  writable: false,
+  configurable: false,
+  enumerable: false
+});
+</pre>
+
+<h3 id="Користувацьки_сетери_та_гетери">Користувацьки сетери та гетери</h3>
+
+<p>Приклад нижче показує, як реалізувати об'єкт, що самоархівується. Коли призначається властивість <code>temperature</code>, масив <code>archive</code> отримує запис журналу подій.</p>
+
+<pre class="brush: js">function Archiver() {
+  var temperature = null;
+  var archive = [];
+
+  Object.defineProperty(this, 'temperature', {
+    get: function() {
+      console.log('get!');
+      return temperature;
+    },
+    set: function(value) {
+      temperature = value;
+      archive.push({ val: temperature });
+    }
+  });
+
+  this.getArchive = function() { return archive; };
+}
+
+var arc = new Archiver();
+arc.temperature; // 'get!'
+arc.temperature = 11;
+arc.temperature = 13;
+arc.getArchive(); // [{ val: 11 }, { val: 13 }]
+</pre>
+
+<p>У цьому прикладі гетер завжди повертає одне й те саме значення.</p>
+
+<pre class="brush: js">var pattern = {
+    get() {
+        return 'Що б ти не призначив, ' +
+               'я завжди повертаю цей рядок';
+    },
+    set() {
+        this.myname = "Це рядок з моїм ім'ям";
+    }
+};
+
+function TestDefineSetAndGet() {
+    Object.defineProperty(this, 'myproperty', pattern);
+}
+
+var instance = new TestDefineSetAndGet();
+instance.myproperty = 'тест';
+console.log(instance.myproperty);
+// Що б ти не призначив, я завжди повертаю цей рядок
+
+console.log(instance.myname); // Це рядок з моїм ім'ям</pre>
+
+<h3 id="Успадкування_властивостей">Успадкування властивостей</h3>
+
+<p>Якщо властивість-аксесор була успадкована, її методи <code>get</code> та <code>set</code> викликатимуться при зверненні до властивості та будуть модифіковані на об'єктах-нащадках. Якщо ці методи використовують змінну для зберігання значення, це значення буде спільним для усіх об'єктів.</p>
+
+<pre class="brush: js">function myclass() {
+}
+
+var value;
+Object.defineProperty(myclass.prototype, "x", {
+  get() {
+    return value;
+  },
+  set(x) {
+    value = x;
+  }
+});
+
+var a = new myclass();
+var b = new myclass();
+a.x = 1;
+console.log(b.x); // 1</pre>
+
+<p>Це можна виправити, зберігаючи значення у іншій властивості. У методах <code>get</code> та <code>set</code> <code>this</code> вказує на об'єкт, що використовується для звернення або для модифікації властивості.</p>
+
+<pre class="brush: js">function myclass() {
+}
+
+Object.defineProperty(myclass.prototype, "x", {
+  get() {
+    return this.stored_x;
+  },
+  set(x) {
+    this.stored_x = x;
+  }
+});
+
+var a = new myclass();
+var b = new myclass();
+a.x = 1;
+console.log(b.x); // undefined</pre>
+
+<p>На відміну від властивостей-аксесорів, властивості-значення завжди присвоюються самому об'єкту, а не прототипу. Проте, якщо успадковується властивість-значення, недоступна для запису, це все одно не дозволяє змінювати властивість на об'єкті.</p>
+
+<pre class="brush: js">function myclass() {
+}
+
+myclass.prototype.x = 1;
+Object.defineProperty(myclass.prototype, "y", {
+  writable: false,
+  value: 1
+});
+
+var a = new myclass();
+a.x = 2;
+console.log(a.x); // 2
+console.log(myclass.prototype.x); // 1
+a.y = 2; // Ігнорується, викидає виняток у строгому режимі
+console.log(a.y); // 1
+console.log(myclass.prototype.y); // 1</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.6', 'Object.defineProperty')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.defineproperty', 'Object.defineProperty')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.defineproperty', 'Object.defineProperty')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Object.defineProperty")}}</p>
+
+<h2 id="Примітки_щодо_сумісності">Примітки щодо сумісності</h2>
+
+<h3 id="Перевизначення_властивості_length_обєкта_Array">Перевизначення властивості <code>length</code> об'єкта <code>Array</code></h3>
+
+<p>Можливість перевизначити властивість масивів {{jsxref("Array.length", "length")}} є предметом звичайних обмежень. (Властивість {{jsxref("Array.length", "length")}} початково недоступна для налаштування та переліку, і доступна для запису. Таким чином, для незміненого масиву можливо змінити значення властивості {{jsxref("Array.length", "length")}} або зробити її недоступною для запису. Неможливо змінити її доступність для переліку чи налаштування, або, якщо вона недоступна для запису, змінити її значення чи доступність для запису.) Однак, не усі переглядачі дозволяють це перевизначення.</p>
+
+<p>Firefox від 4 до 22 викине {{jsxref("TypeError")}} на всяку спробу будь-яким чином (дозволено це чи ні) перевизначити властивість масиву {{jsxref("Array.length", "length")}}.</p>
+
+<p>Версії Chrome, у яких реалізовано <code>Object.defineProperty()</code>, у певних обставинах ігнорують значення довжини масиву, відмінне від поточного значення властивості масиву {{jsxref("Array.length", "length")}}. У деяких обставинах зміна доступності для запису, схоже, непомітно не спрацьовує (і не викидає виняток). Разом з тим, деякі методи, що змінюють масив, такі як {{jsxref("Array.prototype.push")}}, не визнають недоступну для запису довжину масиву.</p>
+
+<p>Версії Safari, у яких реалізовано <code>Object.defineProperty()</code>, ігнорують значення <code>length</code>, яке відрізняється від поточної властивості масиву {{jsxref("Array.length", "length")}}, і спроби змінити її доступність для запису не викидають помилки, але насправді не змінюють доступність властивості для запису.</p>
+
+<p>Лише Internet Explorer 9 та новіші, а також Firefox 23 та новіші, схоже, повністю та коректно реалізують перевизначення властивості масивів {{jsxref("Array.length", "length")}}. На сьогоднішній день не варто покладатись на те, що перевизначення властивості масиву {{jsxref("Array.length", "length")}} працюватиме чи поводитиметься певним чином. І навіть коли ви <em>можете</em> на це покластись, <a href="http://whereswalden.com/2013/08/05/new-in-firefox-23-the-length-property-of-an-array-can-be-made-non-writable-but-you-shouldnt-do-it/">існує дуже вагома причина не робити цього</a>.</p>
+
+<h3 id="Примітки_щодо_Internet_Explorer_8">Примітки щодо Internet Explorer 8</h3>
+
+<p>Internet Explorer 8 реалізував метод <code>Object.defineProperty()</code>, який може використовуватись <a class="external" href="https://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx">тільки на об'єктах DOM</a>. Кілька моментів варто зазначити:</p>
+
+<ul>
+ <li>Спроби використати <code>Object.defineProperty()</code> на вбудованих об'єктах викине помилку.</li>
+ <li>Атрибутам властивості мають бути надані певні значення. Атрибути <code>configurable</code>, <code>enumerable</code> та <code>writable</code> мають усі дорівнювати <code>true</code> для дескриптора даних, а також <code>true</code> для <code>configurable</code>, <code>false</code> для <code>enumerable</code> для дескриптора доступу.(?) Будь-яка спроба задати інше значення (?) призведе до викидання помилки.</li>
+ <li>Переналаштування властивості вимагає спочатку видалення цієї властивості. Якщо властивість не була видалена, вона залишиться такою, як була до спроби переналаштування.</li>
+</ul>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Перелічуваність_та_належність_властивостей">Перелічуваність та належність властивостей</a></li>
+ <li>{{jsxref("Object.defineProperties()")}}</li>
+ <li>{{jsxref("Object.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li>
+ <li>{{jsxref("Object.prototype.watch()")}}</li>
+ <li>{{jsxref("Object.prototype.unwatch()")}}</li>
+ <li>{{jsxref("Operators/get", "get")}}</li>
+ <li>{{jsxref("Operators/set", "set")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">Додаткові приклади <code>Object.defineProperty</code></a></li>
+ <li>{{jsxref("Reflect.defineProperty()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/entries/index.html b/files/uk/web/javascript/reference/global_objects/object/entries/index.html
new file mode 100644
index 0000000000..8b555e8991
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/entries/index.html
@@ -0,0 +1,157 @@
+---
+title: Object.entries()
+slug: Web/JavaScript/Reference/Global_Objects/Object/entries
+tags:
+  - JavaScript
+  - Властивість
+  - Об'єкт
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries
+---
+<div>{{JSRef}}</div>
+
+<div><span class="seoSummary">Метод <code><strong>Object.entries()</strong></code> повертає масив пар ключ-значення особистих, перелічуваних, рядкових властивостей наданого об'єкта, у тому самому порядку, у якому їх надає цикл {{jsxref("Statements/for...in", "for...in")}} (різниця лише в тому, що цикл for-in також перебирає </span><span style="font-size: 1rem; letter-spacing: -0.00278rem;"><span class="seoSummary">властивості з ланцюга прототипів).</span> Порядок масиву, поверненого </span><strong style="font-size: 1rem; letter-spacing: -0.00278rem;">Object.entries()</strong><span style="font-size: 1rem; letter-spacing: -0.00278rem;">, не залежить від того, як був визначений об'єкт</span>. Якщо вам потрібне певне впорядкування, то масив слід відсортувати наступним чином: <code>Object.entries(obj).sort((a, b) =&gt; b[0].localeCompare(a[0]));</code>.</div>
+
+<div></div>
+
+<div>{{EmbedInteractiveExample("pages/js/object-entries.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Object.entries(<var>obj</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Об'єкт, чиї пари ключ-значення особистих перелічуваних рядкових властивостей потрібно повернути.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<div>Масив пар <code>[key, value]</code> з особистих, перелічуваних, рядкових властивостей даного об'єкта.</div>
+
+<h2 id="Опис">Опис</h2>
+
+<p><code>Object.entries()</code> повертає масив, чиїми елементами є масиви, що відповідають парам  <code>[key, value]</code> перелічуваних рядкових властивостей, знайдених безпосередньо на об'єкті. Порядок властивостей є таким самим, як і при переборі властивостей об'єкта вручну за допомогою циклу.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">const obj = { foo: 'bar', baz: 42 };
+console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
+
+// подібний до масиву об'єкт
+const obj = { 0: 'а', 1: 'б', 2: 'в' };
+console.log(Object.entries(obj)); // [ ['0', 'а'], ['1', 'б'], ['2', 'в'] ]
+
+// подібний до масиву об'єкт з випадковим порядком ключів
+const anObj = { 100: 'а', 2: 'б', 7: 'в' };
+console.log(Object.entries(anObj)); // [ ['2', 'б'], ['7', 'в'], ['100', 'а'] ]
+
+// getFoo є неперелічуваною властивістю
+const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } });
+myObj.foo = 'bar';
+console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ]
+
+// аргумент, що не є об'єктом, буде приведений до об'єкта
+console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]
+
+// повертає порожній масив для усіх простих типів, оскільки примітиви не мають особистих властивостей
+console.log(Object.entries(100)); // [ ]
+
+// елегантно перебирає пари ключ-значення
+const obj = { a: 5, b: 7, c: 9 };
+for (const [key, value] of Object.entries(obj)) {
+  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
+}
+
+// або, використовуючи додаткові функції масивів
+Object.entries(obj).forEach(([key, value]) =&gt; {
+  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
+});
+</pre>
+
+<h3 id="Перетворення_Object_на_Map">Перетворення <code>Object</code> на <code>Map</code></h3>
+
+<p>Конструктор {{jsxref("Map", "new Map()")}} приймає ітерабельний об'єкт, отриманий через <code>entries</code>. За допомогою <code>Object.entries</code>, ви легко можете перетворити {{jsxref("Object")}} на {{jsxref("Map")}}:</p>
+
+<pre class="brush: js">const obj = { foo: 'bar', baz: 42 };
+const map = new Map(Object.entries(obj));
+console.log(map); // Map { foo: "bar", baz: 42 }
+</pre>
+
+<h3 id="Перебір_обєкта">Перебір об'єкта</h3>
+
+<p>Використовуючи <a href="/uk/docs/Web/JavaScript/Reference/Operators/Деструктуризація#Деструктуризація_масивів">деструктуризацію масивів</a>, ви можете легко перебирати об'єкти.</p>
+
+<pre class="brush: js">const obj = { foo: 'bar', baz: 42 };
+Object.entries(obj).forEach(([key, value]) =&gt; console.log(`${key}: ${value}`)); // "foo: bar", "baz: 42"
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Щоб додати підтримку методу <code>Object.entries</code> у старих середовищах, що не підтримують його початково, ви можете використати <span class="tlid-translation translation" lang="uk"><span title="">демонстраційну реалізацію </span></span><code>Object.entries</code><span class="tlid-translation translation" lang="uk"><span title=""> у</span></span> <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> <span class="tlid-translation translation" lang="uk"><span title="">(якщо вам не потрібна підтримка </span></span>IE<span class="tlid-translation translation" lang="uk"><span title="">), поліфіл у репозиторіях</span></span> <a href="https://github.com/es-shims/Object.entries">es-shims/Object.entries</a>, або можете просто скористатись простим, готовим до розгортання поліфілом, наведеним нижче.</p>
+
+<pre class="brush: js">if (!Object.entries) {
+  Object.entries = function( obj ){
+    var ownProps = Object.keys( obj ),
+        i = ownProps.length,
+        resArray = new Array(i); // попередньо виділити пам'ять під масив
+    while (i--)
+      resArray[i] = [ownProps[i], obj[ownProps[i]]];
+
+    return resArray;
+  };
+}
+</pre>
+
+<p>Для наведеного вище поліфілу, якщо вам потрібна підтримка IE &lt; 9, тоді вам також знадобиться поліфіл Object.keys (як той, що наведений у статті {{jsxref("Object.keys")}})</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.entries', 'Object.entries')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES8', '#sec-object.entries', 'Object.entries')}}</td>
+   <td>{{Spec2('ES8')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.entries")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Перелічуваність_та_належність_властивостей">Перелічуваність та належність властивостей</a></li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Object.values()")}}</li>
+ <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li>{{jsxref("Object.fromEntries()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Map.prototype.entries()")}}</li>
+ <li>{{jsxref("Map.prototype.keys()")}}</li>
+ <li>{{jsxref("Map.prototype.values()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/eval/index.html b/files/uk/web/javascript/reference/global_objects/object/eval/index.html
new file mode 100644
index 0000000000..19a476dfc1
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/eval/index.html
@@ -0,0 +1,46 @@
+---
+title: Object.prototype.eval()
+slug: Web/JavaScript/Reference/Global_Objects/Object/eval
+tags:
+  - JavaScript
+  - Об'єкт
+  - застарілий
+  - метод
+translation_of: Archive/Web/JavaScript/Object.eval
+---
+<div>{{JSRef}} {{obsolete_header}}</div>
+
+<p>Метод <code><strong>Object.eval()</strong></code> обчислював рядок коду JavaScript у контексті об'єкта, але цей метод застарів та був прибраний.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>obj</var>.eval(<var>string</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>string</code></dt>
+ <dd>Будь-який рядок, що відображає вираз, інструкцію чи послідовність інструкцій JavaScript. Вираз може містити змінні та властивості існуючих об'єктів.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>eval</code> більше не може використовуватись в якості методу об'єкта. Використовуйте замість нього глобальну функцію {{jsxref("Global_Objects/eval", "eval()")}}.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Не є частиною жодних специфікацій.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.eval")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/eval", "eval()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/freeze/index.html b/files/uk/web/javascript/reference/global_objects/object/freeze/index.html
new file mode 100644
index 0000000000..86269bfda1
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/freeze/index.html
@@ -0,0 +1,256 @@
+---
+title: Object.freeze()
+slug: Web/JavaScript/Reference/Global_Objects/Object/freeze
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - Object
+  - freeze
+  - Об'єкт
+  - заморожування
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/freeze
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>Object.freeze()</strong></code> <strong>заморожує</strong> об'єкт. Заморожений об'єкт не може бути змінений; заморожування запобігає додаванню нових властивостей, видаленню існуючих властивостей, зміні доступності існуючих властивостей для переліку, налаштування та запису, а також зміні значень існуючих властивостей. Також, заморожування об'єкта не дає змінювати його прототип. Метод <code>freeze()</code> повертає той самий об'єкт, що був переданий.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-freeze.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Object.freeze(<var>obj</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Об'єкт, який потрібно заморозити.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Об'єкт, переданий у функцію.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Ніщо не може бути додане чи видалене з набору властивостей замороженого об'єкта. Будь-яка спроба це зробити зазнає невдачі, або непомітно, або з викиданням винятку {{jsxref("TypeError")}} (найчастіше, але не винятково, у {{jsxref("Strict_mode", "строгому режимі", "", 1)}}).</p>
+
+<p>Для властивостей-значень замороженого об'єкта не можна змінювати значення, атрибутам writable та configurable встановлено значення false. Властивості-аксесори (гетери та сетери) працюють, як і раніше (і так само створюють ілюзію, що ви міняєте значення). Зауважте, що значення, які є об'єктами, можна змінювати, якщо тільки вони теж не заморожені. Масив, як об'єкт, може бути заморожений; після цього його елементи не можуть бути змінені, і жоден елемент не може бути доданий чи видалений з масиву.</p>
+
+<p><code>freeze()</code> повертає той самий об'єкт, який був переданий у функцію. Він <em>не створює</em> заморожену копію.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Заморожування_обєктів">Заморожування об'єктів</h3>
+
+<pre class="brush: js">var obj = {
+  prop: function() {},
+  foo: 'ква'
+};
+
+// До заморожування: можна додавати нові властивості,
+// а також змінювати чи видаляти існуючі властивості
+obj.foo = 'мяв';
+obj.lumpy = 'гав';
+delete obj.prop;
+
+// Заморожуємо.
+var o = Object.freeze(obj);
+
+// Повертається той самий об'єкт, який ми передали.
+o === obj; // true
+
+// Об'єкт заморожено.
+Object.isFrozen(obj); // === true
+
+// Тепер будь-які зміни не працюють
+obj.foo = 'му'; // нічого не робить
+// непомітно не додає властивість
+obj.quaxxor = 'весела качка';
+
+// У строгому режимі такі спроби викинуть винятки TypeError
+function fail(){
+  'use strict';
+  obj.foo = 'бум'; // викидає TypeError
+  delete obj.foo; // викидає TypeError
+  delete obj.quaxxor; // повертає true, бо атрибут 'quaxxor' не був доданий
+  obj.sparky = 'фух'; // викидає TypeError
+}
+
+fail();
+
+// Спроба внести зміни через Object.defineProperty;
+// обидві інструкції викинуть TypeError.
+Object.defineProperty(obj, 'ohai', { value: 17 });
+Object.defineProperty(obj, 'foo', { value: 'уф' });
+
+// Також неможливо змінити прототип
+// обидві наведені інструкції викинуть TypeError.
+Object.setPrototypeOf(obj, { x: 20 })
+obj.__proto__ = { x: 20 }
+</pre>
+
+<h3 id="Заморожування_масивів">Заморожування масивів</h3>
+
+<pre class="brush: js">let a = [0];
+Object.freeze(a); // Тепер масив не можна змінювати.
+
+a[0]=1; // непомітно не спрацьовує
+a.push(2); // непомітно не спрацьовує
+
+// У строгому режимі такі спроби викидатимуть TypeError
+function fail() {
+  "use strict"
+  a[0] = 1;
+  a.push(2);
+}
+
+fail();</pre>
+
+<p>Заморожений об'єкт є <em>незмінним</em>. Однак, він не обов'язково є <em>константою</em>. Наступний приклад демонструє, що заморожений об'єкт не є константою (неглибока заморозка).</p>
+
+<pre class="brush: js">obj1 = {
+  internal: {}
+};
+
+Object.freeze(obj1);
+obj1.internal.a = 'значенняА';
+
+obj1.internal.a // 'значенняА'</pre>
+
+<p>Щоб об'єкт був константою, все дерево посилань (прямі та непрямі посилання на інші об'єкти) має посилатися тільки на незмінні заморожені об'єкти. Заморожений об'єкт називається незмінним, бо <em>стан </em>об'єкта (значення та посилання на інші об'єкти) всередині всього об'єкта є зафіксованим. Зауважте, що рядки, числа та булеві значення завжди незмінні, і що функції та масиви є об'єктами.</p>
+
+<h4 id="Що_таке_неглибока_заморозка">Що таке "неглибока заморозка"?</h4>
+
+<p>Результат виклику <code>Object.freeze(<var>object</var>)</code> стосується лише безпосередніх властивостей об'єкта <code>object</code>, і запобігає додаванню, видаленню чи переприсвоєнню значень властивостей у майбутньому <em>тільки</em> на об'єкті <code>object</code>. Якщо ж значеннями цих властивостей є інші об'єкти, ці об'єкти не заморожуються, і на них можуть здійснюватись операції додавання, видалення чи переприсвоєння значень властивостей.</p>
+
+<pre class="brush: js">var employee = {
+  name: "Дмитро",
+  designation: "Розробник",
+  address: {
+    street: "Городоцька",
+    city: "Львів"
+  }
+};
+
+Object.freeze(employee);
+
+employee.name = "Вова"; // непомітно не спрацює у нестрогому режимі
+employee.address.city = "Винники"; // атрибути дочірнього об'єкта можна змінювати
+
+console.log(employee.address.city) // Виведе: "Винники"
+</pre>
+
+<p>Щоб зробити об'єкт незмінним, рекурсивно заморозьте кожну властивість типу object (глибока заморозка). Застосовуйте свій шаблон для кожного конкретного елементу, коли знаєте, що об'єкт не містить {{interwiki("wikipedia", "Цикл_(теорія_графів)", "циклів")}} у дереві посилань, інакше запуститься нескінченний цикл. Покращенням функції <code>deepFreeze()</code> була б внутрішня функція, яка отримує аргументом шлях (наприклад, масив), щоб можна було заборонити рекурсивний виклик <code>deepFreeze()</code>, коли об'єкт знаходиться у процесі перетворення на незмінний об'єкт. Ви все одно ризикуєте заморозити об'єкт, який не треба заморожувати, наприклад, [window].</p>
+
+<pre class="brush: js">function deepFreeze(object) {
+
+  // Отримати імена властивостей, визначених на об'єкті
+  var propNames = Object.getOwnPropertyNames(object);
+
+  // Заморозити властивості перед тим, як заморожувати себе
+
+  for (let name of propNames) {
+    let value = object[name];
+
+    object[name] = value &amp;&amp; typeof value === "object" ?
+      deepFreeze(value) : value;
+  }
+
+  return Object.freeze(object);
+}
+
+var obj2 = {
+  internal: {
+    a: null
+  }
+};
+
+deepFreeze(obj2);
+
+obj2.internal.a = 'новеЗначення'; // непомітно не спрацює у нестрогому режимі
+obj2.internal.a; // null
+</pre>
+
+<h2 id="Примітки_щодо_використання">Примітки щодо використання</h2>
+
+<p>У ES5, якщо аргументом цього методу є не об'єкт (примітив), він спричинить помилку {{jsxref("TypeError")}}. У ES2015 аргумент, який не є об'єктом, сприйматиметься як звичайний заморожений об'єкт, і буде просто повернений.</p>
+
+<pre class="brush: js">&gt; Object.freeze(1)
+TypeError: 1 is not an object // код ES5
+
+&gt; Object.freeze(1)
+1                             // код ES2015
+</pre>
+
+<p>Об'єкти {{domxref("ArrayBufferView")}} з елементами спричинять помилку {{jsxref("TypeError")}}, оскільки вони є представленнями ділянок пам'яті, і неодмінно спричинять інші можливі проблеми:</p>
+
+<pre class="brush: js">&gt; Object.freeze(new Uint8Array(0)) // Немає елементів
+Uint8Array []
+
+&gt; Object.freeze(new Uint8Array(1)) // Має елементи
+TypeError: Cannot freeze array buffer views with elements
+
+&gt; Object.freeze(new DataView(new ArrayBuffer(32))) // Немає елементів
+DataView {}
+
+&gt; Object.freeze(new Float64Array(new ArrayBuffer(64), 63, 0)) // Немає елементів
+Float64Array []
+
+&gt; Object.freeze(new Float64Array(new ArrayBuffer(64), 32, 2)) // Має елементи
+TypeError: Cannot freeze array buffer views with elements
+</pre>
+
+<p>Зауважте наступне; оскільки три стандартні властивості (<code>buf.byteLength</code>, <code>buf.byteOffset</code> та <code>buf.buffer</code>) є доступними лише для читання (так само, як у {{jsxref("ArrayBuffer")}} чи у {{jsxref("SharedArrayBuffer")}}), немає причини намагатися заморожувати ці властивості.</p>
+
+<h3 id="Порівняння_з_Object.seal">Порівняння з <code>Object.seal()</code></h3>
+
+<p>Об'єкти, запечатані через {{jsxref("Object.seal()")}}, дозволяють змінювати свої існуючі властивості. Властивості об'єктів, заморожених через <code>Object.freeze()</code>, стають незмінними.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.9', 'Object.freeze')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.freeze', 'Object.freeze')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.freeze', 'Object.freeze')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Object.freeze")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/fromentries/index.html b/files/uk/web/javascript/reference/global_objects/object/fromentries/index.html
new file mode 100644
index 0000000000..28e960ca54
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/fromentries/index.html
@@ -0,0 +1,112 @@
+---
+title: Object.fromEntries()
+slug: Web/JavaScript/Reference/Global_Objects/Object/fromEntries
+tags:
+  - JavaScript
+  - Довідка
+  - Об'єкт
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/fromEntries
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>Object.fromEntries()</strong></code> перетворює список пар ключ-значення на об'єкт.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-fromentries.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Object.fromEntries(<var>iterable</var>);</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>iterable</var></code></dt>
+ <dd>Ітерабельний об'єкт, наприклад, {{jsxref("Array")}} або {{jsxref("Map")}}, або інші об'єкти, що реалізують <a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору#Протокол_перебируваного">протокол перебируваного</a>.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Новий об'єкт, чиї властивості надані записами ітерабельного об'єкта.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>Object.fromEntries()</code> приймає список пар ключ-значення і повертає новий об'єкт, властивості якого надані цими записами. Аргумент <em>iterable</em> має бути об'єктом, що реалізує метод <code>@@iterator</code>, який повертає об'єкт ітератор, що утворює подібний до масиву об'єкт з двома елементами. Перший його елемент - це значення, що використовується в якості ключа властивості, а другий елемент - значення, що буде асоціюватися з цим ключем.</p>
+
+<p><code>Object.fromEntries()</code> виконує дію протилежну до {{jsxref("Object.entries()")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Перетворення_Map_на_Object">Перетворення <code>Map</code> на <code>Object</code></h3>
+
+<p>За допомогою <code>Object.fromEntries</code>, можна перетворити {{jsxref("Map")}} на {{jsxref("Object")}}:</p>
+
+<pre class="brush: js">const map = new Map([ ['foo', 'bar'], ['baz', 42] ]);
+const obj = Object.fromEntries(map);
+console.log(obj); // { foo: "bar", baz: 42 }
+</pre>
+
+<h3 id="Перетворення_Array_на_Object">Перетворення <code>Array</code> на <code>Object</code></h3>
+
+<p>За допомогою <code>Object.fromEntries</code> можна перетворити {{jsxref("Array")}} на {{jsxref("Object")}}:</p>
+
+<pre class="brush: js">const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
+const obj = Object.fromEntries(arr);
+console.log(obj); // { 0: "a", 1: "b", 2: "c" }
+</pre>
+
+<h3 id="Перетворення_обєкта">Перетворення об'єкта</h3>
+
+<p>За допомогою методу <code>Object.fromEntries</code>, його протилежності  {{jsxref("Object.entries()")}} та <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array#Методи_2">методів маніпулювання масивами</a> можна ось так трансформувати об'єкти:</p>
+
+<pre class="brush: js">const object1 = { a: 1, b: 2, c: 3 };
+
+const object2 = Object.fromEntries(
+  Object.entries(object1)
+  .map(([ key, val ]) =&gt; [ key, val * 2 ])
+);
+
+console.log(object2);
+// { a: 2, b: 4, c: 6 }</pre>
+
+<div class="hidden">
+<p>Please do not add polyfills on MDN pages. For more details, refer to: <a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a></p>
+</div>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.fromentries', 'Object.fromEntries')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Початкове визначення у ECMAScript 2019.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Object.fromEntries")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Object.entries()")}}</li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Object.values()")}}</li>
+ <li>{{jsxref("Map.prototype.entries()")}}</li>
+ <li>{{jsxref("Map.prototype.keys()")}}</li>
+ <li>{{jsxref("Map.prototype.values()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/getnotifier/index.html b/files/uk/web/javascript/reference/global_objects/object/getnotifier/index.html
new file mode 100644
index 0000000000..9fef482fd6
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/getnotifier/index.html
@@ -0,0 +1,52 @@
+---
+title: Object.getNotifier()
+slug: Web/JavaScript/Reference/Global_Objects/Object/getNotifier
+tags:
+  - JavaScript
+  - Об'єкт
+  - застарілий
+  - метод
+translation_of: Archive/Web/JavaScript/Object.getNotifier
+---
+<div>{{JSRef}} {{obsolete_header}}</div>
+
+<p>Метод <strong><code>Object.getNotifer()</code></strong> використовувався для створення об'єкта, який дозволяв штучно викликати зміну, але застарів та був прибраний з переглядачів.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Object.getNotifier(<em>obj</em>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Об'єкт, для якого потрібно отримати сповіщувач.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Об'єкт-сповіщувач, пов'язаний з об'єктом, переданим у функцію.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Сповіщувач використовувався для запуску штучних змін, за якими спостерігатиме <code>Object.observe()</code>.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p><a href="https://github.com/arv/ecmascript-object-observe">Strawman proposal specification.</a></p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.getNotifier")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.observe()")}} {{obsolete_inline}}</li>
+ <li>{{jsxref("Object.unobserve()")}} {{obsolete_inline}}</li>
+ <li>{{jsxref("Array.observe()")}} {{obsolete_inline}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html b/files/uk/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html
new file mode 100644
index 0000000000..71b7d34b53
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html
@@ -0,0 +1,159 @@
+---
+title: Object.getOwnPropertyDescriptor()
+slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - Object
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>Object.getOwnPropertyDescriptor()</strong></code> повертає дескриптор властивості для особистої властивості (такої, що присутня безпосередньо на об'єкті, а не у ланцюжку його прототипів) наданого об'єкта.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-getownpropertydescriptor.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Object.getOwnPropertyDescriptor(<var>obj</var>, <var>prop</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Об'єкт, в якому потрібно знайти властивість.</dd>
+ <dt><code>prop</code></dt>
+ <dd>Ім'я або {{jsxref("Symbol","символ")}} властивості, опис якої отримується.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Дескриптор наданої властивості, якщо така існує на об'єкті, інакше {{jsxref("undefined")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Цей метод дозволяє вивчити докладний опис властивості. Властивість у JavaScript складається з імені у вигляді рядка або {{jsxref("Symbol", "символа")}} та дескриптора властивості. Більше інформації щодо типів дескрипторів властивостей та їхніх атрибутів можна знайти у статті {{jsxref("Object.defineProperty()")}}.</p>
+
+<p>Дескриптор властивості - це запис, що має деякі з наступних атрибутів:</p>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Значення, пов'язане з властивістю (тільки у дескрипторах даних).</dd>
+ <dt><code>writable</code></dt>
+ <dd>Дорівнює <code>true</code> тоді й тільки тоді, коли значення, пов'язане з властивістю, може бути змінене (тільки у дескрипторах даних).</dd>
+ <dt><code>get</code></dt>
+ <dd>Функція, що служить гетером властивості, або {{jsxref("undefined")}}, якщо гетера немає (тільки у дескрипторах доступу).</dd>
+ <dt><code>set</code></dt>
+ <dd>Функція, що служить сетером властивості, або {{jsxref("undefined")}}, якщо сетера немає (тільки у дескрипторах доступу).</dd>
+ <dt><code>configurable</code></dt>
+ <dd>Дорівнює <code>true</code> тоді й тільки тоді, коли тип цього дескриптора властивості може бути змінений, та якщо властивість може бути видалена з відповідного об'єкта.</dd>
+ <dt><code>enumerable</code></dt>
+ <dd>Дорівнює <code>true</code> тоді й тільки тоді, коли ця властивість з'являється під час переліку властивостей на відповідному об'єкті.</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">var o, d;
+
+o = { get foo() { return 17; } };
+d = Object.getOwnPropertyDescriptor(o, 'foo');
+// d дорівнює {
+//   configurable: true,
+//   enumerable: true,
+//   get: /*функція-гетер*/,
+//   set: undefined
+// }
+
+o = { bar: 42 };
+d = Object.getOwnPropertyDescriptor(o, 'bar');
+// d дорівнює {
+//   configurable: true,
+//   enumerable: true,
+//   value: 42,
+//   writable: true
+// }
+
+o = { [Symbol.for('baz')]: 73 }
+d = Object.getOwnPropertyDescriptor(o, Symbol.for('baz'));
+// d дорівнює {
+//   configurable: true,
+//   enumerable: true,
+//   value: 73,
+//   writable: true
+// }
+
+o = {};
+Object.defineProperty(o, 'qux', {
+  value: 8675309,
+  writable: false,
+  enumerable: false
+});
+d = Object.getOwnPropertyDescriptor(o, 'qux');
+// d дорівнює {
+//   value: 8675309,
+//   writable: false,
+//   enumerable: false,
+//   configurable: false
+// }
+</pre>
+
+<h2 id="Примітки">Примітки</h2>
+
+<p>У ES5, якщо перший аргумент цього методу не є об'єктом (є примітивом), це спричинить помилку {{jsxref("TypeError")}}. У ES2015 перший аргумент, що не є об'єктом, буде спочатку приведений до об'єкта.</p>
+
+<pre class="brush: js">Object.getOwnPropertyDescriptor('foo', 0);
+// TypeError: "foo" is not an object  // код ES5
+
+Object.getOwnPropertyDescriptor('foo', 0);
+// Об'єкт, повернений кодом ES2015: {
+//   configurable: false,
+//   enumerable: true,
+//   value: "f",
+//   writable: false
+// }
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.3', 'Object.getOwnPropertyDescriptor')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Object.getOwnPropertyDescriptor")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html b/files/uk/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html
new file mode 100644
index 0000000000..fa5dae0e79
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html
@@ -0,0 +1,118 @@
+---
+title: Object.getOwnPropertyDescriptors()
+slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors
+tags:
+  - JavaScript
+  - Object
+  - Об'єкт
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>Object.getOwnPropertyDescriptors()</strong></code> повертає дескриптори всіх особистих властивостей наданого об'єкта.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-getownpropertydescriptors.html")}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Object.getOwnPropertyDescriptors(<var>obj</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Об'єкт, для якого потрібно отримати дескриптори всіх особистих властивостей.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Об'єкт, що містить дескриптори всіх особистих властивостей об'єкта. Може бути порожній об'єкт, якщо властивостей немає.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Цей метод дозволяє вивчити докладний опис усіх особистих властивостей об'єкта. Властивість у JavaScript складається з імені у вигляді рядка або {{jsxref("Symbol","символа")}} та дескриптора властивості. Більше інформації щодо типів дескрипторів властивостей та їхніх атрибутів можна знайти у статті {{jsxref("Object.defineProperty()")}}.</p>
+
+<p>Дескриптор властивості - це запис, що має деякі з наступних атрибутів:</p>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Значення, пов'язане з властивістю (тільки у дескрипторах даних).</dd>
+ <dt><code><strong>writable</strong></code></dt>
+ <dd>Дорівнює <code>true</code> тоді й тільки тоді, коли значення, пов'язане з властивістю, може бути змінене (тільки у дескрипторах даних).</dd>
+ <dt><code>get</code></dt>
+ <dd>Функція, що служить гетером властивості, або {{jsxref("undefined")}}, якщо гетера немає (тільки у дескрипторах доступу).</dd>
+ <dt><code>set</code></dt>
+ <dd>Функція, що служить сетером властивості, або {{jsxref("undefined")}}, якщо сетера немає (тільки у дескрипторах доступу).</dd>
+ <dt><code>configurable</code></dt>
+ <dd>Дорівнює <code>true</code> тоді й тільки тоді, коли тип цього дескриптора властивості може бути змінений, та якщо властивість може бути видалена з відповідного об'єкта.</dd>
+ <dt><code>enumerable</code></dt>
+ <dd>Дорівнює <code>true</code> тоді й тільки тоді, коли ця властивість з'являється під час переліку властивостей на відповідному об'єкті.</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Створення_дрібного_клону">Створення дрібного клону</h3>
+
+<p>В той час як метод {{jsxref("Object.assign()")}} скопіює лише особисті та перелічувані властивості з наданого об'єкта у цільовий, ви можете скористатись цим методом та {{jsxref("Object.create()")}} для дрібного копіювання між двома невідомими об'єктами:</p>
+
+<pre class="brush: js">Object.create(
+  Object.getPrototypeOf(obj),
+  Object.getOwnPropertyDescriptors(obj)
+);
+</pre>
+
+<h3 id="Створення_підкласу">Створення підкласу</h3>
+
+<p>Типовим способом створення підкласу є визначити підклас, присвоїти його прототипу екземпляр суперкласу, і далі визначити властивості на цьому екземплярі. Це може бути незграбно, особливо для гетерів та сетерів. Ви можете натомість скористатись даним кодом для призначення прототипу:</p>
+
+<pre class="brush: js">function superclass() {}
+superclass.prototype = {
+  // Визначте тут свої методи та властивості
+};
+function subclass() {}
+subclass.prototype = Object.create(
+  superclass.prototype,
+  {
+    // Визначте тут свої методи та властивості
+  }
+);
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Початкове визначення у ECMAScript 2017.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2017', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}}</td>
+   <td>{{Spec2('ES2017')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.getOwnPropertyDescriptors")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li><a href="https://github.com/tc39/proposal-object-getownpropertydescriptors">Поліфіл</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/getownpropertynames/index.html b/files/uk/web/javascript/reference/global_objects/object/getownpropertynames/index.html
new file mode 100644
index 0000000000..df8c13a161
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/getownpropertynames/index.html
@@ -0,0 +1,175 @@
+---
+title: Object.getOwnPropertyNames()
+slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames
+tags:
+  - ECMAScript5
+  - JavaScript
+  - Об'єкт
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>Object.getOwnPropertyNames()</code></strong> повертає масив усіх властивостей (в тому числі неперелічуваних, за винятком властивостей, що використовують символ), знайдених безпосередньо на наданому об'єкті.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-getownpropertynames.html")}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">Object.getOwnPropertyNames(<var>obj</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>obj</var></code></dt>
+ <dd>Об'єкт, чиї перелічувані та неперелічувані властивості будуть повернені.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Масив рядків, що відповідає властивостям, знайденим безпосередньо у наданому об'єкті.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p><code>Object.getOwnPropertyNames()</code> повертає масив, чиї елементи є рядками, що відповідають перелічуваним та неперелічуваним властивостям, знайденим безпосередньо на наданому об'єкті <code><var>obj</var></code>. Порядок перелічуваних властивостей у масиві відповідає порядку, в якому видає властивості об'єкта цикл {{jsxref("Statements/for...in", "for...in")}} (або метод {{jsxref("Object.keys()")}}). Порядок неперелічуваних властивостей у масиві, а також порядок посеред перелічуваних властивостей, не визначені.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_Object.getOwnPropertyNames">Використання <code>Object.getOwnPropertyNames()</code></h3>
+
+<pre class="brush: js">var arr = ['а', 'б', 'в'];
+console.log(Object.getOwnPropertyNames(arr).sort());
+// виведе ["0", "1", "2", "length"]
+
+// подібний до масиву об'єкт
+var obj = { 0: 'а', 1: 'б', 2: 'в' };
+console.log(Object.getOwnPropertyNames(obj).sort());
+// виведе ["0", "1", "2"]
+
+// Виведення імен та значень властивостей через Array.forEach
+Object.getOwnPropertyNames(obj).forEach(
+  function (val, idx, array) {
+    console.log(val + ' -&gt; ' + obj[val]);
+  }
+);
+// виведе
+// 0 -&gt; а
+// 1 -&gt; б
+// 2 -&gt; в
+
+// неперелічувана властивість
+var my_obj = Object.create({}, {
+  getFoo: {
+    value: function() { return this.foo; },
+    enumerable: false
+  }
+});
+my_obj.foo = 1;
+
+console.log(Object.getOwnPropertyNames(my_obj).sort());
+// виведе ["foo", "getFoo"]
+</pre>
+
+<p>Якщо вам потрібні тільки перелічувані властивості, дивіться {{jsxref("Object.keys()")}} або скористайтесь циклом {{jsxref("Statements/for...in", "for...in")}} (зауважте, що це також поверне перелічувані властивості, знайдені у ланцюжку прототипів об'єкта, якщо тільки вони не були відфільтровані методом {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}}).</p>
+
+<p>Елементи, знайдені у ланцюжку прототипів, не додаються у список:</p>
+
+<pre class="brush: js">function ParentClass() {}
+ParentClass.prototype.inheritedMethod = function() {};
+
+function ChildClass() {
+  this.prop = 5;
+  this.method = function() {};
+}
+ChildClass.prototype = new ParentClass;
+ChildClass.prototype.prototypeMethod = function() {};
+
+console.log(
+  Object.getOwnPropertyNames(
+    new ChildClass() // ["prop", "method"]
+  )
+);
+</pre>
+
+<h3 id="Отримати_лише_неперелічувані_властивості">Отримати лише неперелічувані властивості</h3>
+
+<p>Тут використовується функція {{jsxref("Array.prototype.filter()")}} для видалення перелічуваних ключів (отриманих методом {{jsxref("Object.keys()")}}) зі списка усіх ключів (отриманих методом <code>Object.getOwnPropertyNames()</code>), таким чином, повертаючи тільки неперелічувані ключі.</p>
+
+<pre class="brush: js">var target = myObject;
+var enum_and_nonenum = Object.getOwnPropertyNames(target);
+var enum_only = Object.keys(target);
+var nonenum_only = enum_and_nonenum.filter(function(key) {
+  var indexInEnum = enum_only.indexOf(key);
+  if (indexInEnum == -1) {
+    // Ключ не знайдений у ключах enum_only,
+    // це означає, що він є неперелічуваним,
+    // тому повертаємо true, щоб залишити його у фільтрі
+    return true;
+  } else {
+    return false;
+  }
+});
+
+console.log(nonenum_only);
+</pre>
+
+<h2 id="Примітки">Примітки</h2>
+
+<p>У ES5, якщо аргумент цього методу не є об'єктом (примітив), це спричинить помилку {{jsxref("TypeError")}}. У ES2015 аргумент, що не є об'єктом, буде приведений до об'єкта.</p>
+
+<pre class="brush: js">Object.getOwnPropertyNames('foo');
+// TypeError: "foo" is not an object (код ES5)
+
+Object.getOwnPropertyNames('foo');
+// ["0", "1", "2", "length"]  (код ES2015)
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.4', 'Object.getOwnPropertyNames')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.8.5.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Object.getOwnPropertyNames")}}</p>
+
+<h2 id="Примітки_щодо_Firefox">Примітки щодо Firefox</h2>
+
+<p>До Firefox 28 метод <code>Object.getOwnPropertyNames</code> не бачив невирішених властивостей об'єктів {{jsxref("Error")}}. Це було виправлено у пізніших версіях ({{bug("724768")}}).</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Перелічуваність_та_належність_властивостей">Перелічуваність та належність властивостей</a></li>
+ <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li>
+ <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Array.forEach()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html b/files/uk/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html
new file mode 100644
index 0000000000..45fb9dc9f8
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html
@@ -0,0 +1,91 @@
+---
+title: Object.getOwnPropertySymbols()
+slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Об'єкт
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>Object.getOwnPropertySymbols()</strong></code> повертає масив усіх символьних властивостей, знайдених безпосередньо на наданому об'єкті.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-getownpropertysymbols.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js"><code>Object.getOwnPropertySymbols(<var>obj</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Об'єкт, чиї символьні властивості будуть повернені.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Масив усіх символьних властивостей, знайдених безпосередньо на наданому об'єкті.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Подібно до {{jsxref("Object.getOwnPropertyNames()")}}, ви можете отримати усі символьні властивості наданого об'єкта у вигляді масиву символів. Зауважте, що сам метод {{jsxref("Object.getOwnPropertyNames()")}} не містить символьних властивостей об'єкта і повертає лише рядкові властивості.</p>
+
+<p>Оскільки жоден об'єкт не має початково символьних властивостей, <code>Object.getOwnPropertySymbols()</code> повертає порожній масив, якщо ви не присвоїли символьні властивості своєму об'єкту.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">var obj = {};
+var a = Symbol('a');
+var b = Symbol.for('b');
+
+obj[a] = 'localSymbol';
+obj[b] = 'globalSymbol';
+
+var objectSymbols = Object.getOwnPropertySymbols(obj);
+
+console.log(objectSymbols.length); // 2
+console.log(objectSymbols);        // [Symbol(a), Symbol(b)]
+console.log(objectSymbols[0]);     // Symbol(a)
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-object.getownpropertysymbols', 'Object.getOwnPropertySymbols')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.getownpropertysymbols', 'Object.getOwnPropertySymbols')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.getOwnPropertySymbols")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Symbol","Символ")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/getprototypeof/index.html b/files/uk/web/javascript/reference/global_objects/object/getprototypeof/index.html
new file mode 100644
index 0000000000..c9aeaa48c6
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/getprototypeof/index.html
@@ -0,0 +1,98 @@
+---
+title: Object.getPrototypeOf()
+slug: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf
+tags:
+  - ECMAScript5
+  - JavaScript
+  - Об'єкт
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>Object.getPrototypeOf()</strong></code> повертає прототип (тобто, значення внутрішньої властивості <code>[[Prototype]]</code>) вказаного об'єкта.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-getprototypeof.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Object.getPrototypeOf(<var>obj</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>obj</var></code></dt>
+ <dd>Об'єкт, чий прототип буде повернений.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Прототип наданого об'єкта. Якщо немає успадкованих властивостей, повертається {{jsxref("null")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">var proto = {};
+var obj = Object.create(proto);
+Object.getPrototypeOf(obj) === proto; // true
+</pre>
+
+<h2 id="Примітки">Примітки</h2>
+
+<p>У ES5 буде викинуто виняток {{jsxref("TypeError")}}, якщо параметр <var>obj</var> не є об'єктом. У ES2015 параметр буде приведений до {{jsxref("Object","об'єкта")}}.</p>
+
+<pre class="brush: js">Object.getPrototypeOf('foo');
+// TypeError: "foo" is not an object (код ES5)
+Object.getPrototypeOf('foo');
+// String.prototype                  (код ES2015)
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.2', 'Object.getPrototypeOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.getprototypeof', 'Object.getPrototypeOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.getprototypeof', 'Object.getPrototypeOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Object.getPrototypeOf")}}</p>
+
+<h2 id="Примітки_щодо_Opera">Примітки щодо Opera</h2>
+
+<p>Хоча старіші версії Opera поки що не підтримують <code>Object.getPrototypeOf()</code>, Opera підтримує нестандартну властивість {{jsxref("Object.proto", "__proto__")}}, починаючи з Opera 10.50.</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.setPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.prototype.__proto__")}}</li>
+ <li>Пост John Resig щодо <a class="external" href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf</a></li>
+ <li>{{jsxref("Reflect.getPrototypeOf()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/hasownproperty/index.html b/files/uk/web/javascript/reference/global_objects/object/hasownproperty/index.html
new file mode 100644
index 0000000000..b41d85e896
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/hasownproperty/index.html
@@ -0,0 +1,158 @@
+---
+title: Object.prototype.hasOwnProperty()
+slug: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>hasOwnProperty()</code></strong> повертає булеве значення, яке вказує, чи є задана властивість особистою властивістю об'єкта (тобто, не успадкованою).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-prototype-hasownproperty.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>obj</var>.hasOwnProperty(<var>prop</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><var>prop</var></dt>
+ <dd>Ім'я у вигляді {{jsxref("String", "рядка")}} або {{Glossary("Symbol","символ")}} властивості, яку потрібно перевірити.</dd>
+</dl>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>{{jsxref("Boolean","Булеве значення")}}, яке вказує, чи є задана властивість особистою властивістю об'єкта.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Всі нащадки {{jsxref("Object")}} успадковують метод <code>hasOwnProperty</code>. Цей метод можна використовувати, щоб визначити, чи є вказана властивість особистою властивістю об'єкта; на відмінну від оператора {{jsxref("Operators/in", "in")}}, цей метод не перевіряє властивість у ланцюзі прототипів об'єкта. Якщо {{jsxref("Object","об'єкт")}} є {{jsxref("Array","масивом")}}, то метод  <code>hasOwnProperty</code> може перевірити, чи існує індекс у масиві.</p>
+
+<h2 id="Примітка">Примітка</h2>
+
+<p><code>hasOwnProperty</code> повертає <code>true</code>, навіть якщо значення властивості дорівнює <code>null</code> або <code>undefined</code>.</p>
+
+<pre class="brush: js">o = new Object();
+o.propOne = null;
+o.hasOwnProperty('propOne');   // повертає true
+o.propTwo = undefined;
+o.hasOwnProperty('propTwo');   // повертає true
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_hasOwnProperty_для_перевірки_існування_властивості">Використання <code>hasOwnProperty</code> для перевірки існування властивості</h3>
+
+<p>Наступний приклад визначає, чи має об'єкт <code>o</code> властивість на ім'я <code>prop</code>:</p>
+
+<pre class="brush: js">o = new Object();
+o.hasOwnProperty('prop');   // повертає false
+o.prop = 'exists';
+o.hasOwnProperty('prop');   // повертає true
+</pre>
+
+<h3 id="Прямі_властивості_проти_успадкованих">Прямі властивості проти успадкованих</h3>
+
+<p>Наступний приклад демонструє різницю між прямими властивостями та успадкованими через ланцюг прототипів:</p>
+
+<pre class="brush: js">o = new Object();
+o.prop = 'exists';
+o.hasOwnProperty('prop');             // повертає true
+o.hasOwnProperty('toString');         // повертає false
+o.hasOwnProperty('hasOwnProperty');   // повертає false
+</pre>
+
+<h3 id="Перебір_властивостей_обєкта">Перебір властивостей об'єкта</h3>
+
+<p>Наступний приклад показує, як перебирати властивості об'єкта, не рухаючи успадковані властивості. Зауважте, що цикл {{jsxref("Statements/for...in", "for...in")}} перебирає лише перелічувані властивості, тому не слід вважати, виходячи з відсутності неперелічуваних властивостей, показаних у циклі, що <code>hasOwnProperty</code> сам обмежений суто перелічуваними елементами (як у випадку з {{jsxref("Object.getOwnPropertyNames()")}}).</p>
+
+<pre class="brush: js">var buz = {
+  fog: 'stack'
+};
+
+for (var name in buz) {
+  if (buz.hasOwnProperty(name)) {
+    console.log('це властивість (' +
+      name + '). Значення: ' + buz[name]);
+  }
+  else {
+    console.log(name); // toString або щось інше
+  }
+}
+</pre>
+
+<h3 id="Використання_hasOwnProperty_в_якості_назви_властивості">Використання <code>hasOwnProperty</code> в якості назви властивості</h3>
+
+<p>JavaScript не захищає ім'я властивості <code>hasOwnProperty</code>; як наслідок, якщо існує можливість, що об'єкт може мати властивість з цим ім'ям, то необхідно використовувати <em>зовнішній</em> метод <code>hasOwnProperty</code>, щоб отримати правильний результат:</p>
+
+<pre class="brush: js">var foo = {
+  hasOwnProperty: function() {
+    return false;
+  },
+  bar: 'Небезпечна зона'
+};
+
+foo.hasOwnProperty('bar'); // завжди повертає false
+
+// Використаємо hasOwnProperty іншого об'єкта
+// і викличемо його з 'this', рівним foo
+({}).hasOwnProperty.call(foo, 'bar'); // true
+
+// Також можна використати властивість hasOwnProperty
+// з прототипа Object для цієї мети
+Object.prototype.hasOwnProperty.call(foo, 'bar'); // true
+</pre>
+
+<p>Зауважте, що в останньому випадку не створюється нових об'єктів.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.5.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_браузерів">Підтримка браузерів</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Object.hasOwnProperty")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Перелічуваність_та_належність_властивостей">Перелічуваність та належність властивостей</a></li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Statements/for...in", "for...in")}}</li>
+ <li>{{jsxref("Operators/in", "in")}}</li>
+ <li><a href="/uk/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Посібник JavaScript: Наслідування та ланцюжок прототипів</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/index.html b/files/uk/web/javascript/reference/global_objects/object/index.html
new file mode 100644
index 0000000000..6fdb6e8adb
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/index.html
@@ -0,0 +1,267 @@
+---
+title: Object
+slug: Web/JavaScript/Reference/Global_Objects/Object
+tags:
+  - Constructor
+  - JavaScript
+  - NeedsTranslation
+  - Object
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Global_Objects/Object
+---
+<div>{{JSRef}}</div>
+
+<p>Клас <code><strong>Object</strong></code> відображає один з <a href="/uk/docs/Web/JavaScript/Data_structures">типів даних JavaScript</a>. Він використовується для збереження різноманітних колекцій, що використовують ключі, та більш складних сутностей. Об'єкти можуть бути створені за допомогою конструктора {{jsxref("Object/Object", "Object()")}} або <a href="/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів">об'єктного ініціалізатора / літерального синтаксису</a>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Майже усі об'єкти у JavaScript є екземплярами {{jsxref("Object")}}; типовий об'єкт успадковує властивості (в тому числі методи) від <code>Object.prototype</code>, хоча ці властивості можуть бути перекриті (перевизначені). Однак, можна навмисно створити <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Object</span></font>, для якого це буде не так (наприклад, за допомогою {{jsxref("Object.create", "Object.create(null)")}}), або змінити його таким чином (наприклад, через {{jsxref("Object.setPrototypeOf")}}).</p>
+
+<p>Зміни у прототипі <code>Object</code> видимі <strong>усім</strong> об'єктам через ланцюжок прототипів, якщо властивості та методи, яких стосуються ці зміни, не були перевизначені далі у ланцюжку прототипів. Це надає дуже потужний, хоча й потенційно небезпечний, механізм для перевизначення або розширення поведінки об'єкта.</p>
+
+<p><font face="Open Sans, Arial, sans-serif">Конструктор </font><code>Object</code> створює обгортку об'єкта для заданого значення.</p>
+
+<ul>
+ <li>Якщо значенням є {{jsxref("null")}} або {{jsxref("undefined")}}, конструктор створить та поверне порожній об'єкт.</li>
+ <li>В іншому випадку, він поверне об'єкт того типу, який відповідає наданому значенню.</li>
+ <li>Якщо значення вже є об'єктом, конструктор поверне це значення.</li>
+</ul>
+
+<p>Під час виклику не у контексті конструктора, <code>Object</code> поводиться ідентично до <code>new Object()</code>.</p>
+
+<p>Дивіться також <a href="/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів">Ініціалізатор об'єктів / літеральний синтаксис</a>.</p>
+
+<h3 id="Видалення_властивості_обєкта">Видалення властивості об'єкта</h3>
+
+<p>У самому об'єкті не існує методів для видалення своїх властивостей (таких, як {{jsxref("Map.prototype.delete", "Map.prototype.delete()")}}). Щоб зробити це, необхідно скористатись <a href="/uk/docs/Web/JavaScript/Reference/Operators/delete">оператором delete</a>.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{jsxref("Object/Object", "Object()")}}</dt>
+ <dd>Створює новий об'єкт <code>Object</code>. Це обгортка для наданого значення.</dd>
+</dl>
+
+<h2 id="Статичні_методи">Статичні методи</h2>
+
+<dl>
+ <dt>{{jsxref("Object.assign()")}}</dt>
+ <dd>Копіює значення усіх перелічуваних особистих властивостей з одного або більше об'єктів у цільовий об'єкт.</dd>
+ <dt>{{jsxref("Object.create()")}}</dt>
+ <dd>Створює новий об'єкт із вказаним прототипним об'єктом і властивостями.</dd>
+ <dt>{{jsxref("Object.defineProperty()")}}</dt>
+ <dd>Додає зазначену властивість, описану наданим дескриптором, до об'єкта.</dd>
+ <dt>{{jsxref("Object.defineProperties()")}}</dt>
+ <dd>Додає зазначені властивості, описані наданими дескрипторами, до об'єкта.</dd>
+ <dt>{{jsxref("Object.entries()")}}</dt>
+ <dd>Повертає масив, що містить усі пари <code>[key, value]</code> <strong>особистих</strong> перелічуваних рядкових властивостей данного  об'єкта.</dd>
+ <dt>{{jsxref("Object.freeze()")}}</dt>
+ <dd>Заморожує об'єкт: інший код не може видаляти або змінювати будь-які властивості.</dd>
+ <dt>{{jsxref("Object.fromEntries()")}}</dt>
+ <dd>Повертає новий об'єкт з ітерабельного об'єкта, що містить пари ключ-значення (зворотний до {{jsxref("Object.entries")}}).</dd>
+ <dt>{{jsxref("Object.getOwnPropertyDescriptor()")}}</dt>
+ <dd>Повертає дескриптор властивості для зазначенної властивості об'єкта.</dd>
+ <dt>{{jsxref("Object.getOwnPropertyDescriptors()")}}</dt>
+ <dd>Повертає об'єкт, що містить дескриптори всіх особистих властивостей об'єкта.</dd>
+ <dt>{{jsxref("Object.getOwnPropertyNames()")}}</dt>
+ <dd>Повертає масив, що містить імена всіх <strong>особистих</strong> перелічуваних і неперелічуванних властивостей даного об'єкта.</dd>
+ <dt>{{jsxref("Object.getOwnPropertySymbols()")}}</dt>
+ <dd>Повертає масив усіх символьних властивостей, знайдених безпосередньо на даному об'єкті.</dd>
+ <dt>{{jsxref("Object.getPrototypeOf()")}}</dt>
+ <dd>Повертає прототип вказаного об'єкта.</dd>
+ <dt>{{jsxref("Object.is()")}}</dt>
+ <dd>Перевіряє, чи мають два аргументи однакове значення. Прирівнює усі значення NaN (що відрізняється як від абстрактної рівності, так і від строгої рівності).</dd>
+ <dt>{{jsxref("Object.isExtensible()")}}</dt>
+ <dd>Визначає, чи дозволене розширення об'єкта.</dd>
+ <dt>{{jsxref("Object.isFrozen()")}}</dt>
+ <dd>Визначає, чи є об'єкт замороженим.</dd>
+ <dt>{{jsxref("Object.isSealed()")}}</dt>
+ <dd>Визначає, чи є об'єкт запечатанним.</dd>
+ <dt>{{jsxref("Object.keys()")}}</dt>
+ <dd>Повертає масив, що містить імена всіх <strong>особистих</strong> перелічуваних рядкових властивостей даного об'єкта.</dd>
+ <dt>{{jsxref("Object.preventExtensions()")}}</dt>
+ <dd>Запобігає будь-яким розширенням об'єкта.</dd>
+ <dt>{{jsxref("Object.seal()")}}</dt>
+ <dd>Запобігає можливості іншого коду видаляти властивості об'єкта.</dd>
+ <dt>{{jsxref("Object.setPrototypeOf()")}}</dt>
+ <dd>Встановлює прототип (тобто, внутрішню властивість <code>[[Prototype]]</code> об'єкта).</dd>
+ <dt>{{jsxref("Object.values()")}}</dt>
+ <dd>Повертає масив, який містить значення, що відповідають усім <strong>особистим</strong> перелічуваним рядковим властивостям даного об'єкта.</dd>
+</dl>
+
+<h2 id="Властивості_екземплярів">Властивості екземплярів </h2>
+
+<dl>
+ <dt>{{jsxref("Object.prototype.constructor")}}</dt>
+ <dd>Визначає функцію, що створює прототип об'єкта.</dd>
+ <dt>{{jsxref("Object.prototype.proto","Object.prototype.__proto__")}}</dt>
+ <dd>Вказує на об'єкт, що був використаний як прототип, коли створювався екземпляр об'єкта.</dd>
+ <dt>{{jsxref("Object.prototype.noSuchMethod","Object.prototype.__noSuchMethod__")}}</dt>
+ <dd>Дозволяє визначити функцію, яка буде виконуватись, коли на об'єкті викликатиметься неіснуючий елемент.</dd>
+</dl>
+
+<h2 id="Методи_екземплярів">Методи екземплярів</h2>
+
+<dl>
+ <dt>{{jsxref("Object.prototype.__defineGetter__()")}}</dt>
+ <dd>Прив'язує функцію до властивості, яка, під час звернення до неї, викликатиме цю функцію та повертатиме значення, яке повернула функція.</dd>
+ <dt>{{jsxref("Object.prototype.__defineSetter__()")}}</dt>
+ <dd>Прив'язує функцію до властивості, яка, під час присвоєння, виконує цю функцію, яка змінює властивість.</dd>
+ <dt>{{jsxref("Object.prototype.__lookupGetter__()")}}</dt>
+ <dd>Повертає функцію, прив'язану до вказаної властивості методом {{jsxref("Object.prototype.__defineGetter__()", "__defineGetter__()")}}.</dd>
+ <dt>{{jsxref("Object.prototype.__lookupSetter__()")}}</dt>
+ <dd>Повертає функцію, прив'язану до вказаної властивості методом {{jsxref("Object.prototype.__defineSetter__()", "__defineSetter__()")}}.</dd>
+ <dt>{{jsxref("Object.prototype.hasOwnProperty()")}}</dt>
+ <dd>Повертає булеве значення, що вказує, чи об'єкт містить вказану властивість як особисту властивість цього об'єкта, а не успадковану через ланцюжок прототипів.</dd>
+ <dt>{{jsxref("Object.prototype.isPrototypeOf()")}}</dt>
+ <dd>Повертає булеве значення, що вказує, чи присутній об'єкт, на якому викликається цей метод, у ланцюжку прототипів вказаного об'єкта.</dd>
+ <dt>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</dt>
+ <dd>Повертає булеве значення, що вказує, чи встановлений внутрішній <a href="/uk/docs/Web/JavaScript/Data_structures#Properties">атрибут ECMAScript [[Enumerable]]</a>.</dd>
+ <dt>{{jsxref("Object.prototype.toLocaleString()")}}</dt>
+ <dd>Викликає {{jsxref("Object.toString", "toString()")}}.</dd>
+ <dt>{{jsxref("Object.prototype.toString()")}}</dt>
+ <dd>Повертає рядок, що відображає об'єкт.</dd>
+ <dt>{{jsxref("Object.prototype.unwatch()")}}</dt>
+ <dd>Прибирає точку спостереження з властивості об'єкта.</dd>
+ <dt>{{jsxref("Object.prototype.valueOf()")}}</dt>
+ <dd>Повертає просту величину вказаного об'єкта.</dd>
+ <dt>{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}</dt>
+ <dd>Додає точку спостереження до властивості об'єкта.</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_Object_з_типами_undefined_та_null">Використання <code>Object</code> з типами <code>undefined</code> та <code>null</code></h3>
+
+<p>Наступні приклади зберігають порожній об'єкт <code>Object</code> в <code>o</code>:</p>
+
+<pre class="brush: js notranslate">var o = new Object();
+</pre>
+
+<pre class="brush: js notranslate">var o = new Object(undefined);
+</pre>
+
+<pre class="brush: js notranslate">var o = new Object(null);
+</pre>
+
+<h3 id="Використання_Object_для_створення_обєктів_Boolean">Використання <code>Object</code> для створення об'єктів <code>Boolean</code></h3>
+
+<p>Наступні приклади зберігають об'єкти {{jsxref("Boolean")}} у <code>o</code>:</p>
+
+<pre class="brush: js notranslate">// еквівалентно до o = new Boolean(true);
+var o = new Object(true);
+</pre>
+
+<pre class="brush: js notranslate">// еквівалентно до o = new Boolean(false);
+var o = new Object(Boolean());
+</pre>
+
+<h3 id="Прототипи_обєктів">Прототипи об'єктів</h3>
+
+<p>Змінюючи поведінку існуючих методів <code>Object.prototype</code>, розгляньте включення коду додаванням вашого розширення до чи після існуючої логіки. Наприклад, цей (неперевірений) код буде попередньо виконувати власну логіку перед тим, як буде виконано вбудовану логіку або інше розширення.</p>
+
+<p>Коли викликається функція, аргументи виклику містяться у подібній до масиву "змінній" <a href="/uk/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>. Наприклад, у виклику <code>myFn(a, b, c)</code>, arguments, що знаходиться у тілі <code>myFn</code>, міститиме 3 подібні до масиву елементи, що відповідають <code>(a, b, c)</code>.</p>
+
+<p>Модифікуючи прототипи з хуками, просто передайте <code>this</code> та arguments (стан виклику) до поточної поведінки, викликавши <code>apply()</code> на функції. Цей шаблон може використовуватись для будь-яких прототипів, наприклад, <code>Node.prototype</code>, <code>Function.prototype</code>, і т. д.</p>
+
+<pre class="brush: js notranslate">var current = Object.prototype.valueOf;
+
+// Оскільки моя властивість "-prop-value" є наскрізною та не завжди
+// знаходиться в тому самому ланцюжку прототипів, я хочу змінити Object.prototype:
+Object.prototype.valueOf = function() {
+  if (this.hasOwnProperty('-prop-value')) {
+    return this['-prop-value'];
+  } else {
+    // Це не схоже на один з моїх об'єктів, тому повернемось
+    // до початкової поведінки, відтворивши поточну поведінку якнайкраще.
+    // Метод apply поводиться як "super" у деяких інших мовах.
+    // І хоча valueOf() не приймає аргументів, можливо, інший хук їх прийматиме.
+    return current.apply(this, arguments);
+  }
+}</pre>
+
+<p>Оскільки JavaScript, насправді, не має об'єктів підкласу, прототип є зручним обхідним рішенням для створення об'єкта у ролі "базового класу" з певними функціями, що діють як об'єкти. Наприклад:</p>
+
+<pre class="brush: js notranslate">var Person = function(name) {
+  this.name = name;
+  this.canTalk = true;
+};
+
+Person.prototype.greet = function() {
+  if (this.canTalk) {
+    console.log('Привіт, я ' + this.name);
+  }
+};
+
+var Employee = function(name, title) {
+  Person.call(this, name);
+  this.title = title;
+};
+
+Employee.prototype = Object.create(Person.prototype);
+
+Employee.prototype.greet = function() {
+  if (this.canTalk) {
+    console.log('Привіт, я ' + this.name + ', ' + this.title);
+  }
+};
+
+var Customer = function(name) {
+  Person.call(this, name);
+};
+
+Customer.prototype = Object.create(Person.prototype);
+
+var Mime = function(name) {
+  Person.call(this, name);
+  this.canTalk = false;
+};
+
+Mime.prototype = Object.create(Person.prototype);
+
+var bob = new Employee('Боб', 'будівельник');
+var joe = new Customer('Джо');
+var rg = new Employee('Ред Грін', 'майстер на всі руки');
+var mike = new Customer('Майк');
+var mime = new Mime('Мім');
+
+bob.greet();
+// Привіт, я Боб, будівельник
+
+joe.greet();
+// Привіт, я Джо
+
+rg.greet();
+// Привіт, я Ред Грін, майстер на всі руки
+
+mike.greet();
+// Привіт, я Майк
+
+mime.greet();</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object-objects', 'Object')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Object")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів">Ініціалізатор об'єктів</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/is/index.html b/files/uk/web/javascript/reference/global_objects/object/is/index.html
new file mode 100644
index 0000000000..58578ab5d3
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/is/index.html
@@ -0,0 +1,128 @@
+---
+title: Object.is()
+slug: Web/JavaScript/Reference/Global_Objects/Object/is
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Object
+  - Рівність
+  - Тотожність
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/is
+---
+<div>{{JSRef}}</div>
+
+<div>Метод <code><strong>Object.is()</strong></code> з'ясовує, чи мають два аргументи <a href="/uk/docs/Web/JavaScript/Перевірка_на_рівність_та_однаковість">однакове значення</a>.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Object.is(<var>value1</var>, <var>value2</var>);</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>value1</code></dt>
+ <dd>Перше значення для порівняння.</dd>
+ <dt><code>value2</code></dt>
+ <dd>Друге значення для порівняння.</dd>
+</dl>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>{{jsxref("Boolean", "Булеве значення")}}, що вказує, чи мають вказані аргументи однакове значення.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p><code>Object.is()</code> визначає, чи мають вказані аргументи <a href="/uk/docs/Web/JavaScript/Перевірка_на_рівність_та_однаковість">однакове</a> значення. Два значення вважаються однаковими за однієї з наступних умов:</p>
+
+<ul>
+ <li>обидва {{jsxref("undefined")}};</li>
+ <li>обидва {{jsxref("null")}};</li>
+ <li>обидва <code>true</code> або обидва <code>false</code>;</li>
+ <li>обидва є рядками однакової довжини з однаковими символами у однаковому порядку;</li>
+ <li>обидва є тим самим об'єктом (тобто, обидва мають те саме посилання);</li>
+ <li>обидва є числами та
+  <ul>
+   <li>обидва <code>+0</code>;</li>
+   <li>обидва <code>-0</code>;</li>
+   <li>обидва {{jsxref("NaN")}};</li>
+   <li>або обидва ненульові та не {{jsxref("NaN")}}, і мають однакові значення.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Це <em>не</em> те саме, що й рівність відповідно до оператора {{jsxref("Operators/Оператори_порівняння", "==", "#Equality")}}. Оператор <code>==</code> здійснює приведення типів обох операндів (якщо вони належать до різних типів даних) перед перевіркою на рівність (в результаті такий вираз як <code>"" == false</code> має значення <code>true</code>), натомість, метод <code>Object.is</code> не перетворює жодне значення.</p>
+
+<p>Це також <em>не</em> те саме, що й рівність відповідно до оператора {{jsxref("Operators/Оператори_порівняння", "===", "#Identity")}}. Оператор <code>===</code> (так само, як оператор <code>==</code>) вважає рівними числові значення <code>-0</code> та <code>+0</code>, а значення {{jsxref("Number.NaN")}} не вважає рівним до {{jsxref("NaN")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">Object.is('foo', 'foo');     // true
+Object.is(window, window);   // true
+
+Object.is('foo', 'bar');     // false
+Object.is([], []);           // false
+
+var foo = { a: 1 };
+var bar = { a: 1 };
+Object.is(foo, foo);       // true
+Object.is(foo, bar);       // false
+
+Object.is(null, null);       // true
+
+// Особливі Випадки
+Object.is(0, -0);            // false
+Object.is(-0, -0);           // true
+Object.is(NaN, 0/0);         // true
+</pre>
+
+<h2 id="Запасний_варіант_поліфіл">Запасний варіант (поліфіл)</h2>
+
+<pre class="brush: js">if (!Object.is) {
+  Object.is = function(x, y) {
+    // Алгоритм SameValue
+    if (x === y) { // Steps 1-5, 7-10
+      // Кроки 6.b-6.e: +0 != -0
+      return x !== 0 || 1 / x === 1 / y;
+    } else {
+      // Крок 6.a: NaN == NaN
+      return x !== x &amp;&amp; y !== y;
+    }
+  };
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.is', 'Object.is')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Первинне визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.is', 'Object.is')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Object.is")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Перевірка_на_рівність_та_однаковість">Перевірка на рівність та однаковість</a> — порівняння усіх трьох вбудованих мірил однаковості</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/isextensible/index.html b/files/uk/web/javascript/reference/global_objects/object/isextensible/index.html
new file mode 100644
index 0000000000..440aa85e1f
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/isextensible/index.html
@@ -0,0 +1,112 @@
+---
+title: Object.isExtensible()
+slug: Web/JavaScript/Reference/Global_Objects/Object/isExtensible
+tags:
+  - ECMAScript5
+  - JavaScript
+  - Object
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/isExtensible
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>Object.isExtensible()</code></strong> визначає, чи є об'єкт розширюваним (чи може він бути доповнений новими властивостями).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-isextensible.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Object.isExtensible(<var>obj</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Об'єкт, який необхідно перевірити.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>{{jsxref("Boolean","Булеве значення")}}, що вказує, чи є об'єкт розширюваним.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>За замовчуванням об'єкти є розширюваними: нові властивості можуть додаватися до них, і (у рушіях, що підтримують {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}}) їхня властивість __proto__ може бути змінена. Об'єкт можна зробити нерозширюваним за допомогою {{jsxref("Object.preventExtensions()")}}, {{jsxref("Object.seal()")}} або {{jsxref("Object.freeze()")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">// Нові об'єкти є розширюваними.
+var empty = {};
+Object.isExtensible(empty); // === true
+
+// ...але це можна змінити.
+Object.preventExtensions(empty);
+Object.isExtensible(empty); // === false
+
+// Запечатані об'єкти є за визначенням нерозширюваними.
+var sealed = Object.seal({});
+Object.isExtensible(sealed); // === false
+
+// Заморожені об'єкти також за визначенням є нерозширюваними.
+var frozen = Object.freeze({});
+Object.isExtensible(frozen); // === false
+</pre>
+
+<h2 id="Примітки">Примітки</h2>
+
+<p>У ES5, якщо аргументом даного методу виступає не об'єкт (примітивне значення), це спричинить помилку {{jsxref("TypeError")}}. У ES2015 ж, якщо аргументом методу буде не об'єкт, він буде сприйнятий як звичайний нерозширюваний об'єкт, тобто, вихідним значенням буде <code>false</code>.</p>
+
+<pre class="brush: js">Object.isExtensible(1);
+// TypeError: 1 is not an object (код ES5)
+
+Object.isExtensible(1);
+// false                         (код ES2015)
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.13', 'Object.isExtensible')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.isextensible', 'Object.isExtensible')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.isextensible', 'Object.isExtensible')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.isExtensible")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+ <li>{{jsxref("Reflect.isExtensible()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/isfrozen/index.html b/files/uk/web/javascript/reference/global_objects/object/isfrozen/index.html
new file mode 100644
index 0000000000..b693befb9a
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/isfrozen/index.html
@@ -0,0 +1,178 @@
+---
+title: Object.isFrozen()
+slug: Web/JavaScript/Reference/Global_Objects/Object/isFrozen
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - Об'єкт
+  - метод
+  - розширюваний
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/isFrozen
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>Object.isFrozen()</strong></code> визначає, чи є об'єкт {{jsxref("Object.freeze()", "замороженим", "", 1)}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-isfrozen.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Object.isFrozen(<var>obj</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Об'єкт для перевірки.</dd>
+</dl>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>{{jsxref("Boolean", "Булеве значення")}}, що вказує, чи є наданий об'єкт замороженим.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Об'єкт є замороженим тільки тоді, коли він не є {{jsxref("Object.isExtensible()", "розширюваним", "", 1)}}, всі його властивості недоступні для налаштування, і всі його властивості-значення (тобто, властивості, які не є властивостями-аксесорами, що мають гетер або сетер) недоступні для запису.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">// Новий об'єкт є розширюваним, отже, він не заморожений
+Object.isFrozen({}); // === false
+
+// Пустий об'єкт, котрий є нерозширюваним,
+// є порожньо замороженим.
+var vacuouslyFrozen = Object.preventExtensions({});
+Object.isFrozen(vacuouslyFrozen); // === true
+
+// Новий об'єкт з однією властивістю є також розширюваним,
+// отже, не заморожений.
+var oneProp = { p: 42 };
+Object.isFrozen(oneProp); // === false
+
+// Припинення розширювання об'єкту не робить його замороженим,
+// тому що властивість досі доступна
+// для налаштування (та запису).
+Object.preventExtensions(oneProp);
+Object.isFrozen(oneProp); // === false
+
+// ...але видалення цієї властивості робить об'єкт
+// порожньо замороженим.
+delete oneProp.p;
+Object.isFrozen(oneProp); // === true
+
+// Нерозширюваний об'єкт з властивістю, недоступною для запису,
+// але доступною для налаштування, не є замороженим.
+var nonWritable = { e: 'plep' };
+Object.preventExtensions(nonWritable);
+Object.defineProperty(nonWritable, 'e', {
+  writable: false
+}); // зробити властивість недоступною для запису
+Object.isFrozen(nonWritable); // === false
+
+// Якщо зробити цю властивість недоступною для налаштування,
+// тоді об'єкт буде замороженим.
+Object.defineProperty(nonWritable, 'e', {
+  configurable: false
+}); // зробити властивість недоступною для налаштування
+Object.isFrozen(nonWritable); // === true
+
+// Нерозширюваний об'єкт з властивістю, недоступною
+// для налаштування, але доступною для запису, також не є замороженим.
+var nonConfigurable = { release: 'the kraken!' };
+Object.preventExtensions(nonConfigurable);
+Object.defineProperty(nonConfigurable, 'release', {
+  configurable: false
+});
+Object.isFrozen(nonConfigurable); // === false
+
+// Якщо зробити цю властивість недоступною для запису,
+// тоді об'єкт буде заморожений.
+Object.defineProperty(nonConfigurable, 'release', {
+  writable: false
+});
+Object.isFrozen(nonConfigurable); // === true
+
+// Нерозширюваний об'єкт з властивістю-аксесором,
+// доступною для налаштування, не є замороженим.
+var accessor = { get food() { return 'ням'; } };
+Object.preventExtensions(accessor);
+Object.isFrozen(accessor); // === false
+
+// ...але якщо зробити цю властивість недоступною для налаштування,
+// тоді об'єкт буде замороженим.
+Object.defineProperty(accessor, 'food', {
+  configurable: false
+});
+Object.isFrozen(accessor); // === true
+
+// Але найпростіший спосіб зробити об'єкт замороженим -
+// це викликати на ньому метод Object.freeze.
+var frozen = { 1: 81 };
+Object.isFrozen(frozen); // === false
+Object.freeze(frozen);
+Object.isFrozen(frozen); // === true
+
+// За визначенням, заморожений об'єкт є нерозширюваним.
+Object.isExtensible(frozen); // === false
+
+// Також, за визначенням, заморожений об'єкт є запечатаним.
+Object.isSealed(frozen); // === true
+</pre>
+
+<h2 id="Примітки">Примітки</h2>
+
+<p>У ES5, якщо аргументом цього методу є не об'єкт (примітив), це спричинить {{jsxref("TypeError")}}. У ES2015 аргумент, що не є об'єктом, сприйматиметься як звичайний заморожений об'єкт, метод просто поверне <code>true</code>.</p>
+
+<pre class="brush: js">Object.isFrozen(1);
+// TypeError: 1 is not an object (код ES5)
+
+Object.isFrozen(1);
+// true                          (код ES2015)
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.12', 'Object.isFrozen')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.isfrozen', 'Object.isFrozen')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.isfrozen', 'Object.isFrozen')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.isFrozen")}}</p>
+</div>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/isprototypeof/index.html b/files/uk/web/javascript/reference/global_objects/object/isprototypeof/index.html
new file mode 100644
index 0000000000..b5472b105d
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/isprototypeof/index.html
@@ -0,0 +1,125 @@
+---
+title: Object.prototype.isPrototypeOf()
+slug: Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf
+tags:
+  - JavaScript
+  - Об'єкт
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>isPrototypeOf()</strong></code> перевіряє, чи існує об'єкт у ланцюжку прототипів іншого об'єкта.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-prototype-isprototypeof.html")}}</div>
+
+
+
+<div class="note">
+<p><code>isPrototypeOf()</code> відрізняється від оператора {{jsxref("Operators/instanceof", "instanceof")}}.У виразі "<code>object instanceof AFunction</code>" ланцюжок прототипів об'єкта <code>object</code> перевіряється на <code>AFunction.prototype</code>, а не на сам об'єкт <code>AFunction</code>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>prototypeObj</var>.isPrototypeOf(<var>object</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>Об'єкт, чий ланцюжок прототипів перевірятиметься.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>{{jsxref("Boolean","Булеве значення")}}, що зазначає, чи присутній об'єкт, що викликав метод, у ланцюжку прототипів вказаного об'єкта.</p>
+
+<h3 id="Помилки_що_викидаються">Помилки, що викидаються</h3>
+
+<dl>
+ <dt>{{jsxref("TypeError")}}</dt>
+ <dd>Помилка {{jsxref("TypeError")}} викидається, якщо <code><var>prototypeObj</var></code> дорівнює undefined або null.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>isPrototypeOf()</code> дозволяє перевірити, чи існує об'єкт у ланцюжку прототипів іншого об'єкта.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Цей приклад демонструє, що <code>Baz.prototype</code>, <code>Bar.prototype</code>, <code>Foo.prototype</code> та <code>Object.prototype</code> присутні у ланцюжку прототипів об'єкта <code>baz</code>:</p>
+
+<pre class="brush: js">function Foo() {}
+function Bar() {}
+function Baz() {}
+
+Bar.prototype = Object.create(Foo.prototype);
+Baz.prototype = Object.create(Bar.prototype);
+
+var baz = new Baz();
+
+console.log(Baz.prototype.isPrototypeOf(baz)); // true
+console.log(Bar.prototype.isPrototypeOf(baz)); // true
+console.log(Foo.prototype.isPrototypeOf(baz)); // true
+console.log(Object.prototype.isPrototypeOf(baz)); // true
+</pre>
+
+<p>Метод <code>isPrototypeOf()</code>, разом з оператором {{jsxref("Operators/instanceof", "instanceof")}} можуть стати в нагоді, коли ви маєте код, який працює тільки з об'єктами, похідними від певного ланцюга прототипів, наприклад, щоб гарантувати, що певні методи або властивості будуть присутні на цьому об'єкті.</p>
+
+<p>Наприклад, перевіримо, чи походить об'єкт <code>baz</code> від <code>Foo.prototype</code>:</p>
+
+<pre class="brush: js">if (Foo.prototype.isPrototypeOf(baz)) {
+  // виконати безпечні дії
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.6', 'Object.prototype.isPrototypeOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.isprototypeof', 'Object.prototype.isPrototypeOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.isprototypeof', 'Object.prototype.isPrototypeOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.isPrototypeOf")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Operators/instanceof", "instanceof")}}</li>
+ <li>{{jsxref("Object.getPrototypeOf()")}}</li>
+ <li>
+  <div>{{jsxref("Object.setPrototypeOf()")}}</div>
+ </li>
+ <li>{{jsxref("Object.prototype.proto","Object.prototype.__proto__")}} </li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/issealed/index.html b/files/uk/web/javascript/reference/global_objects/object/issealed/index.html
new file mode 100644
index 0000000000..5bb61b22c6
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/issealed/index.html
@@ -0,0 +1,139 @@
+---
+title: Object.isSealed()
+slug: Web/JavaScript/Reference/Global_Objects/Object/isSealed
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - Об'єкт
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/isSealed
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>Object.isSealed()</strong></code> визначає, чи є об'єкт запечатаним.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-issealed.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Object.isSealed(<var>obj</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Об'єкт, який треба перевірити.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>{{jsxref("Boolean","Булеве значення")}}, що вказує, чи є об'єкт запечатаним.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Повертає <code>true</code>, якщо об'єкт запечатаний, інакше повертає <code>false</code>. Об'єкт вважається запечатаним, якщо він {{jsxref("Object.isExtensible", "нерозширюваний", "", 1)}} та якщо всі його властивості недоступні для налаштування і, відповідно, недоступні для видалення (але не обов'язково недоступні для запису).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">// За замовчуванням об'єкти не запечатані.
+var empty = {};
+Object.isSealed(empty); // === false
+
+// Якщо зробити порожній об'єкт нерозширюваним,
+// він стає порожньо запечатаним.
+Object.preventExtensions(empty);
+Object.isSealed(empty); // === true
+
+// Те саме стосується непорожнього об'єкта,
+// хіба що усі його властивості недоступні для налаштування.
+var hasProp = { fee: 'Крибле крабле бум' };
+Object.preventExtensions(hasProp);
+Object.isSealed(hasProp); // === false
+
+// Але зробимо їх усі недоступними для налаштування,
+// і об'єкт стає запечатаним.
+Object.defineProperty(hasProp, 'fee', {
+  configurable: false
+});
+Object.isSealed(hasProp); // === true
+
+// Звісно, найпростіший спосіб запечатати об'єкт -
+// це Object.seal.
+var sealed = {};
+Object.seal(sealed);
+Object.isSealed(sealed); // === true
+
+// Запечатаний об'єкт, за визначенням, нерозширюваний.
+Object.isExtensible(sealed); // === false
+
+// Запечатаний об'єкт може бути замороженим,
+// але це не обов'язково.
+Object.isFrozen(sealed); // === true
+// (усі властивості також недоступні для запису)
+
+var s2 = Object.seal({ p: 3 });
+Object.isFrozen(s2); // === false
+// ('p' досі доступна для запису)
+
+var s3 = Object.seal({ get p() { return 0; } });
+Object.isFrozen(s3); // === true
+// (для аксесорів має значення тільки доступність для налаштування)
+</pre>
+
+<h2 id="Примітки">Примітки</h2>
+
+<p>У ES5 якщо аргументом цього методу є не об'єкт (примітив), це спричинить {{jsxref("TypeError")}}. У ES2015 аргумент, що не є об'єктом, сприйматиметься як звичайний запечатаний об'єкт, метод просто поверне <code>true</code>.</p>
+
+<pre class="brush: js">Object.isSealed(1);
+// TypeError: 1 is not an object (код ES5)
+
+Object.isSealed(1);
+// true                          (код ES2015)
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.11', 'Object.isSealed')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.issealed', 'Object.isSealed')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.issealed', 'Object.isSealed')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.isSealed")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/keys/index.html b/files/uk/web/javascript/reference/global_objects/object/keys/index.html
new file mode 100644
index 0000000000..796209d575
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/keys/index.html
@@ -0,0 +1,171 @@
+---
+title: Object.keys()
+slug: Web/JavaScript/Reference/Global_Objects/Object/keys
+tags:
+  - ECMAScript5
+  - JavaScript
+  - Method
+  - Object
+  - Об'єкт
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/keys
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>Object.keys()</strong></code> повертає масив <strong>імен</strong> особистих перелічуваних властивостей переданого об'єкта в тому самому порядку, що його повертає звичайний цикл.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/object-keys.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Object.keys(<var>obj</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Об'єкт, перелік властивостей якого треба отримати.</dd>
+</dl>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>Масив рядків, що передають імена всіх перелічуваних властивостей переданого об'єкта.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p><code>Object.keys()</code> повертає масив рядків, що передають імена перелічуваних властивостей, які належать безпосередньо об'єктові <code>obj</code>. Порядок отриманих властивостей збігається із тим, що його забезпечує перебір властивостей вручну за допомогою циклу.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">// простий масив
+var arr = ['а', 'б', 'в'];
+console.log(Object.keys(arr));  // виводить ['0', '1', '2']
+
+// масив як об'єкт
+var obj = { 0: 'а', 1: 'б', 2: 'в' };
+console.log(Object.keys(obj));  // виводить ['0', '1', '2']
+
+// масив як об'єкт з випадковим порядком ключів
+var anObj = { 100: 'а', 2: 'б', 7: 'в' };
+console.log(Object.keys(anObj));  // виводить ['2', '7', '100']
+
+// getFoo є неперелічуваною властивістю
+var myObj = Object.create({}, {
+    getFoo: {
+        value: function () { return this.foo; }
+    }
+});
+myObj.foo = 1;
+console.log(Object.keys(myObj));  // виводить ['foo']</pre>
+
+<p>Якщо вам потрібні усі властивості, навіть неперелічувані, зверніть увагу на <code>{{jsxref("Object.getOwnPropertyNames()")}}</code>.</p>
+
+<h2 id="Зауваги">Зауваги</h2>
+
+<p>У ES5 метод викидає {{jsxref("Global_Objects/TypeError", "TypeError")}}, якщо арґумент не є об'єктом (а натомість є {{glossary("Primitive", "простою величиною")}}). Водночас у ES2015 арґумент, що належить до простого типу даних, буде перетворено на об'єкт.</p>
+
+<pre class="brush: js">Object.keys('foo');
+// TypeError: "foo" is not an object (код ES5)
+
+Object.keys('foo');
+// ["0", "1", "2"]                   (код ES2015)
+</pre>
+
+<h2 id="Запасний_варіант_поліфіл">Запасний варіант (поліфіл)</h2>
+
+<p>Для старіших середовищ, де метод <code>Object.keys()</code> відсутній, можна забезпечити запасний варіант, скориставшись таким кодом:</p>
+
+<pre class="brush: js">// З https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
+if (!Object.keys) {
+  Object.keys = (function() {
+    'use strict';
+    var hasOwnProperty = Object.prototype.hasOwnProperty,
+        hasDontEnumBug = !({ toString: null }).propertyIsEnumerable('toString'),
+        dontEnums = [
+          'toString',
+          'toLocaleString',
+          'valueOf',
+          'hasOwnProperty',
+          'isPrototypeOf',
+          'propertyIsEnumerable',
+          'constructor'
+        ],
+        dontEnumsLength = dontEnums.length;
+
+    return function(obj) {
+      if (typeof obj !== 'function' &amp;&amp; (typeof obj !== 'object' || obj === null)) {
+        throw new TypeError('Object.keys called on non-object');
+      }
+
+      var result = [], prop, i;
+
+      for (prop in obj) {
+        if (hasOwnProperty.call(obj, prop)) {
+          result.push(prop);
+        }
+      }
+
+      if (hasDontEnumBug) {
+        for (i = 0; i &lt; dontEnumsLength; i++) {
+          if (hasOwnProperty.call(obj, dontEnums[i])) {
+            result.push(dontEnums[i]);
+          }
+        }
+      }
+      return result;
+    };
+  }());
+}
+</pre>
+
+<p>Зауважте, що наведений код у IE7 (а також, можливо, у IE8) повертає також неперелічувані властивості для об'єктів, що їх отримано з іншого вікна.</p>
+
+<p>Простий запасний варіант для переглядача можна знайти в статті <a href="http://tokenposts.blogspot.com.au/2012/04/javascript-objectkeys-browser.html">Javascript - Object.keys Browser Compatibility</a>.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.14', 'Object.keys')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Первинне визначення. Реалізовано у JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.keys', 'Object.keys')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.keys', 'Object.keys')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Object.keys")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Перелічуваність_та_належність_властивостей">Перелічуваність та належність властивостей</a></li>
+ <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Object.values()")}}</li>
+ <li>{{jsxref("Object.entries()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/nosuchmethod/index.html b/files/uk/web/javascript/reference/global_objects/object/nosuchmethod/index.html
new file mode 100644
index 0000000000..fbd98cf2e2
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/nosuchmethod/index.html
@@ -0,0 +1,166 @@
+---
+title: Object.prototype.__noSuchMethod__
+slug: Web/JavaScript/Reference/Global_Objects/Object/noSuchMethod
+tags:
+  - JavaScript
+  - Object
+  - Властивість
+  - застаріла
+  - нестандартна
+translation_of: Archive/Web/JavaScript/Object.noSuchMethod
+---
+<div>{{JSRef}}{{Non-standard_Header}}{{Obsolete_Header("gecko43")}}</div>
+
+<p>Властивість <strong><code>__noSuchMethod__</code></strong> використовувалась для посилання на функцію, що мала виконатися, коли на об'єкті викликався неіснуючий метод, але ця функція більше не доступна.</p>
+
+<p>В той час як метод <code><strong>__noSuchMethod__</strong></code> був прибраний, специфікація ECMAScript 2015 містить об'єкт {{JSxRef("Proxy")}}, який допоможе досягти описаного нижче (і навіть більше).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>obj</var>.__noSuchMethod__ = <var>fun</var></code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>fun</code></dt>
+ <dd>Функція, що має вигляд</dd>
+ <dd>
+ <pre class="brush: js"><code>function (<var>id</var>, <var>args</var>) { . . . }</code></pre>
+
+ <dl>
+  <dt><code>id</code></dt>
+  <dd>Ім'я неіснуючого методу, що був викликаний</dd>
+  <dt><code>args</code></dt>
+  <dd>Масив аргументів, переданих у метод</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>За замовчуванням спроба викликати метод, який не існує, на об'єкті призводить до викидання {{JSxRef("TypeError")}}. Цю поведінку можна обійти, визначивши функцію у властивості об'єкта <code>__noSuchMethod__</code>. Функція приймає два аргумента, перший - це ім'я метода, що викликається, другий - це масив аргументів, які передаються під час виклику. Другий аргумент є справжнім масивом (тобто, він успадковується через ланцюг {{JSxRef("Array.prototype")}}), а не подібним до масиву <a href="/uk/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments" title="JavaScript/Reference/Functions/arguments">об'єктом arguments</a>.</p>
+
+<p>Якщо цей метод не можна викликати, чи тому що він дорівнює <code>undefined</code>, чи був видалений, чи йому вручну було присвоєне нефункціональне значення, рушій JavaScript повернеться до викидання <code>TypeError</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Проста_перевірка___noSuchMethod__">Проста перевірка <code>__noSuchMethod__</code></h3>
+
+<pre class="brush: js">var o = {
+  __noSuchMethod__: function(id, args) {
+                      console.log(id, '(' + args.join(', ') + ')');
+                    }
+};
+
+o.foo(1, 2, 3);
+o.bar(4, 5);
+o.baz();
+
+// Виведе
+// foo (1, 2, 3)
+// bar (4, 5)
+// baz ()
+</pre>
+
+<h3 id="Використання___noSuchMethod___для_імітації_множинного_спадкування">Використання <code>__noSuchMethod__</code> для імітації множинного спадкування</h3>
+
+<p>Приклад коду, що реалізує примітивну форму множинного спадкування, наведений нижче.</p>
+
+<pre class="brush: js">// Не працює, якщо батьківські об'єкти є результатом множинного спадкування
+function noMethod(name, args) {
+  var parents = this.__parents_;
+
+  // Пройти через усі батьківські об'єкти
+  for (var i = 0; i &lt; parents.length; i++) {
+    // Якщо знаходимо функцію у батьківського об'єкта, викликаємо її
+    if (typeof parents[i][name] == 'function') {
+      return parents[i][name].apply(this, args);
+    }
+  }
+
+  // Якщо ми дістались сюди, метод не був знайдений
+  throw new TypeError;
+}
+
+// Додавало батьківський об'єкт для множинного спадкування
+function addParent(obj, parent) {
+  // Якщо об'єкт неініціалізований, ініціалізуємо його
+  if (!obj.__parents_) {
+    obj.__parents_ = [];
+    obj.__noSuchMethod__ = noMethod;
+  }
+
+  // Додати батьківський об'єкт
+  obj.__parents_.push(parent);
+}
+</pre>
+
+<p>Приклад використання цієї ідеї наведений нижче.</p>
+
+<pre class="brush: js">// Базовий клас 1
+function NamedThing(name) {
+  this.name = name;
+}
+
+NamedThing.prototype = {
+  getName: function() { return this.name; },
+  setName: function(newName) { this.name = newName; }
+}
+
+// Базовий клас 2
+function AgedThing(age) {
+  this.age = age;
+}
+
+AgedThing.prototype = {
+  getAge: function() { return this.age; },
+  setAge: function(age) { this.age = age; }
+}
+
+// Дочірній клас. Наслідується від NamedThing та AgedThing,
+// а також визначає адресу
+function Person(name, age, address){
+  addParent(this, NamedThing.prototype);
+  NamedThing.call(this, name);
+  addParent(this, AgedThing.prototype);
+  AgedThing.call(this, age);
+  this.address = address;
+}
+
+Person.prototype = {
+  getAddr: function() { return this.address; },
+  setAddr: function(addr) { this.address = addr; }
+}
+
+var bob = new Person('Боб', 25, 'Нью-Йорк');
+
+console.log('getAge ' + (('getAge' in bob) ? 'належить' : 'не належить') + ' Бобу');
+// getAge не належить Бобу
+
+console.log("Вік Боба: " + bob.getAge());
+// Вік Боба: 25
+
+console.log('getName ' + (('getName' in bob) ? 'належить' : 'не належить') + ' Бобу');
+// getName не належить Бобу
+
+console.log("Ім'я Боба: " + bob.getName());
+// Ім'я Боба: Боб
+
+console.log('getAddr ' + (('getAddr' in bob) ? 'належить' : 'не належить') + ' Бобу');
+// getAddr належить Бобу
+
+console.log("Адреса Боба: " + bob.getAddr());
+// Адреса Боба: Нью-Йорк
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Не є частиною жодних специфікацій. Ця функціональність була прибрана, дивіться {{bug(683218)}}.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.noSuchMethod")}}</p>
+</div>
diff --git a/files/uk/web/javascript/reference/global_objects/object/object/index.html b/files/uk/web/javascript/reference/global_objects/object/object/index.html
new file mode 100644
index 0000000000..223a18bbb8
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/object/index.html
@@ -0,0 +1,84 @@
+---
+title: Конструктор Object()
+slug: Web/JavaScript/Reference/Global_Objects/Object/Object
+tags:
+  - JavaScript
+  - Довідка
+  - Конструктор
+  - Об'єкт
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/Object
+---
+<div>{{JSRef}}</div>
+
+<p><strong>Конструктор</strong> <strong><code>Object</code></strong> створює об'єктну обгортку для наданого значення.</p>
+
+<ul>
+ <li>Якщо значенням є {{jsxref("null")}} або {{jsxref("undefined")}}, це створить та поверне порожній об'єкт.</li>
+ <li>Інакше, буде повернений об'єкт того типу, який відповідає наданому значенню.</li>
+ <li>Якщо значення вже є об'єктом, буде повернене це значення.</li>
+</ul>
+
+<p>Викликаний не у контексті конструктора, <code>Object</code> поводиться ідентично до <code>new Object()</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">new Object()
+new Object(<var>value</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Будь-яке значення.</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Створення_нового_обєкта">Створення нового об'єкта</h3>
+
+<pre class="brush: js notranslate">let o = new Object()
+o.foo = 42
+
+console.log(o)
+// Object { foo: 42 }</pre>
+
+<h3 id="Використання_Object_з_типами_undefined_та_null">Використання <code>Object</code> з типами <code>undefined</code> та <code>null</code></h3>
+
+<p>Наступні приклади зберігають порожній об'єкт <code>Object</code> у <code>o</code>:</p>
+
+<pre class="brush: js notranslate">let o = new Object()
+</pre>
+
+<pre class="brush: js notranslate">let o = new Object(undefined)
+</pre>
+
+<pre class="brush: js notranslate">let o = new Object(null)</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object-constructor', 'Object constructor')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("javascript.builtins.Object.Object")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів">Ініціалізатор об'єкта</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/observe/index.html b/files/uk/web/javascript/reference/global_objects/object/observe/index.html
new file mode 100644
index 0000000000..ec4d1ca5e8
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/observe/index.html
@@ -0,0 +1,153 @@
+---
+title: Object.observe()
+slug: Web/JavaScript/Reference/Global_Objects/Object/observe
+tags:
+  - JavaScript
+  - Об'єкт
+  - застарілий
+  - метод
+translation_of: Archive/Web/JavaScript/Object.observe
+---
+<div>{{JSRef}} {{obsolete_header}}</div>
+
+<p>Метод <strong><code>Object.observe()</code></strong> використовувався для асинхронного спостереження за змінами у об'єкті. Він надавав послідовність змін у порядку виникнення. Однак, цей API застарілий та був прибраний з переглядачів. Ви можете, натомість, скористатись більш загальним об'єктом {{jsxref("Proxy")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Object.observe(<var>obj</var>, <var>callback</var>[, <var>acceptList</var>])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Об'єкт для спостереження.</dd>
+ <dt><code>callback</code></dt>
+ <dd>Функція, яка викликається кожен раз, коли відбуваються зміни, з наступним аргументом:
+ <dl>
+  <dt><code>changes</code></dt>
+  <dd>Масив об'єктів, кожен з яких відображає зміну. Властивості цих об'єктів змін:
+  <ul>
+   <li><strong><code>name</code></strong>: Ім'я властивості, яка була змінена.</li>
+   <li><strong><code>object</code></strong>: Змінений об'єкт після того, як відбулася зміна.</li>
+   <li><strong><code>type</code></strong>: Строка, що вказує тип зміни. Один з <code>"add"</code>, <code>"update"</code> або <code>"delete"</code>.</li>
+   <li><strong><code>oldValue</code></strong>: Тільки для типів <code>"update"</code> та <code>"delete"</code>. Значення перед зміною.</li>
+  </ul>
+  </dd>
+ </dl>
+ </dd>
+ <dt><code>acceptList</code></dt>
+ <dd>Список типів змін для спостереження на наданому об'єкті для наданої функції <code>callback</code>. Якщо не заданий, буде використаний масив <code>["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"]</code>.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Об'єкт для спостереження.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Функція <code>callback</code> викликається кожен раз, коли у <code>obj</code> відбувається зміна, з масивом усіх змін у порядку, в якому вони відбувались.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Логування_усіх_шістьох_типів">Логування усіх шістьох типів</h3>
+
+<pre class="brush: js">var obj = {
+  foo: 0,
+  bar: 1
+};
+
+Object.observe(obj, function(changes) {
+  console.log(changes);
+});
+
+obj.baz = 2;
+// [{name: 'baz', object: &lt;obj&gt;, type: 'add'}]
+
+obj.foo = 'привіт';
+// [{name: 'foo', object: &lt;obj&gt;, type: 'update', oldValue: 0}]
+
+delete obj.baz;
+// [{name: 'baz', object: &lt;obj&gt;, type: 'delete', oldValue: 2}]
+
+Object.defineProperty(obj, 'foo', {writable: false});
+// [{name: 'foo', object: &lt;obj&gt;, type: 'reconfigure'}]
+
+Object.setPrototypeOf(obj, {});
+// [{name: '__proto__', object: &lt;obj&gt;, type: 'setPrototype', oldValue: &lt;prototype&gt;}]
+
+Object.seal(obj);
+// [
+//   {name: 'foo', object: &lt;obj&gt;, type: 'reconfigure'},
+//   {name: 'bar', object: &lt;obj&gt;, type: 'reconfigure'},
+//   {object: &lt;obj&gt;, type: 'preventExtensions'}
+// ]
+</pre>
+
+<h3 id="Звязування_даних">Зв'язування даних</h3>
+
+<pre class="brush: js">// Модель користувача
+var user = {
+  id: 0,
+  name: 'Брендан Айк',
+  title: 'п.'
+};
+
+// Створити привітання для користувача
+function updateGreeting() {
+  user.greeting = 'Вітаю, ' + user.title + ' ' + user.name + '!';
+}
+updateGreeting();
+
+Object.observe(user, function(changes) {
+  changes.forEach(function(change) {
+    // Кожен раз, коли змінюється ім'я чи титул, оновити привітання
+    if (change.name === 'name' || change.name === 'title') {
+      updateGreeting();
+    }
+  });
+});
+</pre>
+
+<h3 id="Користувацький_тип_зміни">Користувацький тип зміни</h3>
+
+<pre class="brush: js">// Точка на 2-вимірній площині
+var point = {x: 0, y: 0, distance: 0};
+
+function setPosition(pt, x, y) {
+  // Виконуємо користувацьку зміну
+  Object.getNotifier(pt).performChange('reposition', function() {
+    var oldDistance = pt.distance;
+    pt.x = x;
+    pt.y = y;
+    pt.distance = Math.sqrt(x * x + y * y);
+    return {oldDistance: oldDistance};
+  });
+}
+
+Object.observe(point, function(changes) {
+  console.log('Зміна відстані: ' + (point.distance - changes[0].oldDistance));
+}, ['reposition']);
+
+setPosition(point, 3, 4);
+// Зміна відстані: 5
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p><a href="https://github.com/arv/ecmascript-object-observe">Strawman proposal specification</a>.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.observe")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.unobserve()")}} {{obsolete_inline}}</li>
+ <li>{{jsxref("Array.observe()")}} {{obsolete_inline}}</li>
+ <li><a href="https://esdiscuss.org/topic/an-update-on-object-observe">Прибирання Object.Observer</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/parent/index.html b/files/uk/web/javascript/reference/global_objects/object/parent/index.html
new file mode 100644
index 0000000000..03a5568469
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/parent/index.html
@@ -0,0 +1,41 @@
+---
+title: Object.prototype.__parent__
+slug: Web/JavaScript/Reference/Global_Objects/Object/Parent
+tags:
+  - JavaScript
+  - Object
+  - Властивість
+  - застаріла
+  - нестандартна
+translation_of: Archive/Web/JavaScript/Object.parent
+---
+<div>{{JSRef}}{{Non-standard_Header}}{{Obsolete_Header("gecko2")}}</div>
+
+<p>Властивість <strong><code>__parent__</code></strong> вказувала на контекст об'єкта, але була прибрана.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>obj</var>.__parent__</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Для об'єктів верхнього рівня це, наприклад, window.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Не є частиною жодних специфікацій.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.parent")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a class="external" href="http://whereswalden.com/2010/05/07/spidermonkey-change-du-jour-the-special-__parent__-property-has-been-removed/">SpiderMonkey change du jour: the special __parent__ property has been removed</a></li>
+ <li><a href="/uk/docs/Components.utils.getGlobalForObject">Components.utils.getGlobalForObject</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/preventextensions/index.html b/files/uk/web/javascript/reference/global_objects/object/preventextensions/index.html
new file mode 100644
index 0000000000..3fe25fb9b0
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/preventextensions/index.html
@@ -0,0 +1,139 @@
+---
+title: Object.preventExtensions()
+slug: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions
+tags:
+  - ECMAScript5
+  - JavaScript
+  - Object
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Object.preventExtensions()</strong></code> метод позбавляє можливості додавати нові властивості до об'єкта (тобто, розширювати об'єкт у подальшому).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-preventextensions.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Object.preventExtensions(<var>obj</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Об'єкт, котрий має стати нерозширюваним.</dd>
+</dl>
+
+<h3 id="Вихідне_значення">Вихідне значення</h3>
+
+<p>Об'єкт, що робиться нерозширюваним.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Об'єкт вважається розширюваним, якщо до нього можуть бути додані нові властивості. <code>Object.preventExtensions()</code> робить об'єкт нерозширюваним, тобто таким, який уже ніколи не зможе містити інших властивостей, окрім тих, котрі він мав на момент застосування до нього даного методу. Зверніть увагу на те, що властивості нерозширюваного об'єкта все ж можна <em>видаляти</em>. Спроба ж додати нові властивості до нерозширюваного об'єкта не увінчається успіхом: або властивості просто не будуть додані без жодних помилок, або ж згенерується помилка типу {{jsxref("TypeError")}} (найчастіше, але не виключно, у {{jsxref("Strict_mode", "строгому режимі", "", 1)}}).</p>
+
+<p><code>Object.preventExtensions()</code> має вплив лише на додавання особистих властивостей об'єкта. Властивості можуть бути додані до прототипу об'єкта.<br>
+ <br>
+ Цей метод робить <code>[[prototype]]</code> цільового об'єкта незмінним; будь-яке перевизначення <code>[[prototype]]</code> спричинить помилку <code>TypeError</code>. Ця поведінка є специфічною для внутрішньої властивості <code>[[prototype]]</code>, інші властивості цільового об'єкта залишаються змінними.</p>
+
+<p>Як тільки об'єкт стає нерозширюваним, неможливо зробити його знову розширюваним.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">// Object.preventExtensions повертає об'єкт,
+// який робиться нерозширюваним.
+var obj = {};
+var obj2 = Object.preventExtensions(obj);
+obj === obj2; // true
+
+// За замовчуванням усі об'єкти є розширюваними.
+var empty = {};
+Object.isExtensible(empty); // === true
+
+// ...але це можна змінити.
+Object.preventExtensions(empty);
+Object.isExtensible(empty); // === false
+
+// Object.defineProperty викине помилку, якщо спробувати додати
+// нову вдастивість до нерозширюваного об'єкта.
+var nonExtensible = { removable: true };
+Object.preventExtensions(nonExtensible);
+Object.defineProperty(nonExtensible, 'new', {
+  value: 8675309
+}); // викине TypeError
+
+// У строгому режимі спроба додати нові властивості
+// до нерозширюваного об'єкта спричиняє помилку TypeError.
+function fail() {
+  'use strict';
+  // викида TypeError
+  nonExtensible.newProperty = 'FAIL';
+}
+fail();
+</pre>
+
+<p>Прототип нерозширюваного об'єкта є незмінним:</p>
+
+<pre class="brush: js">var fixed = Object.preventExtensions({});
+// викине 'TypeError'.
+fixed.__proto__ = { oh: 'hai' };</pre>
+
+<h2 id="Примітки">Примітки</h2>
+
+<p>У ES5, якщо аргументом даного методу виступає не об'єкт (примітив), це спричинить помилку {{jsxref("TypeError")}}. У ES2015 ж, якщо аргументом методу буде не об'єкт, він буде сприйнятий як звичайний нерозширюваний об'єкт, і буде просто повернений.</p>
+
+<pre class="brush: js">Object.preventExtensions(1);
+// TypeError: 1 is not an object (код ES5)
+
+Object.preventExtensions(1);
+// 1                             (код ES2015)
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.10', 'Object.preventExtensions')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.preventextensions', 'Object.preventExtensions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.preventextensions', 'Object.preventExtensions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.preventExtensions")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+ <li>{{jsxref("Reflect.preventExtensions()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/propertyisenumerable/index.html b/files/uk/web/javascript/reference/global_objects/object/propertyisenumerable/index.html
new file mode 100644
index 0000000000..b7eafe88f0
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/propertyisenumerable/index.html
@@ -0,0 +1,149 @@
+---
+title: Object.prototype.propertyIsEnumerable()
+slug: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable
+tags:
+  - JavaScript
+  - Об'єкт
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>propertyIsEnumerable()</strong></code> повертає булеве значення, що позначає, чи є вказана властивість перелічуваною.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-prototype-propertyisenumerable.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>obj</var>.propertyIsEnumerable(<var>prop</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Ім'я властивості, яку необхідно перевірити.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>{{jsxref("Boolean","Булеве значення")}}, що позначає, чи є вказана властивість перелічуваною.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Кожен об'єкт має метод <code>propertyIsEnumerable</code>. Цей метод може визначити, чи може вказана властивість об'єкта бути перелічена циклом {{jsxref("Statements/for...in", "for...in")}}, за винятком властивостей, успадкованих через ланцюжок прототипів. Якщо об'єкт не має вказаної властивості, метод поверне <code>false</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Базове_використання_propertyIsEnumerable">Базове використання <code>propertyIsEnumerable</code></h3>
+
+<p>Наступний приклад демонструє використання <code>propertyIsEnumerable</code> на об'єктах та масивах:</p>
+
+<pre class="brush: js">var o = {};
+var a = [];
+o.prop = 'перелічувана';
+a[0] = 'перелічувана';
+
+o.propertyIsEnumerable('prop');   // повертає true
+a.propertyIsEnumerable(0);        // повертає true
+</pre>
+
+<h3 id="Визначені_користувачем_обєкти_проти_вбудованих_обєктів">Визначені користувачем об'єкти проти вбудованих об'єктів</h3>
+
+<p>Наступний приклад демонструє перелічуваність визначених користувачем властивостей у порівнянні з вбудованими:</p>
+
+<pre class="brush: js">var a = ['перелічувана'];
+
+a.propertyIsEnumerable(0);          // повертає true
+a.propertyIsEnumerable('length');   // повертає false
+
+Math.propertyIsEnumerable('random');   // повертає false
+this.propertyIsEnumerable('Math');     // повертає false
+</pre>
+
+<h3 id="Прямі_властивості_проти_успадкованих">Прямі властивості проти успадкованих</h3>
+
+<pre class="brush: js">var a = [];
+a.propertyIsEnumerable('constructor');         // повертає false
+
+function firstConstructor() {
+  this.property = 'не перелічувана';
+}
+
+firstConstructor.prototype.firstMethod = function() {};
+
+function secondConstructor() {
+  this.method = function method() { return 'перелічувана'; };
+}
+
+secondConstructor.prototype = new firstConstructor;
+secondConstructor.prototype.constructor = secondConstructor;
+
+var o = new secondConstructor();
+o.arbitraryProperty = 'перелічувана';
+
+o.propertyIsEnumerable('arbitraryProperty');   // повертає true
+o.propertyIsEnumerable('method');              // повертає true
+o.propertyIsEnumerable('property');            // повертає false
+
+o.property = 'перелічувана';
+
+o.propertyIsEnumerable('property');            // повертає true
+
+// Наступні повертають false, оскільки вони присутні на прототипі, який
+// propertyIsEnumerable не враховує (хоча останні дві
+// перебираються циклом for-in)
+o.propertyIsEnumerable('prototype');   // повертає false (згідно з JS 1.8.1/FF3.6)
+o.propertyIsEnumerable('constructor'); // повертає false
+o.propertyIsEnumerable('firstMethod'); // повертає false
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Початкове визначення</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.7', 'Object.prototype.propertyIsEnumerable')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.propertyIsEnumerable")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Перелічуваність_та_належність_властивостей">Перелічуваність та належність властивостей</a></li>
+ <li>{{jsxref("Statements/for...in", "for...in")}}</li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/proto/index.html b/files/uk/web/javascript/reference/global_objects/object/proto/index.html
new file mode 100644
index 0000000000..969759158b
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/proto/index.html
@@ -0,0 +1,127 @@
+---
+title: Object.prototype.__proto__
+slug: Web/JavaScript/Reference/Global_Objects/Object/proto
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Object
+  - Властивість
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/proto
+---
+<div>{{JSRef}}{{Deprecated_header}}
+<div class="blockIndicator warning">
+<p><strong>Застереження:</strong> Зміна властивості об'єкта <code>[[Prototype]]</code>, за природою того, як сучасні рушії JavaScript оптимізують доступ до властивостей, є дуже повільною операцією в <strong><em>кожному</em></strong> переглядачі та рушії JavaScript. Ефект для продуктивності від зміни спадкування є витонченим та обширним, і не обмежується лише часом, витраченим на команду  <code>obj.__proto__ = ...</code>, але може поширюватися на <strong><em>будь-який</em></strong> код, що має доступ до <strong><em>будь-якого</em></strong> об'єкта, чия властивість <code>[[Prototype]]</code> була змінена. Якщо ви дбаєте про продуктивність, вам варто уникати присвоювати  <code>[[Prototype]]</code> об'єкта. Замість цього створіть новий об'єкт з бажаною властивістю <code>[[Prototype]]</code>, використовуючи {{JSxRef("Object.create()")}}.</p>
+</div>
+
+<div class="blockIndicator warning">
+<p><strong>Застереження: </strong>В той час, як властивість <code>Object.prototype.__proto__</code> підтримується більшістю нинішніх переглядачів, її існування та точна поведінка були стандартизовані у специфікації ECMAScript 2015 тільки в якості legacy-функціональності для сумісності з веб-переглядачами. Для кращої підтримки рекомендовано натомість використовувати {{JSxRef("Object.getPrototypeOf()")}}.</p>
+</div>
+</div>
+
+<p>Властивість {{JSxRef("Object.prototype")}} <code>__proto__</code> - це властивість-аксесор (функція-гетер та функція-сетер), яка відкриває внутрішню властивість <code>[[Prototype]]</code> (або об'єкт, або {{JSxRef("Global_Objects/null", "null")}}) об'єкта, через який до неї звертаються.</p>
+
+<p>Використання <code>__proto__</code> є суперечливим і не заохочується. Ця властивість ніколи не включалась у специфікації мови EcmaScript, але сучасні переглядачі вирішили все одно її реалізувати. Тільки останнім часом властивість <code>__proto__</code> була стандартизована у специфікації мови ECMAScript 2015 для сумісності веб-переглядачів, і буде підтримуватись у майбутньому. Її використання не рекомендоване на користь  {{JSxRef("Object.getPrototypeOf")}}/{{JSxRef("Reflect.getPrototypeOf")}} та {{JSxRef("Object.setPrototypeOf")}}/{{JSxRef("Reflect.setPrototypeOf")}} (хоча, все одно, присвоєння <code>[[Prototype]]</code> об'єкта є повільною операцією, якої бажано уникати, якщо швидкодія має значення).</p>
+
+<p>Властивість <code>__proto__</code> також може бути використана при визначенні об'єктного літералу, щоб встановити властивість об'єкта <code>[[Prototype]]</code> при створенні, як альтернатива {{JSxRef("Object.create()")}}. Дивіться: <a href="/uk/docs/Web/JavaScript/Reference/Operators/Object_initializer">Ініціалізація об'єктів / синтаксис літералів</a>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Функція-гетер <code>__proto__</code> відкриває значення внутрішньої властивості об'єкта <code>[[Prototype]]</code>. Для об'єктів, що були створені об'єктним літералом, ця величина дорівнює {{JSxRef("Object.prototype")}}. Для об'єктів, створених літералами масивів, це значення дорівнює {{JSxRef("Array.prototype")}}. Для функцій воно дорівнює {{JSxRef("Function.prototype")}}. Для об'єктів, створених через <code>new fun</code>, де <code>fun</code> є однією з вбудованих функцій-конструкторів JavaScript ({{JSxRef("Array")}}, {{JSxRef("Boolean")}}, {{JSxRef("Date")}}, {{JSxRef("Number")}}, {{JSxRef("Object")}}, {{JSxRef("String")}} і так далі — в тому числі нові конструктори, додані з розвитком JavaScript), це значення завжди дорівнює <code>fun.prototype</code>. Для об'єктів, створених за допомогою <code>new fun</code>, де <code>fun</code> - це функція, визначена у скрипті, це значення дорівнює значенню <code>fun.prototype</code>. (Якщо тільки конструктор не повернув явно інший об'єкт, або значення <code>fun.prototype</code> не було переприсвоєне після створення екземпляра).</p>
+
+<p>Сетер <code>__proto__</code> дозволяє змінювати властивість об'єкта <code>[[Prototype]]</code>. Об'єкт має бути розширюваним згідно з {{JSxRef("Object.isExtensible()")}}: якщо це не так, викидається {{JSxRef("Global_Objects/TypeError", "TypeError")}}. Надана величина має бути об'єктом або {{JSxRef("Global_Objects/null", "null")}}. Передача будь-якого іншого значення не дасть ніякого результату.</p>
+
+<p>Щоб зрозуміти, як прототипи використовуються для наслідування, дивіться статтю посібника <a href="/uk/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Наслідування та ланцюжок прототипів</a>.</p>
+
+<p>Властивість <code>__proto__</code> - це проста властивість-аксесор {{JSxRef("Object.prototype")}}, що складається з функції-гетера та функції-сетера. Звернення до властивості <code>__proto__</code>, яке зрештою звертається до {{JSxRef("Object.prototype")}}, знайде цю властивість, але звернення, яке не звертається до {{JSxRef("Object.prototype")}}, не знайде її. Якщо інша властивість <code>__proto__</code> буде знайдена до того, як відбудеться звернення до {{JSxRef("Object.prototype")}}, то ця властивість сховає знайдену у {{JSxRef("Object.prototype")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання___proto__">Використання __proto__</h3>
+
+<pre class="brush: js notranslate">function Circle() {};
+const shape = {};
+const circle = new Circle();
+
+// Присвоїти прототип об'єкта.
+// НЕ РЕКОМЕНДОВАНО. Цей код написаний лише для прикладу. НЕ РОБІТЬ ЦЬОГО у справжньому коді.
+shape.__proto__ = circle;
+
+// Отримати прототип об'єкта
+console.log(shape.__proto__ === circle); // true
+
+const ShapeA = function () {};
+const ShapeB = {
+    a() {
+        console.log('aaa');
+    }
+};
+console.log(ShapeA.prototype.__proto__ = ShapeB);
+
+const shapea = new ShapeA();
+shapea.a(); // aaa
+console.log(ShapeA.prototype === shapea.__proto__); // true
+
+// або
+const ShapeC = function () {};
+const ShapeD = {
+    a() {
+        console.log('a');
+    }
+};
+
+const shapeC = new ShapeC();
+shapeC.__proto__ = ShapeD;
+shapeC.a(); // a
+console.log(ShapeC.prototype === shapeC.__proto__); // false
+
+// або
+function Test() {};
+Test.prototype.myname = function () {
+    console.log('myname');
+};
+
+const a = new Test();
+console.log(a.__proto__ === Test.prototype); // true
+a.myname(); // myname
+
+// або
+const fn = function () {};
+fn.prototype.myname = function () {
+    console.log('myname');
+};
+
+var obj = {
+    __proto__: fn.prototype
+};
+
+obj.myname(); // myname
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікації</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-additional-properties-of-the-object.prototype-object', 'Object.prototype.__proto__')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Object.proto")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{JSxRef("Object.prototype.isPrototypeOf()")}}</li>
+ <li>{{JSxRef("Object.getPrototypeOf()")}}</li>
+ <li>{{JSxRef("Object.setPrototypeOf()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/seal/index.html b/files/uk/web/javascript/reference/global_objects/object/seal/index.html
new file mode 100644
index 0000000000..568686ede7
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/seal/index.html
@@ -0,0 +1,151 @@
+---
+title: Object.seal()
+slug: Web/JavaScript/Reference/Global_Objects/Object/seal
+tags:
+  - ECMAScript5
+  - JavaScript
+  - Об'єкт
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/seal
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>Object.seal()</strong></code> запечатує об'єкт, запобігаючи створенню нових властивостей та відмічаючи усі існуючі властивості як недоступні для налаштування. Значення існуючих властивостей можна і надалі змінювати, якщо вони доступні для запису.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-prototype-seal.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Object.seal(<var>obj</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>obj</var></code></dt>
+ <dd>Об'єкт, який має бути запечатаний.</dd>
+</dl>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Об'єкт, який запечатується.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>За замовчуванням, об'єкти є {{jsxref("Object.isExtensible()", "розширюваними", "", 1)}} (до них можна додати нові властивості). Запечатування об'єкту запобігає створенню нових властивостей і робить усі існуючі властивосні недоступними для налаштування. Це робить набір властивостей об'єкта зафіксованим і незмінним. Перетворення всіх властивостей на недоступні для налаштування також запобігає зміні властивостей-значень на властивості-аксесори, та навпаки, але не запобігає зміні значеннь властивостей. Спроби додати чи видалити властивість з запечатаного об'єкта, або перетворити властивість-значення на властивість-аксесор, не спрацюють, або непомітно, або з викиданням {{jsxref("TypeError")}} (найчастіше, але не виключно, у {{jsxref("Strict_mode", "строгому режимі", "", 1)}})</p>
+
+<p>Ланцюг прототипів залишається незмінним. Проте, властивість {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}} також запечатується.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">var obj = {
+  prop: function() {},
+  foo: 'му'
+};
+
+// Нові властивості можуть бути додані, існуючі властивості
+// можуть бути змінені або видалені.
+obj.foo = 'мяв';
+obj.lumpy = 'ква';
+delete obj.prop;
+
+var o = Object.seal(obj);
+
+o === obj; // true
+Object.isSealed(obj); // === true
+
+// На запечатаному об'єкті можна змінювати значення властивостей
+obj.foo = 'кря';
+
+// Але не можна перетворити властивості-значення на властивості-аксесори,
+// і навпаки.
+Object.defineProperty(obj, 'foo', {
+  get: function() { return 'g'; }
+}); // викидає TypeError
+
+// Тепер будь-які спроби змін в об'єкті, окрім змін властивостей,
+// не працюватимуть.
+obj.quaxxor = 'весела качка';
+// непомітно не додасть властивість
+delete obj.foo;
+// непомітно не видалить властивість
+
+// ...а у строгому режимі такі спроби
+// викидатимуть помилки TypeError.
+function fail() {
+  'use strict';
+  delete obj.foo; // викидає TypeError
+  obj.sparky = 'гав'; // викидає TypeError
+}
+fail();
+
+// Спроби додавання властивостей за допомогою
+// Object.defineProperty також викидатимуть помилки.
+Object.defineProperty(obj, 'ohai', {
+  value: 17
+}); // викидає TypeError
+Object.defineProperty(obj, 'foo', {
+  value: 'рох'
+}); // змінює значення існуючої властивості
+</pre>
+
+<h2 id="Примітки">Примітки</h2>
+
+<p>У ES5, якщо аргументом цього методу є не об'єкт (примітив), це спричинить {{jsxref("TypeError")}}. У ES2015 аргумент, що не є об'єктом, сприйматиметься як звичайний запечатаний об'єкт, і буде просто повернений.</p>
+
+<pre class="brush: js">Object.seal(1);
+// TypeError: 1 is not an object (код ES5)
+
+Object.seal(1);
+// 1                             (код ES2015)
+</pre>
+
+<h3 id="Порівняння_з_Object.freeze">Порівняння з <code>Object.freeze()</code></h3>
+
+<p>Існуючі властивості об'єктів, заморожених методом {{jsxref("Object.freeze()")}}, стають незмінними. Властивості об'єкта, запечатаного методом <code>Object.seal()</code>, надалі можуть бути зміненні.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікації</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.8', 'Object.seal')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.seal', 'Object.seal')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.seal', 'Object.seal')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Object.seal")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/setprototypeof/index.html b/files/uk/web/javascript/reference/global_objects/object/setprototypeof/index.html
new file mode 100644
index 0000000000..0e052f3bb5
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/setprototypeof/index.html
@@ -0,0 +1,220 @@
+---
+title: Object.setPrototypeOf()
+slug: Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Об'єкт
+  - метод
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>Object.setPrototypeOf()</strong></code> присвоює прототипу (тобто, внутрішній властивості <code>[[Prototype]]</code>) вказаного об'єкта інший об'єкт або {{jsxref("null")}}.</p>
+
+<div class="warning">
+<p><strong>Застереження:</strong> Зміна властивості об'єкта <code>[[Prototype]]</code> за природою того, <a href="https://mathiasbynens.be/notes/prototypes">як сучасні рушії JavaScript оптимізують доступ до властивостей</a>, є дуже повільною операцією у кожному переглядачі та рушії JavaScript. До того ж, ефект від зміни наслідування є неочевидним та обширним, і не обмежується лише часом, витраченим на інструкцію <code>Object.setPrototypeOf(...)</code>, а може стосуватися <strong><em>будь-якого</em></strong> коду, що звертається до будь-якого об'єкта, чия властивість <code>[[Prototype]]</code> була змінена.</p>
+
+<p>Оскільки ця функціональність є частиною мови, тягар її ефективної (в ідеалі) реалізації досі лежить на розробниках рушіїв. Поки розробники рушіїв не вирішать цю проблему, якщо вам важлива продуктивність, вам варто уникати присвоювати <code>[[Prototype]]</code> об'єкта. Замість цього, створіть новий об'єкт з бажаним значенням <code>[[Prototype]]</code>, використовуючи {{jsxref("Object.create()")}}.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Object.setPrototypeOf(<var>obj</var>, <var>prototype</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Об'єкт, прототипу якого треба присвоїти значення.</dd>
+ <dt><code>prototype</code></dt>
+ <dd>Новий прототип об'єкта (об'єкт або {{jsxref("null")}}).</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Вказаний об'єкт.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Викидає виняток {{jsxref("TypeError")}}, якщо об'єкт, чия властивість <code>[[Prototype]]</code> змінюється, є нерозширюваним згідно з {{jsxref("Object.isExtensible()")}}. Не робить нічого, якщо параметр <code>prototype</code> не є об'єктом або {{jsxref("null")}} (число, рядок, булеве значення або {{jsxref("undefined")}}). Інакше, цей метод змінює значення <code>[[Prototype]]</code> об'єкта <code>obj</code> на нове значення.</p>
+
+<p>Метод <code>Object.setPrototypeOf()</code> присутній у специфікації ECMAScript 2015. Він, загалом, вважається правильним способом встановлювати прототип об'єкта, у порівнянні з більш суперечливою властивістю {{jsxref("Object.prototype.proto","Object.prototype.__proto__")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">var dict = Object.setPrototypeOf({}, null);
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Використовуючи більш стару властивість {{jsxref("Object.prototype.proto","Object.prototype.__proto__")}}, ми легко можемо визначити метод <code>Object.setPrototypeOf</code>, якщо він досі не є доступним:</p>
+
+<pre class="brush: js">if (!Object.setPrototypeOf) {
+    // Працює лише у Chrome та FireFox, не працює у IE:
+     Object.prototype.setPrototypeOf = function(obj, proto) {
+         if(obj.__proto__) {
+             obj.__proto__ = proto;
+             return obj;
+         } else {
+             // Якщо ви хочете повернути прототип Object.create(null):
+             var Fn = function() {
+                 for (var key in obj) {
+                     Object.defineProperty(this, key, {
+                         value: obj[key],
+                     });
+                 }
+             };
+             Fn.prototype = proto;
+             return new Fn();
+         }
+     }
+}</pre>
+
+<h2 id="Додавання_ланцюжків_прототипів">Додавання ланцюжків прототипів</h2>
+
+<p>Комбінація <code>Object.getPrototypeOf()</code> та {{jsxref("Object.proto", "Object.prototype.__proto__")}} дозволяє додавати цілі ланцюжки прототипів до нового прототипу:</p>
+
+<pre class="brush: js">/**
+*** Object.appendChain(@object, @prototype)
+*
+* Додає перший невбудований прототип з ланцюжка до нового прототипу.
+* Повертає @object (якщо це була проста величина, вона буде перетворена на об'єкт).
+*
+*** Object.appendChain(@object [, "@arg_name_1", "@arg_name_2", "@arg_name_3", "..."], "@function_body")
+*** Object.appendChain(@object [, "@arg_name_1, @arg_name_2, @arg_name_3, ..."], "@function_body")
+*
+* Додає перший невбудований прототип з ланцюжка до вбудованого об'єкта Function.prototype,
+* а потім додає new Function(["@arg"(s)], "@function_body") до цього ланцюжка.
+* Повертає функцію.
+*
+**/
+
+Object.appendChain = function(oChain, oProto) {
+  if (arguments.length &lt; 2) {
+    throw new TypeError('Object.appendChain - Недостатньо аргументів');
+  }
+  if (typeof oProto !== 'object' &amp;&amp; typeof oProto !== 'string') {
+    throw new TypeError("другий аргумент Object.appendChain повинен бути об'єктом або рядком");
+  }
+
+  var oNewProto = oProto,
+      oReturn = o2nd = oLast = oChain instanceof this ? oChain : new oChain.constructor(oChain);
+
+  for (var o1st = this.getPrototypeOf(o2nd);
+    o1st !== Object.prototype &amp;&amp; o1st !== Function.prototype;
+    o1st = this.getPrototypeOf(o2nd)
+  ) {
+    o2nd = o1st;
+  }
+
+  if (oProto.constructor === String) {
+    oNewProto = Function.prototype;
+    oReturn = Function.apply(null, Array.prototype.slice.call(arguments, 1));
+    this.setPrototypeOf(oReturn, oLast);
+  }
+
+  this.setPrototypeOf(o2nd, oNewProto);
+  return oReturn;
+}
+</pre>
+
+<h3 id="Використання">Використання</h3>
+
+<h4 id="Перший_приклад_Додавання_ланцюжка_до_прототипу">Перший приклад: Додавання ланцюжка до прототипу</h4>
+
+<pre class="brush: js">function Mammal() {
+  this.isMammal = 'так';
+}
+
+function MammalSpecies(sMammalSpecies) {
+  this.species = sMammalSpecies;
+}
+
+MammalSpecies.prototype = new Mammal();
+MammalSpecies.prototype.constructor = MammalSpecies;
+
+var oCat = new MammalSpecies('Кіт');
+
+console.log(oCat.isMammal); // 'так'
+
+function Animal() {
+  this.breathing = 'так';
+}
+
+Object.appendChain(oCat, new Animal());
+
+console.log(oCat.breathing); // 'так'
+</pre>
+
+<h4 id="Другий_приклад_Перетворення_простого_значення_на_екземпляр_свого_конструктора_та_додавання_його_ланцюжка_до_прототипу">Другий приклад: Перетворення простого значення на екземпляр свого конструктора та додавання його ланцюжка до прототипу</h4>
+
+<pre class="brush: js">function MySymbol() {
+  this.isSymbol = 'так';
+}
+
+var nPrime = 17;
+
+console.log(typeof nPrime); // 'number'
+
+var oPrime = Object.appendChain(nPrime, new MySymbol());
+
+console.log(oPrime); // '17'
+console.log(oPrime.isSymbol); // 'так'
+console.log(typeof oPrime); // 'object'
+</pre>
+
+<h4 id="Третій_приклад_Додавання_ланцюжка_до_обєкта_Function.prototype_та_додавання_нової_функції_до_цього_ланцюжка">Третій приклад: Додавання ланцюжка до об'єкта Function.prototype та додавання нової функції до цього ланцюжка</h4>
+
+<pre class="brush: js">function Person(sName) {
+  this.identity = sName;
+}
+
+var george = Object.appendChain(new Person('Георгій'),
+                                'console.log("Всім привіт!!");');
+
+console.log(george.identity); // 'Георгій'
+george(); // 'Всім привіт!!'
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.setprototypeof', 'Object.setPrototypeOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-object.setprototypeof', 'Object.setPrototypeOf')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.setPrototypeOf")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Reflect.setPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.getPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.prototype.proto","Object.prototype.__proto__")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/tolocalestring/index.html b/files/uk/web/javascript/reference/global_objects/object/tolocalestring/index.html
new file mode 100644
index 0000000000..cc85fc6920
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/tolocalestring/index.html
@@ -0,0 +1,111 @@
+---
+title: Object.prototype.toLocaleString()
+slug: Web/JavaScript/Reference/Global_Objects/Object/toLocaleString
+tags:
+  - JavaScript
+  - Довідка
+  - Об'єкт
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/toLocaleString
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>toLocaleString()</strong></code> повертає рядок, що відображає об'єкт. Цей метод призначений, щоб бути заміщеним у похідних об'єктах для специфічних задач щодо локалі.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-prototype-tolocalestring.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><var>obj</var>.toLocaleString()</pre>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Рядок, що відображає об'єкт.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод {{jsxref("Object","об'єкта")}} <code>toLocaleString</code> повертає результат виклику {{jsxref("Object.toString", "toString()")}}.</p>
+
+<p>Ця функція надана, щоб дати об'єктам загальний метод <code>toLocaleString</code>, хоча не усі його використовуватимуть. Дивіться наведений нижче список.</p>
+
+<h3 id="Обєкти_які_заміщують_toLocaleString">Об'єкти, які заміщують <code>toLocaleString</code></h3>
+
+<ul>
+ <li>{{jsxref("Array")}}: {{jsxref("Array.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Число", "Number")}}: {{jsxref("Number.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date")}}: {{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("TypedArray")}}: {{jsxref("TypedArray.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("BigInt")}}: {{jsxref("BigInt.prototype.toLocaleString()")}}</li>
+</ul>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Заміщення_toLocaleString_у_масиві">Заміщення toLocaleString() у масиві</h3>
+
+<p>На об'єктах <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString">toLocaleString()</a></code> може використовуватись для виводу масиву значень у вигляді рядка, з необов'язковим додаванням специфічних мовних ідентифікаторів (наприклад, символів валюти):</p>
+
+<p>Наприклад:</p>
+
+<pre class="brush: js notranslate">const testArray = [4, 7, 10];
+
+let euroPrices = testArray.toLocaleString('fr', { style: 'currency', currency: 'EUR'});
+// "4,00 €,7,00 €,10,00 €"</pre>
+
+<h3 id="Заміщення_toLocaleString_у_обєктах_Date">Заміщення toLocaleString() у об'єктах Date</h3>
+
+<p>На об'єктах <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code>, <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString">toLocaleString()</a></code> використовується для виводу дати згідно особливостей мовних налаштувань:</p>
+
+<p>Наприклад:</p>
+
+<pre class="brush: js notranslate">const testDate = new Date(Date.now());
+// "Date Fri May 29 2020 18:04:24 GMT+0100 (Британський літній час)"
+
+let deDate = testDate.toLocaleString('de');
+// "29.5.2020, 18:04:24"
+
+var frDate = testDate.toLocaleString('fr');
+//"29/05/2020 à 18:04:24"</pre>
+
+<h3 id="Заміщення_toLocaleString_у_обєктах_Number">Заміщення toLocaleString() у об'єктах Number</h3>
+
+<p>На об'єктах <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code> , <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString">toLocaleString()</a></code> використовується для виводу чисел згідно особливостей мовних налаштувань, наприклад, з правильними роздільниками:</p>
+
+<p>Наприклад:</p>
+
+<pre class="notranslate">const testNumber = 2901234564;
+// "2901234564"
+
+let deNumber = testNumber.toLocaleString('de');
+// "2.901.234.564"
+
+let frNumber = testNumber.toLocaleString('fr');
+// "2 901 234 564"</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Object.toLocaleString")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/tosource/index.html b/files/uk/web/javascript/reference/global_objects/object/tosource/index.html
new file mode 100644
index 0000000000..1de70827b6
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/tosource/index.html
@@ -0,0 +1,132 @@
+---
+title: Object.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Object/toSource
+tags:
+  - JavaScript
+  - Об'єкт
+  - застарілий
+  - метод
+  - нестандартний
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/toSource
+---
+<div>{{JSRef}} {{obsolete_header}}</div>
+
+<p>Метод <strong><code>toSource()</code></strong> повертає рядок, який відображає першокод об'єкта.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code>Object.toSource();
+<var>obj</var>.toSource();
+</code></pre>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Рядок, який відображає першокод об'єкта.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>toSource()</code> повертає наступні значення:</p>
+
+<ul>
+ <li>Для вбудованого об'єкта {{jsxref("Object")}} <code>toSource()</code> повертає наступний рядок, який вказує, що першокод недоступний:
+
+  <pre class="brush: js notranslate">function Object() {
+    [native code]
+}
+</pre>
+ </li>
+ <li>Для екземплярів {{jsxref("Object")}} <code>toSource()</code> повертає рядок, який відображає першокод.</li>
+</ul>
+
+<p>Ви можете викликати <code>toSource()</code> під час налагодження для дослідження вмісту об'єкта.</p>
+
+<h3 id="Перезапис_методу_toSource">Перезапис методу <code>toSource()</code></h3>
+
+<p>Перезапис <code>toSource()</code> не несе ніякої шкоди об'єктам. Наприклад:</p>
+
+<pre class="brush: js notranslate">function Person(name) {
+  this.name = name;
+}
+
+Person.prototype.toSource = function Person_toSource() {
+  return 'new Person(' + uneval(this.name) + ')';
+};
+
+console.log(new Person('Джо').toSource()); // ---&gt; new Person("Джо")
+</pre>
+
+<h3 id="Вбудовані_методи_toSource">Вбудовані методи <code>toSource()</code></h3>
+
+<p>Кожен базовий тип JavaScript має свій власний метод <code>toSource()</code>. Ці об'єкти наступні:</p>
+
+<ul>
+ <li>{{jsxref("Array.prototype.toSource()")}} — об'єкт {{jsxref("Array")}}.</li>
+ <li>{{jsxref("Boolean.prototype.toSource()")}} — об'єкт {{jsxref("Boolean")}}.</li>
+ <li>{{jsxref("Date.prototype.toSource()")}} — об'єкт {{jsxref("Date")}}.</li>
+ <li>{{jsxref("Function.prototype.toSource()")}} — об'єкт {{jsxref("Function")}}.</li>
+ <li>{{jsxref("Number.prototype.toSource()")}} — об'єкт {{jsxref("Число","Number")}}.</li>
+ <li>{{jsxref("RegExp.prototype.toSource()")}} — об'єкт {{jsxref("RegExp")}}.</li>
+ <li>{{jsxref("String.prototype.toSource()")}} — об'єкт {{jsxref("String")}}.</li>
+ <li>{{jsxref("Symbol.prototype.toSource()")}} — об'єкт {{jsxref("Symbol")}}.</li>
+ <li><code>Math.toSource()</code> — Повертає рядок "Math".</li>
+</ul>
+
+<h3 id="Обмеження_для_циклічних_обєктів">Обмеження для циклічних об'єктів</h3>
+
+<p>У випадках, коли об'єкт містить посилання на самого себе, наприклад, циклічно зв'язаний список чи дерево, котре можна пройти обома шляхами, <code>toSource()</code> не відтворюватиме посилання на самого себе, починаючи з Firefox 24. Наприклад:</p>
+
+<pre class="brush: js notranslate">var obj1 = {};
+var obj2 = { a: obj1 };
+obj1.b = obj2;
+
+console.log('Циклічний: ' + (obj1.b.a == obj1));
+
+var objSource = obj1.toSource(); // повертає "({b:{a:{}}})"
+
+obj1 = eval(objSource);
+
+console.log('Циклічний: ' + (obj1.b.a == obj1));
+</pre>
+
+<p>Якщо застосовується циклічна структура, і потрібен метод <code>toSource()</code>, об'єкт має перезаписати <code>toSource()</code>, або використовуючи посилання на конструктор, або надавши анонімну функцію.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_toSource">Використання <code>toSource()</code></h3>
+
+<p>Наступний код визначає тип об'єкта <code>Dog</code> і створює <code>theDog</code>, об'єкт типу <code>Dog</code>:</p>
+
+<pre class="brush: js notranslate">function Dog(name, breed, color, sex) {
+  this.name = name;
+  this.breed = breed;
+  this.color = color;
+  this.sex = sex;
+}
+
+theDog = new Dog('Галя', 'лабрадор', 'шоколадний', 'самиця');
+</pre>
+
+<p>Якщо викликати метод <code>toSource()</code> об'єкта <code>theDog</code>, він поверне першокод JavaScript, який визначає об'єкт:</p>
+
+<pre class="brush: js notranslate">theDog.toSource();
+// повертає ({name:"Галя", breed:"лабрадор", color:"шоколадний", sex:"самиця"})
+</pre>
+
+<h2 id="Специфікація">Специфікація</h2>
+
+<p>Не є частиною жодних стандартів.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.toSource")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/tostring/index.html b/files/uk/web/javascript/reference/global_objects/object/tostring/index.html
new file mode 100644
index 0000000000..681a6c6f06
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/tostring/index.html
@@ -0,0 +1,148 @@
+---
+title: Object.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Object/toString
+tags:
+  - JavaScript
+  - Об'єкт
+  - метод
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/toString
+---
+<div>{{JSRef}}</div>
+
+<div>Метод <code><strong>toString()</strong></code> повертає рядок, який відображає об'єкт.</div>
+
+<div></div>
+
+<div>{{EmbedInteractiveExample("pages/js/object-prototype-tostring.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>obj</var>.toString()</code></pre>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Рядок, який відображає об'єкт.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Кожен об'єкт має метод <code>toString()</code>, який автоматично викликається, коли об'єкт повинен бути відображений як рядок, або коли об'єкт знаходиться у виразі, де очікується рядок. За замовчуванням, метод  <code>toString()</code> успадковується усіма об'єктами, похідними від <code>Object</code>. Якщо цей метод не був перезаписаний у користувацькому об'єкті, то <code>toString()</code> поверне "<code>[object <var>type</var>]</code>", де <code><var>type</var></code> - це тип об'єкта. Наступний код це демонструє:</p>
+
+<pre class="brush: js">var o = new Object();
+o.toString(); // повертає [object Object]
+</pre>
+
+<div class="note">
+<p><strong>Примітка:</strong> Починаючи з JavaScript 1.8.5, <code>toString()</code>, викликаний для {{jsxref("null")}}, повертає <code>[object <em>Null</em>]</code>, для {{jsxref("undefined")}} повертає <code>[object <em>Undefined</em>]</code>, як визначенно у 5-й версії ECMAScript і згодом у Ерраті. Дивіться {{anch("Використання_toString_для_визначення_класу_обєкта", "Використання toString() для визначення класу об'єкта")}}.</p>
+</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Перезапис_стандартного_методу_toString">Перезапис стандартного методу <code>toString</code></h3>
+
+<p>Ви можете створити функцію, яка викликатиметься замість стандартного методу <code>toString()</code>. Метод <code>toString()</code> не приймає жодних аргументів і має повернути рядок. Метод <code>toString()</code>, який ви створите, може повертати будь-яке значення, але найбільш корисним буде, якщо він повертатиме інформацію про об'єкт.</p>
+
+<p>Наступний код визначає тип об'єкта <code>Dog</code> і створює <code>theDog</code>, об'єкт типу <code>Dog</code>:</p>
+
+<pre class="brush: js">function Dog(name, breed, color, sex) {
+  this.name = name;
+  this.breed = breed;
+  this.color = color;
+  this.sex = sex;
+}
+
+theDog = new Dog('Галя', 'лабрадор', 'шоколадна', 'самиця');
+</pre>
+
+<p>Якщо ви викличете метод <code>toString()</code> для цього користувацького об'єкта, він поверне стандартне значення, успадковане від {{jsxref("Object")}}:</p>
+
+<pre class="brush: js">theDog.toString(); // повертає [object Object]
+</pre>
+
+<p>Наступний код створює і присвоює значення <code>dogToString()</code>, щоб перезаписати  стандартний метод <code>toString()</code>. Ця функція генерує рядок, що складається з імені, породи, кольору і статі об'єкта, у вигляді "<code>властивість = значення;</code>".</p>
+
+<pre class="brush: js">Dog.prototype.toString = function dogToString() {
+  var ret = 'Собака ' + this.name + ' - ' + this.color + ' ' + this.sex + ' ' + this.breed;
+  return ret;
+}
+</pre>
+
+<p>або</p>
+
+<pre class="brush: js">Dog.prototype.toString = function dogToString() {
+  return `Собака ${this.name} - ${this.color} ${this.sex} ${this.breed}`;
+}
+</pre>
+
+<p>Завдяки цьому коду, як тільки <code>theDog</code> буде використаний у контексті рядка, JavaScript автоматично викличе новий метод <code>toString()</code>, який поверне наступний рядок:</p>
+
+<pre class="brush: js">"Собака Галя - шоколадна самиця лабрадор"
+</pre>
+
+<h3 id="Використання_toString_для_визначення_класу_обєкта">Використання toString() для визначення класу об'єкта</h3>
+
+<p>Метод <code>toString()</code> може бути використаний з будь-яким об'єктом, щоб отримати його клас. Щоб використати <code>Object.prototype.toString()</code> для будь-якого об'єкта, необхідно викликати {{jsxref("Function.prototype.call()")}} або {{jsxref("Function.prototype.apply()")}}, передаючи об'єкт, який ви хочете дослідити, першим параметром (<code>thisArg</code>).</p>
+
+<pre class="brush: js">var toString = Object.prototype.toString;
+
+toString.call(new Date);    // [object Date]
+toString.call(new String);  // [object String]
+toString.call(Math);        // [object Math]
+
+// Починаючи з JavaScript 1.8.5
+toString.call(undefined);   // [object Undefined]
+toString.call(null);        // [object Null]
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.tostring', 'Object.prototype.toString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.tostring', 'Object.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.2', 'Object.prototype.toString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Виклик на {{jsxref("null")}} повертає <code>[object <em>Null</em>]</code>, а {{jsxref("undefined")}} повертає <code>[object <em>Undefined</em>]</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.toString")}}</p>
+</div>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+ <li>{{jsxref("Object.prototype.valueOf()")}}</li>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+ <li>{{jsxref("Symbol.toPrimitive")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/unobserve/index.html b/files/uk/web/javascript/reference/global_objects/object/unobserve/index.html
new file mode 100644
index 0000000000..678544cabe
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/unobserve/index.html
@@ -0,0 +1,102 @@
+---
+title: Object.unobserve()
+slug: Web/JavaScript/Reference/Global_Objects/Object/unobserve
+tags:
+  - JavaScript
+  - Об'єкт
+  - застарілий
+  - метод
+translation_of: Archive/Web/JavaScript/Object.unobserve
+---
+<div>{{JSRef}} {{obsolete_header}}</div>
+
+<p>Метод <strong><code>Object.unobserve()</code></strong> використовувався для видалення спостерігачів, встановлених методом {{jsxref("Object.observe()")}}, але він застарів та був прибраний з переглядачів. Ви можете натомість скористатись більш загальним об'єктом {{jsxref("Proxy")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Object.unobserve(<var>obj</var>, <var>callback</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Об'єкт, за яким треба припинити спостереження.</dd>
+ <dt><code>callback</code></dt>
+ <dd>Посилання на спостерігач, який треба припинити викликати кожен раз, коли у об'єкті <strong>obj</strong> відбувається зміна.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Вказаний об'єкт.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p><code>Object.unobserve()</code> має викликатися після {{jsxref("Object.observe()")}}, щоб прибрати з об'єкта спостерігач.</p>
+
+<p>Параметр callback має бути посиланням на функцію, а не анонімною функцією, бо це посилання буде використано, щоб прибрати попередній спостерігач. Немає сенсу викликати <strong>Object.unobserve() </strong>з анонімною функцією зворотного виклику, вона не прибере жоден спостерігач.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Припинення_спостереження_за_обєктом">Припинення спостереження за об'єктом</h3>
+
+<pre class="brush: js">var obj = {
+  foo: 0,
+  bar: 1
+};
+
+var observer = function(changes) {
+  console.log(changes);
+}
+
+Object.observe(obj, observer);
+​
+obj.newProperty = 2;
+// [{name: 'newProperty', object: &lt;obj&gt;, type: 'add'}]
+
+Object.unobserve(obj, observer);
+
+obj.foo = 1;
+// Функція зворотного виклику не викликалась</pre>
+
+<h3 id="Використання_анонімної_функції">Використання анонімної функції</h3>
+
+<pre class="brush: js">var person = {
+  name: 'Ахмед',
+  age: 25
+};
+
+Object.observe(person, function(changes) {
+  console.log(changes);
+});
+
+person.age = 40;
+// [{name: 'age', object: &lt;obj&gt;, oldValue: 25, type: 'update'}]
+
+Object.unobserve(person, function(changes) {
+  console.log(changes);
+});
+
+person.age = 63;
+// [{name: 'age', object: &lt;obj&gt;, oldValue: 40, type: 'update'}]
+// Функція зворотного виклику викликатиметься завжди
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p><a href="https://github.com/arv/ecmascript-object-observe">Strawman proposal specification</a>.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.unobserve")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.observe()")}} {{obsolete_inline}}</li>
+ <li>{{jsxref("Array.observe()")}} {{obsolete_inline}}</li>
+ <li>{{jsxref("Array.unobserve()")}} {{obsolete_inline}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/unwatch/index.html b/files/uk/web/javascript/reference/global_objects/object/unwatch/index.html
new file mode 100644
index 0000000000..7ad4d67028
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/unwatch/index.html
@@ -0,0 +1,71 @@
+---
+title: Object.prototype.unwatch()
+slug: Web/JavaScript/Reference/Global_Objects/Object/unwatch
+tags:
+  - JavaScript
+  - Об'єкт
+  - застарілий
+  - метод
+  - налагодження
+translation_of: Archive/Web/JavaScript/Object.unwatch
+---
+<div>{{JSRef}}</div>
+
+<div class="warning">
+<p><strong>Застереження:</strong> Не використовуйте <code>unwatch()</code> та {{jsxref("Object.prototype.watch", "watch()")}}! Ці два методи були реалізовані лише у Firefox до 58-ї версії, вони <strong>застаріли та були прибрані у Firefox 58+</strong>. До того ж, використання точок спостереження має серйозний негативний вплив на продуктивність, особливо при використанні на глобальних об'єктах, таких як <code>window</code>. Звісно, ви можете, натомість, використовувати <a href="/uk/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">сетери та гетери</a> або <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Proxy">проксі</a>.</p>
+</div>
+
+<p>Метод <code><strong>unwatch()</strong></code> прибирає точку спостереження, встановлену методом {{jsxref("Object.prototype.watch", "watch()")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>obj</var>.unwatch(<var>prop</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Ім'я властивості об'єкта, за якою треба припинити спостереження.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Налагоджувач JavaScript має функціональність, схожу на ту, що надає даний метод, а також інші налагоджувальні можливості. Інформацію щодо налагоджувача дивіться у статті <a href="/uk/docs/Venkman">Venkman</a>.</p>
+
+<p>За замовчуванням, цей метод успадковується кожним об'єктом, похідним від {{jsxref("Object")}}.</p>
+
+<div class="note">
+<p><strong>Заувага:</strong> Причина, з якої <code>unwatch()</code> приймає властивість <em>prop</em> єдиним параметром, в тому, що метод {{jsxref("Object.watch", "watch()")}} допускає лише один обробник.</p>
+</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Дивіться {{jsxref("Object.watch", "watch()")}}.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Не є частиною жодних специфікацій. Реалізований у JavaScript 1.2.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.unwatch")}}</p>
+</div>
+
+<h2 id="Примітки_щодо_сумісності">Примітки щодо сумісності</h2>
+
+<ul>
+ <li>Виклик <code>unwatch()</code> на об'єктах {{domxref("Document")}} викидає помилку {{jsxref("TypeError")}}, починаючи з Firefox 23 ({{bug(903332)}}). Це було виправлено у Firefox 27.</li>
+</ul>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.watch()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/valueof/index.html b/files/uk/web/javascript/reference/global_objects/object/valueof/index.html
new file mode 100644
index 0000000000..153f2be121
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/valueof/index.html
@@ -0,0 +1,115 @@
+---
+title: Object.prototype.valueOf()
+slug: Web/JavaScript/Reference/Global_Objects/Object/valueOf
+tags:
+  - JavaScript
+  - valueOf
+  - Об'єкт
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/valueOf
+---
+<div>{{JSRef}}</div>
+
+<div><span class="seoSummary">Метод <strong><code>valueOf()</code></strong> повертає просту величину вказаного об'єкта.</span></div>
+
+<div>{{EmbedInteractiveExample("pages/js/object-prototype-valueof.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>object</var>.valueOf()</pre>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Проста величина вказаного об'єкта.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>JavaScript викликає метод <code>valueOf</code>, щоб <span class="tlid-translation translation" lang="uk"><span title="">перетворити</span></span> об'єкт на просту величину. Рідко трапляється необхідність викликати його вручну. JavaScript автоматично застосовує <code>valueOf</code>, коли зустрічає об'єкт там, де очікується проста величина.</p>
+
+<p>З<span class="tlid-translation translation" lang="uk"><span title="">а замовчуванням,</span></span> кожен об'єкт, який походить від {{jsxref("Object")}}, успадковує метод <code>valueOf</code>. Кожний вбудований об'єкт перезаписує цей метод, щоб повертати відповідне значення. Якщо об'єкт не має простої величини, <code>valueOf</code> повертає сам об'єкт.</p>
+
+<p>Ви можете використовувати <code>valueOf</code> у своєму коді, щоб перетворити вбудований об'єкт на просту величину. Коли ви створюєте користувацький об'єкт, ви можете перезаписати <code>Object.prototype.valueOf()</code>, щоб викликати свій метод замість початкового метода {{jsxref("Object")}}.</p>
+
+<h3 id="Перезапис_valueOf_для_користувацьких_обєктів">Перезапис valueOf для користувацьких об'єктів</h3>
+
+<p>Ви можете створити функцію, яка буде викликатися замість стандартного методу <code>valueOf</code>. Ваша функція не повинна приймати аргументів.</p>
+
+<p>Припустимо, ви маєте об'єкт <code>MyNumberType</code> і бажаєте створити для нього метод <code>valueOf</code>. Наступний код призначає створену користувачем функцію методу <code>valueOf</code><span class="tlid-translation translation" lang="uk"><span title="">:</span></span></p>
+
+<pre class="brush: js">MyNumberType.prototype.valueOf = function() { return customPrimitiveValue; };</pre>
+
+<p>З наведеним кодом, в будь-який момент, коли об'єкт типу <code>MyNumberType</code> використовується у контексті, де він має бути представлений простою величиною, JavaScript автоматично викличе функцію, визначену у коді.</p>
+
+<p>Зазвичай, JavaScript викликає метод об'єкта <code>valueOf</code>, але ви можете викликати його власноруч, наступним чином:</p>
+
+<pre class="brush: js"><var>myNumberType</var>.valueOf()</pre>
+
+<div class="note">
+<p><strong>Заувага:</strong> Об'єкти Object у контексті рядка приводяться за допомогою методу {{jsxref("Object.toString", "toString()")}}, це відрізняє їх від об'єктів {{jsxref("String")}}, що перетворюються на рядкові примітиви, використовуючи <code>valueOf</code>. Усі об'єкти мають приведення до рядка виду "<code>[object <em>type</em>]</code>". Але чимало об'єктів не приводяться до числа, булевого значення чи функції.</p>
+</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_valueOf">Використання valueOf</h3>
+
+<pre class="brush: js">function MyNumberType(n) {
+    this.number = n;
+}
+
+MyNumberType.prototype.valueOf = function() {
+    return this.number;
+};
+
+var myObj = new MyNumberType(4);
+myObj + 3; // 7
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.4', 'Object.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Object.valueOf")}}</p>
+
+<h2 id="Див._також"><span class="tlid-translation translation" lang="uk"><span title="">Див. також</span></span></h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+ <li>{{jsxref("parseInt", "parseInt()")}}</li>
+ <li>{{jsxref("Symbol.toPrimitive")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/values/index.html b/files/uk/web/javascript/reference/global_objects/object/values/index.html
new file mode 100644
index 0000000000..f3a933dbe8
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/values/index.html
@@ -0,0 +1,104 @@
+---
+title: Object.values()
+slug: Web/JavaScript/Reference/Global_Objects/Object/values
+tags:
+  - JavaScript
+  - Method
+  - Object
+  - Довідка
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/values
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>Object.values()</code></strong> вертає масив значень всіх особистих (не успадкованих) перелічуваних властивостей переданого об'єкта. Порядок властивостей в масиві є тим самим, що й у циклі {{jsxref("Statements/for...in", "for...in")}} (різниця лише в тому, що цикл обходить також і властивості прототипу).</p>
+
+<p>{{EmbedInteractiveExample("pages/js/object-values.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Object.values(<var>obj</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Об'єкт, значення властивостей якого треба отримати.</dd>
+</dl>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Масив значень всіх особистих властивостей переданого об'єкта.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p><code>Object.values()</code> повертає масив значень властивостей, які належать безпосередньо об'єктові <code>obj</code>. Порядок отриманих властивостей збігається із тим, що його забезпечує перебір через {{jsxref("Statements/for...in", "for...in")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">var obj = { foo: 'bar', baz: 42 };
+console.log(Object.values(obj));  // ['bar', 42]
+
+// подібний до масиву об'єкт
+var obj = { 0: 'a', 1: 'b', 2: 'c' };
+console.log(Object.values(obj));  // ['a', 'b', 'c']
+
+// подібний до масиву об'єкт з випадковим порядком ключів
+var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
+console.log(Object.values(an_obj));  // ['b', 'c', 'a']
+
+// властивість getFoo є неперелічуваною
+var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
+my_obj.foo = 'bar';
+console.log(Object.values(my_obj)); // ['bar']
+
+// аргументи, що не є об'єктами, буде перетворені на об'єкти
+console.log(Object.values('foo'));  // виводить ['f', 'o', 'o']</pre>
+
+<h2 id="Запасний_варіант_поліфіл">Запасний варіант (поліфіл)</h2>
+
+<p>Для старіших середовищ, де метод <code>Object.values()</code> відсутній, можна скористатися запасним варіантом з репозиторіїв <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> або <a href="https://github.com/es-shims/Object.values">es-shims/Object.values</a>.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.values', 'Object.values')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES8', '#sec-object.values', 'Object.values')}}</td>
+   <td>{{Spec2('ES8')}}</td>
+   <td>Первинне визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div>
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Object.values")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Перелічуваність_та_належність_властивостей">Перелічуваність та належність властивостей</a></li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Object.entries()")}}</li>
+ <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/object/watch/index.html b/files/uk/web/javascript/reference/global_objects/object/watch/index.html
new file mode 100644
index 0000000000..9f5536aa6e
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/object/watch/index.html
@@ -0,0 +1,153 @@
+---
+title: Object.prototype.watch()
+slug: Web/JavaScript/Reference/Global_Objects/Object/watch
+tags:
+  - JavaScript
+  - Об'єкт
+  - застарілий
+  - метод
+  - налагодження
+translation_of: Archive/Web/JavaScript/Object.watch
+---
+<div>{{JSRef}}</div>
+
+<div class="warning">
+<p><strong>Застереження:</strong> Не використовуйте <code>watch()</code> та {{jsxref("Object.prototype.unwatch", "unwatch()")}}! Ці два методи були реалізовані лише у Firefox до 58-ї версії, вони <strong>застаріли та були прибрані у Firefox 58+</strong>. До того ж, використання точок спостереження має серйозний негативний вплив на продуктивність, особливо при використанні на глобальних об'єктах, таких як <code>window</code>. Звісно, ви можете, натомість, використовувати <a href="/uk/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">сетери та гетери</a> або <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Proxy">проксі</a>.</p>
+</div>
+
+<p>Метод <code><strong>watch()</strong></code> стежить за присвоєнням властивості значення, та запускає функцію, коли це відбувається.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>obj</var>.watch(<var>prop</var>, <var>handler</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Ім'я властивості об'єкта, за змінами якої ви бажаєте стежити.</dd>
+ <dt><code>handler</code></dt>
+ <dd>Функція, яка викликатиметься, коли значення вказаної властивості змінюється.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Стежить за присвоєнням значень властивості <code>prop</code> у даному об'єкті, викликає <code>handler(prop, oldval, newval)</code>, коли присвоюється значення <code>prop</code>, та зберігає повернене значення у цій властивості. Точка спостереження може фільтрувати (або анулювати) присвоєння значення, повертаючи змінене значення <code>newval</code> (або повертаючи значення <code>oldval</code>).</p>
+
+<p>Якщо ви видалите властивість, для якої встановлено точку спостереження, ця точка спостереження не зникає. Якщо ви пізніше заново створите властивість, точка спостереження продовжить діяти.</p>
+
+<p>Щоб видалити точку спостереження, скористайтесь методом {{jsxref("Object.unwatch", "unwatch()")}}. За замовчуванням, метод <code>watch</code> успадковується кожним об'єктом, похідним від {{jsxref("Object")}}.</p>
+
+<p>Налагоджувач JavaScript має функціональність, схожу на ту, що надає даний метод, а також інші налагоджувальні можливості. Інформацію щодо налагоджувача дивіться у статті <a href="/uk/docs/Venkman">Venkman</a>.</p>
+
+<p>У Firefox <code>handler</code> викликається тільки з присвоєнь у скрипті, а не з нативного коду. Для прикладу, <code>window.watch('location', myHandler)</code> не викличе <code>myHandler</code>, якщо користувач натисне на посилання на закладку в активному документі. Однак, <code>window.location += '#myAnchor'</code> викличе <code>myHandler</code>.</p>
+
+<div class="note">
+<p><strong>Заувага:</strong> Виклик <code>watch()</code> на об'єкті для вказаної властивості перезаписує будь-який попередній обробник, призначений цій властивості.</p>
+</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_watch_та_unwatch">Використання <code>watch</code> та <code>unwatch</code></h3>
+
+<pre class="brush: js">var o = { p: 1 };
+
+o.watch('p', function (id, oldval, newval) {
+  console.log('Значення o.' + id + ' було змінене з ' + oldval + ' на ' + newval);
+  return newval;
+});
+
+o.p = 2;
+o.p = 3;
+delete o.p;
+o.p = 4;
+
+o.unwatch('p');
+o.p = 5;
+</pre>
+
+<p>Цей скрипт виведе наступне:</p>
+
+<pre>Значення o.p було змінене з 1 на 2
+Значення o.p було змінене з 2 на 3
+Значення o.p було змінене з undefined на 4
+</pre>
+
+<h3 id="Використання_watch_для_перевірки_властивостей_обєкта">Використання <code>watch</code> для перевірки властивостей об'єкта</h3>
+
+<p>Ви можете використати <code>watch</code>, щоб перевірити будь-які присвоєння значень властивостям об'єкта. Даний приклад перевіряє, що кожна людина (Person) завжди матиме дійсне ім'я (name) та вік (age) між 0 та 200.</p>
+
+<pre class="brush: js">Person = function(name, age) {
+  this.watch('age', Person.prototype._isValidAssignment);
+  this.watch('name', Person.prototype._isValidAssignment);
+  this.name = name;
+  this.age = age;
+};
+
+Person.prototype.toString = function() {
+  return this.name + ', ' + this.age;
+};
+
+Person.prototype._isValidAssignment = function(id, oldval, newval) {
+  if (id === 'name' &amp;&amp; (!newval || newval.length &gt; 30)) {
+    throw new RangeError("помилкове ім'я для: " + this);
+  }
+  if (id === 'age'  &amp;&amp; (newval &lt; 0 || newval &gt; 200)) {
+    throw new RangeError('помилковий вік для: ' + this);
+  }
+  return newval;
+}
+
+will = new Person('Вілл', 29);
+console.log(will);   // Вілл, 29
+
+try {
+  will.name = '';
+} catch (e) {
+  console.log(e);
+}
+
+try {
+  will.age = -4;
+} catch (e) {
+  console.log(e);
+}
+</pre>
+
+<p>Цей скрипт виведе наступне:</p>
+
+<pre>Вілл, 29
+RangeError: помилкове ім'я для: Вілл, 29
+RangeError: помилковий вік для: Вілл, 29
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Не є частиною жодних специфікацій. Реалізований у JavaScript 1.2.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.watch")}}</p>
+</div>
+
+<h2 id="Примітки_щодо_сумісності">Примітки щодо сумісності</h2>
+
+<ul>
+ <li>Цей <a class="external link-https" href="https://gist.github.com/384583">Поліфіл</a> надає метод <code>watch</code> для усіх переглядачів, що сумісні з ES5.</li>
+ <li>Використання {{jsxref("Proxy")}} дозволяє робити навіть більш глибокі зміни у роботі з присвоєнням властивостей.</li>
+ <li>Виклик <code>watch()</code> на об'єкті {{domxref("Document")}} викидає помилку {{jsxref("TypeError")}}, починаючи з Firefox 23 ({{bug(903332)}}). Це було виправлено у Firefox 27.</li>
+</ul>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.unwatch()")}}</li>
+ <li>{{jsxref("Object.observe()")}} {{obsolete_inline}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/parsefloat/index.html b/files/uk/web/javascript/reference/global_objects/parsefloat/index.html
new file mode 100644
index 0000000000..41fe2a7650
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/parsefloat/index.html
@@ -0,0 +1,111 @@
+---
+title: parseFloat()
+slug: Web/JavaScript/Reference/Global_Objects/parseFloat
+tags:
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/parseFloat
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p><span class="seoSummary">Функція <code><strong>parseFloat()</strong></code> розбирає аргумент (перетворивши його спочатку на рядок за потреби) та повертає число з плаваючою крапкою.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-parsefloat.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">parseFloat(<em>string</em>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>string</var></code></dt>
+ <dd>Значення, яке потрібно розібрати. Якщо цей аргумент не є рядком, то він буде перетворений на рядок за допомогою абстрактної операції <code><a href="https://tc39.es/ecma262/#sec-tostring">ToString</a></code>. {{glossary("whitespace","Пробільний символ")}} на початку цього аргументу ігнорується.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Число з плаваючою крапкою з наданого рядка <code><var>string</var></code>.</p>
+
+<p>Або {{jsxref("NaN")}}, коли перший непробільний символ не може бути перетворений на число.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p><code>parseFloat</code> є функцією верхнього рівня, а не методом будь-якого з об'єктів.</p>
+
+<ul>
+ <li>Якщо <code>parseFloat</code> зустрічає символ, що не є знаком плюс (<code>+</code>), знаком мінус (<code>-</code> U+002D дефіс-мінус), цифрою (<code>0</code>–<code>9</code>), десятковою крапкою (<code>.</code>), знаком експоненціального запису (<code>e</code> чи <code>E</code>), він повертає значення, записане до цього символа, ігноруючи недозволений символ та символи за ним.</li>
+ <li><em>Друга</em> десяткова крапка також зупиняє аналіз (символи, що йдуть перед цим символом, будуть розібрані).</li>
+ <li>Пробільні символи на початку та в кінці аргументу ігноруються.</li>
+ <li>Якщо перший символ аргументу не може бути перетворений на число (не є жодним з наведених вище символів), <code>parseFloat</code> вертає {{jsxref("NaN")}}.</li>
+ <li><code>parseFloat</code> також може розібрати та повернути {{jsxref("Infinity")}}.</li>
+ <li><code>parseFloat</code> перетворює синтаксис {{jsxref("BigInt")}} на {{jsxref("Число", "Number")}}, втрачаючи точність. Це відбувається, оскільки літера <code>n</code> в кінці числа відкидається.</li>
+</ul>
+
+<p>Використовуйте для розбору рядка також функцію {{jsxref("Число", "Number(значення)")}}, яка перетворює на {{jsxref("NaN")}} аргументи з будь-якими недозволеними символами.</p>
+
+<p><code>parseFloat</code> спрацює для нерядкових об'єктів, якщо вони мають метод {{jsxref("Object.toString", "toString")}} або метод {{jsxref("Object.valueOf", "valueOf")}}. Повернене значення буде таким самим, яким було б після виклику <code>parseFloat</code> на результаті цих методів.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="parseFloat_що_повертає_число"><code>parseFloat</code>, що повертає число</h3>
+
+<p>Наступні приклади повернуть <code>3.14</code>:</p>
+
+<pre class="brush: js notranslate">parseFloat(3.14);
+parseFloat('3.14');
+parseFloat('  3.14  ');
+parseFloat('314e-2');
+parseFloat('0.0314E+2');
+parseFloat('3.14якісь нечислові символи');
+parseFloat({ toString: function() { return "3.14" } });
+</pre>
+
+<h3 id="parseFloat_що_вертає_NaN"><code>parseFloat</code>, що вертає <code>NaN</code></h3>
+
+<p>Наступний приклад поверне <code>NaN</code>:</p>
+
+<pre class="brush: js notranslate">parseFloat('FF2');
+</pre>
+
+<h3 id="parseFloat_та_BigInt"><code>parseFloat</code> та <code>BigInt</code></h3>
+
+<p>Обидва наступних приклади повернуть <code>900719925474099300</code>, втративши точність, оскільки ціле число надто велике, щоб бути представленим як число з плаваючою крапкою:</p>
+
+<pre class="brush: js notranslate">parseFloat(900719925474099267n);
+parseFloat('900719925474099267n');
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-parsefloat-string', 'parseFloat')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.parseFloat")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("parseInt", "parseInt()")}}</li>
+ <li>{{jsxref("Number.parseFloat()")}}</li>
+ <li>{{jsxref("Number.parseInt()")}}</li>
+ <li>{{jsxref("Number.toFixed()")}}</li>
+ <li>{{jsxref("isNaN", "isNaN()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/parseint/index.html b/files/uk/web/javascript/reference/global_objects/parseint/index.html
new file mode 100644
index 0000000000..c92f886216
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/parseint/index.html
@@ -0,0 +1,215 @@
+---
+title: parseInt()
+slug: Web/JavaScript/Reference/Global_Objects/parseInt
+tags:
+  - JavaScript
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/parseInt
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>Функція <code><strong>parseInt()</strong></code> розбирає рядковий аргумент і повертає число з вказаною <a href="https://en.wikipedia.org/wiki/Radix">основою</a> системи числення.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-parseint.html")}}</div>
+
+<p class="hidden">код для цього інтерактивного прикладу зберігається  в репозиторії  GitHub .Якщо ви хочете внести свій внесок у проект інтерактивних прикладів, будь-ласка клонуйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> і присилайте нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">parseInt(<em>string</em>, <em>radix</em>);</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>string</code></dt>
+ <dd>Значення, яке розбиратиметься. Якщо цей аргумент не є рядком, тоді він буде перетворений на рядок абстрактною операцією <code><a href="https://tc39.es/ecma262/#sec-tostring">ToString</a></code>. Пробільні символи на початку аргументу ігноруються.</dd>
+ <dt><code>radix</code>  {{optional_inline}}</dt>
+ <dd>Ціле число між <code>2</code> і <code>36</code>, яке вказує <var>основу</var> (в математичних системах числення) значення <em><code>string</code></em>. Будьте обережні — воно <strong><em>не</em></strong> дорівнює за замовчуванням <code>10</code>!</dd>
+ <dd class="blockIndicator warning"><a href="#Опис">Наведений нижче опис</a> поясює більш детально, що відбувається, якщо значення <em><code>radix</code></em> не надане.</dd>
+</dl>
+
+<h3 id="Повернене_значення">Повернене значення</h3>
+
+<p>Число, отримане з наданого рядка <em><code>string</code></em>.</p>
+
+<p>Або {{jsxref("NaN")}}, коли</p>
+
+<ul>
+ <li>значення <code>radix</code> менше за <code>2</code> чи більше за <code>36</code>, або</li>
+ <li>перший непробільний символ не може бути перетворений на число.</li>
+</ul>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Функція <code>parseInt</code> перетворює перший аргумент на рядок, розбирає цей рядок, після чого повертає ціле число або <code>NaN</code>.</p>
+
+<p>Якщо не <code>NaN</code>, повернене значення буде цілим числом, яке є першим аргументом, прочитаним як число у вказаній системі числення <code><var>radix</var></code>. (Наприклад, <code><var>radix</var></code>, що дорівнює <code>10</code>, перетворює перший аргумент на десяткове число, <code>8</code> - на вісімкове, <code>16</code> на шістнадцяткове, і т. д.)</p>
+
+<p>Для основ, більших за <code>10</code>, літери англійського алфавіту позначають цифри, більші за <code>9</code>. Наприклад, для шістнадцяткових цифр (основа <code>16</code>) використовуються букви від <code>A</code> до <code>F</code>.</p>
+
+<p>Якщо метод <code>parseInt</code> зустрічає символ, який не є числом у вказаній системі <code>radix</code>, він ігнорує цей символ та усі наступні символи та повертає ціле число, розібране до цієї позиції. <code>parseInt</code> обрізає числа до цілих значень. Пробільні символи попереду та в кінці є дозволеними.</p>
+
+<p>Оскільки деякі числа використовують символ <code>e</code> у своєму рядковому представленні (наприклад, <strong><code>6.022e23</code></strong> для 6.022 × 10<sup>23</sup>), використання <code>parseInt</code> для обрізання чисел призведе до неочікуваних результатів при використанні на дуже великих чи дуже малих числах. <code>parseInt</code> не слід використовувати як заміну {{jsxref("Math.floor()")}}.</p>
+
+<p>Якщо <code>radix</code> дорівнює <code>undefined</code>, <code>0</code> або його значення невизначене, JavaScript припускає наступне:</p>
+
+<ol>
+ <li>Якщо вхідний рядок <code>string</code> починається з <code>"0x"</code> або <code>"0X"</code> (нуль, за яким іде мала чи велика літера X), вважається, що <var>radix</var> дорівнює 16, а решта рядка розбирається як шістнадцяткове число.</li>
+ <li>Якщо вхідний рядок <code>string</code> починається з <code>"0"</code> (нуль), вважається, що <var>radix</var> дорівнює <code>8</code> (вісімкова система) або <code>10</code> (десяткова). Яку саме основу буде обрано, залежить від реалізації. ECMAScript 5 пояснює, що <em>має</em> використовуватись <code>10</code> (десяткова система), але ще не усі переглядачі це підтримують. З цієї причини <strong>завжди вказуйте <code><var>radix</var></code> при використанні <code>parseInt</code></strong>.</li>
+ <li>Якщо вхідний рядок <code>string</code> починається з будь-якого іншого значення, основа дорівнює <code>10</code> (десяткова).</li>
+</ol>
+
+<p>Якщо перша літера не може бути перетворена на число, <code>parseInt</code> вертає <code>NaN</code>.</p>
+
+<p>Для арифметичних цілей, значення <code>NaN</code> не є числом в жодній системі числення. Ви можете викликати функцію {{jsxref("isNaN")}}, щоб визначити, чи результат <code>parseInt</code> дорівнює <code>NaN</code>. Якщо <code>NaN</code> передається у арифметичні операції, результатом операції також буде <code>NaN</code>.</p>
+
+<p>Щоб перетворити число на його рядковий літерал у певній системі числення, використовуйте <code><em>вашеЧисло</em>.toString(radix)</code>.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Застереження щодо {{jsxref("BigInt")}}</strong>: <code>parseInt</code> перетворює {{jsxref("BigInt")}} на {{jsxref("Число", "Number")}} та в процесі втрачає точність, оскільки нечислові значення в кінці аргументу, в тому числі "n", відкидаються.</p>
+</div>
+
+<h3 id="Вісімкові_інтерпретації_без_значення_radix">Вісімкові інтерпретації без значення radix</h3>
+
+<p>Хоча це не схвалюється у ECMAScript 3 та заборонене у ECMAScript 5, багато реалізацій інтерпретують числові рядки, що починаються з <code>0</code>, як вісімкові. Наступне може перетворитись на вісімковий результат, а може й на десятковий. <strong>Завжди вказуйте <code><var>radix</var></code>, щоб запобігти цій ненадійній поведінці.</strong></p>
+
+<pre class="brush: js notranslate">parseInt('0e0')  // 0
+parseInt('08')   // 0, бо '8' не вісімкова цифра.</pre>
+
+<p>Специфікація ECMAScript 5 функції <code>parseInt</code> більше не дозволяє реалізаціям сприймати рядки, що починаються з символу <code>0</code>, як вісімкові значення.</p>
+
+<p>ECMAScript 5 зазначає:</p>
+
+<blockquote>
+<p>Функція <code>parseInt</code> створює цілочисельне значення, продиктоване інтерпретацією вмісту рядкового аргументу у відповідності до вказаної основи системи числення. Пробільний символ на початку рядка ігнорується. Якщо основа дорівнює <code>undefined</code> або <code>0</code>, вона вважається рівною <code>10</code>, окрім випадків, коли число починається з пар символів <code>0x</code> або <code>0X</code>, в такому випадку основа вважається рівною <code>16</code>.</p>
+</blockquote>
+
+<p>Це відрізняється від ECMAScript 3, де вісімкова інтерпретація просто <em>не схвалюється</em> (але дозволена).</p>
+
+<p>У багатьох реалізаціях ця поведінка не адаптована станом на 2013 рік. І, оскільки старші веб-переглядачі мають підтримуватись, <strong>завжди вказуйте значення radix</strong>.</p>
+
+<h3 id="Більш_строга_функція_розбору">Більш строга функція розбору</h3>
+
+<p>Іноді корисно мати більш строгий спросіб розбору цілих чисел.</p>
+
+<p>Регулярні вирази можуть стати в пригоді:</p>
+
+<pre class="brush: js notranslate">function filterInt(value) {
+  if (/^[-+]?(\d+|Infinity)$/.test(value)) {
+    return Number(value)
+  } else {
+    return NaN
+  }
+}
+
+console.log(filterInt('421'))                // 421
+console.log(filterInt('-421'))               // -421
+console.log(filterInt('+421'))               // 421
+console.log(filterInt('Infinity'))           // Infinity
+console.log(filterInt('421e+0'))             // NaN
+console.log(filterInt('421hop'))             // NaN
+console.log(filterInt('hop1.61803398875'))   // NaN
+console.log(filterInt('1.61803398875'))      // NaN</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_parseInt">Використання parseInt</h3>
+
+<p>Усі наступні приклади повертають <code>15</code>:</p>
+
+<pre class="brush: js notranslate">parseInt('0xF', 16)
+parseInt('F', 16)
+parseInt('17', 8)
+parseInt(021, 8)
+parseInt('015', 10)   // але `parseInt(015, 10)` поверне 13
+parseInt(15.99, 10)
+parseInt('15,123', 10)
+parseInt('FXX123', 16)
+parseInt('1111', 2)
+parseInt('15 * 3', 10)
+parseInt('15e2', 10)
+parseInt('15px', 10)
+parseInt('12', 13)
+</pre>
+
+<p>Усі наступні приклади повертають <code>NaN</code>:</p>
+
+<pre class="brush: js notranslate">parseInt('Привіт', 8) // Зовсім не число
+parseInt('546', 2)    // Числа, інші, ніж 0 чи 1, недозволені у двійковій системі
+</pre>
+
+<p>Усі наступні приклади повертають <code>-15</code>:</p>
+
+<pre class="brush: js notranslate">parseInt('-F', 16)
+parseInt('-0F', 16)
+parseInt('-0XF', 16)
+parseInt(-15.1, 10)
+parseInt('-17', 8)
+parseInt('-15', 10)
+parseInt('-1111', 2)
+parseInt('-15e1', 10)
+parseInt('-12', 13)
+</pre>
+
+<p>Усі наступні приклади повертають <code>4</code>:</p>
+
+<pre class="brush: js notranslate">parseInt(4.7, 10)
+parseInt(4.7 * 1e22, 10) // Дуже велике число стає 4
+parseInt(0.00000000000434, 10) // Дуже маленьке число стає 4
+</pre>
+
+<p>Якщо число більше за 1e+21 (включно) або менше за 1e-7 (включно), метод поверне <code>1</code>. (при використанні основи 10).</p>
+
+<pre class="brush: js notranslate">parseInt(0.0000001,10);
+parseInt(0.000000123,10);
+parseInt(1e-7,10);
+parseInt(1000000000000000000000,10);
+parseInt(123000000000000000000000,10);
+parseInt(1e+21,10);</pre>
+
+<p>Наступний приклад повертає <code>224</code>:</p>
+
+<pre class="brush: js notranslate">parseInt('0e0', 16)
+</pre>
+
+<p>Значення {{jsxref("BigInt")}} втрачають точність:</p>
+
+<pre class="brush: js notranslate">parseInt(900719925474099267n)
+// 900719925474099300</pre>
+
+<p>parseInt не працює з <a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar#Числові_роздільники">числовими роздільниками</a>:</p>
+
+<pre class="brush: js notranslate">parseInt('123_456');
+// 123
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-parseint-string-radix', 'parseInt')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.parseInt")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</li>
+ <li>{{jsxref("Number.parseFloat()")}}</li>
+ <li>{{jsxref("Number.parseInt()")}}</li>
+ <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li>
+ <li>{{jsxref("Number.toString()")}}</li>
+ <li>{{jsxref("Object.valueOf")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/promise/all/index.html b/files/uk/web/javascript/reference/global_objects/promise/all/index.html
new file mode 100644
index 0000000000..156b5f499f
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/promise/all/index.html
@@ -0,0 +1,232 @@
+---
+title: Promise.all()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/all
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Promise
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/all
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>Promise.all()</code></strong> повертає єдиний {{jsxref("Promise","проміс")}}, який виконується, коли усі проміси, передані у вигляді ітерабельного об'єкта, були виконані, або коли ітерабельний об'єкт не містить жодного проміса. Він відхиляється з причиною першого відхиленого проміса.</p>
+
+<p>Зазвичай використовується після того, як були запущені асинхронні задачі, що виконуються конкурентно, та були створені проміси для їхніх результатів, щоб мати змогу зачекати, доки усі задачі не будуть виконані.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/promise-all.html")}}</div>
+
+<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Promise.all(<var>iterable</var>);</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>iterable</code></dt>
+ <dd><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору#Протокол_ітерабельного_обєкта">Ітерабельний об'єкт</a>, такий як {{jsxref("Array")}}.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<ul>
+ <li><strong>Вже вирішений</strong> {{jsxref("Promise", "проміс")}}, якщо переданий <var>ітерабельний об'єкт</var> є порожнім.</li>
+ <li><strong>Асинхронно вирішений</strong> {{jsxref("Promise","проміс")}}, якщо переданий <var>ітерабельний об'єкт</var> не містить промісів. Зауважте, що Google Chrome 58 у цьому випадку повертає <strong>вже вирішений</strong> проміс.</li>
+ <li>{{jsxref("Promise","Проміс")}} <strong>у стані очікування</strong> у всіх інших випадках. Цей повернений проміс далі вирішується/відхиляється <strong>асинхронно</strong> (як тільки стек стане порожнім), коли усі проміси у переданому <var>ітерабельному об'єкті</var> будуть вирішені, або якщо будь-який з промісів буде відхилено. Дивіться приклад щодо "Асинхронності або синхронності Promise.all" нижче. Повернені значення будуть розташовані у порядку, в якому були передані проміси, незалежно від порядку завершення.</li>
+</ul>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Цей метод може бути корисним для збирання результатів множини промісів.</p>
+
+<h3 id="Виконання">Виконання</h3>
+
+<p>Повернений проміс виконується з масивом, що містить <strong>усі </strong>значення <var>ітерабельного об'єкта,</var> переданого в якості аргумента (також значення, що не є промісами).</p>
+
+<ul>
+ <li>Якщо був переданий порожній <var>ітерабельний об'єкт</var>, тоді цей метод вертає (синхронно) вже вирішений проміс.</li>
+ <li>Якщо усі передані проміси виконуються, або це не проміси, проміс, повернений <code>Promise.all</code>, виконується асинхронно.</li>
+</ul>
+
+<h3 id="Відхилення">Відхилення</h3>
+
+<p>Якщо будь-який з переданих промісів відхиляється, <code>Promise.all</code> асинхронно відхиляється зі значенням відхиленого проміса, незалежно від того, чи були вирішені інші проміси.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_Promise.all">Використання <code>Promise.all</code></h3>
+
+<p><code>Promise.all</code> чекає на усі виконання (або на перше відхилення).</p>
+
+<pre class="brush: js">var p1 = Promise.resolve(3);
+var p2 = 1337;
+var p3 = new Promise((resolve, reject) =&gt; {
+  setTimeout(() =&gt; {
+    resolve("foo");
+  }, 100);
+});
+
+Promise.all([p1, p2, p3]).then(values =&gt; {
+  console.log(values); // [3, 1337, "foo"]
+});</pre>
+
+<p>Якщо <var>ітерабельний об'єкт</var> містить значення, що не є промісами, вони будуть проігноровані, але все одно міститимуться у поверненому масиві проміса (якщо проміс виконається):</p>
+
+<pre class="brush: js">// рахуватиметься, ніби передано порожній ітерабельний об'єкт, отже, він виконається
+var p = Promise.all([1,2,3]);
+// рахуватиметься, ніби переданий ітерабельний об'єкт містить лише вирішений проміс зі значенням "444", отже, він виконається
+var p2 = Promise.all([1,2,3, Promise.resolve(444)]);
+// рахуватиметься, ніби переданий ітерабельний об'єкт містить лише відхилений проміс зі значенням "555", отже, він буде відхилений
+var p3 = Promise.all([1,2,3, Promise.reject(555)]);
+
+// використовуючи setTimeout, ми можемо виконати код після того, як стек стане порожнім
+setTimeout(function() {
+    console.log(p);
+    console.log(p2);
+    console.log(p3);
+});
+
+// виводить
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[3] }
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[4] }
+// Promise { &lt;state&gt;: "rejected", &lt;reason&gt;: 555 }</pre>
+
+<h3 id="Асинхронність_або_синхронність_Promise.all">Асинхронність або синхронність <code>Promise.all</code></h3>
+
+<p>Наступний приклад демонструє асинхронність (або синхронність, якщо передано порожній <var>ітерабельний об'єкт</var>) <code>Promise.all</code>:</p>
+
+<pre class="brush: js">// ми передаємо в якості аргумента масив вже вирішених промісів,
+// щоб запустити Promise.all якомога швидше
+var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
+
+var p = Promise.all(resolvedPromisesArray);
+// негайно виводимо значення p
+console.log(p);
+
+// використовуючи setTimeout, ми можемо виконати код після того, як стек стане порожнім
+setTimeout(function() {
+    console.log('стек тепер порожній');
+    console.log(p);
+});
+
+// виводить, в порядку:
+// Promise { &lt;state&gt;: "pending" }
+// стек тепер порожній
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[2] }
+</pre>
+
+<p>Те саме відбувається, якщо <code>Promise.all</code> відхиляється:</p>
+
+<pre class="brush: js">var mixedPromisesArray = [Promise.resolve(33), Promise.reject(44)];
+var p = Promise.all(mixedPromisesArray);
+console.log(p);
+setTimeout(function() {
+    console.log('стек тепер порожній');
+    console.log(p);
+});
+
+// виводить
+// Promise { &lt;state&gt;: "pending" }
+// стек тепер порожній
+// Promise { &lt;state&gt;: "rejected", &lt;reason&gt;: 44 }
+</pre>
+
+<p><code>Promise.all</code> вирішується синхронно <strong>лише тоді</strong>, коли переданий <var>ітерабельний об'єкт</var> є порожнім:</p>
+
+<pre class="brush: js">var p = Promise.all([]); // буде негайно вирішений
+// значення, що не є промісами, будуть проігноровані, але обчислення відбуватиметься асинхронно
+var p2 = Promise.all([1337, "привіт"]);
+console.log(p);
+console.log(p2)
+setTimeout(function() {
+    console.log('стек тепер порожній');
+    console.log(p2);
+});
+
+// виводить
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[0] }
+// Promise { &lt;state&gt;: "pending" }
+// стек тепер порожній
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[2] }</pre>
+
+<h3 id="Швидке_відхилення_у_Promise.all">Швидке відхилення у <code>Promise.all</code></h3>
+
+<p><code>Promise.all</code> відхиляється, якщо будь-який з його елементів було відхилено. Наприклад, якщо ви передаєте чотири проміси, які вирішуються після затримки, та один проміс, який негайно відхиляється, тоді <code>Promise.all</code> буде негайно відхилено.</p>
+
+<pre class="brush: js">var p1 = new Promise((resolve, reject) =&gt; {
+  setTimeout(() =&gt; resolve('один'), 1000);
+});
+var p2 = new Promise((resolve, reject) =&gt; {
+  setTimeout(() =&gt; resolve('два'), 2000);
+});
+var p3 = new Promise((resolve, reject) =&gt; {
+  setTimeout(() =&gt; resolve('три'), 3000);
+});
+var p4 = new Promise((resolve, reject) =&gt; {
+  setTimeout(() =&gt; resolve('чотири'), 4000);
+});
+var p5 = new Promise((resolve, reject) =&gt; {
+  reject(new Error('відхилено'));
+});
+
+
+// Використовуємо .catch:
+Promise.all([p1, p2, p3, p4, p5])
+.then(values =&gt; {
+  console.log(values);
+})
+.catch(error =&gt; {
+  console.error(error.message)
+});
+
+//Виведе:
+//"відхилено"
+
+</pre>
+
+<p>Цю поведінку можливо змінити, обробивши можливі відхилення:</p>
+
+<pre class="brush: js">var p1 = new Promise((resolve, reject) =&gt; {
+  setTimeout(() =&gt; resolve('p1_відкладене_вирішення'), 1000);
+});
+
+var p2 = new Promise((resolve, reject) =&gt; {
+  reject(new Error('p2_негайне_відхилення'));
+});
+
+Promise.all([
+  p1.catch(error =&gt; { return error }),
+  p2.catch(error =&gt; { return error }),
+]).then(values =&gt; {
+  console.log(values[0]) // "p1_відкладене_вирішення"
+  console.error(values[1]) // "Error: p2_негайне_відхилення"
+})
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.all', 'Promise.all')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.all")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.race()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/promise/allsettled/index.html b/files/uk/web/javascript/reference/global_objects/promise/allsettled/index.html
new file mode 100644
index 0000000000..739dafbb96
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/promise/allsettled/index.html
@@ -0,0 +1,67 @@
+---
+title: Promise.allSettled()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/allSettled
+tags:
+  - JavaScript
+  - Promise
+  - allSettled
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/allSettled
+---
+<p>{{JSRef}}</p>
+
+<p>Метод <code><strong>Promise.allSettled()</strong></code> повертає проміс, який вирішується після того, як усі надані проміси були або вирішені, або відхилені, з масивом об'єктів, що містять результат кожного проміса.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/promise-allsettled.html")}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>Promise</em>.allSettled(<em>iterable</em>);</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>iterable</code></dt>
+ <dd><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору#Протокол_ітерабельного_обєкта">Ітерабельний об'єкт</a>, такий, як {{jsxref("Array")}}, кожен елемент якого є об'єктом <code>Promise</code>.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>{{jsxref("Promise")}} у стані <strong>очікування</strong>, який буде <strong>асинхронно</strong> виконаний, як тільки кожен проміс у вказаному наборі промісів буде завершений, або успішним виконанням, або будучи відхиленим. В цей момент обробнику поверненого проміса передається масив, що містить результат для кожного проміса з початкового набору промісів.</p>
+
+<p>У кожного об'єкта результату присутній рядок <code>status</code> (статус). Якщо статус дорівнює <code>fulfilled</code> (виконаний), тоді присутній параметр <code>value</code> (значення). Якщо статус дорівнює <code>rejected</code> (відхилений), тоді присутній параметр <code>reason</code> (причина). Значення (або причина) відображає значення, з яким кожен проміс був виконаний (або відхилений).</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.es/proposal-promise-allSettled/#sec-promise.allsettled"><code>Promise.allSettled()</code> (TC39 Stage 4 Draft)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.allSettled")}}</p>
+
+<h3 id="Хід_реалізації">Хід реалізації</h3>
+
+<p>Наведена таблиця надає щоденний статус реалізації цієї функціональності, оскільки функціональність ще не досягла кросбраузерної стабільності. Дані генеруються запуском відповідних тестів функціональності у <a href="https://github.com/tc39/test262">Test262</a>, стандартному тестовому наборі JavaScript, на нічній збірці чи на останньому релізі рушія JavaScript кожного веб-переглядача.</p>
+
+<div>{{EmbedTest262ReportResultsTable("Promise.allSettled")}}</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Archive/Add-ons/Techniques/Promises">Проміси</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Using_promises">Використання промісів</a></li>
+ <li><a href="/uk/docs/Learn/JavaScript/Asynchronous/Promises">Витончене асинхронне програмування за допомогою промісів</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.all()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/promise/any/index.html b/files/uk/web/javascript/reference/global_objects/promise/any/index.html
new file mode 100644
index 0000000000..3e450db558
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/promise/any/index.html
@@ -0,0 +1,86 @@
+---
+title: Promise.any()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/any
+tags:
+  - JavaScript
+  - Promise
+  - Експериментальний
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/any
+---
+<div>{{JSRef}}</div>
+
+<p><code>Promise.any()</code> приймає ітерабельний об'єкт з об'єктами {{JSxRef("Promise")}} та, як тільки один з промісів виконується, вертає єдиний проміс, який вирішується зі значенням цього проміса. Якщо жодний проміс не виконався (якщо усі надані проміси були відхилені), тоді повернений проміс буде відхилено з об'єктом, який досі є предметом обговорення: або масив причин відхилення, або {{JSxRef("AggregateError")}}, новий підклас {{JSxRef("Error")}}, який поєднує окремі помилки. Найголовніше, цей метод є протилежністю методу {{JSxRef("Promise.all()")}}.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Застереження!</strong> Метод <code>Promise.any()</code> є експериментальним та не повністю підтримується усіма переглядачами. Він наразі на стадії <a href="https://github.com/tc39/proposal-promise-any" rel="external">TC39 Candidate stage (стадія 3)</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre>Promise.any(<var>iterable</var>);</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>iterable</code></dt>
+ <dd><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору#Протокол_ітерабельного_обєкта">Ітерабельний об'єкт</a>, такий як {{JSxRef("Array")}}.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<ul>
+ <li><strong>Вже вирішений</strong> {{JSxRef("Promise","проміс")}}, якщо переданий <var>ітерабельний об'єкт</var> є порожнім.</li>
+ <li><strong>Асинхронно вирішений</strong> {{JSxRef("Promise","проміс")}}, якщо переданий <var>ітерабельний об'єкт</var> не містить промісів.</li>
+ <li>{{JSxRef("Promise","Проміс")}} <strong>у стані очікування</strong> у всіх інших випадках. Цей повернений проміс далі вирішується/відхиляється <strong>асинхронно</strong> (як тільки стек стане порожнім), коли будь-який з промісів у переданому <var>ітерабельному об'єкті</var> буде вирішено, або якщо усі проміси буде відхилено.</li>
+</ul>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Цей метод корисний для повернення першого проміса, який виконується. Він завершується після виконання проміса, тому не очікує на завершення інших промісів, як тільки його знаходить. На відміну від {{JSxRef("Promise.all()")}}, який вертає <em>масив</em> вирішених значень, ми отримуємо лише одне вирішене значення (за умови, що принаймні один проміс вирішується). Це може бути вигідно, якщо нам потрібно, щоб лише один проміс було вирішено, і нам байдуже, який саме. Також, на відміну від {{JSxRef("Promise.race()")}}, який вертає перше <em>встановлене</em> значення, цей метод вертає перше <em>вирішене</em> значення. Цей метод ігноруватиме усі відхилені проміси до першого вирішеного проміса.</p>
+
+<h3 id="Виконання">Виконання</h3>
+
+<p>Якщо будь-який з переданих промісів виконається, повернений проміс асинхронно виконується зі значенням виконаного проміса, незалежно від того, чи були інші проміси виконані чи відхилені.</p>
+
+<ul>
+ <li>Якщо був переданий порожній <var>ітерабельний об'єкт</var>, тоді цей метод вертає (синхронно) вже вирішений проміс.</li>
+ <li>Якщо будь-який з переданих промісів виконується, або передано не проміси, проміс, повернений <code>Promise.any</code> виконується асинхронно.</li>
+</ul>
+
+<h3 id="Відхилення">Відхилення</h3>
+
+<p>Якщо усі передані проміси було відхилено, <code>Promise.any</code> асинхронно відхиляється з одним з двох варіантів (щодо яких ще не дійшли згоди): </p>
+
+<ul>
+ <li>масив, що містить <strong>усі </strong>причини відхилень <var>ітерабельного об'єкта</var>, переданого в якості аргумента, або</li>
+ <li>об'єкт {{JSxRef("AggregateError")}}, що розширює {{JSxRef("Error")}} та містить вказівник на масив винятків.</li>
+</ul>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.es/proposal-promise-any/#sec-promise.any">ESNext Promise.any Proposal</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Promise.any")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{JSxRef("Promise")}}</li>
+ <li>{{JSxRef("Promise.allSettled()")}}</li>
+ <li>{{JSxRef("Promise.all()")}}</li>
+ <li>{{JSxRef("Promise.race()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/promise/catch/index.html b/files/uk/web/javascript/reference/global_objects/promise/catch/index.html
new file mode 100644
index 0000000000..7e84771513
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/promise/catch/index.html
@@ -0,0 +1,189 @@
+---
+title: Promise.prototype.catch()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/catch
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Promise
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/catch
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>catch()</strong></code> вертає {{jsxref("Promise","проміс")}} та має справу лише з відхиленнями. Він поводиться так само, як виклик {{jsxref("Promise.then", "Promise.prototype.then(undefined, onRejected)")}} (насправді, <code>obj.catch(onRejected)</code> здійснює внутрішній виклик <code>obj.then(undefined, onRejected)</code>). Це означає, що ви маєте надати функцію <code>onRejected</code>, навіть якщо хочете отримати повернене значення <code>undefined</code> - наприклад, <code>obj.catch(() =&gt; {})</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/promise-catch.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>p</var>.catch(<var>onRejected</var>);
+
+p.catch(function(<var>reason</var>) {
+   // відхилення
+});
+</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>onRejected</var></code></dt>
+ <dd>{{jsxref("Function","Функція")}}, що викликається, коли об'єкт <code>Promise</code> відхилено. Ця функція має один аргумент:
+ <dl>
+  <dt><code><var>reason</var></code></dt>
+  <dd>Причина відхилення.</dd>
+ </dl>
+ Проміс, повернений методом <code>catch()</code>, відхиляється, якщо <code>onRejected</code> викидає помилку або повертає проміс, що сам є відхиленим; інакше, він вирішується.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Здійснює внутрішній виклик <code>Promise.prototype.then</code> на об'єкті, на якому був викликаний, передаючи параметри <code>undefined</code> та отриманий обробник <code>onRejected</code>. Повертає значення цього виклику, тобто, {{jsxref("Promise")}}.</p>
+
+<div class="warning">
+<p>Зауважте, що наведені нижче приклади викидають екземпляри <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Error">Error</a>. Це вважається гарною практикою у порівнянні з викиданням рядків: Інакше та частина, що здійснює перехоплення, була б змушена робити перевірки, щоб дізнатись, чи є аргумент рядком, чи помилкою, і ви могли б втратити цінну інформацію, таку як траси стеків.</p>
+</div>
+
+<p><strong>Демонстрація внутрішнього виклику:</strong></p>
+
+<pre class="brush: js">// заміщуємо початковий Promise.prototype.then/catch, щоб додати трохи логів
+(function(Promise){
+    var originalThen = Promise.prototype.then;
+    var originalCatch = Promise.prototype.catch;
+
+    Promise.prototype.then = function(){
+        console.log('&gt; &gt; &gt; &gt; &gt; &gt; викликано .then на %o з аргументами: %o', this, arguments);
+        return originalThen.apply(this, arguments);
+    };
+    Promise.prototype.catch = function(){
+        console.error('&gt; &gt; &gt; &gt; &gt; &gt; викликано .catch на %o з аргументами: %o', this, arguments);
+        return originalCatch.apply(this, arguments);
+    };
+
+})(this.Promise);
+
+
+
+// викликаємо catch на вже вирішеному промісі
+Promise.resolve().catch(function XXX(){});
+
+// виводить:
+// &gt; &gt; &gt; &gt; &gt; &gt; викликано .catch на Promise{} з аргументами: Arguments{1} [0: function XXX()]
+// &gt; &gt; &gt; &gt; &gt; &gt; викликано .then на Promise{} з аргументами: Arguments{2} [0: undefined, 1: function XXX()]
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>catch</code> використовується для обробки помилок у композиції промісів. Оскільки він вертає {{jsxref("Promise","проміс")}}, його <a href="/uk/docs/Web/JavaScript/Guide/Using_promises#Chaining_after_a_catch">можна додавати в ланцюги</a> так само, як метод {{jsxref("Promise.then", "then()")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_та_ланцюгування_метода_catch">Використання та ланцюгування метода <code>catch</code></h3>
+
+<pre class="brush: js">var p1 = new Promise(function(resolve, reject) {
+  resolve('Успіх!');
+});
+
+p1.then(function(value) {
+  console.log(value); // "Успіх!"
+  throw new Error('о, ні!');
+}).catch(function(e) {
+  console.error(e.message); // "о, ні!"
+}).then(function(){
+  console.log('після catch ланцюг відновлено');
+}, function () {
+  console.log('Не запуститься через catch');
+});
+
+// Наступний код поводиться так само
+p1.then(function(value) {
+  console.log(value); // "Успіх!"
+  return Promise.reject('о, ні!');
+}).catch(function(e) {
+  console.error(e); // "о, ні!"
+}).then(function(){
+  console.log('після catch ланцюг відновлено');
+}, function () {
+  console.log('Не запуститься через catch');
+});
+</pre>
+
+<h3 id="Підводні_камені_при_викиданні_помилок">Підводні камені при викиданні помилок</h3>
+
+<pre class="brush: js">// Викидання помилок викличе метод catch у більшості випадків
+var p1 = new Promise(function(resolve, reject) {
+  throw new Error('Ой-ой!');
+});
+
+p1.catch(function(e) {
+  console.error(e); // "Ой-ой!"
+});
+
+// Помилки, викинуті всередині асинхронних функцій, поводитимуться, як неперехоплені
+var p2 = new Promise(function(resolve, reject) {
+  setTimeout(function() {
+    throw new Error('Неперехоплений виняток!');
+  }, 1000);
+});
+
+p2.catch(function(e) {
+  console.error(e); // Це ніколи не виконається
+});
+
+// Помилки, викинуті після виклику resolve, глушаться
+var p3 = new Promise(function(resolve, reject) {
+  resolve();
+  throw new Error('Заглушений виняток!');
+});
+
+p3.catch(function(e) {
+   console.error(e); // Це ніколи не виконається
+});</pre>
+
+<h3 id="Якщо_він_вирішений">Якщо він вирішений</h3>
+
+<pre class="brush: js">//Створюємо проміс, що не викличе onReject
+var p1 = Promise.resolve("виклик наступного");
+
+var p2 = p1.catch(function (reason) {
+    //Це ніколи не буде викликано
+    console.error("перехоплено p1!");
+    console.error(reason);
+});
+
+p2.then(function (value) {
+    console.log("onFulfilled наступного проміса"); /* onFulfilled наступного проміса */
+    console.log(value); /* виклик наступного */
+}, function (reason) {
+    console.log("onRejected наступного проміса");
+    console.log(reason);
+});</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.catch")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.prototype.then()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/promise/finally/index.html b/files/uk/web/javascript/reference/global_objects/promise/finally/index.html
new file mode 100644
index 0000000000..f67c7fb1e3
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/promise/finally/index.html
@@ -0,0 +1,103 @@
+---
+title: Promise.prototype.finally()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/finally
+tags:
+  - JavaScript
+  - Promise
+  - finally
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/finally
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>finally()</strong></code> вертає {{jsxref("Promise")}}. Коли проміс встановлено, тобто, або виконано, або відхилено, виконується вказана функція зворотного виклику. Це надає можливість виконати код незалежно від того, чи був проміс успішно виконаний, чи відхилений, як тільки проміс було оброблено.</p>
+
+<p>Це допомагає уникати дублювання коду у обробниках проміса {{jsxref("Promise.then", "then()")}} та {{jsxref("Promise.catch", "catch()")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>p.finally(onFinally)</var>;
+
+p.finally(function() {
+   // встановлений (виконаний або відхилений)
+});
+</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>onFinally</code></dt>
+ <dd>{{jsxref("Function", "Функція")}}, що викликається, коли <code>Promise</code> встановлений.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Вертає {{jsxref("Promise","проміс")}}, чиєму обробнику <code>finally</code> присвоєна вказана функція <code>onFinally</code>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>finally()</code> може бути корисним, якщо ви хочете виконати певну обробку або прибирання, як тільки проміс встановлено, незалежно від результату.</p>
+
+<p>Метод <code>finally()</code> дуже схожий на виклик <code>.then(onFinally, onFinally)</code>, але є пара відмінностей:</p>
+
+<ul>
+ <li>Створюючи вбудовану функцію, ви можете передати її один раз, замість того, щоб або оголошувати її двічі, або створювати для неї змінну</li>
+ <li>Зворотній виклик <code>finally</code> не отримує жодних аргументів, оскільки не існує надійних методів визначити, чи був проміс виконаний, чи відхилений. Цей випадок використання розрахований саме на те, що вам <em>неважлива</em> причина відхилення чи повернене значення, і тому немає необхідності їх надавати. Отже, для прикладу:
+  <ul>
+   <li>На відміну від <code>Promise.resolve(2).then(() =&gt; {}, () =&gt; {})</code> (який буде вирішений з <code>undefined</code>), <code>Promise.resolve(2).finally(() =&gt; {})</code> буде вирішений з <code>2</code>.</li>
+   <li>Також, на відміну від <code>Promise.reject(3).then(() =&gt; {}, () =&gt; {})</code> (який буде виконаний з <code>undefined</code>), <code>Promise.reject(3).finally(() =&gt; {})</code> буде відхилений з <code>3</code>.</li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Заувага:</strong> <code>throw</code> (або повернення відхиленого проміса) у зворотному виклику <code>finally</code> відхилить новий проміс з причиною відхилення, вказаною у виклику <code>throw</code>.</p>
+</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">let isLoading = true;
+
+fetch(myRequest).then(function(response) {
+    var contentType = response.headers.get("content-type");
+    if(contentType &amp;&amp; contentType.includes("application/json")) {
+      return response.json();
+    }
+    throw new TypeError("От халепа, немає JSON!");
+  })
+  .then(function(json) { /* обробити JSON далі */ })
+  .catch(function(error) { console.error(error); /* цей рядок може викинути помилку, наприклад, якщо console = {} */ })
+  .finally(function() { isLoading = false; });
+
+</pre>
+
+<div class="hidden">
+<p>Будь ласка, не додавайте поліфіли у статті MDN. Більше інформації дивіться за посиланням: <a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a></p>
+</div>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.prototype.finally', 'Promise.prototype.finally')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.finally")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.prototype.then()")}}</li>
+ <li>{{jsxref("Promise.prototype.catch()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/promise/index.html b/files/uk/web/javascript/reference/global_objects/promise/index.html
new file mode 100644
index 0000000000..1f18c8bd76
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/promise/index.html
@@ -0,0 +1,232 @@
+---
+title: Promise
+slug: Web/JavaScript/Reference/Global_Objects/Promise
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Promise
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise
+---
+<div>{{JSRef}}</div>
+
+<p>Об'єкт <strong><code>Promise</code></strong> відображає остаточне завершення (або неуспіх) асинхронної операції та значення, яке вона повертає.</p>
+
+<p>Щоб дізнатись, як працюють проміси та як їх можна використовувати, радимо вам спочатку прочитати статтю <a href="/uk/docs/Web/JavaScript/Guide/Using_promises">Використання промісів</a>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p><code><strong>Promise</strong></code> - це проксі для значення, яке може бути невідомим на момент створення проміса. Це дозволяє зв'язувати обробники з кінцевим успішним значенням чи причиною неуспіху асинхронних дій. Таким чином, асинхронні методи повертають значення, як синхронні методи: замість того, щоб негайно повернути кінцеве значення, асинхронний метод повертає <em>проміс</em>, щоб надати значення в певний момент у майбутньому.</p>
+
+<p>Об'єкт <code>Promise</code> може знаходитись в одному з цих станів:</p>
+
+<ul>
+ <li><em>pending (у стані очікування)</em>: початковий стан, ані виконаний, ані відхилений.</li>
+ <li><em>fulfilled (виконаний)</em>: означає, що операція завершилася вдало.</li>
+ <li><em>rejected (відхилений)</em>: означає, що операція була неуспішною.</li>
+</ul>
+
+<p>Проміс у стані очікування може стати або виконаним (<em>fulfilled</em>) з певним значенням, або відхиленим (<em>rejected</em>) з причиною відхилення (помилкою). Коли щось із цього відбувається, викликаються відповідні обробники, що ставляться в чергу методом об'єкта <code>then</code>. (Якщо проміс вже був виконаний чи відхилений ще до моменту приєднання відповідного обробника, то обробник буде викликаний, таким чином не відбувається "стану гонки" між завершенням асинхронної операції та приєднанням її обробників)</p>
+
+<p>Оскільки методи <code>{{jsxref("Promise.then", "Promise.prototype.then()")}}</code> та <code>{{jsxref("Promise.catch", "Promise.prototype.catch()")}}</code> повертають проміси, їх можна з'єднувати в ланцюжки.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/17088/promises.png" style="height: 297px; width: 801px;"></p>
+
+<div class="note">
+<p><strong>Не варто плутати з</strong><span lang="uk"><span><strong>:</strong> Декілька інших мов мають механізми лінивих обчислень та відкладених розрахунків, які також називаються "promises" - наприклад,</span> Scheme. <span>Проміси у JavaScript відображають процеси, які вже відбуваються і які можуть бути з'єднані в ланцюги з функціями зворотного виклику.</span> <span>Якщо вам потрібне ліниве обчислення виразу, розгляньте </span></span><a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкові функції</a><span lang="uk"><span> без аргументів: <code>f = () =&gt; вираз</code> для створення лінивого виразу, та <code>f()</code> для обчислення.</span></span></p>
+</div>
+
+<div class="note">
+<p><strong>Заувага</strong>: Проміс називають <em>встановленим</em> (<em>settled)</em>, якщо він або виконаний, або відхилений, але не знаходиться у стані очікування. Ви також почуєте термін <em>вирішений</em> (<em>resolved</em>) щодо промісів - він означає, що проміс встановлений, або ж "зафіксований", щоб відповідати стану іншого проміса. Стаття <a href="https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md">States and Fates</a> містить більше подробиць щодо термінології промісів.</p>
+</div>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise">Promise()</a></code></dt>
+ <dd>Конструктор переважно використовується для загортання функцій, які самі не підтримують проміси.</dd>
+</dl>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt><code>Promise.length</code></dt>
+ <dd><span id="result_box" lang="uk"><span>Значення довжини, завжди дорівнює 1 (кількість аргументів конструктора)</span></span>.</dd>
+ <dt><code>Promise.prototype</code></dt>
+ <dd>Прототип для конструктора <code>Promise</code>.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<dl>
+ <dt>{{jsxref("Promise.all", "Promise.all(iterable)")}}</dt>
+ <dd>Чекає, доки усі проміси не будуть вирішені, або поки будь-який з промісів не буде відхилений.</dd>
+ <dd><span id="result_box" lang="uk"><span>Якщо повернений проміс вирішується, він вирішується із сукупним масивом значень вирішених промісів, у тому ж порядку, в якому вони визначені в ітерабельному об'єкті промісів.</span> </span></dd>
+ <dd><span lang="uk"><span>В разі відхилення, він відхиляється з причиною з першого відхиленого проміса у ітерабельному об'єкті.</span></span></dd>
+ <dt>{{JSxRef("Promise.allSettled", "Promise.allSettled(iterable)")}}</dt>
+ <dd>Чекає, доки усі проміси не будуть встановлені (кожен має бути або вирішений, або відхилений).</dd>
+ <dd>Повертає проміс, який вирішується після того, як усі надані проміси були або вирішені, або відхилені, з масивом об'єктів, які описують результат кожного проміса.</dd>
+ <dt>{{jsxref("Promise.race", "Promise.race(iterable)")}}</dt>
+ <dd>Чекає, доки будь-який з промісів не буде або вирішений, або відхилений.</dd>
+ <dd>Якщо повернений проміс вирішений, він вирішується зі значенням першого проміса з ітерабельного об'єкта, який був вирішений.</dd>
+ <dd><span id="result_box" lang="uk"><span>Якщо він відхилений, він відхиляється з причиною першого відхиленого проміса.</span></span></dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Promise.відхилено", "Promise.reject(reason)")}}</dt>
+ <dd>Повертає новий об'єкт <code>Promise</code>, відхилений з наданою причиною.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Promise.resolve", "Promise.resolve(value)")}}</dt>
+ <dd><span id="result_box" lang="uk"><span>Повертає новий об'єкт <code>Promise</code>, який вирішується з наданим значенням.</span> <span>Якщо значенням є промісоподібний об'єкт (такий, що має метод <code>then</code>), то повернений проміс буде його "дотримуватись", приймаючи його кінцевий стан; у іншому випадку повернений проміс буде виконаний з наданим значенням</span><span>.</span></span></dd>
+ <dd>Загалом, якщо ви не знаєте, є значення промісом чи ні, використайте {{JSxRef("Promise.resolve", "Promise.resolve(value)")}} та працюйте з поверненим значенням як з промісом.</dd>
+</dl>
+
+<h2 id="Прототип_Promise">Прототип Promise</h2>
+
+<h3 id="Властивості_2">Властивості</h3>
+
+<dl>
+ <dt><code>Promise.prototype.constructor</code></dt>
+ <dd>Вертає функцію, яка створила прототип екземпляра. Це за замовчуванням функція {{jsxref("Promise")}}.</dd>
+</dl>
+
+<h3 id="Методи_2">Методи</h3>
+
+<dl>
+ <dt>{{jsxref("Promise.prototype.catch()")}}</dt>
+ <dd>Додає до проміса функцію зворотного виклику для обробки відхилення та вертає новий проміс, що вирішується з поверненим значенням цієї функції, коли вона викликається, або з початковим значенням виконання, якщо проміс, навпаки, виконається.</dd>
+ <dt>{{jsxref("Promise.prototype.then()")}}</dt>
+ <dd>Додає до проміса обробники виконання та відхилення та вертає новий проміс, що вирішується з поверненим значенням обробника, який викликався, або з початковим встановленим значенням, якщо проміс не оброблявся (тобто, якщо відповідний обробник <code>onFulfilled</code> чи <code>onRejected</code> не є функцією).</dd>
+ <dt>{{jsxref("Promise.prototype.finally()")}}</dt>
+ <dd>Додає до проміса обробник та вертає новий проміс, який вирішується, коли вирішується початковий проміс. Обробник викликається, коли проміс встановлений, тобто, або виконаний, або відхилений.</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Базовий_приклад">Базовий приклад</h3>
+
+<pre class="brush: js">let myFirstPromise = new Promise((resolve, reject) =&gt; {
+  // Викликаємо resolve(...), коли те, що ми робили асинхронно, успішно виконалось, і reject(...), якщо неуспішно.
+  // В цьому прикладі ми використовуємо setTimeout(...) для симуляції асинхронного коду.
+  // В житті ви, ймовірно, використовуватиме щось на кшталт XHR або HTML5 API.
+  setTimeout( function() {
+    resolve("Успіх!")  // Є! Все пройшло добре!
+  }, 250)
+})
+
+myFirstPromise.then((successMessage) =&gt; {
+  // successMessage - це те, що ми передаємо у наведену вище функцію resolve(...).
+  // Це не обов'язково має бути рядок, але, якщо це повідомлення про успіх, то, мабуть, це буде він.
+  console.log("Є! " + successMessage)
+});</pre>
+
+<h3 id="Ускладнений_приклад">Ускладнений приклад</h3>
+
+<div class="hidden">
+<pre class="brush: html">&lt;button id="btn"&gt;Зробити проміс!&lt;/button&gt;
+&lt;div id="log"&gt;&lt;/div&gt;</pre>
+</div>
+
+<p>Цей маленький приклад демонструє механізм об'єкта <code>Promise</code>. Метод <code>testPromise()</code> викликається кожний раз, коли натискається кнопка <a href="/uk/docs/Web/HTML/Element/button" title="The HTML &lt;button> element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality."><code>&lt;button&gt;</code></a>. Він створює проміс, який буде виконаний з використанням <a href="/uk/docs/Web/API/Window/setTimeout" title="REDIRECT WindowTimers.setTimeout"><code>window.setTimeout()</code></a> з лічильником проміса (число, що стартує від 1) кожні 1-3 секунди, у випадковому порядку. Конструктор <code>Promise()</code> використовується для створення проміса.</p>
+
+<p>Виконання проміса логується просто, виконанням зворотного виклику через {{jsxref("Promise.prototype.then()","p1.then()")}}. Кілька логів демонструють, як синхронна частина методу відокремлюється від асинхронного завершення проміса.</p>
+
+<pre class="brush: js">'use strict';
+var promiseCount = 0;
+
+function testPromise() {
+    var thisPromiseCount = ++promiseCount;
+
+    var log = document.getElementById('log');
+    log.insertAdjacentHTML('beforeend', thisPromiseCount +
+        ') Запуск (&lt;small&gt;Синхронний код запущено&lt;/small&gt;)&lt;br/&gt;');
+
+    // Створюємо новий проміс: ми передаємо лічильник цього проміса, починаючи з 1 (після очікування 3с)
+    var p1 = new Promise(
+        // Функція вирішення викликається з можливістю вирішити або
+        // відхилити проміс
+        function(resolve, reject) {
+            log.insertAdjacentHTML('beforeend', thisPromiseCount +
+                ') Запуск проміса (&lt;small&gt;Асинхронний код запущено&lt;/small&gt;)&lt;br/&gt;');
+            // Це лише приклад для створення асинхронності
+            window.setTimeout(
+                function() {
+                    // Ми виконуємо проміс!
+                    resolve(thisPromiseCount);
+                }, Math.random() * 2000 + 1000);
+        }
+    );
+
+    // Визначаємо, що робити, коли проміс вирішено/виконано, викликом then(),
+    // а метод catch() визначає, що робити, якщо проміс відхилено.
+    p1.then(
+        // Залогувати значення виконання
+        function(val) {
+            log.insertAdjacentHTML('beforeend', val +
+                ') Проміс виконано (&lt;small&gt;Асинхронний код завершений&lt;/small&gt;)&lt;br/&gt;');
+        })
+    .catch(
+        // Залогувати причину відхилення
+        function(reason) {
+            console.log('Обробити тут відхилений проміс ('+reason+').');
+        });
+
+    log.insertAdjacentHTML('beforeend', thisPromiseCount +
+        ') Проміс створено (&lt;small&gt;Синхронний код завершений&lt;/small&gt;)&lt;br/&gt;');
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: js">if ("Promise" in window) {
+  var btn = document.getElementById("btn");
+  btn.addEventListener("click",testPromise);
+} else {
+  log = document.getElementById('log');
+  log.innerHTML = "Живий приклад недоступний, оскільки ваш переглядач не підтримує інтерфейс об'єктів &lt;code&gt;Promise&lt;code&gt;.";
+}</pre>
+</div>
+
+<p>Цей приклад починається натисканням кнопки. Вам потрібен переглядач, що підтримує об'єкти <code>Promise</code>. Натиснувши кнопку кілька разів за короткий відрізок часу, ви навіть побачите, як різні проміси виконуються один після іншого.</p>
+
+<p>{{EmbedLiveSample("Ускладнений_приклад", "500", "200")}}</p>
+
+<h2 id="Завантаження_зображення_за_допомогою_XHR">Завантаження зображення за допомогою XHR</h2>
+
+<p>Інший простий приклад використання об'єктів <code>Promise</code> та <code><a href="/uk/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> - для завантаження зображення - доступний у репозиторії <a href="https://github.com/mdn/js-examples/tree/master/promises-test">promise-test</a> на MDN GitHub. Ви також можете <a href="https://mdn.github.io/js-examples/promises-test/">побачити його в дії</a>. Кожний крок супроводжується коментарями та дозволяє відслідкувати архітектуру Promise та XHR.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise-objects', 'Promise')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this file: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Using_promises">Використання промісів</a></li>
+ <li><a href="http://promisesaplus.com/">Promises/A+ specification</a></li>
+ <li><a href="https://medium.com/@ramsunvtech/promises-of-promise-part-1-53f769245a53">Venkatraman.R - JS Promise (Part 1, Basics)</a></li>
+ <li><a href="https://medium.com/@ramsunvtech/js-promise-part-2-q-js-when-js-and-rsvp-js-af596232525c#.dzlqh6ski">Venkatraman.R - JS Promise (Part 2 - Using Q.js, When.js and RSVP.js)</a></li>
+ <li><a href="https://tech.io/playgrounds/11107/tools-for-promises-unittesting/introduction">Venkatraman.R - Tools for Promises Unit Testing</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/es6/promises/">Jake Archibald: JavaScript Promises: There and Back Again</a></li>
+ <li><a href="http://de.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript">Domenic Denicola: Callbacks, Promises, and Coroutines – Asynchronous Programming Patterns in JavaScript</a></li>
+ <li><a href="http://www.mattgreer.org/articles/promises-in-wicked-detail/">Matt Greer: JavaScript Promises ... In Wicked Detail</a></li>
+ <li><a href="https://www.promisejs.org/">Forbes Lindesay: promisejs.org</a></li>
+ <li><a href="https://github.com/anonyco/SPromiseMeSpeedJS/blob/master/README.md">Speed-polyfill to polyfill both promise availability and promise performance.</a></li>
+ <li><a href="https://github.com/jakearchibald/es6-promise/">Promise polyfill</a></li>
+ <li><a href="https://www.udacity.com/course/javascript-promises--ud898">Udacity: JavaScript Promises</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/promise/promise/index.html b/files/uk/web/javascript/reference/global_objects/promise/promise/index.html
new file mode 100644
index 0000000000..574121ebba
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/promise/promise/index.html
@@ -0,0 +1,77 @@
+---
+title: Конструктор Promise()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/Promise
+tags:
+  - JavaScript
+  - Promise
+  - Конструктор
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/Promise
+---
+<div>{{JSRef}}</div>
+
+<p>Конструктор <strong><code>Promise</code></strong> використовується переважно для того, щоб загортати функції, які не підтримують проміси початково.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/promise-constructor.html", "taller")}}</div>
+
+<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">new Promise(<var>executor</var>);</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>executor</code></dt>
+ <dd>Функція, яка передається з аргументами <code>resolve</code> та <code>reject</code>. Функція <code>executor</code> (виконавець) виконується негайно, реалізацією проміса, передаючи функції <code>resolve</code> та <code>reject</code> (виконавець викликається ще до того, як конструктор <code>Promise</code> повертає створений об'єкт). Функції <code>resolve</code> та <code>reject</code>, коли вони викликаються, відповідно, вирішують або відхиляють проміс. Виконавець, зазвичай, ініціює якісь асинхронні дії, і, як тільки вони завершуються, викликає або функцію <code>resolve</code>, щоб вирішити проміс, або відхиляє його в разі виникнення помилки. Якщо функція-виконавець викинула помилку, проміс відхиляється. Повернене значення виконавця ігнорується.</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Об'єкт <code>Promise</code> створюється за допомогою ключового слова <code>new</code> та свого конструктора. Цей конструктор приймає своїм аргументом функцію, що називається "функцією-виконавцем". Ця функція має приймати дві функції в якості параметрів. Перша з цих функцій (<code>resolve</code>) викликається, коли асинхронна задача завершується успішно та повертає результат задачі. Друга (<code>reject</code>) викликається, коли задача завершується неуспішно, та повертає причину невдачі, яка, зазвичай, є об'єктом помилки.</p>
+
+<pre class="brush: js; notranslate">const myFirstPromise = new Promise((resolve, reject) =&gt; {
+  // зробити щось асинхронне, що зрештою викличе або:
+  //
+  //   resolve(someValue)        // виконаний
+  // або
+  //   reject("причина невдачі")  // відхилений
+});
+</pre>
+
+<p>Щоб надати функцію з функціональністю промісу, просто зробіть, щоб вона повертала проміс:</p>
+
+<pre class="brush: js; notranslate">function myAsyncFunction(url) {
+  return new Promise((resolve, reject) =&gt; {
+    const xhr = new XMLHttpRequest()
+    xhr.open("GET", url)
+    xhr.onload = () =&gt; resolve(xhr.responseText)
+    xhr.onerror = () =&gt; reject(xhr.statusText)
+    xhr.send()
+  });
+}</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise-constructor', 'Promise constructor')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.Promise")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Using_promises">Використання промісів</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/promise/prototype/index.html b/files/uk/web/javascript/reference/global_objects/promise/prototype/index.html
new file mode 100644
index 0000000000..e558cdf02c
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/promise/prototype/index.html
@@ -0,0 +1,69 @@
+---
+title: Promise.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype
+tags:
+  - JavaScript
+  - Promise
+  - ДжаваСкріпт
+  - Проміс
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise
+---
+<div>{{JSRef}}</div>
+
+<p>Параметр <code><strong>Promise</strong></code><strong><code>.prototype</code></strong> відображає прототип для конструктора {{jsxref("Promise")}} constructor.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Екземпляри {{jsxref("Promise")}} успадковуються від {{jsxref("Promise.prototype")}}. Ви можете використовувати прототип конструктора, щоб добавляти параметри або методи до всіх екземплярів <code>Promise</code>.</p>
+
+<h2 id="Параметри">Параметри</h2>
+
+<dl>
+ <dt><code>Promise.prototype.constructor</code></dt>
+ <dd>Повертає функцію, яка створила прототип екземпляра. Це є функція {{jsxref("Promise")}} по замовчуванню.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<dl>
+ <dt>{{jsxref("Promise.catch", "Promise.prototype.catch(onRejected)")}}</dt>
+ <dd>Добавляє колбек обробник відхилення проміса, і повертає новий проміс, який вирішується значенням, яке повертається з функції колбеку, якщо вона була викликана, або його початковий результат виконання, якщо даний проміс був виконаний.</dd>
+ <dt>{{jsxref("Promise.then", "Promise.prototype.then(onFulfilled, onRejected)")}}</dt>
+ <dd>Добавляє до проміса функції колбеки для випадків, коли проміс був виконаний (onFulfilled) і відхилений (onRejected) і повертає новий проміс, який вирішується значенням, яке було повернуто з onFulfilled функції колбеку, або з початковим значенням, яке було вирішено, коли даний проміс не був оброблений (тобто коли обробники <code>onFulfilled</code> або <code>onRejected</code> не є функцією).</dd>
+</dl>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.prototype', 'Promise.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this file: <a href="https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json">https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json</a>.</p>
+
+<p>{{Compat("javascript/promise","Promise.prototype")}}</p>
+
+<h2 id="Дивитися_також">Дивитися також</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/promise/race/index.html b/files/uk/web/javascript/reference/global_objects/promise/race/index.html
new file mode 100644
index 0000000000..c810db2cc0
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/promise/race/index.html
@@ -0,0 +1,177 @@
+---
+title: Promise.race()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/race
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Promise
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/race
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>Promise.race()</strong></code> повертає проміс, який виконується чи відхиляється, як тільки один з промісів ітерабельного об'єкта буде виконаний чи відхилений, зі значеням або причиною з цього проміса.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/promise-race.html")}}</div>
+
+<p class="hidden">Початковий код до цього інтерактивного демо зберігаєтся в GitHub репозиторії. Якщо ви хочете внести свій вклад до проекту цього інтерактивного демо, будь ласка, клонуйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> і надішліть нам запит на злиття.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>Promise.race(iterable)</var>;</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt>iterable</dt>
+ <dd>Ітерабельний об'єкт, наприклад, {{jsxref("Array")}}. Дивіться <a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору#Протокол_ітерабельного_обєкта">ітерабельний об'єкт</a>.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Об'єкт {{jsxref("Promise")}} <strong>у стані очікування</strong>, який <strong>асинхронно</strong> видає значення першого проміса з наданого ітерабельного об'єкта, що виконується або відхиляється.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Функція <code>race</code> повертає об'єкт <code>Promise</code>, який встановлюється таким самим чином (і отримує таке ж значення), як і перший встановлений проміс ітерабельного об'єкта, переданого як аргумент.</p>
+
+<p>Якщо передано пустий ітерабельний об'єкт, повернений проміс буде вічно перебувати у стані очікування.</p>
+
+<p>Якщо ітерабельний об'єкт містить одне або більше значень, що не є промісами, та/або вже встановлений проміс, тоді <code>Promise.race</code> буде вирішено з першим таким значенням, знайденим в ітерабельному об'єкті.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Асинхронність_Promise.race"><font face="consolas, Liberation Mono, courier, monospace">Асинхронність <code>Promise.race</code></font></h3>
+
+<p>Цей приклад демострує асинхронність функції <code>Promise.race:</code></p>
+
+<pre class="brush: js">// ми передаємо в якості аргументу масив вже вирішених промісів,
+// щоб запустити Promise.race якомога швидше
+var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
+
+var p = Promise.race(resolvedPromisesArray);
+// негайно виводимо значення p
+console.log(p);
+
+// використовуючи setTimeout, ми можемо виконати код, коли стек стане порожнім
+setTimeout(function(){
+    console.log('тепер стек порожній');
+    console.log(p);
+});
+
+// порядок виведення:
+// Promise { &lt;state&gt;: "pending" }
+// тепер стек порожній
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: 33 }</pre>
+
+<p>Пустий ітерабельний об'єкт спричиняє поверення проміса, який вічно знаходитиметься в стані очікування:</p>
+
+<pre class="brush: js">var foreverPendingPromise = Promise.race([]);
+console.log(foreverPendingPromise);
+setTimeout(function(){
+    console.log('тепер стек порожній');
+    console.log(foreverPendingPromise);
+});
+
+// порядок виведення:
+// Promise { &lt;state&gt;: "pending" }
+// тепер стек порожній
+// Promise { &lt;state&gt;: "pending" }
+</pre>
+
+<p>Якщо ітерабельний об'єкт містить одне або більше значень, що не є промісами, та/або вже встановлені проміси, тоді <code>Promise.race</code>  буде вирішено з першим таким значенням, знайденим у масиві:</p>
+
+<pre class="brush: js">var foreverPendingPromise = Promise.race([]);
+var alreadyResolvedProm = Promise.resolve(666);
+
+var arr = [foreverPendingPromise, alreadyResolvedProm, "не проміс"];
+var arr2 = [foreverPendingPromise, "не проміс", Promise.resolve(666)];
+var p = Promise.race(arr);
+var p2 = Promise.race(arr2);
+
+console.log(p);
+console.log(p2);
+setTimeout(function(){
+    console.log('тепер стек порожній');
+    console.log(p);
+    console.log(p2);
+});
+
+// порядок виведення:
+// Promise { &lt;state&gt;: "pending" }
+// Promise { &lt;state&gt;: "pending" }
+// тепер стек порожній
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: 666 }
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: "не проміс" }
+</pre>
+
+<h3 id="Використання_Promise.race_–_приклади_з_setTimeout">Використання <code>Promise.race</code> – приклади з <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout"><code>setTimeout</code></a></h3>
+
+<pre class="brush: js">var p1 = new Promise(function(resolve, reject) {
+    setTimeout(() =&gt; resolve('один'), 500);
+});
+var p2 = new Promise(function(resolve, reject) {
+    setTimeout(() =&gt; resolve('два'), 100);
+});
+
+Promise.race([p1, p2])
+.then(function(value) {
+  console.log(value); // "два"
+  // Обидва вирішуються, але p2 швидший
+});
+
+var p3 = new Promise(function(resolve, reject) {
+    setTimeout(() =&gt; resolve('три'), 100);
+});
+var p4 = new Promise(function(resolve, reject) {
+    setTimeout(() =&gt; reject(new Error('чотири')), 500);
+});
+
+Promise.race([p3, p4])
+.then(function(value) {
+  console.log(value); // "три"
+  // p3 швидший, тому він виконується
+}, function(reason) {
+  // Не викликається
+});
+
+var p5 = new Promise(function(resolve, reject) {
+    setTimeout(() =&gt; resolve("п'ять"), 500);
+});
+var p6 = new Promise(function(resolve, reject) {
+    setTimeout(() =&gt; reject(new Error('шість')), 100);
+});
+
+Promise.race([p5, p6])
+.then(function(value) {
+  // Не викликається
+}, function(reason) {
+  console.log(reason); // "шість"
+  // p6 швидший, тому він відхиляється
+});</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.race', 'Promise.race')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Promise.race")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.all()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/promise/resolve/index.html b/files/uk/web/javascript/reference/global_objects/promise/resolve/index.html
new file mode 100644
index 0000000000..88aeba5465
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/promise/resolve/index.html
@@ -0,0 +1,137 @@
+---
+title: Promise.resolve()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/resolve
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Promise
+  - Проміс
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/resolve
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>Promise.resolve()</strong></code> повертає об'єкт {{jsxref("Promise")}}, вирішений з наданим значенням. Якщо значенням є проміс, то цей проміс буде повернено; якщо значенням є промісоподібний об'єкт (thenable) (такий, що має {{jsxref("Promise.then", "метод \"then\"")}}), то повернений проміс буде його "дотримуватись", приймаючи його кінцевий стан; у іншому випадку повернений проміс буде виконаний з наданим значенням. Функція вирівнює вкладені шари промісоподібних об'єктів (наприклад, проміс, що вирішується з промісом, який вирішується з чимось ще) у єдиний шар.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>Promise.resolve(value)</var>;
+</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt>value</dt>
+ <dd>Аргумент, з яким буде вирішений даний <code>Promise</code>. Також він може бути промісом або промісоподібним об'єктом.</dd>
+</dl>
+
+<h3 id="Значення_яке_повертається">Значення, яке повертається</h3>
+
+<p>Об'єкт {{jsxref("Promise")}}, вирішений з наданим значенням, або проміс, переданий в якості значення, якщо значення було промісом.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Статична функція <code>Promise.resolve</code> повертає вирішений об'єкт <code>Promise</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_статичного_методу_Promise.resolve">Використання статичного методу <code>Promise.resolve</code></h3>
+
+<pre class="brush: js">Promise.resolve('Success').then(function(value) {
+  console.log(value); // "Успіх"
+}, function(value) {
+  // не викликається
+});
+</pre>
+
+<h3 id="Вирішення_проміса_масивом">Вирішення проміса масивом</h3>
+
+<pre class="brush: js">var p = Promise.resolve([1,2,3]);
+p.then(function(v) {
+  console.log(v[0]); // 1
+});
+</pre>
+
+<h3 id="Вирішення_проміса_іншим_промісом">Вирішення проміса іншим промісом</h3>
+
+<pre class="brush: js">var original = Promise.resolve(33);
+var cast = Promise.resolve(original);
+cast.then(function(value) {
+  console.log('значення: ' + value);
+});
+console.log('original === cast ? ' + (original === cast));
+
+// порядок виведення:
+// original === cast ? true
+// значення: 33</pre>
+
+<p>Перевернутий порядок логів спричинений тим фактом, що обробники <code>then</code> викликаються асинхронно. Дивіться, як працює <code>then</code> <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Promise/then#Значення_що_повертається">тут</a>.</p>
+
+<h3 id="Вирішення_промісоподібних_обєктів_та_викидання_помилок">Вирішення промісоподібних об'єктів та викидання помилок</h3>
+
+<pre class="brush: js">// Вирішення промісоподібного об'єкта
+var p1 = Promise.resolve({
+  then: function(onFulfill, onReject) { onFulfill('виконаний!'); }
+});
+console.log(p1 instanceof Promise) // true, об'єкт передано у проміс
+
+p1.then(function(v) {
+    console.log(v); // "виконаний!"
+  }, function(e) {
+    // не викликається
+});
+
+// Промісоподібний об'єкт викидає помилку перед зворотнім викликом
+// Проміс відхиляється
+var thenable = { then: function(resolve) {
+  throw new TypeError('Помилка');
+  resolve('Вирішення');
+}};
+
+var p2 = Promise.resolve(thenable);
+p2.then(function(v) {
+  // не викликається
+}, function(e) {
+  console.log(e); // TypeError: Помилка
+});
+
+// Промісоподібний об'єкт викидає помилку після зворотного виклику
+// Проміс вирішується
+var thenable = { then: function(resolve) {
+  resolve('Вирішення');
+  throw new TypeError('Помилка');
+}};
+
+var p3 = Promise.resolve(thenable);
+p3.then(function(v) {
+  console.log(v); // "Вирішення"
+}, function(e) {
+  // не викликається
+});
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.resolve', 'Promise.resolve')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this file:  <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.resolve")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/promise/then/index.html b/files/uk/web/javascript/reference/global_objects/promise/then/index.html
new file mode 100644
index 0000000000..8cbcc884fc
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/promise/then/index.html
@@ -0,0 +1,297 @@
+---
+title: Promise.prototype.then()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/then
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Promise
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>then()</strong></code> вертає об'єкт {{jsxref("Promise")}}. Він приймає два аргументи: функції зворотного виклику для випадків успішного та неуспішного проміса.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/promise-then.html")}}</div>
+
+<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+
+<div class="note">
+<p>Якщо один чи обидва аргументи пропущені, або надані не функції, тоді <code>then</code> не матиме обробників, але не згенерує помилок. Якщо <code>Promise</code>, на якому викликається <code>then</code>, приймає стан (<code>виконання</code> або <code>відхилення</code>), для якого <code>then</code> не має обробника, новий <code>Promise</code> створюється без додаткових обробників, просто приймаючи кінцевий стан оригінального проміса, на якому було викликано <code>then</code>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>p.then(onFulfilled[, onRejected])</var>;
+
+p.then(value =&gt; {
+  // виконання
+}, reason =&gt; {
+  // відхилення
+});
+</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>onFulfilled</code> {{optional_inline}}</dt>
+ <dd>{{jsxref("Function","Функція")}}, що викликається, якщо <code>Promise</code> виконано. Ця функція має один аргумент, <code>значення виконання</code>. Якщо це не функція, вона внутрішньо замінюється на функцію "Identity" (вона повертає отриманий аргумент).</dd>
+ <dt><code>onRejected</code> {{optional_inline}}</dt>
+ <dd>{{jsxref("Function","Функція")}}, що викликається, якщо <code>Promise</code> відхилено. Ця функція має один аргумент, <code>причина відхилення</code>. Якщо це не функція, вона внутрішньо замінюється на функцію "Thrower" (вона викидає помилку, яку отримала в якості аргумента).</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Як тільки {{jsxref("Promise","проміс")}} був виконаний або відхилений, відповідна функція-обробник (<code style="font-style: normal; font-weight: normal;">onFulfilled</code> або <code style="font-style: normal; font-weight: normal;">onRejected</code>) буде викликана <strong>асинхронно</strong> (запланована у активному циклі потоку). Поведінка функції-обробника відповідає спеціальному набору правил. Якщо функція-обробник:</p>
+
+<ul>
+ <li>вертає значення, проміс, повернений <code>then</code>, вирішується з поверненим значенням в якості його значення.</li>
+ <li>не вертає нічого, проміс, повернений <code>then</code>, вирішується зі значенням <code>undefined</code>.</li>
+ <li>викидає помилку, проміс, повернений <code>then</code>, відхиляється з викинутою помилкою в якості значення.</li>
+ <li>вертає вже виконаний проміс, то проміс, повернений <code>then</code>, виконується зі значенням цього проміса в якості свого значення.</li>
+ <li>вертає вже відхилений проміс, то проміс, повернений <code>then</code>, відхиляється зі значенням цього проміса в якості свого значення.</li>
+ <li>вертає інший проміс <strong>у стані очікування</strong>, вирішення/відхилення проміса, поверненого <code>then</code>, буде результатом вирішення/відхилення проміса, поверненого обробником. Також, вирішене значення проміса, поверненого <code>then</code>, буде тим самим, що й вирішене значення проміса, поверненого обробником.</li>
+</ul>
+
+<p>Наступний приклад демонструє асинхронність методу <code>then</code>.</p>
+
+<pre class="brush: js">// при використанні вирішеного проміса блок 'then' буде негайно запущений,
+// але його обробники запустяться асинхронно, як демонструє console.log
+const resolvedProm = Promise.resolve(33);
+
+let thenProm = resolvedProm.then(value =&gt; {
+    console.log("Це запускається після завершення головного стеку. Отримане й повернене значення: " + value);
+    return value;
+});
+// негайне логування значення thenProm
+console.log(thenProm);
+
+// використовуючи setTimeout, ми можемо відкласти виконання функції, поки стек не стане порожнім
+setTimeout(() =&gt; {
+    console.log(thenProm);
+});
+
+
+// порядок логування:
+// Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
+// "Це запускається після завершення головного стеку. Отримане й повернене значення: 33"
+// Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 33}</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Оскільки методи <code>then</code> та {{jsxref("Promise.prototype.catch()")}} вертають проміси, їх <a href="/uk/docs/Web/JavaScript/Guide/Using_promises#Chaining">можна поєднувати в ланцюги</a> — ця операція зветься <em>композицією</em>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_метода_then">Використання метода <code>then</code></h3>
+
+<pre class="brush: js">var p1 = new Promise((resolve, reject) =&gt; {
+  resolve('Успіх!');
+  // або
+  // reject(new Error("Помилка!"));
+});
+
+p1.then(value =&gt; {
+  console.log(value); // Успіх!
+}, reason =&gt; {
+  console.error(reason); // Помилка!
+});
+</pre>
+
+<h3 id="Ланцюгування">Ланцюгування</h3>
+
+<p>Метод <code>then</code> вертає об'єкт <code>Promise</code>, що дозволяє використовувати ланцюгування.</p>
+
+<p>Якщо функція, передана у <code>then</code> в якості обробника, вертає об'єкт <code>Promise</code>, аналогічний об'єкт <code>Promise</code> буде переданий у наступний <code>then</code> ланцюга методів. Наведений нижче фрагмент імітує асинхронний код функцією <code>setTimeout</code>. </p>
+
+<pre class="brush: js">Promise.resolve('ква')
+  // 1. Отримати "ква", приєднати "драт" та вирішити це для наступного then
+  .then(function(string) {
+    return new Promise(function(resolve, reject) {
+      setTimeout(function() {
+        string += 'драт';
+        resolve(string);
+      }, 1);
+    });
+  })
+  // 2. отримати "квадрат", призначити функцію зворотного виклику для обробки цього рядка
+  // та вивести його на консоль, але не раніше повернення необробленого рядка
+  // string у наступний then
+  .then(function(string) {
+    setTimeout(function() {
+      string += 'ура';
+      console.log(string);
+    }, 1)
+    return string;
+  })
+  // 3. вивести допоміжні повідомлення щодо того, як виконується код в цьому розділі,
+  // раніше, ніж рядок string буде оброблений імітованим асинхронним кодом у
+  // попередньому блоці then.
+  .then(function(string) {
+    console.log("Останній Then:  йой... ми не створили та не повернули екземпляр проміса " +
+                "у попередньому then, тому послідовність може бути трохи " +
+                "несподіваною");
+
+    // Зауважте, що `string` не матиме частини 'ура' в цій точці. Це тому,
+    // що ми імітували його асинхронне виконання за допомогою функції setTimeout
+    console.log(string);
+  });
+
+// порядок виведення:
+// Останній Then: йой... ми не створили та не повернули екземпляр проміса у попередньому then, тому послідовність може бути трохи несподіваною
+// квадрат
+// квадратура</pre>
+
+<p>Коли значення просто повертається з обробника <code>then</code>, він поверне <code>Promise.resolve(&lt;значення, повернене обробником, що викликався&gt;)</code>.</p>
+
+<pre class="brush: js">var p2 = new Promise(function(resolve, reject) {
+  resolve(1);
+});
+
+p2.then(function(value) {
+  console.log(value); // 1
+  return value + 1;
+}).then(function(value) {
+  console.log(value + ' - Синхронне значення працює');
+});
+
+p2.then(function(value) {
+  console.log(value); // 1
+});
+</pre>
+
+<p>Виклик <code>then</code> поверне відхилений проміс, якщо функція викидає помилку або повертає відхилений проміс.</p>
+
+<pre class="brush: js">Promise.resolve()
+  .then(() =&gt; {
+    // Змушує .then() повернути відхилений проміс
+    throw new Error('О, ні!');
+  })
+  .then(() =&gt; {
+    console.log('Не викликається.');
+  }, error =&gt; {
+    console.error('Викликано функцію onRejected: ' + error.message);
+  });</pre>
+
+<p>У всіх інших випадках повертається вирішений об'єкт Promise. У наступному прикладі перший <code>then()</code> поверне значення <code>42</code>, загорнуте у вирішений проміс, незважаючи на те, що попередній проміс ланцюжка був відхилений.</p>
+
+<pre class="brush: js">Promise.reject()
+  .then(() =&gt; 99, () =&gt; 42) // onRejected вертає 42, обгорнуте у вирішений Promise
+  .then(solution =&gt; console.log('Вирішений зі значенням ' + solution)); // Вирішений зі значенням 42</pre>
+
+<p>На практиці часто бажано перехоплювати відхилені проміси, як продемонстровано нижче, а не використовувати синтаксис <code>then</code> для двох випадків.</p>
+
+<pre class="brush: js">Promise.resolve()
+  .then(() =&gt; {
+    // Змушує .then() повернути відхилений проміс
+    throw new Error('О, ні!');
+  })
+  .catch(error =&gt; {
+    console.error('Викликано функцію onRejected: ' + error.message);
+  })
+  .then(() =&gt; {
+    console.log("Мене завжди викликають, навіть якщо проміс попереднього then відхилено");
+  });</pre>
+
+<p>Ви також можете використати ланцюгування, щоб реалізувати функцію з API на промісах, на основі іншої такої функції.</p>
+
+<pre class="brush: js">function fetch_current_data() {
+  // API <a href="/uk/docs/Web/API/GlobalFetch/fetch">fetch</a>() вертає проміс. Ця функція
+  // створює схожий API, крім того, що над значенням
+  // виконанного проміса цієї функції виконується
+  // більше дій.
+  return fetch('current-data.json').then(response =&gt; {
+    if (response.headers.get('content-type') != 'application/json') {
+      throw new TypeError();
+    }
+    var j = response.json();
+    // можливо, зробити щось із j
+    return j; // значення виконання, що надається користувачу
+              // fetch_current_data().then()
+  });
+}
+</pre>
+
+<p>Якщо <code>onFulfilled</code> вертає проміс, повернене значення <code>then</code> буде вирішене чи відхилене промісом.</p>
+
+<pre class="brush: js">function resolveLater(resolve, reject) {
+  setTimeout(function() {
+    resolve(10);
+  }, 1000);
+}
+function rejectLater(resolve, reject) {
+  setTimeout(function() {
+    reject(new Error('Помилка'));
+  }, 1000);
+}
+
+var p1 = Promise.resolve('ква');
+var p2 = p1.then(function() {
+  // Повернути тут проміс, який буде вирішений зі значенням 10 через 1 секунду
+  return new Promise(resolveLater);
+});
+p2.then(function(v) {
+  console.log('вирішений', v);  // "вирішений", 10
+}, function(e) {
+  // не викликається
+  console.error('відхилений', e);
+});
+
+var p3 = p1.then(function() {
+  // Повернути тут проміс, що відхилятиметься з помилкою 'Помилка' через 1 секунду
+  return new Promise(rejectLater);
+});
+p3.then(function(v) {
+  // не викликається
+  console.log('вирішений', v);
+}, function(e) {
+  console.error('відхилений', e); // "відхилений", 'Помилка'
+});
+</pre>
+
+<h3 id="Поліфіл_у_стилі_window.setImmediate_на_основі_промісів">Поліфіл у стилі <a href="/uk/docs/Web/API/Window/setImmediate" title="Цей метод використовується для розбиття довгих у виконанні операцій та запуску функції зворотного виклику негайно після того, як переглядач завершив інші операції, такі, як події та оновлення відображення">window.setImmediate</a> на основі промісів</h3>
+
+<p>Використання методу {{jsxref("Function.prototype.bind()")}} <code>Reflect.apply</code> ({{jsxref("Reflect.apply()")}}) для створення функції (що не скасовується) у стилі setImmediate.</p>
+
+<pre class="brush: js">const nextTick = (() =&gt; {
+  const noop = () =&gt; {}; // буквально
+  const nextTickPromise = () =&gt; Promise.resolve().then(noop);
+
+  const rfab = Reflect.apply.bind; // (thisArg, fn, thisArg, [...args])
+  const nextTick = (fn, ...args) =&gt; (
+    fn !== undefined
+    ? Promise.resolve(args).then(rfab(null, fn, null))
+    : nextTickPromise(),
+    undefined
+  );
+  nextTick.ntp = nextTickPromise;
+
+  return nextTick;
+})();
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.prototype.then', 'Promise.prototype.then')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.then")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.prototype.catch()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/promise/відхилено/index.html b/files/uk/web/javascript/reference/global_objects/promise/відхилено/index.html
new file mode 100644
index 0000000000..406c6e74e2
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/promise/відхилено/index.html
@@ -0,0 +1,73 @@
+---
+title: Promise.reject()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/відхилено
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Promise
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/reject
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>Promise.reject()</strong></code> повертає об'єкт <code>Promise</code>, відхилений з наданою причиною.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/promise-reject.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>Promise.reject(reason)</var>;</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt>reason</dt>
+ <dd>Причина, чому даний проміс був відхилений.</dd>
+</dl>
+
+<h3 id="Значення_яке_повертається">Значення, яке повертається</h3>
+
+<p>Об'єкт {{jsxref("Promise")}}, відхилений з наданою причиною.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Статичний метод <code>Promise.reject</code> повертає відхилений об'єкт <code>Promise</code>. З метою відлагодження, а також вибіркового перехоплення помилок зручно використовувати <code>reason</code> як <code>instanceof</code> {{jsxref("Error")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_статичного_методу_Promise.reject">Використання статичного методу Promise.reject()</h3>
+
+<pre class="brush: js">Promise.reject(new Error('fail')).then(function(error) {
+  // не викликається
+}, function(error) {
+  console.error(error); // стек викликів
+});</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.reject', 'Promise.reject')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this file: <a href="https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json">https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.reject")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/proxy/index.html b/files/uk/web/javascript/reference/global_objects/proxy/index.html
new file mode 100644
index 0000000000..b246c6e047
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/proxy/index.html
@@ -0,0 +1,399 @@
+---
+title: Проксі
+slug: Web/JavaScript/Reference/Global_Objects/Proxy
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy
+---
+<div>
+<div>{{JSRef}}</div>
+</div>
+
+<p><strong>Proxy</strong> об'єкт використовується для визначення власної поведінки для базових операцій (наприклад, доступ до властивостей, присвоєння, обрахунок, виклик функцій та ін.).</p>
+
+<h2 id="Terminology">Terminology</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">handler</a></dt>
+ <dd>Placeholder object which contains traps.</dd>
+ <dt>traps</dt>
+ <dd>The methods that provide property access. This is analogous to the concept of traps in operating systems.</dd>
+ <dt>target</dt>
+ <dd>Object which the proxy virtualizes. It is often used as storage backend for the proxy. Invariants (semantics that remain unchanged) regarding object non-extensibility or non-configurable properties are verified against the target.</dd>
+</dl>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var p = new Proxy(target, handler);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>A target object (can be any sort of object, including a native array, a function or even another proxy) to wrap with <code>Proxy</code>.</dd>
+ <dt><code>handler</code></dt>
+ <dd>An object whose properties are functions which define the behavior of the proxy when an operation is performed on it.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{jsxref("Proxy.revocable()")}}</dt>
+ <dd>Creates a revocable <code>Proxy</code> object.</dd>
+</dl>
+
+<h2 id="Methods_of_the_handler_object">Methods of the handler object</h2>
+
+<p>The handler object is a placeholder object which contains traps for <code>Proxy</code>.</p>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler', 'Methods') }}</div>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Basic_example">Basic example</h3>
+
+<p>In this simple example the number <code>37</code> gets returned as the default value when the property name is not in the object. It is using the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/get"><code>get</code></a> handler.</p>
+
+<pre class="brush: js">var handler = {
+    get: function(target, name) {
+        return name in target ?
+            target[name] :
+            37;
+    }
+};
+
+var p = new Proxy({}, handler);
+p.a = 1;
+p.b = undefined;
+
+console.log(p.a, p.b); // 1, undefined
+console.log('c' in p, p.c); // false, 37
+</pre>
+
+<h3 id="No-op_forwarding_proxy">No-op forwarding proxy</h3>
+
+<p>In this example, we are using a native JavaScript object to which our proxy will forward all operations that are applied to it.</p>
+
+<pre class="brush: js">var target = {};
+var p = new Proxy(target, {});
+
+p.a = 37; // operation forwarded to the target
+
+console.log(target.a); // 37. The operation has been properly forwarded
+</pre>
+
+<h3 id="Validation">Validation</h3>
+
+<p>With a <code>Proxy</code>, you can easily validate the passed value for an object. This example uses the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/set"><code>set</code></a> handler.</p>
+
+<pre class="brush: js">let validator = {
+  set: function(obj, prop, value) {
+    if (prop === 'age') {
+      if (!Number.isInteger(value)) {
+        throw new TypeError('The age is not an integer');
+      }
+      if (value &gt; 200) {
+        throw new RangeError('The age seems invalid');
+      }
+    }
+
+    // The default behavior to store the value
+    obj[prop] = value;
+
+    // Indicate success
+    return true;
+  }
+};
+
+let person = new Proxy({}, validator);
+
+person.age = 100;
+console.log(person.age); // 100
+person.age = 'young'; // Throws an exception
+person.age = 300; // Throws an exception</pre>
+
+<h3 id="Extending_constructor">Extending constructor</h3>
+
+<p>A function proxy could easily extend a constructor with a new constructor. This example uses the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/construct"><code>construct</code></a> and <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply"><code>apply</code></a> handlers.</p>
+
+<pre class="brush: js">function extend(sup, base) {
+  var descriptor = Object.getOwnPropertyDescriptor(
+    base.prototype, 'constructor'
+  );
+  base.prototype = Object.create(sup.prototype);
+  var handler = {
+    construct: function(target, args) {
+      var obj = Object.create(base.prototype);
+      this.apply(target, obj, args);
+      return obj;
+    },
+    apply: function(target, that, args) {
+      sup.apply(that, args);
+      base.apply(that, args);
+    }
+  };
+  var proxy = new Proxy(base, handler);
+  descriptor.value = proxy;
+  Object.defineProperty(base.prototype, 'constructor', descriptor);
+  return proxy;
+}
+
+var Person = function(name) {
+  this.name = name;
+};
+
+var Boy = extend(Person, function(name, age) {
+  this.age = age;
+});
+
+Boy.prototype.sex = 'M';
+
+var Peter = new Boy('Peter', 13);
+console.log(Peter.sex);  // "M"
+console.log(Peter.name); // "Peter"
+console.log(Peter.age);  // 13</pre>
+
+<h3 id="Manipulating_DOM_nodes">Manipulating DOM nodes</h3>
+
+<p>Sometimes you want to toggle the attribute or class name of two different elements. Here's how using the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/set"><code>set</code></a> handler.</p>
+
+<pre class="brush: js">let view = new Proxy({
+  selected: null
+},
+{
+  set: function(obj, prop, newval) {
+    let oldval = obj[prop];
+
+    if (prop === 'selected') {
+      if (oldval) {
+        oldval.setAttribute('aria-selected', 'false');
+      }
+      if (newval) {
+        newval.setAttribute('aria-selected', 'true');
+      }
+    }
+
+    // The default behavior to store the value
+    obj[prop] = newval;
+
+    // Indicate success
+    return true;
+  }
+});
+
+let i1 = view.selected = document.getElementById('item-1');
+console.log(i1.getAttribute('aria-selected')); // 'true'
+
+let i2 = view.selected = document.getElementById('item-2');
+console.log(i1.getAttribute('aria-selected')); // 'false'
+console.log(i2.getAttribute('aria-selected')); // 'true'</pre>
+
+<h3 id="Value_correction_and_an_extra_property">Value correction and an extra property</h3>
+
+<p>The <code>products</code> proxy object evaluates the passed value and converts it to an array if needed. The object also supports an extra property called <code>latestBrowser</code> both as a getter and a setter.</p>
+
+<pre class="brush: js">let products = new Proxy({
+  browsers: ['Internet Explorer', 'Netscape']
+},
+{
+  get: function(obj, prop) {
+    // An extra property
+    if (prop === 'latestBrowser') {
+      return obj.browsers[obj.browsers.length - 1];
+    }
+
+    // The default behavior to return the value
+    return obj[prop];
+  },
+  set: function(obj, prop, value) {
+    // An extra property
+    if (prop === 'latestBrowser') {
+      obj.browsers.push(value);
+      return true;
+    }
+
+    // Convert the value if it is not an array
+    if (typeof value === 'string') {
+      value = [value];
+    }
+
+    // The default behavior to store the value
+    obj[prop] = value;
+
+    // Indicate success
+    return true;
+  }
+});
+
+console.log(products.browsers); // ['Internet Explorer', 'Netscape']
+products.browsers = 'Firefox'; // pass a string (by mistake)
+console.log(products.browsers); // ['Firefox'] &lt;- no problem, the value is an array
+
+products.latestBrowser = 'Chrome';
+console.log(products.browsers); // ['Firefox', 'Chrome']
+console.log(products.latestBrowser); // 'Chrome'</pre>
+
+<h3 id="Finding_an_array_item_object_by_its_property">Finding an array item object by its property</h3>
+
+<p>This proxy extends an array with some utility features. As you see, you can flexibly "define" properties without using <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties"><code>Object.defineProperties</code></a>. This example can be adapted to find a table row by its cell. In that case, the target will be <a href="/en-US/docs/DOM/table.rows"><code>table.rows</code></a>.</p>
+
+<pre class="brush: js">let products = new Proxy([
+  { name: 'Firefox', type: 'browser' },
+  { name: 'SeaMonkey', type: 'browser' },
+  { name: 'Thunderbird', type: 'mailer' }
+],
+{
+  get: function(obj, prop) {
+    // The default behavior to return the value; prop is usually an integer
+    if (prop in obj) {
+      return obj[prop];
+    }
+
+    // Get the number of products; an alias of products.length
+    if (prop === 'number') {
+      return obj.length;
+    }
+
+    let result, types = {};
+
+    for (let product of obj) {
+      if (product.name === prop) {
+        result = product;
+      }
+      if (types[product.type]) {
+        types[product.type].push(product);
+      } else {
+        types[product.type] = [product];
+      }
+    }
+
+    // Get a product by name
+    if (result) {
+      return result;
+    }
+
+    // Get products by type
+    if (prop in types) {
+      return types[prop];
+    }
+
+    // Get product types
+    if (prop === 'types') {
+      return Object.keys(types);
+    }
+
+    return undefined;
+  }
+});
+
+console.log(products[0]); // { name: 'Firefox', type: 'browser' }
+console.log(products['Firefox']); // { name: 'Firefox', type: 'browser' }
+console.log(products['Chrome']); // undefined
+console.log(products.browser); // [{ name: 'Firefox', type: 'browser' }, { name: 'SeaMonkey', type: 'browser' }]
+console.log(products.types); // ['browser', 'mailer']
+console.log(products.number); // 3
+</pre>
+
+<h3 id="A_complete_traps_list_example">A complete <code>traps</code> list example</h3>
+
+<p>Now in order to create a complete sample <code>traps</code> list, for didactic purposes, we will try to proxify a <em>non native</em> object that is particularly suited to this type of operation: the <code>docCookies</code> global object created by <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie/Simple_document.cookie_framework" title="https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support">the "little framework" published on the <code>document.cookie</code> page</a>.</p>
+
+<pre class="brush: js">/*
+  var docCookies = ... get the "docCookies" object here:
+  https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support
+*/
+
+var docCookies = new Proxy(docCookies, {
+  get: function (oTarget, sKey) {
+    return oTarget[sKey] || oTarget.getItem(sKey) || undefined;
+  },
+  set: function (oTarget, sKey, vValue) {
+    if (sKey in oTarget) { return false; }
+    return oTarget.setItem(sKey, vValue);
+  },
+  deleteProperty: function (oTarget, sKey) {
+    if (sKey in oTarget) { return false; }
+    return oTarget.removeItem(sKey);
+  },
+  enumerate: function (oTarget, sKey) {
+    return oTarget.keys();
+  },
+  ownKeys: function (oTarget, sKey) {
+    return oTarget.keys();
+  },
+  has: function (oTarget, sKey) {
+    return sKey in oTarget || oTarget.hasItem(sKey);
+  },
+  defineProperty: function (oTarget, sKey, oDesc) {
+    if (oDesc &amp;&amp; 'value' in oDesc) { oTarget.setItem(sKey, oDesc.value); }
+    return oTarget;
+  },
+  getOwnPropertyDescriptor: function (oTarget, sKey) {
+    var vValue = oTarget.getItem(sKey);
+    return vValue ? {
+      value: vValue,
+      writable: true,
+      enumerable: true,
+      configurable: false
+    } : undefined;
+  },
+});
+
+/* Cookies test */
+
+console.log(docCookies.my_cookie1 = 'First value');
+console.log(docCookies.getItem('my_cookie1'));
+
+docCookies.setItem('my_cookie1', 'Changed value');
+console.log(docCookies.my_cookie1);</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy-objects', 'Proxy')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#sec-proxy-objects', 'Proxy')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2017', '#sec-proxy-objects', 'Proxy')}}</td>
+   <td>{{Spec2('ES2017')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-objects', 'Proxy')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Proxy", 2)}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="external" href="https://www.youtube.com/watch?v=sClk6aB_CPk">"Proxies are awesome" Brendan Eich presentation at JSConf</a> (<a class="external" href="http://www.slideshare.net/BrendanEich/metaprog-5303821">slides</a>)</li>
+ <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proxies">ECMAScript Harmony Proxy proposal page</a> and <a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proxies_semantics">ECMAScript Harmony proxy semantics page</a></li>
+ <li><a class="external" href="http://soft.vub.ac.be/~tvcutsem/proxies/">Tutorial on proxies</a></li>
+ <li><a href="/en-US/docs/JavaScript/Old_Proxy_API" title="/en-US/docs/JavaScript/Old_Proxy_API">SpiderMonkey specific Old Proxy API</a></li>
+ <li>{{jsxref("Object.watch()")}} is a non-standard feature but has been supported in Gecko for a long time.</li>
+</ul>
+
+<h2 id="Licensing_note">Licensing note</h2>
+
+<p>Some content (text, examples) in this page has been copied or adapted from the <a class="external" href="http://wiki.ecmascript.org/doku.php">ECMAScript wiki</a> which content is licensed <a class="external" href="http://creativecommons.org/licenses/by-nc-sa/2.0/">CC 2.0 BY-NC-SA</a>.</p>
diff --git a/files/uk/web/javascript/reference/global_objects/rangeerror/index.html b/files/uk/web/javascript/reference/global_objects/rangeerror/index.html
new file mode 100644
index 0000000000..8ed0df65cb
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/rangeerror/index.html
@@ -0,0 +1,141 @@
+---
+title: RangeError
+slug: Web/JavaScript/Reference/Global_Objects/RangeError
+tags:
+  - Error
+  - JavaScript
+  - Object
+  - RangeError
+  - виняток
+translation_of: Web/JavaScript/Reference/Global_Objects/RangeError
+---
+<div>{{JSRef}}</div>
+
+<p>Об'єкт <code><strong>RangeError</strong></code> позначає помилку, що виникає, коли значення не входить у множину або діапазон дозволених значень.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>new RangeError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>message</code> {{optional_inline}}</dt>
+ <dd>Необов'язковий. Зрозумілий людині опис помилки.</dd>
+ <dt><code>fileName</code> {{optional_inline}} {{non-standard_inline}}</dt>
+ <dd>Необов'язковий. Ім'я файлу, який містить код, що спричинив виняток.</dd>
+ <dt><code>lineNumber</code> {{optional_inline}} {{non-standard_inline}}</dt>
+ <dd>Необов'язковий. Номер рядка в коді, що спричинив виняток.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Виняток <code>RangeError</code> викидається при спробі передати у якості аргумента функції значення, яке не входить у діапазон дозволених цією функцією значень.</p>
+
+<p>Його можна зустріти, якщо:</p>
+
+<ul>
+ <li>передати значення, що не є одним з дозволених рядкових значень, у {{jsxref("String.prototype.normalize()")}}, або</li>
+ <li>при спробі створити масив з недозволеним значенням довжини за допомогою конструктора {{jsxref("Array")}}, або</li>
+ <li>при спробі передати неправильні значення до числових методів {{jsxref("Number.toExponential()")}}, {{jsxref("Number.toFixed()")}} або {{jsxref("Number.toPrecision()")}}.</li>
+</ul>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt><code>RangeError.prototype</code></dt>
+ <dd>Вможливлює додавання властивостей до об'єктів <code>RangeError</code>.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<p>Сам <code>RangeError</code> не має власних методів, але успадковує деякі методи через ланцюжок прототипів.</p>
+
+<h2 id="Екземпляри_RangeError">Екземпляри <code>RangeError</code></h2>
+
+<h3 id="Властивості_2">Властивості</h3>
+
+<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype', 'Властивості')}}</div>
+
+<h3 id="Методи_2">Методи</h3>
+
+<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype', 'Методи')}}</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_RangeError_для_числових_значень">Використання <code>RangeError</code> (для числових значень)</h3>
+
+<pre class="brush: js">function check(n)
+{
+    if(!(n &gt;= -500 &amp;&amp; n &lt;= 500))
+    {
+        throw new RangeError("Аргумент має бути в діапазоні між -500 та 500.")
+    }
+}
+
+try
+{
+    check(2000);
+}
+catch(error)
+{
+    if(error instanceof RangeError)
+    {
+        // Обробити помилку
+    }
+}</pre>
+
+<h3 id="Використання_RangeError_для_нечислових_значень">Використання <code>RangeError</code> (для нечислових значень)</h3>
+
+<pre class="brush: js">function check(value)
+{
+    if(["яблуко", "банан", "морква"].includes(value) === false)
+    {
+        throw new RangeError("Аргумент має дорівнювати \"яблуко\", \"банан\", або \"морква\".")
+    }
+}
+
+try
+{
+    check("капуста")
+}
+catch(error)
+{
+    if(error instanceof RangeError)
+    {
+        // Обробити помилку
+    }
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.RangeError")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Number.toExponential()")}}</li>
+ <li>{{jsxref("Number.toFixed()")}}</li>
+ <li>{{jsxref("Number.toPrecision()")}}</li>
+ <li>{{jsxref("String.prototype.normalize()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/rangeerror/prototype/index.html b/files/uk/web/javascript/reference/global_objects/rangeerror/prototype/index.html
new file mode 100644
index 0000000000..f0b90c5eab
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/rangeerror/prototype/index.html
@@ -0,0 +1,89 @@
+---
+title: RangeError.prototype
+slug: Web/JavaScript/Reference/Global_Objects/RangeError/prototype
+tags:
+  - Error
+  - JavaScript
+  - RangeError
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/RangeError
+---
+<div>{{JSRef}}</div>
+
+<p>Властивість <code><strong>RangeError.prototype</strong></code> є прототипом для конструктора {{jsxref("RangeError")}}</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Всі екземпляри {{jsxref("RangeError")}} успадковуються від <code>RangeError.prototype</code>. Ви можете використати прототип, щоб додати властивості чи методи до усіх екземплярів.</p>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt><code>RangeError.prototype.constructor</code></dt>
+ <dd>Визначає функцію, яка створила прототип об'єкта.</dd>
+ <dt>{{jsxref("Error.prototype.message", "RangeError.prototype.message")}}</dt>
+ <dd>Повідомлення помилки. Хоча ECMA-262 зазначає, що {{jsxref("RangeError")}} має надавати власну властивість <code>message</code>, у <a href="/uk/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, він успадковує {{jsxref("Error.prototype.message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "RangeError.prototype.name")}}</dt>
+ <dd>Ім'я помилки. Успаковано від {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "RangeError.prototype.fileName")}}</dt>
+ <dd>Шлях до файлу, що спричинив помилку. Успаковано від {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "RangeError.prototype.lineNumber")}}</dt>
+ <dd>Номер рядка файлу, в якому виникла помилка. Успаковано від {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "RangeError.prototype.columnNumber")}}</dt>
+ <dd>Номер стовпця у рядку, де виникла помилка. Успаковано від {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "RangeError.prototype.stack")}}</dt>
+ <dd>Трасування стеку. Успаковано від {{jsxref("Error", "Error")}}.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<p>Хоча прототип {{jsxref("RangeError")}} не містить власних методів, екземпляри {{jsxref("RangeError")}} успадковують деякі методи через ланцюжок прототипів.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.RangeError")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/referenceerror/index.html b/files/uk/web/javascript/reference/global_objects/referenceerror/index.html
new file mode 100644
index 0000000000..161634f10d
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/referenceerror/index.html
@@ -0,0 +1,108 @@
+---
+title: ReferenceError
+slug: Web/JavaScript/Reference/Global_Objects/ReferenceError
+tags:
+  - Error
+  - JavaScript
+  - ReferenceError
+  - помилка
+translation_of: Web/JavaScript/Reference/Global_Objects/ReferenceError
+---
+<div>{{JSRef}}</div>
+
+<p>Об'єкт <code><strong>ReferenceError</strong></code> позначає помилку, що виникає при посиланні на змінну, яка не існує.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>new ReferenceError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>message</code> {{optional_inline}}</dt>
+ <dd>Необов'язковий. Зрозумілий людині опис помилки.</dd>
+ <dt><code>fileName</code> {{optional_inline}} {{non-standard_inline}}</dt>
+ <dd>Необов'язковий. Ім'я файлу, код з якого спричинив виняток.</dd>
+ <dt><code>lineNumber</code> {{optional_inline}} {{non-standard_inline}}</dt>
+ <dd>Необов'язковий. Номер рядка в коді, що спричинив виняток.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p><code>ReferenceError</code> викидається при посиланні на змінну, яка не була оголошена.</p>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt><code>ReferenceError.prototype</code></dt>
+ <dd>Дозволяє додавати властивості до об'єктів <code>ReferenceError</code>.</dd>
+</dl>
+
+<h2 id="Екземпляри_ReferenceError">Екземпляри <code>ReferenceError</code></h2>
+
+<h3 id="Властивості_2">Властивості</h3>
+
+<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype', 'Властивості')}}</div>
+
+<h3 id="Методи">Методи</h3>
+
+<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype', 'Методи')}}</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Перехоплення_ReferenceError">Перехоплення <code>ReferenceError</code></h3>
+
+<pre class="brush: js">try {
+  let a = undefinedVariable
+} catch (e) {
+  console.log(e instanceof ReferenceError) // true
+  console.log(e.message)                   // "undefinedVariable is not defined"
+  console.log(e.name)                      // "ReferenceError"
+  console.log(e.fileName)                  // "Scratchpad/1"
+  console.log(e.lineNumber)                // 2
+  console.log(e.columnNumber)              // 6
+  console.log(e.stack)                     // "@Scratchpad/2:2:7\n"
+}
+</pre>
+
+<h3 id="Створення_ReferenceError">Створення <code>ReferenceError</code></h3>
+
+<pre class="brush: js">try {
+  throw new ReferenceError('Привіт', 'someFile.js', 10)
+} catch (e) {
+  console.log(e instanceof ReferenceError) // true
+  console.log(e.message)                   // "Привіт"
+  console.log(e.name)                      // "ReferenceError"
+  console.log(e.fileName)                  // "someFile.js"
+  console.log(e.lineNumber)                // 10
+  console.log(e.columnNumber)              // 0
+  console.log(e.stack)                     // "@Scratchpad/2:2:9\n"
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-referenceerror', 'ReferenceError')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.ReferenceError")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/referenceerror/prototype/index.html b/files/uk/web/javascript/reference/global_objects/referenceerror/prototype/index.html
new file mode 100644
index 0000000000..82bd7af85e
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/referenceerror/prototype/index.html
@@ -0,0 +1,90 @@
+---
+title: ReferenceError.prototype
+slug: Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype
+tags:
+  - Error
+  - JavaScript
+  - ReferenceError
+  - помилка
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/ReferenceError
+---
+<div>{{JSRef}}</div>
+
+<p>Властивість <code><strong>ReferenceError.prototype</strong></code> є прототипом для конструктора {{jsxref("ReferenceError")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Всі екземпляри {{jsxref("ReferenceError")}} успадковуються від <code>ReferenceError.prototype</code>. Ви можете використати прототип, щоб додати властивості чи методи до усіх екземплярів.</p>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt><code>ReferenceError.prototype.constructor</code></dt>
+ <dd>Визначає функцію, яка створила прототип об'єкта.</dd>
+ <dt>{{jsxref("Error.prototype.message", "ReferenceError.prototype.message")}}</dt>
+ <dd>Повідомлення помилки. Хоча ECMA-262 зазначає, що {{jsxref("ReferenceError")}} повинен мати власну властивість <code>message</code>, у <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> він успадковує {{jsxref("Error.prototype.message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "ReferenceError.prototype.name")}}</dt>
+ <dd>Ім'я помилки. Успадковано від {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "ReferenceError.prototype.fileName")}}</dt>
+ <dd>Шлях до файлу, що спричинив помилку. Успаковано від {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "ReferenceError.prototype.lineNumber")}}</dt>
+ <dd>Номер рядка файлу, в якому виникла помилка. Успаковано від {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "ReferenceError.prototype.columnNumber")}}</dt>
+ <dd>Номер стовпця у рядку, де виникла помилка. Успаковано від {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "ReferenceError.prototype.stack")}}</dt>
+ <dd>Трасування стеку. Успаковано від {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<p>Хоча прототип {{jsxref("ReferenceError")}} не містить власних методів, екземпляри {{jsxref("ReferenceError")}} успадковують деякі методи через ланцюжок прототипів.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.ReferenceError")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/reflect/index.html b/files/uk/web/javascript/reference/global_objects/reflect/index.html
new file mode 100644
index 0000000000..0e16d2b039
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/reflect/index.html
@@ -0,0 +1,82 @@
+---
+title: Reflect
+slug: Web/JavaScript/Reference/Global_Objects/Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect
+---
+<div>{{JSRef}}</div>
+
+<div></div>
+
+<p><strong>Reflect</strong> вбудованний об'єкт, що об'єднує в собі методи для перехоплюючих JavaScript операцій. Ці методи такі ж, як у <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">proxy handlers</a>. <code>Reflect</code> є не функціональний об'єкт, тому не може використовуватися, як конструктор.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>На відміну від більшості глобальних об'єктів, <code>Reflect</code> не є конструктором. Ви не можете використовувати його з <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> оператором</a> або запустити <code>Reflect</code> як функцію. Всі властивості та методи <code>Reflect</code> є статичними (так само як у {{jsxref("Math")}} об'єкта).</p>
+
+<h2 id="Методи">Методи</h2>
+
+<p><code>Reflect</code> об'єкт надає статичні функції, які мають такі ж імена як <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">proxy handler методи</a>. Деякі з цих методів є також ідентичними до відповідних методів в {{jsxref("Object")}}, хоча існують <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect/Comparing_Reflect_and_Object_methods">деякі тонкі відмінності</a> між ними.</p>
+
+<dl>
+ <dt>{{jsxref("Reflect.apply()")}}</dt>
+ <dd>Виконує цільову функцію з аргументами, які визначені параметром <code>args</code>. Дивись також {{jsxref("Function.prototype.apply()")}}.</dd>
+ <dt>{{jsxref("Reflect.construct()")}}</dt>
+ <dd>Оператор <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a> як функція. Еквівалент до виклику <code>new target(...args)</code>. Надає також опційну(не обовязковий) можливість встановити інший прототип.</dd>
+ <dt>{{jsxref("Reflect.defineProperty()")}}</dt>
+ <dd>Подібний до {{jsxref("Object.defineProperty()")}}. Повертає {{jsxref("Boolean")}}.</dd>
+ <dt>{{jsxref("Reflect.deleteProperty()")}}</dt>
+ <dd>Оператор <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete"><code>delete</code></a> як функція. Еквівалент до виклику <code>delete target[name]</code>.</dd>
+ <dt>{{jsxref("Reflect.get()")}}</dt>
+ <dd>Функція, що повертає значення властивості.</dd>
+ <dt>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</dt>
+ <dd>Подібно до {{jsxref("Object.getOwnPropertyDescriptor()")}}. Повертає дескриптор даної властивості, якщо така існує у об'єкті,  {{jsxref("undefined")}} в іншому випадку.</dd>
+ <dt>{{jsxref("Reflect.getPrototypeOf()")}}</dt>
+ <dd>Така як {{jsxref("Object.getPrototypeOf()")}}.</dd>
+ <dt>{{jsxref("Reflect.has()")}}</dt>
+ <dd>Оператор <a href="/en-US/docs/Web/JavaScript/Reference/Operators/in"><code>in</code></a> як функція. Повертая булеве, що вказую чи існує власна або успадкована властивість.</dd>
+ <dt>{{jsxref("Reflect.isExtensible()")}}</dt>
+ <dd>Така як {{jsxref("Object.isExtensible()")}}.</dd>
+ <dt>{{jsxref("Reflect.ownKeys()")}}</dt>
+ <dd>Повертає масив власних(не успадкованих) ключів властивостей цільового об'єкту.</dd>
+ <dt>{{jsxref("Reflect.preventExtensions()")}}</dt>
+ <dd>Подібно до {{jsxref("Object.preventExtensions()")}}. Повертає {{jsxref("Boolean")}}.</dd>
+ <dt>{{jsxref("Reflect.set()")}}</dt>
+ <dd>Функція, яка встановлює значення для властивостей. Повертає {{jsxref("Boolean")}} як <code>true</code> якщо оновлення було успішним.</dd>
+ <dt>{{jsxref("Reflect.setPrototypeOf()")}}</dt>
+ <dd>Функція, що встановлює прототип об'єкта.</dd>
+</dl>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-reflect-object', 'Reflect')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect-object', 'Reflect')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Reflect.enumerate був видаленний.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумістність_браузерів">Сумістність браузерів</h2>
+
+<div class="hidden">Таблиця сумістностей на цій сторінці згенерована з структурованих даних. Якщо Ви маєте бажання зробити свій внесок у дані, будь-ласка перевірте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і відправте нам запит на оновлення(pull request).</div>
+
+<p>{{Compat("javascript.builtins.Reflect")}}</p>
+
+<h2 id="Дивись_також">Дивись також</h2>
+
+<ul>
+ <li>Глобальний об'єкт {{jsxref("Proxy")}}.</li>
+ <li>Об'єкт {{jsxref("Proxy.handler", "handler")}}.</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/regexp/exec/index.html b/files/uk/web/javascript/reference/global_objects/regexp/exec/index.html
new file mode 100644
index 0000000000..3a4547d559
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/regexp/exec/index.html
@@ -0,0 +1,227 @@
+---
+title: RegExp.prototype.exec()
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/exec
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/exec
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>exec()</code></strong> виконує пошук збігів у заданому рядку. Він повертає масив або {{jsxref("null")}}.</p>
+
+<p>Якщо Ви просто використовуєте регулярний вираз, щоб знайти чи є збіг чи немає використовуйте метод {{jsxref("RegExp.prototype.test()")}} або метод {{jsxref("String.prototype.search()")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>regexObj</var>.exec(<var>str</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>str</code></dt>
+ <dd>Рядок який буде перевірятися на збіг за регулярним виразом.</dd>
+</dl>
+
+<h3 id="Що_повертає">Що повертає</h3>
+
+<p>Якщо збіг є, метод  <code>exec()</code> повертає масив і оновлює властивості об'єкту регулярного виразу. На першій позиції повернутого цим методом масиву буде підрядок який задовольняє даний регулярний вираз, на наступних позиціях запам'ятовані збіги за допомогою дужок "()"</p>
+
+<p>Якщо збігів немає, метод <code>exec()</code> повертає {{jsxref("null")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Розглянемо наступний приклад:</p>
+
+<pre class="brush: js">// Знайти такий збіг: "Швидка руда" після чого йде
+// довільна кількість знаків потім слово "стрибає"
+// Запам'ятати "руда" і "стрибає"
+// Ігнорувати регістр літер (знайде і руда і РуДа)
+var re = /швидка\s(руда).+?(стрибає)/ig;
+var result = re.exec('Швидка руда лисиця стрибає через ледачого пса');
+</pre>
+
+<p>Таблиця підсумовує результати виконання скрипта:</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td class="header">Об'єкт</td>
+   <td class="header">Властивість / Індекс</td>
+   <td class="header">Пояснення</td>
+   <td class="header">Приклад</td>
+  </tr>
+  <tr>
+   <td rowspan="4"><code>result</code></td>
+   <td><code>[0]</code></td>
+   <td>Рядок символів що співпали.</td>
+   <td><code>Швидка руда лисиця стрибає</code></td>
+  </tr>
+  <tr>
+   <td><code>[1], ...[<em>n</em> ]</code></td>
+   <td>Запам'ятовані підрядки, якщо такі є. Їхня кількість не обмежена.</td>
+   <td><code>[1] = руда<br>
+    [2] = стрибає</code></td>
+  </tr>
+  <tr>
+   <td><code>index</code></td>
+   <td>Індекс з якого починається збіг.</td>
+   <td><font face="Consolas, Liberation Mono, Courier, monospace">0</font></td>
+  </tr>
+  <tr>
+   <td><code>input</code></td>
+   <td>Оригінальний рядок.</td>
+   <td><code>Швидка руда лисиця стрибає через ледачого пса</code></td>
+  </tr>
+  <tr>
+   <td rowspan="5"><code>re</code></td>
+   <td><code>lastIndex</code></td>
+   <td>
+    <p>Індекс з якого починати пошук наступного збігу. Коли прапорець "g" непоставлено, lastIndex буде залишатися 0.</p>
+   </td>
+   <td><code>26</code></td>
+  </tr>
+  <tr>
+   <td><code>ignoreCase</code></td>
+   <td>Показує чи був використаний прапорець  "<code>i</code>" для ігнорування регістру літер.</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>global</code></td>
+   <td>Показує чи був використаний прапорець "<code>g</code>" для глобального пошуку.</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>multiline</code></td>
+   <td>Показує чи був використаний прапорець "<font face="Consolas, Liberation Mono, Courier, monospace">m</font>" для пошуку.</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>source</code></td>
+   <td>Сам регулярний вираз.</td>
+   <td>швидка\s(руда).+?(стрибає)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Пошук_наступних_збігів">Пошук наступних збігів</h3>
+
+<p>Якщо регулярний вираз використовує прапорець "<code>g</code>", Ви можете використовувати метод <code>exec() багато разів для того, щоб знайти наступні збіги у рядку з яким працюєте.</code> Якщо Ви так зробите, пошук почнеться з індексу який  заданий властивістю {{jsxref("RegExp.lastIndex", "lastIndex")}} ( метод {{jsxref("RegExp.prototype.test()", "test()")}} також змінює властивість {{jsxref("RegExp.lastIndex", "lastIndex")}} ). Для прикладу, припустимо Ви маєте такий скрипт:</p>
+
+<pre class="brush: js">var myRe = /ab*/g;
+var str = 'abbcdefabh';
+var myArray;
+while ((myArray = myRe.exec(str)) !== null) {
+  var msg = 'Знайдено ' + myArray[0] + '. ';
+  msg += 'Наступний пошук почнеться з індексу ' + myRe.lastIndex;
+  console.log(msg);
+}
+</pre>
+
+<p>Це скрипт виведе таке:</p>
+
+<pre>Знайдено abb. Наступний пошук почнеться з індексу 3
+Знайдено ab. Наступний пошук почнеться з індексу 9
+</pre>
+
+<p>Увага: Не створюйте об'єкт (через конструктор {{jsxref("RegExp")}})  або літерал регулярного виразу в умові циклу <code>while</code> оскільки це призведе до нескінченного циклу оскільки властивість {{jsxref("RegExp.lastIndex", "lastIndex")}} буде перезаписуватися кожен раз на нуль і метод <code>exec </code>ніколи не поверне <font face="Consolas, Liberation Mono, Courier, monospace">null</font>. Також перевірте чи поставили прапорець "g" оскільки його відсутність також призведе до нескінченного циклу.</p>
+
+<h3 id="Використання_exec()_RegExp_літералами">Використання <code>exec()</code> <code>RegExp</code> літералами</h3>
+
+<p>Ви можете використовувати метод <code>exec()</code> без створення об'єкту {{jsxref("RegExp")}}:</p>
+
+<pre class="brush: js">var matches = /(hello \S+)/.exec('This is a hello world!');
+console.log(matches[1]);
+</pre>
+
+<p>Це виведе в консоль повідомлення 'hello world!'</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Примітка</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Первісне значення. Реалізовано  у JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.10.6.21', 'RegExp.exec')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-regexp.prototype.exec', 'RegExp.exec')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-regexp.prototype.exec', 'RegExp.exec')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Браузер</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базова підтримка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Браузер</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базова підтримка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a> розділ в <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a></li>
+ <li>{{jsxref("RegExp")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/regexp/index.html b/files/uk/web/javascript/reference/global_objects/regexp/index.html
new file mode 100644
index 0000000000..8374d65fc6
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/regexp/index.html
@@ -0,0 +1,699 @@
+---
+title: RegExp
+slug: Web/JavaScript/Reference/Global_Objects/RegExp
+tags:
+  - Constructor
+  - JavaScript
+  - NeedsTranslation
+  - Reference
+  - RegExp
+  - Regular Expressions
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp
+---
+<div>{{JSRef}}</div>
+
+<p>Конструктор <strong><code>RegExp </code></strong>створює об'єкт регулярного виразу для знаходження тексту по шаблону.</p>
+
+<p>Для ознайомлення з регулярними виразами, можете проглянути розділ <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a> в <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">JavaScript Guide</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Можливі позначення літералу та констуктору:</p>
+
+<pre class="syntaxbox notranslate">/<var>pattern</var>/<var>flags</var>
+new RegExp(<var>pattern</var>[, <var>flags</var>])
+</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>pattern</code></dt>
+ <dd>Шаблон регулярного виразу.</dd>
+ <dt><code>flags</code></dt>
+ <dd>
+ <p>Якщо об'явлені, можуть сторювати комбінації з цих значень:</p>
+
+ <dl>
+  <dt><code>g</code></dt>
+  <dd>глобальне співпадіння</dd>
+  <dt><code>i</code></dt>
+  <dd>ігнорування розкладки</dd>
+  <dt><code>m</code></dt>
+  <dd>співпадіння по кільком строкам; символи початку та кінця (<code>^</code> й <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">$</span></font>) починають працювати по кільком строкам (тобто відбувається співпадіння с початком або кінцем <em>кожної </em>строки (строки відділяються символами <code>\n</code> й <code>\r</code>), а не тільки з початком та кінцем усієї строки, яку ввели)</dd>
+  <dt><code>u</code></dt>
+  <dd>юнікод</dd>
+  <dt><code>y</code></dt>
+  <dd>"липкий" пошук; починає шукати співпадіння з індексу, на який вказує властивість <code>lastIndex</code> даного <code>RegExp</code></dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Існує 2 шляхи створити <code>RegExp</code> об'єкт: за допомогою літерального виразу або конструктора. Аби розрізняти текстовий рядок, параметри літерального виразу не містять лапок, але якщо створювати за допомогою конструктора, то лапки можно використовувати. У наступному прикладі створюються однакові регулярні вирази:</p>
+
+<pre class="brush: js notranslate">/ab+c/i;
+new RegExp('ab+c', 'i');
+new RegExp(/ab+c/, 'i');
+</pre>
+
+<p>Літеральна нотація виконує компіляцію виразу коли даний вираз обчислений. Викоритсовуйте літерали якщо регулярний вираз відомий до початку роботи програми. Наприклад, якщо використовувати літерал у циклі, регулярний вираз не буде наново компілюватись на кожній ітерації.</p>
+
+<p>Конструктор об'єкту регулярного виразу, приміром, <code>new RegExp('ab+c')</code>, забезпечує компіляцію регулярного виразу під час виконання програми. Використовуйте функцію конструктора якщо шаблон регулярного виразу буде змінюватися або шаблон не відомий та надходить з іншого джерела, наприклад, від користувача.</p>
+
+<p>Починаючи з ECMAScript 6, <code>new RegExp(/ab+c/, 'i')</code> більше не видає {{jsxref("TypeError")}} ("can't supply flags when constructing one RegExp from another") якщо перший аргумент <code>RegExp</code> та другий аргумент <code>flags</code> наявний. Натомість створюється новий <code>RegExp</code> з аргументів.</p>
+
+<p>При використанні функції-конструктора необхідно дотримуватись правил текстових рядків (попередні спеціальні символи з \ якщо вони входять в рядок). Наприклад, наступні вирази еквівалентні:</p>
+
+<pre class="brush: js notranslate">var re = /\w+/;
+var re = new RegExp('\\w+');
+</pre>
+
+<h2 id="Special_characters_meaning_in_regular_expressions">Special characters meaning in regular expressions</h2>
+
+<ul>
+ <li><a href="#character-classes">Character Classes</a></li>
+ <li><a href="#character-sets">Character Sets</a></li>
+ <li><a href="#boundaries">Boundaries</a></li>
+ <li><a href="#grouping-back-references">Grouping and back references</a></li>
+ <li><a href="#quantifiers">Quantifiers</a></li>
+</ul>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr id="character-classes">
+   <th colspan="2">Character Classes</th>
+  </tr>
+  <tr>
+   <th>Character</th>
+   <th>Meaning</th>
+  </tr>
+  <tr>
+   <td><code>.</code></td>
+   <td>
+    <p>(The dot, the decimal point) matches any single character <em>except</em> line terminators: <code>\n</code>, <code>\r</code>, <code>\u2028</code> or <code>\u2029</code>.</p>
+
+    <p>Inside a character class, the dot loses its special meaning and matches a literal dot.</p>
+
+    <p>Note that the <code>m</code> multiline flag doesn't change the dot behavior. So to match a pattern across multiple lines, the character set <code>[^]</code> can be used (if you don't mean an old version of IE, of course), it will match any character including newlines.</p>
+
+    <p>For example, <code>/.y/</code> matches "my" and "ay", but not "yes", in "yes make my day".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\d</code></td>
+   <td>
+    <p>Matches a digit character in the basic Latin alphabet. Equivalent to <code>[0-9]</code>.</p>
+
+    <p>For example, <code>/\d/</code> or <code>/[0-9]/</code> matches "2" in "B2 is the suite number".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\D</code></td>
+   <td>
+    <p>Matches any character that is not a digit in the basic Latin alphabet. Equivalent to <code>[^0-9]</code>.</p>
+
+    <p>For example, <code>/\D/</code> or <code>/[^0-9]/</code> matches "B" in "B2 is the suite number".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\w</code></td>
+   <td>
+    <p>Matches any alphanumeric character from the basic Latin alphabet, including the underscore. Equivalent to <code>[A-Za-z0-9_]</code>.</p>
+
+    <p>For example, <code>/\w/</code> matches "a" in "apple", "5" in "$5.28", and "3" in "3D".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\W</code></td>
+   <td>
+    <p>Matches any character that is not a word character from the basic Latin alphabet. Equivalent to <code>[^A-Za-z0-9_]</code>.</p>
+
+    <p>For example, <code>/\W/</code> or <code>/[^A-Za-z0-9_]/</code> matches "%" in "50%".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\s</code></td>
+   <td>
+    <p>Matches a single white space character, including space, tab, form feed, line feed and other Unicode spaces. Equivalent to <code>[ \f\n\r\t\v​\u00a0\u1680​\u180e\u2000​-\u200a​\u2028\u2029\u202f\u205f​\u3000\ufeff]</code>.</p>
+
+    <p>For example, <code>/\s\w*/</code> matches " bar" in "foo bar".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\S</code></td>
+   <td>
+    <p>Matches a single character other than white space. Equivalent to <code>[^ \f\n\r\t\v​\u00a0\u1680​\u180e\u2000​-\u200a​\u2028\u2029\u202f\u205f​\u3000\ufeff]</code>.</p>
+
+    <p>For example, <code>/\S\w*/</code> matches "foo" in "foo bar".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\t</code></td>
+   <td>Matches a horizontal tab.</td>
+  </tr>
+  <tr>
+   <td><code>\r</code></td>
+   <td>Matches a carriage return.</td>
+  </tr>
+  <tr>
+   <td><code>\n</code></td>
+   <td>Matches a linefeed.</td>
+  </tr>
+  <tr>
+   <td><code>\v</code></td>
+   <td>Matches a vertical tab.</td>
+  </tr>
+  <tr>
+   <td><code>\f</code></td>
+   <td>Matches a form-feed.</td>
+  </tr>
+  <tr>
+   <td><code>[\b]</code></td>
+   <td>Matches a backspace. (Not to be confused with <code>\b</code>)</td>
+  </tr>
+  <tr>
+   <td><code>\0</code></td>
+   <td>Matches a NUL character. Do not follow this with another digit.</td>
+  </tr>
+  <tr>
+   <td><code>\c<em>X</em></code></td>
+   <td>
+    <p>Where <code><em>X</em></code> is a letter from A - Z. Matches a control character in a string.</p>
+
+    <p>For example, <code>/\cM/</code> matches control-M in a string.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\x<em>hh</em></code></td>
+   <td>Matches the character with the code <code><em>hh</em></code> (two hexadecimal digits).</td>
+  </tr>
+  <tr>
+   <td><code>\u<em>hhhh</em></code></td>
+   <td>Matches a UTF-16 code-unit with the value <code><em>hhhh</em></code> (four hexadecimal digits).</td>
+  </tr>
+  <tr>
+   <td><code>\u<em>{hhhh} </em>or <em>\u{hhhhh}</em></code></td>
+   <td>(only when u flag is set) Matches the character with the Unicode value U+<code><em>hhhh</em> or </code>U+<code><em>hhhhh</em></code> (hexadecimal digits).</td>
+  </tr>
+  <tr>
+   <td><code>\</code></td>
+   <td>
+    <p>For characters that are usually treated literally, indicates that the next character is special and not to be interpreted literally.</p>
+
+    <p>For example, <code>/b/</code> matches the character "b". By placing a backslash in front of "b", that is by using <code>/\b/</code>, the character becomes special to mean match a word boundary.</p>
+
+    <p><em>or</em></p>
+
+    <p>For characters that are usually treated specially, indicates that the next character is not special and should be interpreted literally.</p>
+
+    <p>For example, "*" is a special character that means 0 or more occurrences of the preceding character should be matched; for example, <code>/a*/</code> means match 0 or more "a"s. To match <code>*</code> literally, precede it with a backslash; for example, <code>/a\*/</code> matches "a*".</p>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr id="character-sets">
+   <th colspan="2">Character Sets</th>
+  </tr>
+  <tr>
+   <th>Character</th>
+   <th>Meaning</th>
+  </tr>
+  <tr>
+   <td><code>[xyz]<br>
+    [a-c]</code></td>
+   <td>
+    <p>A character set. Matches any one of the enclosed characters. You can specify a range of characters by using a hyphen, but if the hyphen appears as the first or last character enclosed in the square brackets it is taken as a literal hyphen to be included in the character set as a normal character.</p>
+
+    <p>For example, <code>[abcd]</code> is the same as <code>[a-d]</code>. They match the "b" in "brisket" and the "c" in "chop".</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>[^xyz]<br>
+     [^a-c]</code></p>
+   </td>
+   <td>
+    <p>A negated or complemented character set. That is, it matches anything that is not enclosed in the brackets. You can specify a range of characters by using a hyphen, but if the hyphen appears as the first or last character enclosed in the square brackets it is taken as a literal hyphen to be included in the character set as a normal character.</p>
+
+    <p>For example, <code>[^abc]</code> is the same as <code>[^a-c]</code>. They initially match "o" in "bacon" and "h" in "chop".</p>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr id="alternation">
+   <th colspan="2">Alternation</th>
+  </tr>
+  <tr>
+   <th>Character</th>
+   <th>Meaning</th>
+  </tr>
+  <tr>
+   <td><code><em>x</em>|<em>y</em></code></td>
+   <td>
+    <p>Matches either <code><em>x</em></code> or <code><em>y</em></code>.</p>
+
+    <p>For example, <code>/green|red/</code> matches "green" in "green apple" and "red" in "red apple".</p>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr id="boundaries">
+   <th colspan="2">Boundaries</th>
+  </tr>
+  <tr>
+   <th>Character</th>
+   <th>Meaning</th>
+  </tr>
+  <tr>
+   <td><code>^</code></td>
+   <td>
+    <p>Matches beginning of input. If the multiline flag is set to true, also matches immediately after a line break character.</p>
+
+    <p>For example, <code>/^A/</code> does not match the "A" in "an A", but does match the first "A" in "An A".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>$</code></td>
+   <td>
+    <p>Matches end of input. If the multiline flag is set to true, also matches immediately before a line break character.</p>
+
+    <p>For example, <code>/t$/</code> does not match the "t" in "eater", but does match it in "eat".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\b</code></td>
+   <td>
+    <p>Matches a zero-width word boundary, such as between a letter and a space. (Not to be confused with <code>[\b]</code>)</p>
+
+    <p>For example, <code>/\bno/</code> matches the "no" in "at noon"; <code>/ly\b/</code> matches the "ly" in "possibly yesterday".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\B</code></td>
+   <td>
+    <p>Matches a zero-width non-word boundary, such as between two letters or between two spaces.</p>
+
+    <p>For example, <code>/\Bon/</code> matches "on" in "at noon", and <code>/ye\B/</code> matches "ye" in "possibly yesterday".</p>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr id="grouping-back-references">
+   <th colspan="2">Grouping and back references</th>
+  </tr>
+  <tr>
+   <th>Character</th>
+   <th>Meaning</th>
+  </tr>
+  <tr>
+   <td><code>(<em>x</em>)</code></td>
+   <td>
+    <p>Matches <code><em>x</em></code> and remembers the match. These are called capturing groups.</p>
+
+    <p>For example, <code>/(foo)/</code> matches and remembers "foo" in "foo bar". </p>
+
+    <p>The capturing groups are numbered according to the order of left parentheses of capturing groups, starting from 1. The matched substring can be recalled from the resulting array's elements <code>[1], ..., [n]</code> or from the predefined <code>RegExp</code> object's properties <code>$1, ..., $9</code>.</p>
+
+    <p>Capturing groups have a performance penalty. If you don't need the matched substring to be recalled, prefer non-capturing parentheses (see below).</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\<em>n</em></code></td>
+   <td>
+    <p>Where <code><em>n</em></code> is a positive integer. A back reference to the last substring matching the n parenthetical in the regular expression (counting left parentheses).</p>
+
+    <p>For example, <code>/apple(,)\sorange\1/</code> matches "apple, orange," in "apple, orange, cherry, peach". A more complete example follows this table.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>(?:<em>x</em>)</code></td>
+   <td>Matches <code><em>x</em></code> but does not remember the match. These are called non-capturing groups. The matched substring can not be recalled from the resulting array's elements <code>[1], ..., [n]</code> or from the predefined <code>RegExp</code> object's properties <code>$1, ..., $9</code>.</td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr id="quantifiers">
+   <th colspan="2">Quantifiers</th>
+  </tr>
+  <tr>
+   <th>Character</th>
+   <th>Meaning</th>
+  </tr>
+  <tr>
+   <td><code><em>x</em>*</code></td>
+   <td>
+    <p>Matches the preceding item <em>x</em> 0 or more times.</p>
+
+    <p>For example, <code>/bo*/</code> matches "boooo" in "A ghost booooed" and "b" in "A bird warbled", but nothing in "A goat grunted".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>+</code></td>
+   <td>
+    <p>Matches the preceding item <em>x</em> 1 or more times. Equivalent to <code>{1,}</code>.</p>
+
+    <p>For example, <code>/a+/</code> matches the "a" in "candy" and all the "a"'s in "caaaaaaandy".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>?</code></td>
+   <td>
+    <p>Matches the preceding item <em>x</em> 0 or 1 time.</p>
+
+    <p>For example, <code>/e?le?/</code> matches the "el" in "angel" and the "le" in "angle."</p>
+
+    <p>If used immediately after any of the quantifiers <code>*</code>, <code>+</code>, <code>?</code>, or <code>{}</code>, makes the quantifier non-greedy (matching the minimum number of times), as opposed to the default, which is greedy (matching the maximum number of times).</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>{<em>n</em>}</code></td>
+   <td>
+    <p>Where <code><em>n</em></code> is a positive integer. Matches exactly <code><em>n</em></code> occurrences of the preceding item <em>x</em>.</p>
+
+    <p>For example, <code>/a{2}/</code> doesn't match the "a" in "candy", but it matches all of the "a"'s in "caandy", and the first two "a"'s in "caaandy".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>{<em>n</em>,}</code></td>
+   <td>
+    <p>Where <code><em>n</em></code> is a positive integer. Matches at least <code><em>n</em></code> occurrences of the preceding item <em>x</em>.</p>
+
+    <p>For example, <code>/a{2,}/</code> doesn't match the "a" in "candy", but matches all of the a's in "caandy" and in "caaaaaaandy".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>{<em>n</em>,<em>m</em>}</code></td>
+   <td>
+    <p>Where <code><em>n</em></code> and <code><em>m</em></code> are positive integers. Matches at least <code><em>n</em></code> and at most <code><em>m</em></code> occurrences of the preceding item <em>x</em>.</p>
+
+    <p>For example, <code>/a{1,3}/</code> matches nothing in "cndy", the "a" in "candy", the two "a"'s in "caandy", and the first three "a"'s in "caaaaaaandy". Notice that when matching "caaaaaaandy", the match is "aaa", even though the original string had more "a"'s in it.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code><em>x</em>*?</code><br>
+     <code><em>x</em>+?</code><br>
+     <code><em>x</em>??</code><br>
+     <code><em>x</em>{n}?</code><br>
+     <code><em>x</em>{n,}?</code><br>
+     <code><em>x</em>{n,m}?</code></p>
+   </td>
+   <td>
+    <p>Matches the preceding item <em>x</em> like <code>*</code>, <code>+</code>, <code>?</code>, and <code>{...}</code> from above, however the match is the smallest possible match.</p>
+
+    <p>For example, <code>/&lt;.*?&gt;/</code> matches "&lt;foo&gt;" in "&lt;foo&gt; &lt;bar&gt;", whereas <code>/&lt;.*&gt;/</code> matches "&lt;foo&gt; &lt;bar&gt;".</p>
+
+    <p>Quantifiers without <code>?</code> are said to be greedy. Those with <code>?</code> are called "non-greedy".</p>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr id="assertions">
+   <th colspan="2">Assertions</th>
+  </tr>
+  <tr>
+   <th>Character</th>
+   <th>Meaning</th>
+  </tr>
+  <tr>
+   <td><code><em>x</em>(?=<em>y</em>)</code></td>
+   <td>
+    <p>Matches <code><em>x</em></code> only if <code><em>x</em></code> is followed by <code><em>y</em></code>.</p>
+
+    <p>For example, /<code>Jack(?=Sprat)/</code> matches "Jack" only if it is followed by "Sprat".<br>
+     <code>/Jack(?=Sprat|Frost)/</code> matches "Jack" only if it is followed by "Sprat" or "Frost". However, neither "Sprat" nor "Frost" is part of the match results.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>(?!<em>y</em>)</code></td>
+   <td>
+    <p>Matches <code><em>x</em></code> only if <code><em>x</em></code> is not followed by <code><em>y</em></code>.</p>
+
+    <p>For example, <code>/\d+(?!\.)/</code> matches a number only if it is not followed by a decimal point.<br>
+     <code>/\d+(?!\.)/.exec('3.141')</code> matches "141" but not "3.141".</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{jsxref("RegExp.prototype")}}</dt>
+ <dd>Allows the addition of properties to all objects.</dd>
+ <dt><code>RegExp.length</code></dt>
+ <dd>The value of <code>RegExp.length</code> is 2.</dd>
+ <dt>{{jsxref("RegExp.@@species", "get RegExp[@@species]")}}</dt>
+ <dd>The constructor function that is used to create derived objects.</dd>
+ <dt>{{jsxref("RegExp.lastIndex")}}</dt>
+ <dd>The index at which to start the next match.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p>The global <code>RegExp</code> object has no methods of its own, however, it does inherit some methods through the prototype chain.</p>
+
+<h2 id="RegExp_prototype_objects_and_instances"><code>RegExp</code> prototype objects and instances</h2>
+
+<h3 id="Properties_2">Properties</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/prototype', 'Properties')}}</div>
+
+<h3 id="Methods_2">Methods</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/prototype', 'Methods')}}</div>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_a_regular_expression_to_change_data_format">Using a regular expression to change data format</h3>
+
+<p>The following script uses the {{jsxref("String.prototype.replace()", "replace()")}} method of the {{jsxref("Global_Objects/String", "String")}} instance to match a name in the format <em>first last</em> and output it in the format <em>last, first</em>. In the replacement text, the script uses <code>$1</code> and <code>$2</code> to indicate the results of the corresponding matching parentheses in the regular expression pattern.</p>
+
+<pre class="brush: js notranslate">var re = /(\w+)\s(\w+)/;
+var str = 'John Smith';
+var newstr = str.replace(re, '$2, $1');
+console.log(newstr);
+</pre>
+
+<p>This displays "Smith, John".</p>
+
+<h3 id="Using_regular_expression_to_split_lines_with_different_line_endingsends_of_lineline_breaks">Using regular expression to split lines with different <strong>line endings/ends of line/line breaks</strong></h3>
+
+<p>The default line ending varies depending on the platform (Unix, Windows, etc.). The line splitting provided in this example works on all platforms.</p>
+
+<pre class="brush: js notranslate">var text = 'Some text\nAnd some more\r\nAnd yet\rThis is the end';
+var lines = text.split(/\r\n|\r|\n/);
+console.log(lines); // logs [ 'Some text', 'And some more', 'And yet', 'This is the end' ]
+</pre>
+
+<p>Note that the order of the patterns in the regular expression matters.</p>
+
+<h3 id="Using_regular_expression_on_multiple_lines">Using regular expression on multiple lines</h3>
+
+<pre class="brush: js notranslate">var s = 'Please yes\nmake my day!';
+s.match(/yes.*day/);
+// Returns null
+s.match(/yes[^]*day/);
+// Returns 'yes\nmake my day'
+</pre>
+
+<h3 id="Using_a_regular_expression_with_the_sticky_flag">Using a regular expression with the sticky flag</h3>
+
+<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/sticky">sticky flag</a> indicates that the regular expression performs sticky matching in the target string by attempting to match starting at {{jsxref("RegExp.prototype.lastIndex")}}.</p>
+
+<pre class="brush: js notranslate">var str = '#foo#';
+var regex = /foo/y;
+
+regex.lastIndex; // 0
+regex.test(str); // true
+regex.lastIndex = 5;
+regex.test(str); // false (lastIndex is taken into account with sticky flag)
+regex.lastIndex; // 0 (reset after match failure)</pre>
+
+<h3 id="Regular_expression_and_Unicode_characters">Regular expression and Unicode characters</h3>
+
+<p>As mentioned above, <code>\w</code> or <code>\W</code> only matches ASCII based characters; for example, "a" to "z", "A" to "Z", "0" to "9" and "_". To match characters from other languages such as Cyrillic or Hebrew, use <code>\uhhhh</code>, where "hhhh" is the character's Unicode value in hexadecimal. This example demonstrates how one can separate out Unicode characters from a word.</p>
+
+<pre class="brush: js notranslate">var text = 'Образец text на русском языке';
+var regex = /[\u0400-\u04FF]+/g;
+
+var match = regex.exec(text);
+console.log(match[0]);        // logs 'Образец'
+console.log(regex.lastIndex); // logs '7'
+
+var match2 = regex.exec(text);
+console.log(match2[0]);       // logs 'на' [did not log 'text']
+console.log(regex.lastIndex); // logs '15'
+
+// and so on
+</pre>
+
+<p>Here's an external resource for getting the complete Unicode block range for different scripts: <a href="http://kourge.net/projects/regexp-unicode-block">Regexp-unicode-block</a>.</p>
+
+<h3 id="Extracting_sub-domain_name_from_URL">Extracting sub-domain name from URL</h3>
+
+<pre class="brush: js notranslate">var url = 'http://xxx.domain.com';
+console.log(/[^.]+/.exec(url)[0].substr(7)); // logs 'xxx'
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.10', 'RegExp')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-regexp-regular-expression-objects', 'RegExp')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>The <code>RegExp</code> constructor no longer throws when the first argument is a <code>RegExp</code> and the second argument is present. Introduces Unicode and sticky flags.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-regexp-regular-expression-objects', 'RegExp')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Sticky flag ("y")</td>
+   <td>{{CompatChrome("39")}} [1]</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Unicode flag ("u")</td>
+   <td>{{CompatChrome("50")}}</td>
+   <td>{{CompatGeckoDesktop("46")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>RegExp(RegExp object, flags)</code> no longer throws</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("39")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Sticky flag ("y")</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("1.9")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Unicode flag ("u")</td>
+   <td>{{CompatUnknown }}</td>
+   <td>{{CompatGeckoMobile("46")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>RegExp(RegExp object, flags)</code> no longer throws</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("39")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Behind a flag.</p>
+
+<h2 id="Gecko-specific_notes">Gecko-specific notes</h2>
+
+<p>Starting with Gecko 34 {{geckoRelease(34)}}, in the case of a capturing group with quantifiers preventing its exercise, the matched text for a capturing group is now <code>undefined</code> instead of an empty string:</p>
+
+<pre class="brush: js notranslate">// Firefox 33 or older
+'x'.replace(/x(.)?/g, function(m, group) {
+  console.log("'group:" + group + "'");
+}); // 'group:'
+
+// Firefox 34 or newer
+'x'.replace(/x(.)?/g, function(m, group) {
+  console.log("'group:" + group + "'");
+}); // 'group:undefined'
+</pre>
+
+<p>Note that due to web compatibility, <code>RegExp.$N</code> will still return an empty string instead of <code>undefined</code> ({{bug(1053944)}}).</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a> chapter in the <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a></li>
+ <li>{{jsxref("String.prototype.match()")}}</li>
+ <li>{{jsxref("String.prototype.replace()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/regexp/source/index.html b/files/uk/web/javascript/reference/global_objects/regexp/source/index.html
new file mode 100644
index 0000000000..d2462b3ac0
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/regexp/source/index.html
@@ -0,0 +1,170 @@
+---
+title: RegExp.prototype.source
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/source
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/source
+---
+<div>{{JSRef}}</div>
+
+<p>Властивість <strong>sourse</strong> повертає  стороку, що містить текст шаблону регулярного виразу, і він немає містити два слеша з обох сторін, а також будь-які прапори регулярного виразу.</p>
+
+<div>{{js_property_attributes(0, 0, 1)}}</div>
+
+<h2 id="Приклад">Приклад</h2>
+
+<h3 id="Використовування_source">Використовування <code>source</code></h3>
+
+<pre class="brush: js">var regex = /fooBar/ig;
+
+console.log(regex.source); // "fooBar", не містить /.../ і прапори"ig".
+</pre>
+
+<h3 id="Порожні_регулярні_вирази_і_як_уникнути_проблем">Порожні регулярні вирази і як уникнути проблем</h3>
+
+<p>Починаючи з ECMAScript 5, властивість джерела більше не повертає порожній рядок для порожніх регулярних виразів. Замість цього, рядок «(? :)» повертається. Крім того, лінія термінатори (such as "\n") врятувалися в даний час.</p>
+
+<pre class="brush: js">new RegExp().source; // "(?:)"
+
+new RegExp('\n').source === '\n';  // true до ES5
+new RegExp('\n').source === '\\n'; // true,починаючи з ES5
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікації</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарій</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3 </td>
+   <td>{{Spec2('Стандарт')}}</td>
+   <td>Первісне визначення. Реалізовано в JavaScript 1.2. JavaScript 1.5: є властивістю примірника {{jsxref("RegExp")}} а не {{jsxref("RegExp")}} об'єкта.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.10.7.1', 'RegExp.prototype.source')}}</td>
+   <td>{{Spec2('Стандарт')}}</td>
+   <td>Властивість source для порожніх регулярних виразів тепер повертає "(?:)" замість порожнього рядка. Визначення для відповідної поведінки було додано.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-regexp.prototype.source', 'RegExp.prototype.source')}}</td>
+   <td>{{Spec2('Стандарт')}}</td>
+   <td><code>Source зараз є властивістю доступу, а не власною властивістю даних.</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-regexp.prototype.source', 'RegExp.prototype.source')}}</td>
+   <td>{{Spec2('Кандидат в рекомендації')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особливість</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базова підтримка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>"(?:)" для порожніх регулярних виразів</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(38)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Запобігання(вирішення)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(38)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Прототип оцінювач властивості</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(41)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особливість</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базова підтримка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>"(?:)" для порожніх регулярних виразів</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(38)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Запобігання(вирішення)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(38)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Прототип оцінювач властивості</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(41)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("RegExp.prototype.flags")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/regexp/test/index.html b/files/uk/web/javascript/reference/global_objects/regexp/test/index.html
new file mode 100644
index 0000000000..19f6e0ad21
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/regexp/test/index.html
@@ -0,0 +1,151 @@
+---
+title: RegExp.prototype.test()
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/test
+tags:
+  - Регулярні Вирази
+  - Рекомендації
+  - метод
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/test
+---
+<div>{{JSRef}}</div>
+
+<p><code>Метод</code><strong><code> test()</code></strong> виконує пошук на збіг між регулярним виразом і заданим рядком. Повертає <code>true</code> або <code>false</code>.</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox"><code><var>regexObj</var>.test(<var>str</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>str</code></dt>
+ <dd>Рядок, що перевіряється регулярним виразом.</dd>
+</dl>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p><code>true</code> якщо є збіг між регулярним виразом та вказаним рядком; інакше, <code>false</code>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Використовуйте <code>test()</code> щоразу  коли ви хочете знати чи патерн знайдено у рядку (схоже до методу {{jsxref("String.prototype.search()")}}, різниця в тому, що test() повертає булеве значення, коли search() - індекс (якщо знайдено), інакше -1 (якщо не знайдено); якщо потрібно більше інформації (але виконання буде повільніше) використовуйте метод {{jsxref("RegExp.prototype.exec()", "exec()")}} (схожий до методу  {{jsxref("String.prototype.match()")}} ). Як і {{jsxref("RegExp.prototype.exec()", "exec()")}} (або в комбінації з ним), <code>test(), що</code> викликаний декілька разів на одному і тому ж глобальному екземплярі регулярного виразу, буде швидшим  ніж попередні виконування.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_test()">Використання <code>test()</code></h3>
+
+<p>Простий приклад, що перевіряє чи "hello" знаходиться на самому початку рядка , повертає булеве значення.</p>
+
+<pre class="brush: js">var str = 'hello world!';
+var result = /^hello/.test(str);
+console.log(result); // true
+</pre>
+
+<p>Наступний приклад виводить у лог сповіщення результату проходження тесту:</p>
+
+<pre class="brush: js">function testinput(re, str) {
+  var midstring;
+  if (re.test(str)) {
+    midstring = ' contains ';
+  } else {
+    midstring = ' does not contain ';
+  }
+  console.log(str + midstring + re.source);
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.10.6.3', 'RegExp.test')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-regexp.prototype.test', 'RegExp.test')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-regexp.prototype.test', 'RegExp.test')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_у_браузерах">Сумісність у браузерах</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Замітки_щодо_Gecko">Замітки щодо Gecko</h2>
+
+<p>До версії Gecko 8.0 {{geckoRelease("8.0")}}, <code>test()</code> було реалізовано невірно; коли він визивався без параметрів, то звірявся зі значенням попереднього вводу (властивістю <code>RegExp.input</code>), а не  з рядком <code>"undefined"</code>. Це виправлено; зараз <code>/undefined/.test()</code> вірно повертає значення <code>true</code>, а не error, як це було раніше.</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>Глава <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a> у <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a></li>
+ <li>{{jsxref("RegExp")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/set/index.html b/files/uk/web/javascript/reference/global_objects/set/index.html
new file mode 100644
index 0000000000..6fdd6fd9b2
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/set/index.html
@@ -0,0 +1,242 @@
+---
+title: Set
+slug: Web/JavaScript/Reference/Global_Objects/Set
+tags:
+  - set
+  - сет
+translation_of: Web/JavaScript/Reference/Global_Objects/Set
+---
+<div>{{JSRef}}</div>
+
+<div>Об'єкт <strong>Set</strong> дає можливість зберігати значення будь-якого типу, будь то примітивні значення чи посилання на об'єкт.</div>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-constructor.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">new Set([<em>iterable</em>]);</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>iterable</code></dt>
+ <dd>Якщо передається<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of"> об'єкт, що ітерується</a>, то всі його елементи будуть додані до нового <code>Set</code>. Якщо цей параметр не визначений або має значення null, тоді новий <code>Set</code> буде порожнім.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Новий об'єкт <code>Set</code>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Об'єкти <code>Set</code>  - це колекції унікальних значень. Ви можете перебирати елементи <code>Set</code> у порядку вставки. Одне значення в <code>Set</code> може зустрічатися лише один раз; воно є унікальним в колекції <code>Set</code>.</p>
+
+<h3 id="Еквівалентність_значення">Еквівалентність значення</h3>
+
+<p>Через те, що кожне значення в <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Set</span></font> має бути унікальним, еквівалентність значення буде перевірена. У попередній версії специфікації ECMAScript це не було базовано на такому самому алгоритмі, що використовує оператор ===. Конкретніше, для <code>Set</code> <code>+0</code> (що є суворо рівним <code>-0</code> ) та <code>-0</code> є різними значеннями. Проте, це було змінено у специфікації ECMAScript 2015. Дивіться більш детально про "Еквівалентність значень -0 і 0" у таблиці <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#Browser_compatibility">браузерної сумісності</a>.</p>
+
+<p>До того ж, <code>NaN</code> та <code>undefined</code> також можуть зберігатися в <code>Set</code>. <code>NaN</code> вважається тим самим, що і <code>NaN</code> (хоча, <code>NaN !== NaN</code> ).</p>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt><code>Set.length</code></dt>
+ <dd>Значення властивості <code>length</code> є 0.</dd>
+ <dt>{{jsxref("Set.@@species", "get Set[@@species]")}}</dt>
+ <dd>Функція-конструктор, що використовується для строрення derived об'єктів.</dd>
+ <dt>{{jsxref("Set.prototype")}}</dt>
+ <dd>Представляє прототип для конструктора <code>Set</code>. Дозволяє додавання властивостей до всіх <code>Set</code> об'єктів.</dd>
+</dl>
+
+<h2 id="Set_instances"><code>Set</code> instances</h2>
+
+<p>Усі <code>Set</code> сутності наслідуються від {{jsxref("Set.prototype")}}.</p>
+
+<h3 id="Властивості_2">Властивості</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Set/prototype','Properties')}}</p>
+
+<h3 id="Методи">Методи</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Set/prototype','Methods')}}</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_об'єкта_Set">Використання об'єкта  <code>Set</code></h3>
+
+<pre class="brush: js">var mySet = new Set();
+
+mySet.add(1); // Set { 1 }
+mySet.add(5); // Set { 1, 5 }
+mySet.add(5); // Set { 1, 5 }
+mySet.add('some text'); // Set { 1, 5, 'some text' }
+var o = {a: 1, b: 2};
+mySet.add(o);
+
+mySet.add({a: 1, b: 2}); // o має посилання на інший об'єкт, тому це ок
+
+mySet.has(1); // true
+mySet.has(3); // false, 3 не було додано в Set
+mySet.has(5);              // true
+mySet.has(Math.sqrt(25));  // true
+mySet.has('Some Text'.toLowerCase()); // true
+mySet.has(o); // true
+
+mySet.size; // 5
+
+mySet.delete(5); // видаляє 5 з set
+mySet.has(5);    // false, 5 було видалено
+
+mySet.size; // 4, ми щойно видалили одне значення
+console.log(mySet);// Set {1, "some text", Object {a: 1, b: 2}, Object {a: 1, b: 2}}</pre>
+
+<h3 id="Перебирання_Set">Перебирання Set</h3>
+
+<pre class="brush: js">// перебираємо елементи в set
+// виводить елементи у послідовності: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
+for (let item of mySet) console.log(item);
+
+// виводить елементи у послідовності: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
+for (let item of mySet.keys()) console.log(item);
+
+// виводить елементи у послідовності: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
+for (let item of mySet.values()) console.log(item);
+
+// виводить елементи у послідовності: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
+//(key та value тут мають одне й те саме значення)
+for (let [key, value] of mySet.entries()) console.log(key);
+
+// конвертує об'єкт Set в об'єкт Array за допомогою <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from">Array.from</a>
+var myArr = Array.from(mySet); // [1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}]
+
+// наступне також буде працювати, якщо буде запущено в HTML документі
+mySet.add(document.body);
+mySet.has(document.querySelector('body')); // true
+
+// конвертація між Set та Array
+mySet2 = new Set([1, 2, 3, 4]);
+mySet2.size; // 4
+[...mySet2]; // [1, 2, 3, 4]
+
+// Перетинання може симулюватися через
+var intersection = new Set([...set1].filter(x =&gt; set2.has(x)));
+
+// різниця може бути симульована через
+var difference = new Set([...set1].filter(x =&gt; !set2.has(x)));
+
+// Перебирання елементів Set за допомогою forEach
+mySet.forEach(function(value) {
+  console.log(value);
+});
+
+// 1
+// 2
+// 3
+// 4</pre>
+
+<h3 id="Імплементація_базових_операцій_set">Імплементація базових операцій set</h3>
+
+<pre class="brush: js">Set.prototype.isSuperset = function(subset) {
+    for (var elem of subset) {
+        if (!this.has(elem)) {
+            return false;
+        }
+    }
+    return true;
+}
+
+Set.prototype.union = function(setB) {
+    var union = new Set(this);
+    for (var elem of setB) {
+        union.add(elem);
+    }
+    return union;
+}
+
+Set.prototype.intersection = function(setB) {
+    var intersection = new Set();
+    for (var elem of setB) {
+        if (this.has(elem)) {
+            intersection.add(elem);
+        }
+    }
+    return intersection;
+}
+
+Set.prototype.difference = function(setB) {
+    var difference = new Set(this);
+    for (var elem of setB) {
+        difference.delete(elem);
+    }
+    return difference;
+}
+
+//Приклади
+var setA = new Set([1, 2, 3, 4]),
+    setB = new Set([2, 3]),
+    setC = new Set([3, 4, 5, 6]);
+
+setA.isSuperset(setB); // =&gt; true
+setA.union(setC); // =&gt; Set [1, 2, 3, 4, 5, 6]
+setA.intersection(setC); // =&gt; Set [3, 4]
+setA.difference(setC); // =&gt; Set [1, 2]
+
+</pre>
+
+<h3 id="Зв'язок_з_об'єктами_Array">Зв'язок з об'єктами <code>Array</code></h3>
+
+<pre class="brush: js">var myArray = ['value1', 'value2', 'value3'];
+
+// Використовуйте звичайний конструктор Set для трансформації Array у Set
+var mySet = new Set(myArray);
+
+mySet.has('value1'); // повертає true
+
+// Використовуйте оператор spread для трансформації Set у Array.
+console.log([...mySet]); // Виведе у точності такий самий Array як і myArray</pre>
+
+<h3 id="Зв'язок_зі_Strings">Зв'язок зі <code>Strings</code></h3>
+
+<pre class="brush: js">var text = 'India';
+
+var mySet = new Set(text);  // Set {'I', 'n', 'd', 'i', 'a'}
+mySet.size;  // 5
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set-objects', 'Set')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set-objects', 'Set')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set")}}</p>
+
+<h2 id="Дівіться_також">Дівіться також</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakSet")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/@@iterator/index.html b/files/uk/web/javascript/reference/global_objects/string/@@iterator/index.html
new file mode 100644
index 0000000000..22399ee081
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/@@iterator/index.html
@@ -0,0 +1,78 @@
+---
+title: 'String.prototype[@@iterator]()'
+slug: Web/JavaScript/Reference/Global_Objects/String/@@iterator
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - String
+  - Ітератор
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/String/@@iterator
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>[@@iterator]()</code></strong> повертає новий об'єкт <code>Iterator</code>, який перебирає коди символів рядкового значення, повертаючи код кожного символа у вигляді рядкового значення.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-iterator.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>[Symbol.iterator]</code></pre>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Новий об'єкт <code>Iterator</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_iterator">Використання <code>[@@iterator]()</code></h3>
+
+<pre class="brush:js">var str = 'A\uD835\uDC68';
+
+var strIter = str[Symbol.iterator]();
+
+console.log(strIter.next().value); // "A"
+console.log(strIter.next().value); // "\uD835\uDC68"
+</pre>
+
+<h3 id="Використання_iterator_з_for..of">Використання <code>[@@iterator]()</code> з <code>for..of</code></h3>
+
+<pre class="brush:js">var str = 'A\uD835\uDC68B\uD835\uDC69C\uD835\uDC6A';
+
+for (var v of str) {
+  console.log(v);
+}
+// "A"
+// "\uD835\uDC68"
+// "B"
+// "\uD835\uDC69"
+// "C"
+// "\uD835\uDC6A"
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype-@@iterator', 'String.prototype[@@iterator]()')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.@@iterator")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору">Протоколи перебору</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/anchor/index.html b/files/uk/web/javascript/reference/global_objects/string/anchor/index.html
new file mode 100644
index 0000000000..aa1424790a
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/anchor/index.html
@@ -0,0 +1,83 @@
+---
+title: String.prototype.anchor()
+slug: Web/JavaScript/Reference/Global_Objects/String/anchor
+tags:
+  - JavaScript
+  - String
+  - метод
+  - не рекомендований
+translation_of: Web/JavaScript/Reference/Global_Objects/String/anchor
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p>Метод <strong><code>anchor()</code></strong> створює рядок, який складається з початкового тегу <code>&lt;a name="..."&gt;</code>, далі якийсь текст, а за ним кінцевий тег <code>&lt;/a&gt;</code>.</p>
+
+<div class="blockIndicator warning">
+<p>Не використовуйте цей метод. Використовуйте замість нього <a href="/uk/docs/Web/API/Document_Object_Model">DOM API</a>. Також специфікація HTML більше не дозволяє елементу <a href="/uk/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a> мати атрибут <code>name</code>, тому цей метод навіть не створює коректну розмітку.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.anchor(<var>name</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Рядок, що відображає атрибут <code>name</code> тега, що буде створений.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Рядок, що складається з початкового тегу  <code>&lt;a name="<var>name</var>"&gt;</code>, далі текст <var>str</var>, і після нього кінцевий тег <code>&lt;/a&gt;</code>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Не використовуйте цей метод. Використовуйте замість нього <a href="/uk/docs/Web/API/Document_Object_Model">DOM API</a>. Також специфікація HTML більше не дозволяє елементу <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a> мати артибут <code>name</code>, тому цей метод навіть не створює коректну розмітку.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_anchor">Використання <code>anchor()</code></h3>
+
+<pre class="brush: js">var myString = 'Зміст';
+
+document.body.innerHTML = myString.anchor('contents_anchor');
+</pre>
+
+<p>створить наступний HTML:</p>
+
+<pre class="brush: html">&lt;a name="contents_anchor"&gt;Зміст&lt;/a&gt;
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.anchor', 'String.prototype.anchor')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<pre class="brush: html">if (!String.prototype.anchor)
+    String.prototype.anchor = function(x){
+        return '&lt;a name="' + x + '"&gt;' + this + '&lt;/a&gt;'
+    }
+</pre>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.anchor")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.link()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/big/index.html b/files/uk/web/javascript/reference/global_objects/string/big/index.html
new file mode 100644
index 0000000000..40f46db96d
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/big/index.html
@@ -0,0 +1,73 @@
+---
+title: String.prototype.big()
+slug: Web/JavaScript/Reference/Global_Objects/String/big
+tags:
+  - JavaScript
+  - String
+  - застарілий
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/String/big
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p>Метод <strong><code>big()</code></strong> створює HTML-елемент <a href="/uk/docs/Web/HTML/Element/big" title="Застарілий HTML-елемент Big (&lt;big>) відображає текст розміром шрифту на один рівень більшим за оточуючий текст (наприклад, medium перетворюється на large)"><code>&lt;big&gt;</code></a>, який відображає рядок великим шрифтом.</p>
+
+<div class="note">
+<p><strong>Примітка щодо використання:</strong> Елемент &lt;big&gt; був прибраний у <a href="/uk/docs/Web/Guide/HTML/HTML5">HTML5</a> та не має більше використовуватись. Замість нього веб-розробникам варто використовувати властивості <a href="/uk/docs/Web/CSS">CSS</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.big()</code></pre>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Рядок, що містить HTML-елемент <a href="/uk/docs/Web/HTML/Element/big" title="Застарілий HTML-елемент Big (&lt;big>) відображає текст розміром шрифту на один рівень більшим за оточуючий текст (наприклад, medium перетворюється на large)"><code>&lt;big&gt;</code></a>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>big()</code> вбудовує рядок у тег <code>&lt;big&gt;</code>: <code>"&lt;big&gt;str&lt;/big&gt;"</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_big">Використання <code>big()</code></h3>
+
+<p>Наступний приклад використовує рядкові методи, щоб змінити розмір рядка:</p>
+
+<pre class="brush: js">var worldString = 'Привіт';
+
+console.log(worldString.small());     // &lt;small&gt;Привіт&lt;/small&gt;
+console.log(worldString.big());       // &lt;big&gt;Привіт&lt;/big&gt;
+console.log(worldString.fontsize(7)); // &lt;fontsize=7&gt;Привіт&lt;/fontsize&gt;
+</pre>
+
+<p>З об'єктом <a href="/uk/docs/Web/API/HTMLElement/style" title="Властивість HTMLElement.style використовується для отримання, а також присвоєння внутрішнього стилю елемента. При отриманні вона вертає об'єкт CSSStyleDeclaration, який містить список усіх властивостей стилів для цього елемента, а також значення, присвоєні атрибутам, які визначені у внутрішньому атрибуті елемента style."><code>element.style</code></a> ви можете отримати атрибут елемента <code>style</code> та маніпулювати ним в загальному стилі, наприклад:</p>
+
+<pre class="brush: js">document.getElementById('yourElemId').style.fontSize = '2em';
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.big', 'String.prototype.big')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.big")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.fontsize()")}}</li>
+ <li>{{jsxref("String.prototype.small()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/blink/index.html b/files/uk/web/javascript/reference/global_objects/string/blink/index.html
new file mode 100644
index 0000000000..2c562cc2ca
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/blink/index.html
@@ -0,0 +1,70 @@
+---
+title: String.prototype.blink()
+slug: Web/JavaScript/Reference/Global_Objects/String/blink
+tags:
+  - JavaScript
+  - String
+  - метод
+  - не рекомендований
+  - рядок
+translation_of: Web/JavaScript/Reference/Global_Objects/String/blink
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p>Метод <strong><code>blink()</code></strong> створює HTML-елемент <a href="/uk/docs/Web/HTML/Element/blink" title="HTML-елемент Blink (&lt;blink>) - це нестандартний елемент, який відображає текст таким, що повільно блимає."><code>&lt;blink&gt;</code></a>, який виводить текст, що блимає.</p>
+
+<div class="warning">
+<p><strong>Застереження:</strong> Блимаючий текст не схвалюється у кількох стандартах доступності. Сам елемент <code>&lt;blink&gt;</code> нестандартний та не рекомендований!</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.blink()</code></pre>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Рядок, що містить HTML-елемент <a href="/uk/docs/Web/HTML/Element/blink" title="HTML-елемент Blink (&lt;blink>) - це нестандартний елемент, який відображає текст таким, що повільно блимає."><code>&lt;blink&gt;</code></a>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>blink()</code> вбудовує рядок у тег <code>&lt;blink&gt;</code>: <code>"&lt;blink&gt;str&lt;/blink&gt;"</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_blink">Використання <code>blink()</code></h3>
+
+<p>Наступний приклад використовує рядкові методи, щоб змінити форматування рядка:</p>
+
+<pre class="brush: js">var worldString = 'Привіт';
+
+console.log(worldString.blink());   // &lt;blink&gt;Привіт&lt;/blink&gt;
+console.log(worldString.bold());    // &lt;b&gt;Привіт&lt;/b&gt;
+console.log(worldString.italics()); // &lt;i&gt;Привіт&lt;/i&gt;
+console.log(worldString.strike());  // &lt;strike&gt;Привіт&lt;/strike&gt;</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.blink', 'String.prototype.blink')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.blink")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.bold()")}}</li>
+ <li>{{jsxref("String.prototype.italics()")}}</li>
+ <li>{{jsxref("String.prototype.strike()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/bold/index.html b/files/uk/web/javascript/reference/global_objects/string/bold/index.html
new file mode 100644
index 0000000000..1f0ddd661d
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/bold/index.html
@@ -0,0 +1,66 @@
+---
+title: String.prototype.bold()
+slug: Web/JavaScript/Reference/Global_Objects/String/bold
+tags:
+  - JavaScript
+  - String
+  - метод
+  - не рекомендований
+  - рядок
+translation_of: Web/JavaScript/Reference/Global_Objects/String/bold
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p>Метод <strong><code>bold()</code></strong> створює HTML-елемент <a href="/uk/docs/Web/HTML/Element/b" title="HTML-елемент Bring Attention To (&lt;b>) використовується для привертання уваги читача до вмісту елемента, який в іншому випадку не набуде особливого значення."><code>&lt;b&gt;</code></a>, який відображає рядок жирним шрифтом.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.bold()</code></pre>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Рядок, що містить HTML-елемент <a href="/uk/docs/Web/HTML/Element/b" title="HTML-елемент Bring Attention To (&lt;b>) використовується для привертання уваги читача до вмісту елемента, який в іншому випадку не набуде особливого значення."><code>&lt;b&gt;</code></a>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>bold()</code> вбудовує рядок у тег <code>&lt;b&gt;</code> : <code>"&lt;b&gt;str&lt;/b&gt;"</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_bold">Використання <code>bold()</code></h3>
+
+<p>Наступний приклад використовує рядкові методи, щоб змінити форматування рядка:</p>
+
+<pre class="brush: js">var worldString = 'Привіт';
+
+console.log(worldString.blink());   // &lt;blink&gt;Привіт&lt;/blink&gt;
+console.log(worldString.bold());    // &lt;b&gt;Привіт&lt;/b&gt;
+console.log(worldString.italics()); // &lt;i&gt;Привіт&lt;/i&gt;
+console.log(worldString.strike());  // &lt;strike&gt;Привіт&lt;/strike&gt;</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.bold', 'String.prototype.bold')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.bold")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.blink()")}}</li>
+ <li>{{jsxref("String.prototype.italics()")}}</li>
+ <li>{{jsxref("String.prototype.strike()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/charat/index.html b/files/uk/web/javascript/reference/global_objects/string/charat/index.html
new file mode 100644
index 0000000000..004400895c
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/charat/index.html
@@ -0,0 +1,316 @@
+---
+title: String.prototype.charAt()
+slug: Web/JavaScript/Reference/Global_Objects/String/charAt
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - String
+  - Довідка
+translation_of: Web/JavaScript/Reference/Global_Objects/String/charAt
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Метод <strong><code>charAt()</code></strong> створює і вертає підрядок, що міститиме лише один символ (кодова одиниця UTF-16), розташований у рядку із зазначеним зсувом.</span></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>str</em>.charAt(<em>index</em>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>index</code></dt>
+ <dd>Індекс символа у рядку, ціле число від <code>0</code> до <code>str.length - 1</code>. Якщо не зазначено (метод викликано без аргументів), метод повертає перший символ рядка.</dd>
+</dl>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>Підрядок з одного символа (одна кодова одиниця UTF-16) отриманого за вказаним індексом, або порожній рядок, якщо <code>index</code> вказує за межі рядка (менше <code>0</code> чи понад <code>str.length - 1</code>).</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Кожен символ рядка має індекс, що зростає зліва направо. Лік починається від нуля, тож перший символ має індекс <code>0</code>, а останній — <code>str.length - 1</code>. Якщо зазначено індекс, що за ці межі виходить, метод <code>chartAt()</code> вертає порожній рядок.</p>
+
+<p>Якщо індекс не зазначено для метода <code>charAt()</code>, буде задіяно типове значення <code>0</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Виведення_різних_символів_рядка">Виведення різних символів рядка</h3>
+
+<p>Цей приклад дістає та виводить до консолі різні символи рядка <code>«Хай йому грець»</code>:</p>
+
+<pre class="brush: js">var str = 'Хай йому грець';
+
+// Індекс не зазначено, буде неявно задіяно значення 0
+console.log(str.charAt());    // виводить "Х"
+
+console.log(str.charAt(0));   // виводить "Х"
+console.log(str.charAt(1));   // виводить "а"
+console.log(str.charAt(2));   // виводить "й"
+
+console.log(str.charAt(-1));  // виводить ""
+console.log(str.charAt(99));  // виводить ""
+</pre>
+
+<h3 id="Отримання_цілого_символа">Отримання цілого символа</h3>
+
+<p>Позаяк деякі символи в UTF-16 подаються двома кодовими одиницями, слід зважати на те, що метод <code>charAt()</code> дістає їх з рядка нарізно, а отже задля отримання цілого символа доведеться їх об'єднати.</p>
+
+<p>Наведений нижче код призначено для послідовної обробки рядків, що можуть містити такі складені символи (не належать до <abbr title="Basic Multilingual Plane (BMP)">Основної Багатомовної Площини (ОБП)</abbr> Unicode):</p>
+
+<pre class="brush: js">// Символи поза ОБП можна було б вжити безпосередньо
+var str = 'A \uD87E\uDC04 Z';
+
+for (var i = 0, chr; i &lt; str.length; i++) {
+  // Просто додайте цю перевірку на початку кожного циклу з перебору символів
+  // і завжди матимете складені символи повністю, а не половини складеного
+  // символа нарізно.
+  if ((chr = getWholeChar(str, i)) === false) {
+    continue;
+  }
+
+  console.log(chr);
+}
+
+function getWholeChar(str, i) {
+  var code = str.charCodeAt(i);
+
+  // Значення зсуву «i» за межами рядка
+  if (Number.isNaN(code)) {
+    return '';
+  }
+  if (code &lt; 0xD800 || code &gt; 0xDFFF) {
+    return str.charAt(i);
+  }
+
+  // Старша половина (можна замінити друге значення на 0xDB7F й тлумачити
+  // «старші половини приватного вжитку» як окремі символи).
+  if (0xD800 &lt;= code &amp;&amp; code &lt;= 0xDBFF) {
+    if (str.length &lt;= (i + 1)) {
+      throw 'High surrogate without following low surrogate';
+    }
+
+    var next = str.charCodeAt(i + 1);
+    if (0xDC00 &gt; next || next &gt; 0xDFFF) {
+      throw 'High surrogate without following low surrogate';
+    }
+    return str.charAt(i) + str.charAt(i + 1);
+  }
+
+  // Молодша половина (0xDC00 &lt;= code &amp;&amp; code &lt;= 0xDFFF)
+  if (i === 0) {
+    throw 'Low surrogate without preceding high surrogate';
+  }
+  var prev = str.charCodeAt(i - 1);
+
+  // Можна замінити друге значення на 0xDB7F й тлумачити
+  // «старші половини приватного вжитку» як окремі символи.
+  if (0xD800 &gt; prev || prev &gt; 0xDBFF) {
+    throw 'Low surrogate without preceding high surrogate';
+  }
+
+  // Молодшу половину було оброблено разом із старшою, тож тепер
+  // ми її пропускаємо.
+  return false;
+}
+</pre>
+
+<p>У середовищі ECMAScript 2016, що підтримує присвоєння {{jsxref("Operators/Деструктуризація", "деструктурованням")}}, можна трохи поліпшити легкочитність коду, повертаючи з функції також оновлене (якщо останній символ був складений) значення зсуву:</p>
+
+<pre class="brush: js">// Символи поза ОБП можна було б вжити безпосередньо
+var str = 'A\uD87E\uDC04Z';
+for (var i = 0, chr; i &lt; str.length; i++) {
+  [chr, i] = getWholeCharAndI(str, i);
+  // Просто додайте цей виклик на початку кожного циклу з перебору символів
+  // і завжди матимете складені символи повністю, а не половини складеного
+  // символа нарізно.
+  // Значення «i» буде оновлено, якщо метод натрапить на складений символ.
+
+  console.log(chr);
+}
+
+function getWholeCharAndI(str, i) {
+  var code = str.charCodeAt(i);
+
+  // Значення зсуву «i» за межами рядка
+  if (Number.isNaN(code)) {
+    return ['', i];
+  }
+  if (code &lt; 0xD800 || code &gt; 0xDFFF) {
+   / / Звичайний символ, просто лишаємо все як є.
+    return [str.charAt(i), i];
+  }
+
+  // Старша половина (можна замінити друге значення на 0xDB7F й тлумачити
+  // «старші половини приватного вжитку» як окремі символи).
+  if (0xD800 &lt;= code &amp;&amp; code &lt;= 0xDBFF) {
+    if (str.length &lt;= (i + 1)) {
+      throw 'High surrogate without following low surrogate';
+    }
+    var next = str.charCodeAt(i + 1);
+    if (0xDC00 &gt; next || next &gt; 0xDFFF) {
+      throw 'High surrogate without following low surrogate';
+    }
+
+    // Зібрати складений символ докупи й повернути збільшений зсув
+    return [str.charAt(i) + str.charAt(i + 1), i + 1];
+  }
+
+  // Low surrogate (0xDC00 &lt;= code &amp;&amp; code &lt;= 0xDFFF)
+  if (i === 0) {
+    throw 'Low surrogate without preceding high surrogate';
+  }
+  var prev = str.charCodeAt(i - 1);
+
+  // Можна замінити друге значення на 0xDB7F й тлумачити
+  // «старші половини приватного вжитку» як окремі символи.
+  if (0xD800 &gt; prev || prev &gt; 0xDBFF) {
+    throw 'Low surrogate without preceding high surrogate';
+  }
+
+  // Повернути натомість наступний символ й повернути збільшений зсув
+  return [str.charAt(i + 1), i + 1];
+}
+</pre>
+
+<p>Також можна навести більш витончене рішення, хоча дещо менш гнучке:</p>
+
+<pre class="brush: js">// Просто перебираємо символи рядка за допомогою forEachChar()
+forEachChar('A\uD87E\uDC04Z', function(c) {
+  console.log(c);
+});
+
+function forEachChar(string, predicate) {
+  for (var i = 0; i &lt; string.length; i++) {
+    var code = string.charCodeAt(i);
+    var value;
+
+    // Звичайний символ, просто лишаємо як є.
+    if (code &lt; 0xD800 || code &gt; 0xDFFF) {
+      value = string.charAt(i);
+    } else {
+      // Старша половина (можна замінити друге значення на 0xDB7F й тлумачити
+      // «старші половини приватного вжитку» як окремі символи).
+      if (0xD800 &lt;= code &amp;&amp; code &lt;= 0xDBFF) {
+        if (string.length &lt;= (i + 1)) {
+          throw 'High surrogate without following low surrogate';
+        }
+
+        var next = string.charCodeAt(i + 1);
+        if (0xDC00 &gt; next || next &gt; 0xDFFF) {
+          throw 'High surrogate without following low surrogate';
+        }
+
+        value = string.charAt(i) + string.charAt(i + 1);
+        i++;
+      } else {
+        // Молодша половина (0xDC00 &lt;= code &amp;&amp; code &lt;= 0xDFFF)
+        throw 'Low surrogate without preceding high surrogate';
+      }
+    }
+
+    // Перебір можна перервати, повернувши з функції-присудка значення false
+    if (false === predicate.call(string, value)) {
+      return;
+    }
+  }
+}
+</pre>
+
+<h3 id="Виправлений_charAt()_з_урахуванням_складених_символів">Виправлений <code>charAt()</code> з урахуванням складених символів</h3>
+
+<p>Приклад нижче наводить функцію <code>fixedCharAt()</code>, яка не лише злучає половинки складених символів, а ще й змінює індексацію символів таким чином, що <code>index</code> позначає порядковий номер (лік від нуля, як завжди) не кодової одиниці (як для звичайного <code>charAt()</code>), а саме повного символа.</p>
+
+<p>Втім, слід зважати, що це рішення є вкрай неоптимальним, якщо користувати його для перебору всього рядка:</p>
+
+<pre class="brush: js">function fixedCharAt(string, index) {
+  var isExpectingLowSurrogate = false;
+  var charIndex = 0;
+  var i = 0;
+
+  // За межами рядка.
+  if (index &lt; 0 || index &gt;= string.length) {
+    return '';
+  }
+
+  while (i &lt; string.length &amp;&amp; charIndex &lt; index) {
+    if (isHighSurrogateAt(string, i) &amp;&amp; isLowSurrogateAt(string, i + 1)) {
+      i++;
+    }
+
+    i++;
+    charIndex++;
+  }
+
+  if (i &lt; string.length) {
+    if (isHighSurrogateAt(string, i) &amp;&amp; isLowSurrogateAt(string, i + 1)) {
+      return string.charAt(i) + string.charAt(i + 1);
+    } else {
+      return string.charAt(i);
+    }
+  }
+
+  return '';
+}
+
+function isHighSurrogateAt(string, index) {
+  var code = string.charCodeAt(index);
+  return 0xD800 &lt;= code &amp;&amp; code &lt;= 0xDBFF;
+}
+
+function isLowSurrogateAt(string, index) {
+  var code = string.charCodeAt(index);
+  return 0xDC00 &lt;= code &amp;&amp; code &lt;= 0xDFFF;
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкова виознака.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.4', 'String.prototype.charAt')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.charat', 'String.prototype.charAt')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.charat', 'String.prototype.charAt')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.String.charAt")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("String.prototype.charCodeAt()")}}</li>
+ <li>{{jsxref("String.prototype.codePointAt()")}}</li>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("String.fromCodePoint()")}}</li>
+ <li><a href="https://mathiasbynens.be/notes/javascript-unicode">Негаразди з Unicode у JavaScript — Mathias Bynens</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/charcodeat/index.html b/files/uk/web/javascript/reference/global_objects/string/charcodeat/index.html
new file mode 100644
index 0000000000..3ed3a4c450
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/charcodeat/index.html
@@ -0,0 +1,161 @@
+---
+title: String.prototype.charCodeAt()
+slug: Web/JavaScript/Reference/Global_Objects/String/charCodeAt
+tags:
+  - JavaScript
+  - String
+  - Unicode
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/String/charCodeAt
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Метод <strong><code>charCodeAt()</code></strong> вертає ціле число в діапазоні між <code>0</code> та <code>65535</code>, що відображає кодову одиницю UTF-16 за наданим індексом.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-charcodeat.html", "shorter")}}</div>
+
+
+
+<p>Кодова одиниця UTF-16 співпадає з кодом символа Юнікоду для кодів символів, які можуть бути представлені єдиною кодовою одиницею UTF-16. Якщо код символа Юнікоду не може бути представлений єдиною кодовою одиницею UTF-16 (бо його значення більше за <code>0xFFFF</code>), тоді повернена кодова одиниця буде <em>першою частиною сурогатної пари </em>для коду символа. Якщо вам потрібен весь код символа, використовуйте {{jsxref("Global_Objects/String/codePointAt", "codePointAt()")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.charCodeAt(<var>index</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>index</var></code></dt>
+ <dd>Ціле число, що більше або дорівнює <code>0</code> та менше за довжину рядка. Якщо <code><var>index</var></code> не є числом, він за замовчуванням прирівнюється до <code>0</code>.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Число, що відображає значення кодової одиниці UTF-16 для символа за наданим індексом <code><var>index</var></code>. Якщо <code><var>index</var></code> знаходиться за межами діапазону, <code>charCodeAt()</code> повертає {{jsxref("Global_Objects/NaN", "NaN")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Коди символів Юнікоду знаходяться в діапазоні від <code>0</code> до <code>1114111</code> <code>(0x10FFFF</code>). Перші 128 кодів символів Юнікоду повністю співпадають з кодуванням символів ASCII. (Інформацію щодо Юнікоду дивіться у <a href="/uk/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode">Посібнику JavaScript</a>.)</p>
+
+<div class="blockIndicator note">
+<p><strong>Заувага:</strong> <code>charCodeAt()</code> завжди поверне значення, менше за <code>65536</code>. Тому що більші коди символів відображаються <em>парою</em> (з меншим значенням) "сурогатних" псевдосимволів, що складають реальний символ.</p>
+
+<p>Тому, щоб дослідити (чи відтворити) повний символ для значень окремих символів від <code>65536</code> та більше, для таких символів необхідно отримувати не лише <code>charCodeAt(<var>i</var>)</code>, але також <code>charCodeAt(<var>i</var>+1)</code> (ніби маніпулюючи рядком з двох літер), або використовувати замість цього <code>codePointAt(<var>i</var>)</code>. Дивіться приклади 2 та 3 (нижче).</p>
+</div>
+
+<p><code>charCodeAt()</code> повертає {{jsxref("Global_Objects/NaN", "NaN")}}, якщо наданий індекс менший за <code>0</code>, або якщо він дорівнює чи перевищує значення довжини рядка.</p>
+
+<p>Зворотня сумісність: У історичних версіях (наприклад, JavaScript 1.2) метод <code>charCodeAt()</code> вертає число, що вказує значення набору символів ISO-Latin-1 для символа за наданим індексом. Набір символів ISO-Latin-1 знаходиться в діапазоні від <code>0</code> до <code>255</code>. Перші <code>0</code>-<code>127</code> повністю співпадають з набором символів ASCII.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_charCodeAt">Використання <code>charCodeAt()</code></h3>
+
+<p>Наступний приклад вертає <code>65</code>, значення Юнікоду для A.</p>
+
+<pre class="brush: js">'ABC'.charCodeAt(0)  // вертає 65
+</pre>
+
+<h3 id="Виправлення_charCodeAt_для_обробки_символів_не_базової_багатомовної_площини_якщо_їхня_наявність_раніше_у_рядку_невідома">Виправлення <code>charCodeAt()</code> для обробки символів не базової багатомовної площини, якщо їхня наявність раніше у рядку невідома</h3>
+
+<p>Ця версія може використовуватись для циклів та подібного, коли невідомо, чи були присутні символи не з ББП до вказаної позиції.</p>
+
+<pre class="brush: js">function fixedCharCodeAt(str, idx) {
+  // напр. fixedCharCodeAt('\uD800\uDC00', 0); // 65536
+  // напр. fixedCharCodeAt('\uD800\uDC00', 1); // false
+  idx = idx || 0;
+  var code = str.charCodeAt(idx);
+  var hi, low;
+
+  // Високий сурогат (може міняти останнє шістнадцяткове значення на 0xDB7F
+  // для обробки високих приватних сурогатів
+  // як єдиних символів)
+  if (0xD800 &lt;= code &amp;&amp; code &lt;= 0xDBFF) {
+    hi = code;
+    low = str.charCodeAt(idx + 1);
+    if (isNaN(low)) {
+      throw 'Високий сурогат без наступного ' +
+        'низького сурогату у fixedCharCodeAt()';
+    }
+    return (
+      (hi - 0xD800) * 0x400) +
+      (low - 0xDC00) + 0x10000;
+  }
+  if (0xDC00 &lt;= code &amp;&amp; code &lt;= 0xDFFF) { // Низький сурогат
+    // Ми вертаємо false, щоб дозволити циклам пропустити
+    // цю ітерацію, бо мали вже обробити
+    // високий сурогат вище у попередній ітерації
+    return false;
+    // hi = str.charCodeAt(idx - 1);
+    // low = code;
+    // return ((hi - 0xD800) * 0x400) +
+    //   (low - 0xDC00) + 0x10000;
+  }
+  return code;
+}
+</pre>
+
+<h3 id="Виправлення_charCodeAt_для_обробки_символів_не_базової_багатомовної_площини_якщо_їхня_наявність_раніше_у_рядку_відома">Виправлення <code>charCodeAt()</code> для обробки символів не базової багатомовної площини, якщо їхня наявність раніше у рядку відома</h3>
+
+<pre class="brush: js">function knownCharCodeAt(str, idx) {
+  str += '';
+  var code,
+      end = str.length;
+
+  var surrogatePairs = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
+  while ((surrogatePairs.exec(str)) != null) {
+    var li = surrogatePairs.lastIndex;
+    if (li - 2 &lt; idx) {
+      idx++;
+    }
+    else {
+      break;
+    }
+  }
+
+  if (idx &gt;= end || idx &lt; 0) {
+    return NaN;
+  }
+
+  code = str.charCodeAt(idx);
+
+  var hi, low;
+  if (0xD800 &lt;= code &amp;&amp; code &lt;= 0xDBFF) {
+    hi = code;
+    low = str.charCodeAt(idx + 1);
+    // Пройти на один далі, оскільки один з "символів"
+    // є частиною сурогатної пари
+    return ((hi - 0xD800) * 0x400) +
+      (low - 0xDC00) + 0x10000;
+  }
+  return code;
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.charcodeat', 'String.prototype.charCodeAt')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.charCodeAt")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.fromCharCode()")}}</li>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.fromCodePoint()")}}</li>
+ <li>{{jsxref("String.prototype.codePointAt()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/codepointat/index.html b/files/uk/web/javascript/reference/global_objects/string/codepointat/index.html
new file mode 100644
index 0000000000..0a917f5885
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/codepointat/index.html
@@ -0,0 +1,142 @@
+---
+title: String.prototype.codePointAt()
+slug: Web/JavaScript/Reference/Global_Objects/String/codePointAt
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - String
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/String/codePointAt
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>codePointAt()</code></strong> вертає невід'ємне ціле число, яке є значенням коду символу Юнікоду.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-codepointat.html","shorter")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.codePointAt(<var>pos</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>pos</var></code></dt>
+ <dd>Позиція елемента у <code><var>str</var></code><var>,</var> код символа з якої треба повернути.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Число, що відображає значення коду символу з наданої позиції <code><var>pos</var></code>. Якщо на позиції <code>pos</code> немає елемента, вертається {{jsxref("undefined")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо на вказаній позиції немає елемента, повертається {{jsxref("undefined")}}. Якщо на позиції <code><var>pos</var></code> не починається сурогатна пара UTF-16, то повертається кодова одиниця позиції <code><var>pos</var></code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_codePointAt">Використання <code>codePointAt()</code></h3>
+
+<pre class="brush: js">'ABC'.codePointAt(1)           // 66
+'\uD800\uDC00'.codePointAt(0)  // 65536
+
+'XYZ'.codePointAt(42)          // undefined
+</pre>
+
+<h3 id="Цикл_з_codePointAt">Цикл з <code>codePointAt()</code></h3>
+
+<pre class="brush: js"><code class="md-code md-lang-javascript"><span class="md-code-keyword">for</span> (<span class="md-code-keyword">let</span> codePoint of <span class="md-code-string">'\ud83d\udc0e\ud83d\udc71\u2764'</span>) {
+   <span class="md-code-built_in">console</span>.log(codePoint<mark class="md-mark md-code-mark">.codePointAt(<span class="md-code-number">0</span>).toString(<span class="md-code-number">16</span>)</mark>)
+}
+// <span class="md-code-comment">'1f40e', '1f471', '2764</span></code>'<code class="md-code md-lang-javascript"><span class="md-code-comment"> </span></code>
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Наступний код додає у рядки функцію <code>codePointAt()</code> згідно специфікації ECMAScript 2015 для переглядачів без вбудованої підтримки.</p>
+
+<pre class="brush: js">/*! https://mths.be/codepointat v0.2.0 автор @mathias */
+if (!String.prototype.codePointAt) {
+  (function() {
+    'use strict'; // необхідно для підтримки `apply`/`call` з `undefined`/`null`
+    var defineProperty = (function() {
+     // IE 8 підтримує `Object.defineProperty` лише на DOM-елементах
+      try {
+        var object = {};
+        var $defineProperty = Object.defineProperty;
+        var result = $defineProperty(object, object, object) &amp;&amp; $defineProperty;
+      } catch(error) {}
+      return result;
+    }());
+    var codePointAt = function(position) {
+      if (this == null) {
+        throw TypeError();
+      }
+      var string = String(this);
+      var size = string.length;
+      // `ToInteger`
+      var index = position ? Number(position) : 0;
+      if (index != index) { // краще `isNaN`
+        index = 0;
+      }
+      // Врахування індексів за межами існуючих значень:
+      if (index &lt; 0 || index &gt;= size) {
+        return undefined;
+      }
+      // Отримати першу кодову одиницю
+      var first = string.charCodeAt(index);
+      var second;
+      if ( // перевірити, чи вона є початком сурогатної пари
+        first &gt;= 0xD800 &amp;&amp; first &lt;= 0xDBFF &amp;&amp; // високий сурогат
+        size &gt; index + 1 // існує наступна кодова одиниця
+      ) {
+        second = string.charCodeAt(index + 1);
+        if (second &gt;= 0xDC00 &amp;&amp; second &lt;= 0xDFFF) { // низький сурогат
+          // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
+          return (first - 0xD800) * 0x400 + second - 0xDC00 + 0x10000;
+        }
+      }
+      return first;
+    };
+    if (defineProperty) {
+      defineProperty(String.prototype, 'codePointAt', {
+        'value': codePointAt,
+        'configurable': true,
+        'writable': true
+      });
+    } else {
+      String.prototype.codePointAt = codePointAt;
+    }
+  }());
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.codepointat', 'String.prototype.codePointAt')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.codePointAt")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.fromCodePoint()")}}</li>
+ <li>{{jsxref("String.fromCharCode()")}}</li>
+ <li>{{jsxref("String.prototype.charCodeAt()")}}</li>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/concat/index.html b/files/uk/web/javascript/reference/global_objects/string/concat/index.html
new file mode 100644
index 0000000000..4d3b67b58d
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/concat/index.html
@@ -0,0 +1,89 @@
+---
+title: String.prototype.concat()
+slug: Web/JavaScript/Reference/Global_Objects/String/concat
+tags:
+  - JavaScript
+  - String
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/String/concat
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Метод <strong><code>concat()</code></strong> об'єднує рядкові аргументи з рядком, що викликав метод, та повертає новий рядок.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-concat.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>str</var>.concat(<var>str2</var> [, ...<var>strN</var>])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>str2</var> [, ...<var>strN</var>]</code></dt>
+ <dd>Рядки, які треба об'єднати з <code><var>str</var></code>.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Новий рядок, що містить поєднаний текст з наданих рядків.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Функція <code>concat()</code> об'єднує рядкові аргументи з рядком, що викликав функцію, та повертає новий рядок. Зміни у початковому рядку чи у поверненому рядку не впливають один на одного.</p>
+
+<p>Якщо аргументи не належать до рядкового типу, вони перетворюються на рядкові значення перед об'єднанням.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_concat">Використання <code>concat()</code></h3>
+
+<p>Наступний приклад об'єднує рядки у новий рядок.</p>
+
+<pre class="brush: js">let hello = 'Привіт, '
+console.log(hello.concat('Кевіне', '. Гарного дня.'))
+// Привіт, Кевіне. Гарного дня.
+
+let greetList = ['Привіт', ' ', 'Віка', '!']
+"".concat(...greetList)  // "Привіт, Віка!"
+
+"".concat({})    // [object Object]
+"".concat([])    // ""
+"".concat(null)  // "null"
+"".concat(true)  // "true"
+"".concat(4, 5)  // "45"
+
+</pre>
+
+<h2 id="Продуктивність">Продуктивність</h2>
+
+<p>Настійно рекомендується використовувати {{jsxref("Operators/Оператори_присвоєння", "оператори присвоєння", "", 1)}} (<code>+</code>, <code>+=</code>) замість методу <code>concat()</code>. <br>
+ Згідно з цим <a href="https://jsperf.com/concat-vs-plus-vs-join">тестуванням продуктивності</a>, {{jsxref("Operators/Оператори_присвоєння", "оператори присвоєння", "", 1)}} в декілька раз швидші.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.concat', 'String.prototype.concat')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.concat")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+ <li>{{jsxref("Operators/Оператори_присвоєння", "Оператори присвоєння", "", 1)}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/endswith/index.html b/files/uk/web/javascript/reference/global_objects/string/endswith/index.html
new file mode 100644
index 0000000000..e387abf56c
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/endswith/index.html
@@ -0,0 +1,90 @@
+---
+title: String.prototype.endsWith()
+slug: Web/JavaScript/Reference/Global_Objects/String/endsWith
+tags:
+  - JavaScript
+  - String
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/String/endsWith
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Метод <strong><code>endsWith()</code></strong> визначає, чи завершується рядок символами вказаного рядка, повертаючи, відповідно, <code>true</code> чи <code>false</code>.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-endswith.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>str</var>.endsWith(<var>searchString</var>[, <var>length</var>])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>searchString</var></code></dt>
+ <dd>Символи, які шукатимуться в кінці рядка <code><var>str</var></code>.</dd>
+ <dt><code><var>length</var></code> {{optional_inline}}</dt>
+ <dd>Якщо наданий, використовується як довжина <code><var>str</var></code>. За замовчуванням дорівнює <code><var>str</var>.length</code>.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p><strong><code>true</code></strong>, якщо надані символи знайдені в кінці рядка; інакше, <strong><code>false</code></strong>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Цей метод дозволяє визначити, чи завершується рядок іншим рядком. Цей метод чутливий до регістру.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_endsWith">Використання <code>endsWith()</code></h3>
+
+<pre class="brush: js">let str = 'Питання в тому: бути чи не бути.'
+
+console.log(str.endsWith('бути.'))  // true
+console.log(str.endsWith('Питання'))      // false
+console.log(str.endsWith('Питання', 7))  // true
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Цей метод був доданий до специфікації ECMAScript 6 та може поки не бути доступним в усіх реалізаціях JavaScript. Однак, ви можете створити поліфіл <code>String.prototype.endsWith()</code> за допомогою наступного коду:</p>
+
+<pre class="brush: js">if (!String.prototype.endsWith) {
+	String.prototype.endsWith = function(search, this_len) {
+		if (this_len === undefined || this_len &gt; this.length) {
+			this_len = this.length;
+		}
+		return this.substring(this_len - search.length, this_len) === search;
+	};
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.endsWith")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.startsWith()")}}</li>
+ <li>{{jsxref("String.prototype.includes()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/fixed/index.html b/files/uk/web/javascript/reference/global_objects/string/fixed/index.html
new file mode 100644
index 0000000000..c13fbaa65f
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/fixed/index.html
@@ -0,0 +1,62 @@
+---
+title: String.prototype.fixed()
+slug: Web/JavaScript/Reference/Global_Objects/String/fixed
+tags:
+  - JavaScript
+  - String
+  - метод
+  - не рекомендований
+translation_of: Web/JavaScript/Reference/Global_Objects/String/fixed
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p>Метод <strong><code>fixed()</code></strong> створює HTML-елемент <a href="/uk/docs/Web/HTML/Element/tt" title="Застарілий HTML-елемент Teletype Text (&lt;tt>) створює внутрішній текст, який відображається за допомогою моноширинного обличчя шрифта користувацького агента."><code>&lt;tt&gt;</code></a>, який відображає рядок моноширинним шрифтом.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.fixed()</code></pre>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Рядок, що відображає HTML-елемент <a href="/uk/docs/Web/HTML/Element/tt" title="Застарілий HTML-елемент Teletype Text (&lt;tt>) створює внутрішній текст, який відображається за допомогою моноширинного обличчя шрифта користувацького агента."><code>&lt;tt&gt;</code></a>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>fixed()</code> вбудовує рядок у тег <code>&lt;tt&gt;</code>: <code>"&lt;tt&gt;str&lt;/tt&gt;"</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_fixed">Використання <code>fixed()</code></h3>
+
+<p>Наступний приклад використовує метод <code>fixed</code>, щоб змінити форматування рядка:</p>
+
+<pre class="brush: js">var worldString = 'Привіт';
+console.log(worldString.fixed()); // "&lt;tt&gt;Привіт&lt;/tt&gt;"
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.fixed', 'String.prototype.fixed')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.fixed")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.bold()")}}</li>
+ <li>{{jsxref("String.prototype.italics()")}}</li>
+ <li>{{jsxref("String.prototype.strike()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/fontcolor/index.html b/files/uk/web/javascript/reference/global_objects/string/fontcolor/index.html
new file mode 100644
index 0000000000..5e1a68492b
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/fontcolor/index.html
@@ -0,0 +1,81 @@
+---
+title: String.prototype.fontcolor()
+slug: Web/JavaScript/Reference/Global_Objects/String/fontcolor
+tags:
+  - JavaScript
+  - String
+  - метод
+  - не рекомендований
+translation_of: Web/JavaScript/Reference/Global_Objects/String/fontcolor
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p>Метод <strong><code>fontcolor()</code></strong> створює HTML-елемент <a href="/uk/docs/Web/HTML/Element/font" title="HTML-елемент Font Element (&lt;font>) визначає розмір, колір та обличчя шрифта для свого вмісту."><code>&lt;font&gt;</code></a>, який відображає рядок вказаним кольором.</p>
+
+<div class="note">
+<p><strong>Примітка щодо використання:</strong> Елемент &lt;font&gt; був прибраний у <a href="/uk/docs/Web/Guide/HTML/HTML5">HTML5</a> та більше не повинен використовуватись. Замість нього веб-розробникам варто використовувати властивості <a href="/uk/docs/Web/CSS">CSS</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.fontcolor(<var>color</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>color</code></dt>
+ <dd>Рядок, що відображає колір у вигляді шістнадцяткової RGB-трійці або рядкового літералу. Рядкові літерали для імен кольорів перераховані у <a href="/uk/docs/Web/CSS/color_value">Довіднику кольорів CSS</a>.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Рядок, що містить HTML-елемент <a href="/uk/docs/Web/HTML/Element/font" title="HTML-елемент Font Element (&lt;font>) визначає розмір, колір та обличчя шрифта для свого вмісту."><code>&lt;font&gt;</code></a>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо ви виражаєте колір шістнадцятковою RGB-трійцею, ви повинні використовувати формат <code>rrggbb</code>. Наприклад, шістнадцяткові RGB-значення для оранжево-рожевого (salmon) такі: red=FA, green=80 та blue=72, отже, RGB-трійця для оранжево-рожевого дорівнює <code>"FA8072"</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_fontcolor">Використання <code>fontcolor()</code></h3>
+
+<p>Наступний приклад використовує метод <code>fontcolor()</code>, щоб змінити колір рядка, створюючи рядок з HTML-тегом <code>&lt;font&gt;</code>.</p>
+
+<pre class="brush: js">var worldString = 'Привіт';
+
+console.log(worldString.fontcolor('red') +  ' червоний у цьому рядку');
+// '&lt;font color="red"&gt;Привіт&lt;/font&gt; червоний у цьому рядку'
+
+console.log(worldString.fontcolor('FF00') + ' червоний у шістнадцятковому форматі у цьому рядку');
+// '&lt;font color="FF00"&gt;Привіт&lt;/font&gt; червоний у шістнадцятковому форматі у цьому рядку'
+</pre>
+
+<p>За допомогою об'єкта <a href="/uk/docs/Web/API/HTMLElement/style" title="Властивість HTMLElement.style використовується для отримання, а також присвоєння внутрішнього стилю елемента. При отриманні вона вертає об'єкт CSSStyleDeclaration, який містить список усіх властивостей стилів для цього елемента, а також значення, присвоєні атрибутам, які визначені у внутрішньому атрибуті елемента style."><code>element.style</code></a> ви можете отримати атрибут елемента <code>style</code> та маніпулювати ним в більш загальному стилі, наприклад:</p>
+
+<pre class="brush: js">document.getElementById('yourElemId').style.color = 'red';
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.fontcolor', 'String.prototype.fontcolor')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.fontcolor")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.fontsize()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/fontsize/index.html b/files/uk/web/javascript/reference/global_objects/string/fontsize/index.html
new file mode 100644
index 0000000000..c7cc26f07e
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/fontsize/index.html
@@ -0,0 +1,80 @@
+---
+title: String.prototype.fontsize()
+slug: Web/JavaScript/Reference/Global_Objects/String/fontsize
+tags:
+  - JavaScript
+  - String
+  - метод
+  - не рекомендований
+translation_of: Web/JavaScript/Reference/Global_Objects/String/fontsize
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p>Метод <strong><code>fontsize()</code></strong> створює HTML-елемент <a href="/uk/docs/Web/HTML/Element/font" title="HTML-елемент Font Element (&lt;font>) визначає розмір, колір та обличчя шрифта для свого вмісту."><code>&lt;font&gt;</code></a>, який відображає рядок вказаним розміром шрифта.</p>
+
+<div class="note">
+<p><strong>Примітка щодо використання:</strong> Елемент &lt;font&gt; був прибраний у <a href="/uk/docs/Web/Guide/HTML/HTML5">HTML5</a> та більше не повинен використовуватись. Замість нього веб-розробникам варто використовувати властивості <a href="/uk/docs/Web/CSS">CSS</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.fontsize(<var>size</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>size</code></dt>
+ <dd>Ціле число в діапазоні між 1 та 7; рядок, що відображає ціле число зі знаком в діапазоні між 1 та 7.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Рядок, що містить HTML-елемент <a href="/uk/docs/Web/HTML/Element/font" title="HTML-елемент Font Element (&lt;font>) визначає розмір, колір та обличчя шрифта для свого вмісту."><code>&lt;font&gt;</code></a>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Коли ви вказуєте розмір як ціле число, ви встановлюєте розмір шрифта <code>str</code> одним з 7 визначених розмірів. Коли ви вказуєте значення <code>size</code> у вигляді рядка, наприклад, "-2", ви коригуєте розмір шрифта <code>str</code> відносно розміру, встановленого у тезі <a href="/uk/docs/Web/HTML/Element/basefont" title="Застарілий HTML-елемент Base Font (&lt;basefont>) встановлює обличчя, розмір та колір шрифта за замовчуванням для елементів, які є нащадками батьківського елемента."><code>&lt;basefont&gt;</code></a>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_fontsize">Використання <code>fontsize()</code></h3>
+
+<p>Наступний приклад використовує рядкові методи, щоб змінити розмір рядка:</p>
+
+<pre class="brush: js">var worldString = 'Привіт';
+
+console.log(worldString.small());     // &lt;small&gt;Привіт&lt;/small&gt;
+console.log(worldString.big());       // &lt;big&gt;Привіт&lt;/big&gt;
+console.log(worldString.fontsize(7)); // &lt;font size="7"&gt;Привіт&lt;/fontsize&gt;
+</pre>
+
+<p>За допомогою об'єкта <a href="/uk/docs/Web/API/HTMLElement/style" title="Властивість HTMLElement.style використовується для отримання, а також присвоєння внутрішнього стилю елемента. При отриманні вона вертає об'єкт CSSStyleDeclaration, який містить список усіх властивостей стилів для цього елемента, а також значення, присвоєні атрибутам, які визначені у внутрішньому атрибуті елемента style."><code>element.style</code></a> ви можете отримати атрибут елемента <code>style</code> та маніпулювати ним у більш загальному стилі, наприклад:</p>
+
+<pre class="brush: js">document.getElementById('yourElemId').style.fontSize = '0.7em';
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.fontsize', 'String.prototype.fontsize')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.fontsize")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.big()")}}</li>
+ <li>{{jsxref("String.prototype.small()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/fromcharcode/index.html b/files/uk/web/javascript/reference/global_objects/string/fromcharcode/index.html
new file mode 100644
index 0000000000..be8f695a24
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/fromcharcode/index.html
@@ -0,0 +1,109 @@
+---
+title: String.fromCharCode()
+slug: Web/JavaScript/Reference/Global_Objects/String/fromCharCode
+tags:
+  - JavaScript
+  - Method
+  - String
+  - Unicode
+  - Довідка
+translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCharCode
+---
+<div>{{JSRef}}</div>
+
+<p>Статичний метод <strong><code>String.fromCharCode()</code></strong> повертає рядок, створений з послідовності кодових одиниць Unicode переданих цілими числами.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>String.fromCharCode(<var>num1</var>[, ...[, <var>numN</var>]])</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>num1, ..., num<em>N</em></code></dt>
+ <dd>Послідовність цілих чисел, кожне з яких подає окрему кодову одиницю Unicode.</dd>
+</dl>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>Рядок із символів, що відповідають переданій послідовності значень (кодових одиниць) Unicode.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Цей метод вертає власне рядок, що належить до {{glossary("Primitive", "простого типу даних")}}, а не об'єкт класу <code>{{jsxref("String")}}</code>.</p>
+
+<p>Позаяк <code>fromCharCode()</code> є статичним методом класу <code>{{jsxref("String")}}</code>, він зазвичай використовується як <code>String.fromCharCode()</code>, а не як метод створеного об'єкта класу.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_fromCharCode()">Використання <code>fromCharCode()</code></h3>
+
+<p>Наведений вираз повертає рядок "Віко":</p>
+
+<pre class="brush: js">// вертає "Віко"
+String.fromCharCode(0x412, 0x456, 0x43A, 0x43E);</pre>
+
+<h2 id="Обробка_значень_понад_0xFFFF">Обробка значень понад 0xFFFF</h2>
+
+<p>Попри свою назву, метод фактично приймає не коди символів, а саме кодові одиниці. Тобто символи, коди яких перевищують значення 0xFFFF (діапазон UCS-2), доведеться передавати двома кодовими одиницями:</p>
+
+<p>Наприклад, символ з кодом U+1F341 «MAPLE LEAF» доведеться подавати як послідовність кодових одиниць 0xD83C та 0xDF41:</p>
+
+<pre class="brush: js">// виводить символ U+1F341 «MAPLE LEAF»
+console.log(String.fromCharCode(0xD83C, 0xDF41));</pre>
+
+<p>Більшість символів Unicode можна передати значеннями одного 16-розрядного числа (як передбачалося на початку стандартизації JavaScript), тож <code>fromCharCode()</code> можна застосовувати для створення рядків із найпоширенішими символами (UCS-2 є підмножиною UTF-8, що містить найбільш вживані символи), проте для потреб передачі всіх можливих символів (кодуються 21 двійковим розрядом) лише методу <code>fromCharCode()</code> недостатньо. Позаяк символи з кодами вищими за 0xFFFF подаються так званими «сурогатними парами» (двома окремими кодовими одиницями), можна використати <code>{{jsxref("String.fromCodePoint()")}}</code> (є частиною стандарту ES2015), що належним чином перетворить вищі коди символів на такі пари:</p>
+
+<pre class="brush: js">// виводить true
+console.log(String.fromCharCode(0xD83C, 0xDF41) === String.fromCodePoint(0x1F341));</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Первинне визначення. Реалізовано у JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.3.2', 'StringfromCharCode')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.fromcharcodes', 'String.fromCharCode')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.fromcharcodes', 'String.fromCharCode')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div class="hidden">
+<p>Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.String.fromCharCode")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.fromCodePoint()")}}</li>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.prototype.charCodeAt()")}}</li>
+ <li>{{jsxref("String.prototype.codePointAt()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/fromcodepoint/index.html b/files/uk/web/javascript/reference/global_objects/string/fromcodepoint/index.html
new file mode 100644
index 0000000000..2825480bfd
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/fromcodepoint/index.html
@@ -0,0 +1,171 @@
+---
+title: String.fromCodePoint()
+slug: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - String
+  - Довідка
+translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint
+---
+<div>{{JSRef}}</div>
+
+<p>Статичний метод <strong><code>String.fromCodePoint()</code></strong> повертає рядок, створений з послідовності кодів символів Unicode переданих цілими числами.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>String.fromCodePoint(<var>num1</var>[, ...[, <var>numN</var>]])</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>num1, ..., num<em>N</em></code></dt>
+ <dd>Послідовність цілих чисел, кожне з яких передає код символа Unicode.</dd>
+</dl>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>Рядок із символів, що відповідають переданій послідовності кодів символів Unicode.</p>
+
+<h3 id="Винятки">Винятки</h3>
+
+<ul>
+ <li>Викидає виняток <code>{{jsxref("Errors/Not_a_codepoint", "RangeError")}}</code>, якщо вказано непередбачений (відсутній) код символа Unicode (наприклад, "RangeError: Invalid code point NaN).</li>
+</ul>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Цей метод вертає власне рядок, що належить до {{glossary("Primitive", "простого типу даних")}}, а не об'єкт класу <code>{{jsxref("String")}}</code>.</p>
+
+<p>Позаяк <code>fromCodePoint()</code> є статичним методом класу <code>{{jsxref("String")}}</code>, він зазвичай використовується як <code>String.fromCodePoint()</code>, а не як метод створеного об'єкта класу.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_fromCodePoint()">Використання <code>fromCodePoint()</code></h3>
+
+<pre class="brush: js">String.fromCodePoint(42);                    // "*"
+String.fromCodePoint(65, 90);                // "AZ"
+String.fromCodePoint(0x404, 0x490);          // "ЄҐ"
+String.fromCodePoint(0x2F804);               // "\uD87E\uDC04"
+String.fromCodePoint(194564);                // "\uD87E\uDC04"
+String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07"
+
+String.fromCodePoint('_');       // викидає RangeError
+String.fromCodePoint(Infinity);  // викидає RangeError
+String.fromCodePoint(-1);        // викидає RangeError
+String.fromCodePoint(3.14);      // викидає RangeError
+String.fromCodePoint(3e-2);      // викидає RangeError
+String.fromCodePoint(NaN);       // викидає RangeError
+</pre>
+
+<pre class="brush: js">// Метод String.fromCharCode() не може створювати символи з такими великими кодами
+// Натомість fromCodePoint() може створювати символи, що передаються двома кодовими одиницями (чотири байти),
+// так само, як і звичайні двобайтні (тобто може створити рядок, що містить один символ, але має довжину 2 замість 1).
+console.log(String.fromCodePoint(0x2F804));  // Значення 194564 в десятковій системі числення
+</pre>
+
+<h2 id="Запасний_варіант_(поліфіл)">Запасний варіант (поліфіл)</h2>
+
+<p>Цей метод з'явився в ECMAScript 2015, тож, можливо, наявний не у всякій реалізації JavaScript. Проте, ви можете використати наступний код для забезпечення запасного варіанту:</p>
+
+<pre class="brush: js">/*! http://mths.be/fromcodepoint v0.1.0 by @mathias */
+if (!String.fromCodePoint) {
+  (function() {
+    var defineProperty = (function() {
+      // IE 8 only supports `Object.defineProperty` on DOM elements
+      try {
+        var object = {};
+        var $defineProperty = Object.defineProperty;
+        var result = $defineProperty(object, object, object) &amp;&amp; $defineProperty;
+      } catch(error) {}
+      return result;
+    }());
+    var stringFromCharCode = String.fromCharCode;
+    var floor = Math.floor;
+    var fromCodePoint = function() {
+      var MAX_SIZE = 0x4000;
+      var codeUnits = [];
+      var highSurrogate;
+      var lowSurrogate;
+      var index = -1;
+      var length = arguments.length;
+      if (!length) {
+        return '';
+      }
+      var result = '';
+      while (++index &lt; length) {
+        var codePoint = Number(arguments[index]);
+        if (
+          !isFinite(codePoint) ||       // `NaN`, `+Infinity`, or `-Infinity`
+          codePoint &lt; 0 ||              // not a valid Unicode code point
+          codePoint &gt; 0x10FFFF ||       // not a valid Unicode code point
+          floor(codePoint) != codePoint // not an integer
+        ) {
+          throw RangeError('Invalid code point: ' + codePoint);
+        }
+        if (codePoint &lt;= 0xFFFF) { // BMP code point
+          codeUnits.push(codePoint);
+        } else { // Astral code point; split in surrogate halves
+          // http://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
+          codePoint -= 0x10000;
+          highSurrogate = (codePoint &gt;&gt; 10) + 0xD800;
+          lowSurrogate = (codePoint % 0x400) + 0xDC00;
+          codeUnits.push(highSurrogate, lowSurrogate);
+        }
+        if (index + 1 == length || codeUnits.length &gt; MAX_SIZE) {
+          result += stringFromCharCode.apply(null, codeUnits);
+          codeUnits.length = 0;
+        }
+      }
+      return result;
+    };
+    if (defineProperty) {
+      defineProperty(String, 'fromCodePoint', {
+        'value': fromCodePoint,
+        'configurable': true,
+        'writable': true
+      });
+    } else {
+      String.fromCodePoint = fromCodePoint;
+    }
+  }());
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-string.fromcodepoint', 'String.fromCodePoint')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Первинне визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.fromcodepoint', 'String.fromCodePoint')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.fromCodePoint")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.fromCharCode()")}}</li>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.prototype.codePointAt()")}}</li>
+ <li>{{jsxref("String.prototype.charCodeAt()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/includes/index.html b/files/uk/web/javascript/reference/global_objects/string/includes/index.html
new file mode 100644
index 0000000000..bcfb01d5aa
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/includes/index.html
@@ -0,0 +1,125 @@
+---
+title: String.prototype.includes()
+slug: Web/JavaScript/Reference/Global_Objects/String/includes
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/String/includes
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>includes()</code></strong> визначає чи може один рядок бути знайденим всередині іншого, повертаючи, відповідно, <code>true</code> або <code>false</code>.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/string-includes.html", "shorter")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.includes(<var>searchString</var>[, <var>position</var>])</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>searchString</code></dt>
+ <dd>Рядок для пошуку всередині <em><code>str</code></em>.</dd>
+ <dt><code>position</code> {{optional_inline}}</dt>
+ <dd>Позиція всередині рядка, з якої буде почато пошук рядка <code>searchString</code>. (За замовчуванням 0).</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p><strong><code>true</code></strong>, якщо шуканий рядок знайдено де-завгодно всередині наданого рядка; інакше, <strong><code>false</code></strong>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Цей метод дозволяє визначити чи знаходиться один рядок всередині іншого.</p>
+
+<h3 id="Чутливість_до_регістру">Чутливість до регістру</h3>
+
+<p>Метод <code>includes()</code> є чутливим до регістру. Для прикладу, наступний вираз поверне <code>false</code>:</p>
+
+<pre class="brush: js">'Синій кит'.includes('синій'); // вертає false
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_includes">Використання <code>includes()</code></h3>
+
+<pre class="brush: js">var str = 'Питання в тому: бути чи не бути.';
+
+console.log(str.includes('Питання'));     // true
+console.log(str.includes('бути'));        // true
+console.log(str.includes('неіснуючий'));  // false
+console.log(str.includes('Питання', 1));  // false
+console.log(str.includes('ПИТАННЯ'));     // false
+console.log(str.includes(''));            // true</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Цей метод був доданий до специфікації ECMAScript 2015 і може бути недоступним у всіх реалізаціях JavaScript.</p>
+
+<p>Однак, ви можете легко розробити поліфіл для цього методу:</p>
+
+<pre class="brush: js">if (!String.prototype.includes) {
+  String.prototype.includes = function(search, start) {
+    'use strict';
+
+    if (search instanceof RegExp) {
+      throw TypeError('first argument must not be a RegExp');
+    }
+    if (start === undefined) { start = 0; }
+    return this.indexOf(search, start) !== -1;
+  };
+}</pre>
+
+<p class="brush: js"></p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.includes', 'String.prototype.includes')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці, згенерована з структурованих даних. Якщо ви хочете внести свій вклад в дані, будь ласка, ознайомтесь з <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і надішлість нам запит на додавання даних.</p>
+
+<p>{{Compat("javascript.builtins.String.includes")}}</p>
+
+<h2 id="String.prototype.contains">String.prototype.contains</h2>
+
+<p>У Firefox 18-39 назва цього методу була <code>contains()</code>. Він був перейменований на <code>includes()</code> у <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1102219">bug 1102219</a> у зв'язку з наступною причиною:</p>
+
+<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=789036">Повідомлялося</a>, що деякі веб-сайти, які використовують MooTools 1.2 не працюють на Firefox 17. Ця версія MooTools перевіряла чи існує метод <code>String.prototype.contains()</code> та, якщо ні, то MooTools додає власну функцію.</p>
+
+<p>З введенням цієї функції у Firefox 17, поведінка цієї перевірки змінювалася таким чином, що ставала причиною непрацездатності коду на основі реалізації методу <code>String.prototype.contains()</code> від MooTools. В результаті реалізація була <a href="https://hg.mozilla.org/releases/mozilla-aurora/rev/086db97198a8">відключена</a> у Firefox 17, а <code>String.prototype.contains()</code> був доступний на одну версію пізніше, у Firefox 18, коли <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=789036#c32">налагодження зв'язків з MooTools </a>призвело до <a href="http://mootools.net/blog/2013/02/19/mootools-1-2-6-released">випуску MooTools версії 1.2.6</a>.</p>
+
+<p>MooTools 1.3 примусово запускає власну версію методу <code>String.prototype.contains()</code>, тож, веб-сайти, що покладаються на неї, не повинні ламатися. Однак, зауважте, що сигнатура цього методу відразняється для <a href="http://mootools.net/core/docs/1.3.2/Types/String#String-method:-contains">MooTools 1.3 </a>і ECMAScript 2015 (на місці другого аргумента). Пізніше, <a href="https://github.com/mootools/mootools-core/blob/master/Docs/Types/String.md#note">MooTools 1.5+ змінив сігнатуру у відповідності до стандарту ES2015.</a></p>
+
+<p>У Firefox 48 метод <code>String.prototype.contains()</code> було видалено. Використовуйте тільки <code>String.prototype.includes()</code>.</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.includes()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.includes()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("String.prototype.startsWith()")}}</li>
+ <li>{{jsxref("String.prototype.endsWith()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/index.html b/files/uk/web/javascript/reference/global_objects/string/index.html
new file mode 100644
index 0000000000..f28c4fb043
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/index.html
@@ -0,0 +1,374 @@
+---
+title: String
+slug: Web/JavaScript/Reference/Global_Objects/String
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - String
+  - Довідка
+  - рядок
+translation_of: Web/JavaScript/Reference/Global_Objects/String
+---
+<div>{{JSRef}}</div>
+
+<p>Глобальний об'єкт <strong><code>String</code></strong> є конструктором для рядків, або послідовностей символів.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Рядки корисні для утримання данних, які можуть бути представлені в текстовій формі. Деякі з найбільш виконуваних операцій над рядками: перевірка їхньої {{jsxref("String.length", "довжини")}}, побудова та об'єднання рядків за допомогою <a href="/en-US/docs/Web/JavaScript/Reference/Operators/String_Operators">рядкових операторів + та +=</a>, перевірка наявності чи розташування підрядків методом {{jsxref("String.prototype.indexOf()", "indexOf()")}} чи копіювання підрядків методом {{jsxref("String.prototype.substring()", "substring()")}}.</p>
+
+<h3 id="Створення_рядків">Створення рядків</h3>
+
+<p>Рядки можна створювати як примітиви, з рядкових літералів, або як об'єкти, використовуючи конструктор {{jsxref("String/String")}}:</p>
+
+<pre class="brush: js notranslate">const string1 = "Рядковий примітив";
+const string2 = 'Теж рядковий примітив';
+const string3 = `І ще один рядковий примітив`;
+
+const string4 = new String("Об'єкт String");</pre>
+
+<p>Рядкові примітиви та рядкові об'єкти можна взаємно замінювати у більшості ситуацій. Дивіться нижче "<a href="https://wiki.developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/String$edit#String_primitives_and_String_objects">Рядкові примітиви та рядкові об'єкти</a>".</p>
+
+<p>Рядкові літерали можуть створюватись з використанням одинарних чи подвійних лапок, які працюють ідентично, або за допомогою зворотніх лапок <kbd>`</kbd>. Ця остання форма створює <a href="/uk/docs/Web/JavaScript/Reference/Template_literals">шаблонний літерал</a>: ця форма дозволяє інтерполювати вирази.</p>
+
+<h3 id="Доступ_до_символів">Доступ до символів</h3>
+
+<p>Існують два способи доступу до окремих символів рядка. Перший - це метод {{jsxref("String.prototype.charAt()", "charAt()")}}:</p>
+
+<pre class="brush: js notranslate">return 'кіт'.charAt(1); // вертає "і"
+</pre>
+
+<p>Другий спосіб (запроваджений у ECMAScript 5) працює з рядком як з подібним до масиву об'єктом, де окремі символи відповідають числовому індексу:</p>
+
+<pre class="brush: js notranslate">return 'кіт'[1]; // вертає "і"
+</pre>
+
+<p>Під час звернення до символу за допомогою дужкової нотації спроби видалити ці властивості чи присвоїти їм значення не матимуть успіху. Ці властивості не є доступними ані для запису, ані для налаштування. (Дивіться більше інформації у {{jsxref("Object.defineProperty()")}}.)</p>
+
+<h3 id="Порівняння_рядків">Порівняння рядків</h3>
+
+<p>У мові C для порівняння рядків використовується функція <code>strcmp()</code>. У JavaScript ви просто використовуєте оператори <a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння">менше ніж та більше ніж</a>:</p>
+
+<pre class="brush: js notranslate">var a = 'а';
+var b = 'б';
+if (a &lt; b) { // true
+  console.log(a + ' менше ніж ' + b);
+} else if (a &gt; b) {
+  console.log(a + ' більше ніж ' + b);
+} else {
+  console.log(a + ' та ' + b + ' є рівними.');
+}
+</pre>
+
+<p>Схожий результат можна отримати за допомогою методу {{jsxref("String.prototype.localeCompare()", "localeCompare()")}}, що успадковується екземплярами <code>String</code>.</p>
+
+<p>Зауважте, що <code>a == b</code> перевіряє рядки у <code><var>a</var></code> та <code><var>b</var></code> на рівність у звичайний чутливий до регістру спосіб. Якщо вам потрібно порівняння літер без врахування регістру, використовуйте функцію, схожу на цю:</p>
+
+<pre class="brush: js notranslate">function isEqual(str1, str2)
+{
+    return str1.toUpperCase() === str2.toUpperCase()
+} // isEqual</pre>
+
+<p>Верхній регістр використовується замість нижнього в цій функції через деякі проблеми з перетвореннями символів у UTF-8.</p>
+
+<h3 id="Рядкові_примітиви_та_рядкові_обєкти">Рядкові примітиви та рядкові об'єкти</h3>
+
+<p>Зауважте, що JavaScript розрізняє об'єкти <code>String</code> та примітивні рядкові значення. (Те саме стосується типу {{jsxref("Boolean")}} та {{jsxref("Global_Objects/Число", "чисел")}}.)</p>
+
+<p>Рядкові літерали (позначаються подвійними чи одинарними лапками) та рядки, повернені викликами <code>String</code> не в контексті конструктора (тобто, без використання ключового слова {{jsxref("Operators/new", "new")}}) є примітивними рядками. JavaScript автоматично перетворює примітиви на об'єкти <code>String</code>, тому методи об'єкта <code>String</code> можливо використовувати на примітивних рядках. Там, де на примітивному рядку має бути викликаний метод або зустрічається звернення до властивості, JavaScript автоматично загорне рядковий примітив та викличе метод чи виконає звернення до властивості.</p>
+
+<pre class="brush: js notranslate">var s_prim = 'няв';
+var s_obj = new String(s_prim);
+
+console.log(typeof s_prim); // Виведе "string"
+console.log(typeof s_obj);  // Виведе "object"
+</pre>
+
+<p>Рядкові примітиви та об'єкти <code>String</code> також дають різні результати при використанні {{jsxref("Global_Objects/eval", "eval()")}}. Примітиви, передані у <code>eval</code>, сприймаються як першокод; об'єкти <code>String</code> поводяться як усі об'єкти, повертаючи об'єкт. Наприклад:</p>
+
+<pre class="brush: js notranslate">var s1 = '2 + 2';             // створює рядковий примітив
+var s2 = new String('2 + 2'); // створює об'єкт String
+console.log(eval(s1));        // повертає число 4
+console.log(eval(s2));        // повертає рядок "2 + 2"
+</pre>
+
+<p>Через це може статись помилка, якщо код зустрічає об'єкт <code>String</code> там, де очікує рядковий примітив, хоча, загалом, розробникам не потрібно хвилюватись щодо відмінностей.</p>
+
+<p>Об'єкт <code>String</code> завжди можна перетворити на його примітивний аналог методом {{jsxref("String.prototype.valueOf()", "valueOf()")}}.</p>
+
+<pre class="brush: js notranslate">console.log(eval(s2.valueOf())); // вертає число 4
+</pre>
+
+<h3 id="Екранування">Екранування</h3>
+
+<p>Спеціальні символи можна позначати за допомогою екранування:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Код</th>
+   <th scope="col">Результат</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>\<var>XXX</var></code><br>
+    (де <code><var>XXX</var></code> - це 1–3 вісімкових цифр; діапазон <code>0</code>–<code>377</code>)</td>
+   <td>Символ ISO-8859-1 / код символа Юнікоду між <code>U+0000</code> та <code>U+00FF</code></td>
+  </tr>
+  <tr>
+   <td><code>\'</code></td>
+   <td>одинарні лапки</td>
+  </tr>
+  <tr>
+   <td><code>\"</code></td>
+   <td>подвійні лапки</td>
+  </tr>
+  <tr>
+   <td><code>\\</code></td>
+   <td>зворотній слеш</td>
+  </tr>
+  <tr>
+   <td><code>\n</code></td>
+   <td>новий рядок</td>
+  </tr>
+  <tr>
+   <td><code>\r</code></td>
+   <td>повернення каретки</td>
+  </tr>
+  <tr>
+   <td><code>\v</code></td>
+   <td>вертикальна табуляція</td>
+  </tr>
+  <tr>
+   <td><code>\t</code></td>
+   <td>горизонтальна табуляція</td>
+  </tr>
+  <tr>
+   <td><code>\b</code></td>
+   <td>повернення на крок</td>
+  </tr>
+  <tr>
+   <td><code>\f</code></td>
+   <td>зміна сторінки</td>
+  </tr>
+  <tr>
+   <td><code>\u<var>XXXX</var></code> (де <code><var>XXXX</var></code> - це 4 шістнадцяткових символа; діапазон <code>0x0000</code>–<code>0xFFFF</code>)</td>
+   <td>Кодова одиниця UTF-16 / код символа Юнікоду між <code>U+0000</code> та <code>U+FFFF</code></td>
+  </tr>
+  <tr>
+   <td><code>\u{<var>X</var>}</code> ... <code>\u{<var>XXXXXX</var>}</code><br>
+    (де <code><var>X</var>…<var>XXXXXX</var></code> - це 1–6 шістнадцяткових символів; діапазон <code>0x0</code>–<code>0x10FFFF</code>)</td>
+   <td>Кодова одиниця UTF-32 / код символа Юнікоду між <code>U+0000</code> та <code>U+10FFFF</code></td>
+  </tr>
+  <tr>
+   <td><code>\x<var>XX</var></code><br>
+    (де <code><var>XX</var></code> - це 2 шістнадцяткові символи; діапазон <code>0x00</code>–<code>0xFF</code>)</td>
+   <td>символ ISO-8859-1 / код символа Юнікоду між <code>U+0000</code> та <code>U+00FF</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Довгі_рядкові_літерали">Довгі рядкові літерали</h3>
+
+<p>Іноді ваш код міститиме рядки, які є дуже довгими. Замість того, щоб створювати рядки нескінченно довгі чи перенесені за примхою редактора, ви можете самостійно розбити текст на декілька рядків у коді, не вплинувши на реальний вміст літералу. Існує два способи це зробити.</p>
+
+<h4 id="Метод_1">Метод 1</h4>
+
+<p>Ви можете скористатись оператором <a href="/uk/docs/Web/JavaScript/Reference/Operators/Addition">+</a> для поєднання багатьох рядків, ось так:</p>
+
+<pre class="brush: js notranslate">let longString = "Це дуже довгий текст, його треба " +
+                 "записати в декілька рядків," +
+                 "інакше мій код буде важко читати."</pre>
+
+<h4 id="Метод_2">Метод 2</h4>
+
+<p>Ви можете скористатись символом зворотній слеш (<code>\</code>) в кінці кожного рядка, щоб позначити, що текст продовжується на наступному рядку. Переконайтесь, що після зворотнього слеша немає пробілу чи будь-якого іншого символу (окрім символу розриву рядка), або відступу; інакше, це не спрацює.</p>
+
+<p>Ця форма виглядає ось так:</p>
+
+<pre class="brush: js notranslate">let longString = "Це дуже довгий текст, його треба \
+записати в декілька рядків, \
+інакше мій код буде важко читати."</pre>
+
+<p>Обидва наведені методи виводять ідентичні рядки.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{jsxref("String/String", "String()")}}</dt>
+ <dd>Створює новий об'єкт <code>String</code>. Він виконує перетворення типів, коли викликається як функція, а не як конструктор, що, зазвичай, більш корисно.</dd>
+</dl>
+
+<h2 id="Статичні_методи">Статичні методи</h2>
+
+<dl>
+ <dt>{{jsxref("String.fromCharCode()", "String.fromCharCode(<var>num1</var> [, ...[, <var>numN</var>]])")}}</dt>
+ <dd>Вертає рядок, створений за допомогою вказаної послідовності значень Юнікоду.</dd>
+ <dt>{{jsxref("String.fromCodePoint()", "String.fromCodePoint(<var>num1</var> [, ...[, <var>numN</var>)")}}</dt>
+ <dd>Вертає рядок, створений за допомогою вказаної послідовності кодів символів.</dd>
+ <dt>{{jsxref("String.raw()")}}</dt>
+ <dd>Вертає рядок, створений з сирого шаблонного рядка.</dd>
+</dl>
+
+<h2 id="Властивості_екземплярів">Властивості екземплярів</h2>
+
+<dl>
+ <dt>{{jsxref("String.prototype.length")}}</dt>
+ <dd>Відображає довжину рядка. Доступна лише для читання.</dd>
+</dl>
+
+<h2 id="Методи_екземплярів">Методи екземплярів</h2>
+
+<dl>
+ <dt>{{jsxref("String.prototype.charAt()", "String.prototype.charAt(<var>index</var>)")}}</dt>
+ <dd>Вертає символ (рівно одну кодову одиницю UTF-16), розташований за вказаним індексом <code><var>index</var></code>.</dd>
+ <dt>{{jsxref("String.prototype.charCodeAt()", "String.prototype.charCodeAt(<var>index</var>)")}}</dt>
+ <dd>Вертає число, яке є значенням кодової одиниці UTF-16, розташованої за вказаним індексом <code><var>index</var></code>.</dd>
+ <dt>{{jsxref("String.prototype.codePointAt()", "String.prototype.codePointAt(<var>pos</var>)")}}</dt>
+ <dd>Вертає невід'ємне ціле число, яке є значенням коду символу UTF-16, що починається на вказаній позиції <code><var>pos</var></code>.</dd>
+ <dt>{{jsxref("String.prototype.concat()", "String.prototype.concat(<var>str </var>[, ...<var>strN </var>])")}}</dt>
+ <dd>Об'єднує текст двох (або більше) рядків та повертає новий рядок.</dd>
+ <dt>{{jsxref("String.prototype.includes()", "String.prototype.includes(<var>searchString</var> [, <var>position</var>])")}}</dt>
+ <dd>Визначає, чи містить рядок, що викликав метод, рядок <code><var>searchString</var></code>.</dd>
+ <dt>{{jsxref("String.prototype.endsWith()", "String.prototype.endsWith(<var>searchString</var> [, <var>length</var>])")}}</dt>
+ <dd>Визначає, чи завершується рядок символами рядка <code><var>searchString</var></code>.</dd>
+ <dt>{{jsxref("String.prototype.indexOf()", "String.prototype.indexOf(<var>searchValue</var> [, <var>fromIndex</var>])")}}</dt>
+ <dd>Вертає індекс всередині об'єкта {{jsxref("String")}}, що викликав метод, першого знайденого значення <code><var>searchValue</var></code>, або <code>-1</code>, якщо воно не знайдене.</dd>
+ <dt>{{jsxref("String.prototype.lastIndexOf()", "String.prototype.lastIndexOf(<var>searchValue</var> [, <var>fromIndex</var>])")}}</dt>
+ <dd>Вертає індекс всередині об'єкта {{jsxref("String")}}, що викликав метод, останнього знайденого значення <code><var>searchValue</var></code>, або <code>-1</code>, якщо значення не знайдене.</dd>
+ <dt>{{jsxref("String.prototype.localeCompare()", "String.prototype.localeCompare(<var>compareString</var> [, <var>locales</var> [, <var>options</var>]])")}}</dt>
+ <dd>Вертає число, що вказує, чи розташований рядок <code><var>compareString</var></code> перед, після, чи однаково, відносно наданого рядка у відсованій послідовності.</dd>
+ <dt>{{jsxref("String.prototype.match()", "String.prototype.match(<var>regexp</var>)")}}</dt>
+ <dd>Використовується, щоб зіставити регулярний вираз <code><var>regexp</var></code> з рядком.</dd>
+ <dt>{{jsxref("String.prototype.matchAll()", "String.prototype.matchAll(<var>regexp</var>)")}}</dt>
+ <dd>Вертає ітератор усіх збігів з регулярним виразом.</dd>
+ <dt>{{jsxref("String.prototype.normalize()", "String.prototype.normalize([<var>form</var>])")}}</dt>
+ <dd>Вертає рядкове значення, на якому викликано метод, у формі нормалізації Юнікоду.</dd>
+ <dt>{{jsxref("String.prototype.padEnd()", "String.prototype.padEnd(<var>targetLength</var> [, <var>padString</var>])")}}</dt>
+ <dd>Доповнює поточний рядок наданим рядком з кінця та повертає новий рядок, що має довжину <code><var>targetLength</var></code>.</dd>
+ <dt>{{jsxref("String.prototype.padStart()", "String.prototype.padStart(<var>targetLength</var> [, <var>padString</var>])")}}</dt>
+ <dd>Доповнює поточний рядок наданим рядком з початку та повертає новий рядок, що має довжину <code><var>targetLength</var></code>.</dd>
+ <dt>{{jsxref("String.prototype.repeat()", "String.prototype.repeat(<var>count</var>)")}}</dt>
+ <dd>Повертає рядок, що складається з елементів об'єкта, повторених <code><var>count</var></code> разів.</dd>
+ <dt>{{jsxref("String.prototype.replace()" , "String.prototype.replace(<var>searchFor</var>, <var>replaceWith</var>)")}}</dt>
+ <dd>Використовується, щоб замінити <code><em>searchFor</em></code> заміною <em><code>replaceWith</code></em>. <em><code>searchFor</code></em> може бути рядком або регулярним виразом, а <code><var>replaceWith</var></code> може бути рядком чи функцією.</dd>
+ <dt>{{jsxref("String.prototype.replaceAll()" , "String.prototype.replaceAll(<var>searchFor</var>, <var>replaceWith</var>)")}}</dt>
+ <dd>Використовується, щоб замінити усі збіги з шаблоном <em><code>searchFor</code></em> заміною <code><var>replaceWith</var></code>. <code><var>searchFor</var></code> може бути рядком або регулярним виразом, а <code><var>replaceWith</var></code> може бути рядком або функцією.</dd>
+ <dt>{{jsxref("String.prototype.search()", "String.prototype.search(<var>regexp</var>)")}}</dt>
+ <dd>Шукає збіг між регулярним виразом <code><var>regexp</var></code> та рядком, що викликав метод.</dd>
+ <dt>{{jsxref("String.prototype.slice()", "String.prototype.slice(<var>beginIndex</var>[, <var>endIndex</var>])")}}</dt>
+ <dd>Вирізає частину рядка та повертає новий рядок.</dd>
+ <dt>{{jsxref("String.prototype.split()", "String.prototype.split([<var>sep</var> [, <var>limit</var>] ])")}}</dt>
+ <dd>Вертає масив рядків, заповнених розділенням початкового рядка підрядком <code><var>sep</var></code>.</dd>
+ <dt>{{jsxref("String.prototype.startsWith()", "String.prototype.startsWith(<var>searchString</var> [, <var>length</var>])")}}</dt>
+ <dd>Визначає, чи починається рядок з символів рядка <code><var>searchString</var></code>.</dd>
+ <dt>{{jsxref("String.prototype.substr()")}}</dt>
+ <dd>Повертає вказану кільксть символів на початку рядка з вказаної позиції.</dd>
+ <dt>{{jsxref("String.prototype.substring()", "String.prototype.substring(<var>indexStart</var> [, <var>indexEnd</var>])")}}</dt>
+ <dd>Повертає рядок, що містить символи рядка від вказаного індекса, або між вказаними індексами.</dd>
+ <dt>{{jsxref("String.prototype.toLocaleLowerCase()", "String.prototype.toLocaleLowerCase( [<var>locale</var>, ...<var>locales</var>])")}}</dt>
+ <dd>
+ <p>Символи рядка переводяться до нижнього регістра відповідно до поточних регіональних налаштувань.</p>
+
+ <p>Для більшості мов результат буде такий самий, як у {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}.</p>
+ </dd>
+ <dt>{{jsxref("String.prototype.toLocaleUpperCase()", "String.prototype.toLocaleUpperCase( [<var>locale</var>, ...<var>locales</var>])")}}</dt>
+ <dd>
+ <p>Символи рядка переводяться до верхнього регістра відповідно до поточних регіональних налаштувань.</p>
+
+ <p>Для більшості мов результат буде такий самий, як у {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}.</p>
+ </dd>
+ <dt>{{jsxref("String.prototype.toLowerCase()")}}</dt>
+ <dd>Повертає значення рядка, переведене до нижнього регістра.</dd>
+ <dt>{{jsxref("String.prototype.toString()")}}</dt>
+ <dd>Повертає рядкове представлення вказаного об'єкта. Заміщує метод {{jsxref("Object.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("String.prototype.toUpperCase()")}}</dt>
+ <dd>Повертає значення рядка, переведене до верхнього регістра.</dd>
+ <dt>{{jsxref("String.prototype.trim()")}}</dt>
+ <dd>Прибирає пробіли з початку та кінця рядка. Частина стандарту ECMAScript 5.</dd>
+ <dt>{{jsxref("String.prototype.trimStart()")}}</dt>
+ <dd>Видаляє пробіли з початку рядка.</dd>
+ <dt>{{jsxref("String.prototype.trimEnd()")}}</dt>
+ <dd>Видаляє пробіли з кінця рядка.</dd>
+ <dt>{{jsxref("String.prototype.valueOf()")}}</dt>
+ <dd>Повертає просту величину вказаного об'єкта. Заміщує метод {{jsxref("Object.prototype.valueOf()")}}.</dd>
+ <dt>{{jsxref("String.prototype.@@iterator()")}}</dt>
+ <dd>Повертає новий об'єкт <code>Iterator</code>, який перебирає коди символів рядка, повертаючи кожний код символа рядкового значення.</dd>
+</dl>
+
+<h2 id="Методи_HTML-обгортки">Методи HTML-обгортки</h2>
+
+<p><strong>Застарілі. Уникайте цих методів.</strong></p>
+
+<p>Вони обмежено використовуються, оскільки надають набір доступних тегів та атрибутів HTML.</p>
+
+<dl>
+ <dt>{{jsxref("String.prototype.anchor()")}}</dt>
+ <dd>{{htmlattrxref("name", "a", "&lt;a name=\"name\"&gt;")}} (гіпертекстове посилання)</dd>
+ <dt>{{jsxref("String.prototype.big()")}}</dt>
+ <dd>{{HTMLElement("big")}}</dd>
+ <dt>{{jsxref("String.prototype.blink()")}}</dt>
+ <dd>{{HTMLElement("blink")}}</dd>
+ <dt>{{jsxref("String.prototype.bold()")}}</dt>
+ <dd>{{HTMLElement("b")}}</dd>
+ <dt>{{jsxref("String.prototype.fixed()")}}</dt>
+ <dd>{{HTMLElement("tt")}}</dd>
+ <dt>{{jsxref("String.prototype.fontcolor()")}}</dt>
+ <dd>{{htmlattrxref("color", "font", "&lt;font color=\"color\"&gt;")}}</dd>
+ <dt>{{jsxref("String.prototype.fontsize()")}}</dt>
+ <dd>{{htmlattrxref("size", "font", "&lt;font size=\"size\"&gt;")}}</dd>
+ <dt>{{jsxref("String.prototype.italics()")}}</dt>
+ <dd>{{HTMLElement("i")}}</dd>
+ <dt>{{jsxref("String.prototype.link()")}}</dt>
+ <dd>{{htmlattrxref("href", "a", "&lt;a href=\"url\"&gt;")}} (посилання на URL)</dd>
+ <dt>{{jsxref("String.prototype.small()")}}</dt>
+ <dd>{{HTMLElement("small")}}</dd>
+ <dt>{{jsxref("String.prototype.strike()")}}</dt>
+ <dd>{{HTMLElement("strike")}}</dd>
+ <dt>{{jsxref("String.prototype.sub()")}}</dt>
+ <dd>{{HTMLElement("sub")}}</dd>
+ <dt>{{jsxref("String.prototype.sup()")}}</dt>
+ <dd>{{HTMLElement("sup")}}</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Перетворення_рядка">Перетворення рядка</h3>
+
+<p>Можливо використовувати <code>String</code> як більш надійну альтернативу {{jsxref("String.prototype.toString()", "toString()")}}, оскільки вона працює при використанні з {{jsxref("null")}}, {{jsxref("undefined")}} та {{jsxref("Symbol", "символами")}}. Наприклад:</p>
+
+<pre class="brush: js notranslate">var outputStrings = [];
+for (let i = 0, n = inputValues.length; i &lt; n; ++i) {
+  outputStrings.push(String(inputValues[i]));
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string-objects', 'String')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.String")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Text_formatting">Форматування тексту у посібнику JavaScript Guide</a></li>
+ <li>{{jsxref("RegExp")}}</li>
+ <li>{{domxref("DOMString")}}</li>
+ <li><a href="/uk/Add-ons/Code_snippets/StringView"><code>StringView</code> — C-подібне відображення рядків на основі типизованих масивів</a></li>
+ <li><a href="/uk/docs/Web/API/DOMString/Binary">Двійкові рядки</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/indexof/index.html b/files/uk/web/javascript/reference/global_objects/string/indexof/index.html
new file mode 100644
index 0000000000..3c0639bad4
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/indexof/index.html
@@ -0,0 +1,154 @@
+---
+title: String.prototype.indexOf()
+slug: Web/JavaScript/Reference/Global_Objects/String/indexOf
+tags:
+  - JavaScript
+  - Prototype
+  - String
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/String/indexOf
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>indexOf()</code></strong> починає пошук від символа за індексом <code>fromIndex</code> всередині об'єкта <code>{{jsxref("String")}}</code>, з якого здійснюється виклик метода, і вертає індекс першого знайденого збігу із шуканим значенням. Якщо значення не знайдене, повертає <code>-1</code>.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/string-indexof.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<div class="note"><strong>Заувага:</strong> Клас <code>Array</code> має подібний метод <code>{{jsxref("Array.prototype.indexOf()", "indexOf()")}}</code>.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>str</var>.indexOf(<var>searchValue</var>[, <var>fromIndex</var>])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><em><code>searchValue</code></em></dt>
+ <dd>Рядок, що є шуканим значенням.</dd>
+ <dd>Якщо рядок явно не заданий, <a href="https://tc39.github.io/ecma262/#sec-tostring"><var>searchValue</var> буде примусово приведений до <code>"undefined"</code></a>, і пошук цього значення буде здійснюватись у <code><var>str</var></code>.</dd>
+ <dd>Отже, для прикладу: <code>'undefined'.indexOf()</code> поверне <code>0</code>, оскільки значення undefined знайдене на позиції <code>0</code>, але <code>'undefine'.indexOf()</code> поверне <code>-1</code>, оскільки рядок <code>"undefine"</code> не знайдений.</dd>
+ <dt><em><code>fromIndex</code> </em>{{optional_inline}}</dt>
+ <dd>Ціле число, що позначає індекс, з якого має розпочинатися пошук; за замовчуванням дорівнює <code>0</code>.</dd>
+ <dd>Якщо вказане значення <code>fromIndex</code> менше за <code>0</code> чи більше за <code>str.length</code>, пошук розпочнеться з індексу <code>0</code> та <code>str.length</code>, відповідно.</dd>
+ <dd>Для прикладу, <code>'всім привіт'.indexOf('м', -5)</code> поверне <code>3</code>, оскільки метод почне пошук з позициї <code>0</code>, а <code>м</code> знайдеться на позиції <code>3</code>. З іншого боку, <code>'всім привіт'.indexOf('м', 11)</code> (і з будь-яким значенням <code>fromIndex</code>, більшим за <code>11</code>) поверне <code>-1</code>, оскільки пошук починається з позиції <code>11</code>, позиції <em>після</em> кінця рідка.</dd>
+</dl>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>Індекс першого знайденого збігу з <em><code>searchValue</code></em>, або <strong><code>-1</code></strong>, якщо жодного збігу не знайдено.</p>
+
+<p>Порожній рядок <code><var>searchValue</var></code> призводить до дивних результатів. За відсутності значення <code><var>fromIndex</var></code>, чи будь-якого значення <em><code>fromIndex</code></em>, нижчого за довжину рядка, повернене значення буде таким самим, як значення <code><var>fromIndex</var></code>:</p>
+
+<pre class="brush: js">'всім привіт'.indexOf('')    // вертає 0
+'всім привіт'.indexOf('', 0) // вертає 0
+'всім привіт'.indexOf('', 3) // вертає 3
+'всім привіт'.indexOf('', 8) // вертає 8</pre>
+
+<p>Однак, якщо значення <code><var>fromIndex</var></code> є рівним або більшим за довжину рядка, повернене значення <em>дорівнює</em> довжині рядка:</p>
+
+<pre class="brush: js">'всім привіт'.indexOf('', 11) // вертає 11
+'всім привіт'.indexOf('', 13) // вертає 11
+'всім привіт'.indexOf('', 22) // вертає 11</pre>
+
+<p>В минулій версії JS порожній рядок відшукувався одразу після вказаного значення індексу. У останній версії JS порожній рядок буде знайдений в кінці рядка, в якому здійснюється пошук.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Символи рядка індексуються зліва направо. Індекс першого символу дорівнює <code>0</code>, а індекс останнього символу рядка <code><em>stringName</em></code> дорівнює <code><em>stringName</em>.length - 1</code>.</p>
+
+<pre class="brush: js">'Непозбувна бентега'.indexOf('Непозбувна');     // вертає  0
+'Непозбувна бентега'.indexOf('Непозбувний');    // вертає -1
+'Непозбувна бентега'.indexOf('бентега', 0);     // вертає 11
+'Непозбувна бентега'.indexOf('бентега', 5);     // вертає 11
+'Непозбувна бентега'.indexOf('бентега', 12);    // вертає -1
+'Розкішниця'.indexOf('');                       // вертає  0
+'Розкішниця'.indexOf('', 9);                    // вертає  9
+'Розкішниця'.indexOf('', 10);                   // вертає 10
+'Розкішниця'.indexOf('', 11);                   // вертає 10</pre>
+
+<p>Метод <code>indexOf()</code> є регістрозалежним. Наприклад, вираз нижче повертає <code>-1</code>:</p>
+
+<pre class="brush: js">'Непозбувна бентега'.indexOf('Бентега');  // вертає -1
+</pre>
+
+<h3 id="Перевірка_наявності_підрядка">Перевірка наявності підрядка</h3>
+
+<p>Зважте на те, що <code>0</code> не обчислюється як <code>true</code>, а <code>-1</code> не обчислюється як <code>false</code>. Отже, належить у явний спосіб порівнювати значення, що повертається методом <code>indexOf()</code>, зі значенням <code>-1</code>:</p>
+
+<pre class="brush: js">'Непозбувна бентега'.indexOf('бентега') !== -1;  // true
+'Непозбувна бентега'.indexOf('Бентега') !== -1; // false
+~('Непозбувна бентега'.indexOf('Непозбувний')) // 0, тобто, хибне значення</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_indexOf">Використання <code>indexOf()</code></h3>
+
+<p>Наступний приклад використовує <code>indexOf()</code>, щоб знайти значення у рядку <code>"абабагаламага"</code>.</p>
+
+<pre class="brush: js">const str = '<code>абабагаламага</code>'
+
+console.log('Індекс першої г з початку дорівнює ' + str.indexOf('г'))   // виводить 5
+console.log('Індекс "баба" з початку дорівнює ' + str.indexOf('баба'))   // виводить 1</pre>
+
+<h3 id="Регістрозалежність_метода_indexOf">Регістрозалежність метода <code>indexOf()</code></h3>
+
+<p>В цьому прикладі наведено два текстових рядки.</p>
+
+<p>Їх вміст є майже однаковим, але у <code>myCapString</code> слова починаються з великої літери. Перший метод <a href="/uk/docs/Web/API/Console/log" title="The Console method log() outputs a message to the web console."><code>console.log()</code></a> виводить <code>13</code>. Але, через те, що метод <code>indexOf()</code> чутливий до регістру, рядок <code>"камамбер"</code> не знаходиться у <code>myCapString</code>, а отже, другий метод <code>console.log()</code> виводить <code>-1</code>.</p>
+
+<pre class="brush: js">var myString = 'брі, дорблю, камамбер';
+var myCapString = 'Брі, Дорблю, Камамбер';
+
+console.log('myString.indexOf("камамбер") дорівнює ' + myString.indexOf('камамбер'))
+// виводить 13
+console.log('myCapString.indexOf("камамбер") дорівнює ' + myCapString.indexOf('камамбер'))
+// виводить -1</pre>
+
+<h3 id="Використання_indexOf_для_підрахунку_кількості_вживань_літери_у_рядку">Використання <code>indexOf()</code> для підрахунку кількості вживань літери у рядку</h3>
+
+<p>Наступний приклад присвоює змінній <code>count</code> число вживать літери <code>с</code> у рядку <code>str</code>:</p>
+
+<pre class="brush: js">const str = 'Буває, часом сліпну від краси.'
+let count = 0
+let position = str.indexOf('с')
+
+while (position !== -1) {
+  count++
+  position = str.indexOf('с', position + 1)
+}
+
+console.log(count)  // виводить 3</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.String.indexOf")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("String.prototype.includes()")}}</li>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/italics/index.html b/files/uk/web/javascript/reference/global_objects/string/italics/index.html
new file mode 100644
index 0000000000..9d66e85e66
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/italics/index.html
@@ -0,0 +1,65 @@
+---
+title: String.prototype.italics()
+slug: Web/JavaScript/Reference/Global_Objects/String/italics
+tags:
+  - JavaScript
+  - String
+  - метод
+  - не рекомендований
+translation_of: Web/JavaScript/Reference/Global_Objects/String/italics
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p>Метод <strong><code>italics()</code></strong> створює HTML-елемент <a href="/uk/docs/Web/HTML/Element/i" title="HTML-елемент &lt;i> відображає текст, що з якихось причин виділяється серед звичайного тексту."><code>&lt;i&gt;</code></a>, який відображає рядок курсивом.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.italics()</code></pre>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Рядок, що містить HTML-елемент <a href="/uk/docs/Web/HTML/Element/i" title="HTML-елемент &lt;i> відображає текст, що з якихось причин виділяється серед звичайного тексту."><code>&lt;i&gt;</code></a>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>italics()</code> вбудовує рядок у тег <code>&lt;i&gt;</code>: <code>"&lt;i&gt;str&lt;/i&gt;"</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_italics">Використання <code>italics()</code></h3>
+
+<p>Наступний приклад використовує рядкові методи, щоб змінити форматування рядка:</p>
+
+<pre class="brush: js">var worldString = 'Всім привіт';
+console.log(worldString.blink());  // &lt;blink&gt;Всім привіт&lt;/blink&gt;
+console.log(worldString.bold());  // &lt;b&gt;Всім привіт&lt;/b&gt;
+console.log(worldString.italics()); // &lt;i&gt;Всім привіт&lt;/i&gt;
+console.log(worldString.strike());  // &lt;strike&gt;Всім привіт&lt;/strike&gt;
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.italics', 'String.prototype.italics')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.italics")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.blink()")}}</li>
+ <li>{{jsxref("String.prototype.bold()")}}</li>
+ <li>{{jsxref("String.prototype.strike()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/lastindexof/index.html b/files/uk/web/javascript/reference/global_objects/string/lastindexof/index.html
new file mode 100644
index 0000000000..e307125881
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/lastindexof/index.html
@@ -0,0 +1,107 @@
+---
+title: String.prototype.lastIndexOf()
+slug: Web/JavaScript/Reference/Global_Objects/String/lastIndexOf
+tags:
+  - JavaScript
+  - Prototype
+  - String
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/String/lastIndexOf
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>lastIndexOf()</code></strong> повертає у об'єкті {{jsxref("String")}}, що його викликав, індекс останнього вживання вказаного значення. Пошук здійснюється з кінця рядка, починаючи з індекса <code>fromIndex</code>. Повертає -1, якщо значення не було знайдене.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/string-lastindexof.html", "shorter")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.lastIndexOf(<var>searchValue</var>[, <var>fromIndex</var>])</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>searchValue</code></dt>
+ <dd>Рядок, що є шуканим значенням. Якщо <code>searchValue</code> є порожнім рядком, то повертається <code>fromIndex</code>.</dd>
+ <dt><code>fromIndex </code>{{optional_inline}}</dt>
+ <dd>Індекс останнього символу у рядку, який розглядатиметься як початок збігу. Значенням за замовчуванням є <code>+Infinity</code>. Якщо <code>fromIndex &gt;= str.length</code>, пошук здійснюється по всьому рядку. Якщо <code>fromIndex &lt; 0</code>, то результат буде той самий, що і за <code>fromIndex = 0</code>.</dd>
+</dl>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>Індекс останнього знайденого збігу (першого з кінця); якщо збігу не знайдено, вертає значення <strong>-1</strong>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Символи рядка мають індекси зліва направо. Індексом першого символу є <code>0</code>, а індексом останнього <code>str.length - 1</code>.</p>
+
+<pre class="brush: js">'морок'.lastIndexOf('о');      // вертає  3
+'морок'.lastIndexOf('о', 2);   // вертає  1
+'морок'.lastIndexOf('о', 0);   // вертає -1
+'морок'.lastIndexOf('ф');      // вертає -1
+'морок'.lastIndexOf('м', -5);  // вертає  0
+'морок'.lastIndexOf('м', 0);   // вертає  0
+'морок'.lastIndexOf('');       // вертає  5
+'морок'.lastIndexOf('', 2);    // вертає  2
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Заувага:</strong> <code>'баба'.lastIndexOf('ба', 2)</code> поверне 2, а не 0, оскільки fromIndex обмежує лише початок збігу.</p>
+</div>
+
+<h3 id="Регістрозалежність_метода_lastIndexOf">Регістрозалежність метода <code>lastIndexOf()</code></h3>
+
+<p>Метод <code>lastIndexOf()</code> чутливий до регістру. Наприклад, наступний вираз вертає -1:</p>
+
+<pre class="brush: js">'Брі, Дорблю, Камамбер'.lastIndexOf('дорблю');  // вертає -1</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_indexOf_та_lastIndexOf">Використання <code>indexOf()</code> та <code>lastIndexOf()</code></h3>
+
+<p>Наступний приклад використовує {{jsxref("String.prototype.indexOf()", "indexOf()")}} та <code>lastIndexOf()</code>, щоб знайти значення у рядку <code>"абабагаламага</code><code>"</code>.</p>
+
+<pre class="brush: js">var anyString = 'абабагаламага';
+
+console.log('Індекс першого "га" з початку дорівнює ' + anyString.indexOf('га'));
+// виводить 5
+console.log('Індекс першого "га" з кінця дорівнює ' + anyString.lastIndexOf('га'));
+// виводить 11
+console.log('Індекс "баба" з початку дорівнює ' + anyString.indexOf('баба'));
+// виводить 1
+console.log('Індекс "баба" з кінця дорівнює ' + anyString.lastIndexOf('баба'));
+// виводить 1</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.lastindexof', 'String.prototype.lastIndexOf')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.lastIndexOf")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+ <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/length/index.html b/files/uk/web/javascript/reference/global_objects/string/length/index.html
new file mode 100644
index 0000000000..b52a468f96
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/length/index.html
@@ -0,0 +1,105 @@
+---
+title: string.length
+slug: Web/JavaScript/Reference/Global_Objects/String/length
+tags:
+  - JavaScript
+  - Property
+  - Prototype
+  - String
+  - Властивість
+  - Довідка
+  - довжина
+  - рядок
+translation_of: Web/JavaScript/Reference/Global_Objects/String/length
+---
+<div>{{JSRef}}</div>
+
+<p>Властивість <strong><code>length</code></strong> об'єкта {{jsxref("String")}} містить довжину рядка у кодових одиницях UTF-16. Це властивість-значення рядкових екземплярів, доступна лише для читання.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/string-length.html", "shorter")}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.length</code></pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Ця властивість повертає кількість кодових одиниць (англ. code unit), які утворюють рядок. У JavaScript для рядків використовується кодування {{interwiki("wikipedia", "UTF-16")}}, яке вживає одну 16-бітну (двобайтну) кодову одиницю для передачі більшості загальновживаних символів, але для менш поширених воно потребує двох кодових одиниць. Отже, значення, <code>length</code> та справжня кількість символів рядка не завжди збігаються.</p>
+
+<p>У ECMAScript 2016 (вер. 7) було встановлено максимальну довжину у <code>2^53 - 1</code> елементів. Попередньо не було визначено ніякої максимальної довжини. У Firefox рядки мають максимальну довжину <code>2**30 - 2</code> (~1ГБ). У версіях, більш ранніх за Firefox 65, максимальна довжина складала <code>2**28 - 1</code> (~256МБ).</p>
+
+<p>Для порожнього рядка <code>length</code> дорівнює 0.</p>
+
+<p>Статична властивість <code>String.length</code> не пов'язана з довжиною рядків, це арність функції <code>String</code> (загалом, це кількість формальних параметрів, що вона має), яка дорівнює 1.</p>
+
+<h2 id="Юнікод">Юнікод</h2>
+
+<p>Оскільки `length` рахує кодові одиниці замість символів, якщо вам треба отримати кількість символів, вам знадобиться щось таке:</p>
+
+<pre class="brush: js">function getCharacterLength (str) {
+  // Ітератор рядка, що тут використовується, перебирає символи,
+  // а не просто кодові одиниці
+  return [...str].length;
+}
+
+console.log(getCharacterLength('A\uD87E\uDC04Z')); // 3
+
+// Це не рекомендується, але ви можете додати його до кожного рядка ось так:
+
+Object.defineProperty(String.prototype, 'charLength', {
+  get () {
+    return getCharacterLength(this);
+  }
+});
+
+console.log('A\uD87E\uDC04Z'.charLength); // 3</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Типове_використання">Типове використання</h3>
+
+<pre class="brush: js">var x = 'Вогнелис';
+let empty = '';
+
+console.log(x + ' має довжину ' + x.length + ' кодових одиниць');
+/* "Вогнелис має довжину 8 кодових одиниць" */
+
+console.log('Порожній рядок має довжину ' + empty.length);
+// очікуваний результат: "Порожній рядок має довжину 0"
+</pre>
+
+<h3 id="Присвоювання_довжини">Присвоювання довжини</h3>
+
+<pre class="brush: js">let myString = "проліски";
+
+// Спроба присвоїти значення властивості рядка .length не має видимого ефекту.
+myString.length = 4;
+console.log(myString);
+// очікуваний результат: "проліски"
+console.log(myString.length);
+// очікуваний результат: 8</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.length")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="http://developer.teradata.com/blog/jasonstrimpel/2011/11/javascript-string-length-and-internationalizing-web-applications">String.length у JavaScript та уміжнароднення веб-додатків</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/link/index.html b/files/uk/web/javascript/reference/global_objects/string/link/index.html
new file mode 100644
index 0000000000..4f20bce4e0
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/link/index.html
@@ -0,0 +1,72 @@
+---
+title: String.prototype.link()
+slug: Web/JavaScript/Reference/Global_Objects/String/link
+tags:
+  - JavaScript
+  - String
+  - застарілий
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/String/link
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p>Метод <strong><code>link()</code></strong> створює рядок, що відображає код для HTML-елемента <a href="/uk/docs/Web/HTML/Element/a" title="HTML-елемент &lt;a> (або елемент якір), що має атрибут href, створює гиперпосилання на веб-сторінки, файли, електронні адреси, розташування на тій самій сторінці, чи будь-що інше, на що може посилатись URL."><code>&lt;a&gt;</code></a>, для використання у якості гіпертекстового посилання на інший URL.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.link(<var>url</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>Будь-який рядок, що визначає атрибут <code>href</code> тега <code>&lt;a&gt;</code>; він має бути коректним локатором ресурсу (відносним чи абсолютним), усі символи <code>&amp;</code> мають бути екрановані як <code>&amp;amp;</code>, а усі символи <code>"</code> - як <code>&amp;quot;</code>.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Рядок, що містить HTML-елемент <a href="/uk/docs/Web/HTML/Element/a" title="HTML-елемент &lt;a> (або елемент якір), що має атрибут href, створює гиперпосилання на веб-сторінки, файли, електронні адреси, розташування на тій самій сторінці, чи будь-що інше, на що може посилатись URL."><code>&lt;a&gt;</code></a>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Використовуйте метод <code>link()</code>, щоб створити HTML-код для гіпертекстового посилання. Повернений рядок можна додати у document через <a href="/uk/docs/Web/API/Document/write" title="Метод document.write() записує рядок тексту у поток документу, відкритого методом document.open()."><code>document.write()</code></a> або <a href="/uk/docs/Web/API/Element/innerHTML" title="Властивість елемента innerHTML повертає або присвоює розмітку HTML чи XML, що міститься всередині елемента."><code>element.innerHTML</code></a>.</p>
+
+<p>Посилання, створені методом <code>link()</code>, стають елементами масиву <code>links</code> об'єкта <code>document</code>. Дивіться <a href="/uk/docs/Web/API/Document/links" title="Властивість лише для читання links інтерфейсу Document повертає колекцію усіх елементів &lt;area> та &lt;a> у документі зі значеннями атрибута href."><code>document.links</code></a>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_link">Використання <code>link()</code></h3>
+
+<p>Наступний приклад відображаєє слово "MDN" як гіпертекстове посилання, яке повертає користувача на сайт Mozilla Developer Network.</p>
+
+<pre class="brush: js">var hotText = 'MDN';
+var URL = 'https://developer.mozilla.org/';
+
+console.log('Натисніть, щоб повернутись на ' + hotText.link(URL));
+// Натисніть, щоб повернутись на &lt;a href="https://developer.mozilla.org/"&gt;MDN&lt;/a&gt;
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.link', 'String.prototype.link')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.link")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.anchor()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/localecompare/index.html b/files/uk/web/javascript/reference/global_objects/string/localecompare/index.html
new file mode 100644
index 0000000000..9fe8fac165
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/localecompare/index.html
@@ -0,0 +1,173 @@
+---
+title: String.prototype.localeCompare()
+slug: Web/JavaScript/Reference/Global_Objects/String/localeCompare
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - String
+  - Довідка
+  - Уміжнароднення
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/String/localeCompare
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>localeCompare()</code></strong> повертає число, яке вказує, як має розташуватись рядок відносно вказаного (того, що передано як параметр) у відсортованій за зростанням послідовності: перед, після, чи вони однакові.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/string-localecompare.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<p>Нові арґументи <code>locales</code> та <code>options</code> дають можливість вказати мову, абетковий порядок сортування якої має бути застосовано, та налаштувати механізм порівняння рядків. Раніше, коли цих арґументів ще не було, механізм порівняння рядків та порядок їх сортування цілковито залежав від реалізації.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>referenceStr</var>.localeCompare(<var>compareString</var>[, <var>locales</var>[, <var>options</var>]])</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<p>Перевіряйте в <a href="#Підтримка_веб-переглядачами">таблиці сумісності</a> наявність підтримки арґументів <code>locales</code> та <code>options</code>, а також подивіться на <a href="#Перевірка_наявності_підтримки_додаткових_арґументів">код для перевірки</a> наявності такої підтримки.</p>
+
+<dl>
+ <dt><code>compareString</code></dt>
+ <dd>Рядок, з яким буде здійснено порівняння.</dd>
+</dl>
+
+<div>
+<p>Аргументи <code>locales</code> та <code>options</code> налаштовують поведінку функції та дозволяють застосункам визначати мову, конвенції якої щодо форматування мають використовуватись. У тих реалізаціях, які ігнорують аргументи <code>locales</code> та <code>options</code>, локаль, що використовується, та форма поверненого рядка повністю залежать від реалізації.</p>
+
+<p>Деталі цих параметрів та як їх використовувати дивіться у статті <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Collator/Collator">Конструктор <code>Intl.Collator()</code></a>.</p>
+</div>
+
+<h3 id="Вертає">Вертає</h3>
+
+<ul>
+ <li><strong>Від'ємне</strong> число, якщо рядок має розташуватись <em>перед</em> <strong><code>compareString</code></strong>;</li>
+ <li><strong>Додатне</strong> число, якщо рядок має розташуватись <em>після</em> <strong><code>compareString</code></strong>;</li>
+ <li><strong>Нуль</strong>, якщо рядки <em>тотожні</em>.</li>
+</ul>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Вертає ціле число, що вказує, чи рядок <strong>referenceStr</strong> розташований перед <strong>compareStr</strong>, після <strong>compareStr</strong>, чи є еквівалентним <strong>compareStr</strong>.</p>
+
+<ul>
+ <li>Від'ємне, коли <strong>referenceStr</strong> розташований перед <strong>compareStr</strong></li>
+ <li>Додатне, коли <strong>referenceStr</strong> розташований після <strong>compareStr</strong></li>
+ <li>Вертає 0, якщо вони еквівалентні</li>
+</ul>
+
+<p><strong>НЕ ПОКЛАДАЙТЕСЬ на точні повернені значення -1 чи 1. </strong>Від'ємні та додатні цілочисельні результати різняться між переглядачами (а також між версіями переглядачів), тому що специфікація W3C вимагає лише від'ємних та додатних значень. Деякі переглядачі можуть повернути -2 чи 2, чи навіть деякі інші від'ємні та додатні значення.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_localeCompare">Використання <code>localeCompare()</code></h3>
+
+<pre class="brush: js">// Вертає від'ємне значення, позаяк літера «a» розташована раніше за «b»
+'a'.localeCompare('c');  // -2 чи -1 (або інше від'ємне значення)
+
+// Вертає додатне значення, позаяк за абеткою слово "check" слід розташувати після "against"
+'check'.localeCompare('against');  // 2 чи 1 (або інше додатне значення)
+
+// Вертає нуль, позаяк рядки однакові
+'a'.localeCompare('a');  // 0
+</pre>
+
+<h3 id="Сортування_масиву">Сортування масиву</h3>
+
+<p>Метод <code>localeCompare()</code> надає можливість регістронезалежного сортування масивів:</p>
+
+<pre class="brush: js">var items = ['réservé', 'Premier', 'Cliché', 'communiqué', 'café', 'Adieu'];
+items.sort((a, b) =&gt; a.localeCompare(b, 'fr', {ignorePunctuation: true})); // ['Adieu', 'café', 'Cliché', 'communiqué', 'Premier', 'réservé']</pre>
+
+<h3 id="Перевірка_наявності_підтримки_додаткових_арґументів_веб-переглядачем">Перевірка наявності підтримки додаткових арґументів веб-переглядачем</h3>
+
+<p>Арґументи <code>locales</code> та <code>options</code> досі не підтримуються всіма переглядачами. Тож, з метою з'ясування наявності підтримки можна скористатися тим, що метод викидає (лише за наявності такої підтримки згаданих арґументів) виняток {{jsxref("Global_Objects/RangeError", "RangeError")}}, якщо параметр <code>locales</code> не вказує належного мовного коду. Наприклад, вкажемо напевне відсутній код "i":</p>
+
+<pre class="brush: js">function checkLocaleCompareSupportsLocales() {
+  try {
+    'foo'.localeCompare('bar', 'i');
+  } catch (e) {
+    return e.name === 'RangeError';
+  }
+  return false;
+}
+</pre>
+
+<h3 id="Використання_locales">Використання <code>locales</code></h3>
+
+<p>Порівняння рядків за допомогою <code>localeCompare()</code> узалежнено від мови. Для застосування належного для вживаної мови (наприклад, для мови користувацького інтерфейсу вашого застосунку) порядку сортування, не забудьте вказати відповідний мовний код (або й запасні мовні коди) через параметр <code>locales</code>:</p>
+
+<pre class="brush: js">// виводить від'ємне значення (у німецькій абетці літера «ä» розташована раніше «z»)
+console.log('ä'.localeCompare('z', 'de'));
+
+// виводить додатне значення (у шведській абетці літера «ä» розташована пізніше «z»)
+console.log('ä'.localeCompare('z', 'sv'));
+</pre>
+
+<h3 id="Використання_options">Використання <code>options</code></h3>
+
+<p>Арґумент <code>options</code> надає можливість додаткового налаштування способу порівняння рядків методом <code>localeCompare()</code>:</p>
+
+<pre class="brush: js">// У німецькій мові літера «ä» є похідною від базової літери «a»
+// виводить 0
+console.log('ä'.localeCompare('a', 'de', {sensitivity: 'base'}));
+
+// У шведській мові «ä» та «a» є окремими базовими літерами
+// виводить додатне значення
+console.log('ä'.localeCompare('a', 'sv', {sensitivity: 'base'}));
+</pre>
+
+<h3 id="Сортування_чисел">Сортування чисел</h3>
+
+<pre class="brush: js">// за замовчуванням, "2" &gt; "10"
+console.log("2".localeCompare("10")); // 1
+
+// сортування за допомогою options:
+console.log("2".localeCompare("10", undefined, {numeric: true})); // -1
+
+// сортування за допомогою тега locales:
+console.log("2".localeCompare("10", "en-u-kn-true")); // -1</pre>
+
+<h2 id="Швидкодія">Швидкодія</h2>
+
+<p>З огляду на швидкодію, для порівняння величезної кількості рядків (наприклад, під час сортування великих масивів) ліпше створювати об'єкт <code>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</code> та використовувати функцію, надану його властивістю <code>{{jsxref("Collator.prototype.compare", "compare")}}</code>:</p>
+
+<pre class="brush: js">function sortLargeStringArray(array, locale) {
+  var collator = new Intl.Collator(locale);
+  array.sort(collator.compare);
+}
+
+// sortLargeStringArray([ … ], 'uk');
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-String.prototype.localeCompare', 'String.prototype.localeCompare')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.localeCompare")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/match/index.html b/files/uk/web/javascript/reference/global_objects/string/match/index.html
new file mode 100644
index 0000000000..dfc6bf5f6b
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/match/index.html
@@ -0,0 +1,194 @@
+---
+title: String.prototype.match()
+slug: Web/JavaScript/Reference/Global_Objects/String/match
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - String
+  - Довідка
+  - Регулярний вираз
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/String/match
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>match()</code></strong> шукає та повертає (якщо є) збіги <em>рядка</em> із зазначеним <a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions">регулярним виразом</a>.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/string-match.html", "shorter")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>str</var>.match(<var>regexp</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>regexp</code></dt>
+ <dd>Об'єкт регулярного виразу.</dd>
+ <dd>Якщо передати значення іншого типу, воно буде неявно перетворене на {{jsxref("RegExp")}} за допомогою оператора <code>new RegExp(<em>regexp</em>).</code></dd>
+ <dd>Якщо жодного параметра не вказано, метод поверне {{jsxref("Array","масив")}} з одним елементом — порожнім рядком: <code>[""]</code>.</dd>
+</dl>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>{{jsxref("Array","Масив")}}, чий вміст залежить від наявності чи відсутності глобального (<code>g</code>) прапора, або {{jsxref("null")}}, якщо жодних збігів не знайдено.</p>
+
+<ul>
+ <li>Якщо використовується прапор <code>g</code>, метод поверне усі результати, що збігаються з повним регулярним виразом, але не поверне захоплені групи.</li>
+ <li>Якщо прапор <code>g</code> не використовується, метод поверне лише перший повний збіг та захоплені групи, які він містить. У цьому випадку повернений елемент матиме додаткові властивості, описані нижче.</li>
+</ul>
+
+<h4 id="Додаткові_властивості">Додаткові властивості</h4>
+
+<p>Як пояснювалось вище, деякі результати містять наступні додаткові властивості:</p>
+
+<dl>
+ <dt><code>groups</code></dt>
+ <dd>Масив іменованих захоплених груп або {{jsxref("undefined")}}, якщо іменовані групи не були визначені. Дивіться <a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">Групи та діапазони</a>, щоб дізнатись більше.</dd>
+ <dt><code>index</code></dt>
+ <dd>Індекс пошуку, за яким був знайдений результат.</dd>
+ <dt><code>input</code> </dt>
+ <dd>Копія рядка, в якому здійснювався пошук.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо регулярний вираз не позначено прапорцем <code>g</code>, виклик <code>str.match()</code> повертає такий самий результат, що й {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}}.</p>
+
+<h3 id="Інші_методи">Інші методи</h3>
+
+<ul>
+ <li>Якщо вам треба з'ясувати, чи відповідає рядок регулярному виразові {{jsxref("RegExp")}}, скористайтеся методом {{jsxref("RegExp.prototype.test()", "RegExp.test()")}}.</li>
+ <li>Якщо вас цікавить лише перший збіг, можете натомість використати {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}}.</li>
+ <li>Якщо ви хочете отримати захоплені групи, а прапорець <code>g</code> встановлено, вам потрібен метод {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}} або {{jsxref("String.prototype.matchAll()")}}.</li>
+</ul>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_match">Використання <code>match()</code></h3>
+
+<p>У прикладі нижче метод <code>match()</code> задіяно, щоб знайти слово <code>«розділ»</code>, за ним одну чи кілька цифр, далі десяткова крапка та 0 чи більше числових символів.</p>
+
+<p>Регулярний вираз позначено прапорцем <code>i</code>, що означає відсутність розрізнювання великих та малих літер.</p>
+
+<pre class="brush: js">var str = 'Докладніше див. розділ 3.4.5.1';
+var re = /див\. (розділ \d+(\.\d)*)/i;
+var found = str.match(re);
+
+console.log(found);
+
+// Виводить:
+// [
+//   0: "див. розділ 3.4.5.1"
+//   1: "розділ 3.4.5.1"
+//   2: ".1"
+//   index: 11
+//   input: "Докладніше див. розділ 3.4.5.1"
+// ]
+
+// Рядок "див. розділ 3.4.5.1" є повним збігом.
+// Рядок "розділ 3.4.5.1" — це підрядок, захоплений підвиразом '(розділ \d+(\.\d)*)'
+// Рядок ".1" — це останній підрядок, захоплений підвиразом '(\.\d)'
+// Властивість 'index' (11) — це зсув підрядка, що відповідає регулярному виразові
+// Властивість 'input' — це повна копія досліджуваного рядка str
+</pre>
+
+<h3 id="Вживання_прапорців_i_та_g_із_методом_match">Вживання прапорців <code>i</code> та <code>g</code> із методом <code>match()</code></h3>
+
+<p>Приклад нижче засвідчує дію прапорців <code>i</code> (ignore case — регістронезалежний режим) та <code>g</code> (global — пошук усіх збігів, а не тільки першого) при використанні метода <code>match()</code>. Будуть повернені усі літери від <code>A</code> до <code>E</code> та від <code>a</code> до <code>e</code>, кожна як окремий елемент масиву.</p>
+
+<pre class="brush: js">var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+var regexp = /[A-E]/gi;
+var matches_array = str.match(regexp);
+
+console.log(matches_array);
+// ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e']
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Заувага:</strong> Дивіться також метод {{jsxref("String.prototype.matchAll()")}} та <a href="https://wiki.developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/String/g/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Advanced_searching_with_flags">Складний пошук за допомогою прапорів</a>.</p>
+</div>
+
+<h3 id="Використання_іменованих_груп">Використання іменованих груп</h3>
+
+<p>У переглядачах, які підтримують іменовані захоплені групи, наступний код захопить <code>"їжак"</code> чи <code>"кіт"</code> у групу на ім'я <code>"тварина"</code>:</p>
+
+<pre class="brush: js">let paragraph = 'Єхидна, ґава, їжак ще й шиплячі плазуни бігцем форсують Янцзи.';
+
+let capturingRegex = /(?&lt;тварина&gt;їжак|кіт) ще й/;
+found = paragraph.match(capturingRegex);
+console.log(found.groups); // {тварина: "їжак"}</pre>
+
+<h3 id="Використання_match_без_параметрів">Використання <code>match()</code> без параметрів</h3>
+
+<pre class="brush: js">var str = "Я — Дух одвічної стихії";
+
+// вертає ["", index: 0, input: "Я — Дух одвічної стихії"]
+str.match();</pre>
+
+<h3 id="Параметр_відмінного_від_RegExp_типу">Параметр відмінного від <code>RegExp</code> типу</h3>
+
+<p>Якщо переданий параметр являє собою рядок або число, його буде перетворено на об'єкт {{jsxref("RegExp")}} шляхом неявного виклику <code>new RegExp(obj)</code>.</p>
+
+<p>Якщо це додатнє число, його знаком <code>+</code> буде знехтувано, проте для від'ємного числа знак <code>-</code> стане частиною регулярного виразу:</p>
+
+<pre class="brush: js">var str1 = "NaN означає «не число». Нескінченність у JavaScript має дві форми: -Infinity та +Infinity.",
+    str2 = "Моїй бабці 65 років, а дідусеві — 63.",
+    str3 = "Незмінна величина null позначає відсутність очікуваного значення.";
+
+str1.match("число");    // "число" є рядком; вертає ["число"]
+str1.match(NaN);        // величина NaN є числом; вертає ["NaN"]
+str1.match(Infinity);   // величина Infinity також є числом; вертає ["Infinity"]
+str1.match(+Infinity);  // вертає ["Infinity"]
+str1.match(-Infinity);  // вертає ["-Infinity"]
+str2.match(65);         // вертає ["65"]
+str2.match(+65);        // додатнє число; вертає ["65"]
+str3.match(null);       // вертає ["null"]</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.match', 'String.prototype.match')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<h3 id="Базова_підтримка_методу_match">Базова підтримка методу <samp>match()</samp></h3>
+
+<div class="hidden">
+<p>Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.String.match")}}</p>
+
+<h3 id="Підтримка_іменованих_груп">Підтримка іменованих груп</h3>
+
+<p>{{Compat("javascript.builtins.RegExp.named_capture_groups")}}</p>
+
+<h2 id="Зауваги_щодо_Firefox">Зауваги щодо Firefox</h2>
+
+<ul>
+ <li>Аргумент <code>flags</code> був нестандартним другим аргументом, доступним лише у Firefox: <code><var>str</var>.match(<var>regexp, flags</var>)</code>. Він був прибраний, починаючи з Firefox 49.</li>
+ <li>У Firefox 27 цей метод було узгоджено зі специфікацією ECMAScript. Коли <code>match()</code> викликано із глобальним регулярним виразом, властивість {{jsxref("RegExp.lastIndex")}} (якщо зазначено) скидається до <code>0</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=501739">bug 501739</a>).</li>
+</ul>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.matchAll()")}}</li>
+ <li>{{jsxref("RegExp")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec()")}}</li>
+ <li>{{jsxref("RegExp.prototype.test()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/matchall/index.html b/files/uk/web/javascript/reference/global_objects/string/matchall/index.html
new file mode 100644
index 0000000000..396fb3b2bc
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/matchall/index.html
@@ -0,0 +1,143 @@
+---
+title: String.prototype.matchAll()
+slug: Web/JavaScript/Reference/Global_Objects/String/matchAll
+tags:
+  - JavaScript
+  - String
+  - Регулярні Вирази
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/String/matchAll
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>matchAll()</code></strong> повертає ітератор з усіма збігами <em>рядка</em> з <em><a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions">регулярним виразом</a></em>, а також <a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">захоплені групи</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-matchall.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><var>str</var>.matchAll(<var>regexp</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>regexp</var></code></dt>
+ <dd>
+ <p>Об'єкт регулярного виразу.</p>
+
+ <p>Якщо передано об'єкт <code>obj</code>, який не є регулярним виразом, він неявно перетворюється на {{jsxref("RegExp")}} за допомогою <code>new RegExp(<var>obj</var>)</code>.</p>
+
+ <p>Об'єкт <code>RegExp</code> повинен мати прапор <code>/g</code>, інакше буде викинуто помилку <code>TypeError</code>.</p>
+ </dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p><a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators">Ітератор</a> (ітерабельний об'єкт, який не можна повторно запустити).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Regexp.exec_та_matchAll">Regexp.exec() та matchAll()</h3>
+
+<p>До появи у JavaScript методу <code>matchAll</code> можна було використовувати виклики <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">regexp.exec</a> (а також регулярні вирази з прапором <code>/g</code>) у циклі, щоб отримати усі збіги:</p>
+
+<pre class="brush: js notranslate">const regexp = RegExp('фу[а-я]*','g');
+const str = 'настільний футбол, фусбол';
+let match;
+
+while ((match = regexp.exec(str)) !== null) {
+  console.log(`Знайдено ${match[0]} початок=${match.index} кінець=${regexp.lastIndex}.`);
+  // виведе: "Знайдено футбол початок=11 кінець=17."
+  // виведе: "Знайдено фусбол початок=19 кінець=25."
+}</pre>
+
+<p>З методом <code>matchAll</code> можна уникнути використання циклу {{jsxref("Statements/while", "while")}} та методу <code>exec</code> з <code>g</code>.</p>
+
+<p>Замість цього, використовуючи <code>matchAll</code>, ви отримуєте ітератор, який можна використовувати з більш зручними конструкціями {{jsxref("Statements/for...of", "for...of")}}, {{jsxref("Operators/Spread_syntax", "розкладанням масиву")}} чи {{jsxref("Array.from()")}}:</p>
+
+<pre class="brush: js notranslate">const regexp = RegExp('фу[а-я]*','g');
+const str = 'настільний футбол, фусбол';
+const matches = str.matchAll(regexp);
+
+for (const match of matches) {
+  console.log(`Знайдено ${match[0]} початок=${match.index} кінець=${match.index + match[0].length}.`);
+}
+// виведе: "Знайдено футбол початок=11 кінцець=17."
+// виведе: "Знайдень фусбол початок=19 кінець=25."
+
+// Ітератор matches є вичерпаним після перебору for..of
+// Викличте matchAll ще раз, щоб створити новий ітератор
+Array.from(str.matchAll(regexp), m =&gt; m[0]);
+// Array [ "футбол", "фусбол" ]</pre>
+
+<p>Метод <code>matchAll</code> викине виняток, якщо прапор <code>g</code> відсутній.</p>
+
+<pre class="brush: js notranslate">const regexp = RegExp('[а-в]','');
+const str = 'абв';
+str.matchAll(regexp);
+// TypeError
+</pre>
+
+<p><code>matchAll</code> робить внутрішній клон <code><var>regexp</var></code><var>,</var> тому, на відміну від {{jsxref("Global_Objects/RegExp/exec", "regexp.exec()")}}, <code>lastIndex</code> не змінюється під час пошуку.</p>
+
+<pre class="brush: js notranslate">const regexp = RegExp('[а-в]','g');
+regexp.lastIndex = 1;
+const str = 'абв';
+Array.from(str.matchAll(regexp), m =&gt; `${regexp.lastIndex} ${m[0]}`);
+// Array [ "1 б", "1 в" ]</pre>
+
+<h3 id="Кращий_доступ_до_захоплених_груп_ніж_у_String.prototype.match">Кращий доступ до захоплених груп (ніж у String.prototype.match())</h3>
+
+<p>Ще одна приваблива причина використовувати <code>matchAll</code> - покращений доступ до захоплених груп.</p>
+
+<p>Захоплені групи ігноруються при використанні {{jsxref("Global_Objects/String/match", "match()")}} з глобальним прапором <code>/g</code>:</p>
+
+<pre class="brush: js notranslate">let regexp = /т(е)(ст(\d?))/g;
+let str = 'тест1тест2';
+
+str.match(regexp);
+// Array ['тест1', 'тест2']</pre>
+
+<p>Використовуючи <code>matchAll</code>, ви можете легко звертатись до захоплених груп:</p>
+
+<pre class="brush: js notranslate">let array = [...str.matchAll(regexp)];
+
+array[0];
+// ['тест1', 'е', 'ст1', '1', index: 0, input: 'тест1тест2', length: 4]
+array[1];
+// ['тест2', 'е', 'ст2', '2', index: 5, input: 'тест1тест2', length: 4]
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.matchall', 'String.prototype.matchAll')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.matchAll")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.match()")}}</li>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions">Використання регулярних виразів у JavaScript</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">Захоплені групи</a></li>
+ <li>{{jsxref("RegExp")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec()")}}</li>
+ <li>{{jsxref("RegExp.prototype.test()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/normalize/index.html b/files/uk/web/javascript/reference/global_objects/string/normalize/index.html
new file mode 100644
index 0000000000..15b56e2bad
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/normalize/index.html
@@ -0,0 +1,226 @@
+---
+title: String.prototype.normalize()
+slug: Web/JavaScript/Reference/Global_Objects/String/normalize
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - String
+  - Unicode
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/String/normalize
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>normalize()</code></strong> повертає рядок у формі нормалізації Юнікоду.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-normalize.html", "taller")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.normalize([<var>form</var>])</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>form</var></code> {{optional_inline}}</dt>
+ <dd>
+ <p>Одне зі значень <code>"NFC"</code>, <code>"NFD"</code>, <code>"NFKC"</code> або <code>"NFKD"</code>, що вказують форму нормалізації Юнікоду. Якщо не вказана, або дорівнює {{jsxref("undefined")}}, використовується <code>"NFC"</code>.</p>
+
+ <p>Ці значення означають наступне:</p>
+
+ <dl>
+  <dt><code>"NFC"</code></dt>
+  <dd>Канонічна декомпозиція, з подальшою канонічною композицією.</dd>
+  <dt><code>"NFD"</code></dt>
+  <dd>Канонічна декомпозиція.</dd>
+  <dt><code>"NFKC"</code></dt>
+  <dd>Сумісна декомпозиція, з подальшою <em>канонічною</em> композицією.</dd>
+  <dt><code>"NFKD"</code></dt>
+  <dd>Сумісна декомпозиція.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Рядок, що містить форму нормалізації Юнікоду для наданого рядка.</p>
+
+<h3 id="Помилки">Помилки</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Помилка {{jsxref("RangeError")}} викидається, якщо <code>form</code> не є одним з наведених вище значень.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Юнікод присвоює унікальне числове значення, яке називається <em>кодом символа</em>, кожному символу. Наприклад, кодом символа <code>"A"</code> є U+0041. Однак, іноді більше, ніж один код символа, або послідовність кодів, можуть представляти один і той самий абстрактний символ — наприклад, символ <code>"ñ"</code> може бути представлений:</p>
+
+<ul>
+ <li>Єдиним кодом символа U+00F1.</li>
+ <li>Кодом символа <code>"n"</code> (U+006E) з наступним кодом символа для об'єднуючої тильди (U+0303).</li>
+</ul>
+
+<pre class="brush: js">let string1 = '\u00F1';
+let string2 = '\u006E\u0303';
+
+console.log(string1);  //  ñ
+console.log(string2);  //  ñ
+</pre>
+
+<p>Однак, оскільки коди символів відрізняються, порівняння рядків не вважатиме їх рівними. А оскільки кількість кодів символів у цих варіантах різна, то вони навіть мають різні довжини.</p>
+
+<pre class="brush: js">let string1 = '\u00F1';            // ñ
+let string2 = '\u006E\u0303';      // ñ
+
+console.log(string1 === string2); // false
+console.log(string1.length);      // 1
+console.log(string2.length);      // 2
+</pre>
+
+<p>Метод <code>normalize()</code> допомагає вирішити цю проблему, перетворюючи рядок у нормалізовану форму, спільну для усіх послідовностей кодів символів, які представляють однакові символи. Існують дві основні форми нормалізації, одна базується на <strong>канонічній еквівалентності</strong>, а інша на <strong>сумісності</strong>.</p>
+
+<h3 id="Нормалізація_на_основі_канонічної_еквівалентності">Нормалізація на основі канонічної еквівалентності</h3>
+
+<p>В Юнікоді дві послідовності кодів символів канонічно еквівалентні, якщо вони відображають однакові абстрактні символи, і повинні завжди мати однакове візуальне відображення та поведінку (для прикладу, вони завжди повинні сортуватися однаковим чином).</p>
+
+<p>Ви можете скористатись методом <code>normalize()</code>, використовуючи аргументи <code>"NFD"</code> або <code>"NFC"</code>, щоб створити форму рядка, що буде однаковою для усіх канонічно еквівалентних рядків. У наведеному нижче прикладі ми нормалізуємо два відображення символу <code>"ñ"</code>:</p>
+
+<pre class="brush: js">let string1 = '\u00F1';           // ñ
+let string2 = '\u006E\u0303';     // ñ
+
+string1 = string1.normalize('NFD');
+string2 = string2.normalize('NFD');
+
+console.log(string1 === string2); // true
+console.log(string1.length);      // 2
+console.log(string2.length);      // 2
+</pre>
+
+<h4 id="Зєднана_та_розкладена_форми">З'єднана та розкладена форми</h4>
+
+<p>Зауважте, що довжина нормалізованої форми при використанні <code>"NFD"</code> дорівнює <code>2</code>. Це тому, що <code>"NFD"</code> дає вам <strong>розкладену</strong> версію канонічної форми, в якій один код символа розбивається на множину складових. Розкладеною канонічною формою для <code>"ñ"</code> є <code>"\u006E\u0303"</code>.</p>
+
+<p>Ви можете вказати <code>"NFC"</code>, щоб отримати <strong>з'єднану</strong> канонічну форму, в якій множина кодів символів замінюється єдиним кодом символу, де це можливо. З'єднаною канонічною формою для <code>"ñ"</code> є <code>"\u00F1"</code>:</p>
+
+<pre class="brush: js">let string1 = '\u00F1';                           // ñ
+let string2 = '\u006E\u0303';                     // ñ
+
+string1 = string1.normalize('NFC');
+string2 = string2.normalize('NFC');
+
+console.log(string1 === string2);                 // true
+console.log(string1.length);                      // 1
+console.log(string2.length);                      // 1
+console.log(string2.codePointAt(0).toString(16)); // f1</pre>
+
+<h3 id="Нормалізація_на_основі_сумісності">Нормалізація на основі сумісності</h3>
+
+<p>В Юнікоді дві послідовності кодів символів є сумісними, якщо вони представляють однакові абстрактні символи, і мають сприйматися однаково у деяких — але не обов'язково в усіх — застосуваннях.</p>
+
+<p>Усі канонічно еквівалентні послідовності також є сумісними, але не навпаки.</p>
+
+<p>Наприклад:</p>
+
+<ul>
+ <li>код символа U+FB00 відображає <a href="/uk/docs/Glossary/Ligature">лігатуру</a> <code>"ff"</code>. Він сумісний з двома послідовними кодами символів U+0066 (<code>"ff"</code>).</li>
+ <li>код символа U+24B9 відображає символ <code><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-string">"Ⓓ"</span></span></span></span></code>. Він сумісний з кодом символа U+0044 (<code>"D"</code>).</li>
+</ul>
+
+<p>У деяких ситуаціях (таких, як сортування) вони мають сприйматися як еквівалентні, а у деяких (таких, як візуальне відображення) — ні, отже, вони не є канонічно еквівалентними.</p>
+
+<p>Ви можете скористатись методом <code>normalize()</code>, використовуючи аргументи <code>"NFKD"</code> або <code>"NFKC"</code>, щоб створити форму рядка, яка буде однаковою для усіх сумісних рядків:</p>
+
+<pre class="brush: js">let string1 = '\uFB00';
+let string2 = '\u0066\u0066';
+
+console.log(string1);             // ff
+console.log(string2);             // ff
+console.log(string1 === string2); // false
+console.log(string1.length);      // 1
+console.log(string2.length);      // 2
+
+string1 = string1.normalize('NFKD');
+string2 = string2.normalize('NFKD');
+
+console.log(string1);             // ff &lt;- візуальне відображення змінилось
+console.log(string2);             // ff
+console.log(string1 === string2); // true
+console.log(string1.length);      // 2
+console.log(string2.length);      // 2
+</pre>
+
+<p>Застосовуючи сумісну нормалізацію, важливо враховувати, що саме ви намагаєтесь зробити з рядками, оскільки нормалізована форма може не підходити для усіх застосувань. У наведеному вище прикладі нормалізація підходить для пошуку, бо дозволяє користувачу знайти рядок пошуком <code>"f"</code>. Але вона може не підходити для відображення, бо зовнішній вигляд символа відрізняється.</p>
+
+<p>Як і у випадку з канонічною нормалізацією, ви можете застосовувати розкладену або з'єднану форми, передаючи, відповідно, <code>"NFKD"</code> або <code>"NFKC"</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_normalize">Використання <code>normalize()</code></h3>
+
+<pre class="brush: js">// Початковий рядок
+
+// U+1E9B: ЛАТИНСЬКА МАЛА ЛІТЕРА ДОВГА S З КРАПКОЮ ЗГОРИ
+// U+0323: ОБ'ЄДНУЮЧА КРАПКА ВНИЗУ
+let str = '\u1E9B\u0323';
+
+
+// Канонічно-з'єднана форма (NFC)
+
+// U+1E9B: ЛАТИНСЬКА МАЛА ЛІТЕРА ДОВГА S З КРАПКОЮ ЗГОРИ
+// U+0323: ОБ'ЄДНУЮЧА КРАПКА ВНИЗУ
+str.normalize('NFC'); // '\u1E9B\u0323'
+str.normalize();      // такий самий
+
+
+// Канонічно-розкладена форма (NFD)
+
+// U+017F: ЛАТИНСЬКА МАЛА ЛІТЕРА ДОВГА S
+// U+0323: ОБ'ЄДНУЮЧА КРАПКА ВНИЗУ
+// U+0307: ОБ'ЄДНУЮЧА КРАПКА ЗГОРИ
+str.normalize('NFD'); // '\u017F\u0323\u0307'
+
+
+// Сумісно-з'єднана (NFKC)
+
+// U+1E69: ЛАТИНСЬКА МАЛА ЛІТЕРА S З КРАПКОЮ ВНИЗУ ТА КРАПКОЮ ЗГОРИ
+str.normalize('NFKC'); // '\u1E69'
+
+
+// Сумісно-розкладена (NFKD)
+
+// U+0073: ЛАТИНСЬКА МАЛА ЛІТЕРА S
+// U+0323: ОБ'ЄДНУЮЧА КРАПКА ВНИЗУ
+// U+0307: ОБ'ЄДНУЮЧА КРАПКА ЗГОРИ
+str.normalize('NFKD'); // '\u0073\u0323\u0307'
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.normalize', 'String.prototype.normalize')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.normalize")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="http://www.unicode.org/reports/tr15/">Unicode Standard Annex #15, Unicode Normalization Forms</a></li>
+ <li><a href="http://en.wikipedia.org/wiki/Unicode_equivalence">Unicode equivalence</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/padend/index.html b/files/uk/web/javascript/reference/global_objects/string/padend/index.html
new file mode 100644
index 0000000000..8f9fbd2e63
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/padend/index.html
@@ -0,0 +1,66 @@
+---
+title: String.prototype.padEnd()
+slug: Web/JavaScript/Reference/Global_Objects/String/padEnd
+tags:
+  - JavaScript
+  - String
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/String/padEnd
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>padEnd()</code></strong> доповнює поточний рядок наданим рядком (повторюючи його, якщо треба), так, щоб отриманий в результаті рядок досяг заданої довжини. Доповнення застосовується з кінця поточного рядка.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-padend.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>str</var>.padEnd(<var>targetLength</var> [, <var>padString</var>])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>targetLength</code></dt>
+ <dd>Довжина результуючого рядка після доповнення поточного рядка. Якщо значення є меншим за довжину поточного рядка, поточний рядок буде повернений без змін.</dd>
+ <dt><code>padString</code> {{optional_inline}}</dt>
+ <dd>Рядок, яким потрібно доповнити поточний рядок. Якщо цей рядок надто довгий для отримання заданої довжини, він буде обрізаний: для мов з письмом зліва направо буде застосована ліва частина, а для мов з письмом справа наліво - права частина. Значенням за замовчуванням для цього параметра є " " (U+0020).</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>{{jsxref("String", "Рядок")}} вказаної довжини з доповненням, застосованим в кінці поточного рядка.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">'абв'.padEnd(10);          // "абв       "
+'абв'.padEnd(10, "ква");   // "абвкваквак"
+'абв'.padEnd(6, "123456"); // "абв123"
+'абв'.padEnd(1);           // "абв"</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.padend', 'String.prototype.padEnd')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.padEnd")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.padStart()")}}</li>
+ <li><a>A polyfill for this method</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/padstart/index.html b/files/uk/web/javascript/reference/global_objects/string/padstart/index.html
new file mode 100644
index 0000000000..4f7e48a94f
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/padstart/index.html
@@ -0,0 +1,84 @@
+---
+title: String.prototype.padStart()
+slug: Web/JavaScript/Reference/Global_Objects/String/padStart
+tags:
+  - JavaScript
+  - String
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/String/padStart
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Метод <strong><code>padStart()</code></strong> доповнює поточний рядок іншим рядком (кілька раз, якщо треба), доки отриманий рядок не досягне заданої довжини.</span> Доповнення застосовується з початку поточного рядка.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-padstart.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>str</var>.padStart(<var>targetLength</var> [, <var>padString</var>])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>targetLength</var></code></dt>
+ <dd>Довжина результуючого рядка після доповнення поточного рядка <code><var>str</var></code>. Якщо значення є меншим за його довжину <code><var>str.</var>length</code>, то <em><code>str</code></em> повертається без змін.</dd>
+ <dt><code><var>padString</var></code> {{optional_inline}}</dt>
+ <dd>Рядок, яким потрібно доповнити поточний рядок <code><var>str</var></code>. Якщо <code><var>padString</var></code> надто довгий для отримання заданої довжини <code><var>targetLength</var></code>, він буде обрізаний з кінця. Значенням за замовчуванням є <code>" "</code> (<code>U+0020 'ПРОБІЛ'</code>).</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>{{jsxref("String", "Рядок")}} заданої довжини <code><var>targetLength</var></code> з доповненням <code><var>padString</var></code>, застосованим на початку.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Базові_приклади">Базові приклади</h3>
+
+<pre class="brush: js">'абв'.padStart(10);         // "       абв"
+'абв'.padStart(10, "ква");  // "кваквакабв"
+'абв'.padStart(6,"123465"); // "123абв"
+'абв'.padStart(8, "0");     // "00000абв"
+'абв'.padStart(1);          // "абв"</pre>
+
+<h3 id="Перетворення_числа_на_рядок_фіксованої_ширини">Перетворення числа на рядок фіксованої ширини</h3>
+
+<pre class="brush: js">// Версія Javascript для: (unsigned)
+//  printf "%0*d" width num
+function leftFillNum(num, targetLength) {
+    return num.toString().padStart(targetLength, 0);
+}
+
+const num = 123;
+console.log(leftFillNum(num, 5));
+// очікуваний результат: "00123"
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.padstart', 'String.prototype.padStart')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("javascript.builtins.String.padStart")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.padEnd()")}}</li>
+ <li><a href="https://github.com/uxitten/polyfill/blob/master/string.polyfill.js">Поліфіл</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/quote/index.html b/files/uk/web/javascript/reference/global_objects/string/quote/index.html
new file mode 100644
index 0000000000..95ee484e6d
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/quote/index.html
@@ -0,0 +1,77 @@
+---
+title: String.prototype.quote()
+slug: Web/JavaScript/Reference/Global_Objects/String/quote
+tags:
+  - JavaScript
+  - String
+  - застарілий
+  - метод
+translation_of: Archive/Web/JavaScript/String.quote
+---
+<div>{{JSRef}} {{obsolete_header("37")}} {{non-standard_header}}</div>
+
+<p>Нестандартний метод <strong><code>quote()</code></strong> повертає копію рядка, замінюючи різноманітні спеціальні символи їхнім екрануванням та загортає результат у подвійні лапки (<code>"</code>).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.quote()</code></pre>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Новий рядок, що відображає початковий рядок у подвійних лапках, з екрануванням будь-яких спеціальних символів.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>У наведеній нижче таблиці метод <code>quote()</code> замінює будь-які спеціальні символи та загортає рядки у подвійні лапки. Також зверніть увагу на третю колонку, де загорнутий метод {{jsxref("Global_Objects/eval", "eval()")}} знову обчислює екрановані символи.</p>
+
+<table class="fullwidth-table">
+ <thead>
+  <tr>
+   <th class="header" scope="col"><code>str</code></th>
+   <th class="header" scope="col"><code>str.quote()</code></th>
+   <th class="header" scope="col"><code>eval(str.quote())</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>Hello world!</code></td>
+   <td><code>"Hello world!"</code></td>
+   <td><code>Hello world!</code></td>
+  </tr>
+  <tr>
+   <td><code style="white-space: pre;">Hello<br>
+    world!</code></td>
+   <td><code>"Hello\n\tworld!"</code></td>
+   <td><code style="white-space: pre;">Hello<br>
+    world!</code></td>
+  </tr>
+  <tr>
+   <td><code>" \ — '</code></td>
+   <td><code>"\" \\ \u2014 '"</code></td>
+   <td><code>" \ — '</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Не є частиною жодного стандарту. Реалізований у JavaScript 1.3.</p>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<pre class="syntaxbox"><code>if (!String.prototype.quote)
+    String.prototype.quote = function(){
+        return JSON.stringify( this ); // починаючи з IE8
+</code>    }</pre>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.quote")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("JSON.stringify()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/raw/index.html b/files/uk/web/javascript/reference/global_objects/string/raw/index.html
new file mode 100644
index 0000000000..6383506ec5
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/raw/index.html
@@ -0,0 +1,117 @@
+---
+title: String.raw()
+slug: Web/JavaScript/Reference/Global_Objects/String/raw
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - String
+  - метод
+  - рядок
+translation_of: Web/JavaScript/Reference/Global_Objects/String/raw
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Статичний метод <strong><code>String.raw()</code></strong> є функцією-тегом <a href="/uk/docs/Web/JavaScript/Reference/template_strings">шаблонних літералів</a>. Він <em>схожий</em> на префікс <code>r</code> у мові Python, або на префікс <code>@</code> у мові C# для рядкових літералів. (Але вони не <em>ідентичні</em>; дивіться пояснення у <a href="https://bugs.chromium.org/p/v8/issues/detail?id=5016">цій проблемі</a>.) Він використовується для отримання сирої рядкової форми шаблонних рядків, тобто, підстановки (наприклад, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">${foo}</span></font>) обробляються, а екранування (наприклад, <code>\n</code>) ні.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-raw.html")}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>String.raw(<var>callSite</var>, <var>...substitutions</var>)
+
+String.raw`<var>templateString</var>`
+</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>callSite</var></code></dt>
+ <dd>Добре сформований об'єкт-шаблон точки виклику, наприклад <code>{ raw: ['раз', 'два', 'три'] }</code>.</dd>
+ <dt><code><var>...substitutions</var></code></dt>
+ <dd>Містить значення підстановок.</dd>
+ <dt><code><var>templateString</var></code></dt>
+ <dd>{{jsxref("template_strings", "Шаблонний рядок")}}, може містити підстановки (<code>${...}</code>).</dd>
+</dl>
+
+<h3 id="Значення_що_вертається">Значення, що вертається</h3>
+
+<p>Сира рядкова форма наданого шаблонного рядка.</p>
+
+<h3 id="Винятки">Винятки</h3>
+
+<dl>
+ <dt>{{jsxref("TypeError")}}</dt>
+ <dd>Помилка {{jsxref("TypeError")}} викидається, якщо перший аргумент не є добре сформованим об'єктом.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>У більшості випадків <code>String.raw()</code> використовується з шаблонними рядками. Перший синтаксис, наведений вище, використовується лише зрідка, тому що рушій JavaScript викличе його для вас з правильними аргументами (як і інші <a href="/uk/docs/Web/JavaScript/Reference/template_strings#Tagged_template_literals">функції-теги</a>).</p>
+
+<p><code>String.raw()</code> - єдина вбудована функція-тег шаблонних рядків. Вона працює як звичайна шаблонна функція та виконує об'єднання. Ви навіть можете перевизначити її звичайним кодом JavaScript.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_String.raw">Використання <code>String.raw()</code></h3>
+
+<pre class="brush: js">String.raw`Привіт\n${2+3}!`;
+// 'Привіт\n5!', символ після 'Привіт' -
+// це не символ нового рядка,
+// '\' та 'n' є двома символами.
+
+String.raw`Привіт\u000A!`;
+// 'Привіт\u000A!', те саме тут, цього разу ми отримуємо
+//  6 символів, \, u, 0, 0, 0, A.
+// Усі символи екранування будут неефективні,
+// а зворотні слеши будуть присутні у отриманому рядку.
+// Ви можете підтвертиди це, перевіривши властивість рядка .length.
+
+let name = 'Боб';
+String.raw`Привіт,\nце ${name}!`;
+// 'Привіт,\nце Боб!', підстановки обробляються.
+
+// Зазвичай, ви б не викликали String.raw() як функцію,
+// але, щоб симулювати `раз${2 + 3}два${'Java' + 'Script'}три`, можна зробити:
+String.raw({
+  raw: ['раз', 'два', 'три']
+}, 2 + 3, 'Java' + 'Script'); // 'раз5дваJavaScriptтри'
+// Зауважте, що перший аргумент - об'єкт з властивістю 'raw',
+// чиїм значенням є ітерабельний об'єкт, що представляє відокремлені рядки
+// у шаблонному літералі.
+// Решта аргументів - це підстановки.
+
+// Значенням 'raw' першого аргументу може бути будь-який ітерабельний об'єкт,
+// навіть рядок! Наприклад, 'тест' сприймається як ['т', 'е', 'с', 'т'].
+// Наступний код еквівалентний цьому
+// `т${0}е${1}с${2}т`:
+String.raw({ raw: 'тест' }, 0, 1, 2); // 'т0е1с2т'
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.raw', 'String.raw')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.raw")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/template_strings">Шаблонні літерали</a></li>
+ <li>{{jsxref("String")}}</li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar">Лексична граматика</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/repeat/index.html b/files/uk/web/javascript/reference/global_objects/string/repeat/index.html
new file mode 100644
index 0000000000..101776ad15
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/repeat/index.html
@@ -0,0 +1,119 @@
+---
+title: String.prototype.repeat()
+slug: Web/JavaScript/Reference/Global_Objects/String/repeat
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - String
+  - метод
+  - рядок
+translation_of: Web/JavaScript/Reference/Global_Objects/String/repeat
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>repeat()</code></strong> створює та повертає новий рядок, що містить вказану кількість об'єднаних разом копій рядка, на якому він був викликаний.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-repeat.html","shorter")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.repeat(<var>count</var>)</code>
+</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>count</var></code></dt>
+ <dd>Ціле число в діапазоні між <code>0</code> та {{jsxref("Global_Objects/Number/POSITIVE_INFINITY", "+Infinity")}}, що вказує кількість повторів рядка.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Новий рядок, що містить вказану кількість копій наданого рядка.</p>
+
+<h3 id="Винятки">Винятки</h3>
+
+<ul>
+ <li>{{jsxref("Errors/Negative_repetition_count", "RangeError")}}: число повторів має бути невід'ємним.</li>
+ <li>{{jsxref("Errors/Resulting_string_too_large", "RangeError")}}: число повторів має бути меншим за нескінченість та не перевищувати максимальний розмір рядка.</li>
+</ul>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">'абв'.repeat(-1)    // RangeError
+'абв'.repeat(0)     // ''
+'абв'.repeat(1)     // 'абв'
+'абв'.repeat(2)     // 'абвабв'
+'абв'.repeat(3.5)   // 'абвабвабв' (count буде перетворений на ціле число)
+'абв'.repeat(1/0)   // RangeError
+
+({ toString: () =&gt; 'абв', repeat: String.prototype.repeat }).repeat(2)
+// 'абвабв' (repeat() є загальним методом)
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Цей метод був доданий у специфікацію ECMAScript 2015 та може поки не бути доступним в усіх реалізаціях JavaScript. Однак, ви можете створити поліфіл <code>String.prototype.repeat()</code> за допомогою наступного коду:</p>
+
+<pre class="brush: js" dir="rtl">if (!String.prototype.repeat) {
+  String.prototype.repeat = function(count) {
+    'use strict';
+    if (this == null)
+      throw new TypeError('неможливо перетворити ' + this + ' на об\'єкт');
+
+    var str = '' + this;
+    // Щоб перетворити рядок на ціле число.
+    count = +count;
+    // Перевірка на NaN
+    if (count != count)
+      count = 0;
+
+    if (count &lt; 0)
+      throw new RangeError('repeat count must be non-negative');
+
+    if (count == Infinity)
+      throw new RangeError('repeat count must be less than infinity');
+
+    count = Math.floor(count);
+    if (str.length == 0 || count == 0)
+      return '';
+
+    // Гарантія того, що count є цілим 31-бітним числом, дозволяє значно оптимізувати
+    // головну частину. Але, все ж, найновіші (серпень 2014) переглядачі не можуть
+    // впоратись з рядками з 1 &lt;&lt; 28 символів чи довше, а отже:
+    if (str.length * count &gt;= 1 &lt;&lt; 28)
+      throw new RangeError('repeat count must not overflow maximum string size');
+
+    var maxCount = str.length * count;
+    count = Math.floor(Math.log(count) / Math.log(2));
+    while (count) {
+       str += str;
+       count--;
+    }
+    str += str.substring(0, maxCount - str.length);
+    return str;
+  }
+}</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.repeat")}}</p>
diff --git a/files/uk/web/javascript/reference/global_objects/string/replace/index.html b/files/uk/web/javascript/reference/global_objects/string/replace/index.html
new file mode 100644
index 0000000000..35f4a5ab54
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/replace/index.html
@@ -0,0 +1,240 @@
+---
+title: String.prototype.replace()
+slug: Web/JavaScript/Reference/Global_Objects/String/replace
+tags:
+  - JavaScript
+  - String
+  - вирази
+  - метод
+  - регулярний
+  - рядок
+translation_of: Web/JavaScript/Reference/Global_Objects/String/replace
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Метод <strong><code>replace()</code></strong> повертає новий рядок, в якому деякі або усі збіги з шаблоном замінені параметром заміни.</span> Шаблон може бути рядком або {{jsxref("RegExp","регулярним виразом")}}, а заміна може бути рядком або функцією, що викликатиметься для кожного збігу. Якщо шаблон є рядком, буде замінений лише перший збіг.</p>
+
+<p>Початковий рядок лишається незміненим.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-replace.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">const newStr = <var>str</var>.replace(<var>regexp</var>|<var>substr</var>, <var>newSubstr</var>|<var>function</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>regexp</var></code> (шаблон)</dt>
+ <dd>Об'єкт або літерал {{jsxref("RegExp")}}. Збіг чи збіги замінюються рядком <code><var>newSubstr</var></code> або значенням, яке вертає вказана функція <em><code>function</code></em>.</dd>
+ <dt><code><var>substr</var></code></dt>
+ <dd>{{jsxref("String","Рядок")}}, який потрібно замінити на <code><var>newSubstr</var></code>. Він сприймається як рядковий літерал та <em>не</em> інтерпретується як регулярний вираз. Замінюється лише перше співпадіння.</dd>
+ <dt><code><var>newSubstr</var></code> (заміна)</dt>
+ <dd>{{jsxref("String","Рядок")}}, який замінює підрядок, вказаний параметром <code><var>regexp</var></code> або <code><var>substr</var></code>. Підтримується можливість задавати декілька спеціальних шаблонів заміни; дивіться розділ "<a href="#Використання_рядка_в_якості_параметра">Використання рядка в якості параметра</a>" нижче.</dd>
+ <dt><code><var>function</var></code> (заміна)</dt>
+ <dd>Функція, що викликатиметься для створення нового підрядка, який буде використовуватись для заміни збігів з наданим параметром <code><var>regexp</var></code> або <code><var>substr</var></code>. Аргументи, що передаються в цю функцію, описані у розділі "<a href="#Використання_функції_в_якості_параметра">Використання функції в якості параметра</a>" нижче.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Новий рядок, в якому деякі або усі збіги з шаблоном замінені наданим значенням.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Цей метод не змінює об'єкт {{jsxref("String")}}, що його викликав. Він просто повертає новий рядок.</p>
+
+<p>Щоб виконати глобальний пошук та заміну, використовуйте перемикач <code>g</code> у регулярному виразі.</p>
+
+<h3 id="Використання_рядка_в_якості_параметра">Використання рядка в якості параметра</h3>
+
+<p>Рядок заміни може містити наступні спеціальні шаблони заміни:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th class="header" scope="col">Шаблон</th>
+   <th class="header" scope="col">Вставляє</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>$$</code></td>
+   <td>Вставляє <code>"$"</code>.</td>
+  </tr>
+  <tr>
+   <td><code>$&amp;</code></td>
+   <td>Вставляє знайдений підрядок.</td>
+  </tr>
+  <tr>
+   <td><code>$`</code></td>
+   <td>Вставляє частину рядка, що передує знайденому підрядку.</td>
+  </tr>
+  <tr>
+   <td><code>$'</code></td>
+   <td>Вставляє частину рядка, що розташована за знайденим підрядком.</td>
+  </tr>
+  <tr>
+   <td><code>$<var>n</var></code></td>
+   <td>Де <code><var>n</var></code> є додатним цілим числом, меншим за 100, вставляє <code><var>n</var></code>-й підрядок збігів у дужках, за умови, що першим аргументом був об'єкт {{jsxref("RegExp")}}. Зауважте, що вони індексуються з <code>1</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Використання_функції_в_якості_параметра">Використання функції в якості параметра</h3>
+
+<p>Ви можете вказати функцію в якості другого параметра. У цьому випадку функція буде викликана після знайдення збігу. Результат функції (повернене значення) буде використаний в якості рядка заміни. (<strong>Заувага:</strong> Вищезазначені спеціальні шаблони заміни <em>не</em> застосовуються у цьому випадку.)</p>
+
+<p>Зауважте, що функція буде викликатись багаторазово, для кожного повного збігу, що буде замінений, якщо регулярний вираз у першому параметрі є глобальним.</p>
+
+<p>Функція має наступні аргументи:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th class="header" scope="col">Можливе ім'я</th>
+   <th class="header" scope="col">Надане значення</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>match</code></td>
+   <td>Знайдений підрядок. (Відповідає вищенаведеному <code>$&amp;</code>)</td>
+  </tr>
+  <tr>
+   <td><code>p1, p2, ...</code></td>
+   <td><var>n</var>-й рядок, знайдений захопленою групою у дужках, за умови, що першим аргументом методу <code>replace()</code> був об'єкт {{jsxref("RegExp")}}. (Відповідає вищенаведеним <code>$1</code>, <code>$2</code>, і т.д.) Наприклад, якщо був наданий аргумент <code>/(\a+)(\b+)/</code>, то <code>p1</code> є збігом з <code>\a+</code>, а <code>p2</code> - збігом з <code>\b+</code>.</td>
+  </tr>
+  <tr>
+   <td><code>offset</code></td>
+   <td>Зсув знайденого підрядка всередині рядка, що перевіряється. (Наприклад, якби цілим рядком був <code>'абвг'</code>, а знайденим підрядком <code>'бв'</code>, то цей аргумент дорівнював би <code>1</code>.)</td>
+  </tr>
+  <tr>
+   <td><code>string</code></td>
+   <td>Весь рядок, що перевіряється.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>(Точна кількість аргументів залежить від того, чи є перший аргумент об'єктом {{jsxref("RegExp")}} — і, якщо є, то скільки збігів, заключених у дужки, він визначає.)</p>
+
+<p>Наступний приклад присвоїть <code>newString</code> значення <code>'абв - 12345 - #$*%'</code>:</p>
+
+<pre class="brush: js notranslate">function replacer(match, p1, p2, p3, offset, string) {
+  // p1 - не цифри, p2 - цифри, а p3 - не літерно-цифрові символи
+  return [p1, p2, p3].join(' - ');
+}
+let newString = 'абв12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
+console.log(newString);  // абв - 12345 - #$*%
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Визначення_регулярного_виразу_у_replace">Визначення регулярного виразу у replace()</h3>
+
+<p>У наступному прикладі регулярний вираз визначається у методі <code>replace()</code> та містить прапор ігнорування регістру.</p>
+
+<pre class="brush: js notranslate">let str = 'Наближається Різдво у чарівній Миші...';
+let newstr = str.replace(/миші/i, 'тиші');
+console.log(newstr);  // Наближається Різдво у чарівній тиші...
+</pre>
+
+<p>Цей код виводить <code>'Наближається Різдво у чарівній тиші</code><code>...'</code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Заувага:</strong> Більше пояснень щодо регулярних виразів дивіться у <a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions">цьому посібнику</a>.</p>
+</div>
+
+<h3 id="Використання_глобального_пошуку_та_ігнорування_регістру_з_replace">Використання глобального пошуку та ігнорування регістру з replace()</h3>
+
+<p>Глобальну заміну можна зробити лише з використанням регулярного виразу. У наступному прикладі регулярний вираз містить <a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions#Advanced_searching_with_flags_2">прапори глобального пошуку та ігнорування регістру</a>, які дозволяють методу <code>replace()</code> замінити кожний знайдений підрядок <code>'яблука'</code> на <code>'апельсини'</code>.</p>
+
+<pre class="brush: js notranslate">let re = /яблука/gi;
+let str = 'Яблука круглі, і яблука сочні.';
+let newstr = str.replace(re, 'апельсини');
+console.log(newstr);  // апельсини круглі, і апельсини сочні.
+</pre>
+
+<p>Цей код виводить <code>'апельсини круглі, і апельсини сочні.'</code>.</p>
+
+<h3 id="Код_що_міняє_слова_місцями">Код, що міняє слова місцями</h3>
+
+<p>Наступний скрипт міняє місцями слова у рядку. В якості тексту заміни скрипт використовує <a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">захоплені групи</a> та шаблони заміни <code>$1</code> та <code>$2</code>.</p>
+
+<pre class="brush: js notranslate">let re = /(\w+)\s(\w+)/;
+let str = 'John Smith';
+let newstr = str.replace(re, '$2, $1');
+console.log(newstr);  // Smith, John
+</pre>
+
+<p>Цей код виводить <code>'Smith, John'</code>.</p>
+
+<h3 id="Використання_внутрішньої_функції_яка_модифікує_знайдені_символи">Використання внутрішньої функції, яка модифікує знайдені символи</h3>
+
+<p>У цьому прикладі усі великі літери перетворюються на малі, а перед розташуванням збігу вставляється дефіс. Важливим тут є те, що необхідно виконати додаткові операції над збігом перед тим, як він буде повернений в якості заміни.</p>
+
+<p>Функція заміни приймає фрагмент збігу в якості параметра і використовує його для перетворення регістру та приєднання дефісу перед поверненням.</p>
+
+<pre class="brush: js notranslate">function styleHyphenFormat(propertyName) {
+  function upperToHyphenLower(match, offset, string) {
+    return (offset &gt; 0 ? '-' : '') + match.toLowerCase();
+  }
+  return propertyName.replace(/[A-Z]/g, upperToHyphenLower);
+}
+</pre>
+
+<p>Наступний код <code>styleHyphenFormat('borderTop')</code> поверне <code>'border-top'</code>.</p>
+
+<p>Оскільки ми хочемо далі трансформувати <em>результат</em> збігу перед останочною заміною, нам потрібно використовувати функцію. Це запускає обчислення збігу пред викликом методу {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}. Якби ми спробували зробити це, використовуючи збіг без функії, метод {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} не мав би жодного ефекту.</p>
+
+<pre class="brush: js example-bad notranslate">let newString = propertyName.replace(/[A-Z]/g, '-' + '$&amp;'.toLowerCase());  // не спрацює
+</pre>
+
+<p>Все тому, що <code>'$&amp;'.toLowerCase()</code> спочатку був би обчислений як рядковий літерал (і в результаті повернув би той самий рядок <code>'$&amp;'</code>) перед використанням його символів в якості шаблону.</p>
+
+<h3 id="Заміна_градусів_Фаренгейта_на_еквівалент_у_градусах_Цельсія">Заміна градусів Фаренгейта на еквівалент у градусах Цельсія</h3>
+
+<p>Наступний приклад замінює значення градусів за Фаренгейтом на його еквівалент у градусах Цельсія. Значення градусів Фаренгейта має бути числом, що закінчується літерою <code>"F"</code>. Функція повертає число за Цельсієм, що закінчується літерою <code>"C"</code>. Наприклад, якщо вхідне число дорівнює <code>"212F"</code>, функція повертає <code>"100C"</code>. Якщо число дорівнює <code>"0F"</code>, функція вертає <code>"-17.77777777777778C"</code>.</p>
+
+<p>Регулярний вираз <code>test</code> перевіряє будь-яке число, що закінчується літерою <code>F</code>. Значення градусів Фаренгейта доступне функції через її другий параметр <code>p1</code>. Функція присвоює значення за Цельсієм, базуючись на градусах Фаренгейта, переданих у рядку до функції <code>f2c()</code>. Далі <code>f2c()</code> повертає значення за Цельсієм. Ця функція схожа на прапор мови Perl <code>s///e</code>.</p>
+
+<pre class="brush: js notranslate">function f2c(x) {
+  function convert(str, p1, offset, s) {
+    return ((p1 - 32) * 5/9) + 'C';
+  }
+  let s = String(x);
+  let test = /(-?\d+(?:\.\d*)?)F\b/g;
+  return s.replace(test, convert);
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.replace', 'String.prototype.replace')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.replace")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.replaceAll", "String.prototype.replaceAll()")}}</li>
+ <li>{{jsxref("String.prototype.match", "String.prototype.match()")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec", "RegExp.prototype.exec()")}}</li>
+ <li>{{jsxref("RegExp.prototype.test", "RegExp.prototype.test()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/replaceall/index.html b/files/uk/web/javascript/reference/global_objects/string/replaceall/index.html
new file mode 100644
index 0000000000..ac59dbc1af
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/replaceall/index.html
@@ -0,0 +1,169 @@
+---
+title: String.prototype.replaceAll()
+slug: Web/JavaScript/Reference/Global_Objects/String/replaceAll
+tags:
+  - JavaScript
+  - String
+  - regex
+  - Регулярний вираз
+  - метод
+  - рядок
+translation_of: Web/JavaScript/Reference/Global_Objects/String/replaceAll
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Метод <strong><code>replaceAll()</code></strong> повертає новий рядок, в якому усі збіги з шаблоном замінені вказаним параметром заміни.</span> Шаблон може бути рядком або {{jsxref("RegExp","регулярним виразом")}}, а заміна може бути рядком або функцією, що викликатиметься для кожного збігу.</p>
+
+<p>Початковий рядок лишається незміненим.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-replaceall.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">const newStr = <var>str</var>.replaceAll(<var>regexp</var>|<var>substr</var>, <var>newSubstr</var>|<var>function</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>regexp</var></code> (шаблон)</dt>
+ <dd>Об'єкт або літерал {{jsxref("RegExp","регулярного виразу")}} з глобальним прапором. Збіги замінюються на <code><var>newSubstr</var></code> або значення, яке повертає вказана функція <code><var>function</var></code>. Регулярний вираз без глобального ("g") прапора викине помилку <code>TypeError</code>: "replaceAll must be called with a global RegExp".</dd>
+ <dt><code><var>substr</var></code></dt>
+ <dd>{{jsxref("String", "Рядок")}}, який потрібно замінити на <code><var>newSubstr</var></code>. Він вважається звичайним рядком та <em>не</em> інтерпретується як регулярний вираз.</dd>
+ <dt><code><var>newSubstr</var></code> (заміна)</dt>
+ <dd>{{jsxref("String","Рядок")}}, який замінює підрядок, вказаний параметром <code><var>regexp</var></code> або <code><var>substr</var></code>. Підтримується ряд спеціальних шаблонів заміни; дивіться нижче розділ "<a href="#Використання_рядка_в_якості_параметра">Використання рядка в якості параметра</a>".</dd>
+ <dt><code><var>function</var></code> (заміна)</dt>
+ <dd>Функція, що буде викликана для створення нового підрядка, який замінить збіги з наданим параметром <code><var>regexp</var></code> або <code><var>substr</var></code>. Аргументи, що передаються в цю функцію, описані нижче в розділі "<a href="#Використання_функції_в_якості_параметра">Використання функції в якості параметра</a>".</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Новий рядок, в якому усі збіги з шаблоном замінені.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Цей метод не змінює об'єкт {{jsxref("String")}}, що його викликав. Він просто повертає новий рядок.</p>
+
+<h3 id="Використання_рядка_в_якості_параметра">Використання рядка в якості параметра</h3>
+
+<p>Рядок заміни може містити наступні спеціальні шаблони заміни:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th class="header" scope="col">Шаблон</th>
+   <th class="header" scope="col">Вставляє</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>$$</code></td>
+   <td>Вставляє <code>"$"</code>.</td>
+  </tr>
+  <tr>
+   <td><code>$&amp;</code></td>
+   <td>Вставляє знайдений підрядок.</td>
+  </tr>
+  <tr>
+   <td><code>$`</code></td>
+   <td>Вставляє частину рядка, що передує знайденому підрядку.</td>
+  </tr>
+  <tr>
+   <td><code>$'</code></td>
+   <td>Вставляє частину рядка, що розташована за знайденим підрядком.</td>
+  </tr>
+  <tr>
+   <td><code>$<var>n</var></code></td>
+   <td>Де <code><var>n</var></code> є додатним цілим числом, меншим за 100, вставляє <code><var>n</var></code>-й підрядок збігів у дужках, за умови, що першим аргументом був об'єкт {{jsxref("RegExp")}}. Зауважте, що вони індексуються з <code>1</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Використання_функції_в_якості_параметра">Використання функції в якості параметра</h3>
+
+<p>Ви можете вказати функцію в якості другого параметра. У цьому випадку функція буде викликана після знайдення збігу. Результат функції (повернене значення) буде використаний в якості рядка заміни. (<strong>Заувага:</strong> Вищезазначені спеціальні шаблони заміни <em>не</em> застосовуються у цьому випадку.)</p>
+
+<p>Зауважте, що функція буде викликатись багаторазово, для кожного повного збігу, що буде замінений, якщо регулярний вираз у першому параметрі є глобальним.</p>
+
+<p>Функція має наступні аргументи:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th class="header" scope="col">Можливе ім'я</th>
+   <th class="header" scope="col">Надане значення</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>match</code></td>
+   <td>Знайдений підрядок. (Відповідає вищенаведеному <code>$&amp;</code>)</td>
+  </tr>
+  <tr>
+   <td><code>p1, p2, ...</code></td>
+   <td><var>n</var>-й рядок, знайдений захопленою групою у дужках, за умови, що першим аргументом методу <code>replace()</code> був об'єкт {{jsxref("RegExp")}}. (Відповідає вищенаведеним <code>$1</code>, <code>$2</code> і т.д.) Наприклад, якщо був наданий аргумент <code>/(\a+)(\b+)/</code>, то <code>p1</code> є збігом з <code>\a+</code>, а <code>p2</code> - збігом з <code>\b+</code>.</td>
+  </tr>
+  <tr>
+   <td><code>offset</code></td>
+   <td>Зсув знайденого підрядка всередині рядка, що перевіряється. (Наприклад, якби цілим рядком був <code>'абвг'</code>, а знайденим підрядком <code>'бв'</code>, то цей аргумент дорівнював би <code>1</code>.)</td>
+  </tr>
+  <tr>
+   <td><code>string</code></td>
+   <td>Весь рядок, що перевіряється.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>(Точна кількість аргументів залежить від того, чи є перший аргумент об'єктом {{jsxref("RegExp")}} і, якщо є, то скільки збігів, заключених у дужки, він визначає.)</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_replaceAll">Використання replaceAll</h3>
+
+<pre class="brush: js notranslate">'ааббвв'.replaceAll('б', '.');
+// 'аа..вв'</pre>
+
+<h3 id="Неглобальний_регулярний_вираз_викидає_виняток">Неглобальний регулярний вираз викидає виняток</h3>
+
+<p>Якщо використовується регулярний вираз в якості значення пошуку, він повинен бути глобальним. Це не працюватиме:</p>
+
+<pre class="brush: js; example-bad notranslate">'ааббвв'.replaceAll(/б/, '.');
+TypeError: replaceAll must be called with a global RegExp
+</pre>
+
+<p>Так працюватиме:</p>
+
+<pre class="brush: js; example-good notranslate">'ааббвв'.replaceAll(/б/g, '.');
+"аа..вв"
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.replaceall', 'String.prototype.replaceAll')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.replaceAll")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.replace", "String.prototype.replace()")}}</li>
+ <li>{{jsxref("String.prototype.match", "String.prototype.match()")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec", "RegExp.prototype.exec()")}}</li>
+ <li>{{jsxref("RegExp.prototype.test", "RegExp.prototype.test()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/search/index.html b/files/uk/web/javascript/reference/global_objects/string/search/index.html
new file mode 100644
index 0000000000..7d81b5d0a3
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/search/index.html
@@ -0,0 +1,107 @@
+---
+title: String.prototype.search()
+slug: Web/JavaScript/Reference/Global_Objects/String/search
+tags:
+  - JavaScript
+  - Prototype
+  - String
+  - Довідка
+  - Регулярний вираз
+translation_of: Web/JavaScript/Reference/Global_Objects/String/search
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>search()</code></strong> здійснює пошук у рядку за вказаним регулярним виразом.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>str</var>.search(<var>regexp</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>regexp</code></dt>
+ <dd>Об'єкт регулярного виразу. Якщо передати значення <code>value</code> іншого типу, його буде зведено до {{jsxref("RegExp")}} за допомогою оператора <code>new RegExp(value)</code>.</dd>
+</dl>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>Індекс початку першого збігу між рядком та переданим регулярним виразом; якщо збігу не знайдено, вертає значення <code>-1</code>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>search()</code> використовується тоді, коли треба не лише знати, чи містить рядок відповідну послідовність, а й з'ясувати, в якому саме місці вона починається. Натомість можно скористатися методом <code>{{jsxref("RegExp.prototype.test()")}}</code>, що вертає <code>boolean</code>, якщо треба з'ясувати лише наявність такої послідовності.<br>
+ Ще детальнішу інформацію про результат пошуку (коштом нижчої швидкодії) можна отримати за допомогою метода <code>{{jsxref("String.prototype.match()", "match()")}}</code> або <code>{{jsxref("RegExp.prototype.exec()")}}</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_search()">Використання <code>search()</code></h3>
+
+<p>В цьому прикладі наведено успішний пошук (метод вертає невід'ємне значення):</p>
+
+<pre class="brush: js">var str = "Красно дякую, панове!";
+
+// Шукаємо послідовність із шести рядкових (маленьких) літер.
+var pattern = /[а-я]{6}/g;
+console.log(str.search(pattern));  // вертає 14, що є індексом літери «п»</pre>
+
+<p>Натомість в уьому прикладі знайти шукане неможливо (рядок не містить жодної крапки), тож метод вертає значення <code>-1</code>:</p>
+
+<pre class="brush: js">var str = "Щиро вітаю, друже мій!";
+var pattern = /[.]/g;
+console.log(str.search(pattern));  // вертає -1
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Початкова виознака, запроваджено у JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.12', 'String.prototype.search')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.search', 'String.prototype.search')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.search', 'String.prototype.search')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.String.search")}}</p>
+
+<h2 id="Зауваги_щодо_Gecko">Зауваги щодо Gecko</h2>
+
+<ul>
+ <li>Реалізація <code>search()</code> до {{Gecko("8.0")}} містила помилку; коли виклик здійснювався без параметрів, або зі значенням {{jsxref("undefined")}}, метод шукав рядок 'undefined', замість порожнього рядка (себто послідовності нульової довжини). В новіших версіях це виправлено: виклики <code>'a'.search()</code> та <code>'a'.search(undefined)</code> тепер вертають <code>0</code>, як і належить.</li>
+ <li>З версії Gecko 39 {{geckoRelease(39)}}, нестандартний аргумент з прапорцями визнано застарілим, тож виклик метода з таким аргументом друкує відповідне попередження в консолі ({{bug(1142351)}}).</li>
+ <li>З версії Gecko 47 {{geckoRelease(47)}}, нестандартний аргумент з прапорцями не підтримується в проміжних збірках й невдовзі буде цілком видалений ({{bug(1245801)}}).</li>
+ <li>З версії Gecko 49 {{geckoRelease(49)}}, нестандартний аргумент з прапорцями не підтримується ({{bug(1108382)}}).</li>
+</ul>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.match()")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/slice/index.html b/files/uk/web/javascript/reference/global_objects/string/slice/index.html
new file mode 100644
index 0000000000..944e757382
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/slice/index.html
@@ -0,0 +1,116 @@
+---
+title: String.prototype.slice()
+slug: Web/JavaScript/Reference/Global_Objects/String/slice
+tags:
+  - JavaScript
+  - String
+  - метод
+  - рядок
+translation_of: Web/JavaScript/Reference/Global_Objects/String/slice
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>slice()</code></strong> вирізає частину рядка та повертає її як новий рядок, не змінюючи початковий.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-slice.html", "taller")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>str</var>.slice(<var>beginIndex</var>[, <var>endIndex</var>])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>beginIndex</var></code></dt>
+ <dd>
+ <p>Індекс на основі нуля, з якого починається копіювання. Якщо індекс від'ємний, він сприймається як <code><var>str</var>.length + <var>beginIndex</var></code>. (Наприклад, якщо <code><var>beginIndex</var></code> дорівнює <code>-3</code>, він сприймається як <code><var>str</var>.length - 3</code>.)</p>
+
+ <p>Якщо значення <em><code>beginIndex</code></em> більше за довжину рядка <code><em>str</em>.length</code> або дорівнює їй, <code>slice()</code> повертає порожній рядок.</p>
+ </dd>
+ <dt><code><var>endIndex</var></code> {{optional_inline}}</dt>
+ <dd>
+ <p>Індекс на основі нуля, <em>до</em> якого треба виконувати копіювання. Символ за цим індексом не буде включений.</p>
+
+ <p>Якщо <code><var>endIndex</var></code> відсутній, <code>slice()</code> копіює до кінця рядка. Якщо його значення від'ємне, він сприймається як <code><var>str</var>.length + <var>endIndex</var></code>. (Наприклад, якщо <code><var>endIndex</var></code> дорівнює <code>-3</code>, він сприймається як <code><var>str</var>.length - 3</code>.)</p>
+ </dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Новий рядок, що містить вказану частину рядка.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>slice()</code> дістає текст з одного рядка та повертає новий рядок. Зміни у тексті одного з рядків не впливають на інший рядок.</p>
+
+<p><code>slice()</code> скопіює текст по індекс <code><var>endIndex</var></code><var> </var>(але не включно). <code>str.slice(1,4)</code> копіює з другого по четвертий символ (символи за індексами <code>1</code>, <code>2</code>, та <code>3</code>).</p>
+
+<p>Наприклад, <code><var>str</var>.slice(2, -1)</code> копіює частину від третього до другого з кінця символу рядка.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_slice_для_створення_нового_рядка">Використання <code>slice()</code> для створення нового рядка</h3>
+
+<p>Наступний приклад використовує <code>slice()</code>, щоб створити новий рядок.</p>
+
+<pre class="brush: js">let str1 = "П'ять мавпенят стрибали на столі", // довжина str1 дорівнює 32.
+    str2 = str1.slice(1, 8),
+    str3 = str1.slice(6, -2),
+    str4 = str1.slice(15),
+    str5 = str1.slice(32);
+console.log(str2)  // РЕЗУЛЬТАТ: 'ять ма
+console.log(str3)  // РЕЗУЛЬТАТ: мавпенят стрибали на сто
+console.log(str4)  // РЕЗУЛЬТАТ: стрибали на столі
+console.log(str5)  // РЕЗУЛЬТАТ: ""</pre>
+
+<h3 id="Використання_slice_з_відємними_індексами">Використання <code>slice()</code> з від'ємними індексами</h3>
+
+<p>Наступний приклад використовує <code>slice()</code> з від'ємними індексами.</p>
+
+<pre class="brush: js">let str = "П'ять мавпенят стрибали на столі."
+str.slice(-6)      // вертає "столі."
+str.slice(-6, -1)  // вертає "столі"
+str.slice(0, -1)   // вертає "П'ять мавпенят стрибали на столі"</pre>
+
+<p>Цей приклад відраховує у зворотньому напрямку, від кінця рядка, <code>12</code>, щоб знайти початковий індекс, та вперед з початку рядка <code>25</code>, щоб знайти кінцевий індекс.</p>
+
+<pre class="brush: js">console.log(str.slice(-12, 25)) // =&gt; "ли н"</pre>
+
+<p>Тут він рахує вперед від початку <code>21</code>, щоб знайти початковий індекс, і у зворотньому напрямку з кінця <code>8</code>, щоб знайти кінцевий індекс.</p>
+
+<pre class="brush: js">console.log(str.slice(21, -8)) // =&gt; "ли н"</pre>
+
+<p>Ці аргументи відраховують у зворотньому напрямку з кінця <code>5</code>, щоб знайти початковий індекс, та у зворотньому напрямку з кінця <code>1</code>, щоб знайти кінцевий індекс.</p>
+
+<pre class="brush: js">console.log(str.slice(-5, -1)) // =&gt; "толі"</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.slice', 'String.prototype.slice')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.String.slice")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.substr()")}}</li>
+ <li>{{jsxref("String.prototype.substring()")}}</li>
+ <li>{{jsxref("Array.prototype.slice()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/small/index.html b/files/uk/web/javascript/reference/global_objects/string/small/index.html
new file mode 100644
index 0000000000..b7cf6d34e6
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/small/index.html
@@ -0,0 +1,70 @@
+---
+title: String.prototype.small()
+slug: Web/JavaScript/Reference/Global_Objects/String/small
+tags:
+  - JavaScript
+  - String
+  - метод
+  - не рекомендований
+  - рядок
+translation_of: Web/JavaScript/Reference/Global_Objects/String/small
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p>Метод <strong><code>small()</code></strong> створює HTML-елемент <a href="/uk/docs/Web/HTML/Element/small" title="HTML-елемент &lt;small> відображає супутні коментарі та дрібні надписи, такі як позначка авторського права та юридичний текст, незалежно від свого стильового відображення. За замовчуванням, він зменшує свій текст на один розмір, наприклад small до x-small."><code>&lt;small&gt;</code></a>, який відображає рядок зменшеним шрифтом.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.small()</code></pre>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Рядок, що містить HTML-елемент <a href="/uk/docs/Web/HTML/Element/small" title="HTML-елемент &lt;small> відображає супутні коментарі та дрібні надписи, такі як позначка авторського права та юридичний текст, незалежно від свого стильового відображення. За замовчуванням, він зменшує свій текст на один розмір, наприклад small до x-small."><code>&lt;small&gt;</code></a>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>small()</code> вбудовує рядок у тег <code>&lt;small&gt;</code>: <code>"&lt;small&gt;str&lt;/small&gt;"</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_small">Використання <code>small()</code></h3>
+
+<p>Наступний приклад використовує рядкові методи, щоб змінювати розмір рядка:</p>
+
+<pre class="brush: js">var worldString = 'Привіт';
+
+console.log(worldString.small());     // &lt;small&gt;Привіт&lt;/small&gt;
+console.log(worldString.big());       // &lt;big&gt;Привіт&lt;/big&gt;
+console.log(worldString.fontsize(7)); // &lt;font size="7"&gt;Привіт&lt;/fontsize&gt;
+</pre>
+
+<p>Використовуючи об'єкт <a href="/uk/docs/Web/API/HTMLElement/style" title="Властивість HTMLElement.style використовується для отримання, а також присвоєння внутрішнього стилю елемента. При отриманні вона вертає об'єкт CSSStyleDeclaration, який містить список усіх властивостей стилів для цього елемента, а також значення, присвоєні атрибутам, які визначені у внутрішньому атрибуті елемента style."><code>element.style</code></a>, ви можете отримати атрибут елемента <code>style</code> та маніпулювати ним у більш загальному стилі, наприклад:</p>
+
+<pre class="brush: js">document.getElementById('yourElemId').style.fontSize = '0.7em';
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.small', 'String.prototype.small')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.small")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.fontsize()")}}</li>
+ <li>{{jsxref("String.prototype.big()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/split/index.html b/files/uk/web/javascript/reference/global_objects/string/split/index.html
new file mode 100644
index 0000000000..6aa3a2c251
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/split/index.html
@@ -0,0 +1,220 @@
+---
+title: String.prototype.split()
+slug: Web/JavaScript/Reference/Global_Objects/String/split
+tags:
+  - JavaScript
+  - String
+  - Регулярний вираз
+  - метод
+  - рядок
+translation_of: Web/JavaScript/Reference/Global_Objects/String/split
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Метод <strong><code>split()</code></strong> розділяє {{jsxref("String","рядок")}} на впорядковану множину підрядків та повертає масив цих підрядків. Ділення здійснюється пошуком шаблону; цей шаблон надається першим параметром під час виклику методу.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-split.html", "taller")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>str</var>.split([<var>separator</var>[, <var>limit</var>]])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>separator</var></code> {{optional_inline}}</dt>
+ <dd>
+ <p>Шаблон, що описує, де має відбуватися розбиття рядка. Параметр <code><var>separator</var></code> (роздільник) може бути простим рядком або {{jsxref("Global_Objects/RegExp", "регулярним виразом", "", 1)}}.</p>
+
+ <ul>
+  <li>Найпростішим є випадок, коли <code><var>separator</var></code> є просто одним символом; він використовується для розмежування та розбиття рядка. Наприклад, рядок, що містить значення, розділені табуляцією (<em>TSV, tab-separated values</em>), може бути розібраний за символом табуляції в якості роздільника, ось так: <code>myString.split("\t")</code>.</li>
+  <li>Якщо <code><var>separator</var></code> містить множину символів, для розділення має бути знайдена вся ця послідовність.</li>
+  <li>Якщо параметр <code><var>separator</var></code> не вказаний чи не зустрічається у <code><var>str</var></code>, повернений масив містить один елемент, який є цілим рядком.</li>
+  <li>Якщо <code><var>separator</var></code> знаходиться на початку (чи в кінці) рядка, він все одно матиме ефект роздільника. Результатом буде порожній (тобто, нульової довжини) рядок, який з'явиться на першій (чи останній) позиції поверненого масиву.</li>
+  <li>Якщо <code><var>separator</var></code> є порожнім рядком (<code>""</code>), <code><var>str</var></code> перетворюється на масив з кожного зі своїх "символів" UTF-16.</li>
+ </ul>
+
+ <div class="blockIndicator warning">
+ <p><strong>Застереження:</strong> Коли в якості роздільника використовується порожній рядок (<code>""</code>), рядок <strong>не</strong> розбивається на символи<em>, що сприймаються користувачем</em> (<a href="https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries">кластери графем</a>), чи символи Юнікоду (коди символів), а лише на кодові одиниці UTF-16. Це розбиває <a href="http://unicode.org/faq/utf_bom.html#utf16-2">сурогатні пари</a>. Дивіться <a href="https://stackoverflow.com/a/34717402">“Як перетворити рядок на масив символів у JavaScript?” на StackOverflow</a>.</p>
+ </div>
+ </dd>
+ <dt><code><var>limit</var></code> {{optional_inline}}</dt>
+ <dd>
+ <p>Невід'ємне ціле число, що обмежує кількість частин. Якщо надане, метод розбиває рядок на кожному знайденому роздільнику <code><var>separator</var></code>, але зупиняється, коли у масив була додана кількість елементів <code><var>limit</var></code>. Будь-який текст, що лишився, взагалі не буде доданий у масив.</p>
+
+ <ul>
+  <li>Масив може містити меншу за <code>limit</code> кількість елементів, якщо рядок закінчився раніше, ніж було досятнуто значення <em><code>limit</code></em>.</li>
+  <li>Якщо <code><var>limit</var></code> дорівнює <code>0</code>, розділення рядка не виконується.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>{{jsxref("Array", "Масив")}} рядків, відділених у кожній точці, де роздільник <code>separator</code> зустрічається у наданому рядку.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Коли <code>separator</code> знайдено, він видаляється з рядка, а підрядки повертаються у масиві.</p>
+
+<p>Якщо <code>separator</code> є регулярним виразом із захопленими групами, то під час кожного збігу з <code>separator</code> результати (в тому числі undefined) захоплених груп додаються у масив результатів.</p>
+
+<p>Якщо роздільник є масивом, то він примусово приводиться до рядка та використовується в якості роздільника.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_split">Використання <code>split()</code></h3>
+
+<div id="split_empty_string">
+<p>Коли рядок порожній, <code>split()</code> повертає масив, що містить один порожній рядок, а не порожній масив. Якщо і рядок, і роздільник є порожніми рядками, повертається порожній масив.</p>
+
+<pre class="brush: js">const myString = ''
+const splits = myString.split()
+
+console.log(splits)
+
+// ↪ [""]
+</pre>
+</div>
+
+<p>Наступний приклад визначає функцію, яка розбиває рядок на масив рядків, використовуючи вказаний роздільник. Після розбиття рядка функція виводить повідомлення, які містять початковий рядок (до розбиття), використаний роздільник, кількість елементів масиву та окремі елементи масиву.</p>
+
+<pre class="brush: js">function splitString(stringToSplit, separator) {
+  const arrayOfStrings = stringToSplit.split(separator)
+
+  console.log('Початковий рядок: ', stringToSplit)
+  console.log('Роздільник: ', separator)
+  console.log('Масив містить ', arrayOfStrings.length, ' елементів: ', arrayOfStrings.join(' / '))
+}
+
+const tempestString = 'Який чудесний світ новий оцей де отакі є люди!'
+const monthString = 'Січ,Лют,Берез,Квіт,Трав,Черв,Лип,Серп,Верес,Жовт,Листоп,Груд'
+
+const space = ' '
+const comma = ','
+
+splitString(tempestString, space)
+splitString(tempestString)
+splitString(monthString, comma)
+</pre>
+
+<p>Цей приклад виводить наступний результат:</p>
+
+<pre class="brush: js">Початковий рядок:  Який чудесний світ новий оцей де отакі є люди!
+Роздільник: " "
+Масив містить  9  елементів:  Який / чудесний / світ / новий / оцей / де / отакі / є / люди!
+
+Початковий рядок:  Який чудесний світ новий оцей де отакі є люди!
+Роздільник: "undefined"
+Масив містить  1  елементів:  Який чудесний світ новий оцей де отакі є люди!
+
+Початковий рядок:  Січ,Лют,Берез,Квіт,Трав,Черв,Лип,Серп,Верес,Жовт,Листоп,Груд
+Роздільник: ","
+Масив містить  12  елементів:  Січ / Лют / Берез / Квіт / Трав / Черв / Лип / Серп / Верес / Жовт / Листоп / Груд</pre>
+
+<h3 id="Видалення_пробілів_з_рядка">Видалення пробілів з рядка</h3>
+
+<p>У наступному прикладі <code>split()</code> шукає нуль або більше пробілів з наступною крапкою з комою, з наступним нулем чи більше пробілів — і, коли знаходить, видаляє пробіли та крапку з комою з рядка. <code>nameList</code> є масивом, що повертається як результат методу <code>split()</code>.</p>
+
+<pre class="brush: js">const names = 'Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand '
+
+console.log(names)
+
+const re = /\s*(?:;|$)\s*/
+const nameList = names.split(re)
+
+console.log(nameList)
+</pre>
+
+<p>Цей код виводить два рядки; перший виводить початковий рядок, а другий - масив, отриманий в результаті.</p>
+
+<pre class="brush: js">Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand
+[ "Harry Trump", "Fred Barney", "Helen Rigby", "Bill Abel", "Chris Hand", "" ]</pre>
+
+<h3 id="Повернення_обмеженої_кількості_елементів">Повернення обмеженої кількості елементів</h3>
+
+<p>У наступному прикладі <code>split()</code> шукає пробіли у рядку та повертає перші 3 елементи, які знаходить.</p>
+
+<pre class="brush: js">const myString = 'Всім привіт. Як справи?'
+const splits = myString.split(' ', 3)
+
+console.log(splits)
+</pre>
+
+<p>Цей скрипт виведе наступне:</p>
+
+<pre>["Всім", "привіт.", "Як"]
+</pre>
+
+<h3 id="Розбиття_за_допомогою_RegExp_з_додаванням_частин_роздільника_у_результат">Розбиття за допомогою <code>RegExp</code> з додаванням частин роздільника у результат</h3>
+
+<p>Якщо <code><var>separator</var></code> є регулярним виразом, що містить дужки <code>(</code><code>)</code>, то збіги також додаються у масив.</p>
+
+<pre class="brush: js">const myString = 'Привіт 1 слово. Речення номер 2.'
+const splits = myString.split(/(\d)/)
+
+console.log(splits)
+</pre>
+
+<p>Цей скрипт виведе наступне:</p>
+
+<pre class="brush: js">[ "Привіт ", "1", " слово. Речення номер ", "2", "." ]</pre>
+
+<div class="blockIndicator note">
+<p><strong>Заувага: </strong><code>\d</code> відповідає <a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">символьному класу</a> цифр між 0 та 9.</p>
+</div>
+
+<h3 id="Перевертання_рядка_за_допомотою_split">Перевертання рядка за допомотою <code>split()</code></h3>
+
+<div class="warning">
+<p>Це не найнадійніший спосіб перевертання рядка:</p>
+
+<pre class="brush: js example-bad">const str = 'йцуке'
+const strReverse = str.split('').reverse().join('')
+// 'екуцй'
+
+// split() повертає масив, на якому можна застосувати reverse() та join()
+</pre>
+
+<p>Він не працює, якщо рядок містить кластери графем, навіть при використанні методу split, сумісного з Юнікодом (замість цього скористайтесь, наприклад, <a href="https://github.com/mathiasbynens/esrever">esrever</a>).</p>
+
+<pre class="brush: js example-bad">const str = 'résumé'
+const strReverse = str.split(/(?:)/u).reverse().join('')
+// =&gt; "́emuśer"
+</pre>
+
+<p><strong>Бонус:</strong> скористайтесь оператором {{jsxref("Operators/Оператори_порівняння", "===", "#Ідентичність_строга_рівність")}}, щоб перевірити, чи був початковий рядок паліндромом.</p>
+</div>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.split', 'String.prototype.split')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.split")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("Array.prototype.join()")}}</li>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions">Використання регулярних виразів у JavaScript</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/startswith/index.html b/files/uk/web/javascript/reference/global_objects/string/startswith/index.html
new file mode 100644
index 0000000000..a1850169e5
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/startswith/index.html
@@ -0,0 +1,96 @@
+---
+title: String.prototype.startsWith()
+slug: Web/JavaScript/Reference/Global_Objects/String/startsWith
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - String
+  - метод
+  - рядок
+translation_of: Web/JavaScript/Reference/Global_Objects/String/startsWith
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Метод <strong><code>startsWith()</code></strong> визначає, чи починається рядок з символів заданого рядка, повертаючи, відповідно, <code>true</code> чи <code>false</code>.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-startswith.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>str</var>.startsWith(<var>searchString</var>[, <var>position</var>])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>searchString</var></code></dt>
+ <dd>Символи, які шукатимуться на початку рядка.</dd>
+ <dt><code><var>position</var></code> {{optional_inline}}</dt>
+ <dd>Позиція у цьому рядку, з якої починатиметься пошук рядка <code><var>searchString</var></code>. За замовчуванням <code>0</code>.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p><strong><code>true</code></strong>, якщо надані символи знайдені на початку рядка; інакше, <strong><code>false</code></strong>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Цей метод дозволяє визначити, починається чи ні рядок з символів іншого рядка. Цей метод чутливий до регістру.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_startsWith">Використання <code>startsWith()</code></h3>
+
+<pre class="brush: js">let str = 'Питання в тому: бути чи не бути.'
+
+console.log(str.startsWith('Питання'))   // true
+console.log(str.startsWith('бути'))      // false
+console.log(str.startsWith('бути', 16))  // true
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Цей метод був доданий у специфікації ECMAScript 2015 і може не бути доступним в усіх реалізаціях JavaScript. Однак, ви можете створити поліфіл <code>String.prototype.startsWith()</code> за допомогою наступного коду:</p>
+
+<pre class="brush: js">if (!String.prototype.startsWith) {
+    Object.defineProperty(String.prototype, 'startsWith', {
+        value: function(search, rawPos) {
+            var pos = rawPos &gt; 0 ? rawPos|0 : 0;
+            return this.substring(pos, pos + search.length) === search;
+        }
+    });
+}
+</pre>
+
+<p>Більш надійний (у повній відповідності до специфікації ES2015), але менш швидкий та компактний поліфіл доступний <a href="https://github.com/mathiasbynens/String.prototype.startsWith">на GitHub за авторством Mathias Bynens</a>.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.startswith', 'String.prototype.startsWith')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.String.startsWith")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.endsWith()")}}</li>
+ <li>{{jsxref("String.prototype.includes()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/strike/index.html b/files/uk/web/javascript/reference/global_objects/string/strike/index.html
new file mode 100644
index 0000000000..55ab07f635
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/strike/index.html
@@ -0,0 +1,67 @@
+---
+title: String.prototype.strike()
+slug: Web/JavaScript/Reference/Global_Objects/String/strike
+tags:
+  - JavaScript
+  - String
+  - метод
+  - не рекомендований
+  - рядок
+translation_of: Web/JavaScript/Reference/Global_Objects/String/strike
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p>Метод <strong><code>strike()</code></strong> створює HTML-елемент <a href="/uk/docs/Web/HTML/Element/strike" title="HTML-елемент &lt;strike> (або Strikethrough) малює на тексті перекреслення (горизонтальну лінію)."><code>&lt;strike&gt;</code></a>, який відображає рядок з перекресленим текстом.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.strike()</code></pre>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Рядок, що містить HTML-елемент <a href="/uk/docs/Web/HTML/Element/strike" title="HTML-елемент &lt;strike> (або Strikethrough) малює на тексті перекреслення (горизонтальну лінію)."><code>&lt;strike&gt;</code></a>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>strike()</code> вбудовує рядок у тег <code>&lt;strike&gt;</code>: <code>"&lt;strike&gt;str&lt;/strike&gt;"</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_strike">Використання <code>strike()</code></h3>
+
+<p>Наступний приклад використовує рядкові методи, щоб змінити форматування рядка:</p>
+
+<pre class="brush: js">var worldString = 'Всім привіт';
+
+console.log(worldString.blink()); // &lt;blink&gt;Всім привіт&lt;/blink&gt;
+console.log(worldString.bold()); // &lt;b&gt;Всім привіт&lt;/b&gt;
+console.log(worldString.italics()); // &lt;i&gt;Всім привіт&lt;/i&gt;
+console.log(worldString.strike()); // &lt;strike&gt;Всім привіт&lt;/strike&gt;
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.strike', 'String.prototype.strike')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.strike")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.blink()")}}</li>
+ <li>{{jsxref("String.prototype.bold()")}}</li>
+ <li>{{jsxref("String.prototype.italics()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/string/index.html b/files/uk/web/javascript/reference/global_objects/string/string/index.html
new file mode 100644
index 0000000000..65f85d4d0a
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/string/index.html
@@ -0,0 +1,64 @@
+---
+title: Конструктор String()
+slug: Web/JavaScript/Reference/Global_Objects/String/String
+tags:
+  - JavaScript
+  - String
+  - Конструктор
+  - рядок
+translation_of: Web/JavaScript/Reference/Global_Objects/String/String
+---
+<div>{{JSRef}}</div>
+
+<p>Конструктор <strong><code>String</code></strong> використовується для створення нового об'єкта {{jsxref("String")}}. Він виконує перетворення типів, коли викликається як функція, а не як конструктор, що, зазвичай, більш корисно.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">new String(<var>thing</var>)
+String(<var>thing</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>thing</var></code></dt>
+ <dd>Будь-що, що перетвориться на рядок.</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Конструктор_String_та_функція_String">Конструктор String та функція String</h3>
+
+<p>Функція String та конструктор String повертають різні результати:</p>
+
+<pre class="brush: js">typeof String('Всім привіт'); // string
+typeof new String('Всім привіт'); // object
+</pre>
+
+<p>Тут функція, як і обіцяно, повертає рядок (<a href="/uk/docs/Glossary/primitive">простий</a> тип даних). Однак, конструктор повертає екземпляр типу String (об'єкт-обгортку), саме тому вам нечасто захочеться взагалі використовувати конструктор String.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string-constructor', 'String constructor')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.String.String")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Text_formatting">Форматування тексту у посібнику JavaScript</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/sub/index.html b/files/uk/web/javascript/reference/global_objects/string/sub/index.html
new file mode 100644
index 0000000000..5aa09a91ce
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/sub/index.html
@@ -0,0 +1,68 @@
+---
+title: String.prototype.sub()
+slug: Web/JavaScript/Reference/Global_Objects/String/sub
+tags:
+  - HTML
+  - JavaScript
+  - String
+  - метод
+  - не рекомендований
+  - рядок
+translation_of: Web/JavaScript/Reference/Global_Objects/String/sub
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p>Метод <strong><code>sub()</code></strong> створює HTML-елемент <a href="/uk/docs/Web/HTML/Element/sub" title="HTML-елемент нижнього індексу (&lt;sub>) вказує вбудований текст, який необхідно відобразити нижнім індексом суто для друкарського використання."><code>&lt;sub&gt;</code></a>, який відображає рядок у вигляді нижнього індексу.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.sub()</code></pre>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Рядок, що містить HTML-елемент <a href="/uk/docs/Web/HTML/Element/sub" title="HTML-елемент нижнього індексу (&lt;sub>) вказує вбудований текст, який необхідно відобразити нижнім індексом суто для друкарського використання."><code>&lt;sub&gt;</code></a>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>sub()</code> вбудовує рядок у тег <code>&lt;sub&gt;</code>: <code>"&lt;sub&gt;str&lt;/sub&gt;"</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_методів_sub_та_sup">Використання методів <code>sub()</code> та <code>sup()</code></h3>
+
+<p>Наступний приклад використовує методи <code>sub()</code> та {{jsxref("String.prototype.sup()", "sup()")}} для форматування рядка:</p>
+
+<pre class="brush: js">var superText = 'верхній індекс';
+var subText = 'нижній індекс';
+
+console.log('Так виглядає ' + superText.sup() + '.');
+// Так виглядає &lt;sup&gt;верхній індекс&lt;/sup&gt;.
+
+console.log('Так виглядає ' + subText.sub() + '.');
+// Так виглядає &lt;sub&gt;нижній індекс&lt;/sub&gt;.
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.sub', 'String.prototype.sub')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.sub")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.sup()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/substr/index.html b/files/uk/web/javascript/reference/global_objects/string/substr/index.html
new file mode 100644
index 0000000000..265ef1552d
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/substr/index.html
@@ -0,0 +1,118 @@
+---
+title: String.prototype.substr()
+slug: Web/JavaScript/Reference/Global_Objects/String/substr
+tags:
+  - JavaScript
+  - String
+  - метод
+  - не рекомендований
+  - рядок
+translation_of: Web/JavaScript/Reference/Global_Objects/String/substr
+---
+<p>{{JSRef}}</p>
+
+<div class="warning"><strong>Застереження</strong>: Хоча метод <code>String.prototype.substr(…)</code> не є строго не рекомендованим (як "прибраний з веб-стандартів"), він вважається <strong>застарілим</strong> та не бажаний для використання, коли це можливо. Він не є частиною ядра мови JavaScript та може бути прибраний в майбутньому. За можливості, використовуйте замість нього метод <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/String/substring">substring()</a></code>.</div>
+
+<p class="seoSummary">Метод <strong><code>substr()</code></strong> повертає частину рядка, що починається з вказаного індекса та продовжується вказану кількість символів.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-substr.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>str</var>.substr(<var>start</var>[, <var>length]</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>Індекс першого символу, який треба включити у повернений рядок.</dd>
+ <dt><code>length</code></dt>
+ <dd>Необов'язковий. Кількість символів, яку треба повернути.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Новий рядок, що містить вказану частину наданого рядка.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>substr()</code> вирізає <code>length</code> символів з рядка <code>string</code>, рахуючи з початкового індексу <code>start</code>.</p>
+
+<p>Якщо <code>start</code> є додатним числом, індекс рахується з початку рядка. Його значення обмежується значенням <code>str.length</code>.<br>
+ Якщо <code>start</code> є від'ємним числом, індекс рахується з кінця рядка. Його значення обмежується значенням <code>-str.length</code>.<br>
+ Заувага: У Microsoft JScript від'ємне значення аргументу <code>start</code> не вважається посиланням на кінець рядка.</p>
+
+<p>Якщо аргумент <code>length</code> пропущений, <code>substr()</code> повертає символи до кінця рядка.<br>
+ Якщо <code>length</code> дорівнює {{jsxref("undefined")}}, <code>substr()</code> повертає символи до кінця рядка.<br>
+ Якщо <code>length</code> є від'ємним числом, він вважається рівним 0.</p>
+
+<p>Для обох, <code>start</code> та <code>length</code>, NaN вважається рівним 0.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_substr">Використання <code>substr()</code></h3>
+
+<pre class="brush: js">var aString = 'Mozilla';
+
+console.log(aString.substr(0, 1));   // 'M'
+console.log(aString.substr(1, 0));   // ''
+console.log(aString.substr(-1, 1));  // 'a'
+console.log(aString.substr(1, -1));  // ''
+console.log(aString.substr(-3));     // 'lla'
+console.log(aString.substr(1));      // 'ozilla'
+console.log(aString.substr(-20, 2)); // 'Mo'
+console.log(aString.substr(20, 2));  // ''
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>JScript у Microsoft не підтримує від'ємні значення початкового індекса. Щоб використовувати цю функціональність у JScript, ви можете скористатись наступним кодом:</p>
+
+<pre class="brush: js">// запускайте тільки якщо функція substr() не працює
+if ('ab'.substr(-1) != 'b') {
+  /**
+   *  Отримати підрядок з рядка
+   *  @param  {integer}  start   де почати підрядок
+   *  @param  {integer}  length  скільки символів повертати
+   *  @return {string}
+   */
+  String.prototype.substr = function(substr) {
+    return function(start, length) {
+      // викликаємо початковий метод
+      return substr.call(this,
+      	// якщо ми отримали від'ємний start, порахувати, скільки це від початку рядка
+        // відкоригувати параметр start для від'ємного значення
+        start &lt; 0 ? this.length + start : start,
+        length)
+    }
+  }(String.prototype.substr);
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.substr', 'String.prototype.substr')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.substr")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.slice()")}}</li>
+ <li>{{jsxref("String.prototype.substring()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/substring/index.html b/files/uk/web/javascript/reference/global_objects/string/substring/index.html
new file mode 100644
index 0000000000..146c0e05b5
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/substring/index.html
@@ -0,0 +1,181 @@
+---
+title: String.prototype.substring()
+slug: Web/JavaScript/Reference/Global_Objects/String/substring
+tags:
+  - JavaScript
+  - String
+  - метод
+  - рядок
+translation_of: Web/JavaScript/Reference/Global_Objects/String/substring
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>substring()</code></strong> повертає частину рядка між початковим та кінцевим індексами, або до кінця рядка.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-substring.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.substring(<var>indexStart</var>[, <var>indexEnd</var>])</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>indexStart</var></code></dt>
+ <dd>Індекс першого символу, який потрібно включити у повернений рядок.</dd>
+ <dt><code><var>indexEnd</var></code> {{optional_inline}}</dt>
+ <dd>Індекс першого символу, який непотрібно включати у повернений рядок.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Новий рядок, що містить вказану частину наданого рядка.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>substring()</code> вирізає символи, починаючи з <code><var>indexStart</var></code><var>,</var> і до (<em>але не включно з</em>) <code><var>indexEnd</var></code>. Зокрема:</p>
+
+<ul>
+ <li>Якщо <code><var>indexEnd</var></code> не надано, <code>substring()</code> вирізає символи до кінця рядка.</li>
+ <li>Якщо <code><var>indexStart</var></code> дорівнює <code><var>indexEnd</var></code>, <code>substring()</code> повертає порожній рядок.</li>
+ <li>Якщо <code><var>indexStart</var></code> більший за <code><var>indexEnd</var></code>, тоді ефект <code>substring()</code> буде такий, ніби два аргументи поміняли місцями; Дивіться приклад нижче.</li>
+</ul>
+
+<p>Будь-яке значення аргументу менше за <code>0</code> чи більше за <code>stringName.length</code> вважається рівним <code>0</code> та <code>stringName.length</code>, відповідно.</p>
+
+<p>Будь-яке значення аргументу, що є {{jsxref("NaN")}}, вважається рівним <code>0</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_substring">Використання <code>substring()</code></h3>
+
+<p>Наступний приклад використовує <code>substring()</code>, щоб вивести символи з рядка <code>'Mozilla'</code>:</p>
+
+<pre class="brush: js">let anyString = 'Mozilla'
+
+// Виводить 'M'
+console.log(anyString.substring(0, 1))
+console.log(anyString.substring(1, 0))
+
+// Виводить 'Mozill'
+console.log(anyString.substring(0, 6))
+
+// Виводить 'lla'
+console.log(anyString.substring(4))
+console.log(anyString.substring(4, 7))
+console.log(anyString.substring(7, 4))
+
+// Виводить 'Mozilla'
+console.log(anyString.substring(0, 7))
+console.log(anyString.substring(0, 10))
+</pre>
+
+<h3 id="Використання_substring_з_властивістю_length">Використання <code>substring()</code> з властивістю <code>length</code></h3>
+
+<p>Наступний приклад використовує метод <code>substring()</code> та властивість {{jsxref("String.length", "length")}}, щоб отримати останні символи певного рядка. Цей метод, можливо, легше запам'ятати, враховуючи, що вам не потрібно знати початковий та кінцевий індекси, як у попередніх прикладах.</p>
+
+<pre class="brush: js">// Виводить 'illa', останні 4 символи
+let anyString = 'Mozilla'
+let anyString4 = anyString.substring(anyString.length - 4)
+console.log(anyString4)
+
+// Виводить 'zilla' останні 5 символів
+let anyString = 'Mozilla'
+let anyString5 = anyString.substring(anyString.length - 5)
+console.log(anyString5)
+</pre>
+
+<h3 id="Різниця_між_substring_та_substr">Різниця між <code>substring()</code> та <code>substr()</code></h3>
+
+<p>Існує невелика відмінність між методами <code>substring()</code> та {{jsxref("String.substr", "substr()")}}, тому слід бути обережними, щоб не переплутати їх.</p>
+
+<p>Аргументи <code>substring()</code> відображають початковий та кінцевий індекси, в той час, як аргументи <code>substr()</code> відображають початковий індекс та кількість символів, яку необхідно включити у повернений рядок.</p>
+
+<p>Крім того, метод <code>substr()</code> вважається <strong>застарілою функціональністю ECMAScript</strong> та може бути прибраний з майбутніх версій, а отже, його краще уникати, де можливо.</p>
+
+<pre class="brush: js">let text = 'Mozilla'
+console.log(text.substring(2,5))  // =&gt; "zil"
+console.log(text.substr(2,3))     // =&gt; "zil"</pre>
+
+<h3 id="Різниця_між_substring_та_slice">Різниця між <code>substring()</code> та <code>slice()</code></h3>
+
+<p>Методи <code>substring()</code> та {{jsxref("String.slice", "slice()")}} майже ідентичні, але між ними є пара невеликих відмінностей, особливо у поводженні з від'ємними аргументами.</p>
+
+<p>Метод <code>substring()</code> міняє місцями свої аргументи, якщо <code><var>indexStart</var></code> більший за <code><var>indexEnd</var></code>, це означає, що рядок все одно буде повернений. Метод {{jsxref("String.slice", "slice()")}} повертає порожній рядок у цьому випадку.</p>
+
+<pre class="brush: js">let text = 'Mozilla'
+console.log(text.substring(5, 2))  // =&gt; "zil"
+console.log(text.slice(5, 2))      // =&gt; ""
+</pre>
+
+<p>Якщо один або обидва аргументи від'ємні чи <code>NaN</code>, метод <code>substring()</code> вважає, що вони дорівнюють <code>0</code>.</p>
+
+<pre class="brush: js">console.log(text.substring(-5, 2))  // =&gt; "Mo"
+console.log(text.substring(-5, -2)) // =&gt; ""
+</pre>
+
+<p><code>slice()</code> також вважає аргументи <code>NaN</code> рівними <code>0</code>, але, коли отримує від'ємні значення, він рахує індекс у зворотньому напрямку, з кінця рядка.</p>
+
+<pre class="brush: js">console.log(text.slice(-5, 2))   // =&gt; ""
+console.log(text.slice(-5, -2))  // =&gt; "zil"
+</pre>
+
+<p>Дивіться більше прикладів з від'ємними числами на сторінці {{jsxref("String.slice", "slice()")}}.</p>
+
+<h3 id="Заміна_підрядка_всередині_рядка">Заміна підрядка всередині рядка</h3>
+
+<p>Наступний приклад замінює підрядок всередині рядка. Він замінить і окремі символи, і підрядки. Виклик функції в кінці прикладу змінює рядок <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Прекрасний новий світ</span></font> на <code>Прекрасний новий сайт</code>.</p>
+
+<pre class="brush: js">// Замінює oldS на newS у рядку fullS
+function replaceString(oldS, newS, fullS) {
+  for (let i = 0; i &lt; fullS.length; ++i) {
+    if (fullS.substring(i, i + oldS.length) == oldS) {
+      fullS = fullS.substring(0, i) + newS + fullS.substring(i + oldS.length, fullS.length)
+    }
+  }
+  return fullS
+}
+
+replaceString('світ', 'сайт', 'Прекрасний новий світ')
+</pre>
+
+<p>Зауважте, що це може призвести до нескінченного циклу, якщо <code>oldS</code> сам є підрядком <code>newS</code> — наприклад, якби ви спробували замінити тут <code>'світ'</code> на <code>'всесвіт'</code>.</p>
+
+<p>Кращим методом заміни рядків є наступний:</p>
+
+<pre class="brush: js">function replaceString(oldS, newS, fullS) {
+  return fullS.split(oldS).join(newS)
+}
+</pre>
+
+<p>Наведений вище код є прикладом операцій з підрядками. Якщо вам необхідно замінювати підрядки, в більшості випадків вам краще скористатись {{jsxref("String.prototype.replace()")}}.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.substring', 'String.prototype.substring')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.substring")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.substr()")}}</li>
+ <li>{{jsxref("String.prototype.slice()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/sup/index.html b/files/uk/web/javascript/reference/global_objects/string/sup/index.html
new file mode 100644
index 0000000000..5fcc97cdee
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/sup/index.html
@@ -0,0 +1,66 @@
+---
+title: String.prototype.sup()
+slug: Web/JavaScript/Reference/Global_Objects/String/sup
+tags:
+  - JavaScript
+  - String
+  - метод
+  - не рекомендований
+  - рядок
+translation_of: Web/JavaScript/Reference/Global_Objects/String/sup
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p>Метод <strong><code>sup()</code></strong> створює HTML-елемент <a href="/uk/docs/Web/HTML/Element/sup" title="HTML-елемент верхнього індексу (&lt;sup>) вказує вбудований текст, який необхідно відобразити верхнім індексом суто для друкарського використання."><code>&lt;sup&gt;</code></a>, який відображає рядок у вигляді верхнього індексу.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.sup()</code></pre>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Рядок, що містить HTML-елемент <a href="/uk/docs/Web/HTML/Element/sup" title="HTML-елемент верхнього індексу (&lt;sup>) вказує вбудований текст, який необхідно відобразити верхнім індексом суто для друкарського використання."><code>&lt;sup&gt;</code></a>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>sup()</code> вбудовує рядок у тег <code>&lt;sup&gt;</code>: <code>"&lt;sup&gt;str&lt;/sup&gt;"</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_методів_sub_та_sup">Використання методів <code>sub()</code> та <code>sup()</code></h3>
+
+<p>Наступний приклад використовує методи {{jsxref("String.prototype.sub()", "sub()")}} та <code>sup()</code> для форматування рядка:</p>
+
+<pre class="brush: js">var superText = 'верхній індекс';
+var subText = 'нижній індекс';
+
+console.log('Так виглядає ' + superText.sup() + '.');
+// Так виглядає &lt;sup&gt;верхній індекс&lt;/sup&gt;.
+
+console.log('Так виглядає ' + subText.sub() + '.');
+// Так виглядає &lt;sub&gt;нижній індекс&lt;/sub&gt;.</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.sup', 'String.prototype.sup')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.sup")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.sub()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/tolocalelowercase/index.html b/files/uk/web/javascript/reference/global_objects/string/tolocalelowercase/index.html
new file mode 100644
index 0000000000..2e595bc9a0
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/tolocalelowercase/index.html
@@ -0,0 +1,106 @@
+---
+title: String.prototype.toLocaleLowerCase()
+slug: Web/JavaScript/Reference/Global_Objects/String/toLocaleLowerCase
+tags:
+  - Internationalization
+  - JavaScript
+  - Method
+  - Prototype
+  - String
+  - Довідка
+  - Уміжнароднення
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toLocaleLowerCase
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>toLocaleLowerCase()</strong></code> повертає той самий рядок, але з літерами переведеними до нижнього регістра відповідно до правил певної мови (місцевості).</p>
+
+<p>{{EmbedInteractiveExample("pages/js/string-tolocalelowercase.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>str</var>.toLocaleLowerCase()
+<var>str</var>.toLocaleLowerCase(locale)
+<var>str</var>.toLocaleLowerCase([locale, locale, ...])
+</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>locale</code> {{optional_inline}}</dt>
+ <dd>Цей параметр вказує мовний код (або перелік мовних кодів), відповідно до якого має здійснюватися перетворення регістра. Якщо вказано кілька мовних кодів (передано масив рядків), обирається <a href="https://tc39.github.io/ecma402/#sec-bestavailablelocale">найліпший з наявних</a>. Якщо параметр не вказано, буде використано системне значення (з налаштувань оточення).</dd>
+</dl>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>Новий рядок із тим самим вмістом, але літерами переведеними до нижнього регістра відповідно до правил певної мови (місцевості).</p>
+
+<h3 id="Винятки">Винятки</h3>
+
+<ul>
+ <li>Викидає виняток <code>{{jsxref("RangeError")}}</code> ("Invalid language tag: xx_yy"), якщо параметр <code>locale</code> не є належним мовним кодом (кодом місцевості).</li>
+ <li>Викидає виняток <code>{{jsxref("TypeError")}}</code> ("Language ID should be string or object."), якщо елемент масиву <code>locale</code> не є рядком.</li>
+</ul>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Всі великі літери перетворюються на малі відповідно до правил певної мови (місцевості), а все решта лишається без змін. Позаяк клас <code>{{jsxref("String")}}</code> належить до незмінних типів даних, виклик <code>toLocaleLowerCase()</code> створює новий рядок, лишаючи оригінал без змін.</p>
+
+<p>Зазвичай метод <code>toLocaleLowerCase()</code> вертає той самий результат, що й <code>{{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}</code>. Втім для деяких мов, як-от турецька, правила перетворення регістра дещо відрізняються від того, що передбачено у Unicode, тож результат буде іншим.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_toLocaleLowerCase">Використання <code>toLocaleLowerCase()</code></h3>
+
+<p>Якщо мовний код не зазначено, використовується поточне системне значення:</p>
+
+<pre class="brush: js">// виводить 'абетка'
+console.log('Абетка'.toLocaleLowerCase());
+</pre>
+
+<p>Можна вказати лише один код чи декілька одночасно:</p>
+
+<pre class="brush: js">// виводить true
+console.log('\u0130'.toLocaleLowerCase('tr') === 'i');
+// виводить fales
+console.log('\u0130'.toLocaleLowerCase('en-US') === 'i');
+
+let locales = ['tr', 'TR', 'tr-TR', 'tr-u-co-search', 'tr-x-turkish'];
+
+// виводить true
+console.log('\u0130'.toLocaleLowerCase(locales) === 'i');
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sup-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.toLocaleLowerCase")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li>
+ <li>{{jsxref("String.prototype.toLowerCase()")}}</li>
+ <li>{{jsxref("String.prototype.toUpperCase()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html b/files/uk/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html
new file mode 100644
index 0000000000..d8d2346ec8
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html
@@ -0,0 +1,107 @@
+---
+title: String.prototype.toLocaleUpperCase()
+slug: Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase
+tags:
+  - Internationalization
+  - JavaScript
+  - Method
+  - Prototype
+  - String
+  - Довідка
+  - Уміжнароднення
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>toLocaleUpperCase()</strong></code> повертає той самий рядок, але з літерами переведеними до верхнього регістра відповідно до правил певної мови (місцевості).</p>
+
+<p>{{EmbedInteractiveExample("pages/js/string-tolocaleuppercase.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>str</var>.toLocaleUpperCase()
+<var>str</var>.toLocaleUpperCase(locale)
+<var>str</var>.toLocaleUpperCase([locale, locale, ...])
+</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>locale</code> {{optional_inline}}</dt>
+ <dd>Цей параметр вказує мовний код (або перелік мовних кодів), відповідно до якого має здійснюватися перетворення регістра. Якщо вказано кілька мовних кодів (передано масив рядків), обирається <a href="https://tc39.github.io/ecma402/#sec-bestavailablelocale">найліпший з наявних</a>. Якщо параметр не вказано, буде використано системне значення (з налаштувань оточення).</dd>
+</dl>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>Новий рядок із тим самим вмістом, але літерами переведеними до верхнього регістра відповідно до правил певної мови (місцевості).</p>
+
+<h3 id="Винятки">Винятки</h3>
+
+<ul>
+ <li>Викидає виняток <code>{{jsxref("RangeError")}}</code> ("Invalid language tag: xx_yy"), якщо параметр <code>locale</code> не є належним мовним кодом (кодом місцевості).</li>
+ <li>Викидає виняток <code>{{jsxref("TypeError")}}</code> ("Language ID should be string or object."), якщо елемент масиву <code>locale</code> не є рядком.</li>
+</ul>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Всі малі літери перетворюються на великі відповідно до правил певної мови (місцевості), а все решта лишається без змін. Позаяк клас <code>{{jsxref("String")}}</code> належить до незмінних типів даних, виклик <code>toLocaleUpperCase()</code> створює новий рядок, лишаючи оригінал без змін. </p>
+
+<p>Зазвичай метод <code>toLocaleUpperCase()</code> вертає той самий результат, що й <code>{{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}</code>. Втім для деяких мов, як-от турецька, правила перетворення регістра дещо відрізняються від того, що передбачено у Unicode, тож результат буде іншим.</p>
+
+<p>Також зауважте, що перетворення не обов'язково є перетворенням символів 1:1, оскільки деякі символи можуть перетворитись на два (або навіть більше) символів при переведенні у верхній регістр. Таким чином, довжина отриманого рядка може відрізнятись від довжини вхідного рядка. Це також означає, що перетворення не є стабільним, а отже, наприклад, наступне може повернути <code>false</code>:<br>
+ <code>x.toLocaleLowerCase() === x.toLocaleUpperCase().toLocaleLowerCase()</code></p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_toLocaleUpperCase">Використання <code>toLocaleUpperCase()</code></h3>
+
+<p>Якщо мовний код не зазначено, використовується поточне системне значення:</p>
+
+<pre class="brush: js">// виводить 'АБЕТКА'
+console.log('Абетка'.toLocaleUpperCase());
+</pre>
+
+<p>Можна вказати лише один код чи декілька одночасно:</p>
+
+<pre class="brush: js">// виводить 'I'
+console.log('i\u0307'.toLocaleUpperCase('lt-LT'));
+
+let locales = ['lt', 'LT', 'lt-LT', 'lt-u-co-phonebk', 'lt-x-lietuva'];
+
+// виводить 'I'
+console.log('i\u0307'.toLocaleUpperCase(locales));
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sup-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.toLocaleUpperCase")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li>
+ <li>{{jsxref("String.prototype.toLowerCase()")}}</li>
+ <li>{{jsxref("String.prototype.toUpperCase()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/tolowercase/index.html b/files/uk/web/javascript/reference/global_objects/string/tolowercase/index.html
new file mode 100644
index 0000000000..ba6068d86a
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/tolowercase/index.html
@@ -0,0 +1,74 @@
+---
+title: String.prototype.toLowerCase()
+slug: Web/JavaScript/Reference/Global_Objects/String/toLowerCase
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - String
+  - Довідка
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toLowerCase
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>toLowerCase()</strong></code> повертає той самий рядок, але з літерами переведеними до нижнього регістра.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/string-tolowercase.html","shorter")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.toLowerCase()</code></pre>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>Новий рядок із тим самим вмістом, але літерами переведеними до нижнього регістра.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Всі великі літери перетворюються на малі, а все решта лишається без змін. Позаяк клас <code>{{jsxref("String")}}</code> належить до незмінних типів даних, виклик <code>toLowerCase()</code> створює новий рядок, лишаючи оригінал без змін.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_toLowerCase">Використання <code>toLowerCase()</code></h3>
+
+<p>Кожна велика літера замінюється малою, а решта лишається без змін:</p>
+
+<pre class="brush: js">// виводить 'абетка'
+console.log('Абетка'.toLowerCase());
+</pre>
+
+<p>Якщо рядок не містить жодної великої літери, то жодних змін не відбувається:</p>
+
+<pre class="brush: js">// виводить 'дідькова гра'
+console.log('дідькова гра'.toLowerCase());</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.toLowerCase")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li>
+ <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li>
+ <li>{{jsxref("String.prototype.toUpperCase()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/tosource/index.html b/files/uk/web/javascript/reference/global_objects/string/tosource/index.html
new file mode 100644
index 0000000000..22d5a2e49e
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/tosource/index.html
@@ -0,0 +1,56 @@
+---
+title: String.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/String/toSource
+tags:
+  - JavaScript
+  - String
+  - Довідка
+  - метод
+  - нестандартний
+  - рядок
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toSource
+---
+<div>{{JSRef}} {{obsolete_header}}</div>
+
+<p>Метод <strong><code>toSource()</code></strong> вертає рядкове представлення першокоду об'єкта.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>String.toSource()
+<var>str</var>.toSource()
+</code></pre>
+
+<h3 id="Значення_що_вертається">Значення, що вертається</h3>
+
+<p>Рядкове представлення першокоду об'єкта, який викликав метод.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>toSource()</code> вертає наступні значення:</p>
+
+<p>Для вбудованого об'єкта {{jsxref("String")}} <code>toSource()</code> вертає наступний рядок, який вказує, що першокод недоступний:</p>
+
+<pre class="brush: js">function String() {
+    [native code]
+}
+</pre>
+
+<p>Для екземплярів {{jsxref("String")}} або рядкових літералів <code>toSource()</code> вертає рядок, що відображає першокод.</p>
+
+<p>Цей метод зазвичай JavaScript викликає внутрішньо, а не явно у коді.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Не є частиною жодного стандарту. Реалізований у JavaScript 1.3.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.toSource")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/tostring/index.html b/files/uk/web/javascript/reference/global_objects/string/tostring/index.html
new file mode 100644
index 0000000000..927d694e18
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/tostring/index.html
@@ -0,0 +1,65 @@
+---
+title: String.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/String/toString
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - String
+  - Довідка
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toString
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>toString()</code></strong> повертає рядкове представлення вказаного об'єкта.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/string-tostring.html")}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.toString()</code></pre>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>Рядкове представлення об'єкта, який викликав метод.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Клас <code>{{jsxref("String")}}</code> має власну реалізацію метода <code>toString()</code>, а не успадковану <code>{{jsxref("Object.prototype.toString()")}}</code>. Для об'єктів класу <code>{{jsxref("String")}}</code>, цей метод повертає значення, що має рядковий тип даних, для якого клас <code>{{jsxref("String")}}</code> є обгорткою. Тобто те саме, що вертає метод <code>{{jsxref("String.prototype.valueOf()", "valueOf()")}}</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_toString">Використання <code>toString()</code></h3>
+
+<p>Наступний приклад виводить до консолі рядкове значення об'єкта <code>{{jsxref("String")}}</code>:</p>
+
+<pre class="brush: js">var x = new String('Hello world');
+
+console.log(x.toString());  // виводить 'Hello world'
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.tostring', 'String.prototype.toString')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.toString")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+ <li>{{jsxref("String.prototype.valueOf()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/touppercase/index.html b/files/uk/web/javascript/reference/global_objects/string/touppercase/index.html
new file mode 100644
index 0000000000..8b766dc42d
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/touppercase/index.html
@@ -0,0 +1,88 @@
+---
+title: String.prototype.toUpperCase()
+slug: Web/JavaScript/Reference/Global_Objects/String/toUpperCase
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - String
+  - Довідка
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toUpperCase
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>toUpperCase()</strong></code> повертає той самий рядок, але з літерами переведеними до верхнього регістра (значення буде перетворене на рядок, якщо воно не є рядком).</p>
+
+<p>{{EmbedInteractiveExample("pages/js/string-touppercase.html","shorter")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.toUpperCase()</code></pre>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>Новий рядок із тим самим вмістом, але літерами переведеними до верхнього регістра.</p>
+
+<h3 id="Винятки">Винятки</h3>
+
+<dl>
+ <dt>{{jsxref("TypeError")}}</dt>
+ <dd>Якщо викликається для {{jsxref("null")}} або {{jsxref("undefined")}}, наприклад, <code>String.prototype.toUpperCase.call(undefined)</code>.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Всі малі літери перетворюються на великі, а все решта лишається без змін. Позаяк клас <code>{{jsxref("String")}}</code> належить до незмінних типів даних, виклик <code>toUpperCase()</code> створює новий рядок, лишаючи оригінал без змін.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Базове_використання">Базове використання</h3>
+
+<pre class="brush: js">console.log('Абетка'.toUpperCase()); // 'АБЕТКА'
+</pre>
+
+<h3 id="Перетворення_нерядкових_значень_this_на_рядки">Перетворення нерядкових значень <code>this</code> на рядки</h3>
+
+<p>Цей метод перетворить будь-яке нерядкове значення на рядок, коли ви присвоюєте його <code>this</code> значення, що не є рядком:</p>
+
+<pre class="brush: js">const a = String.prototype.toUpperCase.call({
+  toString: function toString() {
+    return 'абвгґд';
+  }
+});
+
+const b = String.prototype.toUpperCase.call(true);
+
+// виводить 'АБВГҐД TRUE'.
+console.log(a, b);</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.toUpperCase")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li>
+ <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li>
+ <li>{{jsxref("String.prototype.toLowerCase()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/trim/index.html b/files/uk/web/javascript/reference/global_objects/string/trim/index.html
new file mode 100644
index 0000000000..2f31660a29
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/trim/index.html
@@ -0,0 +1,84 @@
+---
+title: String.prototype.trim()
+slug: Web/JavaScript/Reference/Global_Objects/String/Trim
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - String
+  - метод
+  - рядок
+translation_of: Web/JavaScript/Reference/Global_Objects/String/Trim
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>trim()</code></strong> прибирає пробіли з обох кінців рядка. Пробілами в даному контексті є усі пробільні символи (пробіл, табуляція, нерозривний пробіл та ін.) та усі символи закінчення рядка (LF, CR, та ін.).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-trim.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.trim()</code></pre>
+
+<h3 id="Значення_що_вертається">Значення, що вертається</h3>
+
+<p>Новий рядок, що є рядком <code><var>str</var></code> без пробілів з обох кінців.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>trim()</code> повертає рядок з прибраними пробілами з обох кінців. <code>trim()</code> не змінює значення самого рядка <code><var>str</var></code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_trim">Використання <code>trim()</code></h3>
+
+<p>Наступний приклад виводить рядок з малих літер <code>'ква'</code>:</p>
+
+<pre class="brush: js">var orig = '   ква  ';
+console.log(orig.trim()); // 'ква'
+
+// Ще приклад, коли .trim() прибирає пробіли лише з одного боку.
+
+var orig = 'ква    ';
+console.log(orig.trim()); // 'ква'
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Виконання наступного коду перед будь-яким іншим кодом створить метод <code>trim()</code>, якщо він недоступний початково.</p>
+
+<pre class="brush: js">if (!String.prototype.trim) {
+  String.prototype.trim = function () {
+    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
+  };
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.trim', 'String.prototype.trim')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.trim")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.trimStart()")}}</li>
+ <li>{{jsxref("String.prototype.trimEnd()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/trimend/index.html b/files/uk/web/javascript/reference/global_objects/string/trimend/index.html
new file mode 100644
index 0000000000..2344e2e7bb
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/trimend/index.html
@@ -0,0 +1,80 @@
+---
+title: String.prototype.trimEnd()
+slug: Web/JavaScript/Reference/Global_Objects/String/trimEnd
+tags:
+  - JavaScript
+  - String
+  - Довідка
+  - метод
+  - рядок
+translation_of: Web/JavaScript/Reference/Global_Objects/String/trimEnd
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>trimEnd()</code></strong> прибирає пробіли з кінця рядка. <code>trimRight()</code> є псевдонімом цього методу.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-trimend.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.trimEnd();
+<var>str</var>.trimRight();</code></pre>
+
+<h3 id="Значення_що_вертається">Значення, що вертається</h3>
+
+<p>Новий рядок, який відображає початковий рядок без пробілів з (правого) кінця.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Методи <code>trimEnd()</code> / <code>trimRight()</code> повертають рядок з прибраними пробілами з правого кінця. <code>trimEnd()</code> чи <code>trimRight()</code> не змінюють значення самого рядка.</p>
+
+<h3 id="Псевдонім">Псевдонім</h3>
+
+<p>Для сумісності з такими функціями як {{jsxref("String.prototype.padEnd")}}, стандартним ім'ям методу є <code>trimEnd</code>. Однак, з причин веб-сумісності <code>trimRight</code> залишається в якості псевдоніму <code>trimEnd</code>. В деяких рушіях це означає:</p>
+
+<pre class="brush: js">String.prototype.trimRight.name === "trimEnd";</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_trimEnd">Використання <code>trimEnd()</code></h3>
+
+<p>Наступний приклад виводить рядок з малих літер <code>'   ква'</code>:</p>
+
+<pre class="brush: js; highlight: [5]">var str = '   ква  ';
+
+console.log(str.length); // 8
+
+str = str.trimEnd();
+console.log(str.length); // 6
+console.log(str);        // '   ква'
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.trimend', 'String.prototype.trimEnd')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.trimEnd")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.trim()")}}</li>
+ <li>{{jsxref("String.prototype.trimStart()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/trimstart/index.html b/files/uk/web/javascript/reference/global_objects/string/trimstart/index.html
new file mode 100644
index 0000000000..03a3dc0ffc
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/trimstart/index.html
@@ -0,0 +1,115 @@
+---
+title: String.prototype.trimStart()
+slug: Web/JavaScript/Reference/Global_Objects/String/trimStart
+tags:
+  - JavaScript
+  - String
+  - метод
+  - рядок
+translation_of: Web/JavaScript/Reference/Global_Objects/String/trimStart
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>trimStart()</code></strong> видаляє пробіли з початку рядка. <code>trimLeft()</code> є псевдонімом цього методу.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-trimstart.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>str</var>.trimStart();
+<var>str</var>.trimLeft();</pre>
+
+<h3 id="Значення_що_вертається">Значення, що вертається</h3>
+
+<p>Новий рядок, який відображає початковий рядок без пробілів на початку (з лівого кінця).</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Методи <code>trimStart()</code> / <code>trimLeft()</code> повертають рядок з прибраними пробілами з лівого кінця. <code>trimLeft()</code> чи <code>trimStart()</code> не змінюють значення самого рядка.</p>
+
+<h3 id="Псевдонім">Псевдонім</h3>
+
+<p>Для сумісності з такими функціями, як {{jsxref("String.prototype.padStart")}}, стандартним ім'ям методу є <code>trimStart</code>. Однак, з причин веб-сумісності <code>trimLeft</code> залишається в якості псевдоніму <code>trimStart</code>. В деяких рушіях це означає:</p>
+
+<pre class="brush: js">String.prototype.trimLeft.name === "trimStart";</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_trimStart">Використання <code>trimStart()</code></h3>
+
+<p>Наступний приклад виводить рядок з малих літер <code>'ква  '</code>:</p>
+
+<pre class="brush: js; highlight: [5]">var str = '   ква  ';
+
+console.log(str.length); // 8
+
+str = str.trimStart();
+console.log(str.length); // 5
+console.log(str);        // 'ква  '
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.trimstart', ' String.prototype.trimStart')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.trimStart")}}</p>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<pre class="brush: js; highlight: [5]">//https://github.com/FabioVergani/js-Polyfill_String-trimStart
+
+(function(w){
+    var String=w.String, Proto=String.prototype;
+
+    (function(o,p){
+        if(p in o?o[p]?false:true:true){
+            var r=/^\s+/;
+            o[p]=o.trimLeft||function(){
+                return this.replace(r,'')
+            }
+        }
+    })(Proto,'trimStart');
+
+})(window);
+
+
+/*
+ES6:
+(w=&gt;{
+    const String=w.String, Proto=String.prototype;
+
+    ((o,p)=&gt;{
+        if(p in o?o[p]?false:true:true){
+            const r=/^\s+/;
+            o[p]=o.trimLeft||function(){
+                return this.replace(r,'')
+            }
+        }
+    })(Proto,'trimStart');
+
+})(window);
+*/</pre>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.trim()")}}</li>
+ <li>{{jsxref("String.prototype.trimEnd()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/string/valueof/index.html b/files/uk/web/javascript/reference/global_objects/string/valueof/index.html
new file mode 100644
index 0000000000..a4956328d0
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/string/valueof/index.html
@@ -0,0 +1,64 @@
+---
+title: String.prototype.valueOf()
+slug: Web/JavaScript/Reference/Global_Objects/String/valueOf
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - String
+  - Довідка
+translation_of: Web/JavaScript/Reference/Global_Objects/String/valueOf
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>valueOf()</code></strong> повертає {{glossary("Primitive", "просту величину")}}, що є значенням об'єкта <code>{{jsxref("String")}}</code>.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/string-valueof.html")}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.valueOf()</code></pre>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>Рядок (величину, яка належить до простого типу даних {{jsxref("string")}}), що є значенням цього об'єкта <code>{{jsxref("String")}}</code>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>valueOf()</code> класу <code>{{jsxref("String")}}</code> повертає значення, що має рядковий тип даних, для якого клас <code>{{jsxref("String")}}</code> є обгорткою. Це значення тотожне до <code>{{jsxref("String.prototype.toString()")}}</code>.</p>
+
+<p>Цей метод зазвичай викликається всередині рушія JavaScript, а не в явний спосіб у коді.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_valueOf">Використання <code>valueOf()</code></h3>
+
+<pre class="brush: js">var str = new String('Hello, world');
+console.log(str.valueOf());  // виводить 'Hello, world'
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.valueof', 'String.prototype.valueOf')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.valueOf")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.toString()")}}</li>
+ <li>{{jsxref("Object.prototype.valueOf()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/symbol/asynciterator/index.html b/files/uk/web/javascript/reference/global_objects/symbol/asynciterator/index.html
new file mode 100644
index 0000000000..69b6b4c5d1
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/symbol/asynciterator/index.html
@@ -0,0 +1,86 @@
+---
+title: Symbol.asyncIterator
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/asyncIterator
+tags:
+  - ECMAScript 2018
+  - JavaScript
+  - Symbol
+  - Властивість
+  - Довідка
+  - Символ
+  - асинхронний
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/asyncIterator
+---
+<div>{{JSRef}}</div>
+
+<p>Добревідомий символ <code><strong>Symbol.asyncIterator</strong></code> вказує для об'єкта AsyncIterator за замовчуванням. Якщо ця властивість присутня в об'єкті, то він є асинхронним ітерабельним об'єктом і може використовуватись у циклі <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for-await...of">for await...of</a></code>.</p>
+
+
+
+<h2 id="Опис">Опис</h2>
+
+<p>Символ <code>Symbol.asyncIterator</code> є вбудованим символом, який використовується для доступу до метода <code>@@asyncIterator</code> у об'єкта. Для того, щоб об'єкт був асинхронним ітерабельним об'єктом, він повинен мати ключ <code>Symbol.asyncIterator</code>.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Асинхронні_ітерабельні_обєкти_створені_користувачем">Асинхронні ітерабельні об'єкти, створені користувачем</h3>
+
+<p>Ви можете визначити власний асинхронний ітерабельний об'єкт, встановивши на об'єкті властивість <code>[Symbol.asyncIterator]</code>. </p>
+
+<pre class="brush: js notranslate">const myAsyncIterable = new Object();
+myAsyncIterable[Symbol.asyncIterator] = async function*() {
+    yield "привіт";
+    yield "асинхронний";
+    yield "перебір!";
+};
+
+(async () =&gt; {
+    for await (const x of myAsyncIterable) {
+        console.log(x);
+        // очікуваний результат:
+        //    "привіт"
+        //    "асинхронний"
+        //    "перебір!"
+    }
+})();
+</pre>
+
+<p>Створюючи API, пам'ятайте, що асинхронні ітерабельні об'єкти створені для того, щоб відображати щось <em>ітерабельне</em>, наприклад, потік даних чи список, а не для того, щоб повністю замінити зворотні виклики та події у більшості ситуацій.</p>
+
+<h3 id="Вбудовані_асинхронні_ітерабельні_обєкти">Вбудовані асинхронні ітерабельні об'єкти</h3>
+
+<p>У JavaScript наразі не існує вбудованих об'єктів, що мають ключ <code>[Symbol.asyncIterator]</code> за замовчуванням. Однак, WHATWG Streams можуть стати першим вбудованим асинхронним ітерабельним об'єктом, з нещодавно доданим у специфікацію символом <code>[Symbol.asyncIterator]</code>.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2018', '#sec-symbol.asynciterator', 'Symbol.asyncIterator')}}</td>
+   <td>{{Spec2('ES2018')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{compat("javascript.builtins.Symbol.asyncIterator")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору">Протоколи перебору</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/for-await...of">for await... of</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/symbol/description/index.html b/files/uk/web/javascript/reference/global_objects/symbol/description/index.html
new file mode 100644
index 0000000000..039755bd5e
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/symbol/description/index.html
@@ -0,0 +1,67 @@
+---
+title: Symbol.prototype.description
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/description
+tags:
+  - JavaScript
+  - Symbol
+  - Властивість
+  - Символ
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/description
+---
+<div>{{JSRef}}</div>
+
+<p>Властивість лише для читання <code><strong>description</strong></code> - це рядок, що повертає необов'язковий опис об'єктів {{JSxRef("Symbol")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-prototype-description.html")}}</div>
+
+
+
+<h2 id="Опис">Опис</h2>
+
+<p>{{JSxRef("Symbol","Символьні")}} об'єкти можуть бути створені з необов'язковим описом, який можна використовувати для відлагодження, але не для доступу до самого символа. Властивість <code>Symbol.prototype.description</code> можна використати, щоб прочитати цей опис. Вона відрізняється від <code>Symbol.prototype.toString()</code>, оскільки не містить рядка "<code>Symbol()</code>" навколо. Дивіться приклади.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_опису">Використання опису</h3>
+
+<pre class="brush: js notranslate">Symbol('desc').toString();   // "Symbol(desc)"
+Symbol('desc').description;  // "desc"
+Symbol('').description;      // ""
+Symbol().description;        // undefined
+
+// добревідомі символи
+Symbol.iterator.toString();  // "Symbol(Symbol.iterator)"
+Symbol.iterator.description; // "Symbol.iterator"
+
+// глобальні символи
+Symbol.for('foo').toString();  // "Symbol(foo)"
+Symbol.for('foo').description; // "foo"
+
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("ESDraft", "#sec-symbol.prototype.description", "get Symbol.prototype.description")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Symbol.description")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{JSxRef("Symbol.prototype.toString()")}}</li>
+ <li>Поліфіл: <a href="https://npmjs.com/symbol.prototype.description">https://npmjs.com/symbol.prototype.description</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/symbol/hasinstance/index.html b/files/uk/web/javascript/reference/global_objects/symbol/hasinstance/index.html
new file mode 100644
index 0000000000..78a1246aa5
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/symbol/hasinstance/index.html
@@ -0,0 +1,81 @@
+---
+title: Symbol.hasInstance
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Symbol
+  - Властивість
+  - Довідка
+  - Символ
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Добревідомий символ <strong><code>Symbol.hasInstance</code></strong> використовують, щоб визначити, чи конструктор розпізнає об'єкт як свій екземпляр. Цим символом можна налаштовувати поведінку оператора {{jsxref("Operators/instanceof", "instanceof")}}.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-hasinstance.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Змінена_поведінка_instanceof">Змінена поведінка instanceof</h3>
+
+<p>Ви можете реалізувати свою власну поведінку <code>instanceof</code>, наприклад, так:</p>
+
+<pre class="brush: js notranslate">class MyArray {
+  static [Symbol.hasInstance](instance) {
+    return Array.isArray(instance)
+  }
+}
+console.log([] instanceof MyArray); // true
+</pre>
+
+<pre class="brush: js notranslate">function MyArray() { }
+Object.defineProperty(MyArray, Symbol.hasInstance, {
+  value: function(instance) { return Array.isArray(instance); }
+});
+console.log([] instanceof MyArray); // true</pre>
+
+<h3 id="Перевіряємо_екземпляр_обєкта">Перевіряємо екземпляр об'єкта</h3>
+
+<p>Таким самим чином, як ви перевіряєте, чи є об'єкт екземпляром класу, за допомогою ключового слова <code>instanceof</code>, можна використати <code>Symbol.hasInstance</code> для таких перевірок.</p>
+
+<pre class="brush: js notranslate">class Animal {
+  constructor() {}
+}
+
+const cat = new Animal();
+
+console.log(Animal[Symbol.hasInstance](cat)); // true
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.hasinstance', 'Symbol.hasInstance')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Symbol.hasInstance")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Operators/instanceof", "instanceof")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/symbol/index.html b/files/uk/web/javascript/reference/global_objects/symbol/index.html
new file mode 100644
index 0000000000..eb4625fdb6
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/symbol/index.html
@@ -0,0 +1,466 @@
+---
+title: Symbol
+slug: Web/JavaScript/Reference/Global_Objects/Symbol
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - NeedsTranslation
+  - Symbol
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol
+---
+<div>{{JSRef}}</div>
+
+<p><strong>Символ</strong> є {{Glossary("Primitive", "простим типом даних")}}. Функція  <code>Symbol()</code> вертає значення типу <strong>символ</strong>, має статичні властивості, що відкривають декілька членів вбудованих об'єктів, має статичні методи, що відкривають глобальний реєстр символів, та нагадує вбудований клас об'єкта, але не є повноцінним конструктором, оскільки не підтримує синтаксис "<code>new Symbol()</code>".</p>
+
+<p>Кожне символьне значення, що його вертає <code>Symbol()</code>, є унікальним. Символьне значення може використовуватись в якості ідентифікатора властивостей об'єкта; це єдина мета цього типу даних. Більше пояснень щодо мети та використання можна знайти у <a href="/uk/docs/Glossary/Символ">статті словника щодо символів</a>.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/symbol-constructor.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Symbol(<em>[description]</em>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>description</code> {{optional_inline}}</dt>
+ <dd>Необов'язковий, рядок. Опис символу, який можна використовувати для відлагодження, але не для доступу для самого символу.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Для створення примітивного символа ви пишете <code>Symbol()</code> з необов'язковим рядком в ролі його опису:</p>
+
+<pre class="brush: js">var sym1 = Symbol();
+var sym2 = Symbol('foo');
+var sym3 = Symbol('foo');
+</pre>
+
+<p>Наведений код створює три нові символи. Зауважте, що <code>Symbol("foo")</code> не приводить рядок "foo" до символу. Він кожен раз створює новий символ:</p>
+
+<pre class="brush: js">Symbol('foo') === Symbol('foo'); // false</pre>
+
+<p>Наступний синтаксис з оператором {{jsxref("Operators/new", "new")}} викине помилку {{jsxref("TypeError")}}:</p>
+
+<pre class="brush: js">var sym = new Symbol(); // TypeError</pre>
+
+<p>Це запобігає створенню явного об'єкта-обгортки <code>Symbol</code> замість нового символьного значення та може дивувати, оскільки створення явного об'єкта-обгортки для примітивних типів даних загалом можливе (для прикладу, <code>new Boolean</code>, <code>new String</code> та <code>new Number</code>).</p>
+
+<p>Якщо вам дуже потрібно створити об'єкт обгортку <code>Symbol</code>, ви можете скористатись функцією <code>Object()</code>:</p>
+
+<pre class="brush: js">var sym = Symbol('foo');
+typeof sym;     // "symbol"
+var symObj = Object(sym);
+typeof symObj;  // "object"
+</pre>
+
+<h3 id="Спільні_символи_у_глобальному_реєстрі_символів">Спільні символи у глобальному реєстрі символів</h3>
+
+<p>Наведений синтаксис використання функції <code>Symbol()</code> не створить глобальний символ, доступний з усієї вашої кодової бази. Щоб створити символи, доступні в усіх файлах і навіть у різних сферах (кожна з яких має свою глобальну область видимості), використовуйте методи {{jsxref("Symbol.for()")}} та {{jsxref("Symbol.keyFor()")}}, щоб записувати та читати символи у глобальному реєстрі символів.</p>
+
+<h3 id="Пошук_символьних_властивостей_обєктів">Пошук символьних властивостей об'єктів</h3>
+
+<p>Метод {{jsxref("Object.getOwnPropertySymbols()")}} повертає масив символів та дозволяє знайти символьні властивості наданого об'єкта. Зауважте, що жоден об'єкт не ініціалізується з особистими символьними властивостями, отже, цей масив буде порожнім, якщо тільки ви не задали символьні властивості об'єкта.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt><code>Symbol.length</code></dt>
+ <dd>Length property whose value is 0.</dd>
+ <dt>{{jsxref("Symbol.prototype")}}</dt>
+ <dd>Represents the prototype for the <code>Symbol</code> constructor.</dd>
+</dl>
+
+<h3 id="Well-known_symbols">Well-known symbols</h3>
+
+<p>In addition to your own symbols, JavaScript has some built-in symbols which represent internal language behaviors which were not exposed to developers in ECMAScript 5 and before. These symbols can be accessed using the following properties:</p>
+
+<h4 id="Iteration_symbols">Iteration symbols</h4>
+
+<dl>
+ <dt>{{jsxref("Symbol.iterator")}}</dt>
+ <dd>A method returning the default iterator for an object. Used by <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a>.</dd>
+</dl>
+
+<h4 id="Regular_expression_symbols">Regular expression symbols</h4>
+
+<dl>
+ <dt>{{jsxref("Symbol.match")}}</dt>
+ <dd>A method that matches against a string, also used to determine if an object may be used as a regular expression. Used by {{jsxref("String.prototype.match()")}}.</dd>
+ <dt>{{jsxref("Symbol.replace")}}</dt>
+ <dd>A method that replaces matched substrings of a string. Used by {{jsxref("String.prototype.replace()")}}.</dd>
+ <dt>{{jsxref("Symbol.search")}}</dt>
+ <dd>A method that returns the index within a string that matches the regular expression. Used by {{jsxref("String.prototype.search()")}}.</dd>
+ <dt>{{jsxref("Symbol.split")}}</dt>
+ <dd>A method that splits a string at the indices that match a regular expression. Used by {{jsxref("String.prototype.split()")}}.</dd>
+</dl>
+
+<h4 id="Other_symbols">Other symbols</h4>
+
+<dl>
+ <dt>{{jsxref("Symbol.hasInstance")}}</dt>
+ <dd>A method determining if a constructor object recognizes an object as its instance. Used by {{jsxref("Operators/instanceof", "instanceof")}}.</dd>
+ <dt>{{jsxref("Symbol.isConcatSpreadable")}}</dt>
+ <dd>A Boolean value indicating if an object should be flattened to its array elements. Used by {{jsxref("Array.prototype.concat()")}}.</dd>
+ <dt>{{jsxref("Symbol.unscopables")}}</dt>
+ <dd>An object value of whose own and inherited property names are excluded from the <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code> environment bindings of the associated object.</dd>
+ <dt>{{jsxref("Symbol.species")}}</dt>
+ <dd>A constructor function that is used to create derived objects.</dd>
+ <dt>{{jsxref("Symbol.toPrimitive")}}</dt>
+ <dd>A method converting an object to a primitive value.</dd>
+ <dt>{{jsxref("Symbol.toStringTag")}}</dt>
+ <dd>A string value used for the default description of an object. Used by {{jsxref("Object.prototype.toString()")}}.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{jsxref("Symbol.for()", "Symbol.for(key)")}}</dt>
+ <dd>Searches for existing symbols with the given key and returns it if found. Otherwise a new symbol gets created in the global symbol registry with this key.</dd>
+ <dt>{{jsxref("Symbol.keyFor", "Symbol.keyFor(sym)")}}</dt>
+ <dd>Retrieves a shared symbol key from the global symbol registry for the given symbol.</dd>
+</dl>
+
+<h2 id="Symbol_prototype"><code>Symbol</code> prototype</h2>
+
+<p>All Symbols inherit from {{jsxref("Symbol.prototype")}}.</p>
+
+<h3 id="Properties_2">Properties</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Symbol/prototype','Properties')}}</p>
+
+<h3 id="Methods_2">Methods</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Symbol/prototype','Methods')}}</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_the_typeof_operator_with_symbols">Using the <code>typeof</code> operator with symbols</h3>
+
+<p>The {{jsxref("Operators/typeof", "typeof")}} operator can help you to identify symbols.</p>
+
+<pre class="brush: js">typeof Symbol() === 'symbol'
+typeof Symbol('foo') === 'symbol'
+typeof Symbol.iterator === 'symbol'
+</pre>
+
+<h3 id="Symbol_type_conversions">Symbol type conversions</h3>
+
+<p>Some things to note when working with type conversion of symbols.</p>
+
+<ul>
+ <li>When trying to convert a symbol to a number, a {{jsxref("TypeError")}} will be thrown<br>
+  (e.g. <code>+sym</code> or <code>sym | 0</code>).</li>
+ <li>When using loose equality, <code>Object(sym) == sym</code> returns <code>true.</code></li>
+ <li><code>Symbol("foo") + "bar" </code>throws a {{jsxref("TypeError")}} (can't convert symbol to string). This prevents you from silently creating a new string property name from a symbol, for example.</li>
+ <li>The <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion">"safer" <code>String(sym)</code> conversion</a> works like a call to {{jsxref("Symbol.prototype.toString()")}} with symbols, but note that <code>new String(sym)</code> will throw.</li>
+</ul>
+
+<h3 id="Symbols_and_for...in_iteration">Symbols and <code>for...in</code> iteration</h3>
+
+<p>Symbols are not enumerable in <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a> iterations. In addition, {{jsxref("Object.getOwnPropertyNames()")}} will not return symbol object properties, however, you can use {{jsxref("Object.getOwnPropertySymbols()")}} to get these.</p>
+
+<pre class="brush: js">var obj = {};
+
+obj[Symbol('a')] = 'a';
+obj[Symbol.for('b')] = 'b';
+obj['c'] = 'c';
+obj.d = 'd';
+
+for (var i in obj) {
+   console.log(i); // logs "c" and "d"
+}</pre>
+
+<h3 id="Symbols_and_JSON.stringify">Symbols and <code>JSON.stringify()</code></h3>
+
+<p>Symbol-keyed properties will be completely ignored when using <code>JSON.stringify()</code>:</p>
+
+<pre class="brush: js">JSON.stringify({[Symbol('foo')]: 'foo'});
+// '{}'</pre>
+
+<p>For more details, see {{jsxref("JSON.stringify()")}}.</p>
+
+<h3 id="Symbol_wrapper_objects_as_property_keys">Symbol wrapper objects as property keys</h3>
+
+<p>When a Symbol wrapper object is used as a property key, this object will be coerced to its wrapped symbol:</p>
+
+<pre class="brush: js">var sym = Symbol('foo');
+var obj = {[sym]: 1};
+obj[sym];            // 1
+obj[Object(sym)];    // still 1
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol-objects', 'Symbol')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol-objects', 'Symbol')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(38)}}</td>
+   <td>{{CompatGeckoDesktop(36)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>9</td>
+  </tr>
+  <tr>
+   <td>Symbol.iterator (@@iterator)</td>
+   <td>{{CompatChrome(38)}}</td>
+   <td>{{CompatGeckoDesktop(36)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>9</td>
+  </tr>
+  <tr>
+   <td>Symbol.unscopables (@@unscopables)</td>
+   <td>{{CompatChrome(38)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>9</td>
+  </tr>
+  <tr>
+   <td>Symbol.match (@@match)</td>
+   <td>{{CompatChrome(50)}}</td>
+   <td>{{CompatGeckoDesktop(40)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Symbol.species (@@species)</td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatGeckoDesktop(41)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Symbol.toPrimitive (@@toPrimitive)</td>
+   <td>{{CompatChrome(48)}}</td>
+   <td>{{CompatGeckoDesktop(44)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Symbol.replace (@@replace)</td>
+   <td>{{CompatChrome(50)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Symbol.search (@@search)</td>
+   <td>{{CompatChrome(50)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Symbol.split (@@split)</td>
+   <td>{{CompatChrome(50)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Symbol.isConcatSpreadable (@@isconcatspreadable)</td>
+   <td>{{CompatChrome(48)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Symbol.hasInstance (@@hasInstance)</td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatGeckoDesktop(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Symbol.toStringTag (@@toStringTag)</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoDesktop(51)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(38)}}</td>
+   <td>{{CompatGeckoMobile(36)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>9</td>
+  </tr>
+  <tr>
+   <td>Symbol.iterator (@@iterator)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(38)}}</td>
+   <td>{{CompatGeckoMobile(36)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>9</td>
+  </tr>
+  <tr>
+   <td>Symbol.unscopables (@@unscopables)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(38)}}</td>
+   <td>{{CompatGeckoMobile(48)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>9</td>
+  </tr>
+  <tr>
+   <td>Symbol.match (@@match)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(40)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Symbol.species (@@species)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(41)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Symbol.toPrimitive (@@toPrimitive)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(44)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Symbol.replace (@@replace)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(48)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Symbol.search (@@search)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(48)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Symbol.split (@@split)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(48)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Symbol.isConcatSpreadable (@@isconcatspreadable)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(48)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Symbol.hasInstance (@@hasInstance)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Symbol.toStringTag (@@toStringTag)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(51)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Glossary/Symbol">Glossary: Symbol data type</a></li>
+ <li>{{jsxref("Operators/typeof", "typeof")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-symbols/">"ES6 In Depth: Symbols" on hacks.mozilla.org</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.html b/files/uk/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.html
new file mode 100644
index 0000000000..2c6541ad4d
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.html
@@ -0,0 +1,99 @@
+---
+title: Symbol.isConcatSpreadable
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/isConcatSpreadable
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Symbol
+  - Властивість
+  - Символ
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/isConcatSpreadable
+---
+<div>{{JSRef}}</div>
+
+<p>Добревідомий символ <strong><code>Symbol.isConcatSpreadable</code></strong> використовують, щоб налаштувати вирівнювання об'єкта до масиву його елементів при використанні методу {{jsxref("Array.prototype.concat()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-isconcatspreadable.html")}}</div>
+
+
+
+<h2 id="Опис">Опис</h2>
+
+<p>Символ <code>@@isConcatSpreadable</code> (<code>Symbol.isConcatSpreadable</code>) може бути визначений як особиста чи успадкована властивість, а його значення є булевою величиною. Він може контролювати поведінку масивів та подібних до масивів об'єктів:</p>
+
+<ul>
+ <li>Для масивів поведінкою за замовчуванням є розкладання (вирівнювання) елементів. <code>Symbol.isConcatSpreadable</code> може запобігти вирівнюванню у цих випадках.</li>
+ <li>Подібні до масивів об'єкти за замовчуванням не виконують розкладання чи вирівнювання. <code>Symbol.isConcatSpreadable</code> може виконати примусове вирівнювання у цих випадках.</li>
+</ul>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Масиви">Масиви</h3>
+
+<p>За замовчуванням {{jsxref("Array.prototype.concat()")}} розкладає (вирівнює) масиви:</p>
+
+<pre class="brush: js notranslate">let alpha = ['а', 'б', 'в'],
+let numeric = [1, 2, 3]
+
+let alphaNumeric = alpha.concat(numeric)
+
+console.log(alphaNumeric)  // Результат: ['а', 'б', 'в', 1, 2, 3]
+</pre>
+
+<p>Присвоївши <code>Symbol.isConcatSpreadable</code> значення <code>false</code>, ви можете відключити цю поведінку:</p>
+
+<pre class="brush: js notranslate">let alpha = ['а', 'б', 'в'],
+let numeric = [1, 2, 3]
+
+numeric[Symbol.isConcatSpreadable] = false
+let alphaNumeric = alpha.concat(numeric)
+
+console.log(alphaNumeric)  // Результат: ['а', 'б', 'в', [1, 2, 3] ]
+</pre>
+
+<h3 id="Подібні_до_масивів_обєкти">Подібні до масивів об'єкти</h3>
+
+<p>Подібні до масивів об'єкти за замовчуванням не розкладаються. <code>Symbol.isConcatSpreadable</code> необхідно присвоїти <code>true</code>, щоб отримати вирівняний масив:</p>
+
+<pre class="brush: js notranslate">let x = [1, 2, 3]
+
+let fakeArray = {
+  [Symbol.isConcatSpreadable]: true,
+  length: 2,
+  0: 'всім',
+  1: 'привіт'
+}
+
+x.concat(fakeArray)  // [1, 2, 3, "всім", "привіт"]
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Заувага:</strong> Властивість <code>length</code> використовується, щоб контролювати кількість властивостей об'єкта, що будуть додані. У наведеному вище прикладі <code>length:2</code> вказує, що треба додати дві властивості.</p>
+</div>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.isconcatspreadable', 'Symbol.isconcatspreadable')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Symbol.isConcatSpreadable")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/symbol/iterator/index.html b/files/uk/web/javascript/reference/global_objects/symbol/iterator/index.html
new file mode 100644
index 0000000000..a41c7e413c
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/symbol/iterator/index.html
@@ -0,0 +1,116 @@
+---
+title: Symbol.iterator
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/iterator
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Symbol
+  - Властивість
+  - Символ
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/iterator
+---
+<div>{{JSRef}}</div>
+
+<p>Добревідомий символ <code><strong>Symbol.iterator</strong></code> визначає для об'єкта ітератор за замовчуванням. Використовується циклом <a href="/uk/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a>.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/symbol-iterator.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Коли виникає необхідність перебрати об'єкт (наприклад, на початку циклу <code>for..of</code>), його метод <code>@@iterator</code> викликається без аргументів, а <strong>ітератор</strong>, який він повертає, використовується для отримання значень, що перебираються.</p>
+
+<p>Деякі вбудовані типи мають визначену за замовчуванням поведінку під час перебору, в той час, як інші типи (такі як {{jsxref("Object")}}) її не мають. Вбудовані типи, що мають метод <code>@@iterator</code>, наступні:</p>
+
+<ul>
+ <li>{{jsxref("Array.@@iterator", "Array.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("TypedArray.@@iterator", "TypedArray.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("String.@@iterator", "String.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("Set.@@iterator", "Set.prototype[@@iterator]()")}}</li>
+</ul>
+
+<p>Дивіться більше інформації у статті<a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору"> Протоколи перебору</a>.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Створені_користувачем_ітерабельні_обєкти">Створені користувачем ітерабельні об'єкти</h3>
+
+<p>Ми можемо створювати власні ітерабельні об'єкти наступним чином:</p>
+
+<pre class="brush: js notranslate">var myIterable = {}
+myIterable[Symbol.iterator] = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+};
+[...myIterable] // [1, 2, 3]
+</pre>
+
+<p>Або ітерабельні об'єкти можна визначити безпосередньо всередині класу чи об'єкта, використовуючи <a href="/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів#Обчислювані_імена_властивостей">обчислювані властивості</a>:</p>
+
+<pre class="brush: js notranslate">class Foo {
+  *[Symbol.iterator] () {
+    yield 1;
+    yield 2;
+    yield 3;
+  }
+}
+
+const someObj = {
+  *[Symbol.iterator] () {
+    yield 'а';
+    yield 'б';
+  }
+}
+
+[...new Foo] // [ 1, 2, 3 ]
+[...someObj] // [ 'а', 'б' ]</pre>
+
+<h3 id="Погано_сформовані_ітерабельні_обєкти">Погано сформовані ітерабельні об'єкти</h3>
+
+<p>Якщо метод ітерабельного об'єкта <code>@@iterator</code> не повертає об'єкт ітератора, то це погано сформований ітерабельний об'єкт. Використання його в такому вигляді ймовірно призведе до викидання винятків під час виконання або помилкової поведінки:</p>
+
+<pre class="brush: js notranslate">var nonWellFormedIterable = {}
+nonWellFormedIterable[Symbol.iterator] = () =&gt; 1
+[...nonWellFormedIterable] // TypeError: [] is not a function
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.iterator', 'Symbol.iterator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Symbol.iterator")}}</p>
+
+<div id="compat-mobile"></div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору">Протоколи перебору</a></li>
+ <li>{{jsxref("Array.@@iterator", "Array.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("TypedArray.@@iterator", "TypedArray.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("String.@@iterator", "String.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("Set.@@iterator", "Set.prototype[@@iterator]()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/symbol/match/index.html b/files/uk/web/javascript/reference/global_objects/symbol/match/index.html
new file mode 100644
index 0000000000..fd076f301f
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/symbol/match/index.html
@@ -0,0 +1,71 @@
+---
+title: Symbol.match
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/match
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Symbol
+  - Властивість
+  - Символ
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/match
+---
+<div>{{JSRef}}</div>
+
+<p>Добревідомий символ <code><strong>Symbol.match</strong></code> визначає збіг регулярного виразу з рядком. Ця функція викликається методом {{jsxref("String.prototype.match()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-match.html")}}</div>
+
+
+
+<h2 id="Опис">Опис</h2>
+
+<p>Ця функція також використовується, щоб з'ясувати, чи об'єкти поводяться як регулярні вирази. Наприклад, методи {{jsxref("String.prototype.startsWith()")}}, {{jsxref("String.prototype.endsWith()")}} та {{jsxref("String.prototype.includes()")}} перевіряють, чи є перший аргумент регулярним виразом, та викидають {{jsxref("TypeError")}}, якщо це так. Отже, якщо символ <code>match</code> має значення <code>false</code> (або <a href="/uk/docs/Glossary/Falsy">хибне</a> значення), він вказує, що об'єкт не призначений для використання в якості регулярного виразу.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Відключення_перевірки_isRegExp">Відключення перевірки <code>isRegExp</code></h3>
+
+<p>Наступний код викине помилку {{jsxref("TypeError")}}:</p>
+
+<pre class="brush: js notranslate">'/bar/'.startsWith(/bar/);
+
+// Викидає TypeError, оскільки /bar/ є регулярним виразом,
+// а Symbol.match не змінений.</pre>
+
+<p>Однак, якщо ви присвоїте <code>Symbol.match</code> значення <code>false</code>, перевірка <code>isRegExp</code> (яка використовує властивість <code>match</code>) вкаже, що об'єкт не є об'єктом регулярного виразу. Як наслідок, методи <code>startsWith</code> та <code>endsWith</code> не викидатимуть <code>TypeError</code>.</p>
+
+<pre class="brush: js notranslate">var re = /foo/;
+re[Symbol.match] = false;
+'/foo/'.startsWith(re); // true
+'/baz/'.endsWith(re);   // false
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.match', 'Symbol.match')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Symbol.match")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.replace")}}</li>
+ <li>{{jsxref("Symbol.search")}}</li>
+ <li>{{jsxref("Symbol.split")}}</li>
+ <li>{{jsxref("RegExp.@@match", "RegExp.prototype[@@match]()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/symbol/matchall/index.html b/files/uk/web/javascript/reference/global_objects/symbol/matchall/index.html
new file mode 100644
index 0000000000..af531d4376
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/symbol/matchall/index.html
@@ -0,0 +1,78 @@
+---
+title: Symbol.matchAll
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/matchAll
+tags:
+  - JavaScript
+  - Symbol
+  - Властивість
+  - Довідка
+  - Символ
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/matchAll
+---
+<div>{{JSRef}}</div>
+
+<p>Добревідомий символ <code><strong>Symbol.matchAll</strong></code> повертає ітератор, який видає збіги регулярного виразу з рядком. Ця функція викликається методом {{jsxref("String.prototype.matchAll()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-matchall.html","shorter")}}</div>
+
+
+
+<h2 id="Опис">Опис</h2>
+
+<div>
+<p>Цей символ використовується для {{jsxref("String.prototype.matchAll()")}} та зокрема у {{jsxref("RegExp.@@matchAll", "RegExp.prototype[@@matchAll]()")}}. Наступні два приклади повертають однаковий результат:</p>
+
+<pre class="brush: js notranslate">'абв'.matchAll(/а/);
+
+/а/[Symbol.matchAll]('абв');</pre>
+
+<p>Цей метод існує для налаштування поведінки пошуку збігів всередині підкласів {{jsxref("RegExp")}}.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_Symbol.matchAll">Використання Symbol.matchAll</h3>
+
+<pre class="brush: js notranslate">let re = /[0-9]+/g;
+let str = '2016-01-02|2019-03-07';
+
+const numbers = {
+  *[Symbol.matchAll] (str) {
+    for (const n of str.matchAll(/[0-9]+/g))
+      yield n[0];
+  }
+};
+
+console.log(Array.from(str.matchAll(numbers)));
+//  Array ["2016", "01", "02", "2019", "03", "07"]
+</pre>
+
+<p>Дивіться більше прикладів у {{jsxref("String.prototype.matchAll()")}} та {{jsxref("RegExp.@@matchAll", "RegExp.prototype[@@matchAll]()")}}.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.matchall', 'Symbol.matchAll')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Symbol.matchAll")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.matchAll()")}}</li>
+ <li>{{jsxref("RegExp.@@matchAll", "RegExp.prototype[@@matchAll]()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/symbol/replace/index.html b/files/uk/web/javascript/reference/global_objects/symbol/replace/index.html
new file mode 100644
index 0000000000..0f37a4a289
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/symbol/replace/index.html
@@ -0,0 +1,66 @@
+---
+title: Symbol.replace
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/replace
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Symbol
+  - Властивість
+  - Символ
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/replace
+---
+<div>{{JSRef}}</div>
+
+<p>Добревідомий символ <code><strong>Symbol.replace</strong></code> визначає метод, який замінює збіги у рядку. Ця функція викликається методом {{jsxref("String.prototype.replace()")}}.</p>
+
+<p>Щоб дізнатись більше, дивіться {{jsxref("RegExp.@@replace", "RegExp.prototype[@@replace]()")}} та {{jsxref("String.prototype.replace()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-replace.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_Symbol.replace">Використання Symbol.replace</h3>
+
+<pre class="brush: js notranslate">class CustomReplacer {
+  constructor(value) {
+    this.value = value;
+  }
+  [Symbol.replace](string) {
+    return string.replace(this.value, '#!@?');
+  }
+}
+
+console.log('football'.replace(new CustomReplacer('foo')));
+// очікуваний результат: "#!@?tball"</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.replace', 'Symbol.replace')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Symbol.replace")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.match")}}</li>
+ <li>{{jsxref("Symbol.search")}}</li>
+ <li>{{jsxref("Symbol.split")}}</li>
+ <li>{{jsxref("RegExp.@@replace", "RegExp.prototype[@@replace]()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/symbol/search/index.html b/files/uk/web/javascript/reference/global_objects/symbol/search/index.html
new file mode 100644
index 0000000000..36aad26385
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/symbol/search/index.html
@@ -0,0 +1,66 @@
+---
+title: Symbol.search
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/search
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Symbol
+  - Властивість
+  - Символ
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/search
+---
+<div>{{JSRef}}</div>
+
+<p>Добревідомий символ <code><strong>Symbol.search</strong></code> визначає метод, який повертає індекс у рядку, що збігається з регулярним виразом. Ця функція викликається методом {{jsxref("String.prototype.search()")}}.</p>
+
+<p>Щоб дізнатись більше, дивіться {{jsxref("RegExp.@@search", "RegExp.prototype[@@search]()")}} та {{jsxref("String.prototype.search()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-search.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Користувацький_пошук_у_рядку">Користувацький пошук у рядку</h3>
+
+<pre class="brush: js notranslate">class caseInsensitiveSearch {
+  constructor(value) {
+    this.value = value.toLowerCase();
+  }
+  [Symbol.search](string) {
+    return string.toLowerCase().indexOf(this.value);
+  }
+}
+
+console.log('foobar'.search(new caseInsensitiveSearch('BaR')));
+// очікуваний результат: 3</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.search', 'Symbol.search')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Symbol.search")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.match")}}</li>
+ <li>{{jsxref("Symbol.replace")}}</li>
+ <li>{{jsxref("Symbol.split")}}</li>
+ <li>{{jsxref("RegExp.@@search", "RegExp.prototype[@@search]()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/symbol/species/index.html b/files/uk/web/javascript/reference/global_objects/symbol/species/index.html
new file mode 100644
index 0000000000..0698c840d5
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/symbol/species/index.html
@@ -0,0 +1,69 @@
+---
+title: Symbol.species
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/species
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Symbol
+  - Властивість
+  - Символ
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/species
+---
+<div>{{JSRef}}</div>
+
+<p>Добревідомий символ <code><strong>Symbol.species</strong></code> визначає властивість, значенням якої є функція, яку використовує конструктор для створення похідних об'єктів.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-species.html")}}</div>
+
+
+
+<h2 id="Опис">Опис</h2>
+
+<p>Властивість-аксесор species дозволяє підкласам перевизначати конструктор для об'єктів.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_species">Використання species</h3>
+
+<p>Можливо, ви захочете повертати об'єкти {{jsxref("Array")}} у вашому похідному класі масивів <code>MyArray</code>. Наприклад, при використанні методів, таких як {{jsxref("Array.map", "map()")}}, які повертають конструктор за замовчуванням, ви бажаєте, щоб вони повертали батьківський об'єкт <code>Array</code> замість об'єкта <code>MyArray</code>. Символ species дозволяє це зробити:</p>
+
+<pre class="brush: js notranslate">class MyArray extends Array {
+  // Перевизначаємо species на батьківський конструктор Array
+  static get [Symbol.species]() { return Array; }
+}
+let a = new MyArray(1,2,3);
+let mapped = a.map(x =&gt; x * x);
+
+console.log(mapped instanceof MyArray); // false
+console.log(mapped instanceof Array);   // true
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.species', 'Symbol.species')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Symbol.species")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Map.@@species", "Map[@@species]")}}</li>
+ <li>{{jsxref("Set.@@species", "Set[@@species]")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/symbol/split/index.html b/files/uk/web/javascript/reference/global_objects/symbol/split/index.html
new file mode 100644
index 0000000000..baabe4748f
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/symbol/split/index.html
@@ -0,0 +1,66 @@
+---
+title: Symbol.split
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/split
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Symbol
+  - Властивість
+  - Символ
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/split
+---
+<div>{{JSRef}}</div>
+
+<p>Добревідомий символ <code><strong>Symbol.split</strong></code> визначає метод, що розбиває рядок за індексами, які збігаються з регулярним виразом. Ця функція викликається методом {{jsxref("String.prototype.split()")}}.</p>
+
+<p>Щоб дізнатись більше, дивіться {{jsxref("RegExp.@@split", "RegExp.prototype[@@split]()")}} та {{jsxref("String.prototype.split()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-split.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Користувацьке_розбиття_з_переверненням">Користувацьке розбиття з переверненням</h3>
+
+<pre class="brush: js notranslate">class ReverseSplit {
+  [Symbol.split](string) {
+    const array = string.split(' ');
+    return array.reverse();
+  }
+}
+
+console.log('Another one bites the dust'.split(new ReverseSplit()));
+// очікуваний результат: [ "dust", "the", "bites", "one", "Another" ]</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.split', 'Symbol.split')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Symbol.split")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.match")}}</li>
+ <li>{{jsxref("Symbol.replace")}}</li>
+ <li>{{jsxref("Symbol.search")}}</li>
+ <li>{{jsxref("RegExp.@@split", "RegExp.prototype[@@split]()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/symbol/symbol/index.html b/files/uk/web/javascript/reference/global_objects/symbol/symbol/index.html
new file mode 100644
index 0000000000..8ed616cee6
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/symbol/symbol/index.html
@@ -0,0 +1,83 @@
+---
+title: Конструктор Symbol()
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/Symbol
+---
+<div>{{JSRef}}</div>
+
+<p>Конструктор <code>Symbol()</code> повертає значення типу <strong>symbol</strong>, але він не є повноцінним конструктором, оскільки не підтримує синтаксис "<code>new Symbol()</code>", а також не призначений для створення підкласів. Його можна використовувати як значення блоку <code><a href="/uk/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> у визначенні класу, але виклик його через <code><a href="/uk/docs/Web/JavaScript/Reference/Operators/super">super</a></code> спричинить виняток.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-constructor.html", "taller")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">Symbol([<var>description</var>])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>description</var></code> {{optional_inline}}</dt>
+ <dd>Рядок. Опис символа, який може використовуватись для відлагодження, але не для доступу до самого символа.</dd>
+</dl>
+
+<h2 id="Прилади">Прилади</h2>
+
+<h3 id="Створення_символів">Створення символів</h3>
+
+<p>Щоб створити новий примітивний символ, напишіть <code>Symbol()</code> з необов'язковим рядком опису:</p>
+
+<pre class="brush: js notranslate">let sym1 = Symbol()
+let sym2 = Symbol('foo')
+let sym3 = Symbol('foo')
+</pre>
+
+<p>Наведений вище код створює три нові символи. Зауважте, що <code>Symbol("foo")</code> не приводить рядок <code>"foo"</code> до символа. Він кожен раз створює новий символ:</p>
+
+<pre class="brush: js notranslate">Symbol('foo') === Symbol('foo')  // false
+</pre>
+
+<h3 id="new_Symbol...">new Symbol(...)</h3>
+
+<p>Наступний синтаксис з оператором {{jsxref("Operators/new", "new")}} викине помилку {{jsxref("TypeError")}}:</p>
+
+<pre class="brush: js notranslate">let sym = new Symbol()  // TypeError
+</pre>
+
+<p>Це запобігає створенню явного об'єкта-обгортки <code>Symbol</code> замість нового символьного значення та може здивувати, оскільки створення таких об'єктів-обгорток навколо примітивних типів даних загалом можливе (наприклад, <code>new Boolean</code>, <code>new String</code> та <code>new Number</code>).</p>
+
+<p>Якщо вам дійсно потрібно створити об'єкт-обгортку <code>Symbol</code>, ви можете скористатись фукнцією <code>Object()</code>:</p>
+
+<pre class="brush: js notranslate">let sym    = Symbol('foo');
+let symObj = Object(sym);
+typeof sym    // =&gt; "symbol"
+typeof symObj // =&gt; "object"
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol-constructor', 'Symbol constructor')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Symbol.Symbol")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Glossary/Символ">Словник: символьний тип даних</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/symbol/toprimitive/index.html b/files/uk/web/javascript/reference/global_objects/symbol/toprimitive/index.html
new file mode 100644
index 0000000000..0f9567a8bb
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/symbol/toprimitive/index.html
@@ -0,0 +1,75 @@
+---
+title: Symbol.toPrimitive
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Symbol.toPrimitive</strong></code> - це символ, який визначає властивість зі значенням-функцією, що викликається для перетворення об'єкта на відповідне просте значення.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-toprimitive.html")}}</div>
+
+
+
+<h2 id="Опис">Опис</h2>
+
+<p>За допомогою властивості <strong><code>Symbol.toPrimitive</code></strong> (що використовується в якості функції) об'єкт може перетворюватись на прості значення. Функція викликається з рядковим аргументом <strong><code>hint</code></strong>, який вказує бажаний тип отриманого примітиву. Аргумент <strong><code>hint</code></strong> може мати значення <code>"<em>number</em>"</code>, <code>"<em>string</em>"</code> або <code>"<em>default</em>"</code>.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Модифікація_простих_значень_отриманих_перетворенням_обєкта">Модифікація простих значень, отриманих перетворенням об'єкта</h3>
+
+<p>Наступний приклад описує, як властивість <strong><code>Symbol.toPrimitive</code></strong> може змінювати прості значення, отримані з об'єкта.</p>
+
+<pre class="brush: js notranslate">// Об'єкт без властивості Symbol.toPrimitive.
+var obj1 = {};
+console.log(+obj1);     // NaN
+console.log(`${obj1}`); // "[object Object]"
+console.log(obj1 + ''); // "[object Object]"
+
+// Об'єкт з властивістю Symbol.toPrimitive.
+var obj2 = {
+  [Symbol.toPrimitive](hint) {
+    if (hint == 'number') {
+      return 10;
+    }
+    if (hint == 'string') {
+      return 'привіт';
+    }
+    return true;
+  }
+};
+console.log(+obj2);     // 10        -- hint дорівнює "number"
+console.log(`${obj2}`); // "привіт"  -- hint дорівнює "string"
+console.log(obj2 + ''); // "true"    -- hint дорівнює "default"
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.toprimitive', 'Symbol.toPrimitive')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Symbol.toPrimitive")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Date.@@toPrimitive", "Date.prototype[@@toPrimitive]")}}</li>
+ <li>{{jsxref("Symbol.@@toPrimitive", "Symbol.prototype[@@toPrimitive]")}}</li>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+ <li>{{jsxref("Object.prototype.valueOf()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/symbol/tostringtag/index.html b/files/uk/web/javascript/reference/global_objects/symbol/tostringtag/index.html
new file mode 100644
index 0000000000..9faa5645ca
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/symbol/tostringtag/index.html
@@ -0,0 +1,99 @@
+---
+title: Symbol.toStringTag
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Symbol
+  - Властивість
+  - Довідка
+  - Символ
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag
+---
+<div>{{JSRef}}</div>
+
+<p>Добревідомий символ <strong><code>Symbol.toStringTag</code></strong> - це властивість з рядковим значенням, що використовується для створення заданого рядкового опису об'єкта. До неї звертається метод {{jsxref("Object.prototype.toString()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-tostringtag.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Теги_за_замовчуванням">Теги за замовчуванням</h3>
+
+<pre class="brush: js notranslate">Object.prototype.toString.call('foo');     // "[object String]"
+Object.prototype.toString.call([1, 2]);    // "[object Array]"
+Object.prototype.toString.call(3);         // "[object Number]"
+Object.prototype.toString.call(true);      // "[object Boolean]"
+Object.prototype.toString.call(undefined); // "[object Undefined]"
+Object.prototype.toString.call(null);      // "[object Null]"
+// ... та інші
+</pre>
+
+<h3 id="Вбудовані_символи_toStringTag">Вбудовані символи toStringTag</h3>
+
+<pre class="brush: js notranslate">Object.prototype.toString.call(new Map());       // "[object Map]"
+Object.prototype.toString.call(function* () {}); // "[object GeneratorFunction]"
+Object.prototype.toString.call(Promise.resolve()); // "[object Promise]"
+// ... та інші
+</pre>
+
+<h3 id="Користувацькі_класи_з_тегом_за_замовчуванням">Користувацькі класи з тегом за замовчуванням</h3>
+
+<p>При створенні власного класу, JavaScript за замовчуванням виставляє тег "Object":</p>
+
+<pre class="brush: js notranslate">class ValidatorClass {}
+
+Object.prototype.toString.call(new ValidatorClass()); // "[object Object]"
+</pre>
+
+<h3 id="Користувацький_тег_з_toStringTag">Користувацький тег з toStringTag</h3>
+
+<p>Отже, за допомогою <code>toStringTag</code> ви можете налаштувати свій власний тег:</p>
+
+<pre class="brush: js notranslate">class ValidatorClass {
+  get [Symbol.toStringTag]() {
+    return 'Validator';
+  }
+}
+
+Object.prototype.toString.call(new ValidatorClass()); // "[object Validator]"
+</pre>
+
+<h3 id="toStringTag_доступний_на_усіх_DOM-обєктах">toStringTag доступний на усіх DOM-об'єктах</h3>
+
+<p>Завдяки <a href="https://github.com/heycam/webidl/pull/357">змінам у специфікації WebIDL</a> в середині 2020, переглядачі додають властивість <code>Symbol.toStringTag</code> до усіх DOM-об'єктів. Наприклад, для звернення до властивості <code>Symbol.toStringTag</code> у {{domxref("HTMLButtonElement")}}:</p>
+
+<pre class="brush: js notranslate">let test = document.createElement('button');
+test.toString(); // Вертає [object HTMLButtonElement]
+test[Symbol.toStringTag];  // Вертає HTMLButtonElement</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.tostringtag', 'Symbol.toStringTag')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Symbol.toStringTag")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/symbol/unscopables/index.html b/files/uk/web/javascript/reference/global_objects/symbol/unscopables/index.html
new file mode 100644
index 0000000000..5b90c252d4
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/symbol/unscopables/index.html
@@ -0,0 +1,89 @@
+---
+title: Symbol.unscopables
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/unscopables
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Symbol
+  - Властивість
+  - Символ
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/unscopables
+---
+<div>{{JSRef}}</div>
+
+<p>Добревідомий символ <strong><code>Symbol.unscopables</code></strong> використовується, щоб визначити об'єкт, чиї імена особистих та успадкованих властивостей виключаються з прив'язок оточення <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/with">with</a></code> для асоційованого об'єкта.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-unscopables.html")}}</div>
+
+
+
+<h2 id="Опис">Опис</h2>
+
+<p>Символ <code>@@unscopables</code> (<code>Symbol.unscopables</code>) можна визначити на будь-якому об'єкті, щоб запобігти розкриттю імен властивостей в якості лексичних змінних у прив'язках оточення <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/with">with</a></code>. Зауважте, що при використанні <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">строгого режиму</a> інструкції <code>with</code> недоступні та, відповідно, не потребують цього символа.</p>
+
+<p>Присвоєння властивості значення <code>true</code> у об'єкті <code>unscopables</code> зробить її невидимою (<em>unscopable</em>), і, таким чином, вона не з'явиться у змінних лексичної області видимості. Присвоєння властивості значення <code>false</code> зробить її видимою (<code>scopable</code>), відповідно, вона з'явиться у змінних лексичної області видимості.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Видимість_у_інструкціях_with">Видимість у інструкціях with</h3>
+
+<p>Наступний код добре працює у версіях ES5 та нижче. Однак, у ECMAScript 2015 та пізніших версіях був запроваджений метод {{jsxref("Array.prototype.keys()")}}. Це означає, що всередині оточення <code>with</code> "keys" тепер буде методом, а не змінною. Саме тоді був доданий символ <code>unscopables</code>. Вбудоване налаштування <code>unscopables</code> реалізоване у вигляді {{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}, щоб запобігти потраплянню деяких методів масиву у область видимості <code>with</code>.</p>
+
+<pre class="brush: js notranslate">var keys = [];
+
+with (Array.prototype) {
+  keys.push('something');
+}
+
+Object.keys(Array.prototype[Symbol.unscopables]);
+// ["copyWithin", "entries", "fill", "find", "findIndex",
+//  "includes", "keys", "values"]
+</pre>
+
+<h3 id="Unscopables_у_обєктах">Unscopables у об'єктах</h3>
+
+<p>Ви також можете налаштувати <code>unscopables</code> для своїх власних об'єктів.</p>
+
+<pre class="brush: js notranslate">var obj = {
+  foo: 1,
+  bar: 2
+};
+
+obj[Symbol.unscopables] = {
+  foo: false,
+  bar: true
+};
+
+with (obj) {
+  console.log(foo); // 1
+  console.log(bar); // ReferenceError: bar is not defined
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.unscopables', 'Symbol.unscopables')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Symbol.unscopables")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</li>
+ <li>оператор <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/with">with</a></code> (недоступний у <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">строгому режимі</a>)</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/syntaxerror/index.html b/files/uk/web/javascript/reference/global_objects/syntaxerror/index.html
new file mode 100644
index 0000000000..1ab5c9b5c7
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/syntaxerror/index.html
@@ -0,0 +1,115 @@
+---
+title: SyntaxError
+slug: Web/JavaScript/Reference/Global_Objects/SyntaxError
+tags:
+  - Error
+  - JavaScript
+  - SyntaxError
+  - помилка
+translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError
+---
+<div>{{JSRef}}</div>
+
+<p>Об'єкт класу <code><strong>SyntaxError</strong></code> позначає помилку, що виникає внаслідок спроби виконання коду з порушеннями синтаксису.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Виняток <code>SyntaxError</code> викидається тоді, коли рушій JavaScript під час спроби виконати код виявляє символи чи їх послідовність, що суперечить чинному синтаксу мови.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>new SyntaxError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>message</code> {{optional_inline}}</dt>
+ <dd>Зрозумілий людині опис помилки.</dd>
+ <dt><code>fileName</code> {{non-standard_inline}} {{optional_inline}}</dt>
+ <dd>Ім'я файлу, код з якого спричинив помилку.</dd>
+ <dt><code>lineNumber</code> {{non-standard_inline}} {{optional_inline}}</dt>
+ <dd>Номер рядка в коді, що спричинив помилку.</dd>
+</dl>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt><code>SyntaxError.prototype</code></dt>
+ <dd>Вможливлює додавання властивостей до об'єктів класу <code>SyntaxError</code>.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<p>Сам <code>SyntaxError</code> власних методів не має, але деякі він успадковує через ланцюжок прототипів.</p>
+
+<h2 id="Примірники_SyntaxError">Примірники <code>SyntaxError</code></h2>
+
+<h3 id="Властивості_2">Властивості</h3>
+
+<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype', 'Властивості')}}</div>
+
+<h3 id="Методи_2">Методи</h3>
+
+<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype', 'Методи')}}</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Перехоплення_SyntaxError">Перехоплення <code>SyntaxError</code></h3>
+
+<pre class="brush: js">try {
+  eval('казна-що');
+} catch (e) {
+  console.error(e instanceof SyntaxError);
+  console.error(e.message);
+  console.error(e.name);
+  console.error(e.fileName);
+  console.error(e.lineNumber);
+  console.error(e.columnNumber);
+  console.error(e.stack);
+}
+</pre>
+
+<h3 id="Створення_SyntaxError">Створення <code>SyntaxError</code></h3>
+
+<pre class="brush: js">try {
+  throw new SyntaxError('Отакої!', 'someFile.js', 10);
+} catch (e) {
+  console.error(e instanceof SyntaxError);  // true
+  console.error(e.message);                 // Отакої!
+  console.error(e.name);                    // SyntaxError
+  console.error(e.fileName);                // someFile.js
+  console.error(e.lineNumber);              // 10
+  console.error(e.columnNumber);            // 0
+  console.error(e.stack);                   // @debugger eval code:3:9
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div>
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.SyntaxError")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li><a href="https://gist.github.com/ramsunvtech/7b10137ea1526b7b25ddcf2ad8582fbf">Venkat.R - Various Syntax Error for var variables</a></li>
+ <li><a href="https://gist.github.com/ramsunvtech/879e8b5800f319be432b48753eedf6c8">Venkat.R - Various Syntax Error for let variables</a></li>
+ <li><a href="https://gist.github.com/ramsunvtech/80e75ee317653895a33be69883233bd2">Venkat.R - Various Syntax Error for const variables</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/syntaxerror/prototype/index.html b/files/uk/web/javascript/reference/global_objects/syntaxerror/prototype/index.html
new file mode 100644
index 0000000000..c2d5f46901
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/syntaxerror/prototype/index.html
@@ -0,0 +1,88 @@
+---
+title: SyntaxError.prototype
+slug: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype
+tags:
+  - Error
+  - JavaScript
+  - Prototype
+  - SyntaxError
+  - помилка
+translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError
+---
+<div>{{JSRef}}</div>
+
+<p>Властивість <code><strong>SyntaxError.prototype</strong></code> є прототипом для конструктора {{jsxref("SyntaxError")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Всі примірники {{jsxref("SyntaxError")}} успадковуються від <code>SyntaxError.prototype</code>, тож ви можете скористатися прототипом задля додавання властивостей чи методів до всіх примірників.</p>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt><code>SyntaxError.prototype.constructor</code></dt>
+ <dd>Функція, що створює прототип об'єкта.</dd>
+ <dt>{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}</dt>
+ <dd>Повідомлення помилки. Попри те, що в ECMA-262 зазначено, що {{jsxref("SyntaxError")}} мусить мати свою властивість <code>message</code>, у <a href="/uk/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> він насправді успадковує {{jsxref("Error.prototype.message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}</dt>
+ <dd>Ім'я помилки. Успадковано від {{jsxref("Global_Objects/Error", "Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}</dt>
+ <dd>Шлях до файла, де сталася ця помилка. Успадковано від {{jsxref("Global_Objects/Error", "Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}</dt>
+ <dd>Номер рядка у файлі, де сталася ця помилка. Успадковано від {{jsxref("Global_Objects/Error", "Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}</dt>
+ <dd>Номер символа у рядку, де сталася ця помилка. Успадковано від {{jsxref("Global_Objects/Error", "Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}</dt>
+ <dd>Стек викликів. Успадковано від {{jsxref("Global_Objects/Error", "Error")}}.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<p>Хоча прототип {{jsxref("SyntaxError")}} не містить власних методів, примірники {{jsxref("SyntaxError")}} успадковують деякі методи від ланцюжка прототипів.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Первинне визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div>
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.SyntaxError")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/typeerror/index.html b/files/uk/web/javascript/reference/global_objects/typeerror/index.html
new file mode 100644
index 0000000000..155aafc5bb
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/typeerror/index.html
@@ -0,0 +1,118 @@
+---
+title: TypeError
+slug: Web/JavaScript/Reference/Global_Objects/TypeError
+tags:
+  - Error
+  - JavaScript
+  - TypeError
+  - помилка
+translation_of: Web/JavaScript/Reference/Global_Objects/TypeError
+---
+<div>{{JSRef}}</div>
+
+<p>Об'єкт <code><strong>TypeError</strong></code> позначає помилку, що виникає при використанні значення невідповідного типу.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>new TypeError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Необов'язковий. Зрозумілий людині опис помилки.</dd>
+ <dt><code>fileName</code> {{non-standard_inline}}</dt>
+ <dd>Необов'язковий. Ім'я файлу, код з якого спричинив виняток.</dd>
+ <dt><code>lineNumber</code> {{non-standard_inline}}</dt>
+ <dd>Необов'язковий. Номер рядка в коді, що спричинив виняток.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p><code>TypeError</code> викидається, коли:</p>
+
+<ul>
+ <li>операнд або аргумент, що передається у функцію, несумісний з типом, який очікується цим оператором чи функцією, або</li>
+ <li>при спробі змінити значення, яке не можна змінювати, або</li>
+ <li>при спробі використати значення невідповідним чином.</li>
+</ul>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt><code>TypeError.prototype</code></dt>
+ <dd>Дозволяє додавати властивості до об'єктів <code>TypeError</code>.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<p>Сам <code>TypeError</code> не має власних методів, але успадковує деякі методи через ланцюжок прототипів.</p>
+
+<h2 id="Екземпляри_TypeError">Екземпляри <code>TypeError</code></h2>
+
+<h3 id="Властивості_2">Властивості</h3>
+
+<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/TypeError/prototype', 'Властивості')}}</div>
+
+<h3 id="Методи_2">Методи</h3>
+
+<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/TypeError/prototype', 'Методи')}}</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Перехоплення_TypeError">Перехоплення <code>TypeError</code></h3>
+
+<pre class="brush: js">try {
+  null.f();
+} catch (e) {
+  console.log(e instanceof TypeError) // true
+  console.log(e.message)              // "null has no properties"
+  console.log(e.name)                 // "TypeError"
+  console.log(e.fileName)             // "Scratchpad/1"
+  console.log(e.lineNumber)           // 2
+  console.log(e.columnNumber)         // 2
+  console.log(e.stack)                // "@Scratchpad/2:2:3\n"
+}
+</pre>
+
+<h3 id="Створення_TypeError">Створення <code>TypeError</code></h3>
+
+<pre class="brush: js">try {
+  throw new TypeError('Привіт', "someFile.js", 10);
+} catch (e) {
+  console.log(e instanceof TypeError) // true
+  console.log(e.message)              // "Привіт"
+  console.log(e.name)                 // "TypeError"
+  console.log(e.fileName)             // "someFile.js"
+  console.log(e.lineNumber)           // 10
+  console.log(e.columnNumber)         // 0
+  console.log(e.stack)                // "@Scratchpad/2:2:9\n"
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-typeerror', 'TypeError')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.TypeError")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/typeerror/prototype/index.html b/files/uk/web/javascript/reference/global_objects/typeerror/prototype/index.html
new file mode 100644
index 0000000000..6e6cef6483
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/typeerror/prototype/index.html
@@ -0,0 +1,87 @@
+---
+title: TypeError.prototype
+slug: Web/JavaScript/Reference/Global_Objects/TypeError/prototype
+tags:
+  - Error
+  - JavaScript
+  - TypeError
+  - помилка
+translation_of: Web/JavaScript/Reference/Global_Objects/TypeError
+---
+<div>{{JSRef}}</div>
+
+<p>Властивість <code><strong>TypeError.prototype</strong></code> є прототипом для конструктора {{jsxref("TypeError")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Всі екземпляри {{jsxref("TypeError")}} успадковуються від <code>TypeError.prototype</code>. Ви можете використати прототип, щоб додати властивості чи методи до усіх екземплярів.</p>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt><code>TypeError.prototype.constructor</code></dt>
+ <dd>Визначає функцію, яка створила прототип об'єкта.</dd>
+ <dt>{{jsxref("Error.prototype.message", "TypeError.prototype.message")}}</dt>
+ <dd>Повідомлення помилки. Хоча ECMA-262 зазначає, що {{jsxref("TypeError")}} повинен мати власну властивість <code>message</code>, у <a href="https://developer.mozilla.org/uk/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, він успадковує {{jsxref("Error.prototype.message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "TypeError.prototype.name")}}</dt>
+ <dd>Ім'я помилки. Успадковано від {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "TypeError.prototype.fileName")}}</dt>
+ <dd>Шлях до файлу, що спричинив помилку. Успаковано від {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "TypeError.prototype.lineNumber")}}</dt>
+ <dd>Номер рядка файлу, в якому виникла помилка. Успаковано від {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "TypeError.prototype.columnNumber")}}</dt>
+ <dd>Номер стовпця у рядку, де виникла помилка. Успаковано від {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "TypeError.prototype.stack")}}</dt>
+ <dd>Трасування стеку. Успаковано від {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<p>Хоча прототип {{jsxref("TypeError")}} не містить власних методів, екземпляри {{jsxref("TypeError")}} успадковують деякі методи через ланцюжок прототипів.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Визначено як  <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Визначено як  <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.TypeError")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/undefined/index.html b/files/uk/web/javascript/reference/global_objects/undefined/index.html
new file mode 100644
index 0000000000..66028e114d
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/undefined/index.html
@@ -0,0 +1,140 @@
+---
+title: undefined
+slug: Web/JavaScript/Reference/Global_Objects/undefined
+tags:
+  - JavaScript
+  - Проста величина
+translation_of: Web/JavaScript/Reference/Global_Objects/undefined
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p><span class="seoSummary">Глобальна властивість <code><strong>undefined</strong></code> представляє просте значення <code>{{Glossary("Undefined", "undefined")}}</code>. Це один з {{Glossary("Primitive", "простих типів")}} JavaScript.</span></p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<p>{{EmbedInteractiveExample("pages/js/globalprops-undefined.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>undefined</code></pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p><code>undefined</code> is a property of the <em>global object</em>; i.e., it is a variable in global scope. The initial value of <code>undefined</code> is the primitive value <code>{{Glossary("Undefined", "undefined")}}</code>.</p>
+
+<p>In modern browsers (JavaScript 1.8.5 / Firefox 4+), <code>undefined</code> is a non-configurable, non-writable property per the ECMAScript 5 specification. Even when this is not the case, avoid overriding it.</p>
+
+<p>A variable that has not been assigned a value is of type undefined. A method or statement also returns <code>undefined</code> if the variable that is being evaluated does not have an assigned value. A function returns <code>undefined</code> if a value was not {{jsxref("Statements/return", "returned")}}.</p>
+
+<div class="warning">
+<p>While it is possible to use it as an {{Glossary("Identifier", "identifier")}} (variable name) in any scope other than the global scope (because <code>undefined</code> is not a {{jsxref("Reserved_Words", "reserved word")}}), doing so is a very bad idea that will make your code difficult to maintain and debug.</p>
+
+<pre class="brush: js">//DON'T DO THIS
+
+// logs "foo string"
+(function() { var undefined = 'foo'; console.log(undefined, typeof undefined); })();
+
+// logs "foo string"
+(function(undefined) { console.log(undefined, typeof undefined); })('foo');
+</pre>
+</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Сувора_рівність_та_undefined">Сувора рівність та <code>undefined</code></h3>
+
+<p>Виконавши строге порівняння змінної із значенням <code>undefined</code> можна перевірити, чи змінна має значення. У прикладі нижче змінна <code>x</code> не ініціалізована, тому умовний оператор<code>if</code> буде оцінено як істина (true)</p>
+
+<pre class="brush: js">var x;
+if (x === undefined) {
+   // код у цьому блоці буде виконано
+}
+else {
+   // код у цьому блоку не буде виконано
+}
+</pre>
+
+<div class="note">
+<p>Note: The strict equality operator rather than the standard equality operator must be used here, because <code>x == undefined</code> also checks whether <code>x</code> is <code>null</code>, while strict equality doesn't. <code>null</code> is not equivalent to <code>undefined</code>. See {{jsxref("Operators/Comparison_Operators", "comparison operators")}} for details.</p>
+</div>
+
+<h3 id="Typeof_operator_and_undefined"><code>Typeof</code> operator and <code>undefined</code></h3>
+
+<p>Alternatively, {{jsxref("Operators/typeof", "typeof")}} can be used:</p>
+
+<pre class="brush: js">var x;
+if (typeof x === 'undefined') {
+   // these statements execute
+}
+</pre>
+
+<p>One reason to use {{jsxref("Operators/typeof", "typeof")}} is that it does not throw an error if the variable has not been declared.</p>
+
+<pre class="brush: js">// x has not been declared before
+if (typeof x === 'undefined') { // evaluates to true without errors
+   // these statements execute
+}
+
+if (x === undefined) { // throws a ReferenceError
+
+}
+</pre>
+
+<p>However, this kind of technique should be avoided. JavaScript is a statically scoped language, so knowing if a variable is declared can be read by seeing whether it is declared in an enclosing context. The only exception is the global scope, but the global scope is bound to the global object, so checking the existence of a variable in the global context can be done by checking the existence of a property on the <em>global object</em> (using the {{jsxref("Operators/in", "in")}} operator, for instance).</p>
+
+<h3 id="Void_operator_and_undefined"><code>Void</code> operator and <code>undefined</code></h3>
+
+<p>The {{jsxref("Operators/void", "void")}} operator is a third alternative.</p>
+
+<pre class="brush: js">var x;
+if (x === void 0) {
+   // these statements execute
+}
+
+// y has not been declared before
+if (y === void 0) {
+   // throws a - Uncaught ReferenceError: y is not defined
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-4.3.9', 'undefined')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Первинне визначення. Реалізовано у JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.1.3', 'undefined')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-undefined', 'undefined')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-undefined', 'undefined')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.undefined")}}</p>
diff --git a/files/uk/web/javascript/reference/global_objects/uneval/index.html b/files/uk/web/javascript/reference/global_objects/uneval/index.html
new file mode 100644
index 0000000000..a5f930230b
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/uneval/index.html
@@ -0,0 +1,68 @@
+---
+title: uneval()
+slug: Web/JavaScript/Reference/Global_Objects/uneval
+tags:
+  - JavaScript
+  - Функція
+  - нестандартна
+translation_of: Web/JavaScript/Reference/Global_Objects/uneval
+---
+<p>{{JSSidebar("Objects")}}{{Non-standard_Header}}</p>
+
+<p>Функція <code><strong>uneval()</strong></code> створює рядкове представлення першокоду об'єкта.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">uneval(<var>object</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>Вираз чи інструкція JavaScript.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Рядок, у якому представлено першокод наданого об'єкта.</p>
+
+<div class="note"><strong>Заувага:</strong> Ви не зможете отримати коректне JSON-представлення вашого об'єкта.</div>
+
+<h2 id="Опис">Опис</h2>
+
+<p><code>uneval()</code> - глобальна функція, вона не пов'язана з жодним об'єктом.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush:js">var a = 1;
+uneval(a); // повертає рядок, що містить 1
+
+var b = '1';
+uneval(b); // повертає рядок, що містить "1"
+
+uneval(function foo() {}); // повертає "(function foo(){})"
+
+
+var a = uneval(function foo() { return 'привіт'; });
+var foo = eval(a);
+foo(); // повертає "привіт"
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Не є частиною жодних специфікацій.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.uneval")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{JSxRef("Global_Objects/eval", "eval()")}}</li>
+ <li>{{JSxRef("JSON.stringify()")}}</li>
+ <li>{{JSxRef("JSON.parse()")}}</li>
+ <li>{{JSxRef("Object.toSource()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/urierror/index.html b/files/uk/web/javascript/reference/global_objects/urierror/index.html
new file mode 100644
index 0000000000..bae1aaa8f5
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/urierror/index.html
@@ -0,0 +1,116 @@
+---
+title: URIError
+slug: Web/JavaScript/Reference/Global_Objects/URIError
+tags:
+  - Error
+  - JavaScript
+  - URIError
+  - помилка
+translation_of: Web/JavaScript/Reference/Global_Objects/URIError
+---
+<div>{{JSRef}}</div>
+
+<p>Об'єкт <code><strong>URIError</strong></code> позначає помилку, що виникає при хибному використанні глобальної функції, що працює з URI.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>new URIError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>message</code> {{optional_inline}}</dt>
+ <dd>Необов'язковий. Зрозумілий людині опис помилки.</dd>
+ <dt><code>fileName</code> {{optional_inline}} {{non-standard_inline}}</dt>
+ <dd>Необов'язковий. Ім'я файлу, код з якого спричинив виняток.</dd>
+ <dt><code>lineNumber</code> {{optional_inline}} {{non-standard_inline}}</dt>
+ <dd>Необов'язковий. Номер рядка в коді, що спричинив виняток.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p><code>URIError</code> викидається, коли глобальним функціям, що працюють з URI, передається неправильно сформований URI.</p>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt><code>URIError.prototype</code></dt>
+ <dd>Дозволяє додавати властивості до об'єктів <code>URIError</code>.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<p>Сам <code>URIError</code> не має власних методів, але успадковує деякі методи через ланцюжок прототипів.</p>
+
+<h2 id="Екземпляри_URIError">Екземпляри <code>URIError</code></h2>
+
+<h3 id="Властивості_2">Властивості</h3>
+
+<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/URIError/prototype', 'Властивості')}}</div>
+
+<h3 id="Методи_2">Методи</h3>
+
+<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/URIError/prototype', 'Методи')}}</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Перехоплення_URIError">Перехоплення <code>URIError</code></h3>
+
+<pre class="brush: js">try {
+  decodeURIComponent('%');
+} catch (e) {
+  console.log(e instanceof URIError) // true
+  console.log(e.message)             // "malformed URI sequence"
+  console.log(e.name)                // "URIError"
+  console.log(e.fileName)            // "Scratchpad/1"
+  console.log(e.lineNumber)          // 2
+  console.log(e.columnNumber)        // 2
+  console.log(e.stack)               // "@Scratchpad/2:2:3\n"
+}
+</pre>
+
+<h3 id="Створення_URIError">Створення <code>URIError</code></h3>
+
+<pre class="brush: js">try {
+  throw new URIError('Привіт', 'someFile.js', 10);
+} catch (e) {
+  console.log(e instanceof URIError) // true
+  console.log(e.message)             // "Привіт"
+  console.log(e.name)                // "URIError"
+  console.log(e.fileName)            // "someFile.js"
+  console.log(e.lineNumber)          // 10
+  console.log(e.columnNumber)        // 0
+  console.log(e.stack)               // "@Scratchpad/2:2:9\n"
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-urierror', 'URIError')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.URIError")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li>
+ <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li>
+ <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li>
+ <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/urierror/prototype/index.html b/files/uk/web/javascript/reference/global_objects/urierror/prototype/index.html
new file mode 100644
index 0000000000..4dd9c5113e
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/urierror/prototype/index.html
@@ -0,0 +1,88 @@
+---
+title: URIError.prototype
+slug: Web/JavaScript/Reference/Global_Objects/URIError/prototype
+tags:
+  - Error
+  - JavaScript
+  - URIError
+  - помилка
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/URIError
+---
+<div>{{JSRef}}</div>
+
+<p>Властивість <code><strong>URIError.prototype</strong></code> є прототипом для конструктора {{jsxref("URIError")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Всі екземпляри {{jsxref("URIError")}} успадковуються від <code>URIError.prototype</code>. Ви можете використати прототип, щоб додати властивості чи методи до усіх екземплярів.</p>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt><code>URIError.prototype.constructor</code></dt>
+ <dd>Визначає функцію, яка створила прототип об'єкта.</dd>
+ <dt>{{jsxref("Error.prototype.message", "URIError.prototype.message")}}</dt>
+ <dd>Повідомлення помилки. Хоча ECMA-262 зазначає, що {{jsxref("URIError")}} повинен мати власну властивість <code>message</code>, у <a href="https://developer.mozilla.org/uk/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, він успадковує {{jsxref("Error.prototype.message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "URIError.prototype.name")}}</dt>
+ <dd>Ім'я помилки. Успадковано від {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "URIError.prototype.fileName")}}</dt>
+ <dd>Шлях до файлу, що спричинив помилку. Успаковано від {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "URIError.prototype.lineNumber")}}</dt>
+ <dd>Номер рядка файлу, в якому виникла помилка. Успаковано від {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "URIError.prototype.columnNumber")}}</dt>
+ <dd>Номер стовпця у рядку, де виникла помилка. Успаковано від {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "URIError.prototype.stack")}}</dt>
+ <dd>Трасування стеку. Успаковано від {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<p>Хоча прототип {{jsxref("URIError")}} не містить власних методів, екземпляри {{jsxref("URIError")}} успадковують деякі методи через ланцюжок прототипів.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Визначено як  <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Визначено як  <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Визначено як  <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.URIError")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/число/epsilon/index.html b/files/uk/web/javascript/reference/global_objects/число/epsilon/index.html
new file mode 100644
index 0000000000..18655cd15d
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/число/epsilon/index.html
@@ -0,0 +1,67 @@
+---
+title: Number.EPSILON
+slug: Web/JavaScript/Reference/Global_Objects/Число/EPSILON
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Number
+  - Властивість
+  - Поле
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/EPSILON
+---
+<div>{{JSRef}}</div>
+
+<p>Властивість <strong><code>Number.EPSILON</code></strong> відображає різницю між 1 та найменшим числом із рухомою крапкою, що більше за 1.</p>
+
+<p>Для доступу до цієї статичної властивості не потрібно створювати об'єкт {{jsxref("Число","Number")}} (використовуйте <code>Number.EPSILON</code>).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-epsilon.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Властивість <code>EPSILON</code> має значення, близьке до <code>2.2204460492503130808472633361816E-16</code>, або ж <code>2<sup>-52</sup></code>.</p>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<pre class="brush: js notranslate">if (Number.EPSILON === undefined) {
+    Number.EPSILON = Math.pow(2, -52);
+}</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Перевірка_рівності">Перевірка рівності</h3>
+
+<pre class="brush: js notranslate">x = 0.2;
+y = 0.3;
+z = 0.1;
+equal = (Math.abs(x - y + z) &lt; Number.EPSILON);
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.epsilon', 'Number.EPSILON')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.EPSILON")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>Об'єкт {{jsxref("Число","Number")}}, якому належить ця властивість.</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/число/index.html b/files/uk/web/javascript/reference/global_objects/число/index.html
new file mode 100644
index 0000000000..44ee101d87
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/число/index.html
@@ -0,0 +1,186 @@
+---
+title: Number
+slug: Web/JavaScript/Reference/Global_Objects/Число
+tags:
+  - JavaScript
+  - Number
+  - Довідка
+  - Клас
+translation_of: Web/JavaScript/Reference/Global_Objects/Number
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Об'єкт <strong><code>Number</code></strong> у JavaScript — це <a href="/uk/docs/Glossary/Primitive#Об'єкти-обгортки_в_JavaScript">об'єкт-обгортка</a>, що дозволяє працювати з числовими значеннями, такими як <code>37</code> чи <code>-9.25</code>. </span></p>
+
+<p>Конструктор <code><strong>Number</strong></code> містить константи та методи для роботи з числами. Значення інших типів можуть бути перетворені на числа за допомогою <strong>функції <code>Number()</code></strong>.</p>
+
+<p>Тип <strong>Number</strong> у JavaScript є <a href="https://uk.wikipedia.org/wiki/%D0%A7%D0%B8%D1%81%D0%BB%D0%BE_%D0%B7_%D1%80%D1%83%D1%85%D0%BE%D0%BC%D0%BE%D1%8E_%D0%BA%D0%BE%D0%BC%D0%BE%D1%8E">64-бітним значенням подвійної точності формату IEEE 754</a>, як <code>double</code> у Java чи у C#. Це означає, що воно може відображати дробові значення, але існують певні обмеження на те, що воно може зберігати. Тип Number зберігає лише близько 17 десяткових знаків точності; числа підлягають <a href="https://en.wikipedia.org/wiki/Floating-point_arithmetic#Representable_numbers,_conversion_and_rounding">округленню</a>. Найбільше значення, яке може зберігати Number, дорівнює приблизно 1.8×10<sup>308</sup>. Числа за межами цього значення замінюються на спеціальну числову константу {{jsxref("Infinity")}}.</p>
+
+<p>Числові літерали, такі як <code>37</code>, у коді JavaScript є числами з рухомою крапкою, а не цілими числами. Не існує окремого цілочисельного типу у звичайному повсякденному використанні. (JavaScript нині має тип {{jsxref("BigInt")}}, але він був створений не того, щоб замінити Number у повсякденному використанні. <code>37</code> досі належить до типу Number, а не до BigInt.)</p>
+
+<p>Числа також можна виразити у таких літеральних формах, як <code>0b101</code>, <code>0o13</code>, <code>0x0A</code>. Дізнайтесь більше щодо <a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar#Числові_літерали">лексичної граматики чисел тут</a>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>При використанні в якості функції, <code>Number(value)</code> перетворює рядок чи інше значення на тип Number. Якщо значення не можна перетворити, повертається {{jsxref("NaN")}}.</p>
+
+<h3 id="Літеральний_синтаксис">Літеральний синтаксис</h3>
+
+<pre class="brush: js notranslate">123    // сто двадцять три
+123.0  // те саме
+123 === 123.0  // true</pre>
+
+<h3 id="Синтаксис_функції">Синтаксис функції</h3>
+
+<pre class="brush: js notranslate">Number('123')  // вертає число 123
+Number('123') === 123  // true
+
+Number("коник")    // NaN
+Number(undefined)  // NaN</pre>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число/Number"><code>Number()</code></a></dt>
+ <dd>Створює нове значення <code>Number</code>.</dd>
+</dl>
+
+<h2 id="Статичні_властивості">Статичні властивості</h2>
+
+<dl>
+ <dt>{{jsxref("Число.EPSILON", "Number.EPSILON")}}</dt>
+ <dd>Найменша можлива різниця між двома числами.</dd>
+ <dt>{{jsxref("Число.MAX_SAFE_INTEGER", "Number.MAX_SAFE_INTEGER")}}</dt>
+ <dd>Найбільше безпечне ціле число у JavaScript (<code>2<sup>53</sup> - 1</code>).</dd>
+ <dt>{{jsxref("Число.MAX_VALUE", "Number.MAX_VALUE")}}</dt>
+ <dd>Найбільше додатне число, доступне для відображення.</dd>
+ <dt>{{jsxref("Число.MIN_SAFE_INTEGER", "Number.MIN_SAFE_INTEGER")}}</dt>
+ <dd>Найменше безпечне ціле число у JavaScript (<code>-(2<sup>53</sup> - 1)</code>).</dd>
+ <dt>{{jsxref("Число.MIN_VALUE", "Number.MIN_VALUE")}}</dt>
+ <dd>Найменше додатне число, доступне для відображення, — найближче до нуля (за винятком самого нуля) додатне число.</dd>
+ <dt>{{jsxref("Число.NaN", "Number.NaN")}}</dt>
+ <dd>Спеціальне значення "{{glossary("NaN", "не число")}}".</dd>
+ <dt>{{jsxref("Число.NEGATIVE_INFINITY", "Number.NEGATIVE_INFINITY")}}</dt>
+ <dd>Спеціальне значення, що відображає від'ємну нескінченність. Повертається при переповненні.</dd>
+ <dt>{{jsxref("Число.POSITIVE_INFINITY", "Number.POSITIVE_INFINITY")}}</dt>
+ <dd>Спеціальне значення, що відображає нескінченність. Повертається при переповненні.</dd>
+ <dt>{{jsxref("Число.prototype", "Number.prototype")}}</dt>
+ <dd>Дозволяє додавати властивості до об'єкта <code>Number</code>.</dd>
+</dl>
+
+<h2 id="Статичні_методи">Статичні методи</h2>
+
+<dl>
+ <dt>{{jsxref("Число.isNaN()", "Number.isNaN()")}}</dt>
+ <dd>Визначає, чи є передане значення <code>NaN</code>.</dd>
+ <dt>{{jsxref("Число.isFinite()", "Number.isFinite()")}}</dt>
+ <dd>Визначає, чи є передане значення скінченним числом.</dd>
+ <dt>{{jsxref("Число.isInteger()", "Number.isInteger()")}}</dt>
+ <dd>Визначає, чи є передане значення цілим числом.</dd>
+ <dt>{{jsxref("Число.isSafeInteger()", "Number.isSafeInteger()")}}</dt>
+ <dd>Визначає, чи є передане значення безпечним цілим числом (число між <code>-(2<sup>53</sup> - 1)</code> та <code>2<sup>53</sup> - 1</code>).</dd>
+ <dt>{{jsxref("Число.parseFloat()", "Number.parseFloat()")}}</dt>
+ <dd>Те саме, що й глобальна функція {{jsxref("parseFloat", "parseFloat()")}}.</dd>
+ <dt>{{jsxref("Число.parseInt()", "Number.parseInt()")}}</dt>
+ <dd>Те саме, що й глобальна функція {{jsxref("parseInt", "parseInt()")}}.</dd>
+</dl>
+
+<h2 id="Методи_екземплярів">Методи екземплярів</h2>
+
+<dl>
+ <dt>{{jsxref("Число.prototype.toExponential()", "Number.prototype.toExponential(<var>дробовіЦифри</var>)")}}</dt>
+ <dd>Повертає рядок, що містить експоненціальний запис числа.</dd>
+ <dt>{{jsxref("Число.prototype.toFixed()", "Number.prototype.toFixed(<var>цифри</var>)")}}</dt>
+ <dd>Повертає рядок, що містить запис числа у форматі з нерухомою крапкою.</dd>
+ <dt>{{jsxref("Число.prototype.toLocaleString()", "Number.prototype.toLocaleString([<var>мови</var> [, <var>параметри</var>]])")}}</dt>
+ <dd>Повертає рядок, що містить узалежнений від мови запис числа. Заміщує метод {{jsxref("Object.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("Число.prototype.toPrecision()", "Number.prototype.toPrecision(<var>точність</var>)")}}</dt>
+ <dd>Повертає рядок, що містить запис числа із зазначеною точністю у форматі з нерухомою крапкою або у експоненціальному форматі.</dd>
+ <dt>{{jsxref("Число.prototype.toString()", "Number.prototype.toString([<var>основа</var>])")}}</dt>
+ <dd>Повертає рядкове представлення наданого об'єкта у вказаній системі числення. Заміщує метод {{jsxref("Object.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("Число.prototype.valueOf()", "Number.prototype.valueOf()")}}</dt>
+ <dd>Повертає просте числове значення об'єкта. Заміщує метод {{jsxref("Object.prototype.valueOf()")}}.</dd>
+</dl>
+
+<div></div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_обєкта_Number_для_присвоєння_змінним_числових_значень">Використання об'єкта <code>Number</code> для присвоєння змінним числових значень</h3>
+
+<p>Наведений приклад використовує властивості об'єкта <code>Number</code>, щоб присвоїти кільком змінним числові значення:</p>
+
+<pre class="brush: js notranslate">const biggestNum     = Number.MAX_VALUE
+const smallestNum    = Number.MIN_VALUE
+const infiniteNum    = Number.POSITIVE_INFINITY
+const negInfiniteNum = Number.NEGATIVE_INFINITY
+const notANum        = Number.NaN
+</pre>
+
+<h3 id="Діапазон_цілих_чисел_для_Number">Діапазон цілих чисел для <code>Number</code></h3>
+
+<p>У наступному прикладі наведено мінімальне та максимальне цілочисельне значення, які можуть бути відображені об'єктом <code>Number</code> (за детальною інформацією звертайтесь до стандарту ECMAScript, розділ <em><a href="https://tc39.github.io/ecma262/#sec-ecmascript-language-types-number-type">6.1.6 Тип Number</a></em>):</p>
+
+<pre class="brush: js notranslate">const biggestInt = Number.MAX_SAFE_INTEGER   //  (2<sup>53</sup> - 1) =&gt;  9007199254740991
+const smallestInt = Number.MIN_SAFE_INTEGER  // -(2<sup>53</sup> - 1) =&gt; -9007199254740991</pre>
+
+<p>При розборі даних, поданих у форматі JSON, цілі числа, що виходять за межі цього діапазону, можуть виявитися пошкодженими, коли аналізатор JSON примусово перетворює їх у тип <code>Number</code>.</p>
+
+<p>Цьому можна запобігти використанням ({{jsxref("String","рядків")}}).</p>
+
+<p>Більші числа можуть бути відображені за допомогою типу {{jsxref("BigInt")}}.</p>
+
+<h3 id="Використання_Number_для_перетворення_обєкта_Date">Використання <code>Number</code> для перетворення об'єкта <code>Date</code></h3>
+
+<p>У наведеному прикладі об'єкт класу {{jsxref ("Date")}} перетворюється на числове значення за допомогою функції <code>Number</code>:</p>
+
+<pre class="brush: js notranslate">let d = new Date('December 17, 1995 03:24:00')
+console.log(Number(d))
+</pre>
+
+<p>Це виведе <code>819199440000</code>.</p>
+
+<h3 id="Перетворення_числових_рядків_та_null_на_числа">Перетворення числових рядків та null на числа</h3>
+
+<pre class="brush: js notranslate">Number('123')     // 123
+Number('123') === 123 /// true
+Number('12.3')    // 12.3
+Number('12.00')   // 12
+Number('123e-1')  // 12.3
+Number('')        // 0
+Number(null)      // 0
+Number('0x11')    // 17
+Number('0b11')    // 3
+Number('0o11')    // 9
+Number('foo')     // NaN
+Number('100a')    // NaN
+Number('-Infinity') //-Infinity
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number-objects', 'Number')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Number.Number")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("NaN")}}</li>
+ <li>{{jsxref("Operators/Arithmetic_Operators", "Арифметичні оператори")}}</li>
+ <li>Глобальний об'єкт {{jsxref("Math")}}</li>
+ <li>Цілі числа з довільною точністю: {{jsxref("BigInt")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/число/isfinite/index.html b/files/uk/web/javascript/reference/global_objects/число/isfinite/index.html
new file mode 100644
index 0000000000..8379f3d5c3
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/число/isfinite/index.html
@@ -0,0 +1,86 @@
+---
+title: Number.isFinite()
+slug: Web/JavaScript/Reference/Global_Objects/Число/isFinite
+tags:
+  - JavaScript
+  - Number
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isFinite
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>Number.isFinite()</code></strong> визначає, чи є передане значення скінченним числом.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-isfinite.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">Number.isFinite(v<var>alue</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Значення, яке треба перевірити на скінченність.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Значення {{jsxref("Boolean")}}, що вказує, чи є надане значення скінченним числом.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>У порівнянні з глобальною функцією {{jsxref("isFinite", "isFinite()")}}, цей метод не перетворює примусово значення параметра на число. Це означає, що тільки значення числового типу, які є скінченними, повернуть <code>true</code>.</p>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<pre class="brush: js notranslate">if (Number.isFinite === undefined) Number.isFinite = function(value) {
+    return typeof value === 'number' &amp;&amp; isFinite(value);
+}
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_isFinite">Використання isFinite</h3>
+
+<pre class="brush: js notranslate">Number.isFinite(Infinity);  // false
+Number.isFinite(NaN);       // false
+Number.isFinite(-Infinity); // false
+
+Number.isFinite(0);         // true
+Number.isFinite(2e64);      // true
+
+Number.isFinite('0');       // false, дорівнювало б true з
+                            // глобальною функцією isFinite('0')
+Number.isFinite(null);      // false, дорівнювало б true з
+                            // глобальною функцією isFinite(null)
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.isfinite', 'Number.isInteger')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.isFinite")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>Об'єкт {{jsxref("Число", "Number")}}, до якого належить метод.</li>
+ <li>Глобальна функція {{jsxref("isFinite")}}.</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/число/isinteger/index.html b/files/uk/web/javascript/reference/global_objects/число/isinteger/index.html
new file mode 100644
index 0000000000..3cd4988a2b
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/число/isinteger/index.html
@@ -0,0 +1,94 @@
+---
+title: Number.isInteger()
+slug: Web/JavaScript/Reference/Global_Objects/Число/isInteger
+tags:
+  - JavaScript
+  - Number
+  - Довідка
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isInteger
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>Number.isInteger()</code></strong> визначає, чи є передане значення цілим числом.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-isinteger.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">Number.isInteger(v<var>alue</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Значення для перевірки.</dd>
+</dl>
+
+<h3 id="Повертає">Повертає</h3>
+
+<p>Значення типу {{jsxref("Boolean")}}, що вказує, чи є надане значення цілим числом.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо параметр є цілим числом, повертає <code>true</code>, інакше вертає <code>false</code>. Якщо значення дорівнює {{jsxref("NaN")}} або {{jsxref("Infinity")}}, повертає <code>false</code>. Цей метод також повертає <code>true</code> для чисел з плаваючою крапкою, які можуть бути представлені як цілі.</p>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<pre class="brush: js notranslate">Number.isInteger = Number.isInteger || function(value) {
+  return typeof value === 'number' &amp;&amp;
+    isFinite(value) &amp;&amp;
+    Math.floor(value) === value;
+};</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_isInteger">Використання isInteger</h3>
+
+<pre class="brush: js notranslate">Number.isInteger(0);         // true
+Number.isInteger(1);         // true
+Number.isInteger(-100000);   // true
+Number.isInteger(99999999999999999999999); // true
+
+Number.isInteger(0.1);       // false
+Number.isInteger(Math.PI);   // false
+
+Number.isInteger(NaN);       // false
+Number.isInteger(Infinity);  // false
+Number.isInteger(-Infinity); // false
+Number.isInteger('10');      // false
+Number.isInteger(true);      // false
+Number.isInteger(false);     // false
+Number.isInteger([1]);       // false
+
+Number.isInteger(5.0);       // true
+Number.isInteger(5.000000000000001); // false
+Number.isInteger(5.0000000000000001); // true
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.isinteger', 'Number.isInteger')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.isInteger")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>Об'єкт {{jsxref("Число", "Number")}}, до якого належить цей метод.</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/число/isnan/index.html b/files/uk/web/javascript/reference/global_objects/число/isnan/index.html
new file mode 100644
index 0000000000..c9c38ad05d
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/число/isnan/index.html
@@ -0,0 +1,100 @@
+---
+title: Number.isNaN()
+slug: Web/JavaScript/Reference/Global_Objects/Число/isNaN
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Number
+  - isNaN
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isNaN
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>Number.isNaN()</code></strong> визначає, чи є передане значення {{jsxref("NaN")}}, а його типом - {{jsxref("Число", "Number")}}. Це більш надійна версія оригіналу, глобального методу {{jsxref("isNaN", "isNaN()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-isnan.html", "taller")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code>Number.isNaN(<var>value</var>)</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>value</var></code></dt>
+ <dd>Значення, що перевірятиметься на {{jsxref("NaN")}}.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p><strong>true</strong>, якщо надане значення є {{jsxref("NaN")}}, а його типом - {{jsxref("Число", "Number")}}; інакше, <strong>false</strong>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Через те, що обидва оператори рівності, {{jsxref("Operators/Equality", "==")}} та {{jsxref("Operators/Strict_equality", "===")}}, повертають <code>false</code> при перевірці, чи {{jsxref("NaN")}} <em>дорівнює</em> {{jsxref("NaN")}}, виникла необхідність у функції <code>Number.isNaN()</code>. Ця ситуація відрізняється від усіх інших можливих порівнянь у JavaScript.</p>
+
+<p>У порівнянні з глобальною функцією {{jsxref("isNaN", "isNaN()")}}, <code>Number.isNaN()</code> не має проблеми з примусовим приведенням параметра до числа. Це означає, що тепер стало безпечно передавати значення, які були б перетворені на {{jsxref("NaN")}}, але, насправді, не є значеннями {{jsxref("NaN")}}. Це також означає, що лише значення числового типу, які також є {{jsxref("NaN")}}, вертають <code>true</code>.</p>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Наступний код працює, тому що NaN є єдиним значенням у JavaScript, яке не дорівнює самому собі.</p>
+
+<pre class="brush: js notranslate">Number.isNaN = Number.isNaN || function isNaN(input) {
+    return typeof input === 'number' &amp;&amp; input !== input;
+}
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_isNaN">Використання isNaN</h3>
+
+<pre class="brush: js notranslate">Number.isNaN(NaN);        // true
+Number.isNaN(Number.NaN); // true
+Number.isNaN(0 / 0);      // true
+
+// наприклад, це дорівнювало б true у глобальному методі isNaN()
+Number.isNaN('NaN');      // false
+Number.isNaN(undefined);  // false
+Number.isNaN({});         // false
+Number.isNaN('ляля');     // false
+
+// Це все вертає false
+Number.isNaN(true);
+Number.isNaN(null);
+Number.isNaN(37);
+Number.isNaN('37');
+Number.isNaN('37.37');
+Number.isNaN('');
+Number.isNaN(' ');
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.isnan', 'Number.isnan')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<div>{{Compat("javascript.builtins.Number.isNaN")}}</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Число", "Number")}}</li>
+ <li>{{jsxref("isNaN", "isNaN()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/число/issafeinteger/index.html b/files/uk/web/javascript/reference/global_objects/число/issafeinteger/index.html
new file mode 100644
index 0000000000..8ff3f1fa81
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/число/issafeinteger/index.html
@@ -0,0 +1,95 @@
+---
+title: Number.isSafeInteger()
+slug: Web/JavaScript/Reference/Global_Objects/Число/isSafeInteger
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Number
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>Number.isSafeInteger()</code></strong> визначає, чи є надане значення безпечним цілим числом.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-issafeinteger.html")}}</div>
+
+
+
+<p>Безпечним цілим числом вважається ціле число, яке</p>
+
+<ul>
+ <li>може бути точно відображене як число IEEE-754 подвійної точності, і</li>
+ <li>чиє відображення IEEE-754 не може бути результатом округлення іншого цілого числа для відповідності відображенню IEEE-754.</li>
+</ul>
+
+<p>Наприклад, <code>2<sup>53</sup> - 1</code> є безпечним цілим числом: воно може бути точно відображене, і жодне інше ціле число не округлюється до нього в будь-якому режимі округлення IEEE-754. Для контрасту, <code>2<sup>53</sup></code> <em>не є</em> безпечним цілим числом: воно може бути точно відображене у IEEE-754, але ціле число <code>2<sup>53</sup> + 1</code> не може бути безпосередньо відображене у IEEE-754, а, натомість, округлюється до <code>2<sup>53</sup></code> під час округлення до найближчого цілого та округлення до меншого за модулем. Безпечні цілі числа включають усі цілі числа від <code>-(2<sup>53</sup> - 1)</code> включно до <code>2<sup>53</sup> - 1</code> включно (± <code>9007199254740991</code> або ± 9,007,199,254,740,991).  </p>
+
+<p>Робота зі значеннями, більшими чи меншими за ~9 квадрільйонів, з повною точністю вимагає використання <a href="https://uk.wikipedia.org/wiki/%D0%94%D0%BE%D0%B2%D0%B3%D0%B0_%D0%B0%D1%80%D0%B8%D1%84%D0%BC%D0%B5%D1%82%D0%B8%D0%BA%D0%B0">бібліотеки для арифметики довільної точності</a>. Дивіться <a href="http://floating-point-gui.de/">Що необхідно знати кожному програмісту про арифметику чисел з рухомою крапкою</a>, щоб дізнатись більше щодо відображення чисел з рухомою крапкою.</p>
+
+<p>Для більших чисел розгляньте використання типу {{jsxref("BigInt")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code>Number.isSafeInteger(<var>testValue</var>)</code>
+</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>testValue</code></dt>
+ <dd>Значення, що перевірятиметься на відповідність безпечному цілому числу.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Значення {{jsxref("Boolean")}}, яке вказує, чи є надане значення безпечним цілим числом.</p>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<pre class="brush: js notranslate">Number.isSafeInteger = Number.isSafeInteger || function (value) {
+   return Number.isInteger(value) &amp;&amp; Math.abs(value) &lt;= Number.MAX_SAFE_INTEGER;
+};
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_isSafeInteger">Використання isSafeInteger</h3>
+
+<pre class="brush: js notranslate">Number.isSafeInteger(3);                    // true
+Number.isSafeInteger(Math.pow(2, 53));      // false
+Number.isSafeInteger(Math.pow(2, 53) - 1);  // true
+Number.isSafeInteger(NaN);                  // false
+Number.isSafeInteger(Infinity);             // false
+Number.isSafeInteger('3');                  // false
+Number.isSafeInteger(3.1);                  // false
+Number.isSafeInteger(3.0);                  // true
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.issafeinteger', 'Number.isSafeInteger')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.isSafeInteger")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>Об'єкт {{jsxref("Число", "Number")}}, якому належить цей метод.</li>
+ <li>{{jsxref("Number.MIN_SAFE_INTEGER")}}</li>
+ <li>{{jsxref("Number.MAX_SAFE_INTEGER")}}</li>
+ <li>{{jsxref("BigInt")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/число/max_safe_integer/index.html b/files/uk/web/javascript/reference/global_objects/число/max_safe_integer/index.html
new file mode 100644
index 0000000000..c104719e79
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/число/max_safe_integer/index.html
@@ -0,0 +1,78 @@
+---
+title: Number.MAX_SAFE_INTEGER
+slug: Web/JavaScript/Reference/Global_Objects/Число/MAX_SAFE_INTEGER
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Number
+  - Властивість
+  - Поле
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER
+---
+<div>{{JSRef}}</div>
+
+<p>Стала <strong><code>Number.MAX_SAFE_INTEGER</code></strong> відображає найбільше безпечне ціле числове значення у JavaScript (<code>2<sup>53</sup> - 1</code>).</p>
+
+<p>Для більших цілих значень використовуйте {{jsxref("BigInt")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-maxsafeinteger.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Стала <code>MAX_SAFE_INTEGER</code> має значення <code>9007199254740991</code> (9,007,199,254,740,991 або ~9 квадриліонів). Причина в тому, що JavaScript використовує <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">формат чисел з рухомою крапкою подвійної точності</a>, як зазначено у <a href="https://uk.wikipedia.org/wiki/IEEE_754">IEEE 754</a>, та може безпечно відображати числа лише в діапазоні між <code>-(2<sup>53</sup> - 1)</code> та <code>2<sup>53</sup> - 1</code>.</p>
+
+<p>"Безпечний" в даному контексті означає можливість точно відображати та коректно порівнювати цілі числа. Наприклад,  <code>Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2</code> поверне true, що, з математичної точки зору, неправильно. Дивіться більше на сторінці {{jsxref("Number.isSafeInteger()")}}.</p>
+
+<p>Це поле не існує у старих переглядачах. Його використання без перевірки його наявності, як ось <code>Math.max(Number.MAX_SAFE_INTEGER, 2)</code>, видасть небажаний результат, такий як NaN.</p>
+
+<p>У зв'язку з тим, що <code>MAX_SAFE_INTEGER</code> є статичною властивістю {{jsxref("Число","Number")}}, слід завжди викликати її як <code>Number.MAX_SAFE_INTEGER</code>, аніж як метод створеного вами об'єкта {{jsxref("Число","Number")}}.</p>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<pre class="brush: js notranslate">if (!Number.MAX_SAFE_INTEGER) {
+    Number.MAX_SAFE_INTEGER = 9007199254740991; // Math.pow(2, 53) - 1;
+}</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Значення_яке_вертає_MAX_SAFE_INTEGER">Значення, яке вертає MAX_SAFE_INTEGER</h3>
+
+<pre class="brush: js notranslate">Number.MAX_SAFE_INTEGER // 9007199254740991
+</pre>
+
+<h3 id="Числа_більші_за_безпечне_ціле_значення">Числа, більші за безпечне ціле значення</h3>
+
+<p>Цей код поверне 2, тому що у числах з плаваючою крапкою значенням є кінцева десяткова "1", за винятком випадків денормалізованих чисел, таких як нуль.</p>
+
+<pre class="brush: js notranslate">Number.MAX_SAFE_INTEGER * Number.EPSILON; // 2</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.max_safe_integer', 'Number.MAX_SAFE_INTEGER')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.MAX_SAFE_INTEGER")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Число.MIN_SAFE_INTEGER", "Number.MIN_SAFE_INTEGER")}}</li>
+ <li>{{jsxref("Число.isSafeInteger()", "Number.isSafeInteger()")}}</li>
+ <li>{{jsxref("BigInt")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/число/max_value/index.html b/files/uk/web/javascript/reference/global_objects/число/max_value/index.html
new file mode 100644
index 0000000000..3280fa0cd8
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/число/max_value/index.html
@@ -0,0 +1,64 @@
+---
+title: Number.MAX_VALUE
+slug: Web/JavaScript/Reference/Global_Objects/Число/MAX_VALUE
+tags:
+  - JavaScript
+  - Number
+  - Властивість
+  - Довідка
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE
+---
+<div>{{JSRef}}</div>
+
+<p>Властивість <strong><code>Number.MAX_VALUE</code></strong> відображає максимальне числове значення, доступне для відображення у JavaScript.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-maxvalue.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Значення властивості <code>MAX_VALUE</code> приблизно дорівнює <code>1.79E+308</code>, або 2<sup>1024</sup>. Значення більші за <code>MAX_VALUE</code>, відображаються як {{jsxref("Infinity")}}.</p>
+
+<p>Оскільки <code>MAX_VALUE</code> є статичною властивістю {{jsxref("Число", "Number")}}, її завжди слід використовувати як <code>Number.MAX_VALUE</code>, а не як властивість створеного вами об'єкта {{jsxref("Число", "Number")}}. </p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_MAX_VALUE">Використання <code>MAX_VALUE</code></h3>
+
+<p>Наступний код перемножує два числових значення. Якщо результат менший чи дорівнює <code>MAX_VALUE</code>, викликається функція <code>func1</code>; інакше, викликається функція <code>func2</code>.</p>
+
+<pre class="brush: js notranslate">if (num1 * num2 &lt;= Number.MAX_VALUE) {
+  func1();
+} else {
+  func2();
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.max_value', 'Number.MAX_VALUE')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Number.MAX_VALUE")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Number.MIN_VALUE")}}</li>
+ <li>Об'єкт {{jsxref("Число", "Number")}}, до якого належить ця властивість</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/число/min_safe_integer/index.html b/files/uk/web/javascript/reference/global_objects/число/min_safe_integer/index.html
new file mode 100644
index 0000000000..a8e0553753
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/число/min_safe_integer/index.html
@@ -0,0 +1,62 @@
+---
+title: Number.MIN_SAFE_INTEGER
+slug: Web/JavaScript/Reference/Global_Objects/Число/MIN_SAFE_INTEGER
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Number
+  - Властивість
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER
+---
+<div>{{JSRef}}</div>
+
+<p>Константа <strong><code>Number.MIN_SAFE_INTEGER</code></strong> відображає мінімальне безпечне ціле числове значення у JavaScript (<code>-(2<sup>53</sup> - 1)</code>).</p>
+
+<p>Для відображення менших чисел, використовуйте {{jsxref("BigInt")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-min-safe-integer.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Константа <code>MIN_SAFE_INTEGER</code> має значення <code>-9007199254740991</code> (-9,007,199,254,740,991 або близько -9 квадрильйонів). Причина в тому, що JavaScript використовує <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">формат чисел з рухомою крапкою подвійної точності</a>, як зазначено у <a href="https://uk.wikipedia.org/wiki/IEEE_754">IEEE 754</a>, та може безпечно відображати числа лише в діапазоні між <code>-(2<sup>53</sup> - 1)</code> та <code>2<sup>53</sup> - 1</code>.  Дивіться більше інформації у {{jsxref("Number.isSafeInteger()")}}.</p>
+
+<p>Оскільки <code>MIN_SAFE_INTEGER</code> є статичною властивістю {{jsxref("Число", "Number")}}, її завжди слід використовувати як <code>Number.MIN_SAFE_INTEGER</code>, а не як властивість створеного вами об'єкта {{jsxref("Число", "Number")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_MIN_SAFE_INTEGER">Використання MIN_SAFE_INTEGER</h3>
+
+<pre class="brush: js notranslate">Number.MIN_SAFE_INTEGER // -9007199254740991
+-(Math.pow(2, 53) - 1)  // -9007199254740991
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.min_safe_integer', 'Number.MIN_SAFE_INTEGER')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.MIN_SAFE_INTEGER")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Число.MAX_SAFE_INTEGER", "Number.MAX_SAFE_INTEGER")}}</li>
+ <li>{{jsxref("Число.isSafeInteger()", "Number.isSafeInteger()")}}</li>
+ <li>{{jsxref("BigInt")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/число/min_value/index.html b/files/uk/web/javascript/reference/global_objects/число/min_value/index.html
new file mode 100644
index 0000000000..83ded3444a
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/число/min_value/index.html
@@ -0,0 +1,66 @@
+---
+title: Number.MIN_VALUE
+slug: Web/JavaScript/Reference/Global_Objects/Число/MIN_VALUE
+tags:
+  - JavaScript
+  - Number
+  - Властивість
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE
+---
+<div>{{JSRef}}</div>
+
+<p>Властивість <strong><code>Number.MIN_VALUE</code></strong> відображає найменше числове значення, доступне для відображення у JavaScript.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-min-value.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Властивість <code>MIN_VALUE</code> - це число, максимально близьке до 0, а не найменше від'ємне значення, яке може відобразити JavaScript.</p>
+
+<p><code>MIN_VALUE</code> має значення, що приблизно дорівнює <code>5e-324</code>. Значення, менші за <code>MIN_VALUE</code> приводяться до 0 ("зникнення порядку").</p>
+
+<p>Оскільки <code>MIN_VALUE</code> є статичною властивістю {{jsxref("Число", "Number")}}, її завжди слід використовувати як <code>Number.MIN_VALUE</code>, а не як властивість створеного вами об'єкта {{jsxref("Число", "Number")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_MIN_VALUE">Використання <code>MIN_VALUE</code></h3>
+
+<p>Наступний код ділить одне числове значення на інше. Якщо результат більший чи дорівнює <code>MIN_VALUE</code>, викликається функція <code>func1</code>; інакше, викликається функція <code>func2</code>.</p>
+
+<pre class="brush: js notranslate">if (num1 / num2 &gt;= Number.MIN_VALUE) {
+  func1();
+} else {
+  func2();
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.min_value', 'Number.MIN_VALUE')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Number.MIN_VALUE")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Number.MAX_VALUE")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/число/nan/index.html b/files/uk/web/javascript/reference/global_objects/число/nan/index.html
new file mode 100644
index 0000000000..10ad96c00a
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/число/nan/index.html
@@ -0,0 +1,59 @@
+---
+title: Number.NaN
+slug: Web/JavaScript/Reference/Global_Objects/Число/NaN
+tags:
+  - JavaScript
+  - Number
+  - Властивість
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/NaN
+---
+<div>{{JSRef}}</div>
+
+<p>Властивість <strong><code>Number.NaN</code></strong> відображає "не число" (Not-A-Number). Є еквівалентом {{jsxref("NaN")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-nan.html")}}</div>
+
+<p>Вам не потрібно створювати об'єкт {{jsxref("Число", "Number")}}, щоб звертатись до статичної властивості (використовуйте <code>Number.NaN</code>).</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Перевірка_на_числове_значення">Перевірка на числове значення</h3>
+
+<pre class="brush: js notranslate">function sanitise(x) {
+  if (isNaN(x)) {
+    return Number.NaN;
+  }
+  return x;
+}</pre>
+
+<h3 id="Перевірка_на_NaN">Перевірка на NaN</h3>
+
+<p>Дивіться <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/NaN#Первірка_на_NaN">Перевірку на NaN</a> на сторінці <code>NaN</code>.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.nan', 'Number.NaN')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.NaN")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>Глобальна властивість {{jsxref("NaN")}}.</li>
+ <li>Об'єкт {{jsxref("Число", "Number")}}, якому належить властивість.</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/число/negative_infinity/index.html b/files/uk/web/javascript/reference/global_objects/число/negative_infinity/index.html
new file mode 100644
index 0000000000..aeab7dfa10
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/число/negative_infinity/index.html
@@ -0,0 +1,82 @@
+---
+title: Number.NEGATIVE_INFINITY
+slug: Web/JavaScript/Reference/Global_Objects/Число/NEGATIVE_INFINITY
+tags:
+  - JavaScript
+  - Number
+  - Властивість
+  - Довідка
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY
+---
+<div>{{JSRef}}</div>
+
+<p>Властивість <strong><code>Number.NEGATIVE_INFINITY</code></strong> відображає значення від'ємної нескінченності.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-negative-infinity.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Значення <code>Number.NEGATIVE_INFINITY</code> є таким самим, як від'ємне значення властивості {{jsxref("Infinity")}} глобального об'єкта.</p>
+
+<p>Це значення поводиться дещо інакше, ніж математична нескінченність:</p>
+
+<ul>
+ <li>Будь-яке позитивне значення, в тому числі {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}} (позитивна нескінченність), помножене на <code>NEGATIVE_INFINITY</code> (від'ємну нескінченність) дорівнює <code>NEGATIVE_INFINITY</code>.</li>
+ <li>Будь-яке від'ємне значення, в тому числі <code>NEGATIVE_INFINITY</code>, помножене на <code>NEGATIVE_INFINITY</code>, дорівнює {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}.</li>
+ <li>Будь-яке позитивне значення, розділене на <code>NEGATIVE_INFINITY</code>, дорівнює від'ємному нулю.</li>
+ <li>Будь-яке від'ємне значення, розділене на <code>NEGATIVE_INFINITY</code>, дорівнює позитивному нулю.</li>
+ <li>Нуль, помножений на <code>NEGATIVE_INFINITY</code>, дорівнює {{jsxref("NaN")}}.</li>
+ <li>Значення {{jsxref("NaN")}}, помножене на <code>NEGATIVE_INFINITY</code>, дорівнює {{jsxref("NaN")}}.</li>
+ <li>Значення <code>NEGATIVE_INFINITY</code>, розділене на будь-яке від'ємне значення, за винятком <code>NEGATIVE_INFINITY</code>, дорівнює  {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}.</li>
+ <li>Значення <code>NEGATIVE_INFINITY</code>, розділене на будь-яке позитивне значення, за винятком {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}, дорівнює <code>NEGATIVE_INFINITY</code>.</li>
+ <li>Значення <code>NEGATIVE_INFINITY</code>, розділене на <code>NEGATIVE_INFINITY</code> чи {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}, дорівнює {{jsxref("NaN")}}.</li>
+</ul>
+
+<p>Ви можете скористатись властивістю <code>Number.NEGATIVE_INFINITY</code>, щоб позначити помилку в умові, яка повертає скінченне число у випадку успіху. Зауважте, однак, що метод {{jsxref("isFinite")}} в цьому випадку був би більш доречним.</p>
+
+<p>Оскільки <code>NEGATIVE_INFINITY</code> є статичною властивістю {{jsxref("Число", "Number")}}, її завжди слід використовувати як <code>Number.NEGATIVE_INFINITY</code>, а не як властивість створеного вами об'єкта {{jsxref("Число", "Number")}}. </p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_NEGATIVE_INFINITY">Використання <code>NEGATIVE_INFINITY</code></h3>
+
+<p>У наступному прикладі змінній <code>smallNumber</code> присвоюється значення, яке є меншим за мінімальне. Коли виконується інструкція {{jsxref("Statements/if...else", "if")}}, <code>smallNumber</code> має значення <code>-Infinity</code>, отже <code>smallNumber</code> присвоюється більш кероване значення для продовження.</p>
+
+<pre class="brush: js notranslate">var smallNumber = (-Number.MAX_VALUE) * 2;
+
+if (smallNumber === Number.NEGATIVE_INFINITY) {
+  smallNumber = returnFinite();
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.negative_infinity', 'Number.NEGATIVE_INFINITY')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.NEGATIVE_INFINITY")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.isFinite()")}}</li>
+ <li>{{jsxref("Global_Objects/Infinity", "Infinity")}}</li>
+ <li>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/число/number/index.html b/files/uk/web/javascript/reference/global_objects/число/number/index.html
new file mode 100644
index 0000000000..c1dd069e56
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/число/number/index.html
@@ -0,0 +1,63 @@
+---
+title: Number() constructor
+slug: Web/JavaScript/Reference/Global_Objects/Число/Number
+tags:
+  - JavaScript
+  - Number
+  - Довідка
+  - Конструктор
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/Number
+---
+<div>{{JSRef}}</div>
+
+<p>Конструктор <strong><code>Number()</code> </strong>створює об'єкт {{jsxref("Число", "Number")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js notranslate">new Number(<var>value</var>)
+</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>value</var></code></dt>
+ <dd>Числове значення об'єкта, що створюється.</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Створення_обєктів_Number">Створення об'єктів Number</h3>
+
+<pre class="brush: js notranslate">const a = new Number('123'); // a === 123 дорівнює false
+const b = Number('123');     // b === 123 дорівнює true
+a instanceof Number;         // дорівнює true
+b instanceof Number;         // дорівнює false</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number-constructor', 'Number constructor')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Number.Number")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("NaN")}}</li>
+ <li>Глобальний об'єкт {{jsxref("Math")}}</li>
+ <li>Цілі числа з довільною точністю: {{jsxref("BigInt")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/число/parsefloat/index.html b/files/uk/web/javascript/reference/global_objects/число/parsefloat/index.html
new file mode 100644
index 0000000000..81d55dcfc1
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/число/parsefloat/index.html
@@ -0,0 +1,88 @@
+---
+title: Number.parseFloat()
+slug: Web/JavaScript/Reference/Global_Objects/Число/parseFloat
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Number
+  - метод
+  - число
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseFloat
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Метод <strong><code>Number.parseFloat()</code></strong> розбирає аргумент та повертає число з плаваючою крапкою. Якщо число неможливо розібрати з аргумента, повертає {{jsxref("NaN")}}.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-parsefloat.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="notranslate">Number.parseFloat(<var>string</var>)</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>string</var></code></dt>
+ <dd>Значення, яке треба розібрати. Якщо цей аргумент не є рядком, то він приводиться до рядка за допомогою абстрактної операції <code><a href="https://tc39.es/ecma262/#sec-tostring">ToString</a></code>. {{glossary("whitespace", "Пробільний символ")}} на початку цього аргументу ігнорується.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Число з плаваючою крапкою з наданого рядка <code><var>string</var></code>.</p>
+
+<p>Або {{jsxref("NaN")}}, коли перший непробільний символ не може бути перетворений на число.</p>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<pre class="brush: js notranslate">if (Number.parseFloat === undefined) {
+  Number.parseFloat = parseFloat;
+}
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Number.parseFloat_проти_parseFloat">Number.parseFloat проти parseFloat</h3>
+
+<p>Цей метод має таку саму функціональність, як і глобальна функція {{jsxref("parseFloat", "parseFloat()")}}:</p>
+
+<pre class="brush: js notranslate">Number.parseFloat === parseFloat; // true
+</pre>
+
+<p>Цей метод також є частиною ECMAScript 2015. (Його метою є модуляризація глобальних елементів.)</p>
+
+<p>Дивіться більше подробиць та приклади у {{jsxref("parseFloat", "parseFloat()")}}.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікації</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.parsefloat', 'Number.parseFloat')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Number.parseFloat")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>
+  <dl>
+   <dt>{{jsxref("Число", "Number")}}</dt>
+   <dd>Об'єкт, якому належить цей метод.</dd>
+  </dl>
+ </li>
+ <li>Глобальний метод {{jsxref("parseFloat", "parseFloat()")}}.</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/число/parseint/index.html b/files/uk/web/javascript/reference/global_objects/число/parseint/index.html
new file mode 100644
index 0000000000..8bb6c28c80
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/число/parseint/index.html
@@ -0,0 +1,83 @@
+---
+title: Number.parseInt()
+slug: Web/JavaScript/Reference/Global_Objects/Число/parseInt
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Number
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseInt
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>Number.parseInt()</code></strong> розбирає рядковий аргумент та повертає ціле число з вказаною основою системи числення.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-parseint.html", "taller")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">Number.parseInt(<var>string,</var>[ <var>radix</var>])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<div>
+<dl>
+ <dt><code><var>string</var></code></dt>
+ <dd>Значення, яке розбиратиметься. Якщо цей аргумент не є рядком, то він приводиться до рядка за допомогою абстрактної операції <code><a href="https://tc39.es/ecma262/#sec-tostring">ToString</a></code>. Пробільний символ на початку цього аргументу ігнорується.</dd>
+ <dt><code><var>radix</var></code><var> {{optional_inline}}</var></dt>
+ <dd>Ціле число між <code>2</code> та <code>36</code>, яке вказує <em>основу</em> (в математичних системах числення) значення <code><var>string</var></code>. Будьте обережні — вона <strong><em>не</em></strong> дорівнює за замовчуванням <code>10</code>!</dd>
+</dl>
+</div>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Ціле число, отримане з наданого рядка <code><var>string</var></code>.</p>
+
+<p>Якщо значення <code><var>radix</var></code> менше за <code>2</code> чи більше за <code>36</code>, а перший непробільний символ не може бути перетворений на число, повертається {{jsxref("NaN")}}.</p>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<pre class="brush: js notranslate">if (Number.parseInt === undefined) {
+    Number.parseInt = window.parseInt
+}
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Number.parseInt_проти_parseInt">Number.parseInt проти parseInt</h3>
+
+<p>Цей метод має таку саму функціональність, як і глобальна функція {{jsxref("parseInt", "parseInt()")}}:</p>
+
+<pre class="brush: js notranslate">Number.parseInt === parseInt // true</pre>
+
+<p>і є частиною ECMAScript 2015 (його метою є модуляризація глобальних елементів). Будь ласка, дивіться більше подробиць та прикладів у {{jsxref("parseInt", "parseInt()")}}.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.parseint', 'Number.parseInt')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Number.parseInt")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>Об'єкт {{jsxref("Число", "Number")}}, якому належить цей метод.</li>
+ <li>Глобальний метод {{jsxref("parseInt", "parseInt()")}}.</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/число/positive_infinity/index.html b/files/uk/web/javascript/reference/global_objects/число/positive_infinity/index.html
new file mode 100644
index 0000000000..5c22467fb7
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/число/positive_infinity/index.html
@@ -0,0 +1,82 @@
+---
+title: Number.POSITIVE_INFINITY
+slug: Web/JavaScript/Reference/Global_Objects/Число/POSITIVE_INFINITY
+tags:
+  - JavaScript
+  - Number
+  - Властивість
+  - Довідка
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY
+---
+<div>{{JSRef}}</div>
+
+<p>Властивість <strong><code>Number.POSITIVE_INFINITY</code></strong> відображає значення позитивної нескінченності.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-positive-infinity.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Значення <code>Number.POSITIVE_INFINITY</code> є таким самим, як і значення властивості глобального об'єкта {{jsxref("Infinity")}}.</p>
+
+<p>Це значення поводиться дещо інакше, ніж математична нескінченність:</p>
+
+<ul>
+ <li>Будь-яке позитивне значення, в тому числі <code>POSITIVE_INFINITY</code>, помножене на <code>POSITIVE_INFINITY</code> вертає <code>POSITIVE_INFINITY</code>.</li>
+ <li>Будь-яке від'ємне значення, в тому числі {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}, помножене на <code>POSITIVE_INFINITY</code>, вертає {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}.</li>
+ <li>Будь-яке позитивне число, розділене на <code>POSITIVE_INFINITY</code>, вертає нуль.</li>
+ <li>Будь-яке від'ємне число, розділене на <code>POSITIVE_INFINITY</code>, вертає від'ємний нуль.</li>
+ <li>Нуль, помножений на <code>POSITIVE_INFINITY</code>, вертає {{jsxref("NaN")}}.</li>
+ <li>Значення {{jsxref("Global_Objects/NaN", "NaN")}}, помножене на <code>POSITIVE_INFINITY</code>, вертає {{jsxref("NaN")}}.</li>
+ <li>Значення <code>POSITIVE_INFINITY</code>, розділене на будь-яке від'ємне значення, окрім {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}, вертає {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}.</li>
+ <li>Значення <code>POSITIVE_INFINITY</code>, розділене на будь-яке позитивне значення, окрім <code>POSITIVE_INFINITY</code>, вертає <code>POSITIVE_INFINITY</code>.</li>
+ <li>Значення <code>POSITIVE_INFINITY</code>, розділене на {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}} чи <code>POSITIVE_INFINITY</code>, вертає {{jsxref("NaN")}}.</li>
+</ul>
+
+<p>Ви можете скористатись властивістю <code>Number.POSITIVE_INFINITY</code>, щоб позначити помилку в умові, яка вертає скінченне число у випадку успіху. Зауважте, однак, що метод {{jsxref("isFinite")}} в цьому випадку більш доречний.</p>
+
+<p>Оскільки <code>POSITIVE_INFINITY</code> є статичною властивістю об'єкта {{jsxref("Число", "Number")}}, її завжди слід використовувати як <code>Number.POSITIVE_INFINITY</code>, а не як властивість створеного вами об'єкта {{jsxref("Число", "Number")}}. </p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_POSITIVE_INFINITY">Використання <code>POSITIVE_INFINITY</code></h3>
+
+<p>У наступному прикладі змінній <code>bigNumber</code> присвоюється значення, яке є більшим за максимальне. Коли виконується інструкція {{jsxref("Statements/if...else", "if")}}, <code>bigNumber</code> має значення <code>Infinity</code>, а отже, <code>bigNumber</code> присвоюється більш кероване значення для продовження.</p>
+
+<pre class="brush: js notranslate">var bigNumber = Number.MAX_VALUE * 2;
+
+if (bigNumber == Number.POSITIVE_INFINITY) {
+  bigNumber = returnFinite();
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.positive_infinity', 'Number.POSITIVE_INFINITY')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.POSITIVE_INFINITY")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.isFinite()")}}</li>
+ <li>{{jsxref("Infinity")}}</li>
+ <li>{{jsxref("isFinite", "isFinite()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/число/prototype/index.html b/files/uk/web/javascript/reference/global_objects/число/prototype/index.html
new file mode 100644
index 0000000000..82c904e1ea
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/число/prototype/index.html
@@ -0,0 +1,89 @@
+---
+title: Number.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Число/prototype
+tags:
+  - JavaScript
+  - Number
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Number
+---
+<div>{{JSRef}}</div>
+
+<p>Властивість <strong><code>Number.prototype</code></strong> являє собою прототип для конструктора класу <code>{{jsxref("Global_Objects/Number", "Number")}}</code>.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Кожен примірник класу <code>{{jsxref("Global_Objects/Number", "Number")}}</code> успадковує властивості й методи з <code>Number.prototype</code>. Зміни, внесені до прототипа, позначаться на всіх об'єктах, що є примірниками класу <code>{{jsxref("Global_Objects/Number", "Number")}}</code>.</p>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt><code>Number.prototype.constructor</code></dt>
+ <dd>Повертає функцію, що створила цей примірник об'єкта. Типово це об'єкт <code>{{jsxref("Global_Objects/Number", "Number")}}</code>, який водночас є і функцією.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<dl>
+ <dt>{{jsxref("Number.prototype.toExponential()")}}</dt>
+ <dd>Повертає рядок, що містить експоненціальний запис числа.</dd>
+ <dt>{{jsxref("Number.prototype.toFixed()")}}</dt>
+ <dd>Повертає рядок, що містить запис числа у форматі з нерухомою комою.</dd>
+ <dt>{{jsxref("Number.prototype.toLocaleString()")}}</dt>
+ <dd>Повертає рядок, що містить узалежнений від мови запис числа. Перекриває метод <code>{{jsxref("Object.prototype.toLocaleString()")}}</code>.</dd>
+ <dt>{{jsxref("Number.prototype.toPrecision()")}}</dt>
+ <dd>Повертає рядок, що містить запис числа із зазначеною точністю у форматі з нерухомою комою чи експоненціальний.</dd>
+ <dt>{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Повертає рядок, що містить код мовою JavaScript, який створює об'єкт класу {{jsxref("Global_Objects/Number", "Number")}} з відповідним значенням. Цей код можна використати для створення нового об'єкта. Перекриває метод <code>{{jsxref("Object.prototype.toSource()")}}</code>.</dd>
+ <dt>{{jsxref("Number.prototype.toString()")}}</dt>
+ <dd>Повертає рядок, що містить числовий запис значення об'єкта в зазначеній системі числення. Перекриває метод <code>{{jsxref("Object.prototype.toString()")}}</code>.</dd>
+ <dt>{{jsxref("Number.prototype.valueOf()")}}</dt>
+ <dd>Повертає {{Glossary("Primitive", "просте числове значення")}} об'єкта. Перекриває метод <code>{{jsxref("Object.prototype.valueOf()")}}</code>.</dd>
+</dl>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Первинне визначення. Реалізовано у JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<p class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Number.prototype")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Number", "Number")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/число/toexponential/index.html b/files/uk/web/javascript/reference/global_objects/число/toexponential/index.html
new file mode 100644
index 0000000000..9896ee2c95
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/число/toexponential/index.html
@@ -0,0 +1,89 @@
+---
+title: Number.prototype.toExponential()
+slug: Web/JavaScript/Reference/Global_Objects/Число/toExponential
+tags:
+  - JavaScript
+  - Number
+  - метод
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toExponential
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>toExponential()</code></strong> повертає рядок, що відображає об'єкт Number в експоненціальному позначенні.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-toexponential.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>numObj</var>.toExponential([<var>fractionDigits</var>])</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>fractionDigits</code></dt>
+ <dd>Необов'язковий параметр. Ціле число, яке визначає кількість цифр після десяткової крапки. За замовчуванням використовується стільки цифр, скільки необхідно для відображення числа.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Рядок, що відображає об'єкт {{jsxref("Число", "Number")}} в експоненційному позначенні, з однією цифрою перед десятковою крапкою, округлене до <code>fractionDigits</code> цифр після крапки. </p>
+
+<h3 id="Винятки">Винятки</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Якщо значення <code>fractionDigits</code> занадто маленьке або занадто велике. Значення між 0 і 20, включно, не спричинять {{jsxref("RangeError")}}. Також реалізації можуть підтримувати більші та менші значення.</dd>
+ <dt>{{jsxref("TypeError")}}</dt>
+ <dd>Якщо цей метод викликається на об'єкті, який не є об'єктом {{jsxref("Число", "Number")}}.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо аргумент <code>fractionDigits</code> не вказаний, кількість цифр після десяткової крапки за замовчуванням дорівнює кількості цифр, необхідній для унікального відображення значення.</p>
+
+<p>Якщо ви використовуєте метод <code>toExponential()</code> на числовому літералі, і цей літерал не має експоненціального показника та десяткової крапки, залиште пробіл(и) перед крапкою, що передує виклику методу, щоб запобігти її інтерпретації як десяткової крапки.</p>
+
+<p>Якщо число має більше цифр, ніж вимагає параметр <code>fractionDigits</code>, число округлюється до найближчого числа, представленого цифрами <code>fractionDigits</code>. Дивіться приклад округлення в описі методу {{jsxref("Number.prototype.toFixed", "toFixed()")}}, який також застосовується у <code>toExponential()</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_toExponential">Використання <code>toExponential</code></h3>
+
+<pre class="brush: js notranslate">var numObj = 77.1234;
+
+console.log(numObj.toExponential());  // виводить 7.71234e+1
+console.log(numObj.toExponential(4)); // виводить 7.7123e+1
+console.log(numObj.toExponential(2)); // виводить 7.71e+1
+console.log(77.1234.toExponential()); // виводить 7.71234e+1
+console.log(77 .toExponential());     // виводить 7.7e+1
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.toExponential")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/число/tofixed/index.html b/files/uk/web/javascript/reference/global_objects/число/tofixed/index.html
new file mode 100644
index 0000000000..a36e157a44
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/число/tofixed/index.html
@@ -0,0 +1,95 @@
+---
+title: Number.prototype.toFixed()
+slug: Web/JavaScript/Reference/Global_Objects/Число/toFixed
+tags:
+  - JavaScript
+  - Number
+  - Довідка
+  - метод
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toFixed
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>toFixed()</code></strong> форматує число, використовуючи позначення з нерухомою крапкою.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-tofixed.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><var>numObj</var>.toFixed([<var>digits</var>])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>digits</code> {{optional_inline}}</dt>
+ <dd>Кількість цифр після десяткової крапки; це має бути значення між <code>0</code> та <code>20</code>, включно, а реалізації можуть за бажанням підтримувати ширший діапазон значень. Якщо цей аргумент пропущений, він вважається рівним <code>0</code>.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Рядок, що відображає надане число у форматі числа з нерухомою крапкою.</p>
+
+<h3 id="Винятки">Винятки</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Якщо значення <code>digits</code> надто маленьке чи надто велике. Значення між <code>0</code> та <code>100</code>, включно, не спричинять {{jsxref("RangeError")}}. Реалізаціям дозвонено підтримувати більші та менші значення, за вибором.</dd>
+ <dt>{{jsxref("TypeError")}}</dt>
+ <dd>Якщо цей метод вкликається на об'єкті, який не є об'єктом {{jsxref("Число", "Number")}}.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p><strong><code>toFixed()</code></strong> вертає рядкове представлення об'єкта <code>numObj</code>, яке не використовує експоненціальне позначення і має рівно <code>digits</code> цифр після десяткової позиції. Число округлюється за необхідності, а дробова частина заповнюється нулями, якщо це необхідно для досягнення необхідної довжини. Якщо абсолютне значення <code>numObj</code> більше або дорівнює <code>1e+21</code>, цей метод просто викликає {{jsxref("Number.prototype.toString()")}} та повертає рядок у експоненціальному позначенні.</p>
+
+<div class="warning">
+<p><strong>Застереження:</strong> Числа з рухомою крапкою не здатні точно відображати усі десяткові числа у двійковому представленні. Це може призвести до неочікуваних результатів, наприклад <code>0.1 + 0.2 === 0.3</code>, що вертає <code>false</code> .</p>
+</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_toFixed">Використання <code>toFixed</code></h3>
+
+<pre class="brush: js notranslate">let numObj = 12345.6789
+
+numObj.toFixed()       // Вертає '12346': зверніть увагу на округлення, немає дробової частини
+numObj.toFixed(1)      // Вертає '12345.7': зверніть увагу на округлення
+numObj.toFixed(6)      // Вертає '12345.678900': зверніть увагу на додані нулі
+(1.23e+20).toFixed(2)  // Вертає '123000000000000000000.00'
+(1.23e-10).toFixed(2)  // Вертає '0.00'
+2.34.toFixed(1)        // Вертає '2.3'
+2.35.toFixed(1)        // Вертає '2.4'. Зауважте, округлюється вгору
+2.55.toFixed(1)        // Вертає '2.5'. Зауважте, округлюється вниз - дивіться застереження вище
+-2.34.toFixed(1)       // Вертає -2.3 (через пріоритет операторів, від'ємні числові літерали не повертають рядок...)
+(-2.34).toFixed(1)     // Вертає '-2.3'
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.toFixed")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/число/tolocalestring/index.html b/files/uk/web/javascript/reference/global_objects/число/tolocalestring/index.html
new file mode 100644
index 0000000000..a65659d7de
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/число/tolocalestring/index.html
@@ -0,0 +1,154 @@
+---
+title: Number.prototype.toLocaleString()
+slug: Web/JavaScript/Reference/Global_Objects/Число/toLocaleString
+tags:
+  - JavaScript
+  - Number
+  - Інтернаціоналізація
+  - метод
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>toLocaleString()</code></strong> повертає рядок, що відображає число у відповідності до налаштувань мови.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-tolocalestring.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><em>numObj</em>.toLocaleString(</code><code>[locales [, options]])</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<p>Аргументи <code>locales</code> та <code>options</code> налаштовують поведінку функції та дозволяють застосункам вказувати мову, чиї правила форматування мають застосовуватись. У тих реалізаціях, які ігнорують аргументи <code>locales</code> та <code>options</code>, локальні налаштування та форма поверненого рядка повністю залежать від реалізації.</p>
+
+<div>Дивіться <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/NumberFormat">конструктор <code>Intl.NumberFormat()</code></a>, щоб дізнатись подробиці щодо цих параметрів та їхнього використання.</div>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Рядок, що відображає число у відповідності до налаштувань мови.</p>
+
+<h2 id="Швидкодія">Швидкодія</h2>
+
+<p>При форматуванні великої кількості чисел краще створити об'єкт {{jsxref("NumberFormat")}} та використовувати функцію, надану його властивістю {{jsxref("NumberFormat.format")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_toLocaleString">Використання <code>toLocaleString</code></h3>
+
+<p>При загальному використанні, без зазначення локалі, повертається рядок у мовному форматі, що стоїть за замовчуванням та з початковими параметрами.</p>
+
+<pre class="brush: js notranslate">var number = 3500;
+
+console.log(number.toLocaleString()); // Відображає "3,500" у форматі U.S. English
+</pre>
+
+<h3 id="Перевірка_підтримки_аргументів_locales_та_options">Перевірка підтримки аргументів <code>locales</code> та <code>options</code></h3>
+
+<p>Аргументи <code>locales</code> та <code>options</code> ще не підтримуються в усіх переглядачах. Для перевірки їхньої підтримки у ES5.1 та новіших реалізаціях можна скористатись вимогою, згідно якої недозволені мовні позначення відхиляються з винятком {{jsxref("Global_Objects/RangeError", "RangeError")}}:</p>
+
+<pre class="brush: js notranslate">function toLocaleStringSupportsLocales() {
+  var number = 0;
+  try {
+    number.toLocaleString('i');
+  } catch (e) {
+    return e.name === 'RangeError';
+  }
+  return false;
+}
+</pre>
+
+<p>До ES5.1, реалізації не були зобов'язані викидати виняток з помилкою діапазону, якщо <code>toLocaleString</code> викликався з аргументами.</p>
+
+<p>Перевірка, яка працює в усіх хостах, в тому числі тих, що підтримують ECMA-262 до версії 5.1, полягає в безпосередньому тестуванні функцій, визначених у ECMA-402 як такі, що зобов'язані підтримувати регіональні налаштування для <code>Number.prototype.toLocaleString</code>:</p>
+
+<pre class="brush: js notranslate">function toLocaleStringSupportsOptions() {
+  return !!(typeof Intl == 'object' &amp;&amp; Intl &amp;&amp; typeof Intl.NumberFormat == 'function');
+}
+</pre>
+
+<p>Цей код перевіряє наявність глобального об'єкта <code>Intl</code>, перевіряє, що він не дорівнює <code>null</code> та що він має властивість <code>NumberFormat</code>, яка є функцією.</p>
+
+<h3 id="Використання_locales">Використання <code>locales</code></h3>
+
+<p>Цей приклад демонструє деякі варіації локалізованих форматів чисел. Щоб отримати формат мови, задіяної в інтерфейсі вашого застосутку, переконайтесь, що вказали цю мову (та, можливо, кілька запасних мов) за допомогою аргументу <code>locales</code>:</p>
+
+<pre class="brush: js notranslate">var number = 123456.789;
+
+// В німецькій десятковим роздільником є кома, а крапка розділяє тисячі
+console.log(number.toLocaleString('de-DE'));
+// → 123.456,789
+
+// Арабська у більшості арабськомовних країн використовує <a href="https://uk.wikipedia.org/wiki/%D0%86%D0%BD%D0%B4%D0%BE-%D0%B0%D1%80%D0%B0%D0%B1%D1%81%D1%8C%D0%BA%D0%B0_%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0_%D1%87%D0%B8%D1%81%D0%BB%D0%B5%D0%BD%D0%BD%D1%8F">Індо-арабські</a> цифри
+console.log(number.toLocaleString('ar-EG'));
+// → ١٢٣٤٥٦٫٧٨٩
+
+// Індія використовує роздільники тисячі/лакх/крор
+console.log(number.toLocaleString('en-IN'));
+// → 1,23,456.789
+
+// ключ розширення nu налаштовує систему нумерації, наприклад, китайську десяткову
+console.log(number.toLocaleString('zh-Hans-CN-u-nu-hanidec'));
+// → 一二三,四五六.七八九
+
+// при запиті мови, яка, можливо, не підтримується, наприклад,
+// балійської, додайте запасні мови, в даному випадку це індонезійська
+console.log(number.toLocaleString(['ban', 'id']));
+// → 123.456,789</pre>
+
+<h3 id="Використання_options">Використання <code>options</code></h3>
+
+<p>Результат методу <code>toLocaleString</code> можна налаштувати за допомогою аргументу <code>options</code>:</p>
+
+<pre class="brush: js notranslate">var number = 123456.789;
+
+// налаштування формату валюти
+console.log(number.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }));
+// → 123.456,79 €
+
+// японська єна не використовує дробові розряди
+console.log(number.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }))
+// → ￥123,457
+
+// обмежити трьома значущими цифрами
+console.log(number.toLocaleString('en-IN', { maximumSignificantDigits: 3 }));
+// → 1,23,000
+
+// Використовувати мову системи з параметрами для форматування чисел
+var num = 30000.65;
+console.log(num.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}));
+// → "30,000.65" де мова системи англійська, або
+// → "30.000,65" де мова системи німецька, або
+// → "30 000,65" де мова системи французька
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sup-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.toLocaleString")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/число/toprecision/index.html b/files/uk/web/javascript/reference/global_objects/число/toprecision/index.html
new file mode 100644
index 0000000000..3c0ecefc4a
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/число/toprecision/index.html
@@ -0,0 +1,88 @@
+---
+title: Number.prototype.toPrecision()
+slug: Web/JavaScript/Reference/Global_Objects/Число/toPrecision
+tags:
+  - JavaScript
+  - Number
+  - метод
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toPrecision
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>toPrecision()</code></strong> вертає рядкове відображення об'єкта {{jsxref("Число", "Number")}} з вказаною точністю.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-toprecision.html")}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><var>numObj</var>.toPrecision([<var>precision</var>])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>precision</code> {{optional_inline}}</dt>
+ <dd>Ціле число, що вказує кількість значущих цифр.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Рядок, що відображає об'єкт {{jsxref("Число", "Number")}} у форматі з нерухомою крапкою або експоненціальному форматі, округлений до кількості значущих цифр <code>precision</code>. Дивіться обговорення округлення у описі методу {{jsxref("Number.prototype.toFixed()")}}, яке також застосовується в методі <code>toPrecision()</code>.</p>
+
+<p>Якщо аргумент <code>precision</code> не вказаний, метод поводиться як {{jsxref("Number.prototype.toString()")}}. Якщо аргумент <code>precision</code> не є цілочисельним значенням, воно округлюється до найближчого цілого числа.</p>
+
+<h3 id="Винятки">Винятки</h3>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/RangeError", "RangeError")}}</dt>
+ <dd>Якщо значення <code>precision</code> не знаходиться в діапазоні між <code>1</code> та <code>100</code> (включно), викидається {{jsxref("RangeError")}}. Реалізаціям дозволено підтримувати також більші та менші значення. ECMA-262 лише вимагає точності до 21 значущої цифри.</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_toPrecision">Використання <code>toPrecision</code></h3>
+
+<pre class="brush: js notranslate">let numObj = 5.123456
+
+console.log(numObj.toPrecision())    // виводить '5.123456'
+console.log(numObj.toPrecision(5))   // виводить '5.1235'
+console.log(numObj.toPrecision(2))   // виводить '5.1'
+console.log(numObj.toPrecision(1))   // виводить '5'
+
+numObj = 0.000123
+
+console.log(numObj.toPrecision())    // виводить '0.000123'
+console.log(numObj.toPrecision(5))   // виводить '0.00012300'
+console.log(numObj.toPrecision(2))   // виводить '0.00012'
+console.log(numObj.toPrecision(1))   // виводить '0.0001'
+
+// зауважте, що в деяких обставинах може повернутись експоненціальний запис
+console.log((1234.5).toPrecision(2)) // виводить '1.2e+3'
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.toPrecision")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/число/tosource/index.html b/files/uk/web/javascript/reference/global_objects/число/tosource/index.html
new file mode 100644
index 0000000000..55a86a9972
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/число/tosource/index.html
@@ -0,0 +1,54 @@
+---
+title: Number.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Число/toSource
+tags:
+  - JavaScript
+  - Number
+  - застарілий
+  - метод
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toSource
+---
+<div>{{JSRef}} {{obsolete_header}}</div>
+
+<p>Метод <strong><code>toSource()</code></strong> вертає рядкове представлення першокоду об'єкта.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><var>numObj</var>.toSource()
+Number.toSource()</pre>
+
+<h3 id="Значення_що_вертається">Значення, що вертається</h3>
+
+<p>Рядкове представлення першокоду об'єкта.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Вбудована_функція">Вбудована функція</h3>
+
+<p>Для вбудованого об'єкта {{jsxref("Число", "Number")}}, <code>toSource()</code> вертає наступний рядок, який вказує, що першокод недоступний:</p>
+
+<pre class="brush: js notranslate">function Number() {
+    [native code]
+}
+</pre>
+
+<p>Для екземплярів {{jsxref("Число", "Number")}}, <code>toSource()</code> вертає рядкове представлення першокоду.</p>
+
+<p>Цей метод зазвичай викликається внутрішньо у JavaScript, а не явно у коді.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Не є частиною жодного стандарту.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.toSource")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/число/tostring/index.html b/files/uk/web/javascript/reference/global_objects/число/tostring/index.html
new file mode 100644
index 0000000000..dcd4d82bb0
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/число/tostring/index.html
@@ -0,0 +1,97 @@
+---
+title: Number.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Число/toString
+tags:
+  - JavaScript
+  - Number
+  - метод
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toString
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>toString()</code></strong> вертає рядкове представлення вказаного об'єкта {{jsxref("Число", "Number")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-tostring.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>numObj</var>.toString([<var>radix</var>])</code></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>radix</code></dt>
+ <dd>Необов'язковий. Ціле число в діапазоні від <code>2</code> до <code>36</code>, яке вказує основу системи числення для відображення чисел.</dd>
+</dl>
+
+<h3 id="Значення_що_вертається">Значення, що вертається</h3>
+
+<p>Рядкове представлення вказаного об'єкта {{jsxref("Число", "Number")}}.</p>
+
+<h3 id="Винятки">Винятки</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Якщо методу <code>toString()</code> надано основу, меншу за <code>2</code> чи більшу за <code>36</code>, викидається {{jsxref("RangeError")}}.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Об'єкт {{jsxref("Число", "Number")}} заміщує метод <code>toString()</code> об'єкта {{jsxref("Object")}}. (Він <em>не</em> успадковує {{jsxref("Object.prototype.toString()")}}). Для об'єктів {{jsxref("Число", "Number")}}, метод <code>toString()</code> вертає рядкове представлення об'єкта у вказаній системі числення.</p>
+
+<p>Метод <code>toString()</code> розбирає перший аргумент та намагається повернути рядкове представлення числа з вказаною основою <em>radix</em>. Для основ, більших за <code>10</code>, літери алфавіту вказують числа, більші за 9. Наприклад, для шістнадцяткових чисел (основа 16) використовуються літери від <code>a</code> до <code>f</code>.</p>
+
+<p>Якщо аргумент <code>radix</code> не вказаний, основа вважається рівною <code>10</code>.</p>
+
+<p>Якщо значення <code>numObj</code> від'ємне, знак зберігається. Це відбувається, навіть якщо основа дорівнює <code>2</code>; повернений рядок - це додатне двійкове представлення числа <code>numObj</code> зі знаком <code>-</code> попереду, а <strong>не</strong> <code>numObj</code> у форматі доповняльного коду.</p>
+
+<p>Якщо <code>numObj</code> не є цілим числом, знак 'крапка' використовується для відділення десяткових знаків.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_toString">Використання <code>toString</code></h3>
+
+<pre class="brush: js notranslate">let count = 10
+
+console.log(count.toString())    // виводить '10'
+console.log((17).toString())     // виводить '17'
+console.log((17.2).toString())   // виводить '17.2'
+
+let x = 6
+
+console.log(x.toString(2))       // виводить '110'
+console.log((254).toString(16))  // виводить 'fe'
+
+console.log((-10).toString(2))   // виводить '-1010'
+console.log((-0xff).toString(2)) // виводить '-11111111'
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.prototype.tostring', 'Number.prototype.tostring')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.toString")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/global_objects/число/valueof/index.html b/files/uk/web/javascript/reference/global_objects/число/valueof/index.html
new file mode 100644
index 0000000000..9ec495bfa3
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/число/valueof/index.html
@@ -0,0 +1,67 @@
+---
+title: Number.prototype.valueOf()
+slug: Web/JavaScript/Reference/Global_Objects/Число/valueOf
+tags:
+  - JavaScript
+  - Number
+  - Довідка
+  - метод
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/valueOf
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>valueOf()</code></strong> вертає загорнуте примітивне значення об'єкта {{jsxref("Число", "Number")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-valueof.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><var>numObj</var>.valueOf()</pre>
+
+<h3 id="Значення_що_вертається">Значення, що вертається</h3>
+
+<p>Число, яке відображає примітивне значення вказаного об'єкта {{jsxref("Число", "Number")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Цей метод, зазвичай, викликається внутрішньо у JavaScript, а не явно у коді.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_valueOf">Використання <code>valueOf</code></h3>
+
+<pre class="brush: js notranslate">let numObj = new Number(10)
+console.log(typeof numObj)  // object
+
+let num = numObj.valueOf()
+console.log(num)            // 10
+console.log(typeof num)     // number
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.valueOf")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/index.html b/files/uk/web/javascript/reference/index.html
new file mode 100644
index 0000000000..cffa5c202b
--- /dev/null
+++ b/files/uk/web/javascript/reference/index.html
@@ -0,0 +1,50 @@
+---
+title: Довідник з JavaScript
+slug: Web/JavaScript/Reference
+tags:
+  - JavaScript
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/JavaScript/Reference
+---
+<div>{{JsSidebar}}</div>
+
+<p>This part of the JavaScript section on MDN serves as a repository of facts about the JavaScript language. Read more <a href="/en-US/docs/Web/JavaScript/Reference/About">about this reference</a>.</p>
+
+<h2 id="Глобальні_Об'єкти">Глобальні Об'єкти</h2>
+
+<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">JavaScript standard built-in objects</a>, along with their methods and properties.</p>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects', 'Standard_objects_by_category')}}</div>
+
+<h2 id="Statements">Statements</h2>
+
+<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript statements and declarations</a>.</p>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Statements', 'Statements_and_declarations_by_category')}}</div>
+
+<h2 id="Expressions_and_operators">Expressions and operators</h2>
+
+<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Operators">JavaScript expressions and operators</a>.</p>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Operators', 'Expressions_and_operators_by_category')}}</div>
+
+<h2 id="Фукції">Фукції</h2>
+
+<p>This chapter documents how to work with <a href="/en-US/docs/Web/JavaScript/Reference/Functions">JavaScript functions</a> to develop your applications.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default parameters</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest parameters</a></li>
+</ul>
+
+<h2 id="Additional_reference_pages">Additional reference pages</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Deprecated features</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/lexical_grammar/index.html b/files/uk/web/javascript/reference/lexical_grammar/index.html
new file mode 100644
index 0000000000..577a92f94d
--- /dev/null
+++ b/files/uk/web/javascript/reference/lexical_grammar/index.html
@@ -0,0 +1,673 @@
+---
+title: Лексична граматика
+slug: Web/JavaScript/Reference/Lexical_grammar
+tags:
+  - JavaScript
+  - Посібник
+  - ключове слово
+  - лексична граматика
+  - літерал
+translation_of: Web/JavaScript/Reference/Lexical_grammar
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p>Ця стаття описує лексичну граматику JavaScript. Текст коду скриптів ECMAScript сканується зліва направо та перетворюється на послідовність вхідних елементів, якими є токени, керівні символи, символи розриву рядка, коментарі або <a href="/uk/docs/Glossary/whitespace">пробільні символи</a>. ECMAScript також визначає певні ключові слова та має правила для автоматичної вставки крапки з комою для завершення інструкцій.</p>
+
+<h2 id="Керівні_символи">Керівні символи</h2>
+
+<p>Керівні символи не мають візуального відображення, але використовуються для керування інтерпретацією тексту.</p>
+
+<table class="standard-table">
+ <caption>Керівні символи Юнікоду</caption>
+ <thead>
+  <tr>
+   <th>Код символа</th>
+   <th>Назва</th>
+   <th>Скорочення</th>
+   <th>Опис</th>
+  </tr>
+ </thead>
+ <thead>
+  <tr>
+   <td><code>U+200C</code></td>
+   <td>Роз'єднувач нульової ширини<br>
+    (Zero width non-joiner)</td>
+   <td>&lt;ZWNJ&gt;</td>
+   <td>Розташовується між символами, щоб запобігти об'єднанню їх у лігатури у певних мовах (<a href="https://en.wikipedia.org/wiki/Zero-width_non-joiner">Вікіпедія</a>).</td>
+  </tr>
+  <tr>
+   <td><code>U+200D</code></td>
+   <td>Об'єднувач нульової ширини<br>
+    (Zero width joiner)</td>
+   <td>&lt;ZWJ&gt;</td>
+   <td>Розташовується між символами, які інакше не були б об'єднані, щоб відобразити символи у їхній об'єднаній формі у певних мовах (<a href="https://en.wikipedia.org/wiki/Zero-width_joiner">Вікіпедія</a>).</td>
+  </tr>
+  <tr>
+   <td><code>U+FEFF</code></td>
+   <td>Маркер порядку байтів<br>
+    (Byte order mark)</td>
+   <td>&lt;BOM&gt;</td>
+   <td>Використовується на початку скрипта, щоб позначити його як Юнікод, та для позначення порядку байтів (<a href="https://uk.wikipedia.org/wiki/%D0%9C%D0%B0%D1%80%D0%BA%D0%B5%D1%80_%D0%BF%D0%BE%D1%80%D1%8F%D0%B4%D0%BA%D1%83_%D0%B1%D0%B0%D0%B9%D1%82%D1%96%D0%B2">Вікіпедія</a>).</td>
+  </tr>
+ </thead>
+</table>
+
+<h2 id="Пробільні_символи">Пробільні символи</h2>
+
+<p><a href="/uk/docs/Glossary/whitespace">Пробільні символи</a> покращують читабельність тексту коду та відділяють токени один від одного. Ці символи зазвичай не є обов'язковими для функціональності коду. Часто використовують <a href="https://en.wikipedia.org/wiki/Minification_%28programming%29">інструменти мініфікації</a> для прибирання пробільних символів, щоб зменшити кількість даних, які необхідно передати.</p>
+
+<table class="standard-table">
+ <caption>Пробільні символи</caption>
+ <thead>
+  <tr>
+   <th>Код символа</th>
+   <th>Назва</th>
+   <th>Скорочення</th>
+   <th>Опис</th>
+   <th>Екранована послідовність</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>U+0009</td>
+   <td>Табуляція символа<br>
+    (Character tabulation)</td>
+   <td>&lt;HT&gt;</td>
+   <td>Горизонтальна табуляція</td>
+   <td>\t</td>
+  </tr>
+  <tr>
+   <td>U+000B</td>
+   <td>Табуляція рядка<br>
+    (Line tabulation)</td>
+   <td>&lt;VT&gt;</td>
+   <td>Вертикальна табуляція</td>
+   <td>\v</td>
+  </tr>
+  <tr>
+   <td>U+000C</td>
+   <td>Зміна сторінки<br>
+    (Form feed)</td>
+   <td>&lt;FF&gt;</td>
+   <td>Керівний символ розриву сторінки (<a href="https://en.wikipedia.org/wiki/Page_break#Form_feed">Вікіпедія</a>).</td>
+   <td>\f</td>
+  </tr>
+  <tr>
+   <td>U+0020</td>
+   <td>Пробіл<br>
+    (Space)</td>
+   <td>&lt;SP&gt;</td>
+   <td>Звичайний пробіл</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>U+00A0</td>
+   <td>Нерозривний пробіл<br>
+    (No-break space)</td>
+   <td>&lt;NBSP&gt;</td>
+   <td>Звичайний пробіл, але відсутня позиція, де можливий розрив рядка</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>Інші</td>
+   <td>Інші пробільні символи Юнікоду</td>
+   <td>&lt;USP&gt;</td>
+   <td><a href="https://uk.wikipedia.org/wiki/%D0%9F%D1%80%D0%BE%D0%B1%D1%96%D0%BB">Пробіли Юнікоду на Вікіпедії</a></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Символи_розриву_рядка">Символи розриву рядка</h2>
+
+<p>На додачу до <a href="/en-US/docs/Glossary/Whitespace">пробільних</a> символів, символи розриву рядка використовуються для покращення читабельності тексту коду. Однак, у деяких випадках символи розриву рядка можуть вплинути на виконання коду JavaScript, оскільки існують декілька місць, де вони заборонені. Символи розриву рядка також впливають на процес <a href="#Автоматична_вставка_крапки_з_комою">автоматичної вставки крапки з комою</a>. Символи розриву рядка відповідають класу <strong>\s</strong> у <a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions">регулярних виразах</a>.</p>
+
+<p>Лише наступні коди символів Юнікоду сприймаються як символи розриву рядка у ECMAScript, інші символи розриву сприймаються як пробільні (наприклад, символ Наступний рядок (Next Line), NEL, U+0085 вважається пробільним символом).</p>
+
+<table class="standard-table">
+ <caption>Символи розриву рядка</caption>
+ <thead>
+  <tr>
+   <th>Код символа</th>
+   <th>Назва</th>
+   <th>Скорочення</th>
+   <th>Опис</th>
+   <th>Екранована послідовність</th>
+  </tr>
+ </thead>
+ <thead>
+ </thead>
+ <tbody>
+  <tr>
+   <td>U+000A</td>
+   <td>Зміна рядка<br>
+    (Line Feed)</td>
+   <td>&lt;LF&gt;</td>
+   <td>Символ нового рядка в системах UNIX.</td>
+   <td>\n</td>
+  </tr>
+  <tr>
+   <td>U+000D</td>
+   <td>Повернення каретки<br>
+    (Carriage Return)</td>
+   <td>&lt;CR&gt;</td>
+   <td>Символ нового рядка у Commodore та ранній системі Mac.</td>
+   <td>\r</td>
+  </tr>
+  <tr>
+   <td>U+2028</td>
+   <td>Роздільник рядків<br>
+    (Line Separator)</td>
+   <td>&lt;LS&gt;</td>
+   <td><a href="https://uk.wikipedia.org/wiki/%D0%A1%D0%B8%D0%BC%D0%B2%D0%BE%D0%BB_%D0%BD%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D1%80%D1%8F%D0%B4%D0%BA%D0%B0">Вікіпедія</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>U+2029</td>
+   <td>Роздільник абзаців<br>
+    (Paragraph Separator)</td>
+   <td>&lt;PS&gt;</td>
+   <td><a href="https://uk.wikipedia.org/wiki/%D0%A1%D0%B8%D0%BC%D0%B2%D0%BE%D0%BB_%D0%BD%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D1%80%D1%8F%D0%B4%D0%BA%D0%B0">Вікіпедія</a></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Коментарі">Коментарі</h2>
+
+<p>Коментарі використовуються для додавання приміток, зауваг, пропозицій чи застережень до коду JavaScript. Це робить код легшим для читання та розуміння. Їх також можна використовувати для відключення коду, щоб запобігти його виконанню; це може бути цінним інструментом відлагодження.</p>
+
+<p>JavaScript має два давніх способи додавання коментарів у код.</p>
+
+<p>Перший - це коментарі <code>//</code><strong>;</strong> він перетворює весь текст, що розташований за ним, на коментар. Наприклад:</p>
+
+<pre class="brush: js notranslate">function comment() {
+  // Це однорядковий коментар JavaScript
+  console.log('Всім привіт!');
+}
+comment();
+</pre>
+
+<p>Другий спосіб - це стиль <code>/* */</code>, він набагато гнучкіший.</p>
+
+<p>Наприклад, ви можете використати його на одному єдиному рядку:</p>
+
+<pre class="brush: js notranslate">function comment() {
+  /* Це однорядковий коментар JavaScript */
+  console.log('Всім привіт!');
+}
+comment();</pre>
+
+<p>Ви також можете створювати багаторядкові коментарі, ось так:</p>
+
+<pre class="brush: js notranslate">function comment() {
+  /* Цей коментар містить декілька рядків. Зауважте,
+     що коментар не потрібно завершувати, поки ми не закінчили. */
+  console.log('Всім привіт!');
+}
+comment();</pre>
+
+<p>Ви також можете за бажанням використати його всередині рядка, хоча це може зробити ваш код важчим для читання, тому його варто використовувати з обережністю:</p>
+
+<pre class="brush: js notranslate">function comment(x) {
+  console.log('Всім ' + x /* вставити значення x */ + ' !');
+}
+comment('привіт');</pre>
+
+<p>На додачу, ви можете відключити код, щоб уникнути його виконання, огорнувши код ось так:</p>
+
+<pre class="brush: js notranslate">function comment() {
+  /* console.log('Всім привіт!'); */
+}
+comment();</pre>
+
+<p>У цьому випадку виклик <code>console.log()</code> не виконується, оскільки знаходиться всередині коментаря. Таким чином можна відключити будь-яку кількість рядків коду.</p>
+
+<h2 id="Коментарі_шебанг">Коментарі шебанг</h2>
+
+<p>Спеціалізований третій синтаксис коментарів, <strong>коментар шебанг</strong>, знаходиться в процесі стандартизації у ECMAScript (дивіться <a href="https://github.com/tc39/proposal-hashbang">Hashbang Grammar proposal</a>).</p>
+
+<p>Коментар шебанг поводиться так само, як однорядковий коментар (<code>//</code>). Але він починається з позначки <code>#!</code> та <strong>дозволений лише на самому початку тексту скрипта</strong>. Також зауважте, що перед позначкою <code>#!</code> не можна ставити жодних пробільних знаків. Коментар складається з усіх символів, що стоять після <code>#!</code> до самого кінця першого рядка; дозволений лише один такий коментар.</p>
+
+<p>Коментар шебанг визначає шлях до специфічного інтерпретатора JavaScript, який ви бажаєте використати для виконання скрипта. Приклад виглядає наступним чином:</p>
+
+<pre class="brush: js notranslate">#!/usr/bin/env node
+
+console.log("Всім привіт");
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Заувага</strong>: Коментарі шебанг у JavaScript імітують <a href="https://uk.wikipedia.org/wiki/%D0%A8%D0%B5%D0%B1%D0%B0%D0%BD%D0%B3_(Unix)">шебанги в Unix</a>, що використовуються для запуску файлів з відповідним інтерпретатором.</p>
+</div>
+
+<div class="blockIndicator warning">
+<p>Хоча символ <a href="https://uk.wikipedia.org/wiki/%D0%9C%D0%B0%D1%80%D0%BA%D0%B5%D1%80_%D0%BF%D0%BE%D1%80%D1%8F%D0%B4%D0%BA%D1%83_%D0%B1%D0%B0%D0%B9%D1%82%D1%96%D0%B2">BOM</a> перед коментарем шебанг працює у переглядачі, його не радять використовувати у скрипті з шебангом. BOM не працюватиме, якщо ви намагаєтесь виконати скрипт у Unix/Linux. Тому використовуйте UTF-8 без символа BOM, якщо ви хочете виконувати скрипти безпосередньо з оболонки.</p>
+</div>
+
+<p>Стиль коментарів <code>#!</code> має використовуватись тільки для того, щоб вказати інтерпретатор JavaScript. У всіх інших випадках просто ставте коментар <code>//</code> (чи багаторядковий коментар).</p>
+
+<h2 id="Ключові_слова">Ключові слова</h2>
+
+<h3 id="Зарезервовані_ключові_слова_у_ECMAScript_2015">Зарезервовані ключові слова у ECMAScript 2015</h3>
+
+<ul class="threecolumns">
+ <li>{{jsxref("Statements/break", "break")}}</li>
+ <li>{{jsxref("Statements/switch", "case")}}</li>
+ <li>{{jsxref("Statements/try...catch", "catch")}}</li>
+ <li>{{jsxref("Statements/class", "class")}}</li>
+ <li>{{jsxref("Statements/const", "const")}}</li>
+ <li>{{jsxref("Statements/continue", "continue")}}</li>
+ <li>{{jsxref("Statements/debugger", "debugger")}}</li>
+ <li>{{jsxref("Statements/default", "default")}}</li>
+ <li>{{jsxref("Operators/delete", "delete")}}</li>
+ <li>{{jsxref("Statements/do...while", "do")}}</li>
+ <li>{{jsxref("Statements/if...else", "else")}}</li>
+ <li>{{jsxref("Statements/export", "export")}}</li>
+ <li>{{jsxref("Statements/class", "extends")}}</li>
+ <li>{{jsxref("Statements/try...catch", "finally")}}</li>
+ <li>{{jsxref("Statements/for", "for")}}</li>
+ <li>{{jsxref("Statements/function", "function")}}</li>
+ <li>{{jsxref("Statements/if...else", "if")}}</li>
+ <li>{{jsxref("Statements/import", "import")}}</li>
+ <li>{{jsxref("Operators/in", "in")}}</li>
+ <li>{{jsxref("Operators/instanceof", "instanceof")}}</li>
+ <li>{{jsxref("Operators/new", "new")}}</li>
+ <li>{{jsxref("Statements/return", "return")}}</li>
+ <li>{{jsxref("Operators/super", "super")}}</li>
+ <li>{{jsxref("Statements/switch", "switch")}}</li>
+ <li>{{jsxref("Operators/this", "this")}}</li>
+ <li>{{jsxref("Statements/throw", "throw")}}</li>
+ <li>{{jsxref("Statements/try...catch", "try")}}</li>
+ <li>{{jsxref("Operators/typeof", "typeof")}}</li>
+ <li>{{jsxref("Statements/var", "var")}}</li>
+ <li>{{jsxref("Operators/void", "void")}}</li>
+ <li>{{jsxref("Statements/while", "while")}}</li>
+ <li>{{jsxref("Statements/with", "with")}}</li>
+ <li>{{jsxref("Operators/yield", "yield")}}</li>
+</ul>
+
+<h3 id="Ключові_слова_зарезервовані_на_майбутнє">Ключові слова, зарезервовані на майбутнє</h3>
+
+<p>Наступні слова зарезервовані як ключові слова специфікацією ECMAScript. Наразі вони не мають спеціальної функціональності, але невдовзі, можливо, матимуть, тому їх не можна використовувати в якості ідентифікаторів.</p>
+
+<p>Наступні слова завжди зарезервовані:</p>
+
+<ul>
+ <li><code>enum</code></li>
+</ul>
+
+<p>Наступні слова є зарезервованими лише у строгому режимі:</p>
+
+<ul class="threecolumns">
+ <li><code>implements</code></li>
+ <li><code>interface</code></li>
+ <li>{{jsxref("Statements/let", "let")}}</li>
+ <li><code>package</code></li>
+ <li><code>private</code></li>
+ <li><code>protected</code></li>
+ <li><code>public</code></li>
+ <li><code>static</code></li>
+</ul>
+
+<p>Наступні є зарезервованими лише у коді модулів:</p>
+
+<ul>
+ <li><code>await</code></li>
+</ul>
+
+<h4 id="Ключові_слова_зарезервовані_на_майбутнє_у_старших_стандартах">Ключові слова, зарезервовані на майбутнє у старших стандартах</h4>
+
+<p>Далі наведено ключові слова, зарезервовані на майбутнє старшими специфікаціями ECMAScript (ECMAScript від 1 до 3).</p>
+
+<ul class="threecolumns">
+ <li><code>abstract</code></li>
+ <li><code>boolean</code></li>
+ <li><code>byte</code></li>
+ <li><code>char</code></li>
+ <li><code>double</code></li>
+ <li><code>final</code></li>
+ <li><code>float</code></li>
+ <li><code>goto</code></li>
+ <li><code>int</code></li>
+ <li><code>long</code></li>
+ <li><code>native</code></li>
+ <li><code>short</code></li>
+ <li><code>synchronized</code></li>
+ <li><code>throws</code></li>
+ <li><code>transient</code></li>
+ <li><code>volatile</code></li>
+</ul>
+
+<p>Крім того, літерали <code>null</code>, <code>true</code> та <code>false</code> не можна використовувати в якості ідентифікаторів у ECMAScript.</p>
+
+<h3 id="Використання_зарезервованого_слова">Використання зарезервованого слова</h3>
+
+<p>Зарезервовані слова, насправді, стосуються лише <em>ідентифікаторів</em> (на противагу<em> іменам ідентифікаторів</em>). Як описано у <a href="http://es5.github.com/#A.1">es5.github.com/#A.1</a>, це усі <em>імена ідентифікаторів</em>, які не включають <em>зарезервовані слова</em>.</p>
+
+<pre class="brush: js notranslate">a.import
+a['import']
+a = { import: 'test' }.
+</pre>
+
+<p>З іншого боку, наступний код є некоректним, тому що це <em>ідентифікатор</em>, ними є <em>імена ідентифікаторів</em> без зарезервованих слів. Ідентифікатори використовуються для <em>оголошення функцій</em>, <em>функціональних виразів</em>,<em> оголошення змінних</em> і т.д. <em>Імена ідентифікаторів</em> використовуються для<em> виразу елемента (MemberExpression)</em>,<em> виразу виклику (CallExpression)</em> і т.д.</p>
+
+<pre class="brush: js notranslate">function import() {} // некоректно.</pre>
+
+<h3 id="Ідентифікатори_зі_спеціальними_значеннями">Ідентифікатори зі спеціальними значеннями</h3>
+
+<p>Декілька ідентифікаторів мають спеціальні значення у певному контексті, не будучи ключовими словами жодного виду. Ними є:</p>
+
+<ul class="threecolumns">
+ <li>{{jsxref("Functions/arguments", "arguments")}}</li>
+ <li>{{jsxref("Functions/get", "get")}}</li>
+ <li>{{jsxref("Functions/set", "set")}}</li>
+</ul>
+
+<h2 id="Літерали">Літерали</h2>
+
+<h3 id="Літерал_null">Літерал null</h3>
+
+<p>Додаткову інформацію дивіться також у {{jsxref("null")}}.</p>
+
+<pre class="brush: js notranslate">null</pre>
+
+<h3 id="Булевий_літерал">Булевий літерал</h3>
+
+<p>Дивіться також додаткову інформацію у {{jsxref("Boolean")}}.</p>
+
+<pre class="brush: js notranslate">true
+false</pre>
+
+<h3 id="Числові_літерали">Числові літерали</h3>
+
+<p>Типи {{jsxref("Число","Number")}} та {{jsxref("BigInt")}} використовують числові літерали.</p>
+
+<h4 id="Десятковий">Десятковий</h4>
+
+<pre class="brush: js notranslate">1234567890
+42
+
+// Будьте обережні при використанні нуля попереду
+0888 // 888 розбирається як десяткове
+0777 // розбирається як вісімкове, 511 у десятковій системі
+</pre>
+
+<p>Зауважте, що десяткові літерали можуть починатися з нуля (<code>0</code>), за яким іде інша десяткова цифра, але, якщо усі цифри після <code>0</code> менші за 8, число інтерпретується як вісімкове. Це не спричинить викидання помилки у JavaScript, дивіться <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=957513">помилку 957513</a>. Також дивіться статтю щодо {{jsxref("parseInt", "parseInt()")}}</p>
+
+<h5 id="Експоненціальний">Експоненціальний</h5>
+
+<p>Десятковий експоненціальний літерал позначається наступним форматом: <code>beN</code>; де <code>b</code> - мантиса (число, ціле чи з рухомою комою), далі символ <code>e</code> (який слугує роздільником, або <em>експоненціальним показником</em>) та<em> </em><code>N</code>, яке вказує <em>порядок</em> – ціле число зі знаком (згідно з 2019 ECMA-262): </p>
+
+<pre class="brush: js notranslate">0e-5   // =&gt; 0
+0e+5   // =&gt; 0
+5e1    // =&gt; 50
+175e-2 // =&gt; 1.75
+1e3    // =&gt; 1000
+1e-3   // =&gt; 0.001
+</pre>
+
+<h4 id="Двійковий">Двійковий</h4>
+
+<p>Синтаксис двійкових чисел використовує нуль на початку, за яким іде латинська літера "B", маленька чи велика (<code>0b</code> або <code>0B</code>). Оскільки цей синтаксис новий у ECMAScript 2015, дивіться таблицю сумісності з веб-переглядачами, наведену нижче. Якщо цифри після <code>0b</code> не є 0 чи 1, викидається наступна помилка {{jsxref("SyntaxError")}}: "Missing binary digits after 0b".</p>
+
+<pre class="brush: js notranslate">var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
+var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
+var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre>
+
+<h4 id="Вісімковий">Вісімковий</h4>
+
+<p>Синтаксис вісімкових чисел використовує нуль на початку, за яким іде латинська літера "O", маленька чи велика (<code>0o</code> або <code>0O)</code>. Оскільки цей синтаксис новий у ECMAScript 2015, дивіться таблицю сумісності з веб-переглядачами, наведену нижче. Якщо цифри після <code>0o</code> виходять за межі діапазону (01234567), викидається наступна помилка {{jsxref("SyntaxError")}}: "Missing octal digits after 0o".</p>
+
+<pre class="brush: js notranslate">var n = 0O755; // 493
+var m = 0o644; // 420
+
+// Також можна просто через нуль на початку
+// (дивіться заувагу щодо десяткових чисел вище)
+0755
+0644
+</pre>
+
+<h4 id="Шістнадцятковий">Шістнадцятковий</h4>
+
+<p>Синтаксис шістнадцяткових чисел використовує нуль на початку, за яким іде латинська літера "X", велика чи маленька (<code>0x</code> або <code>0X</code>). Якщо цифри після 0x виходять за межі діапазону (0123456789ABCDEF), викидається наступна помилка {{jsxref("SyntaxError")}}: "Identifier starts immediately after numeric literal".</p>
+
+<pre class="brush: js notranslate">0xFFFFFFFFFFFFFFFFF // 295147905179352830000
+0x123456789ABCDEF   // 81985529216486900
+0XA                 // 10
+</pre>
+
+<h4 id="Літерал_BigInt">Літерал BigInt</h4>
+
+<p>Тип {{jsxref("BigInt")}} є числовим простим типом у JavaScript, який може представляти цілі числа з довільною точністю. Літерали BigInt створюються додаванням <code>n</code> в кінець цілого числа.</p>
+
+<pre class="brush: js notranslate">123456789123456789n     // 123456789123456789
+0o777777777777n         // 68719476735
+0x123456789ABCDEFn      // 81985529216486895‬
+0b11101001010101010101n // 955733
+</pre>
+
+<p>Зауважте, що старі вісімкові числа з просто нулем на початку не працюватимуть з <code>BigInt</code>:</p>
+
+<pre class="brush: js example-bad notranslate">// 0755n
+// SyntaxError: invalid BigInt syntax</pre>
+
+<p>Для вісімкових чисел <code>BigInt</code> завжди використовуйте нуль з літерою "o" (великою чи маленькою):</p>
+
+<pre class="brush: js example-good notranslate">0o755n</pre>
+
+<p>Більше інформації щодо <code>BigInt</code> дивіться у статті <a href="/uk/docs/Web/JavaScript/Data_structures#Тип_BigInt">Структури даних JavaScript</a>.</p>
+
+<h4 id="Числові_роздільники">Числові роздільники</h4>
+
+<p>Щоб покращити читабельність числових літералів, можна використовувати підкреслення (<code>_</code>, <code>U+005F</code>) в якості роздільників:</p>
+
+<pre class="brush: js notranslate">// роздільники у десяткових числах
+1_000_000_000_000
+1_050.95
+
+// роздільники у двійкових числах
+0b1010_0001_1000_0101
+
+// роздільники у вісімкових числах
+0o2_2_5_6
+
+// роздільники у шістнадцяткових числах
+0xA0_B0_C0
+
+// роздільники у BigInt
+1_000_000_000_000_000_000_000n
+</pre>
+
+<p>Зверніть увагу на ці обмеження:</p>
+
+<pre class="brush: js example-bad notranslate">// Не можна ставити більше одного підкреслення підряд
+100__000; // SyntaxError
+
+// Не можна ставити в кінці числового літерала
+100_; // SyntaxError
+
+// Не можна використовувати після нуля на початку 0
+0_1; // SyntaxError
+</pre>
+
+<h3 id="Обєктні_літерали">Об'єктні літерали</h3>
+
+<p>Більше інформації дивіться також на сторінках {{jsxref("Object")}} та <a href="/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів">Ініціалізатор об'єкта</a>.</p>
+
+<pre class="brush: js notranslate">var o = { a: 'foo', b: 'bar', c: 42 };
+
+// скорочений запис. Нове у ES2015
+var a = 'foo', b = 'bar', c = 42;
+var o = {a, b, c};
+
+// замість
+var o = { a: a, b: b, c: c };
+</pre>
+
+<h3 id="Масивні_літерали">Масивні літерали</h3>
+
+<p>Більше інформації дивіться також у {{jsxref("Array")}}.</p>
+
+<pre class="brush: js notranslate">[1954, 1974, 1990, 2014]</pre>
+
+<h3 id="Рядкові_літерали">Рядкові літерали</h3>
+
+<p>Рядковий літерал - це нуль чи більше кодів символів Юнікоду всередині одинарних або подвійних лапок. Коди символів Юнікоду також можуть бути представлені екранованими послідовностями. Усі коди символів можуть з'являтись безпосередньо у рядковому літералі, окрім цих закриваючих кодів символів:</p>
+
+<ul>
+ <li>U+005C \ (зворотній слеш),</li>
+ <li>U+000D &lt;CR&gt;</li>
+ <li>та U+000A &lt;LF&gt;.</li>
+</ul>
+
+<p>До появи <a href="https://github.com/tc39/proposal-json-superset">пропозиції зробити весь текст формату JSON дозволеним у ECMA-262</a>, неекрановані U+2028 &lt;LS&gt; та U+2029 &lt;PS&gt; також були заборонені у рядкових літералах.</p>
+
+<p>Будь-які коди символів можуть з'являтись у вигляді екранованої послідовності. Рядкові літерали повертають значення ECMAScript String. Під час генерування цих значень String коди символів Юнікоду кодуються форматом UTF-16.</p>
+
+<pre class="brush: js notranslate">'foo'
+"bar"</pre>
+
+<h4 id="Шістнадцяткові_екрановані_послідовності">Шістнадцяткові екрановані послідовності</h4>
+
+<p>Шістнадцяткові екрановані послідовності складаються з <code>\x</code> та рівно двох шістнадцяткових символів, що відображають кодову одиницю чи код символа у діапазоні від 0x0000 до 0x00FF.</p>
+
+<pre class="brush: js notranslate">'\xA9' // "©"
+</pre>
+
+<h4 id="Екрановані_послідовності_Юнікоду">Екрановані послідовності Юнікоду</h4>
+
+<p>Екранована послідовність Юнікоду складається рівно з чотирьох шістнадцяткових символів, записаних після <code>\u</code>. Вона відображає кодову одиницю у кодуванні UTF-16. Для кодів символів від U+0000 до U+FFFF кодова одиниця дорівнює коду символа. Коди символів від U+10000 до U+10FFFF потребують двох екранованих послідовностей, які відображають дві кодові одиниці (сурогатну пару), що використовуються для кодування символа; сурогатна пара відрізняється від коду символа.</p>
+
+<p>Дивіться також {{jsxref("String.fromCharCode()")}} та {{jsxref("String.prototype.charCodeAt()")}}.</p>
+
+<pre class="brush: js notranslate">'\u00A9' // "©" (U+A9)</pre>
+
+<h4 id="Екранування_кодів_символів_Юнікоду">Екранування кодів символів Юнікоду</h4>
+
+<p>Екранування коду символа Юнікоду складається з <code>\u{</code>, далі код символа у шістнадцятковому форматі, за ним <code>}</code>. Значення шістнадцяткових символів має знаходитись в діапазоні між 0 та 0x10FFFF включно. Коди символів у діапазоні від U+10000 до U+10FFFF не потребують представлення у вигляді сурогатної пари. Екранування кодів символів було додане у JavaScript у ECMAScript 2015 (ES6).</p>
+
+<p>Дивіться також {{jsxref("String.fromCodePoint()")}} та {{jsxref("String.prototype.codePointAt()")}}.</p>
+
+<pre class="brush: js notranslate">'\u{2F804}' // CJK COMPATIBILITY IDEOGRAPH-2F804 (U+2F804)
+
+// той самий символ у вигляді сурогатної пари
+'\uD87E\uDC04'</pre>
+
+<h3 id="Літерал_регулярного_виразу">Літерал регулярного виразу</h3>
+
+<p>Більше інформації дивіться також у {{jsxref("RegExp")}}.</p>
+
+<pre class="brush: js notranslate">/ab+c/g
+
+// Літерал "порожнього" регулярного виразу
+// Порожня група необхідна,
+// щоб уникнути неоднозначності щодо однорядкових коментарів.
+/(?:)/</pre>
+
+<h3 id="Шаблонні_літерали">Шаблонні літерали</h3>
+
+<p>Дивіться також <a href="/uk/docs/Web/JavaScript/Reference/Template_literals">шаблонні рядки</a>.</p>
+
+<pre class="brush: js notranslate">`текстовий рядок`
+
+`текстовий рядок 1
+ текстовий рядок 2`
+
+`текст ${вираз} текст`
+
+тег `текст ${вираз} текст`</pre>
+
+<h2 id="Автоматична_вставка_крапки_з_комою">Автоматична вставка крапки з комою</h2>
+
+<p>Деякі <a href="/uk/docs/Web/JavaScript/Reference/Statements">інструкції JavaScript</a> повинні завершуватись крапкою з комою, і тому підпадають під автоматичну вставку крапки з комою (ASI, automatic semicolon insertion):</p>
+
+<ul>
+ <li>Порожній оператор</li>
+ <li><code>let</code>, <code>const</code>, інструкція змінної</li>
+ <li><code>import</code>, <code>export</code>, оголошення модуля</li>
+ <li>Інструкція виразу</li>
+ <li><code>debugger</code></li>
+ <li><code>continue</code>, <code>break</code>, <code>throw</code></li>
+ <li><code>return</code></li>
+</ul>
+
+<p>Специфікація ECMAScript визначає <a href="https://tc39.github.io/ecma262/#sec-rules-of-automatic-semicolon-insertion">три правила вставки крапки з комою</a>.</p>
+
+<p>1. Крапка з комою вставляється перед, коли <a href="#Символи_розриву_рядка">символ розриву рядка</a> чи "}" вважається таким, що недозволений за синтаксисом.</p>
+
+<pre class="brush: js notranslate">{ 1 2 } 3
+
+// перетворюється на
+
+{ 1 2 ;} 3;</pre>
+
+<p>2. Крапка з комою вставляється в кінці, коли виявлено кінець вхідного набору токенів, але синтаксичний аналізатор неспроможний розібрати єдиний вхідний набір як завершену програму.</p>
+
+<p>Тут <code>++</code> не сприймається як <a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">постфіксний оператор</a>, що застосовується до змінної <code>b</code>, тому що між <code>b</code> та <code>++</code> знаходиться символ розриву рядка.</p>
+
+<pre class="brush: js notranslate">a = b
+++c
+
+// перетворюється на
+
+a = b;
+++c;
+</pre>
+
+<p>3. Крапка з комою вставляється в кінці, коли інструкція з обмеженими граматичними застосуваннями супроводжується символом розриву рядка. Ці інструкції з правилом "жодних розривів рядка в цьому місці" наступні:</p>
+
+<ul>
+ <li>Постфіксні вирази (<code>++</code> та <code>--</code>)</li>
+ <li><code>continue</code></li>
+ <li><code>break</code></li>
+ <li><code>return</code></li>
+ <li><code>yield</code>, <code>yield*</code></li>
+ <li><code>module</code></li>
+</ul>
+
+<pre class="brush: js notranslate">return
+a + b
+
+// перетворюється на
+
+return;
+a + b;
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-ecmascript-language-lexical-grammar', 'Lexical Grammar')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.grammar")}}</p>
+
+<h3 id="Хід_реалізації">Хід реалізації</h3>
+
+<p>Наведена нижче таблиця надає щоденний статус реалізації цієї функціональності, оскільки функціональність ще не досягла кросбраузерної стабільності. Дані генеруються запуском відповідних тестів функціональності у <a href="https://github.com/tc39/test262">Test262</a>, стандартному тестовому наборі JavaScript, на нічній збірці чи на останньому релізі рушія JavaScript кожного веб-переглядача.</p>
+
+<div>{{EmbedTest262ReportResultsTable("hashbang")}}</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="http://whereswalden.com/2013/08/12/micro-feature-from-es6-now-in-firefox-aurora-and-nightly-binary-and-octal-numbers/">Jeff Walden: Двійкові та вісімкові числа</a></li>
+ <li><a href="http://mathiasbynens.be/notes/javascript-escapes">Mathias Bynens: екрановані послідовності символів JavaScript</a></li>
+ <li>{{jsxref("Boolean")}}</li>
+ <li>{{jsxref("Число", "Number")}}</li>
+ <li>{{jsxref("RegExp")}}</li>
+ <li>{{jsxref("String")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/addition/index.html b/files/uk/web/javascript/reference/operators/addition/index.html
new file mode 100644
index 0000000000..92f1e1c48f
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/addition/index.html
@@ -0,0 +1,81 @@
+---
+title: Додавання (+)
+slug: Web/JavaScript/Reference/Operators/Addition
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Addition
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор додавання (<code>+</code>) повертає суму числових операндів або об'єднання рядків.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-addition.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><strong>Оператор:</strong> <var>x</var> + <var>y</var>
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Додавання_чисел">Додавання чисел</h3>
+
+<pre class="brush: js notranslate">// Number + Number -&gt; додавання
+1 + 2 // 3
+
+// Boolean + Number -&gt; додавання
+true + 1 // 2
+
+// Boolean + Boolean -&gt; додавання
+false + false // 0
+</pre>
+
+<h3 id="Обєднання_рядків">Об'єднання рядків</h3>
+
+<pre class="brush: js notranslate">// String + String -&gt; об'єднання
+'бал' + 'кон' // "балкон"
+
+// Number + String -&gt; об'єднання
+5 + 'кон' // "5кон"
+
+// String + Boolean -&gt; об'єднання
+'бал' + false // "балfalse"</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-addition-operator-plus', 'Addition operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.addition")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Subtraction">Оператор віднімання</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Division">Оператор ділення</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Multiplication">Оператор множення</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Remainder">Оператор остачі</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Exponentiation">Оператор піднесення до степеня</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Increment">Оператор інкременту</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Decrement">Оператор декременту</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_negation">Унарний мінус</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_plus">Унарний плюс</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/addition_assignment/index.html b/files/uk/web/javascript/reference/operators/addition_assignment/index.html
new file mode 100644
index 0000000000..2b5431a652
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/addition_assignment/index.html
@@ -0,0 +1,77 @@
+---
+title: Присвоєння з додаванням (+=)
+slug: Web/JavaScript/Reference/Operators/Addition_assignment
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+  - Оператор присвоєння
+translation_of: Web/JavaScript/Reference/Operators/Addition_assignment
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор присвоєння з додаванням (<code>+=</code>) додає значення правого операнда до змінної та присвоює результат цій змінній. Типи двох операндів визначають поведінку оператора присвоєння з додаванням. Можливе або додавання, або об'єднання.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-addition-assignment.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x += y
+<strong>Значення:</strong>  x  = x + y</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_додавання_з_присвоєнням">Використання додавання з присвоєнням</h3>
+
+<pre class="brush: js notranslate">// Розглянемо такі змінні
+//  foo = 'foo'
+//  bar = 5
+//  baz = true
+
+// Число + Число -&gt; додавання
+bar += 2 // 7
+
+// Булеве значення + Число -&gt; додавання
+baz += 1 // 2
+
+// Булеве значення + Булеве значення -&gt; додавання
+baz += false // 1
+
+// Число + Рядок -&gt; об'єднання
+bar += 'foo' // "5foo"
+
+// Рядок + Булеве значення -&gt; об'єднання
+foo += false // "foofalse"
+
+// Рядок + Рядок -&gt; об'єднання
+foo += 'bar' // "foobar"</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.addition_assignment")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Вирази_та_оператори#Оператори_присвоєння">Оператори присвоєння у посібнику JS</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Addition">Оператор додавання</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/arithmetic_operators/index.html b/files/uk/web/javascript/reference/operators/arithmetic_operators/index.html
new file mode 100644
index 0000000000..6adc641eb6
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/arithmetic_operators/index.html
@@ -0,0 +1,313 @@
+---
+title: Арифметичні оператори
+slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators
+tags:
+  - JavaScript
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Арифметичні оператори</strong> приймають числові значення (або літерали, або змінні) в якості операндів та повертають єдине числове значення. Стандартними арифметичними операторами є додавання (+), віднімання (-), множення (*) та ділення (/).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}</div>
+
+
+
+<h2 id="Addition" name="Addition">Додавання (+)</h2>
+
+<p>Оператор додавання повертає суму числових операндів або об'єднання рядків.</p>
+
+<h3 id="Синтаксис">Синтаксис</h3>
+
+<pre class="syntaxbox"><strong>Оператор:</strong> x + y
+</pre>
+
+<h3 id="Приклади">Приклади</h3>
+
+<pre class="brush: js">// Number + Number -&gt; сума
+1 + 2 // 3
+
+// Boolean + Number -&gt; сума
+true + 1 // 2
+
+// Boolean + Boolean -&gt; сума
+false + false // 0
+
+// Number + String -&gt; об'єднання
+5 + 'foo' // "5foo"
+
+// String + Boolean -&gt; об'єднання
+'foo' + false // "foofalse"
+
+// String + String -&gt; об'єднання
+'foo' + 'bar' // "foobar"
+</pre>
+
+<h2 id="Subtraction" name="Subtraction">Віднімання (-)</h2>
+
+<p>Оператор віднімання проводить операцію віднімання між двома операндами, повертаючи різницю між ними.</p>
+
+<h3 id="Синтаксис_2">Синтаксис</h3>
+
+<pre class="syntaxbox"><strong>Оператор:</strong> x - y
+</pre>
+
+<h3 id="Приклади_2">Приклади</h3>
+
+<pre class="brush: js">5 - 3 // 2
+3 - 5 // -2
+'foo' - 3 // NaN</pre>
+
+<h2 id="Division" name="Division">Ділення (/)</h2>
+
+<p>Оператор ділення повертає частку своїх операндів, де лівий операнд є діленим, а правий операнд є дільником.</p>
+
+<h3 id="Синтаксис_3">Синтаксис</h3>
+
+<pre class="syntaxbox"><strong>Оператор:</strong> x / y
+</pre>
+
+<h3 id="Приклади_3">Приклади</h3>
+
+<pre class="brush: js">1 / 2      // повертає 0.5 у JavaScript
+1 / 2      // повертає 0 у Java
+// (жодне з чисел не є явно числом з рухомою комою)
+
+1.0 / 2.0  // повертає 0.5 у JavaScript та Java
+
+2.0 / 0    // повертає Infinity у JavaScript
+2.0 / 0.0  // також повертає Infinity
+2.0 / -0.0 // повертає -Infinity у JavaScript</pre>
+
+<h2 id="Multiplication" name="Multiplication">Множення (*)</h2>
+
+<p>Оператор множення повертає добуток операндів.</p>
+
+<h3 id="Синтаксис_4">Синтаксис</h3>
+
+<pre class="syntaxbox"><strong>Оператор:</strong> x * y
+</pre>
+
+<h3 id="Приклади_4">Приклади</h3>
+
+<pre class="brush: js">2 * 2 // 4
+-2 * 2 // -4
+Infinity * 0 // NaN
+Infinity * Infinity // Infinity
+'foo' * 2 // NaN
+</pre>
+
+<h2 id="Remainder" name="Remainder">Остача (%)</h2>
+
+<p>Оператор остачі повертає остачу від ділення першого операнду на другий. Він завжди приймає знак діленого.</p>
+
+<h3 id="Синтаксис_5">Синтаксис</h3>
+
+<pre class="syntaxbox"><strong>Оператор:</strong> var1 % var2
+</pre>
+
+<h3 id="Приклади_5">Приклади</h3>
+
+<pre class="brush: js">12 % 5 // 2
+-1 % 2 // -1
+1 % -2 // 1
+NaN % 2 // NaN
+1 % 2 // 1
+2 % 3 // 2
+-4 % 2 // -0
+5.5 % 2 // 1.5
+</pre>
+
+<h2 id="Exponentiation" name="Exponentiation">Піднесення до степеня (**)</h2>
+
+<p>Оператор піднесення до степеня повертає результат піднесення першого операнду до показника степеня другого операнду. Тобто, <code>var1</code><sup><code>var2</code></sup> у наведеній інструкції, де <code>var1</code> та <code>var2</code> є змінними. Оператор піднесення до степеня правоасоціативний. <code>a ** b ** c</code> дорівнює <code>a ** (b ** c)</code>.</p>
+
+<h3 id="Синтаксис_6">Синтаксис</h3>
+
+<pre class="syntaxbox"><strong>Оператор:</strong> var1 ** var2
+</pre>
+
+<h3 id="Примітки">Примітки</h3>
+
+<p>У більшості мов, таких як PHP, Python та інших, які мають оператор піднесення до степеня (**), оператор піднесення до степеня має вищий пріоритет, ніж унарні оператори, такі як унарний + та унарний -, але існує кілька винятків. Наприклад, у Bash оператор ** має нижчий пріоритет, ніж унарні оператори. У JavaScript неможливо написати неоднозначний вираз піднесення до степеня, тобто, ви не можете поставити унарний оператор (<code>+/-/~/!/delete/void/typeof</code>) одразу перед числом основи степеня.</p>
+
+<pre class="brush: js">-2 ** 2;
+// 4 у Bash, -4 у інших мовах.
+// Це помилка у JavaScript, оскільки операція неоднозначна.
+
+
+-(2 ** 2);
+// -4 у JavaScript, а наміри автора однозначні.
+</pre>
+
+<h3 id="Приклади_6">Приклади</h3>
+
+<pre class="brush: js">2 ** 3 // 8
+3 ** 2 // 9
+3 ** 2.5 // 15.588457268119896
+10 ** -1 // 0.1
+NaN ** 2 // NaN
+
+2 ** 3 ** 2 // 512
+2 ** (3 ** 2) // 512
+(2 ** 3) ** 2 // 64
+</pre>
+
+<p>Щоб поміняти знак результату виразу піднесення до степеня:</p>
+
+<pre class="brush: js">-(2 ** 2) // -4
+</pre>
+
+<p>Щоб зробити основу степеня у виразі від'ємним числом:</p>
+
+<pre class="brush: js">(-2) ** 2 // 4
+</pre>
+
+<div class="note">
+<p><strong>Заувага:</strong> JavaScript також має <a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">бітовий оператор ^ (логічний XOR)</a>. <code>**</code> та <code>^</code> відрізняються (наприклад: <code>2 ** 3 === 8</code>, тоді як <code>2 ^ 3 === 1</code>.)</p>
+</div>
+
+<h2 id="Increment" name="Increment">Інкремент (++)</h2>
+
+<p>Оператор інкременту збільшує свій операнд (додає одиницю) та повертає його значення.</p>
+
+<ul>
+ <li>Якщо оператор використовується постфіксно, після операнду (наприклад, x++), тоді він збільшує значення та повертає його до збільшення.</li>
+ <li>Якщо оператор використовується префіксно, перед операндом (наприклад, ++x), тоді він збільшує значення та повертає його після збільшення.</li>
+</ul>
+
+<h3 id="Синтаксис_7">Синтаксис</h3>
+
+<pre class="syntaxbox"><strong>Оператор:</strong> x++ або ++x
+</pre>
+
+<h3 id="Приклади_7">Приклади</h3>
+
+<pre class="brush: js">// Постфіксний
+var x = 3;
+y = x++; // y = 3, x = 4
+
+// Префіксний
+var a = 2;
+b = ++a; // a = 3, b = 3
+</pre>
+
+<h2 id="Decrement" name="Decrement">Декремент (--)</h2>
+
+<p>Оператор декременту зменшує свій операнд (віднімає одиницю) та повертає його значення.</p>
+
+<ul>
+ <li>Якщо оператор використовується постфіксно, після операнду (наприклад, x--), тоді він зменшує значення та повертає його до зменшення.</li>
+ <li>Якщо оператор використовується префіксно, перед операндом (наприклад, --x), тоді він зменшує значення та повертає його після зменшення.</li>
+</ul>
+
+<h3 id="Синтаксис_8">Синтаксис</h3>
+
+<pre class="syntaxbox"><strong>Оператор:</strong> x-- або --x
+</pre>
+
+<h3 id="Приклади_8">Приклади</h3>
+
+<pre class="brush: js">// Постфіксний
+var x = 3;
+y = x--; // y = 3, x = 2
+
+// Префіксний
+var a = 2;
+b = --a; // a = 1, b = 1
+</pre>
+
+<h2 id="Unary_negation" name="Unary_negation">Унарний мінус (-)</h2>
+
+<p>Унарний мінус ставиться перед своїм операндом та міняє його знак на протилежний.</p>
+
+<h3 id="Синтаксис_9">Синтаксис</h3>
+
+<pre class="syntaxbox"><strong>Оператор:</strong> -x
+</pre>
+
+<h3 id="Приклади_9">Приклади</h3>
+
+<pre class="brush: js">var x = 3;
+y = -x; // y = -3, x = 3
+
+// Унарний мінус може перетворити нечислове значення на число
+var x = "4";
+y = -x; // y = -4
+</pre>
+
+<h2 id="Унарний_плюс"><a id="Unary_plus" name="Unary_plus">Унарний плюс (+)</a></h2>
+
+<p>Унарний плюс ставиться перед своїм операндом та повертає значення операнду, але намагається перетворити його на число, якщо він не є числом. Хоча унарний мінус (-) також вміє перетворювати нечислові значення, унарний плюс найшвидший та найкращий спосіб перетворити щось у число, тому що він не виконує ніяких інших операцій з числом. Він може перетворювати рядкові представлення цілих чисел та чисел з рухомою комою, а також нерядкові значення <code>true</code>, <code>false</code> та <code>null</code>. Підтримуються цілі числа у десятковому та шістнадцятковому форматах. Підтримуються від'ємні числа (хоча не у шістнадцятковому форматі). Якщо оператор не може розібрати певне значення, він поверне {{jsxref("NaN")}}.</p>
+
+<h3 id="Синтаксис_10">Синтаксис</h3>
+
+<pre class="syntaxbox"><strong>Оператор:</strong> +x
+</pre>
+
+<h3 id="Приклади_10">Приклади</h3>
+
+<pre class="brush: js">+3     // 3
++'3'   // 3
++true  // 1
++false // 0
++null  // 0
++function(val){ return val } // NaN
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-additive-operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#sec-postfix-expressions')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td>Доданий <a href="https://github.com/rwaldron/exponentiation-operator">Оператор піднесення до степеня</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2017', '#sec-postfix-expressions')}}</td>
+   <td>{{Spec2('ES2017')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-postfix-expressions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Визначені у кількох розділах специфікації: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-additive-operators">Адитивні оператори</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-multiplicative-operators">мультиплікативні оператори</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-postfix-expressions">постфіксні вирази</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-unary-operators">унарні оператори</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.3')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Визначені у кількох розділах специфікації: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Адитивні оператори</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.5">мультиплікативні оператори</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.3">постфіксні вирази</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4">унарні оператори</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.arithmetic")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Оператори присвоєння</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/array_comprehensions/index.html b/files/uk/web/javascript/reference/operators/array_comprehensions/index.html
new file mode 100644
index 0000000000..ebd2425ae2
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/array_comprehensions/index.html
@@ -0,0 +1,198 @@
+---
+title: Заповнення масивів
+slug: Web/JavaScript/Reference/Operators/Array_comprehensions
+tags:
+  - JavaScript
+  - Оператор
+  - застарілий
+  - нестандартний
+translation_of: Archive/Web/JavaScript/Array_comprehensions
+---
+<div>{{jsSidebar("Operators")}}
+<div class="warning"><strong>Нестандартний. Не використовуйте!</strong><br>
+Синтаксис заповнення масивів є нестандартним та був прибраний, починаючи з Firefox 58. Для варіантів використання в майбутьому розгляньте {{jsxref("Array.prototype.map")}}, {{jsxref("Array.prototype.filter")}}, {{jsxref("Functions/Стрілкові_функції", "стрілкові функції", "", 1)}} та {{jsxref("Operators/Spread_syntax", "оператор розпакування", "", 1)}}.</div>
+{{Obsolete_Header(58)}}</div>
+
+<p>Синтаксис <strong>заповнення масивів</strong> (array comprehension) був виразом JavaScript, який дозволяв швидко збирати новий масив, базуючись на вже існуючому масиві. Однак, він був прибраний зі стандарту та з реалізації Firefox. Не використовуйте його!</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">[for (x of iterable) x]
+[for (x of iterable) if (condition) x]
+[for (x of iterable) for (y of iterable) x + y]
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>У заповненнях масивів дозволені наступні два види компонентів:</p>
+
+<ul>
+ <li>{{jsxref("Statements/for...of", "for...of")}} та</li>
+ <li>{{jsxref("Statements/if...else", "if")}}</li>
+</ul>
+
+<p>Перебір for-of завжди є першим компонентом. Можна використовувати більше одного перебору for-of чи if-конструкцій.</p>
+
+<p>Заповнення масивів були попередньо запропоновані для стандартизації у ECMAScript 2016, вони надають корисне скорочення запису для конструювання нового масиву на основі змісту іншого масиву. Заповнення часто можуть використовуватись замість викликів {{jsxref("Array.prototype.map", "map()")}} та {{jsxref("Array.prototype.filter", "filter()")}}, або як засіб їх об'єднати.</p>
+
+<p>Наступне заповнення бере масив чисел та створює новий масив, де кожне з цих чисел подвоюється.</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3, 4];
+var doubled = [for (i of numbers) i * 2];
+console.log(doubled); // виводить 2,4,6,8
+</pre>
+
+<p>Це еквівалентно наступній операції {{jsxref("Array.prototype.map", "map()")}}:</p>
+
+<pre class="brush: js">var doubled = numbers.map(i =&gt; i * 2);
+</pre>
+
+<p>Заповнення також можуть використовуватись для відбору елементів, які відповідають певному виразу. Ось заповнення, яке обирає лише парні числа:</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3, 21, 22, 30];
+var evens = [for (i of numbers) if (i % 2 === 0) i];
+console.log(evens); // виводить 2,22,30
+</pre>
+
+<p>Метод {{jsxref("Array.prototype.filter", "filter()")}} може використовуватись для тієї ж самої мети:</p>
+
+<pre class="brush: js">var evens = numbers.filter(i =&gt; i % 2 === 0);
+</pre>
+
+<p>Операції з {{jsxref("Array.prototype.map", "map()")}} та {{jsxref("Array.prototype.filter", "filter()")}} можна об'єднати у єдине заповнення масиву. Ось таке, що відфільтровує лише парні числа, а потім створює масив, де вони подвоєні:</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3, 21, 22, 30];
+var doubledEvens = [for (i of numbers) if (i % 2 === 0) i * 2];
+console.log(doubledEvens); // виводить 4,44,60
+</pre>
+
+<p>Квадратні дужки заповнення масиву створюють неявний блок для області видимості. Нові змінні (такі, як i у прикладі) поводяться так, ніби вони були оголошені за допомогою {{jsxref("Statements/let","let")}}. Це означає, що вони не будуть доступні за межами заповнення.</p>
+
+<p>Вхідні дані для заповнення масиву не обов'язково самі мають бути масивом; <a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators" title="en-US/docs/JavaScript/Guide/Iterators and Generators">ітератори та генератори</a> також підійдуть.</p>
+
+<p>Навіть рядки можна використовувати як вхідні дані; щоб виконати наведені вище функції filter та map (на подібних до масиву об'єктах):</p>
+
+<pre class="brush: js">var str = 'abcdef';
+var consonantsOnlyStr = [for (c of str) if (!(/[aeiouAEIOU]/).test(c)) c].join(''); // 'bcdf'
+var interpolatedZeros = [for (c of str) c + '0' ].join(''); // 'a0b0c0d0e0f0'
+</pre>
+
+<p>Знову ж таки, початкова форма не зберігається, тому нам доведеться скористатись методом {{jsxref("Array.prototype.join", "join()")}}, щоб повернутись до рядка.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Прості_заповнення_масивів">Прості заповнення масивів</h3>
+
+<pre class="brush:js">[for (i of [1, 2, 3]) i * i ];
+// [1, 4, 9]
+
+var abc = ['А', 'Б', 'В'];
+[for (letters of abc) letters.toLowerCase()];
+// ["а", "б", "в"]</pre>
+
+<h3 id="Заповнення_масивів_з_оператором_if">Заповнення масивів з оператором if</h3>
+
+<pre class="brush: js">var years = [1954, 1974, 1990, 2006, 2010, 2014];
+[for (year of years) if (year &gt; 2000) year];
+// [2006, 2010, 2014]
+[for (year of years) if (year &gt; 2000) if (year &lt; 2010) year];
+// [2006], те саме, що й нижче:
+[for (year of years) if (year &gt; 2000 &amp;&amp; year &lt; 2010) year];
+// [2006]
+</pre>
+
+<h3 id="Заповнення_масивів_у_порівнянні_з_map_та_filter">Заповнення масивів у порівнянні з <code>map</code> та <code>filter</code></h3>
+
+<p>Легко зрозуміти синтаксис заповнення масивів, порівнявши його з методами масиву {{jsxref("Array.map", "map")}} та {{jsxref("Array.filter", "filter")}}:</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3];
+
+numbers.map(function (i) { return i * i });
+numbers.map(i =&gt; i * i);
+[for (i of numbers) i * i];
+// усі дорівнюють [1, 4, 9]
+
+numbers.filter(function (i) { return i &lt; 3 });
+numbers.filter(i =&gt; i &lt; 3);
+[for (i of numbers) if (i &lt; 3) i];
+// усі дорівнюють [1, 2]
+</pre>
+
+<h3 id="Заповнення_масивів_з_двома_масивами">Заповнення масивів з двома масивами</h3>
+
+<p>Використання двох переборів for-of для роботи з двома масивами:</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3];
+var letters = ['а', 'б', 'в'];
+
+var cross = [for (i of numbers) for (j of letters) i + j];
+// ["1а", "1б", "1в", "2а", "2б", "2в", "3а", "3б", "3в"]
+
+var grid = [for (i of numbers) [for (j of letters) i + j]];
+// [
+//  ["1а", "1б", "1в"],
+//  ["2а", "2б", "2в"],
+//  ["3а", "3б", "3в"]
+// ]
+
+[for (i of numbers) if (i &gt; 1) for (j of letters) if(j &gt; 'а') i + j]
+// ["2б", "2в", "3б", "3в"], те саме, що й наведене нижче:
+
+[for (i of numbers) for (j of letters) if (i &gt; 1) if(j &gt; 'а') i + j]
+// ["2б", "2в", "3б", "3в"]
+
+[for (i of numbers) if (i &gt; 1) [for (j of letters) if(j &gt; 'а') i + j]]
+// [["2б", "2в"], ["3б", "3в"]], не те саме, що наведене нижче:
+
+[for (i of numbers) [for (j of letters) if (i &gt; 1) if(j &gt; 'а') i + j]]
+// [[], ["2б", "2в"], ["3б", "3в"]]
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Початково синтаксис був присутній у чорнетці ECMAScript 2015, але був видалений у ревізії 27 (серпень 2014). Будь ласка, дивіться семантику специфікації у старших ревізіях ES2015.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.array_comprehensions")}}</p>
+
+<h2 id="Відмінності_від_заповнень_у_JS1.7JS1.8">Відмінності від заповнень у JS1.7/JS1.8</h2>
+
+<div class="warning">Заповнення JS1.7/JS1.8 були прибрані з Gecko, починаючи з версії 46 ({{bug(1220564)}}).</div>
+
+<p><strong>Старий синтаксис заповнень (більше не використовується!):</strong></p>
+
+<pre class="brush: js example-bad">[X for (Y in Z)]
+[X for each (Y in Z)]
+[X for (Y of Z)]
+</pre>
+
+<p>Відмінності:</p>
+
+<ul>
+ <li>Заповнення ESNext створюють область видимості для кожного блоку "for", а не для всього заповнення.
+  <ul>
+   <li>Старе: <code>[()=&gt;x for (x of [0, 1, 2])][1]() // 2</code></li>
+   <li>Нове: <code>[for (x of [0, 1, 2]) ()=&gt;x][1]() // 1, кожна ітерація створює свіже зв'язування для x. </code></li>
+  </ul>
+ </li>
+ <li>Заповнення ESNext починаються з "for", а не з виразу присвоювання.
+  <ul>
+   <li>Старе: <code>[i * 2 for (i of numbers)]</code></li>
+   <li>Нове: <code>[for (i of numbers) i * 2]</code></li>
+  </ul>
+ </li>
+ <li>Заповнення ESNext можуть мати декілька компонентів <code>if</code> та <code>for</code>.</li>
+ <li>Заповнення ESNext працюють тільки з переборами <code>{{jsxref("Statements/for...of", "for...of")}}</code>, а не з <code>{{jsxref("Statements/for...in", "for...in")}}</code>.</li>
+</ul>
+
+<p>Дивіться пропозиції щодо змін у коді у <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1220564#c42">Bug 1220564, коментар 42</a>.</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Statements/for...of", "for...of")}}</li>
+ <li>{{jsxref("Operators/Generator_comprehensions", "Заповнення генераторів", "" ,1)}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/assignment/index.html b/files/uk/web/javascript/reference/operators/assignment/index.html
new file mode 100644
index 0000000000..a974d94382
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/assignment/index.html
@@ -0,0 +1,61 @@
+---
+title: Присвоєння (=)
+slug: Web/JavaScript/Reference/Operators/Assignment
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+  - Оператор присвоєння
+translation_of: Web/JavaScript/Reference/Operators/Assignment
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Простий оператор присвоєння (<code>=</code>) використовується для присвоєння змінній значення. Оператор присвоєння обчислює значення, що присвоюється. Можна використовувати ланцюжок присвоєнь, щоб присвоїти одне значення декільком змінним.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x = y
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Просте_присвоєння_та_ланцюжок_присвоєнь">Просте присвоєння та ланцюжок присвоєнь</h3>
+
+<pre class="brush: js notranslate">// Розглянемо наступні змінні
+//  x = 5
+//  y = 10
+//  z = 25
+
+x = y     // x дорівнює 10
+x = y = z // x, y та z усі дорівнюють 25</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.assignment")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Вирази_та_оператори#Оператори_присвоєння">Оператори присвоєння у посібнику JS</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/async_function/index.html b/files/uk/web/javascript/reference/operators/async_function/index.html
new file mode 100644
index 0000000000..a0ff272054
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/async_function/index.html
@@ -0,0 +1,115 @@
+---
+title: Вираз асинхронної функції
+slug: Web/JavaScript/Reference/Operators/async_function
+tags:
+  - JavaScript
+  - Оператор
+  - Функція
+translation_of: Web/JavaScript/Reference/Operators/async_function
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Ключове слово <strong><code>async function</code></strong> може використовуватись для визначення асинхронних функцій всередині виразів.</p>
+
+<p>Ви також можете визначати асинхронні функції за допомогою <a href="/uk/docs/Web/JavaScript/Reference/Statements/async_function">оголошення async function</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">async function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) {
+   <em>statements</em>
+}</pre>
+
+<p>Починаючи з ES2015 ви також можете використовувати <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкові функції</a>.</p>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Ім'я функції. Його можна пропустити, в цьому випадку функція буде <em>анонімною</em>. Ім'я доступне лише всередині тіла функції.</dd>
+ <dt><code>paramN</code></dt>
+ <dd>Ім'я аргумента, що передається у функцію.</dd>
+ <dt><code>statements</code></dt>
+ <dd>Інструкції, які складають тіло функції.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Вираз <code>async function</code> дуже схожий, та має майже такий самий синтаксис, як {{jsxref('Statements/async_function', 'оголошення async function')}}. Головною відмінністю між виразом асинхронної функції та оголошенням асинхронної функції є <em>ім'я функції,</em> яке можна пропустити у виразі <code>async function</code>, щоб створити <em>анонімну</em> функцію. Вираз <code>async function</code> може використовуватись як {{Glossary("IIFE","НВФВ")}} (негайно виконуваний функціональний вираз), який виконується одразу після визначення. Більше інформації дивіться у главі про <a href="/uk/docs/Web/JavaScript/Reference/Functions">функції</a>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Простий_приклад">Простий приклад</h3>
+
+<pre class="brush: js">function resolveAfter2Seconds(x) {
+  return new Promise(resolve =&gt; {
+    setTimeout(() =&gt; {
+      resolve(x);
+    }, 2000);
+  });
+};
+
+
+var add = async function(x) { // вираз асинхронної функції присвоюється змінній
+  var a = await resolveAfter2Seconds(20);
+  var b = await resolveAfter2Seconds(30);
+  return x + a + b;
+};
+
+add(10).then(v =&gt; {
+  console.log(v);  // виводить 60 через 4 секунди.
+});
+
+
+(async function(x) { // вираз асинхронної функції використовується як НВФВ
+  var p_a = resolveAfter2Seconds(20);
+  var p_b = resolveAfter2Seconds(30);
+  return x + await p_a + await p_b;
+})(10).then(v =&gt; {
+  console.log(v);  // виводить 60 через 2 секунди.
+});
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2018', '#sec-async-function-definitions', 'async function')}}</td>
+   <td>{{Spec2('ES2018')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2017', '#sec-async-function-definitions', 'async function')}}</td>
+   <td>{{Spec2('ES2017')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.operators.async_function_expression")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Statements/async_function", "async function")}}</li>
+ <li>Об'єкт {{jsxref("AsyncFunction")}}</li>
+ <li>{{jsxref("Operators/await", "await")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/await/index.html b/files/uk/web/javascript/reference/operators/await/index.html
new file mode 100644
index 0000000000..ed8041347d
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/await/index.html
@@ -0,0 +1,126 @@
+---
+title: await
+slug: Web/JavaScript/Reference/Operators/await
+tags:
+  - JavaScript
+  - Оператор
+  - Функція
+translation_of: Web/JavaScript/Reference/Operators/await
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор <code>await</code> використовується для очікування на {{jsxref("Promise","проміс")}}. Він може використовуватись лише всередині {{jsxref("Statements/async_function", "асинхронної функції")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">[<em>rv</em>] = await <em>expression</em>;</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>{{jsxref("Promise","Проміс")}} чи будь-яке інше значення, якого треба дочекатись.</dd>
+ <dt><code>rv</code></dt>
+ <dd>
+ <p>Повертає значення виконаного проміса, або саме значення, якщо це не об'єкт <code>Promise</code>.</p>
+ </dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Вираз <code>await</code> спричиняє призупинення виконання асинхронної функції до встановлення об'єкта <code>Promise</code> (проміс) (тобто, до його вирішення або відхилення), а також відновлює виконання асинхронної функції після його завершення. Після відновлення, значенням виразу <code>await</code> є значення виконаного проміса.</p>
+
+<p>Якщо проміс відхилено, вираз <code>await</code> викидає значення відхилення.</p>
+
+<p>Якщо значення <em>виразу</em>, що стоїть після оператора <code>await</code>, не є об'єктом <code>Promise</code>, воно перетворюється на <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve">вирішений проміс</a>.</p>
+
+<p>Оператор <code>await</code> може розбивати хід виконання, дозволяючи коду, що викликав функцію з <code>await</code>, відновити виконання ще до того, як буде продовжене відкладене виконання функції з <code>await</code>. Після того, як <code>await</code> відкладає продовження своєї функції, якщо це перший оператор <code>await</code>, що виконується функцією, негайне виконання також продовжується поверненням у код, що викликав функцію, проміса у стані очікування для завершення виконання функції з <code>await</code> та для відновлення виконання коду, що її викликав.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Якщо у вираз <code>await</code> був переданий проміс, то вираз чекає на виконання проміса та повертає значення, що є результатом виконання.</p>
+
+<pre class="brush: js">function resolveAfter2Seconds(x) {
+  return new Promise(resolve =&gt; {
+    setTimeout(() =&gt; {
+      resolve(x);
+    }, 2000);
+  });
+}
+
+async function f1() {
+  var x = await resolveAfter2Seconds(10);
+  console.log(x); // 10
+}
+
+f1();
+</pre>
+
+<p>{{jsxref("Global_Objects/Promise/then", "Промісоподібні об'єкти")}} виконуватимуться так само.</p>
+
+<pre class="brush: js">async function f2() {
+  const thenable = {
+    then: function(resolve, _reject) {
+      resolve('вирішений!')
+    }
+  };
+  console.log(await thenable); // вирішений!
+}
+
+f2();</pre>
+
+<p>Якщо значенням є не проміс, він перетворює його на вирішений проміс та чекає на нього.</p>
+
+<pre class="brush: js">async function f3() {
+  var y = await 20;
+  console.log(y); // 20
+}
+
+f3();</pre>
+
+<p>Якщо проміс відхилено, викидається значення відхилення.</p>
+
+<pre class="brush: js">async function f4() {
+  try {
+    var z = await Promise.reject(30);
+  } catch(e) {
+    console.log(e); // 30
+  }
+}
+
+f4();</pre>
+
+<p>Обробити відхилений проміс без блока try.</p>
+
+<pre class="brush: js">var response = await promisedFunction().catch((err) =&gt; { console.log(err); });
+// якщо проміс відхилено, значенням response буде undefined
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async functions')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.operators.await")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Statements/async_function", "async function")}}</li>
+ <li>{{jsxref("Operators/async_function", "вираз async function")}}</li>
+ <li>Об'єкт {{jsxref("AsyncFunction")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/bitwise_and/index.html b/files/uk/web/javascript/reference/operators/bitwise_and/index.html
new file mode 100644
index 0000000000..0ac51e7d41
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/bitwise_and/index.html
@@ -0,0 +1,111 @@
+---
+title: Побітове І (&)
+slug: Web/JavaScript/Reference/Operators/Bitwise_AND
+tags:
+  - JavaScript
+  - Бітовий оператор
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Bitwise_AND
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор побітового І (AND) <code>&amp;</code> вертає <code>1</code> для кожної бітової позиції, де відповідні біти обох операндів дорівнюють <code>1</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-and.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>a</var> &amp; <var>b</var></code>
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Операнди перетворюються на 32-бітні цілі числа та виражаються послідовністю бітів (нулів та одиниць). Числа, що мають більше 32 бітів, втрачають свої старші біти. Наприклад, наступне ціле число, що має більше 32 бітів, буде перетворене на 32-бітне ціле число:</p>
+
+<pre class="brush: js notranslate">До:     11100110111110100000000000000110000000000001
+Після:              10100000000000000110000000000001</pre>
+
+<p>Кожен біт першого операнда ставиться у пару до відповідного біту другого операнда: <em>перший біт до першого біту</em>, <em>другий біт до другого</em>, і так далі.</p>
+
+<p>Оператор застосовується до кожної пари бітів, а результат будується побітово.</p>
+
+<p>Таблиця істинності для операції І наступна:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th class="header" scope="col">a</th>
+   <th class="header" scope="col">b</th>
+   <th class="header" scope="col">a AND b</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: js notranslate">.    9 (основа 10) = 00000000000000000000000000001001 (основа 2)
+    14 (основа 10) = 00000000000000000000000000001110 (основа 2)
+                   --------------------------------
+14 &amp; 9 (основа 10) = 00000000000000000000000000001000 (основа 2) = 8 (основа 10)
+</pre>
+
+<p>Побітове І над будь-яким числом <code><var>x</var></code> та <code>0</code> дає <code>0</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_побітового_І">Використання побітового І</h3>
+
+<pre class="brush: js notranslate">// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+5 &amp; 2; // 0</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#prod-BitwiseANDExpression', 'Bitwise AND expression')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.bitwise_and")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Вирази_та_оператори#Бітові_оператори">Бітові оператори у посібнику JS</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment">Оператор присвоєння з побітовим І</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/bitwise_and_assignment/index.html b/files/uk/web/javascript/reference/operators/bitwise_and_assignment/index.html
new file mode 100644
index 0000000000..2af7f2fac5
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/bitwise_and_assignment/index.html
@@ -0,0 +1,60 @@
+---
+title: Присвоєння з побітовим І (&=)
+slug: Web/JavaScript/Reference/Operators/Bitwise_AND_assignment
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+  - Оператор присвоєння
+translation_of: Web/JavaScript/Reference/Operators/Bitwise_AND_assignment
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор присвоєння з побітовим І (<code>&amp;=</code>) використовує двійкове представлення обох операндів, виконує над ними операцію побітового І та присвоює результат змінній.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-and-assignment.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x &amp;= y
+<strong>Значення:</strong> x  = x &amp; y
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_присвоєння_з_побітовим_І">Використання присвоєння з побітовим І</h3>
+
+<pre class="brush: js notranslate">let a = 5;
+// 5:     00000000000000000000000000000101
+// 2:     00000000000000000000000000000010
+a &amp;= 2; // 0</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.bitwise_and_assignment")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8_%D0%BF%D1%80%D0%B8%D1%81%D0%B2%D0%BE%D1%94%D0%BD%D0%BD%D1%8F">Оператори присвоєння у посібнику JS</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_AND">Оператор побітового І</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/bitwise_not/index.html b/files/uk/web/javascript/reference/operators/bitwise_not/index.html
new file mode 100644
index 0000000000..5c83741948
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/bitwise_not/index.html
@@ -0,0 +1,99 @@
+---
+title: Побітове НЕ (~)
+slug: Web/JavaScript/Reference/Operators/Bitwise_NOT
+tags:
+  - JavaScript
+  - Бітовий оператор
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Bitwise_NOT
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор побітового НЕ (<code>~</code>) інвертує біти свого операнда.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-not.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>~a</var></code>
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Операнди перетворюються на 32-бітні цілі числа та виражаються послідовністю бітів (нулів та одиниць). Числа, що мають більше 32 бітів, втрачають свої старші біти. Наприклад, наступне ціле число, що має більше 32 бітів, буде перетворене на 32-бітне ціле число:</p>
+
+<pre class="brush: js notranslate">До:     11100110111110100000000000000110000000000001
+Після:              10100000000000000110000000000001</pre>
+
+<p>Оператор застосовується до кожного біта.</p>
+
+<p>Таблиця істинності для операції <code>НЕ</code> (NOT) наступна</p>
+
+
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th class="header" scope="col">a</th>
+   <th class="header" scope="col">NOT a</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: js notranslate"> 9 (основа 10) = 00000000000000000000000000001001 (основа 2)
+               --------------------------------
+~9 (основа 10) = 11111111111111111111111111110110 (основа 2) = -10 (основа 10)
+</pre>
+
+<p>Побітове НЕ над будь-яким числом <code>x</code> дає <code>-(x + 1)</code>. Наприклад, <code>~-5</code> повертає <code>4</code>.</p>
+
+<p>Зауважте, що через використання 32-бітного представлення чисел і <code>~-1</code>, і <code>~4294967295</code> (2<sup>32</sup>-1) повернуть <code>0</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_побітового_НЕ">Використання побітового НЕ</h3>
+
+<pre class="brush: js notranslate">~0;  // -1
+~-1; // 0
+~1;  // -2
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-unary-operators', 'Unary NOT expression')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.bitwise_not")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Вирази_та_оператори#Бітові_оператори">Бітові оператори у посібнику JS</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/bitwise_operators/index.html b/files/uk/web/javascript/reference/operators/bitwise_operators/index.html
new file mode 100644
index 0000000000..4db007fb3e
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/bitwise_operators/index.html
@@ -0,0 +1,559 @@
+---
+title: Бітові оператори
+slug: Web/JavaScript/Reference/Operators/Bitwise_Operators
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Бітові оператори</strong> опрацьовують свої операнди як послідовність 32-х бітів (нулів та одиниць), а не як десяткові, шістнадцяткові чи вісімкові <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число">числа</a></code>. Наприклад, десяткове число дев'ять має бітове представлення 1001. Бітові оператори виконують операції над цими бітовими представленнями, але повертають стандартні числові значення JavaScript.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-bitwiseoperators.html")}}</div>
+
+
+
+<p>Наступна таблиця наводить перелік бітових операторів JavaScript:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Оператор</th>
+   <th>Застосування</th>
+   <th>Опис</th>
+  </tr>
+  <tr>
+   <td><a href="#Побітове_І">Побітове І (AND)</a></td>
+   <td><code>a &amp; b</code></td>
+   <td>Повертає <code>1</code> на кожній позиції, де відповідні біти обох операндів дорівнюють <code>1</code>.</td>
+  </tr>
+  <tr>
+   <td><a href="#Побітове_АБО">Побітове АБО (OR)</a></td>
+   <td><code>a | b</code></td>
+   <td>Повертає <code>1</code> на кожній позиції, де відповідні біти одного чи обох операндів дорівнюють <code>1</code>.</td>
+  </tr>
+  <tr>
+   <td><a href="#Виключне_побітове_АБО">Виключне побітове АБО (XOR)</a></td>
+   <td><code>a ^ b</code></td>
+   <td>Повертає <code>1</code> на кожній позиції, де відповідний біт одного з двох, але не обох, операндів дорівнює <code>1</code>.</td>
+  </tr>
+  <tr>
+   <td><a href="#Побітове_НЕ">Побітове НЕ (NOT)</a></td>
+   <td><code>~ a</code></td>
+   <td>Виконує інверсію бітів операнду.</td>
+  </tr>
+  <tr>
+   <td><a href="#&lt;&lt;_Лівий_зсув">Лівий зсув</a></td>
+   <td><code>a &lt;&lt; b</code></td>
+   <td>Зсуває <code>a</code> у двійковому представленні на <code>b</code> (&lt; 32) бітів ліворуч, заповнюючи позиції справа нулями.</td>
+  </tr>
+  <tr>
+   <td><a href="#>>_Правий_зсув_з_розширенням_знаку">Правий зсув з розширенням знаку</a></td>
+   <td><code>a &gt;&gt; b</code></td>
+   <td>Зсуває <code>a</code> у двійковому представленні на <code>b</code> (&lt; 32) бітів праворуч, відкидаючи зсунуті біти.</td>
+  </tr>
+  <tr>
+   <td><a href="#>>>_Правий_зсув_із_заповненням_нулями">Правий зсув із заповненням нулями</a></td>
+   <td><code>a &gt;&gt;&gt; b</code>  </td>
+   <td>Зсуває <code>a</code> у двійковому представленні на <code>b</code> (&lt; 32) бітів праворуч, відкидаючи зсунуті біти та заповнюючи позиції зліва нулями.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="32-бітні_цілі_числа_зі_знаком">32-бітні цілі числа зі знаком</h2>
+
+<p>Операнди усіх бітових операторів перетворюються на 32-бітні цілі числа зі знаком у <a href="https://uk.wikipedia.org/wiki/%D0%94%D0%BE%D0%BF%D0%BE%D0%B2%D0%BD%D1%8F%D0%BB%D1%8C%D0%BD%D0%B8%D0%B9_%D0%BA%D0%BE%D0%B4">форматі доповняльного коду</a>, окрім оператора правого зсуву із заповненням нулями, який повертає беззнакове ціле 32-бітне число. Формат доповняльного коду означає, що від'ємний еквівалент числа (наприклад, 5 та -5) - це інвертовані біти числа (побітове НЕ, або обернений код числа) плюс один. Для прикладу, наступний код представляє ціле число 314:</p>
+
+<pre class="brush: js">00000000000000000000000100111010
+</pre>
+
+<p>Наступний код представляє <code>~314</code>, тобто, обернений код числа <code>314</code>:</p>
+
+<pre class="brush: js">11111111111111111111111011000101
+</pre>
+
+<p>Нарешті, наступний код представляє доповняльний код числа <code>-314</code>:</p>
+
+<pre class="brush: js">11111111111111111111111011000110
+</pre>
+
+<p>Доповняльний код гарантує, що лівий біт дорівнює 0, коли число є додатним, і 1, коли число є від'ємним. Тому він відомий як <em>знаковий біт</em>.</p>
+
+<p>Число <code>0</code> є цілим числом, усі біти якого дорівнюють 0.</p>
+
+<pre class="brush: js">0 (основа 10) = 00000000000000000000000000000000 (основа 2)
+</pre>
+
+<p>Число <code>-1</code> є цілим числом, усі біти якого дорівнюють 1.</p>
+
+<pre class="brush: js">-1 (основа 10) = 11111111111111111111111111111111 (основа 2)
+</pre>
+
+<p>Число <code>-2147483648</code> (шістнадцяткове представлення: <code>-0x80000000</code>) є цілим числом, усі біти якого дорівнюють 0, окрім першого (старшого) біта.</p>
+
+<pre class="brush: js">-2147483648 (основа 10) = 10000000000000000000000000000000 (основа 2)
+</pre>
+
+<p>Число <code>2147483647</code> (шістнадцяткове представлення: <code>0x7fffffff</code>) є цілим числом, усі біти якого дорівнюють 1, окрім першого (старшого) біта.</p>
+
+<pre class="brush: js">2147483647 (основа 10) = 01111111111111111111111111111111 (основа 2)
+</pre>
+
+<p>Числа <code>-2147483648</code> та <code>2147483647</code> є мінімальним та максимальним цілими числами, які можуть бути представлені 32-бітним знаковим числом.</p>
+
+<h2 id="Побітові_логічні_оператори">Побітові логічні оператори</h2>
+
+<p>Концептуально побітові логічні оператори працюють наступним чином:</p>
+
+<ul>
+ <li>Операнди перетворюються на 32-бітні цілі числа та виражаються послідовністю бітів (нулів та одиниць). Числа, що мають більше 32 бітів, втрачають свої старші біти. Наприклад, наступне ціле число, що має більше 32 бітів, буде перетворено на 32-бітне ціле число:
+  <pre class="brush: js">До:     11100110111110100000000000000110000000000001
+Після:              10100000000000000110000000000001</pre>
+ </li>
+ <li>Кожен біт першого операнду ставиться у пару до відповідного біту другого операнду: перший біт до першого біту, другий біт до другого, і так далі.</li>
+ <li>Оператор застосовується до кожної пари бітів, а результат будується побітово.</li>
+</ul>
+
+<h3 id="Побітове_І"><a id="Bitwise_AND" name="Bitwise_AND">&amp; (Побітове І)</a></h3>
+
+<p>Виконує операцію І (AND) над кожною парою бітів. <code>a</code> І <code>b</code> дає 1 тільки якщо обидва, <code>a</code> та <code>b</code>, дорівнюють <code>1</code>. Таблиця істинності для операції <code>І</code> наступна:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">a</td>
+   <td class="header">b</td>
+   <td class="header">a AND b</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: js">.    9 (основа 10) = 00000000000000000000000000001001 (основа 2)
+    14 (основа 10) = 00000000000000000000000000001110 (основа 2)
+                   --------------------------------
+14 &amp; 9 (основа 10) = 00000000000000000000000000001000 (основа 2) = 8 (основа 10)
+</pre>
+
+<p>Побітове І над будь-яким числом <code>x</code> та <code>0</code> дає <code>0</code>.</p>
+
+<h3 id="Побітове_АБО"><a id="Bitwise_OR" name="Bitwise_OR">| (Побітове АБО)</a></h3>
+
+<p>Виконує операцію АБО (OR) над кожною парою бітів. <code>a</code> АБО <code>b</code> дає 1, якщо або <code>a</code>, або <code>b</code> дорівнює <code>1</code>. Таблиця істинності для операції <code>АБО</code> наступна:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">a</td>
+   <td class="header">b</td>
+   <td class="header">a OR b</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: js">.    9 (основа 10) = 00000000000000000000000000001001 (основа 2)
+    14 (основа 10) = 00000000000000000000000000001110 (основа 2)
+                   --------------------------------
+14 | 9 (основа 10) = 00000000000000000000000000001111 (основа 2) = 15 (основа 10)
+</pre>
+
+<p>Побітове АБО над будь-яким числом <code>x</code> та <code>0</code> дає <code>x</code>.</p>
+
+<h3 id="Виключне_побітове_АБО"><a id="Bitwise_XOR" name="Bitwise_XOR">^ (Виключне побітове АБО)</a></h3>
+
+<p>Виконує операцію виключного АБО (XOR) над кожною парою бітів. <code>a</code> викл. АБО <code>b</code> дає 1, якщо <code>a</code> та <code>b</code> є різними. Таблиця істинності для операції <code>XOR</code> наступна:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">a</td>
+   <td class="header">b</td>
+   <td class="header">a XOR b</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>1</td>
+   <td>0</td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: js">.    9 (основа 10) = 00000000000000000000000000001001 (основа 2)
+    14 (основа 10) = 00000000000000000000000000001110 (основа 2)
+                   --------------------------------
+14 ^ 9 (основа 10) = 00000000000000000000000000000111 (основа 2) = 7 (основа 10)
+</pre>
+
+<p>Виключне побітове АБО над будь-яким числом <code>x</code> та <code>0</code> дає x.</p>
+
+<h3 id="Побітове_НЕ"><a id="Bitwise_NOT" name="Bitwise_NOT">~ (Побітове НЕ)</a></h3>
+
+<p>Виконує операцію НЕ над кожним бітом. НЕ <code>a</code> повертає інвертоване значення (або обернений код) операнду <code>a</code>. Таблиця істинності для операції <code>НЕ</code> наступна:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">a</td>
+   <td class="header">NOT a</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: js"> 9 (основа 10) = 00000000000000000000000000001001 (основа 2)
+               --------------------------------
+~9 (основа 10) = 11111111111111111111111111110110 (основа 2) = -10 (основа 10)
+</pre>
+
+<p>Побітове НЕ над будь-яким числом <code>x</code> дає <code>-(x + 1)</code>. Наприклад, <code>~-5</code> дорівнює <code>4</code>.</p>
+
+<p>Зауважте, що через використання 32-бітного представлення чисел і <code>~-1</code>, і <code>~4294967295</code> (2<sup>32</sup>-1) повернуть <code>0</code>.</p>
+
+<h2 id="Оператори_бітового_зсуву">Оператори бітового зсуву</h2>
+
+<p>Оператори бітового зсуву приймають два операнди: перший є величиною, в якій треба виконати зсув, а другий вказує кількість бітових позицій для зсуву. Напрямок операції зсуву контролюється застосованим оператором.</p>
+
+<p>Оператори зсуву перетворюють свої операнди на 32-бітні цілі числа у порядку від старшого до молодшого байту та повертають результат того самого типу, до якого належить лівий операнд. Лише молодші п'ять бітів правого операнду будуть використані.</p>
+
+<h3 id="&lt;&lt;_Лівий_зсув"><a id="Left_shift" name="Left_shift">&lt;&lt; (Лівий зсув)</a></h3>
+
+<p>Цей оператор виконує зсув першого операнду на вказану кількість бітів ліворуч. Надлишкові біти, зсунуті ліворуч, відкидаються. Біти, додані справа, заповнюються нулями.</p>
+
+<p>Наприклад, <code>9 &lt;&lt; 2</code> дорівнює 36:</p>
+
+<pre class="brush: js">.    9 (основа 10): 00000000000000000000000000001001 (основа 2)
+                  --------------------------------
+9 &lt;&lt; 2 (основа 10): 00000000000000000000000000100100 (основа 2) = 36 (основа 10)
+</pre>
+
+<p>Бітовий зсув будь-якого числа <code>x</code> ліворуч на <code>y</code> бітів дорівнює <code>x * 2 ** y</code>.<br>
+ Отже, для прикладу: <code>9 &lt;&lt; 3</code> можна перекласти як: <code>9 * (2 ** 3) = 9 * (8) =</code><code> 72</code>.</p>
+
+<h3 id=">>_Правий_зсув_з_розширенням_знаку"><a id="Right_shift" name="Right_shift">&gt;&gt; (Правий зсув з розширенням знаку)</a></h3>
+
+<p>Цей оператор виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються значенням старшого біта. Оскільки новий старший біт матиме те саме значення, що й попередній старший біт, знаковий (старший) біт не змінюється. Звідси назва "з розширенням знаку".</p>
+
+<p>Наприклад, <code>9 &gt;&gt; 2</code> дорівнює 2:</p>
+
+<pre class="brush: js">.    9 (основа 10): 00000000000000000000000000001001 (основа 2)
+                  --------------------------------
+9 &gt;&gt; 2 (основа 10): 00000000000000000000000000000010 (основа 2) = 2 (основа 10)
+</pre>
+
+<p>Аналогічно, <code>-9 &gt;&gt; 2</code> дорівнює <code>-3</code>, оскільки знак зберігається:</p>
+
+<pre class="brush: js">.    -9 (основа 10): 11111111111111111111111111110111 (основа 2)
+                   --------------------------------
+-9 &gt;&gt; 2 (основа 10): 11111111111111111111111111111101 (основа 2) = -3 (основа 10)
+</pre>
+
+<h3 id=">>>_Правий_зсув_із_заповненням_нулями"><a id="Unsigned_right_shift" name="Unsigned_right_shift">&gt;&gt;&gt; (Правий зсув із заповненням нулями)</a></h3>
+
+<p>Цей оператор виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються нулями. Знаковий біт отримує значення 0, а отже, результат завжди невід'ємний. На відміну від інших бітових операторів, правий зсув із заповненням нулями повертає беззнакове ціле 32-бітне число.</p>
+
+<p>Для невід'ємних чисел, правий зсув із заповненням нулями та правий зсув з розширенням знаку дають однаковий результат. Наприклад, <code>9 &gt;&gt;&gt; 2</code> дорівнює 2, так само, як <code>9 &gt;&gt; 2</code>:</p>
+
+<pre class="brush: js">.     9 (основа 10): 00000000000000000000000000001001 (основа 2)
+                   --------------------------------
+9 &gt;&gt;&gt; 2 (основа 10): 00000000000000000000000000000010 (основа 2) = 2 (основа 10)
+</pre>
+
+<p>Однак, це не одне й те саме для від'ємних чисел. Наприклад, <code>-9 &gt;&gt;&gt; 2</code> поверне 1073741821, що відрізняється від <code>-9 &gt;&gt; 2</code> (що дорівнює <code>-3</code>):</p>
+
+<pre class="brush: js">.     -9 (основа 10): 11111111111111111111111111110111 (основа 2)
+                    --------------------------------
+-9 &gt;&gt;&gt; 2 (основа 10): 00111111111111111111111111111101 (основа 2) = 1073741821 (основа 10)
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Прапори_та_бітові_маски">Прапори та бітові маски</h3>
+
+<p>Побітові логічні оператори часто використовуються для створення, маніпулювання та читання послідовностей <em>прапорів</em>, які грають роль двійкових змінних. Замість цих послідовностей можуть використовуватись зміні, але двійкові прапори займають набагато менше пам'яті (у 32 рази).</p>
+
+<p>Припустимо, є 4 прапори:</p>
+
+<ul>
+ <li>прапор A: ми маємо проблему з мурахами</li>
+ <li>прапор B: ми маємо кажана</li>
+ <li>прапор C: ми маємо кота</li>
+ <li>прапор D: ми маємо качку</li>
+</ul>
+
+<p>Ці прапори представлені послідовністю бітів: DCBA. Коли прапор <em>встановлений</em>, він має значення 1. Коли прапор <em>очищений</em>, він має значення 0. Припустимо, змінна <code>flags</code> має двійкове значення 0101:</p>
+
+<pre class="brush: js">var flags = 5;   // двійкове значення 0101
+</pre>
+
+<p>Це значення вказує:</p>
+
+<ul>
+ <li>прапор A дорівнює true (ми маємо проблему з мурахами);</li>
+ <li>прапор B дорівнює false (ми не маємо кажана);</li>
+ <li>прапор C дорівнює true (ми маємо кота);</li>
+ <li>прапор D дорівнює false (ми не маємо качки);</li>
+</ul>
+
+<p>Оскільки бітові операнди 32-бітні, 0101 насправді дорівнює 00000000000000000000000000000101, але нулями попереду можна знехтувати, оскільки вони не містять корисної інформації.</p>
+
+<p><em>Бітова маска</em> - це послідовність бітів, які можуть маніпулювати прапорами та/або читати їх. Зазвичай, визначається "примітивна" бітова маска для кожного прапора:</p>
+
+<pre class="brush: js">var FLAG_A = 1; // 0001
+var FLAG_B = 2; // 0010
+var FLAG_C = 4; // 0100
+var FLAG_D = 8; // 1000
+</pre>
+
+<p>Нові бітові маски можуть створюватись застовуванням побітових логічних операторів до цих примітивних бітових масок. Наприклад, бітова маска 1011 може бути створена операцією АБО з прапорів FLAG_A, FLAG_B та FLAG_D:</p>
+
+<pre class="brush: js">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 =&gt; 1011
+</pre>
+
+<p>Індивідуальні значення прапорів можна витягнути застосуванням операції І до них та бітової маски, де кожний біт, що має значення один, "витягне" відповідний прапор. Бітова маска <em>маскує</em> невідповідні прапори, об'єднуючи їх операцією І з нулями (звідси термін "бітова маска"). Наприклад, бітову маску 0100 можна використати, щоб побачити, чи встановлений прапор C:</p>
+
+<pre class="brush: js">// якщо ми маємо кота
+if (flags &amp; FLAG_C) { // 0101 &amp; 0100 =&gt; 0100 =&gt; true
+   // зробити щось
+}
+</pre>
+
+<p>Бітова маска з кількома встановленими прапорами діє як "або/або". Для прикладу, наступні два фрагменти еквівалентні:</p>
+
+<pre class="brush: js">// якщо ми маємо кажана або ми маємо кота
+// (0101 &amp; 0010) || (0101 &amp; 0100) =&gt; 0000 || 0100 =&gt; true
+if ((flags &amp; FLAG_B) || (flags &amp; FLAG_C)) {
+   // зробити щось
+}
+</pre>
+
+<pre class="brush: js">// якщо ми маємо кажана або кота
+var mask = FLAG_B | FLAG_C; // 0010 | 0100 =&gt; 0110
+if (flags &amp; mask) { // 0101 &amp; 0110 =&gt; 0100 =&gt; true
+   // зробити щось
+}
+</pre>
+
+<p>Прапори можна встановити, об'єднавши їх операцією АБО з бітовою маскою, де кожний біт, що має значення один, встановить відповідний прапор, якщо прапор ще не встановлений. Наприклад, бітову маску 1100 можна використати, щоб встановити прапори C та D:</p>
+
+<pre class="brush: js">// так, ми маємо кота та качку
+var mask = FLAG_C | FLAG_D; // 0100 | 1000 =&gt; 1100
+flags |= mask;   // 0101 | 1100 =&gt; 1101
+</pre>
+
+<p>Прапори можна очистити, об'єднавши їх операцією І з бітовою маскою, де кожний біт, що має значення нуль, очистить відповідний прапор, якщо він ще не очищений. Ця бітова маска може бути створена застосуванням операції НЕ до примітивних бітових масок. Наприклад, бітову маску 1010 можна використати, щоб очистити прапори A та C:</p>
+
+<pre class="brush: js">// ні, ми не маємо проблеми з мурахами або кота
+var mask = ~(FLAG_A | FLAG_C); // ~0101 =&gt; 1010
+flags &amp;= mask;   // 1101 &amp; 1010 =&gt; 1000
+</pre>
+
+<p>Маску також можна створити за допомогою <code>~FLAG_A &amp; ~FLAG_C</code> (правило де Моргана):</p>
+
+<pre class="brush: js">// ні, ми не маємо проблеми з мурахами і ми не маємо кота
+var mask = ~FLAG_A &amp; ~FLAG_C;
+flags &amp;= mask;   // 1101 &amp; 1010 =&gt; 1000
+</pre>
+
+<p>Прапори можна перемикати, об'єднуючи їх операцією виключне АБО з бітовою маскою, де кожний біт, що має значення один, переключить відповідний прапор. Наприклад, бітову маску 0110 можна використати, щоб переключити прапори B та C:</p>
+
+<pre class="brush: js">// якщо ми не мали кажана, тепер ми його маємо,
+// а якщо він в нас був, бувай, кажанчику
+// те саме для котів
+var mask = FLAG_B | FLAG_C;
+flags = flags ^ mask;   // 1100 ^ 0110 =&gt; 1010
+</pre>
+
+<p>Нарешті, усі прапори можна перевернути оператором НЕ:</p>
+
+<pre class="brush: js">// входимо у паралельний всесвіт...
+flags = ~flags;    // ~1010 =&gt; 0101
+</pre>
+
+<h3 id="Перетворення_типів">Перетворення типів</h3>
+
+<p>Перетворити двійковий <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/String">рядок</a></code> на десяткове <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число">число</a></code>:</p>
+
+<pre class="brush: js">var sBinString = '1011';
+var nMyNumber = parseInt(sBinString, 2);
+alert(nMyNumber); // виводить 11, тобто 1011
+</pre>
+
+<p>Перетворити десяткове <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число">число</a></code> на двійковий <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/String">рядок</a></code>:</p>
+
+<pre class="brush: js">var nMyNumber = 11;
+var sBinString = nMyNumber.toString(2);
+alert(sBinString); // виводить 1011, тобто 11
+</pre>
+
+<h3 id="Автоматизація_створення_маски">Автоматизація створення маски</h3>
+
+<p>Ви можете створювати маски з набору <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Boolean">булевих</a></code> значень наступним чином:</p>
+
+<pre class="brush: js">function createMask() {
+  var nMask = 0, nFlag = 0, nLen = arguments.length &gt; 32 ? 32 : arguments.length;
+  for (nFlag; nFlag &lt; nLen; nMask |= arguments[nFlag] &lt;&lt; nFlag++);
+  return nMask;
+}
+var mask1 = createMask(true, true, false, true); // 11, тобто: 1011
+var mask2 = createMask(false, false, true); // 4, тобто: 0100
+var mask3 = createMask(true); // 1, тобто: 0001
+// і т.д.
+
+alert(mask1); // виводить 11, тобто: 1011
+</pre>
+
+<h3 id="Зворотний_алгоритм_отримання_масиву_булевих_значень_з_маски">Зворотний алгоритм: отримання масиву булевих значень з маски</h3>
+
+<p>Якщо ви бажаєте створити <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array">масив</a></code> <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Boolean">булевих значень</a></code> з маски, можете скористатись цим кодом:</p>
+
+<pre class="brush: js">function arrayFromMask(nMask) {
+  // Значенння nMask має бути між -2147483648 та 2147483647
+  if (nMask &gt; 0x7fffffff || nMask &lt; -0x80000000) {
+    throw new TypeError('arrayFromMask - out of range');
+  }
+  for (var nShifted = nMask, aFromMask = []; nShifted;
+       aFromMask.push(Boolean(nShifted &amp; 1)), nShifted &gt;&gt;&gt;= 1);
+  return aFromMask;
+}
+
+var array1 = arrayFromMask(11);
+var array2 = arrayFromMask(4);
+var array3 = arrayFromMask(1);
+
+alert('[' + array1.join(', ') + ']');
+// виводить "[true, true, false, true]", тобто: 11, тобто: 1011
+</pre>
+
+<p>Ви можете перевірити обидва алгоритми одночасно…</p>
+
+<pre class="brush: js">var nTest = 19; // наша користувацька маска
+var nResult = createMask.apply(this, arrayFromMask(nTest));
+
+alert(nResult); // 19
+</pre>
+
+<p>Суто з навчальною метою (оскільки існує метод <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Number/toString">Number.toString(2)</a></code>) ми показуємо, як можна модифікувати алгоритм <code>arrayFromMask</code> для створення <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/String">рядка</a></code>, що містить двійкове представлення <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число">числа</a></code>, а не <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array">масиву</a></code> <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Boolean">булевих значень</a></code>:</p>
+
+<pre class="brush: js">function createBinaryString(nMask) {
+  // Значення nMask має бути між -2147483648 та 2147483647
+  for (var nFlag = 0, nShifted = nMask, sMask = ''; nFlag &lt; 32;
+       nFlag++, sMask += String(nShifted &gt;&gt;&gt; 31), nShifted &lt;&lt;= 1);
+  return sMask;
+}
+
+var string1 = createBinaryString(11);
+var string2 = createBinaryString(4);
+var string3 = createBinaryString(1);
+
+alert(string1);
+// виводить 00000000000000000000000000001011, тобто 11
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.7')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Визначені у кількох розділах специфікації: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.8">Побітовий оператор НЕ</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.7">Бітові оператори зсуву</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.10">Двійкові побітові оператори</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-bitwise-shift-operators')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Визначені у кількох розділах специфікації: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-not-operator">Побітовий оператор НЕ</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-shift-operators">Бітові оператори зсуву</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-bitwise-operators">Двійкові побітові оператори</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Визначені у кількох розділах специфікації: <a href="http://tc39.github.io/ecma262/#sec-bitwise-not-operator">Побітовий оператор НЕ</a>, <a href="http://tc39.github.io/ecma262/#sec-bitwise-shift-operators">Бітові оператори зсуву</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-bitwise-operators">Двійкові побітові оператори</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.operators.bitwise")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators">Логічні оператори</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/bitwise_or/index.html b/files/uk/web/javascript/reference/operators/bitwise_or/index.html
new file mode 100644
index 0000000000..89e27290da
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/bitwise_or/index.html
@@ -0,0 +1,113 @@
+---
+title: Побітове АБО (|)
+slug: Web/JavaScript/Reference/Operators/Bitwise_OR
+tags:
+  - JavaScript
+  - Бітовий оператор
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Bitwise_OR
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор побітового АБО (<code>|</code>) вертає <code>1</code> для кожної бітової позиції, де відповідні біти одного чи обох операндів дорівнюють <code>1</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-or.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>a</var> | <var>b</var></code>
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Операнди перетворюються на 32-бітні цілі числа та виражаються послідовністю бітів (нулів та одиниць). Числа, що мають більше 32 бітів, втрачають свої старші біти. Наприклад, наступне ціле число, що має більше 32 бітів, буде перетворене на 32-бітне ціле число:</p>
+
+<pre class="brush: js notranslate">До:     11100110111110100000000000000110000000000001
+Після:              10100000000000000110000000000001</pre>
+
+<p>Кожен біт першого операнда ставиться у пару до відповідного біту другого операнда: <em>перший біт до першого біту</em>, <em>другий біт до другого</em>, і так далі.</p>
+
+<p>Оператор застосовується до кожної пари бітів, а результат будується побітово.</p>
+
+<p>Таблиця істинності для операції <code>АБО</code> (OR) наступна:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th class="header" scope="col">a</th>
+   <th class="header" scope="col">b</th>
+   <th class="header" scope="col">a OR b</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: js notranslate">.    9 (основа 10) = 00000000000000000000000000001001 (основа 2)
+    14 (основа 10) = 00000000000000000000000000001110 (основа 2)
+                   --------------------------------
+14 | 9 (основа 10) = 00000000000000000000000000001111 (основа 2) = 15 (основа 10)
+</pre>
+
+<p>Побітове АБО над будь-яким числом <code><var>x</var></code> з <code>0</code> дає <code><var>x</var></code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_побітового_АБО">Використання побітового АБО</h3>
+
+<pre class="brush: js notranslate">// 9  (00000000000000000000000000001001)
+// 14 (00000000000000000000000000001110)
+
+14 | 9;
+// 15 (00000000000000000000000000001111)</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#prod-BitwiseORExpression', 'Bitwise OR expression')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.bitwise_or")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%91%D1%96%D1%82%D0%BE%D0%B2%D1%96_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8">Бітові оператори у посібнику JS</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment">Присвоєння з побітовим АБО</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/bitwise_or_assignment/index.html b/files/uk/web/javascript/reference/operators/bitwise_or_assignment/index.html
new file mode 100644
index 0000000000..a4197168b7
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/bitwise_or_assignment/index.html
@@ -0,0 +1,61 @@
+---
+title: Присвоєння з побітовим АБО (|=)
+slug: Web/JavaScript/Reference/Operators/Bitwise_OR_assignment
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+  - Оператор присвоєння
+translation_of: Web/JavaScript/Reference/Operators/Bitwise_OR_assignment
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор присвоєння з побітовим АБО (<code>|=</code>) використовує двійкове представлення обох операндів, виконує над ними операцію побітового АБО та присвоює результат змінній.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-or-assignment.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x |= y
+<strong>Значення:</strong> x = x | y</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_присвоєння_з_побітовим_АБО">Використання присвоєння з побітовим АБО</h3>
+
+<pre class="brush: js notranslate">let a = 5;
+a |= 2; // 7
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+// -----------------------------------
+// 7: 00000000000000000000000000000111</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.bitwise_or_assignment")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8_%D0%BF%D1%80%D0%B8%D1%81%D0%B2%D0%BE%D1%94%D0%BD%D0%BD%D1%8F">Оператори присвоєння у посібнику JS</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_OR">Оператор побітового АБО</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/bitwise_xor/index.html b/files/uk/web/javascript/reference/operators/bitwise_xor/index.html
new file mode 100644
index 0000000000..b9e61d2d39
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/bitwise_xor/index.html
@@ -0,0 +1,113 @@
+---
+title: Виключне побітове АБО (^)
+slug: Web/JavaScript/Reference/Operators/Bitwise_XOR
+tags:
+  - JavaScript
+  - Бітовий оператор
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Bitwise_XOR
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор виключного побітового АБО (<code>^</code>) повертає <code>1</code> на кожній бітовій позиції, де відповідний біт одного з операндів, але не обох, дорівнює <code>1</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-xor.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>a</var> ^ <var>b</var></code>
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Операнди перетворюються на 32-бітні цілі числа та виражаються послідовністю бітів (нулів та одиниць). Числа, що мають більше 32 бітів, втрачають свої старші біти. Наприклад, наступне ціле число, що має більше 32 бітів, буде перетворене на 32-бітне ціле число:</p>
+
+<pre class="brush: js notranslate">До:     11100110111110100000000000000110000000000001
+Після:              10100000000000000110000000000001</pre>
+
+<p>Кожен біт першого операнда ставиться у пару до відповідного біту другого операнда: <em>перший біт до першого біту</em>, <em>другий біт до другого</em>, і так далі.</p>
+
+<p>Оператор застосовується до кожної пари бітів, а результат будується побітово.</p>
+
+<p>Таблиця істинності для операції виключного побітового АБО (XOR) наступна:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th class="header" scope="col">a</th>
+   <th class="header" scope="col">b</th>
+   <th class="header" scope="col">a XOR b</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>1</td>
+   <td>0</td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: js notranslate">.    9 (основа 10) = 00000000000000000000000000001001 (основа 2)
+    14 (основа 10) = 00000000000000000000000000001110 (основа 2)
+                   --------------------------------
+14 ^ 9 (основа 10) = 00000000000000000000000000000111 (основа 2) = 7 (основа 10)
+</pre>
+
+<p>Виключне побітове АБО над будь-яким числом <code><var>x</var></code> та <code>0</code> дає <code><var>x</var></code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_виключного_побітового_АБО">Використання виключного побітового АБО</h3>
+
+<pre class="brush: js notranslate">// 9  (00000000000000000000000000001001)
+// 14 (00000000000000000000000000001110)
+
+14 ^ 9;
+// 7  (00000000000000000000000000000111)</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#prod-BitwiseXORExpression', 'Bitwise XOR expression')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.bitwise_xor")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%91%D1%96%D1%82%D0%BE%D0%B2%D1%96_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8">Бітові оператори у посібнику JS</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment">Оператор присвоєння з виключним побітовим АБО</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/bitwise_xor_assignment/index.html b/files/uk/web/javascript/reference/operators/bitwise_xor_assignment/index.html
new file mode 100644
index 0000000000..9f5375f7e2
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/bitwise_xor_assignment/index.html
@@ -0,0 +1,61 @@
+---
+title: Присвоєння з виключним побітовим АБО (^=)
+slug: Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+  - Оператор присвоєння
+translation_of: Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор присвоєння з виключним побітовим АБО (<code>^=</code>) використовує двійкове представлення обох операндів, виконує над ними операцію виключного побітового АБО та присвоює результат змінній.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-xor-assignment.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x ^= y
+<strong>Значення:</strong> x = x ^ y</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_присвоєння_з_виключним_побітовим_АБО">Використання присвоєння з виключним побітовим АБО</h3>
+
+<pre class="brush: js notranslate">let a = 5;
+a ^= 2; // 7
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+// -----------------------------------
+// 7: 00000000000000000000000000000111</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.bitwise_xor_assignment")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8_%D0%BF%D1%80%D0%B8%D1%81%D0%B2%D0%BE%D1%94%D0%BD%D0%BD%D1%8F">Оператори присвоєння у посібнику JS</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR">Оператор виключного побітового АБО</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/class/index.html b/files/uk/web/javascript/reference/operators/class/index.html
new file mode 100644
index 0000000000..4b4e8bee1e
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/class/index.html
@@ -0,0 +1,122 @@
+---
+title: Вираз класу
+slug: Web/JavaScript/Reference/Operators/class
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Класи
+  - Оператор
+  - вираз
+translation_of: Web/JavaScript/Reference/Operators/class
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Вираз класу</strong> - це один зі способів визначити клас у ECMAScript 2015. Схоже до <a href="/uk/docs/Web/JavaScript/Reference/Operators/function">функціональних виразів</a>, вирази класів можуть бути іменовані або неіменовані. У іменованих ім'я класу є локальним для використання тільки у тілі класу. Класи JavaScript використовують прототипне наслідування.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-classexpression.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var MyClass = class <em>[className]</em> [extends] {
+  // тіло класу
+};</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Вираз класу має синтаксис, подібний до синтаксису <a href="/uk/docs/Web/JavaScript/Reference/Statements/class">оголошення (оператору) класу</a>. Однак, у виразі класу ви можете опустити ім'я класу ("зв'язуючий ідентифікатор"), чого не можна зробити у оголошенні класу. Додатково, вираз класу дозволяє перевизначити/переоголосити клас та <strong>не викинути</strong> жодних помилок типу, як у <a href="/uk/docs/Web/JavaScript/Reference/Statements/class">оголошенні класу</a>. Конструктор є необов'язковою властивістю. А результатом <em>typeof </em>для класів, створених за допомогою ключового слова, завжди буде "function".</p>
+
+<p>Як і у оголошенні класу, тіло класу у виразі класу виконується у <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">строгому режимі</a>.</p>
+
+<pre class="brush: js">'use strict';
+var Foo = class {}; // конструктор є необов'язковою властивістю
+var Foo = class {}; // дозволяється перевизначення
+
+typeof Foo; //вертає "function"
+typeof class {}; //вертає "function"
+
+Foo instanceof Object; // true
+Foo instanceof Function; // true
+class Foo {}; // Викидає TypeError, не дозволяє перевизначення
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Простий_вираз_класу">Простий вираз класу</h3>
+
+<p>Це простий анонімний вираз класу, на який можна посилатись через змінну "Foo".</p>
+
+<pre class="brush: js">var Foo = class {
+  constructor() {}
+  bar() {
+    return 'Привіт!';
+  }
+};
+
+var instance = new Foo();
+instance.bar(); // "Привіт!"
+Foo.name; // "Foo"
+</pre>
+
+<h3 id="Іменовані_вирази_класів">Іменовані вирази класів</h3>
+
+<p>Якщо ви бажаєте звертатись до поточного класу всередині тіла класу, ви можете створити іменований вираз класу. Це ім'я видиме тільки в області видимості самого виразу класу.</p>
+
+<pre class="brush: js">var Foo = class NamedFoo {
+  constructor() {}
+  whoIsThere() {
+    return NamedFoo.name;
+  }
+}
+var bar = new Foo();
+bar.whoIsThere(); // "NamedFoo"
+NamedFoo.name; // ReferenceError: NamedFoo is not defined
+Foo.name; // "NamedFoo"
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2017')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.class")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/function">функціональний вираз</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/class">оголошення класу</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Classes">Класи</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/comma_operator/index.html b/files/uk/web/javascript/reference/operators/comma_operator/index.html
new file mode 100644
index 0000000000..6637e57fa6
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/comma_operator/index.html
@@ -0,0 +1,90 @@
+---
+title: 'Оператор кома (,)'
+slug: Web/JavaScript/Reference/Operators/Comma_Operator
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Comma_Operator
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Оператор кома </strong>(<strong><code>,</code></strong>) обчислює кожний свій операнд (зліва направо) і повертає значення останнього операнду. Це дозволяє створити складений вираз, де обчислюється більше одного виразу, а остаточним значенням складеного виразу є значення крайнього правого з його виразів. Зазвичай, його використовують, щоб передати декілька параметрів у цикл <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for">for</a></code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-commaoperators.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>expr1</em>, <em>expr2, expr3...</em></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>expr1</code>, <code>expr2</code>, <code>expr3</code>...</dt>
+ <dd>Один або більше виразів, останній з яких буде повернений в якості значення складеного виразу.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Ви можете скористатись оператором кома, коли бажаєте використати декілька виразів там, де вимагається лише один. Найбільш поширене використання цього оператора - це подання декількох параметрів у цикл <code>for</code>.</p>
+
+<p>Оператор кома повністю відмінний від коми у масивах, об'єктах та аргументах та параметрах функцій.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Якщо <code>a</code> - 2-вимірний масив з 10 елементів по кожній стороні, наступний код використовує оператор кома, щоб збільшити <code>i</code> та зменшити <code>j</code> одночасно.</p>
+
+<p>Наступний код виводить значення діагональних елементів масиву:</p>
+
+<pre class="brush:js;highlight:[1] notranslate">for (var i = 0, j = 9; i &lt;= 9; i++, j--)
+  console.log('a[' + i + '][' + j + '] = ' + a[i][j]);</pre>
+
+<p>Зауважте, що оператори кома у присвоєннях можуть, на перший вигляд, не мати свого звичайного ефекту, тому що вони не існують всередині виразу. У наступному прикладі <code>a</code> присвоюється значення <code>b = 3</code> (тобто, 3), але вираз <code>c = 4</code> все одно обчислюється, і його результат повертається у консоль (тобто, 4). Причиною є <a href="/uk/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">пріоритет і асоціативність операторів</a>.</p>
+
+<pre class="brush: js notranslate">var a, b, c;
+
+a = b = 3, c = 4; // Повертає у консоль 4
+console.log(a); // 3 (крайній зліва)
+
+var x, y, z;
+
+x = (y = 5, z = 6); // Повертає у консоль 6
+console.log(x); // 6 (крайній справа)
+</pre>
+
+<h3 id="Обробка_перед_поверненням">Обробка перед поверненням</h3>
+
+<p>Інший приклад того, що можна зробити оператором кома - це обробка перед поверненням. Як зазначалося, тільки останній елемент буде повернений, але всі інші також будуть обчислені. Отже, можна зробити таке:</p>
+
+<pre class="brush: js notranslate">function myFunc() {
+  var x = 0;
+
+  return (x += 1, x); // те саме, що return ++x;
+}</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.comma")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/for">Цикл <code>for</code></a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/conditional_operator/index.html b/files/uk/web/javascript/reference/operators/conditional_operator/index.html
new file mode 100644
index 0000000000..01c51d0d46
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/conditional_operator/index.html
@@ -0,0 +1,109 @@
+---
+title: Умовний (тернарний) оператор
+slug: Web/JavaScript/Reference/Operators/Conditional_Operator
+tags:
+  - Conditional
+  - JavaScript
+  - Оператор
+  - тернарний
+  - умовний
+translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Умовний (тернарний) оператор</strong> - це єдиний оператор JavaScript, який приймає три операнди: умову, за якою йде знак питання (<code>?</code>), далі вираз, який має виконатися, якщо умова {{Glossary("truthy","правдива")}}, далі двокрапка (<code>:</code>) і, нарешті, вираз, який має виконатись, якщо умова {{Glossary("falsy","хибна")}}. Цей оператор часто використовують в якості скорочення конструкції <a href="/uk/docs/Web/JavaScript/Reference/Statements/if...else"><code>if</code></a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-conditionaloperators.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>condition</em> ? <em>exprIfTrue</em> : <em>exprIfFalse</em> </pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>condition</code></dt>
+ <dd>Вираз, який використовується в якості умови.</dd>
+ <dt><code>exprIfTrue</code></dt>
+ <dd>Вираз, який виконується, якщо вираз <code>condition</code> оцінений як {{Glossary("truthy", "правдивий")}} (який дорівнює або може бути приведений до <code>true</code>).</dd>
+ <dt><code>exprIfFalse</code></dt>
+ <dd>Вираз, який виконується, якщо вираз <code>condition</code> є {{Glossary("falsy", "хибним")}} (тобто, його значення може бути приведене до <code>false</code>).</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Окрім <code>false</code>, можливими хибними значеннями є: <code>null</code>, <code>NaN</code>, <code>0</code>, порожній рядок (<code>""</code>) та <code><code><code><code>undefined</code></code></code></code>. Якщо <em><code>condition</code> </em>дорівнює будь-якому з них, результатом умовного виразу буде результат виконання виразу <code>exprIfFalse</code>.</p>
+
+<p>Простий приклад:</p>
+
+<pre class="brush: js">var age = 26;
+var beverage = (age &gt;= 21) ? "Пиво" : "Сік";
+console.log(beverage); // "Пиво"
+</pre>
+
+<p>Одним з типових використань є обробка значення, яке може дорівнювати <code>null</code>:</p>
+
+<pre class="brush: js">function greeting(person) {
+    var name = person ? person.name : "незнайомець";
+    return "Привіт, " + name;
+}
+
+console.log(greeting({name: 'Аліса'}));  // "Привіт, Аліса"
+console.log(greeting(null));             // "Привіт, незнайомець"​​​​​
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Заувага:</strong> <a href="/uk/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Оператор необов'язкового ланцюгування </a>був створений для використання у таких випадках. На момент написання (липень 2019), він досі є експериментальним і не був реалізований.</p>
+</div>
+
+<h3 id="Умовні_ланцюги">Умовні ланцюги</h3>
+
+<p>Тернарний оператор є правоасоціативним, це означає, що він може створювати ланцюги наступним чином, схоже на ланцюг <code>if … else if … else if … else</code>:</p>
+
+<pre class="brush: js">function example(…) {
+    return condition1 ? value1
+         : condition2 ? value2
+         : condition3 ? value3
+         : value4;
+}
+
+// Є еквівалентом:
+
+function example(…) {
+    if (condition1) { return value1; }
+    else if (condition2) { return value2; }
+    else if (condition3) { return value3; }
+    else { return value4; }
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.conditional")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/if...else">Оператор if</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">Оператор null-об'єднання</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Необов'язкове ланцюгування</a></li>
+ <li><a href="/uk/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Вирази_та_оператори">Вирази та оператори</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/decrement/index.html b/files/uk/web/javascript/reference/operators/decrement/index.html
new file mode 100644
index 0000000000..e97c5aaec9
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/decrement/index.html
@@ -0,0 +1,82 @@
+---
+title: Декремент (--)
+slug: Web/JavaScript/Reference/Operators/Decrement
+tags:
+  - JavaScript
+  - Декремент
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Decrement
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор декременту (<code>--</code>) зменшує свій операнд (віднімає одиницю) та повертає його значення.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-decrement.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><strong>Оператор:</strong> <var>x</var>-- або --<var>x</var>
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо оператор використовується постфіксно, після операнду (наприклад, <code>x--</code>), тоді він зменшує значення та повертає його до зменшення.</p>
+
+<p>Якщо оператор використовується префіксно, перед операндом (наприклад, <code>--x</code>), тоді він зменшує значення та повертає його після зменшення.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Постфіксний_декремент">Постфіксний декремент</h3>
+
+<pre class="brush: js notranslate">let x = 3;
+y = x--;
+
+// y = 3
+// x = 2
+</pre>
+
+<h3 id="Префіксний_декремент">Префіксний декремент</h3>
+
+<pre class="brush: js notranslate">let a = 2;
+b = --a;
+
+// a = 1
+// b = 1
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-postfix-decrement-operator', 'Decrement operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.decrement")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Addition">Оператор додавання</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Subtraction">Оператор віднімання</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Division">Оператор ділення</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Multiplication">Оператор множення</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Remainder">Оператор остачі</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Exponentiation">Оператор піднесення до степеня</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Increment">Оператор інкременту</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_negation">Унарний мінус</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_plus">Унарний плюс</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/delete/index.html b/files/uk/web/javascript/reference/operators/delete/index.html
new file mode 100644
index 0000000000..3df636e0a5
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/delete/index.html
@@ -0,0 +1,298 @@
+---
+title: Оператор delete
+slug: Web/JavaScript/Reference/Operators/delete
+tags:
+  - JavaScript
+  - Object
+  - delete
+  - Властивість
+  - Оператор
+  - керування пам'яттю
+translation_of: Web/JavaScript/Reference/Operators/delete
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><span class="seoSummary">Оператор JavaScript <strong><code>delete</code></strong> видаляє властивість об'єкта. Якщо на цю властивість більше немає посилань, пам'ять під неї зрештою звільняється автоматично.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-deleteoperator.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">delete <em>вираз</em> </pre>
+
+<p>де <em>вираз</em> має вертати посилання на <a href="/uk/docs/Glossary/property/JavaScript">властивість</a>, наприклад:</p>
+
+<pre class="syntaxbox">delete <em>object.property</em>
+delete <em>object</em>['<em>property</em>']
+</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>Ім'я об'єкта, чи вираз, що повертає цей об'єкт.</dd>
+ <dt><code>property</code></dt>
+ <dd>Властивість, яку треба видалити.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Завжди <code>true</code>, окрім випадків, коли властивість є <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">особистою</a> властивістю, <a href="/uk/docs/Web/JavaScript/Reference/Errors/Cant_delete">недоступною для налаштування</a>, в цьому випадку у нестрогому режимі повертається <code>false</code>.</p>
+
+<h3 id="Винятки">Винятки</h3>
+
+<p>Викидає {{jsxref("TypeError")}} у <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">строгому режимі</a>, якщо властивість є особистою властивістю, недоступною для налаштування.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Попри розповсюджену думку, оператор <code>delete</code> не має <strong>нічого</strong> спільного з прямим вивільненням пам'яті. Керування пам'яттю відбувається опосередковано через розривання посилань. Більше інформації дивіться у статті <a href="/uk/docs/Web/JavaScript/Memory_Management">Керування пам'яттю</a>.</p>
+
+<p>Оператор <code><strong>delete</strong></code> видаляє задану властивість з об'єкта. В разі успішного видалення, він поверне <code>true</code>, інакше поверне <code>false</code>. Однак, важливо враховувати наступні сценарії:</p>
+
+<ul>
+ <li>Якщо властивість, яку ви намагаєтесь видалити, не існує, <code>delete</code> не матиме жодного ефекту та поверне <code>true</code></li>
+ <li>Якщо властивість з таким самим ім'ям існує у ланцюзі прототипів об'єкта, тоді, після видалення, об'єкт використовуватиме властивість з ланцюжка прототипів (іншими словами, <code>delete</code> має ефект лише для особистих властивостей).</li>
+ <li>Будь-яка властивість, оголошена через {{jsxref("Statements/var","var")}}, не може бути видалена з глобальної області видимості чи з області видимості функції.
+  <ul>
+   <li>Таким чином, <code>delete</code> не може видаляти функції у глобальній області видимості (незалежно від того, чи є вони оголошеннями функції, чи функціональними виразами).</li>
+   <li>Функції, які є частиною об'єкта (не є частиною глобальної області видимості), можуть бути видалені оператором <code>delete</code>.</li>
+  </ul>
+ </li>
+ <li>Будь-яка властивість, оголошена через {{jsxref("Statements/let","let")}} або {{jsxref("Statements/const","const")}}, не може бути видалена з області видимості, всередині якої вона була оголошена.</li>
+ <li>Властивості, недоступні для налаштування, не можуть бути видалені. Це також стосується властивостей вбудованих об'єктів, таких як {{jsxref("Math")}}, {{jsxref("Array")}}, {{jsxref("Object")}}, та властивостей, які були створені як недоступні для налаштування за допомогою методів на кшталт {{jsxref("Object.defineProperty()")}}.</li>
+</ul>
+
+<p>Наступний фрагмент надає простий приклад:</p>
+
+<pre class="brush: js">var Employee = {
+  age: 28,
+  name: 'абв',
+  designation: 'розробник'
+}
+
+console.log(delete Employee.name);   // вертає true
+console.log(delete Employee.age);    // вертає true
+
+// При спробі видалити властивість, яка не існує,
+// повертається true
+console.log(delete Employee.salary); // вертає true
+</pre>
+
+<h3 id="Властивості_недоступні_для_налаштування">Властивості, недоступні для налаштування</h3>
+
+<p>Коли властивість позначена як недоступна для налаштування, <code>delete</code> не матиме жодного ефекту та поверне <code>false</code>. У строгому режимі це спричинить помилку <code>TypeError</code>.</p>
+
+<pre class="brush: js">var Employee = {};
+Object.defineProperty(Employee, 'name', {configurable: false});
+
+console.log(delete Employee.name);  // вертає false
+</pre>
+
+<p>{{jsxref("Statements/var","var")}}, {{jsxref("Statements/let","let")}} та {{jsxref("Statements/const","const")}} створюють властивості, недоступні для налаштування, які не можуть бути видалені оператором <code>delete</code>:</p>
+
+<pre class="brush: js">var nameOther = 'XYZ';
+
+// Ми можемо звернутися до цієї глобальної властивості так:
+Object.getOwnPropertyDescriptor(window, 'nameOther');
+
+// виведе: Object {value: "XYZ",
+//                  writable: true,
+//                  enumerable: true,
+//                  <strong>configurable: false</strong>}
+
+// Оскільки "nameOther" додана за допомогою ключового
+// слова var, вона позначена як недоступна для налаштування
+
+delete nameOther;   // вертає false</pre>
+
+<p>У строгому режимі це спричинило б виняток.</p>
+
+<h3 id="Строгий_режим_проти_нестрогого_режиму">Строгий режим проти нестрогого режиму</h3>
+
+<p>У строгому режимі, якщо <code>delete</code> використовується на прямому посиланні на змінну, аргумент функції чи ім'я функції, це викине {{jsxref("SyntaxError")}}<strong>.</strong></p>
+
+<p>Будь-яка змінна, оголошена через <code>var</code>, позначається як недоступна для налаштування. У наступному прикладі змінна <code>salary</code> недоступна для налаштування та не може бути видалена. У нестрогому режимі ця операція <code>delete</code> поверне <code>false</code>.</p>
+
+<pre class="brush: js">function Employee() {
+  delete salary;
+  var salary;
+}
+
+Employee();
+</pre>
+
+<p>Подивимось, як той самий код поводиться у строгому режимі. Замість того, щоб повернути <code>false</code>, код викидає <code>SyntaxError</code>.</p>
+
+<pre class="brush: js">"use strict";
+
+function Employee() {
+  delete salary;  // SyntaxError
+  var salary;
+}
+
+// Схожим чином, пряме звернення до фукнції
+// оператором delete викине SyntaxError
+
+function DemoFunction() {
+  //якийсь код
+}
+
+delete DemoFunction; // SyntaxError
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">// Створює властивість adminName у глобальній області видимості.
+adminName = 'абв';
+
+// Створює властивість empCount у глобальній області видимості.
+// Оскільки ми використовуємо var, вона недоступна для налаштування. Так само як з let та const.
+var empCount = 43;
+
+EmployeeDetails = {
+  name: 'абв',
+  age: 5,
+  designation: 'Розробник'
+};
+
+// adminName - властивість у глобальній області видимості.
+// Вона може бути видалена, оскільки була створена без var,
+// і тому доступна для налаштування.
+delete adminName;       // вертає true
+
+// З іншого боку, empCount недоступна для налаштування,
+// оскільки використовувався оператор var.
+delete empCount;       // вертає false
+
+// delete можна використовувати, щоб видаляти властивості об'єктів.
+delete EmployeeDetails.name; // вертає true
+
+<strong>// </strong>Навіть якщо властивість не існує, delete поверне "true".
+delete EmployeeDetails.salary; // вертає true
+
+// delete не діє на вбудовані статичні властивості.
+delete Math.PI; // вертає false
+
+// EmployeeDetails - властивість у глобальній області видимості.
+// Оскільки вона була визначена без "var", вона доступна для налаштування.
+delete EmployeeDetails;   // вертає true
+
+function f() {
+  var z = 44;
+
+  // delete не діє на локальні змінні
+  delete z;     // вертає false
+}
+</pre>
+
+<h3 id="delete_та_ланцюжок_прототипів"><code>delete</code> та ланцюжок прототипів</h3>
+
+<p>У наступному прикладі ми видаляємо особисту властивість об'єкта, в той час, як однойменна властивість доступна через ланцюжок прототипів:</p>
+
+<pre class="brush: js">function Foo() {
+  this.bar = 10;
+}
+
+Foo.prototype.bar = 42;
+
+var foo = new Foo();
+
+// foo.bar є особистою властивістю
+console.log(foo.bar); // 10
+
+// Видаляємо особисту властивість
+// у об'єкті foo.
+delete foo.bar; // вертає true
+
+// Властивість foo.bar досі доступна
+// у ланцюжку прототипів.
+console.log(foo.bar); // 42
+
+// Видаляємо властивість прототипу.
+delete Foo.prototype.bar; // вертає true
+
+// Властивість "bar" більше не може
+// наслідуватись від Foo, оскільки була
+// видалена.
+console.log(foo.bar); // undefined</pre>
+
+<h3 id="Видалення_елементів_масиву">Видалення елементів масиву</h3>
+
+<p>Коли ви видаляєте елемент масиву, довжина масиву не змінюється. Це зберігається, навіть якщо ви видалите останній елемент масиву.</p>
+
+<p>Коли оператор <code>delete</code> видаляє елемент масиву, цей елемент більше не існує у масиві. У наступному прикладі <code>trees[3]</code> видаляється за допомогою <code>delete</code>.</p>
+
+<pre class="brush: js">var trees = ['секвоя', 'лавр', 'кедр', 'дуб', 'клен'];
+delete trees[3];
+if (3 in trees) {
+    // це не виконається
+}</pre>
+
+<p>Якщо ви бажаєте, щоб елемент масиву існував, але мав значення undefined, скористайтесь значенням <code>undefined</code> замість оператора <code>delete</code>. У наступному прикладі елементу <code>trees[3]</code> присвоюється значення undefined, але елемент масиву досі існує:</p>
+
+<pre class="brush: js">var trees = ['секвоя', 'лавр', 'кедр', 'дуб', 'клен'];
+trees[3] = undefined;
+if (3 in trees) {
+    // це виконається
+}</pre>
+
+<p>Якщо замість цього ви хочете видалити елемент масиву, змінивши вміст масиву, скористайтесь методом <code>{{jsxref("Array.splice", "splice")}}</code>. У наступному прикладі елемент <code>trees[3]</code> повністю видаляється з масиву за допомогою методу <code>{{jsxref("Array.splice", "splice")}}</code>:</p>
+
+<pre class="brush: js">var trees = ['секвоя', 'лавр', 'кедр', 'дуб', 'клен'];
+trees.splice(3,1);
+console.log(trees); // ["секвоя", "лавр", "кедр", "клен"]
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-delete-operator', 'The delete Operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-delete-operator', 'The delete Operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.4.1', 'The delete Operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.4.1', 'The delete Operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.2.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.delete")}}</p>
+
+<h2 id="Примітки_щодо_кросбраузерності">Примітки щодо кросбраузерності</h2>
+
+<p>Хоча ECMAScript робить порядок перебору об'єктів залежним від реалізації, може здаватись, що усі основні веб-переглядачі підтримують порядок перебору, в якому властивість, додана першою, йде першою (принаймні, для не прототипних властивостей). Однак, у Internet Explorer при використанні <code>delete</code> з властивістю, виникає дивна поведінка, яка заважає іншим переглядачам використовувати прості об'єкти, такі як об'єктні літерали, як впорядковані асоціативні масиви. У Explorer, хоча <em>значення </em>властивості дійсно стає undefined, але, якщо пізніше користувач знову додає властивість з таким самим ім'ям, властивість буде перебиратися на своїй <em>старій</em> позиції, а не в кінці перебору, як можна було б очікувати після видалення властивості та повторного її додавання.</p>
+
+<p>Якщо ви хочете використовувати впорядкований асоціативний масив у кросбраузерному середовищі, використовуйте об'єкт {{jsxref("Map")}}, якщо він доступний, або імітуйте цю структуру двома окремими масивами (один для ключів, а інший для значень), або створіть масив об'єктів з однією властивістю, і т. д.</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="http://perfectionkills.com/understanding-delete/">In depth analysis on delete</a></li>
+ <li>{{jsxref("Reflect.deleteProperty()")}}</li>
+ <li>{{jsxref("Map.prototype.delete()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/division/index.html b/files/uk/web/javascript/reference/operators/division/index.html
new file mode 100644
index 0000000000..b1e95b2eb3
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/division/index.html
@@ -0,0 +1,75 @@
+---
+title: Ділення (/)
+slug: Web/JavaScript/Reference/Operators/Division
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Division
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор ділення (<code>/</code>) повертає частку своїх операндів, де лівий операнд є діленим, а правий операнд є дільником.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-division.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><strong>Оператор:</strong> <var>x</var> / <var>y</var>
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Базове_ділення">Базове ділення</h3>
+
+<pre class="brush: js notranslate">1 / 2              // 0.5
+
+Math.floor(3 / 2) // 1
+
+1.0 / 2.0         // 0.5
+</pre>
+
+<h3 id="Ділення_на_нуль">Ділення на нуль</h3>
+
+<pre class="brush: js notranslate">2.0 / 0     // Infinity
+
+2.0 / 0.0   // Infinity, тому що 0.0 === 0
+
+2.0 / -0.0  // -Infinity</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Division operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.division")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Addition">Оператор додавання</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Subtraction">Оператор віднімання</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Multiplication">Оператор множення</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Remainder">Оператор остачі</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Exponentiation">Оператор піднесення до степеня</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Increment">Оператор інкременту</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Decrement">Оператор декременту</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_negation">Унарний мінус</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_plus">Унарний плюс</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/division_assignment/index.html b/files/uk/web/javascript/reference/operators/division_assignment/index.html
new file mode 100644
index 0000000000..f32b4020a0
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/division_assignment/index.html
@@ -0,0 +1,61 @@
+---
+title: Присвоєння з діленням (/=)
+slug: Web/JavaScript/Reference/Operators/Division_assignment
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+  - Оператор присвоєння
+translation_of: Web/JavaScript/Reference/Operators/Division_assignment
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор присвоєння з діленням (<code>/=</code>) ділить змінну на значення правого операнда та присвоює результат змінній.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-division-assignment.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x /= y
+<strong>Значення:</strong> x  = x / y</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_присвоєння_з_діленням">Використання присвоєння з діленням</h3>
+
+<pre class="brush: js notranslate">// Розглянемо таку змінну
+// bar = 5
+
+bar /= 2     // 2.5
+bar /= 'няв' // NaN
+bar /= 0     // Infinity</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.division_assignment")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8_%D0%BF%D1%80%D0%B8%D1%81%D0%B2%D0%BE%D1%94%D0%BD%D0%BD%D1%8F">Оператори присвоєння у посібнику JS</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Division">Оператор ділення</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/equality/index.html b/files/uk/web/javascript/reference/operators/equality/index.html
new file mode 100644
index 0000000000..379b354b01
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/equality/index.html
@@ -0,0 +1,125 @@
+---
+title: Рівність (==)
+slug: Web/JavaScript/Reference/Operators/Equality
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Equality
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор рівності (<code>==</code>) перевіряє, чи два операнди рівні, повертаючи результат типу Boolean. На відміну від оператору <a href="/uk/docs/Web/JavaScript/Reference/Operators/Strict_equality">строгої рівності</a>, він намагається перетворити для порівняння операнди, які належать до різних типів.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-equality.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">x == y
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Оператори рівності (<code>==</code> та <code>!=</code>) використовують <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">алгоритм абстрактної рівності</a> для порівняння двох операндів. Його можна загалом описати наступним чином:</p>
+
+<ul>
+ <li>Якщо обидва операнди є об'єктами, повертати <code>true</code> тільки якщо обидва операнди посилаються на той самий об'єкт.</li>
+ <li>Якщо один операнд дорівнює <code>null</code>, а інший <code>undefined</code>, повертати <code>true</code>.</li>
+ <li>Якщо операнди належать до різних типів, спробувати привести їх до одного типу перед порівнянням:
+  <ul>
+   <li>При порівнянні числа з рядком спробувати перетворити рядок у числове значення.</li>
+   <li>Якщо один з операндів є типом <code>Boolean</code>, перетворити операнд Boolean на 1, якщо він дорівнює <code>true</code>, і на +0, якщо він дорівнює <code>false</code>.</li>
+   <li>Якщо один з операндів є об'єктом, а інший числом або рядком, спробувати перетворити об'єкт на примітив за допомогою методів об'єкта <code>valueOf()</code> та <code>toString()</code>.</li>
+  </ul>
+ </li>
+ <li>Якщо операнди належать до одного типу, вони порівнюються наступним чином:
+  <ul>
+   <li><code>String</code>: повернути <code>true</code> тільки якщо обидва операнди мають однакові символи у однаковому порядку.</li>
+   <li><code>Number</code>: повернути <code>true</code> тільки якщо обидва операнди мають однакове значення. <code>+0</code> та <code>-0</code> вважаються однаковим значенням. Якщо будь-який з операндів є <code>NaN</code>, повернути <code>false</code>.</li>
+   <li><code>Boolean</code>: повернути <code>true</code> тільки якщо обидва операнди дорівнюють <code>true</code> або обидва дорівнюють <code>false</code>.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Найбільш помітна відмінність між цим оператором та оператором <a href="/uk/docs/Web/JavaScript/Reference/Operators/Strict_equality">строгої рівності</a> (<code>===</code>) полягає в тому, що оператор строгої рівності не намагається виконувати перетворення типів. Натомість, оператор строгої рівності завжди вважає операнди різних типів різними.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Порівняння_без_перетворення_типів">Порівняння без перетворення типів</h3>
+
+<pre class="brush: js notranslate">1 == 1;              // true
+"привіт" == "привіт";  // true</pre>
+
+<h3 id="Порівняння_з_перетворенням_типів">Порівняння з перетворенням типів</h3>
+
+<pre class="brush: js notranslate">"1" ==  1;            // true
+1 == "1";             // true
+0 == false;           // true
+0 == null;            // false
+0 == undefined;       // false
+null == undefined;    // true
+
+const number1 = new Number(3);
+const number2 = new Number(3);
+number1 == 3;         // true
+number1 == number2;   // false</pre>
+
+<h3 id="Порівняння_обєктів">Порівняння об'єктів</h3>
+
+<pre class="brush: js notranslate">const object1 = {"key": "value"}
+const object2 = {"key": "value"};
+
+object1 == object2 // false
+object2 == object2 // true</pre>
+
+<h3 id="Порівняння_рядків_та_обєктів_String">Порівняння рядків та об'єктів String</h3>
+
+<p>Зауважте, що рядки, створені за допомогою <code>new String()</code>, є об'єктами. Якщо ви порівняєте один з них з рядковим літералом, об'єкт <code>String</code> буде перетворений на рядковий літерал, і їхній вміст буде порівнюватись. Однак, якщо обидва операнди є об'єктами <code>String</code>, вони порівнюються як об'єкти та мусять посилатись на один і той самий об'єкт, щоб вважатись однаковими:</p>
+
+<pre class="brush: js notranslate">const string1 = "привіт";
+const string2 = String("привіт");
+const string3 = new String("привіт");
+const string4 = new String("привіт");
+
+console.log(string1 == string2); // true
+console.log(string1 == string3); // true
+console.log(string2 == string3); // true
+console.log(string3 == string4); // false
+console.log(string4 == string4); // true</pre>
+
+<h3 id="Порівняння_дат_та_рядків">Порівняння дат та рядків</h3>
+
+<pre class="brush: js notranslate">const d = new Date('December 17, 1995 03:24:00');
+const s = d.toString(); // наприклад: "Sun Dec 17 1995 03:24:00 GMT-0800 (Pacific Standard Time)"
+console.log(d == s);    //true</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.equality")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Inequality">Оператор нерівності</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Strict_equality">Оператор строгої рівності</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Strict_inequality">Оператор строгої нерівності</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/exponentiation/index.html b/files/uk/web/javascript/reference/operators/exponentiation/index.html
new file mode 100644
index 0000000000..e50f793f42
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/exponentiation/index.html
@@ -0,0 +1,102 @@
+---
+title: Піднесення до степеня (**)
+slug: Web/JavaScript/Reference/Operators/Exponentiation
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Exponentiation
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор піднесення до степеня (<code>**</code>) повертає результат піднесення першого операнду до показника степеня другого операнду.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-exponentiation.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><strong>Оператор:</strong> <var>var1</var> ** <var>var2</var>
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Оператор піднесення до степеня правоасоціативний. <code><var>a</var> ** <var>b</var> ** <var>c</var></code> дорівнює <code><var>a</var> ** (<var>b</var> ** <var>c</var>)</code>.</p>
+
+<p>У більшості мов, таких як PHP, Python та інших, які мають оператор піднесення до степеня (<code>**</code>), оператор піднесення до степеня має вищий пріоритет, ніж унарні оператори, такі як унарний <code>+</code> та унарний <code>-</code>, але існує кілька винятків. Наприклад, у Bash оператор <code>**</code> має нижчий пріоритет, ніж унарні оператори.</p>
+
+<p>У JavaScript неможливо написати неоднозначний вираз піднесення до степеня, тобто, ви не можете поставити унарний оператор (<code>+/-/~/!/delete/void/typeof</code>) одразу перед числом основи степеня.</p>
+
+<pre class="brush: js notranslate">-2 ** 2;
+// 4 у Bash, -4 у інших мовах.
+// Це помилка JavaScript, оскільки операція неоднозначна.
+
+
+-(2 ** 2);
+// -4 у JavaScript, а наміри автора однозначні.
+</pre>
+
+<p>Зауважте, що деякі мови програмування використовують символ карет <kbd>^</kbd> для піднесення до степеня, але JavaScript використовує цей символ як <a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR">оператор виключного побітового АБО (XOR)</a>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Базове_піднесення_до_степеня">Базове піднесення до степеня</h3>
+
+<pre class="brush: js notranslate">2 ** 3   // 8
+3 ** 2   // 9
+3 ** 2.5 // 15.588457268119896
+10 ** -1 // 0.1
+NaN ** 2 // NaN
+</pre>
+
+<h3 id="Асоціативність">Асоціативність</h3>
+
+<pre class="brush: js notranslate">2 ** 3 ** 2   // 512
+2 ** (3 ** 2) // 512
+(2 ** 3) ** 2 // 64</pre>
+
+<h3 id="Використання_з_унарними_операторами">Використання з унарними операторами</h3>
+
+<p>Щоб змінити знак результату виразу піднесення до степеня на протилежний:</p>
+
+<pre class="brush: js notranslate">-(2 ** 2) // -4
+</pre>
+
+<p>Щоб зробити основу степеня у виразі від'ємним числом:</p>
+
+<pre class="brush: js notranslate">(-2) ** 2 // 4
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-exp-operator', 'Exponentiation operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.exponentiation")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Addition">Оператор додавання</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Subtraction">Оператор віднімання</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Division">Оператор ділення</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Multiplication">Оператор множення</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Remainder">Оператор остачі</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Increment">Оператор інкременту</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Decrement">Оператор декременту</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_negation">Унарний мінус</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_plus">Унарний плюс</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/exponentiation_assignment/index.html b/files/uk/web/javascript/reference/operators/exponentiation_assignment/index.html
new file mode 100644
index 0000000000..c5bd4c1353
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/exponentiation_assignment/index.html
@@ -0,0 +1,60 @@
+---
+title: Присвоєння з піднесенням до степеня (**=)
+slug: Web/JavaScript/Reference/Operators/Exponentiation_assignment
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+  - Оператор присвоєння
+translation_of: Web/JavaScript/Reference/Operators/Exponentiation_assignment
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор присвоєння з піднесенням до степеня (<code>**=</code>) підносить значення змінної до показника степеня правого операнда.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-exponentiation-assignment.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x **= y
+<strong>Значення:</strong> x  = x ** y</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_присвоєння_з_піднесенням_до_степеня">Використання присвоєння з піднесенням до степеня</h3>
+
+<pre class="brush: js notranslate">// Розглянемо таку змінну
+// bar = 5
+
+bar **= 2     // 25
+bar **= 'гав' // NaN</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.exponentiation_assignment")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8_%D0%BF%D1%80%D0%B8%D1%81%D0%B2%D0%BE%D1%94%D0%BD%D0%BD%D1%8F">Оператори присвоєння у посібнику JS</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Exponentiation">Оператор піднесення до степеня</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/expression_closures/index.html b/files/uk/web/javascript/reference/operators/expression_closures/index.html
new file mode 100644
index 0000000000..e3a0bff185
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/expression_closures/index.html
@@ -0,0 +1,78 @@
+---
+title: Вирази-замикання
+slug: Web/JavaScript/Reference/Operators/Expression_closures
+tags:
+  - Function
+  - JavaScript
+  - Оператор
+  - застарілий
+  - нестандартний
+translation_of: Archive/Web/JavaScript/Expression_closures
+---
+<div>{{JSSidebar("Operators")}}{{Non-standard_Header}}{{Obsolete_Header("gecko60")}}
+<div class="warning"><strong>Нестандартний. Не використовуйте!</strong><br>
+Синтаксис виразів-замикань є нерекомендованою особливою функціональністю Firefox, він був прибраний, починаючи з Firefox 60. Для використання у майбутньому розгляньте <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкові функції</a>.</div>
+</div>
+
+<p>Вирази-замикання - це скорочений синтаксис для написання простих функцій.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]])
+   <em>expression</em>
+</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Ім'я функції. Можна пропустити, в цьому випадку функція буде <em>анонімною</em>. Ім'я доступне лише всередині тіла функції.</dd>
+ <dt><code>paramN</code></dt>
+ <dd>Ім'я аргумента, що передається у функцію. Функція може мати до 255 аргументів.</dd>
+ <dt><code>expression</code></dt>
+ <dd>Вираз, який складає тіло функції.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Це доповнення є не більше, ніж скороченим синтаксисом для написання простих функцій, надаючи мові щось схоже на типову <a class="external" href="https://uk.wikipedia.org/wiki/%D0%9B%D1%8F%D0%BC%D0%B1%D0%B4%D0%B0-%D1%87%D0%B8%D1%81%D0%BB%D0%B5%D0%BD%D0%BD%D1%8F">нотацію лямбда-числення</a>.</p>
+
+<p>JavaScript 1.7 та старші:</p>
+
+<pre class="brush: js">function(x) { return x * x; }</pre>
+
+<p>JavaScript 1.8:</p>
+
+<pre class="brush: js">function(x) x * x</pre>
+
+<p>Цей синтаксис дозволяє не писати фігурні дужки та оператор 'return' - вони стають неявними. Такий запис не надає жодної іншої переваги в написанні коду, окрім синтаксично коротшого запису.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Скорочений запис для зв'язування прослуховувачів подій:</p>
+
+<pre class="brush: js"> document.addEventListener('click', function() false, true);
+</pre>
+
+<p>Використання цієї нотації з деякими функціями масивів з JavaScript 1.6:</p>
+
+<pre class="brush: js">elems.some(function(elem) elem.type == 'text');
+</pre>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.expression_closures")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{JSxRef("Functions", "Функції")}}</li>
+ <li>{{JSxRef("Function")}}</li>
+ <li>{{JSxRef("Statements/function", "оператор function")}}</li>
+ <li>{{JSxRef("Operators/function", "функціональний вираз")}}</li>
+ <li>{{JSxRef("Statements/function*", "оператор function*")}}</li>
+ <li>{{JSxRef("Operators/function*", "вираз function*")}}</li>
+ <li>{{JSxRef("GeneratorFunction")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/function/index.html b/files/uk/web/javascript/reference/operators/function/index.html
new file mode 100644
index 0000000000..8e8760660b
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/function/index.html
@@ -0,0 +1,154 @@
+---
+title: Функціональний вираз
+slug: Web/JavaScript/Reference/Operators/function
+tags:
+  - Function
+  - JavaScript
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/function
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Ключове слово <strong><code>function</code></strong> може використовуватись для визначення функції всередині виразу.</p>
+
+<p>Ви також можете визначати функції за допомогою конструктора <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a> та <a href="/uk/docs/Web/JavaScript/Reference/Statements/function"><code>оголошення функції</code></a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-functionexpression.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var myFunction = function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) {
+   <em>statements</em>
+};</pre>
+
+<p>Починаючи з ES2015 ви також можете скористатись <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілковими функціями</a>.</p>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Ім'я функції. Можна пропустити, в цьому випадку функція буде <em>анонімною</em>. Ім'я доступне лише у тілі функції.</dd>
+ <dt><code>paramN</code></dt>
+ <dd>Ім'я аргументу, який передається у функцію.</dd>
+ <dt><code>statements</code></dt>
+ <dd>Інструкції, що складають тіло функції.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Функціональний вираз дуже схожий на оголошення функції та має майже такий самий синтаксис (дивіться <a href="/uk/docs/Web/JavaScript/Reference/Statements/function">оголошення функції</a>). Головна відмінність між функціональним виразом та оголошенням функції - це <em>ім'я функції</em>, яке може бути пропущене у функціональних виразах для створення <em>анонімних</em> функцій. Функціональний вираз можна використовувати як <a href="/uk/docs/Glossary/IIFE">НВФВ (Негайно виконуваний функціональний вираз)</a>, який запускається одразу після визначення. Дивіться також главу про <a href="/uk/docs/Web/JavaScript/Reference/Functions">функції</a>, щоб дізнатись більше.</p>
+
+<h3 id="Підняття_функціонального_виразу">Підняття функціонального виразу</h3>
+
+<p>Функціональні вирази у JavaScript не піднімаються, на відміну від {{jsxref("Statements/function", "оголошень функцій", "#Підняття_оголошення_функції")}}. Не можна використовувати функціональний вираз до його визначення:</p>
+
+<pre class="brush: js">console.log(notHoisted) // undefined
+//хоча імена змінних піднімаються, визначення не піднімається і дорівнює undefined.
+notHoisted(); // TypeError: notHoisted is not a function
+
+var notHoisted = function() {
+   console.log('bar');
+};
+</pre>
+
+<h3 id="Іменований_функціональний_вираз">Іменований функціональний вираз</h3>
+
+<p>Якщо бажаєте посилатись на поточну функцію всередині тіла функції, то вам потрібно створити іменований функціональний вираз. <u><strong>Це ім'я є локальним і доступне тільки всередині тіла (області видимості) функції</strong></u>. Це також дозволяє не використовувати нестандартну властивість <code><a href="/uk/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code>.</p>
+
+<pre class="brush: js">var math = {
+  'factit': function factorial(n) {
+    console.log(n)
+    if (n &lt;= 1) {
+      return 1;
+    }
+    return n * factorial(n - 1);
+  }
+};
+
+math.factit(3) //3;2;1;
+</pre>
+
+<p>Змінна, якій присвоюється функціональний вираз, матиме властивість <code>name</code> (ім'я). Ім'я не змінюється, якщо вираз присвоюється іншій змінній. Якщо ім'я функції пропущене, це буде ім'я змінної (неявне ім'я). Якщо ім'я функції присутнє, це буде ім'я функції (явне ім'я). Це також стосується <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкових функцій </a>(стрілкові функції не мають імені, тому ви можете задати лише неявне ім'я змінної).</p>
+
+<pre class="brush: js">var foo = function() {}
+foo.name // "foo"
+
+var foo2 = foo
+foo2.name // "foo"
+
+var bar = function baz() {}
+bar.name // "baz"
+
+console.log(foo === foo2); // true
+console.log(typeof baz); // undefined
+console.log(bar === baz); // false (помилка, тому що baz == undefined)
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Наступний приклад визначає неіменовану функцію та присвоює її <code>x</code>. Функція вертає квадрат свого аргументу:</p>
+
+<pre class="brush: js">var x = function(y) {
+   return y * y;
+};
+</pre>
+
+<p>Найчастіше вони використовуються як <a href="/uk/docs/Glossary/Callback_function">функції зворотного виклику</a>:</p>
+
+<pre class="brush: js">button.addEventListener('click', function(event) {
+    console.log('кнопка натиснута!')
+})</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.5.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.function")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Functions/Стрілкові_функції", "Стрілкові функції")}}</li>
+ <li>{{jsxref("Functions", "Функції та область видимості функції")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Statements/function", "оголошення функції")}}</li>
+ <li>{{jsxref("Statements/function*", "оголошення function*")}}</li>
+ <li>{{jsxref("Operators/function*", "вираз function*")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li>{{jsxref("Statements/async_function", "async function")}}</li>
+ <li>{{jsxref("Operators/async_function", "вираз async function")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/function_star_/index.html b/files/uk/web/javascript/reference/operators/function_star_/index.html
new file mode 100644
index 0000000000..677eb8b1fb
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/function_star_/index.html
@@ -0,0 +1,90 @@
+---
+title: Вираз function*
+slug: Web/JavaScript/Reference/Operators/function*
+tags:
+  - ECMAScript 2015
+  - Function
+  - JavaScript
+  - Ітератор
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/function*
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Ключове слово <strong><code>function*</code></strong> може використовуватись для визначення функції-генератора всередині виразу.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-functionasteriskexpression.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">function* [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) {
+   <em>statements</em>
+}</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Ім'я функції. Можна пропустити, в цьому випадку функція буде <em>анонімною</em>. Ім'я доступне тільки всередині тіла функції.</dd>
+ <dt><code>paramN</code></dt>
+ <dd>Ім'я аргументу, що передається у функцію. Функція може мати до 255 аргументів.</dd>
+ <dt><code>statements</code></dt>
+ <dd>Інструкції, що складають тіло функції.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Вираз <code>function*</code> дуже схожий та має практично однаковий синтаксис з {{jsxref('Statements/function*', 'оператором function*')}}. Головна відмінність між виразом <code>function*</code> та оператором <code>function*</code> - це <em>ім'я функції,</em> яке можна не вказувати у виразах <code>function*</code>, щоб створювати <em>анонімні</em> функції-генератори. Дивіться також більше інформації у главі про <a href="/uk/docs/Web/JavaScript/Reference/Functions">функції</a>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Наступний приклад визначає безіменну функцію-генератор та присвоює її змінній <code>x</code>. Ця функція видає квадрат свого аргументу:</p>
+
+<pre class="brush: js">var x = function*(y) {
+   yield y * y;
+};
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator-function-definitions', 'function*')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.function_star")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Statements/function*", "оператор function*")}}</li>
+ <li>Об'єкт {{jsxref("GeneratorFunction")}}</li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору">Протоколи перебору</a></li>
+ <li>{{jsxref("Operators/yield", "yield")}}</li>
+ <li>{{jsxref("Operators/yield*", "yield*")}}</li>
+ <li>Об'єкт {{jsxref("Function")}}</li>
+ <li>{{jsxref("Statements/function", "оператор function")}}</li>
+ <li>{{jsxref("Operators/function", "функціональний вираз")}}</li>
+ <li>{{jsxref("Functions", "Функції")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/generator_comprehensions/index.html b/files/uk/web/javascript/reference/operators/generator_comprehensions/index.html
new file mode 100644
index 0000000000..30d8a0f6d7
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/generator_comprehensions/index.html
@@ -0,0 +1,174 @@
+---
+title: Заповнення генераторів
+slug: Web/JavaScript/Reference/Operators/Generator_comprehensions
+tags:
+  - JavaScript
+  - Ітератор
+  - застарілий
+  - нестандартний
+translation_of: Archive/Web/JavaScript/Generator_comprehensions
+---
+<div>{{JSSidebar("Operators")}}{{Non-standard_Header}}{{Obsolete_Header("gecko58")}}
+<div class="blockIndicator warning">
+<p><strong>Нестандартний. Не використовуйте!</strong><br>
+ Синтаксис заповнень генераторів є нестандартним та був прибраний, починаючи з Firefox 58. Для використання в майбутньому розгляньте {{JSxRef("Statements/function*", "генератори", "", 1)}}.</p>
+</div>
+</div>
+
+<p>Синтаксис <strong>заповнення генераторів </strong>(generator comprehension) був виразом JavaScript, який дозволяв швидко збирати нову функцію-генератор, базуючись на вже існуючому ітерабельному об'єкті. Однак, він був прибраний зі стандарту та з реалізації Firefox. Не використовуйте його!</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">(for (x of iterable) x)
+(for (x of iterable) if (condition) x)
+(for (x of iterable) for (y of iterable) x + y)
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>У заповненнях генераторів дозволені наступні два види компонентів:</p>
+
+<ul>
+ <li>{{JSxRef("Statements/for...of", "for...of")}} та</li>
+ <li>{{JSxRef("Statements/if...else", "if")}}</li>
+</ul>
+
+<p>Перебір <code>for-of</code> завжди є першим компонентом. Можна використовувати більше одного перебору <code>for-of</code> чи if-конструкцій.</p>
+
+<p>Значним недоліком {{JSxRef("Operators/Array_comprehensions","заповнень масивів","","true")}} є те, що вони можуть спричинити конструювання у пам'яті цілого нового масиву. Коли самі вхідні дані для заповнення є маленьким масивом, затрати пам'яті є незначними — але коли вхідні дані є великим масивом, або затратним (чи взагалі нескінченним) генератором, створення нового масиву може бути проблематичним.</p>
+
+<p>Генератори дозволяють ліниві обчислення послідовностей, з обчисленням елементів на вимогу, коли є потреба. Заповнення генераторів синтаксично майже ідентичні заповненням масивів — вони використовують круглі дужки замість квадратних — але замість створення масиву вони створюють генератор, який може виконуватися ліниво. Можете вважати їх скороченим синтаксисом для створення генераторів.</p>
+
+<p>Припустимо, ми маємо ітератор <code>it</code>, який перебирає великі послідовності цілих чисел. Ми бажаємо створити новий ітератор, який перебиратиме їхні подвоєні значення. Заповнення масиву створило б цілий масив у пам'яті, що містив би подвоєні значення:</p>
+
+<pre class="brush: js">var doubles = [for (i in it) i * 2];
+</pre>
+
+<p>Заповнення генератора, з іншого боку, створило б новий ітератор, який створював би подвоєні значення на вимогу, в разі потреби:</p>
+
+<pre class="brush: js">var it2 = (for (i in it) i * 2);
+console.log(it2.next()); // Перше значення з it, подвоєне
+console.log(it2.next()); // Друге значення з it, подвоєне
+</pre>
+
+<p>Коли заповнення генератора використовується як аргумент функції, круглі дужки, що використовуються для виклику функції, означають, що зовнішні дужки можна пропустити:</p>
+
+<pre class="brush: js">var result = doSomething(for (i in it) i * 2);
+</pre>
+
+<p>Значною відмінністю між цими двома прикладами є те, що, використовуючи заповнення генератора, ви перебиратимете структуру 'obj' лише один раз, всього, на відміну від одного обходу при заповненні масиву та ще одного під час його перебору.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Прості_заповнення_генераторів">Прості заповнення генераторів</h3>
+
+<pre class="brush:js">(for (i of [1, 2, 3]) i * i );
+// функція-генератор, що видає 1, 4 та 9
+
+[...(for (i of [1, 2, 3]) i * i )];
+// [1, 4, 9]
+
+var abc = ['А', 'Б', 'В'];
+(for (letters of abc) letters.toLowerCase());
+// функція-генератор, що видає "а", "б" та "в"
+</pre>
+
+<h3 id="Заповнення_генераторів_з_оператором_if">Заповнення генераторів з оператором if</h3>
+
+<pre class="brush: js">var years = [1954, 1974, 1990, 2006, 2010, 2014];
+
+(for (year of years) if (year &gt; 2000) year);
+// функція-генератор, що видає 2006, 2010 та 2014
+
+(for (year of years) if (year &gt; 2000) if (year &lt; 2010) year);
+// функція-генератор, що видає 2006, те саме нижче:
+
+(for (year of years) if (year &gt; 2000 &amp;&amp; year &lt; 2010) year);
+// функція-генератор, що видає 2006
+</pre>
+
+<h3 id="Заповнення_генераторів_у_порівнянні_з_функцією-генератором">Заповнення генераторів у порівнянні з функцією-генератором</h3>
+
+<p>Легко зрозуміти синтаксис заповнення генераторів, порівнявши його з функцією-генератором.</p>
+
+<p>Приклад 1: Простий генератор.</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3];
+
+// Функція-генератор
+(function*() {
+  for (let i of numbers) {
+    yield i * i;
+  }
+})();
+
+// Заповнення генератора
+(for (i of numbers) i * i );
+
+// Результат: Обидва повертають генератор, який видає [1, 4, 9]
+</pre>
+
+<p>Приклад 2: Використання <code>if</code> у генераторі.</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3];
+
+// Функція-генератор
+(function*() {
+  for (let i of numbers) {
+    if (i &lt; 3) {
+      yield i * 1;
+    }
+  }
+})();
+
+// Заповнення генератора
+(for (i of numbers) if (i &lt; 3) i);
+
+// Результат: обидва вертають генератор, який видає [1, 2]</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Заповнення генераторів було початково присутнє у чорнетці ECMAScript 2015, але було прибране у ревізії 27 (серпень 2014). Будь-ласка, дивіться семантику специфікації у старших ревізіях ES2015.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.generator_comprehensions")}}</p>
+
+<h2 id="Відмінності_від_заповнень_у_JS1.7JS1.8">Відмінності від заповнень у JS1.7/JS1.8</h2>
+
+<div class="blockIndicator warning">Заповнення JS1.7/JS1.8 були прибрані з Gecko 46 ({{bug(1220564)}}).</div>
+
+<p><strong>Старий синтаксис заповнень (більше не використовується!):</strong></p>
+
+<pre class="brush: js example-bad">(X for (Y in Z))
+(X for each (Y in Z))
+(X for (Y of Z))
+</pre>
+
+<p>Відмінності:</p>
+
+<ul>
+ <li>Заповнення ES7 створюють область видимості для кожного блоку "for", а не для всього заповнення.
+  <ul>
+   <li>Старе: <code>[...(()=&gt;x for (x of [0, 1, 2]))][1]() // 2</code></li>
+   <li>Нове: <code>[...(for (x of [0, 1, 2]) ()=&gt;x)][1]() // 1, кожна ітерація створює свіже зв'язування для x. </code></li>
+  </ul>
+ </li>
+ <li>Заповнення ES7 починаються з "for", а не з виразу присвоювання.
+  <ul>
+   <li>Старе: <code>(i * 2 for (i of numbers))</code></li>
+   <li>Нове: <code>(for (i of numbers) i * 2)</code></li>
+  </ul>
+ </li>
+ <li>Заповнення ES7 можуть мати декілька компонентів <code>if</code> та <code>for</code>.</li>
+ <li>Заповнення ES7 працюють тільки з переборами <code>{{JSxRef("Statements/for...of", "for...of")}}</code>, а не з <code>{{JSxRef("Statements/for...in", "for...in")}}</code>.</li>
+</ul>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{JSxRef("Statements/for...of", "for...of")}}</li>
+ <li>{{JSxRef("Operators/Array_comprehensions", "Заповнення масивів")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/greater_than/index.html b/files/uk/web/javascript/reference/operators/greater_than/index.html
new file mode 100644
index 0000000000..4214afbf62
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/greater_than/index.html
@@ -0,0 +1,114 @@
+---
+title: Більше ніж (>)
+slug: Web/JavaScript/Reference/Operators/Greater_than
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Greater_than
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор більше ніж (<code>&gt;</code>) вертає <code>true</code>, якщо значення лівого операнда більше за значення правого операнда, і <code>false</code>, якщо навпаки.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-greater-than.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">x &gt; y</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Операнди порівнюються за допомогою алгоритму <a href="https://tc39.es/ecma262/#sec-abstract-relational-comparison">абстрактного порівняння</a>, який в загальних рисах наведений нижче:</p>
+
+<ul>
+ <li>Спочатку об'єкти перетворюються на прості типи за допомогою <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive">Symbol.ToPrimitive</a></code>.</li>
+ <li>Якщо обидва значення є рядками, вони порівнюються як рядки, на основі значень кодів символів Юнікоду, які в них містяться.</li>
+ <li>В іншому випадку JavaScript намагається перетворити нечислові типи на числові значення:
+  <ul>
+   <li>Значення Boolean <code>true</code> та <code>false</code> перетворюються на 1 та 0 відповідно.</li>
+   <li><code>null</code> перетворюється на 0.</li>
+   <li><code>undefined</code> перетворюється на <code>NaN</code>.</li>
+   <li>Рядки перетворюються, базуючись на значеннях, які вони містять, вони перетворюються на <code>NaN</code>, якщо не містять числових значень.</li>
+  </ul>
+ </li>
+ <li>Якщо будь-яким зі значень є <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a></code>, оператор вертає <code>false</code>.</li>
+ <li>В іншому випадку значення порівнюються як числові.</li>
+</ul>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Порівняння_рядків">Порівняння рядків</h3>
+
+<pre class="brush: js notranslate">console.log("а" &gt; "б");        // false
+console.log("а" &gt; "а");        // false
+console.log("а" &gt; "3");        // true</pre>
+
+<h3 id="Порівняння_рядка_з_числом">Порівняння рядка з числом</h3>
+
+<pre class="brush: js notranslate">console.log("5" &gt; 3);          // true
+console.log("3" &gt; 3);          // false
+console.log("3" &gt; 5);          // false
+
+console.log("привіт" &gt; 5);      // false
+console.log(5 &gt; "привіт");      // false
+
+console.log("5" &gt; 3n);         // true
+console.log("3" &gt; 5n);         // false</pre>
+
+<h3 id="Порівняння_числа_з_числом">Порівняння числа з числом</h3>
+
+<pre class="brush: js notranslate">console.log(5 &gt; 3);            // true
+console.log(3 &gt; 3);            // false
+console.log(3 &gt; 5);            // false</pre>
+
+<h3 id="Порівняння_числа_з_BigInt">Порівняння числа з BigInt</h3>
+
+<pre class="brush: js notranslate">console.log(5n &gt; 3);           // true
+console.log(3 &gt; 5n);           // false</pre>
+
+<h3 id="Порівняння_Boolean_null_undefined_NaN">Порівняння Boolean, null, undefined, NaN</h3>
+
+<pre class="brush: js notranslate">console.log(true &gt; false);     // true
+console.log(false &gt; true);     // false
+
+console.log(true &gt; 0);         // true
+console.log(true &gt; 1);         // false
+
+console.log(null &gt; 0);         // false
+console.log(1 &gt; null);         // true
+
+console.log(undefined &gt; 3);    // false
+console.log(3 &gt; undefined);    // false
+
+console.log(3 &gt; NaN);          // false
+console.log(NaN &gt; 3);          // false</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.greater_than")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal">Оператор більше чи дорівнює</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Less_than">Оператор менше ніж</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal">Оператор менше чи дорівнює</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/greater_than_or_equal/index.html b/files/uk/web/javascript/reference/operators/greater_than_or_equal/index.html
new file mode 100644
index 0000000000..48fd73bebf
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/greater_than_or_equal/index.html
@@ -0,0 +1,99 @@
+---
+title: Більше чи дорівнює (>=)
+slug: Web/JavaScript/Reference/Operators/Greater_than_or_equal
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Greater_than_or_equal
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор більше чи дорівнює (<code>&gt;=</code>) вертає <code>true</code>, якщо значення лівого операнда більше за значення правого операнда, або дорівнює йому, інакше вертає <code>false</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-greater-than-or-equal.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"> x &gt;= y</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Операнди порівнюються за допомогою алгоритму <a class="external external-icon" href="https://tc39.es/ecma262/#sec-abstract-relational-comparison" rel="noopener">абстрактного порівняння</a>. Дивіться опис алгоритму у документації оператора <a href="/uk/docs/Web/JavaScript/Reference/Operators/Greater_than">більше ніж</a>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Порівняння_рядків">Порівняння рядків</h3>
+
+<pre class="brush: js notranslate">console.log("а" &gt;= "б");     // false
+console.log("а" &gt;= "а");     // true
+console.log("а" &gt;= "3");     // true
+</pre>
+
+<h3 id="Порівняння_рядка_з_числом">Порівняння рядка з числом</h3>
+
+<pre class="brush: js notranslate">console.log("5" &gt;= 3);       // true
+console.log("3" &gt;= 3);       // true
+console.log("3" &gt;= 5);       // false
+
+console.log("привіт" &gt;= 5);   // false
+console.log(5 &gt;= "привіт");   // false</pre>
+
+<h3 id="Порівняння_числа_з_числом">Порівняння числа з числом</h3>
+
+<pre class="brush: js notranslate">console.log(5 &gt;= 3);         // true
+console.log(3 &gt;= 3);         // true
+console.log(3 &gt;= 5);         // false</pre>
+
+<h3 id="Порівняння_числа_з_BigInt">Порівняння числа з BigInt</h3>
+
+<pre class="brush: js notranslate">console.log(5n &gt;= 3);        // true
+console.log(3 &gt;= 3n);        // true
+console.log(3 &gt;= 5n);        // false</pre>
+
+<h3 id="Порівняння_Boolean_null_undefined_NaN">Порівняння Boolean, null, undefined, NaN</h3>
+
+<pre class="brush: js notranslate">console.log(true &gt;= false);  // true
+console.log(true &gt;= true);   // true
+console.log(false &gt;= true);  // false
+
+console.log(true &gt;= 0);      // true
+console.log(true &gt;= 1);      // true
+
+console.log(null &gt;= 0);      // true
+console.log(1 &gt;= null);      // true
+
+console.log(undefined &gt;= 3); // false
+console.log(3 &gt;= undefined); // false
+
+console.log(3 &gt;= NaN);       // false
+console.log(NaN &gt;= 3);       // false</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.greater_than_or_equal")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Greater_than">Оператор більше ніж</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Less_than">Оператор менше ніж</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal">Оператор менше чи дорівнює</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/grouping/index.html b/files/uk/web/javascript/reference/operators/grouping/index.html
new file mode 100644
index 0000000000..bb740ed3a0
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/grouping/index.html
@@ -0,0 +1,90 @@
+---
+title: Оператор групування
+slug: Web/JavaScript/Reference/Operators/Grouping
+tags:
+  - JavaScript
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Grouping
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор групування <code>( )</code> контролює пріоритет обчислення у виразах.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-groupingoperator.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"> ( )</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Оператор групування складається з пари дужок, які ставляться навколо виразу або підвиразу для заміщення звичайного <a href="/uk/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">пріоритету операторів</a>, щоб вирази з нижчим пріоритетом могли бути обчислені перед виразами з вищим пріоритетом. Як зрозуміло з назви, він групує те, що знаходиться всередині дужок.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Заміщення обчислення спочатку множення та ділення, потім додавання та віднімання, щоб обчислити спочатку додавання.</p>
+
+<pre class="brush:js">var a = 1;
+var b = 2;
+var c = 3;
+
+// пріоритет за замовчуванням
+a + b * c     // 7
+// обчислюється наступним чином
+a + (b * c)   // 7
+
+// тепер заміщуємо пріоритет,
+// додавання перед множенням
+(a + b) * c   // 9
+
+// що є еквівалентним
+a * c + b * c // 9
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-grouping-operator', 'The Grouping Operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-grouping-operator', 'The Grouping Operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.1.6', 'The Grouping Operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.1.4', 'The Grouping Operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.grouping")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Пріоритет операторів</a></li>
+ <li>{{jsxref("Operators/delete", "delete")}}</li>
+ <li>{{jsxref("Operators/typeof", "typeof")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/in/index.html b/files/uk/web/javascript/reference/operators/in/index.html
new file mode 100644
index 0000000000..5de860492c
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/in/index.html
@@ -0,0 +1,150 @@
+---
+title: Оператор in
+slug: Web/JavaScript/Reference/Operators/in
+tags:
+  - JavaScript
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/in
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Оператор <code>in</code> </strong>повертає<strong> </strong><code>true</code>, якщо вказана властивість присутня у вказаному об'єкті або у його ланцюжку прототипів.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/expressions-inoperator.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>prop</em> in <em>objectName</em></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Рядок або символ, що є іменем властивості або індексом масиву (не символи будуть приведені до рядка).</dd>
+</dl>
+
+<dl>
+ <dt><code>objectName</code></dt>
+ <dd>Об'єкт, у якому виконується перевірка того, чи він (або його ланцюжок прототипів) містить властивість з вказаним ім'ям.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Наступний приклад ілюструє деякі випадки використання оператора <code>in</code>.</p>
+
+<pre class="brush:js">// Масиви
+var trees = ['секвоя', 'лавр', 'кедр', 'дуб', 'клен'];
+0 in trees        // вертає true
+3 in trees        // вертає true
+6 in trees        // вертає false
+'лавр' in trees    // вертає false (ви повинні вказати
+                  // індекс, а не значення за цим індексом)
+'length' in trees // вертає true (length є властивістю об'єкта Array)
+Symbol.iterator in trees // вертає true (масиви ітерабельні, працює лише у ES2015+)
+
+// Попередньо визначені об'єкти
+'PI' in Math          // вертає true
+
+// Користувацькі об'єкти
+var mycar = {make: 'Honda', model: 'Accord', year: 1998};
+'make' in mycar  // вертає true
+'model' in mycar // вертає true
+</pre>
+
+<p>Необхідно вказати об'єкт справа від оператора <code>in</code>. Наприклад, можна вказати рядок, створений за допомогою конструктора <code>String</code>, але не можна вказувати рядковий літерал.</p>
+
+<pre class="brush:js">var color1 = new String('зелений');
+'length' in color1 // вертає true
+
+var color2 = 'кораловий';
+// генерує помилку (color2 не є об'єктом String)
+'length' in color2
+</pre>
+
+<h3 id="Використання_in_з_властивостями_що_видалені_або_дорівнюють_undefined">Використання <code>in</code> з властивостями, що видалені або дорівнюють undefined</h3>
+
+<p>Якщо видалити властивість оператором <code><a href="/uk/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>, оператор <code>in</code>  поверне <code>false</code> для цієї властивості.</p>
+
+<pre class="brush:js">var mycar = {make: 'Honda', model: 'Accord', year: 1998};
+delete mycar.make;
+'make' in mycar;  // вертає false
+
+var trees = new Array('секвоя', 'лавр', 'кедр', 'дуб', 'клен');
+delete trees[3];
+3 in trees; // вертає false
+</pre>
+
+<p>Якщо задати властивості значення {{jsxref("Global_Objects/undefined", "undefined")}}, але не видалити її, оператор <code>in</code> поверне true для цієї властивості.</p>
+
+<pre class="brush:js">var mycar = {make: 'Honda', model: 'Accord', year: 1998};
+mycar.make = undefined;
+'make' in mycar;  // вертає true
+</pre>
+
+<pre class="brush:js">var trees = new Array('секвоя', 'лавр', 'кедр', 'дуб', 'клен');
+trees[3] = undefined;
+3 in trees; // вертає true
+</pre>
+
+<h3 id="Успадковані_властивості">Успадковані властивості</h3>
+
+<p>Оператор <code>in</code> повертає <code>true</code> для властивостей з ланцюжка прототипів. (Якщо вам потрібно перевірити лише <em>не успадковані</em> властивості, скористайтесь методом {{jsxref("Object.prototype.hasOwnProperty()")}}.)</p>
+
+<pre class="brush:js">'toString' in {}; // вертає true
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-relational-operators', 'Relational Operators')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.8.7', 'The in Operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.8.7', 'The in Operator')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.4.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.operators.in")}}</p>
+
+<div id="compat-mobile"></div>
+
+<h2 id="Також_дивіться">Також дивіться</h2>
+
+<ul>
+ <li><code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code></li>
+ <li><code><a href="/uk/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code></li>
+ <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li>
+ <li>{{jsxref("Reflect.has()")}}</li>
+ <li><a href="/uk/docs/Web/JavaScript/Перелічуваність_та_належність_властивостей">Перелічуваність та належність властивостей</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/increment/index.html b/files/uk/web/javascript/reference/operators/increment/index.html
new file mode 100644
index 0000000000..f4f19e5fc0
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/increment/index.html
@@ -0,0 +1,80 @@
+---
+title: Інкремент (++)
+slug: Web/JavaScript/Reference/Operators/Increment
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Increment
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор інкременту (<code>++</code>) збільшує свій операнд (додає одиницю) та повертає його значення.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-increment.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><strong>Оператор:</strong> <var>x</var>++ або ++<var>x</var>
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо оператор використовується постфіксно, після операнду (наприклад, <code>x++</code>), тоді він збільшує значення та повертає його до збільшення.</p>
+
+<p>Якщо оператор використовується префіксно, перед операндом (наприклад, <code>++x</code>), тоді він збільшує значення та повертає його після збільшення.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Постфіксний_інкремент">Постфіксний інкремент</h3>
+
+<pre class="brush: js notranslate">let x = 3;
+y = x++;
+
+// y = 3
+// x = 4
+</pre>
+
+<h3 id="Префіксний_інкремент">Префіксний інкремент</h3>
+
+<pre class="brush: js notranslate">let a = 2;
+b = ++a;
+
+// a = 3
+// b = 3
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-postfix-increment-operator', 'Increment operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.increment")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Addition">Оператор додавання</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Subtraction">Оператор віднімання</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Division">Оператор ділення</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Multiplication">Оператор множення</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Remainder">Оператор остачі</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Exponentiation">Оператор піднесення до степеня</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Decrement">Оператор декременту</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_negation">Унарний мінус</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_plus">Унарний плюс</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/index.html b/files/uk/web/javascript/reference/operators/index.html
new file mode 100644
index 0000000000..301ebeeb2f
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/index.html
@@ -0,0 +1,273 @@
+---
+title: Вирази та оператори
+slug: Web/JavaScript/Reference/Operators
+tags:
+  - Expressions
+  - JavaScript
+  - Operators
+  - Довідка
+  - Огляд
+  - Оператори
+  - вирази
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Ця глава документує усі оператори, вирази та ключові слова мови JavaScript.</p>
+
+<h2 id="Вирази_та_оператори_за_категоріями">Вирази та оператори за категоріями</h2>
+
+<p>Список у алфавітному порядку дивіться на бічній панелі ліворуч.</p>
+
+<h3 id="Первинні_вирази">Первинні вирази</h3>
+
+<p>Базові ключові слова та загальні вирази у JavaScript.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/this", "this")}}</dt>
+ <dd>Ключове слово <code>this</code> посилається на особливу властивість контексту виконання функції.</dd>
+ <dt>{{jsxref("Operators/function", "function")}}</dt>
+ <dd>Ключове слово <code>function</code> визначає функціональний вираз.</dd>
+ <dt>{{jsxref("Operators/class", "class")}}</dt>
+ <dd>Ключове слово <code>class</code> визначає вираз класу.</dd>
+ <dt>{{jsxref("Operators/function*", "function*")}}</dt>
+ <dd>Ключове слово <code>function*</code> визначає вираз функції-генератора.</dd>
+ <dt>{{jsxref("Operators/yield", "yield")}}</dt>
+ <dd>Призупиняє та відновлює виконання функції-генератора.</dd>
+ <dt>{{jsxref("Operators/yield*", "yield*")}}</dt>
+ <dd>Делегує до іншої функції-генератора або ітерабельного об'єкта.</dd>
+ <dt>{{jsxref("Operators/async_function", "async function*")}}</dt>
+ <dd><code>async function</code> визначає вираз async-функції.</dd>
+ <dt>{{jsxref("Operators/await", "await")}}</dt>
+ <dd>Призупиняє та відновлює виконання async-функції та чекає на вирішення/відхилення проміса.</dd>
+ <dt>{{jsxref("Global_Objects/Array", "[]")}}</dt>
+ <dd>Синтаксис масивного ініціалізатора/літералу.</dd>
+ <dt>{{jsxref("Operators/Ініціалізація_об’єктів", "{}")}}</dt>
+ <dd>Синтаксис об'єктного ініціалізатора/літералу.</dd>
+ <dt>{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}</dt>
+ <dd>Літерал регулярного виразу.</dd>
+ <dt>{{jsxref("Operators/Grouping", "( )")}}</dt>
+ <dd>Оператор групування.</dd>
+</dl>
+
+<h3 id="Лівосторонні_вирази">Лівосторонні вирази</h3>
+
+<p>Значення зліва є призначенням присвоєння.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Property_accessors", "Доступ до властивостей", "", 1)}}</dt>
+ <dd>Оператори доступу надають доступ до властивості або методу об'єкта<br>
+ (<code>object.property</code> та <code>object["property"]</code>).</dd>
+ <dt>{{jsxref("Operators/new", "new")}}</dt>
+ <dd>Оператор <code>new</code> створює екземпляр конструктора.</dd>
+ <dt>{{JSxRef("Operators/new%2Etarget", "new.target")}}</dt>
+ <dd>У конструкторах <code>new.target</code> посилається на конструктор, викликаний оператором {{jsxref("Operators/new", "new")}}.</dd>
+ <dt>{{jsxref("Operators/super", "super")}}</dt>
+ <dd>Ключове слово <code>super</code> викликає батьківський конструктор.</dd>
+ <dt>{{jsxref("Operators/Spread_syntax", "...obj")}}</dt>
+ <dd>Оператор розкладу дозволяє розкласти вираз там, де очікується більше одного аргументу (для викликів функцій) або більше одного елемента (для масивних літералів).</dd>
+</dl>
+
+<h3 id="Інкремент_та_декремент">Інкремент та декремент</h3>
+
+<p>Постфіксний/префіксний оператор інкременту та постфіксний/префіксний оператор декременту.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Increment", "A++")}}</dt>
+ <dd>Постфіксний оператор інкременту.</dd>
+ <dt>{{jsxref("Operators/Decrement", "A--")}}</dt>
+ <dd>Постфіксний оператор декременту.</dd>
+ <dt>{{jsxref("Operators/Increment", "++A")}}</dt>
+ <dd>Префіксний оператор інкременту.</dd>
+ <dt>{{jsxref("Operators/Decrement", "--A")}}</dt>
+ <dd>Префіксний оператор декременту.</dd>
+</dl>
+
+<h3 id="Унарні_оператори">Унарні оператори</h3>
+
+<p>Унарна операція - це операція лише з одним операндом.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/delete", "delete")}}</dt>
+ <dd>Оператор <code>delete</code> видаляє властивість об'єкта.</dd>
+ <dt>{{jsxref("Operators/void", "void")}}</dt>
+ <dd>Оператор <code>void</code> відкидає повернене значення виразу.</dd>
+ <dt>{{jsxref("Operators/typeof", "typeof")}}</dt>
+ <dd>Оператор <code>typeof</code> визначає тип наданого об'єкта.</dd>
+ <dt>{{jsxref("Operators/Unary_plus", "+")}}</dt>
+ <dd>Унарний плюс перетворює свій операнд на число.</dd>
+ <dt>{{jsxref("Operators/Unary_negation", "-")}}</dt>
+ <dd>Унарний мінус перетворює свій операнд на число та міняє його знак на протилежний.</dd>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "~", "#Побітове_НЕ")}}</dt>
+ <dd>Оператор побітового НЕ.</dd>
+ <dt>{{jsxref("Operators/Logical_Operators", "!", "#Логічне_НЕ_!")}}</dt>
+ <dd>Оператор логічного НЕ.</dd>
+</dl>
+
+<h3 id="Арифметичні_оператори">Арифметичні оператори</h3>
+
+<p>Арифметичні оператори приймають числові значення (або літерали, або змінні) в якості операндів та повертають єдине числове значення.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Addition", "+")}}</dt>
+ <dd>Оператор додавання.</dd>
+ <dt>{{jsxref("Operators/Subtraction", "-")}}</dt>
+ <dd>Оператор віднімання.</dd>
+ <dt>{{jsxref("Operators/Division", "/")}}</dt>
+ <dd>Оператор ділення.</dd>
+ <dt>{{jsxref("Operators/Multiplication", "*")}}</dt>
+ <dd>Оператор множення.</dd>
+ <dt>{{jsxref("Operators/Remainder", "%")}}</dt>
+ <dd>Оператор остачі.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Operators/Exponentiation", "**")}}</dt>
+ <dd>Оператор піднесення до степеня.</dd>
+</dl>
+
+<h3 id="Оператори_відношення">Оператори відношення</h3>
+
+<p>Оператор порівняння порівнює свої операнди та повертає значення <code>Boolean</code> на підставі того, чи дорівнює порівняння true.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/in", "in")}}</dt>
+ <dd>Оператор <code>in</code> визначає, чи має об'єкт надану властивість.</dd>
+ <dt>{{jsxref("Operators/instanceof", "instanceof")}}</dt>
+ <dd>Оператор <code>instanceof</code> визначає, чи є об'єкт екземпляром іншого об'єкта.</dd>
+ <dt>{{jsxref("Operators/Оператори_порівняння", "&lt;", "#Менше_ніж_&lt;")}}</dt>
+ <dd>Оператор менше ніж.</dd>
+ <dt>{{jsxref("Operators/Оператори_порівняння", "&gt;", "#Більше_ніж_&gt;")}}</dt>
+ <dd>Оператор більше ніж.</dd>
+ <dt>{{jsxref("Operators/Оператори_порівняння", "&lt;=", "#Менше_чи_дорівнює_&lt;")}}</dt>
+ <dd>Оператор менше чи дорівнює.</dd>
+ <dt>{{jsxref("Operators/Оператори_порівняння", "&gt;=", "#Більше_чи_дорівнює_&gt;")}}</dt>
+ <dd>Оператор більше чи дорівнює.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Заувага: =&gt;</strong> не оператор, а позначення для <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкових функцій</a>.</p>
+</div>
+
+<h3 id="Оператори_рівності">Оператори рівності</h3>
+
+<p>Результатом обчислення оператора рівності завжди є значення типу <code>Boolean</code>, на підставі того, чи дорівнює порівняння true.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Оператори_порівняння", "==", "#Рівність")}}</dt>
+ <dd>Оператор рівності.</dd>
+ <dt>{{jsxref("Operators/Оператори_порівняння", "!=", "#Нерівність_!")}}</dt>
+ <dd>Оператор нерівності.</dd>
+ <dt>{{jsxref("Operators/Оператори_порівняння", "===", "#Ідентичність_строга_рівність")}}</dt>
+ <dd>Оператор ідентичності.</dd>
+ <dt>{{jsxref("Operators/Оператори_порівняння", "!==", "#Неідентичність_строга_нерівність_!")}}</dt>
+ <dd>Оператор неідентичності.</dd>
+</dl>
+
+<h3 id="Оператори_бітового_зсуву">Оператори бітового зсуву</h3>
+
+<p>Операції, що зсувають усі біти операнду.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "&lt;&lt;", "#&lt;&lt;_Лівий_зсув")}}</dt>
+ <dd>Оператор лівого зсуву.</dd>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "&gt;&gt;", "#&gt;&gt;_Правий_зсув_з_розширенням_знаку")}}</dt>
+ <dd>Оператор правого зсуву.</dd>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "&gt;&gt;&gt;", "#&gt;&gt;&gt;_Правий_зсув_із_заповненням_нулями")}}</dt>
+ <dd>Оператор беззнакового правого зсуву.</dd>
+</dl>
+
+<h3 id="Побітові_логічні_оператори">Побітові логічні оператори</h3>
+
+<p>Бітові оператори опрацьовують свої операнди як послідовність 32-х бітів (нулів та одиниць) та повертають стандартні числові значення JavaScript.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "&amp;", "#Побітове_І")}}</dt>
+ <dd>Побітове І.</dd>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "|", "#Побітове_АБО")}}</dt>
+ <dd>Побітове АБО.</dd>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "^", "#Виключне_побітове_АБО")}}</dt>
+ <dd>Виключне побітове АБО.</dd>
+</dl>
+
+<h3 id="Логічні_оператори">Логічні оператори</h3>
+
+<p>Логічні оператори зазвичай застосовуються до булевих (логічних) значень, і, в цьому випадку, вони повертають булеве значення.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Logical_Operators", "&amp;&amp;", "#Логічне_І")}}</dt>
+ <dd>Логічне І.</dd>
+ <dt>{{jsxref("Operators/Logical_Operators", "||", "#Логічне_АБО")}}</dt>
+ <dd>Логічне АБО.</dd>
+</dl>
+
+<h3 id="Умовний_тернарний_оператор">Умовний (тернарний) оператор</h3>
+
+<dl>
+ <dt>{{jsxref("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</dt>
+ <dd>
+ <p>Умовний оператор повертає одне з двох значень, на підставі логічного значення умови.</p>
+ </dd>
+</dl>
+
+<h3 id="Оператори_присвоєння">Оператори присвоєння</h3>
+
+<p>Оператор присвоєння присвоює значення своєму лівому операнду на підставі значення свого правого операнду.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Оператори_присвоєння", "=", "#Присвоєння")}}</dt>
+ <dd>Оператор присвоєння.</dd>
+ <dt>{{jsxref("Operators/Оператори_присвоєння", "*=", "#Присвоєння_з_множенням")}}</dt>
+ <dd>Присвоєння з множенням.</dd>
+ <dt>{{jsxref("Operators/Оператори_присвоєння", "/=", "#Присвоєння_з_діленням")}}</dt>
+ <dd>Присвоєння з діленням.</dd>
+ <dt>{{jsxref("Operators/Оператори_присвоєння", "%=", "#Присвоєння_остачі")}}</dt>
+ <dd>Присвоєння остачі.</dd>
+ <dt>{{jsxref("Operators/Оператори_присвоєння", "+=", "#Присвоєння_з_додаванням")}}</dt>
+ <dd>Присвоєння з додаванням.</dd>
+ <dt>{{jsxref("Operators/Оператори_присвоєння", "-=", "#Присвоєння_з_відніманням")}}</dt>
+ <dd>Присвоєння з відніманням.</dd>
+ <dt>{{jsxref("Operators/Оператори_присвоєння", "&lt;&lt;=", "#Присвоєння_з_лівим_зсувом")}}</dt>
+ <dd>Присвоєння з лівим зсувом.</dd>
+ <dt>{{jsxref("Operators/Оператори_присвоєння", "&gt;&gt;=", "#Присвоєння_з_правим_зсувом")}}</dt>
+ <dd>Присвоєння з правим зсувом.</dd>
+ <dt>{{jsxref("Operators/Оператори_присвоєння", "&gt;&gt;&gt;=", "#Присвоєння_з_беззнаковим_правим_зсувом")}}</dt>
+ <dd>Присвоєння з беззнаковим правим зсувом.</dd>
+ <dt>{{jsxref("Operators/Оператори_присвоєння", "&amp;=", "#Присвоєння_з_побітовим_І")}}</dt>
+ <dd>Присвоєння з побітовим І.</dd>
+ <dt>{{jsxref("Operators/Оператори_присвоєння", "^=", "#Присвоєння_з_виключним_побітовим_АБО")}}</dt>
+ <dd>Присвоєння з виключним побітовим АБО.</dd>
+ <dt>{{jsxref("Operators/Оператори_присвоєння", "|=", "#Присвоєння_з_побітовим_АБО")}}</dt>
+ <dd>Присвоєння з побітовим АБО.</dd>
+ <dt>{{jsxref("Operators/Деструктуризація", "[a, b] = [1, 2]")}}<br>
+ {{jsxref("Operators/Деструктуризація", "{a, b} = {a:1, b:2}")}}</dt>
+ <dd>
+ <p>Деструктуризаційне присвоєння дозволяє присвоювати властивості масиву або об'єкта змінним, використовуючи синтаксис, схожий на масивні або об'єктні літерали.</p>
+ </dd>
+</dl>
+
+<h3 id="Оператор_кома">Оператор кома</h3>
+
+<dl>
+ <dt>{{jsxref("Operators/Comma_Operator", ",")}}</dt>
+ <dd>Оператор кома дозволяє обчислення кількох виразів у єдиній інструкції та повертає результат останнього виразу.</dd>
+</dl>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Пріоритет операторів</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/inequality/index.html b/files/uk/web/javascript/reference/operators/inequality/index.html
new file mode 100644
index 0000000000..d1621b0c0c
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/inequality/index.html
@@ -0,0 +1,97 @@
+---
+title: Нерівність (!=)
+slug: Web/JavaScript/Reference/Operators/Inequality
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Inequality
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор нерівності (<code>!=</code>) перевіряє, чи є два операнди нерівними, повертаючи результат типу Boolean. На відміну від оператора <a href="/uk/docs/Web/JavaScript/Reference/Operators/Strict_inequality">строгої нерівності</a>, він намагається перетворити для порівняння операнди, які належать до різних типів.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-inequality.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">x != y</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Оператор нерівності перевіряє, чи є його операнди нерівними. Це протилежність оператора <a href="/uk/docs/Web/JavaScript/Reference/Operators/Equality">рівності</a>, тому наступні два рядки завжди повернуть однаковий результат:</p>
+
+<pre class="brush: js notranslate">x != y
+
+!(x == y)</pre>
+
+<p>Подробиці алгоритму порівняння дивіться на сторінці оператора <a href="/uk/docs/Web/JavaScript/Reference/Operators/Equality">рівності</a>.</p>
+
+<p>Як і оператор рівності, оператор нерівності намагатиметься перетворити операнди різних типів перед порівнянням:</p>
+
+<pre class="brush: js notranslate">3 != "3"; // false</pre>
+
+<p>Щоб не допустити цього, та щоб різні типи вважались різними, використовуйте, натомість, оператор <a href="/uk/docs/Web/JavaScript/Reference/Operators/Strict_inequality">строгої нерівності</a>:</p>
+
+<pre class="brush: js notranslate">3 !== "3"; // true</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Порівняння_без_перетворення_типів">Порівняння без перетворення типів</h3>
+
+<pre class="brush: js notranslate">1 != 2;              // true
+"привіт" != "агов";   // true
+
+1 != 1;              // false
+"привіт" != "привіт";  // false</pre>
+
+<h3 id="Порівняння_з_перетворенням_типів">Порівняння з перетворенням типів</h3>
+
+<pre class="brush: js notranslate">"1" !=  1;            // false
+1 != "1";             // false
+0 != false;           // false
+0 != null;            // true
+0 != undefined;       // true
+null != undefined;    // false
+
+const number1 = new Number(3);
+const number2 = new Number(3);
+number1 != 3;         // false
+number1 != number2;   // true</pre>
+
+<h3 id="Порівняння_обєктів">Порівняння об'єктів</h3>
+
+<pre class="brush: js notranslate">const object1 = {"key": "value"}
+const object2 = {"key": "value"};
+
+object1 != object2 // true
+object2 != object2 // false</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.inequality")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Equality">Оператор рівності</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Strict_equality">Оператор строгої рівності</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Strict_inequality">Оператор строгої нерівності</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/instanceof/index.html b/files/uk/web/javascript/reference/operators/instanceof/index.html
new file mode 100644
index 0000000000..eca9cdabeb
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/instanceof/index.html
@@ -0,0 +1,186 @@
+---
+title: instanceof
+slug: Web/JavaScript/Reference/Operators/instanceof
+tags:
+  - JavaScript
+  - Object
+  - Об'єкт
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/instanceof
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Оператор</strong> <strong><code>instanceof</code></strong> перевіряє, чи присутня властивість конструктора <code>prototype</code> десь у ланцюжку прототипів об'єкта.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-instanceof.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>object</em> instanceof <em>constructor</em></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>Об'єкт, який потрібно перевірити.</dd>
+</dl>
+
+<dl>
+ <dt><code>constructor</code></dt>
+ <dd>Функція для перевірки.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Оператор <code>instanceof</code> перевіряє присутність <code>constructor.prototype</code> у ланцюжку прототипів об'єкта <code>object</code>.</p>
+
+<pre class="brush: js">// визначення конструкторів
+function C() {}
+function D() {}
+
+var o = new C();
+
+// true, тому що: Object.getPrototypeOf(o) === C.prototype
+o instanceof C;
+
+// false, тому що D.prototype немає у ланцюжку прототипів o
+o instanceof D;
+
+o instanceof Object; // true, тому що:
+C.prototype instanceof Object // true
+
+C.prototype = {};
+var o2 = new C();
+
+o2 instanceof C; // true
+
+// false, тому що C.prototype більше немає у
+// ланцюжку прототипів o
+o instanceof C;
+
+D.prototype = new C(); // додати C до збірки D [[Prototype]]
+var o3 = new D();
+o3 instanceof D; // true
+o3 instanceof C; // true, оскільки C.prototype тепер є у ланцюжку прототипів o3
+</pre>
+
+<p>Зауважте, що значення перевірки <code>instanceof</code> може змінитись на підставі змін у властивості конструкторів <code>prototype</code>, також воно може змінитись через зміну прототипу об'єкта методом <code>Object.setPrototypeOf</code>. Це також можливо зробити використанням нестандартної псевдовластивості <code>__proto__</code>.</p>
+
+<h3 id="instanceof_та_декілька_контекстів_наприклад_фрейми_чи_вікна"><code>instanceof</code> та декілька контекстів (наприклад, фрейми чи вікна)</h3>
+
+<p>Різні області видимості мають різні середовища виконання. Це означає, що вони мають різні вбудовані складові (різні глобальні об'єкти, різні конструктори і т. д.). Це може призвести до неочікуваних результатів. Наприклад, <code>[] instanceof window.frames[0].Array</code> поверне <code>false</code>, тому що <code>Array.prototype !== </code><code>window.frames[0].Array</code>, а масиви успадковуються від першого.</p>
+
+<p>Спочатку це може виглядати дивно, але, коли починаєш мати справу з кількома фреймами або вікнами у скрипті та передавати об'єкти з одного контексту у інший через функції, це є правильним та сильним аспектом. Наприклад, ви можете безпечно перевірити, чи є наданий об'єкт, насправді, масивом, за допомогою <code>Array.isArray(myObj)</code></p>
+
+<p>Наприклад, перевіряючи, чи <a href="/uk/docs/Web/API/Node">Nodes</a> є <a href="/uk/docs/Web/API/SVGElement">SVGElement</a> у іншому контексті, ви можете використати <code>myNode instanceof myNode.ownerDocument.defaultView.SVGElement</code></p>
+
+<div class="note"><strong>Примітка для розробників Mozilla:</strong><br>
+У коді, що використовує XPCOM, <code>instanceof</code> має особливий ефект: <code>obj instanceof </code><em><code>xpcomInterface</code></em> (наприклад, <code>Components.interfaces.nsIFile</code>) викликає <code>obj.QueryInterface(<em>xpcomInterface</em>)</code> та повертає <code>true</code>, якщо QueryInterface має успішний результат. Побічним ефектом такого виклику є те, що ви можете використовувати властивості <em><code>xpcomInterface</code></em> на <code>obj</code> після успішної перевірки <code>instanceof</code>. На відміну від стандартних глобальних складових JavaScript, перевірка <code>obj instanceof xpcomInterface</code> працює, як очікується, навіть якщо <code>obj</code> з іншої області видимості.</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Демострація_того_що_String_та_Date_належать_до_типу_Object_та_виняткові_випадки">Демострація того, що <code>String</code> та <code>Date</code> належать до типу <code>Object</code>, та виняткові випадки</h3>
+
+<p>Наступний код використовує <code>instanceof</code>, щоб продемонструвати, що об'єкти <code>String</code> та <code>Date</code> також належать до типу <code>Object</code> (вони походять від <code>Object</code>).</p>
+
+<p>Однак, об'єкти, створені за допомогою нотації об'єктного літералу, є винятком: Хоча прототип дорівнює undefined, <code>instanceof Object</code> вертає <code>true</code>.</p>
+
+<pre class="brush: js">var simpleStr = 'Це простий рядок';
+var myString  = new String();
+var newStr    = new String('Рядок, створений конструктором');
+var myDate    = new Date();
+var myObj     = {};
+var myNonObj  = Object.create(null);
+
+simpleStr instanceof String; // вертає false, перевіряє ланцюжок прототипів, знаходить undefined
+myString  instanceof String; // вертає true
+newStr    instanceof String; // вертає true
+myString  instanceof Object; // вертає true
+
+myObj    instanceof Object;    // вертає true, не зважаючи на те, що прототип дорівнює undefined
+({})     instanceof Object;    // вертає true, те саме, що у попередньому випадку
+myNonObj instanceof Object;    // вертає false, спосіб створення об'єкту, який не є екземпляром Object
+
+myString instanceof Date;   // вертає false
+
+myDate instanceof Date;     // вертає true
+myDate instanceof Object;   // вертає true
+myDate instanceof String;   // вертає false
+</pre>
+
+<h3 id="Демонстрація_того_що_mycar_належить_до_типу_Car_та_до_типу_Object">Демонстрація того, що <code>mycar</code> належить до типу <code>Car</code> та до типу <code>Object</code></h3>
+
+<p>Наступний код створює тип об'єктів <code>Car</code> та екземпляр цього типу, <code>mycar</code>. Оператор <code>instanceof</code> демонструє, що об'єкт <code>mycar</code> належить до типу <code>Car</code> та до типу <code>Object</code>.</p>
+
+<pre class="brush: js">function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+var mycar = new Car('Honda', 'Accord', 1998);
+var a = mycar instanceof Car;    // вертає true
+var b = mycar instanceof Object; // вертає true
+</pre>
+
+<h3 id="Не_instanceof">Не instanceof</h3>
+
+<p>Щоб перевірити, що об'єкт не є екземпляром певного Конструктора, ви можете зробити</p>
+
+<pre class="brush: js">if (!(mycar instanceof Car)) {
+  // Зробити щось, наприклад, mycar = new Car(mycar)
+}
+</pre>
+
+<p>Це, насправді, відрізняється від коду</p>
+
+<pre class="brush: js">if (!mycar instanceof Car)</pre>
+
+<p>який завжди дорівнюватиме false (<code>!mycar</code> обчислюється перед <code>instanceof</code>, тому ви завжди перевірятимете, чи є булеве значення екземпляром <code>Car</code>).</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-relational-operators', 'Relational Operators')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.8.6', 'The instanceof operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.8.6', 'The instanceof operator')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.4.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.instanceof")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><code><a href="/uk/docs/Web/JavaScript/Reference/Operators/typeof" title="/en-US/docs/JavaScript/Reference/Operators/typeof">typeof</a></code></li>
+ <li>{{jsxref("Symbol.hasInstance")}}</li>
+ <li>{{jsxref("Object.prototype.isPrototypeOf")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/left_shift/index.html b/files/uk/web/javascript/reference/operators/left_shift/index.html
new file mode 100644
index 0000000000..b963c613e6
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/left_shift/index.html
@@ -0,0 +1,73 @@
+---
+title: Лівий зсув (<<)
+slug: Web/JavaScript/Reference/Operators/Left_shift
+tags:
+  - JavaScript
+  - Бітовий оператор
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Left_shift
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Оператор лівого зсуву (<code>&lt;&lt;</code>)</strong> виконує зсув першого операнда на вказану кількість бітів ліворуч. Надлишкові біти, зсунуті ліворуч, відкидаються. Біти, додані справа, заповнюються нулями.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-left-shift.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>a</var> &lt;&lt; <var>b</var></code>
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Цей оператор виконує зсув першого операнда на вказану кількість бітів ліворуч. Надлишкові біти, зсунуті ліворуч, відкидаються. Біти, додані справа, заповнюються нулями.</p>
+
+<p>Наприклад, <code>9 &lt;&lt; 2</code> повертає 36:</p>
+
+<pre class="brush: js notranslate">.    9 (основа 10): 00000000000000000000000000001001 (основа 2)
+                  --------------------------------
+9 &lt;&lt; 2 (основа 10): 00000000000000000000000000100100 (основа 2) = 36 (основа 10)
+</pre>
+
+<p>Бітовий зсув будь-якого числа <code>x</code> ліворуч на <code>y</code> бітів вертає <code>x * 2 ** y</code>.<br>
+ Отже, для прикладу: <code>9 &lt;&lt; 3</code> можна перекласти як: <code>9 * (2 ** 3) = 9 * (8) =</code><code> 72</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_лівого_зсуву">Використання лівого зсуву</h3>
+
+<pre class="brush: js notranslate">9 &lt;&lt; 3; // 72
+
+// 9 * (2 ** 3) = 9 * (8) = 72
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators', 'Bitwise Shift Operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.left_shift")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%91%D1%96%D1%82%D0%BE%D0%B2%D1%96_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8">Бітові оператори у посібнику JS</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Left_shift_assignment">Оператор присвоєння з лівим зсувом</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/left_shift_assignment/index.html b/files/uk/web/javascript/reference/operators/left_shift_assignment/index.html
new file mode 100644
index 0000000000..4063453f99
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/left_shift_assignment/index.html
@@ -0,0 +1,60 @@
+---
+title: Присвоєння з лівим зсувом (<<=)
+slug: Web/JavaScript/Reference/Operators/Left_shift_assignment
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+  - Оператор присвоєння
+translation_of: Web/JavaScript/Reference/Operators/Left_shift_assignment
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор присвоєння з лівим зсувом (<code>&lt;&lt;=</code>) виконує зсув на вказану кількість бітів ліворуч та присвоює результат змінній.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-left-shift-assignment.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x &lt;&lt;= y
+<strong>Значення:</strong> x   = x &lt;&lt; y</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_присвоєння_з_лівим_зсувом">Використання присвоєння з лівим зсувом</h3>
+
+<pre class="brush: js notranslate">let a = 5;
+// 00000000000000000000000000000101
+
+bar &lt;&lt;= 2; // 20
+// 00000000000000000000000000010100</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.left_shift_assignment")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8_%D0%BF%D1%80%D0%B8%D1%81%D0%B2%D0%BE%D1%94%D0%BD%D0%BD%D1%8F">Оператори присвоєння у посібнику JS</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Left_shift">Оператор лівого зсуву</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/less_than/index.html b/files/uk/web/javascript/reference/operators/less_than/index.html
new file mode 100644
index 0000000000..9833b8532e
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/less_than/index.html
@@ -0,0 +1,99 @@
+---
+title: Менше ніж (<)
+slug: Web/JavaScript/Reference/Operators/Less_than
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Less_than
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор менше ніж (<code>&lt;</code>) повертає <code>true</code>, якщо значення лівого операнда менше за значення правого операнда, інакше повертає <code>false</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-less-than.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"> x &lt; y</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Операнди порівнюються за допомогою алгоритму <a class="external external-icon" href="https://tc39.es/ecma262/#sec-abstract-relational-comparison" rel="noopener">абстрактного порівняння</a>. Дивіться опис алгоритму у документації оператора <a href="/uk/docs/Web/JavaScript/Reference/Operators/Greater_than">більше ніж</a>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Порівняння_рядків">Порівняння рядків</h3>
+
+<pre class="brush: js notranslate">console.log("а" &lt; "б");        // true
+console.log("а" &lt; "а");        // false
+console.log("а" &lt; "3");        // false</pre>
+
+<h3 id="Порівняння_рядка_з_числом">Порівняння рядка з числом</h3>
+
+<pre class="brush: js notranslate">console.log("5" &lt; 3);          // false
+console.log("3" &lt; 3);          // false
+console.log("3" &lt; 5);          // true
+
+console.log("привіт" &lt; 5);      // false
+console.log(5 &lt; "привіт");      // false
+
+console.log("5" &lt; 3n);         // false
+console.log("3" &lt; 5n);         // true</pre>
+
+<h3 id="Порівняння_числа_з_числом">Порівняння числа з числом</h3>
+
+<pre class="brush: js notranslate">console.log(5 &lt; 3);            // false
+console.log(3 &lt; 3);            // false
+console.log(3 &lt; 5);            // true</pre>
+
+<h3 id="Порівняння_числа_з_BigInt">Порівняння числа з BigInt</h3>
+
+<pre class="brush: js notranslate">console.log(5n &lt; 3);           // false
+console.log(3 &lt; 5n);           // true</pre>
+
+<h3 id="Порівняння_Boolean_null_undefined_NaN">Порівняння Boolean, null, undefined, NaN</h3>
+
+<pre class="brush: js notranslate">console.log(true &lt; false);     // false
+console.log(false &lt; true);     // true
+
+console.log(0 &lt; true);         // true
+console.log(true &lt; 1);         // false
+
+console.log(null &lt; 0);         // false
+console.log(null &lt; 1);         // true
+
+console.log(undefined &lt; 3);    // false
+console.log(3 &lt; undefined);    // false
+
+console.log(3 &lt; NaN);          // false
+console.log(NaN &lt; 3);          // false</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.less_than")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Greater_than">Оператор більше ніж</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal">Оператор більше чи дорівнює</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal">Оператор менше чи дорівнює</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/less_than_or_equal/index.html b/files/uk/web/javascript/reference/operators/less_than_or_equal/index.html
new file mode 100644
index 0000000000..03af5a5d45
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/less_than_or_equal/index.html
@@ -0,0 +1,101 @@
+---
+title: Менше чи дорівнює (<=)
+slug: Web/JavaScript/Reference/Operators/Less_than_or_equal
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Less_than_or_equal
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор менше чи дорівнює (<code>&lt;=</code>) вертає <code>true</code>, якщо значення лівого операнда менше за значення правого операнда, або дорівнює йому, інакше вертає <code>false</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-less-than-or-equal.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"> x &lt;= y</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Операнди порівнюються за допомогою алгоритму <a class="external external-icon" href="https://tc39.es/ecma262/#sec-abstract-relational-comparison" rel="noopener">абстрактного порівняння</a>. Дивіться опис алгоритму у документації оператора <a href="/uk/docs/Web/JavaScript/Reference/Operators/Greater_than">більше ніж</a>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Порівняння_рядків">Порівняння рядків</h3>
+
+<pre class="brush: js notranslate">console.log("а" &lt;= "б");     // true
+console.log("а" &lt;= "а");     // true
+console.log("а" &lt;= "3");     // false
+</pre>
+
+<h3 id="Порівняння_рядка_з_числом">Порівняння рядка з числом</h3>
+
+<pre class="brush: js notranslate">console.log("5" &lt;= 3);       // false
+console.log("3" &lt;= 3);       // true
+console.log("3" &lt;= 5);       // true
+
+console.log("привіт" &lt;= 5);   // false
+console.log(5 &lt;= "привіт");   // false</pre>
+
+<h3 id="Порівняння_числа_з_числом">Порівняння числа з числом</h3>
+
+<pre class="brush: js notranslate">console.log(5 &lt;= 3);         // false
+console.log(3 &lt;= 3);         // true
+console.log(3 &lt;= 5);         // true</pre>
+
+<h3 id="Порівняння_числа_з_BigInt">Порівняння числа з BigInt</h3>
+
+<pre class="brush: js notranslate">console.log(5n &lt;= 3);        // false
+console.log(3 &lt;= 3n);        // true
+console.log(3 &lt;= 5n);        // true</pre>
+
+<h3 id="Порівняння_Boolean_null_undefined_NaN">Порівняння Boolean, null, undefined, NaN</h3>
+
+<pre class="brush: js notranslate">console.log(true &lt;= false);  // false
+console.log(true &lt;= true);   // true
+console.log(false &lt;= true);  // true
+
+console.log(true &lt;= 0);      // false
+console.log(true &lt;= 1);      // true
+
+console.log(null &lt;= 0);      // true
+console.log(1 &lt;= null);      // false
+
+console.log(undefined &lt;= 3); // false
+console.log(3 &lt;= undefined); // false
+
+console.log(3 &lt;= NaN);       // false
+console.log(NaN &lt;= 3);       // false</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.less_than_or_equal")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Greater_than">Оператор більше ніж</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal">Оператор більше чи дорівнює</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Less_than">Оператор менше ніж</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/logical_and/index.html b/files/uk/web/javascript/reference/operators/logical_and/index.html
new file mode 100644
index 0000000000..c8d1ccaae6
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/logical_and/index.html
@@ -0,0 +1,142 @@
+---
+title: Логічне І (&&)
+slug: Web/JavaScript/Reference/Operators/Logical_AND
+tags:
+  - JavaScript
+  - Довідка
+  - Логічний оператор
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Logical_AND
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Логічний оператор І (<code>&amp;&amp;</code>) (логічна кон'юнкція) для набору операндів дорівнює true тільки тоді, коли усі його операнди дорівнюють true. Він зазвичай використовується з {{jsxref("Boolean","булевими")}} (логічними) значеннями. У цьому випадку він повертає булеве значення. Однак, оператор <code>&amp;&amp;</code> насправді повертає значення одного з наданих операндів, а отже, якщо цей оператор застосовується не з булевими значеннями, він поверне не булеве значення.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-logical-and.html", "shorter")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>вираз1</em> &amp;&amp; <em>вираз2</em>
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо <code>вираз<strong>1</strong></code> може бути приведений до <code>true</code>, вертає <code>вираз<strong>2</strong></code>; інакше, вертає <code>вираз<strong>1</strong></code>.</p>
+
+<p>Якщо значення може бути приведене до <code>true</code>, воно є так званим {{Glossary("truthy", "правдивим")}} значенням. Якщо значення може бути приведене до <code>false</code>, воно називається {{Glossary("falsy", "хибним")}}.</p>
+
+<p>Прикладами виразів, які можуть бути приведені до false, є:</p>
+
+<ul>
+ <li><code>null</code>;</li>
+ <li><code>NaN</code>;</li>
+ <li><code>0</code>;</li>
+ <li>порожній рядок (<code>""</code> або <code>''</code>, або <code>``</code>);</li>
+ <li><code>undefined</code>.</li>
+</ul>
+
+<p>Хоча оператори <code>&amp;&amp;</code> та <code>||</code> можуть використовуватись з операндами не булевого типу, вони все одно можуть вважатися булевими операторами, оскільки значення, які вони повертають, завжди можуть бути приведені до <a href="/uk/docs/Web/JavaScript/Data_structures#%D0%A2%D0%B8%D0%BF_boolean">булевих примітивів</a>. Щоб явно перетворити повернені значення (або, взагалі, будь-який вираз) до відповідного булевого значення, скористайтесь подвійним <a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">оператором НЕ</a> або конструктором {{jsxref("Global_Objects/Boolean/Boolean", "Boolean")}}.</p>
+
+<h3 id="Обчислення_з_коротким_замиканням">Обчислення з коротким замиканням</h3>
+
+<p>Логічні вирази І обчислюються зліва направо, вони перевіряються на можливе "коротке замикання" під час обчислення за наступним правилом:</p>
+
+<p><code>(якийсь хибний вираз) &amp;&amp; <em>expr</em></code> обчислюється як хибний вираз;</p>
+
+<p>Коротке замикання означає, що частина <code><em>expr</em></code> у прикладі <strong>не обчислюється</strong>, тому будь-які побічні ефекти від цього не відбудуться (наприклад, якщо <code><em>expr</em></code> є викликом функції, виклику не станеться). Це відбувається тому, що значення оператора вже визначене після обчислення першого операнду. Дивіться приклад:</p>
+
+<pre class="brush: js notranslate">function A(){ console.log('викликано A'); return false; }
+function B(){ console.log('викликано B'); return true; }
+
+console.log( A() &amp;&amp; B() );
+// виводить "викликано A" в результаті виклику функції,
+// потім виводить false (що є результатом виклику оператора)
+</pre>
+
+<h3 id="Пріоритет_операторів">Пріоритет операторів</h3>
+
+<p>Наступні вирази можуть виглядати еквівалентними, але це не так, оскільки оператор <code>&amp;&amp;</code> виконується перед оператором <code>||</code> (дивіться <a href="/uk/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Пріоритет операторів</a>).</p>
+
+<pre class="brush: js notranslate">true || false &amp;&amp; false      // вертає true, оскільки &amp;&amp; виконується першим
+(true || false) &amp;&amp; false    // вертає false, бо пріоритет операторів не застосовується</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_І">Використання І</h3>
+
+<p>Наступний код наводить приклади оператора <code>&amp;&amp;</code> (логічне І).</p>
+
+<pre class="brush: js notranslate">a1 = true  &amp;&amp; true       // t &amp;&amp; t вертає true
+a2 = true  &amp;&amp; false      // t &amp;&amp; f вертає false
+a3 = false &amp;&amp; true       // f &amp;&amp; t вертає false
+a4 = false &amp;&amp; (3 == 4)   // f &amp;&amp; f вертає false
+a5 = 'Кіт' &amp;&amp; 'Пес'      // t &amp;&amp; t вертає "Пес"
+a6 = false &amp;&amp; 'Кіт'      // f &amp;&amp; t вертає false
+a7 = 'Кіт' &amp;&amp; false      // t &amp;&amp; f вертає false
+a8 = ''    &amp;&amp; false      // f &amp;&amp; f вертає ""
+a9 = false &amp;&amp; ''         // f &amp;&amp; f вертає false</pre>
+
+<h3 id="Правила_перетворення_для_булевих_значень">Правила перетворення для булевих значень</h3>
+
+<h4 id="Перетворення_І_на_АБО">Перетворення І на АБО</h4>
+
+<p>Наступна операція з <strong>булевими значеннями</strong>:</p>
+
+<pre class="brush: js notranslate">bCondition1 &amp;&amp; bCondition2</pre>
+
+<p>завжди дорівнює:</p>
+
+<pre class="brush: js notranslate">!(!bCondition1 || !bCondition2)</pre>
+
+<h4 id="Перетворення_АБО_на_І">Перетворення АБО на І</h4>
+
+<p>Наступна операція з <strong>булевими значеннями</strong>:</p>
+
+<pre class="brush: js notranslate">bCondition1 || bCondition2</pre>
+
+<p>завжди дорівнює:</p>
+
+<pre class="brush: js notranslate">!(!bCondition1 &amp;&amp; !bCondition2)</pre>
+
+<h3 id="Прибирання_вкладених_дужок">Прибирання вкладених дужок</h3>
+
+<p>Оскільки логічні вирази обчислюються зліва направо, завжди можна прибрати дужки зі складного виразу, дотримуючись певних правил.</p>
+
+<p>Наступна складена операція з <strong>булевими значеннями</strong>:</p>
+
+<pre class="brush: js notranslate">bCondition1 || (bCondition2 &amp;&amp; bCondition3)</pre>
+
+<p>завжди дорівнює:</p>
+
+<pre class="brush: js notranslate">bCondition1 || bCondition2 &amp;&amp; bCondition3</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#prod-LogicalANDExpression', 'Logical AND expression')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.logical_and")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Boolean")}}</li>
+ <li>{{Glossary("Truthy")}}</li>
+ <li>{{Glossary("Falsy")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/logical_not/index.html b/files/uk/web/javascript/reference/operators/logical_not/index.html
new file mode 100644
index 0000000000..6bfa34b281
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/logical_not/index.html
@@ -0,0 +1,105 @@
+---
+title: Логічне НЕ (!)
+slug: Web/JavaScript/Reference/Operators/Logical_NOT
+tags:
+  - JavaScript
+  - Довідка
+  - Логічний оператор
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Logical_NOT
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Логічний оператор НЕ (<code>!</code>) (логічне доповнення, заперечення) перетворює правдивість на хибність та навпаки. Він зазвичай використовується з {{jsxref("Boolean", "булевими")}} (логічними) значеннями. При використанні з не булевими значеннями він вертає <code>false</code>, якщо його єдиний операнд може бути приведений до <code>true</code>; інакше, вертає <code>true</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-logical-not.html", "shorter")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">!<var>expr</var>
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Вертає <code>false</code>, якщо його єдиний операнд може бути приведений до <code>true</code>; інакше, вертає <code>true</code>.</p>
+
+<p>Якщо значення може бути приведене до <code>true</code>, воно є так званим {{Glossary("truthy","правдивим")}} значенням. Якщо значення може бути приведене до <code>false</code>, воно називається {{Glossary("falsy","хибним")}}.</p>
+
+<p>Прикладами виразів, які можуть бути приведені до false, є:</p>
+
+<ul>
+ <li><code>null</code>;</li>
+ <li><code>NaN</code>;</li>
+ <li><code>0</code>;</li>
+ <li>порожній рядок (<code>""</code> або <code>''</code>, або <code>``</code>);</li>
+ <li><code>undefined</code>.</li>
+</ul>
+
+<p>Хоча оператор <code>!</code> може використовуватись з операндами не булевого типу, він все одно вважатиметься булевим оператором, оскільки значення, яке він вертає, завжди може бути приведене до <a href="/uk/docs/Web/JavaScript/Data_structures#Тип_boolean">булевого примітиву</a>. Щоб явно перетворити повернені значення (або, взагалі, будь-який вираз) до відповідного булевого значення, скористайтесь подвійним <a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">оператором НЕ</a> або конструктором {{jsxref("Global_Objects/Boolean/Boolean", "Boolean")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_НЕ">Використання НЕ</h3>
+
+<p>Наступний код демонструє приклади оператора <code>!</code> (логічне НЕ).</p>
+
+<pre class="brush: js notranslate">n1 = !true               // !t вертає false
+n2 = !false              // !f вертає true
+n3 = !''                 // !f вертає true
+n4 = !'Кіт'              // !t вертає false</pre>
+
+<h3 id="Подвійне_НЕ_!!">Подвійне НЕ (<code>!!</code>)</h3>
+
+<p>Можна використовувати пару операторів НЕ поспіль, щоб явно викликати перетворення будь-якої величини на відповідний <a href="/uk/docs/Web/JavaScript/Data_structures#Тип_boolean">булевий примітив</a>. Перетворення базується на "правдивості" або "хибності" значення (дивіться {{Glossary("truthy")}} та {{Glossary("falsy")}}).</p>
+
+<p>Таке саме перетворення можна виконати функцією {{jsxref("Global_Objects/Boolean/Boolean", "Boolean")}}.</p>
+
+<pre class="brush: js notranslate">n1 = !!true                   // !!truthy вертає true
+n2 = !!{}                     // !!truthy вертає true: <strong>будь-який</strong> об'єкт є правдивим...
+n3 = !!(new Boolean(false))   // ...навіть об'єкти Boolean, в яких <em>.valueOf()</em> дорівнює false!
+n4 = !!false                  // !!falsy вертає false
+n5 = !!""                     // !!falsy вертає false
+n6 = !!Boolean(false)         // !!falsy вертає false</pre>
+
+<h3 id="Перетворення_НЕ">Перетворення НЕ</h3>
+
+<p>Наступна операція з <strong>булевими значеннями</strong>:</p>
+
+<pre class="brush: js notranslate">!!bCondition</pre>
+
+<p>завжди дорівнює:</p>
+
+<pre class="brush: js notranslate">bCondition</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-logical-not-operator', 'Logical NOT expression')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.logical_not")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Boolean")}}</li>
+ <li>{{Glossary("Truthy")}}</li>
+ <li>{{Glossary("Falsy")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/logical_operators/index.html b/files/uk/web/javascript/reference/operators/logical_operators/index.html
new file mode 100644
index 0000000000..a2613381eb
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/logical_operators/index.html
@@ -0,0 +1,252 @@
+---
+title: Логічні оператори
+slug: Web/JavaScript/Reference/Operators/Logical_Operators
+tags:
+  - JavaScript
+  - Оператор
+  - логічний
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Логічні оператори зазвичай застосовуються до {{jsxref("Boolean", "булевих")}} (логічних) значень. В цьому випадку вони повертають значення типу Boolean. Однак, оператори <code>&amp;&amp;</code> та <code>||</code> насправді повертають значення одного з заданих операндів, тому, якщо ці оператори використовуються зі значеннями не булевого типу, вони повернуть значення не булевого типу.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-logicaloperator.html")}}</div>
+
+
+
+<h2 id="Опис">Опис</h2>
+
+<p>Логічні оператори описані у наведеній нижче таблиці (вирази <code><em>expr</em></code> можуть належати до будь-якого <a href="/uk/docs/Glossary/Data_structure">типу</a>, не лише булевого):</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Оператор</th>
+   <th>Синтаксис</th>
+   <th>Опис</th>
+  </tr>
+  <tr>
+   <td>Логічне І (<code>&amp;&amp;</code>)</td>
+   <td><code><em>expr1</em> &amp;&amp; <em>expr2</em></code></td>
+   <td>Якщо вираз <code>expr<strong>1</strong></code> може бути приведений до <code>true</code>, вертає <code>expr<strong>2</strong></code>; інакше, вертає <code>expr<strong>1</strong></code>.</td>
+  </tr>
+  <tr>
+   <td>Логічне АБО (<code>||</code>)</td>
+   <td><code><em>expr1</em> || <em>expr2</em></code></td>
+   <td>Якщо вираз <code>expr<strong>1</strong></code> може бути приведений до <code>true</code>, вертає <code>expr<strong>1</strong></code>; інакше, вертає <code>expr<strong>2</strong></code>.</td>
+  </tr>
+  <tr>
+   <td>Логічне НЕ (<code>!</code>)</td>
+   <td><code>!<em>expr</em></code></td>
+   <td>Вертає <code>false</code>, якщо його єдиний операнд може бути приведений до <code>true</code>; інакше, вертає <code>true</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Якщо значення може бути приведене до <code>true</code>, то воно називається {{Glossary("truthy","правдивим")}}. Якщо значення може бути приведене до <code>false</code>, воно називається {{Glossary("falsy","хибним")}}.</p>
+
+<p>Приклади виразів, які можуть бути приведені до false:</p>
+
+<ul>
+ <li><code>null</code>;</li>
+ <li><code>NaN</code>;</li>
+ <li><code>0</code>;</li>
+ <li>порожній рядок (<code>""</code>, або <code>''</code>, або <code>``</code>);</li>
+ <li><code>undefined</code>.</li>
+</ul>
+
+<p>Хоча оператори <code>&amp;&amp;</code> та <code>||</code> можуть використовуватись з операндами не булевого (логічного) типу, вони все одно можуть вважатися логічними операторами, оскільки значення, які вони повертають, завжди можуть бути приведені до <a href="/uk/docs/Web/JavaScript/Data_structures#Тип_boolean">булевих примітивів</a>. Щоб явно перетворити повернені значення (або, взагалі, будь-який вираз) до відповідного булевого значення, скористайтесь подвійним <a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">оператором НЕ</a> або конструктором <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a>.</p>
+
+<h3 id="Коротке_замикання_обчислення">Коротке замикання обчислення</h3>
+
+<p>Оскільки логічні вирази обчислюються зліва направо, вони перевіряються на можливе "коротке замикання" обчислення за наступними правилами:</p>
+
+<ul>
+ <li><code>(якийсь хибний вираз) &amp;&amp; <em>expr</em></code> обчислюється як хибний вираз;</li>
+ <li><code>(якийсь правдивий вираз) || <em>expr</em></code> обчислюється як правдивий вираз.</li>
+</ul>
+
+<p>Коротке замикання означає, що наведені вирази <em>expr</em> <strong>не обчислюються</strong>, тому будь-які побічні ефекти від цього не відбудуться (наприклад, якщо <em>expr</em> є викликом функції, виклик не відбувається). Це відбувається тому, що значення оператора вже визначене після обчислення першого операнду. Дивіться приклад:</p>
+
+<pre class="brush: js">function A(){ console.log('викликано A'); return false; }
+function B(){ console.log('викликано B'); return true; }
+
+console.log( A() &amp;&amp; B() );
+// виводить "викликано A" в результаті виклику функції,
+// потім виводить false (що є результатом виклику оператора)
+
+console.log( B() || A() );
+// виводить "викликано B" в результаті виклику функції,
+// потім виводить true (що є результатом виклику оператора)
+</pre>
+
+<h3 id="Пріоритет_операторів">Пріоритет операторів</h3>
+
+<p>Наступні вирази можуть виглядати еквівалентними, але це не так, оскільки оператор <code>&amp;&amp;</code> виконується перед оператором <code>||</code> (дивіться <a href="/uk/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Пріоритет операторів</a>).</p>
+
+<pre class="brush: js">true || false &amp;&amp; false      // вертає true, оскільки &amp;&amp; виконується першим
+(true || false) &amp;&amp; false    // вертає false, оскільки не можна застосувати пріоритет операторів</pre>
+
+<h3 id="Логічне_І"><a id="Logical_AND" name="Logical_AND">Логічне І (<code>&amp;&amp;</code>)</a></h3>
+
+<p>Наступний код наводить приклади оператора <code>&amp;&amp;</code> (логічне І).</p>
+
+<pre class="brush: js">a1 = true  &amp;&amp; true       // t &amp;&amp; t вертає true
+a2 = true  &amp;&amp; false      // t &amp;&amp; f вертає false
+a3 = false &amp;&amp; true       // f &amp;&amp; t вертає false
+a4 = false &amp;&amp; (3 == 4)   // f &amp;&amp; f вертає false
+a5 = 'Кіт' &amp;&amp; 'Пес'      // t &amp;&amp; t вертає "Пес"
+a6 = false &amp;&amp; 'Кіт'      // f &amp;&amp; t вертає false
+a7 = 'Кіт' &amp;&amp; false      // t &amp;&amp; f вертає false
+a8 = ''    &amp;&amp; false      // f &amp;&amp; f вертає ""
+a9 = false &amp;&amp; ''         // f &amp;&amp; f вертає false
+</pre>
+
+<h3 id="Логічне_АБО"><a id="Logical_OR" name="Logical_OR">Логічне АБО (<code>||</code>)</a></h3>
+
+<p>Наступний код наводить приклади оператора <code>||</code> (логічне АБО).</p>
+
+<pre class="brush: js">o1 = true  || true       // t || t вертає true
+o2 = false || true       // f || t вертає true
+o3 = true  || false      // t || f вертає true
+o4 = false || (3 == 4)   // f || f вертає false
+o5 = 'Кіт' || 'Пес'      // t || t вертає "Кіт"
+o6 = false || 'Кіт'      // f || t вертає "Кіт"
+o7 = 'Кіт' || false      // t || f вертає "Кіт"
+o8 = ''    || false      // f || f вертає false
+o9 = false || ''         // f || f вертає ""
+o10 = false || varObject // f || object вертає varObject
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Заувага:</strong> Якщо ви використовуєте цей оператор для присвоєння значення за замовчуванням якійсь змінній, пам'ятайте, що будь-яке <em>хибне</em> значення не буде використане. Якщо вам потрібно лише відфільтрувати {{jsxref("null")}} або {{jsxref("undefined")}}, розгляньте <a href="/uk/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">оператор null-об'єднання</a> (однак, станом на листопад 2019 ця функціональність ще не була широко реалізована і має вважатися експериментальною, оскільки знаходиться на Стадії 3).</p>
+</div>
+
+<h3 id="Логічне_НЕ_!"><a id="Logical_NOT" name="Logical_NOT">Логічне НЕ (<code>!</code>)</a></h3>
+
+<p>Наступний код демонструє приклади оператора <code>!</code> (логічне НЕ).</p>
+
+<pre class="brush: js">n1 = !true               // !t вертає false
+n2 = !false              // !f вертає true
+n3 = !''                 // !f вертає true
+n4 = !'Cat'              // !t вертає false
+</pre>
+
+<h4 id="Подвійне_НЕ_!!">Подвійне НЕ (<code>!!</code>)</h4>
+
+<p>Можна використовувати пару операторів НЕ поспіль, щоб явно викликати перетворення будь-якої величини на відповідний <a href="/uk/docs/Web/JavaScript/Data_structures#Тип_boolean">булевий примітив</a>. Перетворення базується на "правдивості" або "хибності" значення (дивіться {{Glossary("truthy")}} та {{Glossary("falsy")}}).</p>
+
+<p>Таке саме перетворення можна виконати функцією {{jsxref("Boolean")}}.</p>
+
+<pre class="brush: js">n1 = !!true                   // !!truthy вертає true
+n2 = !!{}                     // !!truthy вертає true: <strong>будь-який</strong> об'єкт є правдивим...
+n3 = !!(new Boolean(false))   // ...навіть об'єкти Boolean з false <em>.valueOf()</em>!
+n4 = !!false                  // !!falsy вертає false
+n5 = !!""                     // !!falsy вертає false
+n6 = !!Boolean(false)         // !!falsy вертає false
+</pre>
+
+<h3 id="Правила_перетворення_для_булевих_значень">Правила перетворення для булевих значень</h3>
+
+<h4 id="Перетворення_І_на_АБО">Перетворення І на АБО</h4>
+
+<p>Наступна операція з <strong>булевими значеннями</strong>:</p>
+
+<pre class="brush: js">умова1 &amp;&amp; умова2</pre>
+
+<p>завжди дорівнює:</p>
+
+<pre class="brush: js">!(!умова1 || !умова2)</pre>
+
+<h4 id="Перетворення_АБО_на_І">Перетворення АБО на І</h4>
+
+<p>Наступна операція з <strong>булевими значеннями</strong>:</p>
+
+<pre class="brush: js">умова1 || умова2</pre>
+
+<p>завжди дорівнює:</p>
+
+<pre class="brush: js">!(!умова1 &amp;&amp; !умова2)</pre>
+
+<h4 id="Перетворення_НЕ">Перетворення НЕ</h4>
+
+<p>Наступна операція з <strong>булевими значеннями</strong>:</p>
+
+<pre class="brush: js">!!умова</pre>
+
+<p>завжди дорівнює:</p>
+
+<pre class="brush: js">умова</pre>
+
+<h3 id="Прибирання_вкладених_дужок">Прибирання вкладених дужок</h3>
+
+<p>Оскільки логічні вирази обчислюються зліва направо, завжди можна прибрати дужки зі складного виразу, дотримуючись деяких правил.</p>
+
+<h4 id="Прибирання_вкладеного_І">Прибирання вкладеного І</h4>
+
+<p>Наступна складена операція з <strong>булевими значеннями</strong>:</p>
+
+<pre class="brush: js">умова1 || (умова2 &amp;&amp; умова3)</pre>
+
+<p>завжди дорівнює:</p>
+
+<pre class="brush: js">умова1 || умова2 &amp;&amp; умова3</pre>
+
+<h4 id="Прибирання_вкладеного_АБО">Прибирання вкладеного АБО</h4>
+
+<p>Наступна складена операція з <strong>булевими значеннями</strong>:</p>
+
+<pre class="brush: js">умова1 &amp;&amp; (умова2 || умова3)</pre>
+
+<p>завжди дорівнює:</p>
+
+<pre class="brush: js">!(!умова1 || !умова2 &amp;&amp; !умова3)</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.11')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Визначені у кількох розділах специфікації: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Логічний оператор НЕ</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Бінарні логічні оператори</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Визначені у кількох розділах специфікації: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">Логічний оператор НЕ</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">Бінарні логічні оператори</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Визначені у кількох розділах специфікації: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Логічний оператор НЕ</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Бінарні логічні оператори</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.logical")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Бітові оператори</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">Оператор null-об'єднання (<code>??</code>)</a></li>
+ <li>{{jsxref("Boolean")}}</li>
+ <li><a href="/uk/docs/Glossary/Truthy">Truthy</a></li>
+ <li><a href="/uk/docs/Glossary/Falsy">Falsy</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/logical_or/index.html b/files/uk/web/javascript/reference/operators/logical_or/index.html
new file mode 100644
index 0000000000..16dc2868bb
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/logical_or/index.html
@@ -0,0 +1,151 @@
+---
+title: Логічне АБО (||)
+slug: Web/JavaScript/Reference/Operators/Logical_OR
+tags:
+  - JavaScript
+  - Довідка
+  - Логічний оператор
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Logical_OR
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Логічний оператор АБО (<code>||</code>) (логічна диз'юнкція) для набору операндів повертає true тільки якщо один чи більше з його операндів дорівнюють true. Зазвичай його використовують з {{jsxref("Boolean","булевими")}} (логічними) значеннями. В цьому випадку він повертає булеве значення. Однак, оператор <code>||</code> насправді повертає значення одного з наданих операндів, а отже, якщо цей оператор застосовується з не булевими значеннями, він поверне не булеве значення.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-logical-or.html", "shorter")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>вираз1</em> || <em>вираз2</em>
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Якщо <code>вираз<strong>1</strong></code> можна привести до <code>true</code>, вертає <code>вираз<strong>1</strong></code>; інакше, вертає <code>вираз<strong>2</strong></code>.</p>
+
+<p>Якщо значення може бути приведене до <code>true</code>, воно є так званим {{Glossary("truthy","правдивим")}} значенням. Якщо значення може бути приведене до <code>false</code>, воно називається {{Glossary("falsy","хибним")}}.</p>
+
+<p>Прикладами виразів, які можуть бути приведені до false, є:</p>
+
+<ul>
+ <li><code>null</code>;</li>
+ <li><code>NaN</code>;</li>
+ <li><code>0</code>;</li>
+ <li>порожній рядок (<code>""</code> або <code>''</code>, або <code>``</code>);</li>
+ <li><code>undefined</code>.</li>
+</ul>
+
+<p>Хоча оператор <code>||</code> може використовуватись з операндами не булевого типу, він все одно може вважатися булевим оператором, оскільки значення, які він повертає, завжди можуть бути приведені до <a href="/uk/docs/Web/JavaScript/Data_structures#%D0%A2%D0%B8%D0%BF_boolean">булевого примітиву</a>. Щоб явно перетворити повернені значення (або, взагалі, будь-який вираз) до відповідного булевого значення, скористайтесь подвійним <a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">оператором НЕ</a> або конструктором {{jsxref("Global_Objects/Boolean/Boolean", "Boolean")}}.</p>
+
+<h3 id="Обчислення_з_коротким_замиканням">Обчислення з коротким замиканням</h3>
+
+<p>Логічні вирази АБО обчислюються зліва направо, вони перевіряються на "коротке замикання" під час обчислення за наступним правилом:</p>
+
+<p><code>(якийсь правдивий вираз) || <em>expr</em></code> обчислюється як правдивий вираз.</p>
+
+<p>Коротке замикання означає, що частина <code><em>expr</em></code> у прикладі <strong>не обчислюється</strong>, тому будь-які побічні ефекти від цього не відбудуться (наприклад, якщо <code><em>expr</em></code> є викликом функції, виклику не станеться). Це відбувається тому, що значення оператора вже визначене після обчислення першого операнду. Дивіться приклад:</p>
+
+<pre class="brush: js notranslate">function A(){ console.log('викликано A'); return false; }
+function B(){ console.log('викликано B'); return true; }
+
+console.log( B() || A() );
+// виводить "викликано B" в результаті виклику функції,
+// потім виводить true (що є результатом виклику оператора)
+</pre>
+
+<h3 id="Пріоритет_операторів">Пріоритет операторів</h3>
+
+<p>Наступні вирази можуть виглядати еквівалентними, але це не так, оскільки оператор <code>&amp;&amp;</code> виконується перед оператором <code>||</code> (дивіться <a href="/uk/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Пріоритет операторів</a>).</p>
+
+<pre class="brush: js notranslate">true || false &amp;&amp; false      // вертає true, оскільки &amp;&amp; виконується першим
+(true || false) &amp;&amp; false    // вертає false, бо пріоритет операторів не застосовується</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_АБО">Використання АБО</h3>
+
+<p>Наступний код наводить приклади оператора <code>||</code> (логічне АБО).</p>
+
+<pre class="brush: js notranslate">o1 = true  || true       // t || t вертає true
+o2 = false || true       // f || t вертає true
+o3 = true  || false      // t || f вертає true
+o4 = false || (3 == 4)   // f || f вертає false
+o5 = 'Кіт' || 'Пес'      // t || t вертає "Кіт"
+o6 = false || 'Кіт'      // f || t вертає "Кіт"
+o7 = 'Кіт' || false      // t || f вертає "Кіт"
+o8 = ''    || false      // f || f вертає false
+o9 = false || ''         // f || f вертає ""
+o10 = false || varObject // f || об'єкт вертає varObject
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Заувага:</strong> Якщо ви використовуєте цей оператор для присвоєння значення за замовчуванням якійсь змінній, пам'ятайте, що будь-яке <em>хибне</em> значення не буде використане. Якщо вам потрібно лише відфільтрувати {{jsxref("null")}} або {{jsxref("undefined")}}, розгляньте <a href="/uk/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">оператор null-об'єднання</a>.</p>
+</div>
+
+<h3 id="Правила_перетворення_для_булевих_значень">Правила перетворення для булевих значень</h3>
+
+<h4 id="Перетворення_І_на_АБО">Перетворення І на АБО</h4>
+
+<p>Наступна операція з <strong>булевими значеннями</strong>:</p>
+
+<pre class="brush: js notranslate">bCondition1 &amp;&amp; bCondition2</pre>
+
+<p>завжди дорівнює:</p>
+
+<pre class="brush: js notranslate">!(!bCondition1 || !bCondition2)</pre>
+
+<h4 id="Перетворення_АБО_на_І">Перетворення АБО на І</h4>
+
+<p>Наступна операція з <strong>булевими значеннями</strong>:</p>
+
+<pre class="brush: js notranslate">bCondition1 || bCondition2</pre>
+
+<p>завжди дорівнює:</p>
+
+<pre class="brush: js notranslate">!(!bCondition1 &amp;&amp; !bCondition2)</pre>
+
+<h3 id="Прибирання_вкладених_дужок">Прибирання вкладених дужок</h3>
+
+<p>Оскільки логічні вирази обчислюються зліва направо, завжди можна прибрати дужки зі складного виразу, дотримуючись певних правил.</p>
+
+<p>Наступна складена операція з <strong>булевими значеннями</strong>:</p>
+
+<pre class="brush: js notranslate">bCondition1 &amp;&amp; (bCondition2 || bCondition3)</pre>
+
+<p>завжди дорівнює:</p>
+
+<pre class="brush: js notranslate">!(!bCondition1 || !bCondition2 &amp;&amp; !bCondition3)</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#prod-LogicalORExpression', 'Logical OR expression')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.logical_or")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">Оператор null-об'єднання (<code>??</code>)</a></li>
+ <li>{{jsxref("Boolean")}}</li>
+ <li>{{Glossary("Truthy")}}</li>
+ <li>{{Glossary("Falsy")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/multiplication/index.html b/files/uk/web/javascript/reference/operators/multiplication/index.html
new file mode 100644
index 0000000000..7f55e8f8ac
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/multiplication/index.html
@@ -0,0 +1,73 @@
+---
+title: Множення (*)
+slug: Web/JavaScript/Reference/Operators/Multiplication
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Multiplication
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор множення (<code>*</code>) повертає добуток операндів.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-multiplication.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><strong>Оператор:</strong> <var>x</var> * <var>y</var>
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Множення_чисел">Множення чисел</h3>
+
+<pre class="brush: js notranslate"> 2 * 2      // 4
+-2 * 2     // -4
+</pre>
+
+<h3 id="Множення_на_нескінченність">Множення на нескінченність</h3>
+
+<pre class="brush: js notranslate">Infinity * 0         // NaN
+Infinity * Infinity  // Infinity</pre>
+
+<h3 id="Множення_нечислових_значень">Множення нечислових значень</h3>
+
+<pre class="brush: js notranslate">'foo' * 2 // NaN</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Multiplication operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.multiplication")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Addition">Оператор додавання</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Subtraction">Оператор віднімання</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Division">Оператор ділення</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Remainder">Оператор остачі</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Exponentiation">Оператор піднесення до степеня</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Increment">Оператор інкременту</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Decrement">Оператор декременту</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_negation">Унарний мінус</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_plus">Унарний плюс</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/multiplication_assignment/index.html b/files/uk/web/javascript/reference/operators/multiplication_assignment/index.html
new file mode 100644
index 0000000000..4d80c47ec9
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/multiplication_assignment/index.html
@@ -0,0 +1,60 @@
+---
+title: Присвоєння з множенням (*=)
+slug: Web/JavaScript/Reference/Operators/Multiplication_assignment
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+  - Оператор присвоєння
+translation_of: Web/JavaScript/Reference/Operators/Multiplication_assignment
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор присвоєння з множенням (<code>*=</code>) помножує змінну на значення правого операнда та присвоює результат змінній.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-multiplication-assignment.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x *= y
+<strong>Значення:</strong> x  = x * y</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_присвоєння_з_множенням">Використання присвоєння з множенням</h3>
+
+<pre class="brush: js notranslate">// Розглянемо таку змінну
+//  bar = 5
+
+bar *= 2     // 10
+bar *= 'foo' // NaN</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.multiplication_assignment")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8_%D0%BF%D1%80%D0%B8%D1%81%D0%B2%D0%BE%D1%94%D0%BD%D0%BD%D1%8F">Оператори присвоєння у посібнику JS</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Multiplication">Оператор множення</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/new.target/index.html b/files/uk/web/javascript/reference/operators/new.target/index.html
new file mode 100644
index 0000000000..fd0e121e3a
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/new.target/index.html
@@ -0,0 +1,97 @@
+---
+title: new.target
+slug: Web/JavaScript/Reference/Operators/new.target
+translation_of: Web/JavaScript/Reference/Operators/new.target
+---
+<div>{{JSSidebar("Operators")}}</div>
+
+<p>Псевдовластивість<strong> <code>new.target</code></strong> дозволяє виявляти, чи були функції або конструктори створені за допомогою оператора <a href="/uk/docs/Web/JavaScript/Reference/Operators/new">new</a>. У конструкторах та функціях, запущених з використанням оператора <a href="/uk/docs/Web/JavaScript/Reference/Operators/new">new</a>, <code>new.target</code> повертає посилання на конструктор або функцію. У звичайних викликах функцій <code>new.target</code> дорівнює {{jsxref("undefined")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-newtarget.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">new.target</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Синтаксис <code>new.target</code> складається з ключового слова <code>new</code>, крапки та ідентифікатора <code>target</code>. Зазвичай, зліва від крапки стоїть об'єкт, до властивості якого здійснюється звернення, але тут <code>new</code> не є об'єктом.</p>
+
+<p>Псевдовластивість <code>new.target</code> доступна в усіх функціях. У конструкторах класів вона посилається на зконструйований клас. У звичайних функціях вона посилається на саму функцію, за умови, що вона була викликана з використанням оператора <a href="/uk/docs/Web/JavaScript/Reference/Operators/new">new</a>; в інших випадках <code>new.target</code> дорівнює {{jsxref("undefined")}}. У <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкових функціях </a><code>new.target</code> успадковується від оточуючої області видимості.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="new.target_у_викликах_функцій">new.target у викликах функцій</h3>
+
+<p>У звичайних викликах функцій (як протилежність викликам конструкторів) <code>new.target</code> дорівнює {{jsxref("undefined")}}. Це дозволяє визначити, чи була функція викликана з <a href="/uk/docs/Web/JavaScript/Reference/Operators/new">new</a> як конструктор.</p>
+
+<pre class="brush: js">function Foo() {
+  if (!new.target) throw 'Foo() має викликатись з new';
+  console.log('Foo викликано з new');
+}
+
+new Foo(); // виводить "Foo викликано з new"
+Foo(); // викидає "Foo() має викликатись з new"
+</pre>
+
+<h3 id="new.target_у_конструкторах">new.target у конструкторах</h3>
+
+<p>У конструкторах класів <code>new.target</code> посилається на конструктор, що був безпосередньо викликаний <code>new</code>. Це також стосується випадку, коли конструктор знаходиться у батьківському класі та був делегований з дочірнього конструктора.</p>
+
+<pre class="brush: js">class A {
+  constructor() {
+    console.log(new.target.name);
+  }
+}
+
+class B extends A { constructor() { super(); } }
+
+var a = new A(); // виводить "A"
+var b = new B(); // виводить "B"
+
+class C { constructor() { console.log(new.target); } }
+class D extends C { constructor() { super(); } }
+
+var c = new C(); // виводить class C{constructor(){console.log(new.target);}}
+var d = new D(); // виводить class D extends C{constructor(){super();}}</pre>
+
+<p class="summary">Отже, з наведеного вище прикладу класів C та D, схоже, що <code>new.target</code> вказує на визначення класу, екземпляр якого було ініціалізовано. Наприклад, коли було ініціалізовано екземпляр D за допомогою new, було виведено визначення класу D, і схожим чином у випадку з c, було виведено клас C.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.new_target")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Functions">Функції</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Classes">Класи</a></li>
+ <li><code><a href="/uk/docs/Web/JavaScript/Reference/Operators/new">new</a></code></li>
+ <li><code><a href="/uk/docs/Web/JavaScript/Reference/Operators/this">this</a></code></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/new/index.html b/files/uk/web/javascript/reference/operators/new/index.html
new file mode 100644
index 0000000000..692938fdd2
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/new/index.html
@@ -0,0 +1,197 @@
+---
+title: Оператор new
+slug: Web/JavaScript/Reference/Operators/new
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/new
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><span class="seoSummary"><strong>Оператор <code>new</code></strong> дозволяє розробникам створити екземпляр визначеного користувачем типу об'єкта, або одного із вбудованих типів об'єктів, що містять функцію-конструктор.</span> Ключове слово <strong><code>new</code></strong> робить наступне:</p>
+
+<ol>
+ <li>Створює простий, порожній об'єкт JavaScript;</li>
+ <li>Прив'язує (присвоює в якості конструктора) інший об'єкт до цього об'єкта;</li>
+ <li>Передає створений об'єкт з <em>кроку 1</em> в якості контексту <code>this</code>;</li>
+ <li>Вертає <code>this</code>, якщо функція не вертає свій власний об'єкт. </li>
+</ol>
+
+<p>{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">new <var>constructor</var>[([<var>arguments</var>])]</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><var>constructor</var></code></dt>
+ <dd>Клас чи функція, що визначає тип екземпляру об'єкта.</dd>
+</dl>
+
+<dl>
+ <dt><code><var>arguments</var></code></dt>
+ <dd>Список значень, з якими викликатиметься <code><var>constructor</var></code>.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Створення визначеного користувачем об'єкта потребує двох кроків:</p>
+
+<ol>
+ <li>Визначити тип об'єкта, написавши функцію.</li>
+ <li>Створити екземпляр об'єкта за допомогою <code>new</code>.</li>
+</ol>
+
+<p>Щоб визначити тип об'єкта, створіть функцію типу об'єкта, яка зазначає його ім'я та властивості. Об'єкт може мати властивість, яка є іншим об'єктом. Дивіться приклади нижче.</p>
+
+<p>Коли виконується код <code>new <em>Foo</em>(...)</code>, відбувається наступне:</p>
+
+<ol>
+ <li>Створюється новий об'єкт, успадкований від <code><em>Foo</em>.prototype</code>.</li>
+ <li>Викликається функція-конструктор <code><em>Foo</em></code> із заданими аргументами та з контекстом <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, прив'язаним до новоствореного об'єкта. <code>new <em>Foo</em></code> дорівнює <code>new <em>Foo</em>()</code>, тобто, якщо жодних аргументів не задано, <code><em>Foo</em></code> викликається без аргументів.</li>
+ <li>Об'єкт (що не є null, false, 3.1415 чи іншим простим типом), який повертається функцією-конструктором, стає результатом усього виразу <code>new</code>. Якщо функція-конструктор не повертає об'єкт явно, використовується об'єкт, створений у кроці 1. (Зазвичай, конструктори не повертають значень, але можуть це зробити, якщо потрібно переписати звичайний процес створення об'єкта.)</li>
+</ol>
+
+<p>Ви завжди можете додати властивість до попередньо визначеного об'єкта. Наприклад, інструкція <code>car1.color = "чорний"</code> додає властивість <code>color</code> (колір) до об'єкта <code>car1</code> та присвоює їй значення "<code>чорний</code>". Однак, це не впливає на інші об'єкти. Щоб додати нову властивість до усіх об'єктів одного типу, ви маєте додати властивість до визначення типу об'єкта <code>Car</code>.</p>
+
+<p>Ви можете додати спільну властивість до попередньо визначеного типу об'єкта за допомогою властивості <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">Function.prototype</a></code>. Це визначає властивість, спільну для усіх об'єктів, створених цією функцією, а не лише для одного екземпляру цього типу. Наступний код додає властивість color (колір) зі значенням <code>"стандартний колір"</code> усім об'єктам типу <code>Car</code>, а потім замінює це значення рядком "<code>чорний</code>" тільки для екземпляру об'єкта <code>car1</code>. Дивіться більше у статті <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">prototype</a>.</p>
+
+<pre class="brush: js">function Car() {}
+car1 = new Car();
+car2 = new Car();
+
+console.log(car1.color);    // undefined
+
+Car.prototype.color = 'стандартний колір';
+console.log(car1.color);    // стандартний колір
+
+car1.color = 'чорний';
+console.log(car1.color);   // чорний
+
+console.log(Object.getPrototypeOf(car1).color) //стандартний колір
+console.log(Object.getPrototypeOf(car2).color) //стандартний колір
+console.log(car1.color)  // чорний
+console.log(car2.color) // стандартний колір</pre>
+
+<div class="note">
+<p>Якщо ви не напишете оператор <code>new</code>, <strong>функція-конструктор буде викликана як будь-яка звичайна фукнція,</strong> <em>без створення об'єкта.</em> У цьому випадку значення <code>this</code> також буде іншим.</p>
+</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Тип_обєкта_та_екземпляр_обєкта">Тип об'єкта та екземпляр об'єкта</h3>
+
+<p>Припустимо, вам потрібно створити тип об'єкта для машин. Тип об'єкта має називатися <code>Car</code> і має містити властивості для марки, моделі та року випуску. Для цього ви б написали наступну функцію:</p>
+
+<pre class="brush: js">function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+</pre>
+
+<p>Тепер ви можете створити об'єкт під назвою <code>myCar</code>:</p>
+
+<pre class="brush: js">var myСar = new Car('Eagle', 'Talon TSi', 1993);
+</pre>
+
+<p>Ця інструкція створює об'єкт <code>myСar</code> і присвоює його властивостям задані значення. В результаті значенням <code>myCar.make</code> буде строка "Eagle", <code>myCar.year</code> - ціле число 1993, тощо.<br>
+ <br>
+ Викликаючи <code>new</code>, можна створити необмежене число об'єктів типу <code>Car</code>. Наприклад:</p>
+
+<pre class="brush: js">var kensCar = new Car('Nissan', '300ZX', 1992);
+</pre>
+
+<h3 id="Властивість_обєкта_яка_є_іншим_обєктом">Властивість об'єкта, яка є іншим об'єктом</h3>
+
+<p>Припустимо, ви визначаєте об'єкт на ім'я <code>Person</code> (людина) наступним чином:</p>
+
+<pre class="brush: js">function Person(name, age, sex) {
+  this.name = name;
+  this.age = age;
+  this.sex = sex;
+}
+</pre>
+
+<p>Інстанціюємо два нових об'єкти типу <code>Person</code>:</p>
+
+<pre class="brush: js">var rand = new Person('Rand McNally', 33, 'Ч');
+var ken = new Person('Ken Jones', 39, 'Ч');
+</pre>
+
+<p>Далі можна доповнити визначення <code>Car</code> і включити в нього властивість <code>owner</code> (власник). Ця властивість буде приймати об'єкт <code>Person</code>, як у прикладі нижче:</p>
+
+<pre class="brush: js">function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+}
+</pre>
+
+<p>Тепер, щоб інстанціювати нові об'єкти, ви робите наступне:</p>
+
+<pre class="brush: js">var car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
+var car2 = new Car('Nissan', '300ZX', 1992, ken);
+</pre>
+
+<p>Замість того, щоб передавати рядковий літерал або ціле число при створенні нових об'єктів, ці інструкції передають об'єкти <code>rand</code> та <code>ken</code> в якості власників. Щоб дізнатись ім'я власника <code>car2</code>, ви можете звернутись до даної властивості:</p>
+
+<pre class="brush: js">car2.owner.name
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-new-operator', 'The new Operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-new-operator', 'The new Operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.2.2', 'The new Operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.2.2', 'The new Operator')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.2.2', 'The new Operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.new")}}</p>
+
+<h2 id="Також_див.">Також див.</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Reflect.construct()")}}</li>
+ <li>{{jsxref("Object.prototype")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/nullish_coalescing_operator/index.html b/files/uk/web/javascript/reference/operators/nullish_coalescing_operator/index.html
new file mode 100644
index 0000000000..7b48188731
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/nullish_coalescing_operator/index.html
@@ -0,0 +1,166 @@
+---
+title: Оператор null-об'єднання
+slug: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
+tags:
+  - JavaScript
+  - null-об'єднання
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
+---
+<p>{{JSSidebar("Operators")}}</p>
+
+<p><strong>Оператор null-об'єднання (<code>??</code>)</strong> - це логічний оператор, який повертає свій правий операнд, якщо його лівий операнд дорівнює {{jsxref("null")}} чи {{jsxref("undefined")}}, інакше, він повертає свій лівий операнд.</p>
+
+<p>На відміну від <a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR">логічного АБО (<code>||</code>)</a>, лівий операнд повертається, якщо це <em><a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Опис">хибне</a></em> значення, яке не дорівнює <code>null</code> чи <code>undefined</code>. Іншими словами, якщо ви використовуєте <code>||</code> для надання значення за замовчуванням іншій змінній <code>foo</code>, ви можете зіткнутися з неочікуваною поведінкою, якщо використовуєте хибні значення (напр., <code>''</code> або <code>0</code>). Дивіться нижче більше прикладів.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-nullishcoalescingoperator.html")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.<br>
+ See <a href="https://github.com/mdn/interactive-examples/pull/1482#issuecomment-553841750">PR #1482</a> regarding the addition of this example.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>лівийВираз</var> ?? <var>правийВираз</var>
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Оператор null-об'єднання повертає результати свого правого виразу, якщо лівий вираз дорівнює або {{jsxref("null")}}, або {{jsxref("undefined")}}.</p>
+
+<h3 id="Присвоєння_змінній_значення_за_замовчуванням">Присвоєння змінній значення за замовчуванням</h3>
+
+<p>Раніше, якщо потрібно було присвоїти змінній значення за замовчуванням, звичайною практикою було використання логічного оператора АБО (<code><a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR">||</a></code>):</p>
+
+<pre class="brush: js">let foo;
+...
+// змінній foo ще не присвоювали значення, тому вона ще дорівнює undefined
+let someDummyText = foo || 'Привіт!';</pre>
+
+<p>Однак, через те, що <code>||</code> є булевим логічним оператором, лівий операнд примусово приводився до булевого значення для обчислення, і будь-яке <em>хибне</em> значення (<code>0</code>, <code>''</code>, <code>NaN</code>, <code>null</code>, <code>undefined</code>) не поверталось. Ця поведінка може спричинити несподівані наслідки, якщо ви розглядаєте <code>0</code>, <code>''</code> чи <code>NaN</code> як коректні значення.</p>
+
+<pre class="brush: js">let count;
+let text;
+...
+count = 0;
+text = "";
+...
+let qty = count || 42;
+let message = text || "привіт!";
+console.log(qty);     // 42, а не 0
+console.log(message); // "привіт!", а не ""
+</pre>
+
+<p>Оператор null-об'єднання уникає цієї пастки, повертаючи другий операнд лише тоді, коли перший повертає або <code>null</code>, або <code>undefined</code> (і ніяке інше хибне значення):</p>
+
+<pre class="brush: js">let myText = ''; // Порожній рядок (який також є хибним значенням)
+
+let notFalsyText = myText || 'Привіт';
+console.log(notFalsyText); // Привіт
+
+let preservingFalsy = myText ?? 'Привіт, сусід';
+console.log(preservingFalsy); // '' (оскільки myText не дорівнює undefined чи null)
+</pre>
+
+<h3 id="Коротке_замикання">Коротке замикання</h3>
+
+<p>Як і у логічному операторі АБО, правий вираз не обчислюється, якщо лівий не дорівнює ані <code>null</code>, ані <code>undefined</code>.</p>
+
+<pre class="brush: js">function A() { console.log('викликано A'); return undefined;}
+function B() { console.log('викликано B'); return false;}
+function C() { console.log('викликано C'); return "foo";}
+
+console.log( A() ?? C() );
+// виводить "викликано A", далі "викликано C", і далі "foo",
+// оскільки функція A() повернула undefined, отже, обидва вирази обчислюються
+
+console.log( B() ?? C() );
+// виводить "викликано B", далі "false",
+// оскільки B() повернула false (а не null чи undefined), правий
+// вираз не обчислювався
+</pre>
+
+<h3 id="Не_утворює_ланцюгів_з_операторами_І_чи_АБО">Не утворює ланцюгів з операторами І чи АБО</h3>
+
+<p>Неможливо об'єднати оператори І (<code>&amp;&amp;</code>) та АБО (<code>||</code>) безпосередньо з <code>??</code>. В таких випадках буде викинуто помилку <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code>.</p>
+
+<pre class="brush: js">null || undefined ?? "foo"; // викидає SyntaxError
+true || undefined ?? "foo"; // викидає SyntaxError</pre>
+
+<p>Однак, використання дужок для явного зазначення пріоритетності, є коректним:</p>
+
+<pre class="brush: js">(null || undefined) ?? "foo"; // вертає "foo"
+</pre>
+
+<h3 id="Звязок_з_оператором_необовязкового_ланцюгування_.">Зв'язок з оператором необов'язкового ланцюгування (<code>?.</code>)</h3>
+
+<p>Оператор null-об'єднання ставиться до значень <code>undefined</code> та <code>null</code> особливим чином, так само, як <a href="/uk/docs/Web/JavaScript/Reference/Operators/Optional_chaining">оператор необов'язкового ланцюгування (<code>?.</code>)</a>, який є корисним для доступу до властивостей об'єкта, які можуть дорівнювати <code>null</code> чи <code>undefined</code>.</p>
+
+<pre class="brush: js">let foo = { someFooProp: "привіт" };
+
+console.log(foo.someFooProp?.toUpperCase());  // "ПРИВІТ"
+console.log(foo.someBarProp?.toUpperCase()); // undefined
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>У цьому прикладі ми задаємо початкові значення, але залишаємо значення, які не дорівнюють <code>null</code> чи <code>undefined</code>.</p>
+
+<pre class="brush: js">function getMiscObj(){
+  return {
+    aNullProperty: null,
+    emptyText: "",
+    someNumber: 42
+  };
+};
+
+const miscObj = getMiscObj();
+
+const newObj = {};
+newObj.propA = miscObj.aNullProperty ?? "початкове для A";
+newObj.propB = miscObj.emptyText ?? "початкове для B";
+newObj.propC = miscObj.someNumber ?? 0;
+
+console.log(newObj.propA); // "початкове для A"
+console.log(newObj.propB); // "" (оскільки порожній рядок не дорівнює null чи undefined)
+console.log(newObj.propC); // 42
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.es/proposal-nullish-coalescing/#top">Proposal for the "nullish coalescing" operator</a></td>
+   <td>Стадія 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.nullish_coalescing")}}</p>
+
+<h3 id="Хід_реалізації">Хід реалізації</h3>
+
+<p>Наведена нижче таблиця надає щоденний статус реалізації цієї функціональності, оскільки функціональність ще не досягла кросбраузерної стабільності. Дані генеруються запуском відповідних тестів функціональності у <a href="https://github.com/tc39/test262">Test262</a>, стандартному тестовому наборі JavaScript, на нічній збірці чи на останньому релізі рушія JavaScript кожного веб-переглядача.</p>
+
+<div>{{EmbedTest262ReportResultsTable("coalesce-expression")}}</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Оператор необов'язкового ланцюгування</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR">Оператор логічне АБО (<code>||</code>)</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Functions/Default_parameters">Параметри за замовчуванням у функціях</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/operator_precedence/index.html b/files/uk/web/javascript/reference/operators/operator_precedence/index.html
new file mode 100644
index 0000000000..678647952c
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/operator_precedence/index.html
@@ -0,0 +1,332 @@
+---
+title: Пріоритет операторів
+slug: Web/JavaScript/Reference/Operators/Operator_Precedence
+tags:
+  - JavaScript
+  - Оператор
+  - пріоритет
+translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Пріоритет операторів</strong> визначає, яким чином розбиратимуться оператори по відношенню один до одного. Оператори з вищим пріоритетом стають операндами операторів з нижчим пріоритетом.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-operatorprecedence.html")}}</div>
+
+
+
+<h2 id="Асоціативність">Асоціативність</h2>
+
+<p>Асоціативність визначає те, яким чином розбираються оператори з однаковим пріоритетом. Наприклад, розглянемо вираз:</p>
+
+<pre class="syntaxbox">a OP b OP c
+</pre>
+
+<p>Лівоасоціативність (зліва направо) означає, що вони оброблятимуться як <code>(a OP b) OP c</code>, в той час як правоасоціативність (справа наліво) означає, що він буде інтерпретований як <code>a OP (b OP c)</code>. Оператори присвоєння є правоасоціативними, отже, ви можете написати:</p>
+
+<pre class="brush: js">a = b = 5;
+</pre>
+
+<p>очікуючи, що <code>a</code> та <code>b</code> отримають значення 5. Все тому, що оператор присвоєння повертає значення, яке було присвоєне. Спочатку <code>b</code> присвоюється 5. Потім <code>a</code> також присвоюється 5, значення, яке повертається від <code>b = 5</code>, або правого операнду присвоєння.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">3 &gt; 2 &amp;&amp; 2 &gt; 1
+// вертає true
+
+3 &gt; 2 &gt; 1
+// вертає false, тому що 3 &gt; 2 дорівнює true, а true &gt; 1 дорівнює false
+// Додавання дужок робить все зрозумілішим: (3 &gt; 2) &gt; 1</pre>
+
+<h2 id="Таблиця">Таблиця</h2>
+
+<p>Ця таблиця впорядкована від найвищого (21) до найнижчого (1) пріоритету.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Пріоритет</th>
+   <th>Тип оператора</th>
+   <th>Асоціативність</th>
+   <th>Окремі оператори</th>
+  </tr>
+  <tr>
+   <td>21</td>
+   <td>{{jsxref("Operators/Grouping", "Групування", "", 1)}}</td>
+   <td>н/з</td>
+   <td><code>( … )</code></td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="5">20</td>
+   <td>{{jsxref("Operators/Property_Accessors", "Доступ до властивостей", "#Крапкова_нотація", 1)}}</td>
+   <td>зліва направо</td>
+   <td><code>… . …</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Operators/Property_Accessors", "Доступ до обчислених властивостей","#Дужкова_нотація", 1)}}</td>
+   <td>зліва направо</td>
+   <td><code>… [ … ]</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Operators/new","new")}} (зі списком аргументів)</td>
+   <td>н/з</td>
+   <td><code>new … ( … )</code></td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Guide/Functions">Виклик функції</a></td>
+   <td>зліва направо</td>
+   <td><code>… ( <var>… </var>)</code></td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Необов'язкове ланцюгування</a></td>
+   <td>зліва направо</td>
+   <td><code>?.</code></td>
+  </tr>
+  <tr>
+   <td rowspan="1">19</td>
+   <td>{{jsxref("Operators/new","new")}} (без списку аргументів)</td>
+   <td>справа наліво</td>
+   <td><code>new …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">18</td>
+   <td>{{jsxref("Operators/Arithmetic_Operators","Постфіксний інкремент","#Increment", 1)}}</td>
+   <td colspan="1" rowspan="2">н/з</td>
+   <td><code>… ++</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Operators/Arithmetic_Operators","Постфіксний декремент","#Decrement", 1)}}</td>
+   <td><code>… --</code></td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="10">17</td>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">Логічне НЕ</a></td>
+   <td colspan="1" rowspan="10">справа наліво</td>
+   <td><code>! …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT">Побітове НЕ</a></td>
+   <td><code>~ …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus">Унарний плюс</a></td>
+   <td><code>+ …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation">Унарний мінус</a></td>
+   <td><code>- …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">Префіксний інкремент</a></td>
+   <td><code>++ …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement">Префіксний декремент</a></td>
+   <td><code>-- …</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Operators/typeof", "typeof")}}</td>
+   <td><code>typeof …</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Operators/void", "void")}}</td>
+   <td><code>void …</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Operators/delete", "delete")}}</td>
+   <td><code>delete …</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Operators/await", "await")}}</td>
+   <td><code>await …</code></td>
+  </tr>
+  <tr>
+   <td>16</td>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation">Піднесення до степеня</a></td>
+   <td>справа наліво</td>
+   <td><code>… ** …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="3">15</td>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Multiplication">Множення</a></td>
+   <td colspan="1" rowspan="3">зліва направо</td>
+   <td><code>… * …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Division">Ділення</a></td>
+   <td><code>… / …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder">Остача</a></td>
+   <td><code>… % …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">14</td>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition">Додавання</a></td>
+   <td colspan="1" rowspan="2">зліва направо</td>
+   <td><code>… + …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Subtraction">Віднімання</a></td>
+   <td><code>… - …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="3">13</td>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Left_shift">Бітовий лівий зсув</a></td>
+   <td colspan="1" rowspan="3">зліва направо</td>
+   <td><code>… &lt;&lt; …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Right_shift">Бітовий правий зсув</a></td>
+   <td><code>… &gt;&gt; …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Unsigned_right_shift">Бітовий беззнаковий правий зсув</a></td>
+   <td><code>… &gt;&gt;&gt; …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="6">12</td>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Менше_ніж_&lt;">Менше ніж</a></td>
+   <td colspan="1" rowspan="6">зліва направо</td>
+   <td><code>… &lt; …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Менше_чи_дорівнює_&lt;">Менше чи дорівнює</a></td>
+   <td><code>… &lt;= …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Більше_ніж_>">Більше ніж</a></td>
+   <td><code>… &gt; …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Більше_чи_дорівнює_>">Більше чи порівнює</a></td>
+   <td><code>… &gt;= …</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Operators/in", "in")}}</td>
+   <td><code>… in …</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Operators/instanceof", "instanceof")}}</td>
+   <td><code>… instanceof …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="4">11</td>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Рівність">Рівність</a></td>
+   <td colspan="1" rowspan="4">зліва направо</td>
+   <td><code>… == …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Нерівність_!">Нерівність</a></td>
+   <td><code>… != …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Ідентичність_строга_рівність">Строга рівність</a></td>
+   <td><code>… === …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Неідентичність_строга_нерівність_!">Строга нерівність</a></td>
+   <td><code>… !== …</code></td>
+  </tr>
+  <tr>
+   <td>10</td>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_AND">Побітове І</a></td>
+   <td>зліва направо</td>
+   <td><code>… &amp; …</code></td>
+  </tr>
+  <tr>
+   <td>9</td>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">Виключне побітове АБО</a></td>
+   <td>зліва направо</td>
+   <td><code>… ^ …</code></td>
+  </tr>
+  <tr>
+   <td>8</td>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR">Побітове АБО</a></td>
+   <td>зліва направо</td>
+   <td><code>… | …</code></td>
+  </tr>
+  <tr>
+   <td>7</td>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">Оператор null-об'єднання</a></td>
+   <td>зліва направо</td>
+   <td><code>… ?? …</code></td>
+  </tr>
+  <tr>
+   <td>6</td>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND">Логічне І</a></td>
+   <td>зліва направо</td>
+   <td><code>… &amp;&amp; …</code></td>
+  </tr>
+  <tr>
+   <td>5</td>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR">Логічне АБО</a></td>
+   <td>зліва направо</td>
+   <td><code>… || …</code></td>
+  </tr>
+  <tr>
+   <td>4</td>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">Умовний оператор</a></td>
+   <td>справа наліво</td>
+   <td><code>… ? … : …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="13">3</td>
+   <td rowspan="13"><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Присвоєння</a></td>
+   <td rowspan="13">справа наліво</td>
+   <td><code>… = …</code></td>
+  </tr>
+  <tr>
+   <td><code>… += …</code></td>
+  </tr>
+  <tr>
+   <td><code>… -= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… **= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… *= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… /= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… %= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… &lt;&lt;= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… &gt;&gt;= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… &gt;&gt;&gt;= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… &amp;= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… ^= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… |= …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">2</td>
+   <td>{{jsxref("Operators/yield", "yield")}}</td>
+   <td colspan="1" rowspan="2">справа наліво</td>
+   <td><code>yield …</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Operators/yield*", "yield*")}}</td>
+   <td><code>yield* …</code></td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Comma_Operator">Кома / Послідовність</a></td>
+   <td>зліва направо</td>
+   <td><code>… , …</code></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/uk/web/javascript/reference/operators/optional_chaining/index.html b/files/uk/web/javascript/reference/operators/optional_chaining/index.html
new file mode 100644
index 0000000000..c20ef9f9a6
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/optional_chaining/index.html
@@ -0,0 +1,194 @@
+---
+title: Необов'язкове ланцюгування
+slug: Web/JavaScript/Reference/Operators/Optional_chaining
+tags:
+  - JavaScript
+  - Optional chaining
+  - Експериментальний
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Optional_chaining
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<div>{{SeeCompatTable}}</div>
+
+<div></div>
+
+<p>Оператор <strong>необов'язкового ланцюгування</strong> <strong><code>?.</code></strong> дозволяє читати значення властивості, розташованої глибоко всередині ланцюга пов'язаних об'єктів, без необхідності прямо підтверджувати, що кожне посилання у ланцюгу є дійсним. <span class="seoSummary">Оператор <code>?.</code> діє схоже з оператором ланцюгування <code>.</code>, за винятком того, що замість помилки у випадку посилання на {{jsxref("null")}} чи {{jsxref("undefined")}}, вираз виконає коротке замикання та поверне <code>undefined</code>.</span> При використанні з викликами функцій, вираз поверне <code>undefined</code>, якщо задана функція не існує.</p>
+
+<p>Це створює коротші та простіші вирази для звернення через ланцюг властивостей, коли існує ймовірність зустріти відсутнє посилання. Це також може бути корисним для дослідження вмісту об'єкта, коли немає гарантії того, що певні властивості є обов'язковими.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>obj</var>?.<var>prop</var>
+<var>obj</var>?.[<var>expr</var>]
+arr?.[index]
+<var>func</var>?.(<var>args</var>)
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Оператор необов'язкового ланцюгування надає спосіб спростити звернення до значень через поєднані об'єкти, коли є ймовірність, що посилання чи функція дорівнюватиме <code>undefined</code> чи <code>null</code>.</p>
+
+<p>Наприклад, розглянемо об'єкт <code>obj</code>, який має вкладену структуру. Без необов'язкового ланцюгування пошук глибоко вкладеної властивості вимагає перевірки проміжних посилань, як от:</p>
+
+<pre class="brush: js">let nestedProp = obj.first &amp;&amp; obj.first.second;</pre>
+
+<p>Підтверджуємо, що значення <code>obj.first</code> не <code>null</code> (і не <code>undefined</code>) перед тим, як звертатись до <code>obj.first.second</code>. Це дозволяє запобігти помилці, яка виникла б, якщо б ми просто звернулись прямо до <code>obj.first.second</code> без перевірки <code>obj.first</code>.</p>
+
+<p>Проте, з оператором необов'язкового ланцюгування (<code>?.</code>) ви не мусите робити явну перевірку та переривати вираз в залежності від стану <code>obj.first</code> перед тим, як звертатись до <code>obj.first.second</code>:</p>
+
+<pre class="brush: js">let nestedProp = obj.first?.second;</pre>
+
+<p>При використанні оператора <code>?.</code> замість простого <code>.</code> JavaScript виконує неявну перевірку, щоб переконатись, що <code>obj.first</code> не дорівнює <code>null</code> чи <code>undefined</code>, перед тим, як звертатись до <code>obj.first.second</code>. Якщо <code>obj.first</code> дорівнює <code>null</code> чи <code>undefined</code>, вираз автоматично виконує коротке замикання, повертаючи <code>undefined</code>.</p>
+
+<p>Це еквівалентно наступному:</p>
+
+<pre class="brush: js">let nestedProp = ((obj.first == null || obj.first == undefined) ? undefined : obj.first.second);</pre>
+
+<h3 id="Необовязкове_ланцюгування_з_викликами_функцій">Необов'язкове ланцюгування з викликами функцій</h3>
+
+<p>Ви можете скористатись необов'язковим ланцюгуванням під час виклику методу, який, можливо, не існує. Це може бути зручно, наприклад, при використанні API, у якому метод може бути недоступний, чи то через застарілу реалізацію, чи тому, що функціональність недоступна на пристрої користувача.</p>
+
+<p>При використанні необов'язкового ланцюгування, вираз автоматично повертає <code>undefined</code> замість викидання винятку, якщо метод не знайдений:</p>
+
+<pre class="brush: js">let result = someInterface.customMethod?.();</pre>
+
+<div class="blockIndicator note">
+<p><strong>Заувага:</strong> Якщо існує властивість з таким іменем, яка не є функцією, використання <code>?.</code> все ж спричинить виняток {{jsxref("TypeError")}} (<code>x.y</code><code> is not a function</code>).</p>
+</div>
+
+<h4 id="Необовязкові_зворотні_виклики_та_обробники_подій">Необов'язкові зворотні виклики та обробники подій</h4>
+
+<p>Якщо ви використовуєте зворотні виклики або методи fetch з об'єкта з <a href="/uk/docs/Web/JavaScript/Reference/Operators/%D0%94%D0%B5%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B8%D0%B7%D0%B0%D1%86%D1%96%D1%8F#%D0%94%D0%B5%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B8%D0%B7%D0%B0%D1%86%D1%96%D1%8F_%D0%BE%D0%B1%E2%80%99%D1%94%D0%BA%D1%82%D1%96%D0%B2">деструктуризаційним присвоєнням</a>, ви, можливо, матимете неіснуючі значення, які не можна викликати як функції, поки ви не перевірили, що вони існують. Використовуючи <code>?.</code>, можна уникнути цієї додаткової перевірки:</p>
+
+<pre class="brush: js">// Написано згідно ES2019
+function doSomething(onContent, onError) {
+  try {
+    // ... використати дані
+  }
+  catch (err) {
+    if (onError) { // Перевірка, що onError існує
+      onError(err.message);
+    }
+  }
+}
+</pre>
+
+<pre class="brush: js">// Використання необов'язкового ланцюгування з викликами функцій
+function doSomething(onContent, onError) {
+  try {
+   // ... використати дані
+  }
+  catch (err) {
+    onError?.(err.message); // жодного винятку, якщо onError є undefined
+  }
+}
+</pre>
+
+<h3 id="Необовязкове_ланцюгування_з_виразами">Необов'язкове ланцюгування з виразами</h3>
+
+<p>Ви також можете використати оператор необов'язкового ланцюгування, звертаючись до властивостей через вираз з використанням <a href="/uk/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Bracket_notation">дужкової нотації</a>:</p>
+
+<pre class="brush: js">let nestedProp = obj?.['prop' + 'Name'];
+</pre>
+
+<h3 id="Доступ_до_елементу_масиву_через_необовязкове_ланцюгування">Доступ до елементу масиву через необов'язкове ланцюгування</h3>
+
+<pre class="brush: js">let arrayItem = arr?.[42];</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Базовий_приклад">Базовий приклад</h3>
+
+<p>Цей приклад звертається до значення властивості <code>name</code> ключа <code>bar</code> у мапі, де немає такого ключа. Отже, результатом буде <code>undefined</code>.</p>
+
+<pre class="brush: js">let myMap = new Map();
+myMap.set("foo", {name: "baz", desc: "inga"});
+
+let nameBar = myMap.get("bar")?.name;</pre>
+
+<h3 id="Коротке_замикання_обчислення">Коротке замикання обчислення</h3>
+
+<p>При використанні необов'язкового ланцюгування з виразами, якщо лівий операнд дорівнює <code>null</code> чи <code>undefined</code>, вираз не буде обчислюватись. Для прикладу:</p>
+
+<pre class="brush: js">let potentiallyNullObj = null;
+let x = 0;
+let prop = potentiallyNullObj?.[x++];
+
+console.log(x); // 0, оскільки значення x не збільшувалось
+</pre>
+
+<h3 id="Складання_операторів_необовязкового_ланцюгування">Складання операторів необов'язкового ланцюгування</h3>
+
+<p>У вкладених структурах можна використовувати необов'язкове ланцюгування декілька раз:</p>
+
+<pre class="brush: js">let customer = {
+  name: "Карл",
+  details: {
+    age: 82,
+    location: "Далекі гори" // точна адреса невідома
+  }
+};
+let customerCity = customer.details?.address?.city;
+
+// … це також працює для ланцюгування виклику функції
+let duration = vacations.trip?.getTime?.();
+</pre>
+
+<h3 id="Поєднання_з_оператором_null-обєднання">Поєднання з оператором null-об'єднання</h3>
+
+<p>Можна скористатись оператором null-об'єднання після необов'язкового ланцюгування, щоб задати значення, коли воно не було знайдене:</p>
+
+<pre class="brush: js">let customer = {
+  name: "Карл",
+  details: { age: 82 }
+};
+let customerCity = customer?.city ?? "Невідоме місто";
+console.log(customerCity); // Невідоме місто</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.es/proposal-optional-chaining/#top">Пропозиція щодо оператора "необов'язкового ланцюгування"</a></td>
+   <td>Стадія 4</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.operators.optional_chaining")}}</p>
+</div>
+
+<h3 id="Хід_реалізації">Хід реалізації</h3>
+
+<p>Наведена нижче таблиця надає щоденний статус реалізації цієї функціональності, оскільки функціональність ще не досягла кросбраузерної стабільності. Дані генеруються запуском відповідних тестів функціональності у <a href="https://github.com/tc39/test262">Test262</a>, стандартному тестовому наборі JavaScript, на нічній збірці чи на останньому релізі рушія JavaScript кожного веб-переглядача.</p>
+
+<div>{{EmbedTest262ReportResultsTable("optional-chaining")}}</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{JSxRef("Operators/Nullish_Coalescing_Operator", "Оператор null-об'єднання", '', 1)}}</li>
+ <li><a href="https://github.com/tc39/proposals">TC39 proposals</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/pipeline_operator/index.html b/files/uk/web/javascript/reference/operators/pipeline_operator/index.html
new file mode 100644
index 0000000000..496e425950
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/pipeline_operator/index.html
@@ -0,0 +1,87 @@
+---
+title: Конвеєрний оператор
+slug: Web/JavaScript/Reference/Operators/Pipeline_operator
+tags:
+  - JavaScript
+  - Експериментальний
+  - Оператор
+  - конвеєрний
+translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator
+---
+<div>{{jsSidebar("Operators")}} {{SeeCompatTable}}</div>
+
+<p>Експериментальний конвеєрний оператор <code>|&gt;</code> (наразі на стадії 1) передає значення виразу у функцію. Це дозволяє створювати ланцюги функціональних викликів, які легко читаються. Результатом є синтаксичний цукор, у якому виклик функції з єдиним аргументом можна записати наступним чином:</p>
+
+<pre class="brush: js">let url = "%21" |&gt; decodeURI;</pre>
+
+<p>Аналогічний виклик у традиційному синтаксисі виглядає так:</p>
+
+<pre class="brush: js">let url = decodeURI("%21");
+</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>вираз</em> |&gt; <em>функція</em>
+</pre>
+
+<p>Значення вказаного <code>виразу</code> передається у <code>функцію</code> як її єдиний параметр.</p>
+
+<h3 id="Параметри">Параметри</h3>
+
+<p><code>expression</code></p>
+
+<p>    Будь-який дозволений вираз.</p>
+
+<p><code>function</code></p>
+
+<p>    Будь-яка функція.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Ланцюги_функціональних_викликів">Ланцюги функціональних викликів</h3>
+
+<p>Конвеєрний оператор може покращити читабельність при створенні ланцюга з декількох функцій.</p>
+
+<pre class="brush: js">const double = (n) =&gt; n * 2;
+const increment = (n) =&gt; n + 1;
+
+// без конвеєрного оператора
+double(increment(double(double(5)))); // 42
+
+// з конвеєрним оператором
+5 |&gt; double |&gt; double |&gt; increment |&gt; double; // 42
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-pipeline-operator/#sec-intro">Pipeline operator draft</a></td>
+   <td>Stage 1</td>
+   <td>Поки що не є частиною специфікації ECMAScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.operators.pipeline")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="https://github.com/tc39/proposal-pipeline-operator">Github - Proposal-pipeline-operator</a></li>
+ <li><a href="https://github.com/tc39/proposals">TC39 proposals</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/property_accessors/index.html b/files/uk/web/javascript/reference/operators/property_accessors/index.html
new file mode 100644
index 0000000000..919d36b898
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/property_accessors/index.html
@@ -0,0 +1,157 @@
+---
+title: Доступ до властивостей
+slug: Web/JavaScript/Reference/Operators/Property_Accessors
+tags:
+  - JavaScript
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Property_Accessors
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Оператори доступу до властивостей</strong> надають доступ до властивостей об'єкта за допомогою крапкової або дужкової нотації.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-propertyaccessors.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">object.property
+object['property']
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Можна сприймати об'єкт як <em>асоціативний масив</em> (також відомий як <em>словник, </em><em>мапа</em>, <em>хеш</em>, <em>таблиця пошуку</em>). <em>Ключами</em> у цьому масиві є імена властивостей об'єкта.</p>
+
+<p>Говорячи про властивості об'єкта, прийнято розрізняти властивості та методи. Однак, це розрізнення є не більше, ніж конвенцією. Метод - це просто властивість, яку можна викликати, наприклад, якщо вона має посилання на екземпляр {{jsxref("Function","функції")}} в якості значення.</p>
+
+<p>Існує два способи доступу до властивостей: крапкова нотація та дужкова нотація.</p>
+
+<h3 id="Крапкова_нотація">Крапкова нотація</h3>
+
+<pre class="brush: js">get = object.property;
+object.property = set;
+</pre>
+
+<p>У цьому коді <code>property</code> має бути коректним {{glossary("ідентифікатор","ідентифікатором")}} JavaScript . Наприклад, ідентифікатор <code>object.$1</code> коректний, а <code>object.1</code> ні.</p>
+
+<pre class="brush: js">document.createElement('pre');
+</pre>
+
+<p>Тут метод на ім'я "createElement" отримується з об'єкта <code>document</code> і викликається.</p>
+
+<p>Якщо ви використовуєте метод для числового літералу, і числовий літерал не має показника степеня чи десяткової крапки, залиште {{glossary("Whitespace", "пробільний символ(и)")}} перед крапкою, що передує виклику методу, щоб крапка не була інтерпретована як десятковий розділювач.</p>
+
+<pre class="brush: js">77 .toExponential();
+// або
+77
+.toExponential();
+// або
+(77).toExponential();
+// або
+77..toExponential();
+// або
+77.0.toExponential();
+// тому що 77. === 77.0, неоднозначності немає</pre>
+
+<h3 id="Дужкова_нотація">Дужкова нотація</h3>
+
+<pre class="brush: js">get = object[property_name];
+object[property_name] = set;
+</pre>
+
+<p><code>property_name</code> - це рядок або {{glossary("Symbol","символ")}}. Він не мусить бути коректним ідентифікатором; він може мати будь-яке значення, наприклад, "<code>1foo</code>", "<code>!bar!</code>", чи навіть "<code> </code>" (пробіл).</p>
+
+<pre class="brush: js">document['createElement']('pre');
+</pre>
+
+<p>Цей код виконує абсолютно те саме, що й попередній приклад.</p>
+
+<p>Перед дужковим позначенням дозволені пробіли.</p>
+
+<pre class="brush: js">document ['createElement']('pre');</pre>
+
+<h3 id="Імена_властивостей">Імена властивостей</h3>
+
+<p>Імена властивостей можуть бути рядком або {{glossary("Symbol","символом")}}. Будь-яке інше значення, в тому числі числове, примусово приводиться до рядка.</p>
+
+<pre class="brush: js">var object = {};
+object['1'] = 'значення';
+console.log(object[1]);
+</pre>
+
+<p>Цей код виводить "значення", оскільки <code>1</code> перетворюється у <code>'1'</code>.</p>
+
+<pre class="brush: js">var foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {};
+object[foo] = 'значення';
+console.log(object[bar]);
+</pre>
+
+<p>Цей код також виведе "значення", оскільки і <code>foo</code>, і <code>bar</code> перетворюються у один і той самий рядок.</p>
+
+<p>У рушії JavaScript <a href="/uk/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> цей рядок дорівнював би "<code>[object Object]</code>".</p>
+
+<h3 id="Привязка_методу">Прив'язка методу</h3>
+
+<p>Метод не прив'язаний того до об'єкта, чиїм методом він є. Зокрема, значення <code>this</code> не зафіксоване у методі, тобто, <code>this</code> не обов'язково вказує на об'єкт, який містить цей метод. Замість цього, <code>this</code> "передається" викликом функції. Дивіться <a href="/uk/docs/Web/JavaScript/Reference/Operators/this#Метод_bind">метод bind</a>.</p>
+
+<h3 id="Заувага_щодо_eval">Заувага щодо <code>eval</code></h3>
+
+<p>Новачки у JavaScript часто роблять помилку, використовуючи {{jsxref("eval", "eval()")}} там, де можна використати дужкову нотацію.</p>
+
+<p>Наприклад, наступний синтаксис можна зустріти у багатьох скриптах.</p>
+
+<pre class="brush: js">x = eval('document.forms.form_name.elements.' + strFormControl + '.value');
+</pre>
+
+<p>Функція <code>eval()</code> повільна, її бажано уникати, де це можливо. Також, змінна <code>strFormControl</code> мала б містити ідентифікатор, що не є обов'язковим для імен та ID елементів форми. Краще використовувати дужкову нотацію:</p>
+
+<pre class="brush: js">x = document.forms['form_name'].elements[strFormControl].value;
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-property-accessors', 'Property Accessors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-property-accessors', 'Property Accessors')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.2.1', 'Property Accessors')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.2.1', 'Property Accessors')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.property_accessors")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Необов'язкове ланцюгування</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/remainder/index.html b/files/uk/web/javascript/reference/operators/remainder/index.html
new file mode 100644
index 0000000000..b72092ca6b
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/remainder/index.html
@@ -0,0 +1,77 @@
+---
+title: Остача (%)
+slug: Web/JavaScript/Reference/Operators/Remainder
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Remainder
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор остачі (<code>%</code>) повертає остачу від ділення першого операнду на другий. Він завжди приймає знак діленого.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-remainder.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><strong>Оператор:</strong> <var>var1</var> % <var>var2</var>
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Остача_з_додатним_діленим">Остача з додатним діленим</h3>
+
+<pre class="brush: js notranslate"> 12 % 5  //  2
+ 1 % -2 //  1
+ 1 % 2  //  1
+ 2 % 3  //  2
+5.5 % 2 // 1.5
+</pre>
+
+<h3 id="Остача_з_відємним_діленим">Остача з від'ємним діленим</h3>
+
+<pre class="brush: js notranslate">-12 % 5 // -2
+-1 % 2  // -1
+-4 % 2  // -0</pre>
+
+<h3 id="Остача_з_NaN">Остача з NaN</h3>
+
+<pre class="brush: js notranslate">NaN % 2 // NaN</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Remainder operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.remainder")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Addition">Оператор додавання</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Subtraction">Оператор віднімання</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Division">Оператор ділення</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Multiplication">Оператор множення</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Exponentiation">Оператор піднесення до степеня</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Increment">Оператор інкременту</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Decrement">Оператор декременту</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_negation">Унарний мінус</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_plus">Унарний плюс</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/remainder_assignment/index.html b/files/uk/web/javascript/reference/operators/remainder_assignment/index.html
new file mode 100644
index 0000000000..8953ddca4a
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/remainder_assignment/index.html
@@ -0,0 +1,61 @@
+---
+title: Присвоєння остачі (%=)
+slug: Web/JavaScript/Reference/Operators/Remainder_assignment
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+  - Оператор присвоєння
+translation_of: Web/JavaScript/Reference/Operators/Remainder_assignment
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор присвоєння остачі (<code>%=</code>) ділить змінну на значення правого операнда та присвоює остачу змінній.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-remainder-assignment.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x %= y
+<strong>Значення:</strong> x  = x % y</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_присвоєння_остачі">Використання присвоєння остачі</h3>
+
+<pre class="brush: js notranslate">// Розглянемо таку змінну
+// bar = 5
+
+bar %= 2     // 1
+bar %= 'foo' // NaN
+bar %= 0     // NaN</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.remainder_assignment")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8_%D0%BF%D1%80%D0%B8%D1%81%D0%B2%D0%BE%D1%94%D0%BD%D0%BD%D1%8F">Оператори присвоєння у посібнику JS</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Remainder">Оператор остачі</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/right_shift/index.html b/files/uk/web/javascript/reference/operators/right_shift/index.html
new file mode 100644
index 0000000000..f8d660123a
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/right_shift/index.html
@@ -0,0 +1,74 @@
+---
+title: Правий зсув (>>)
+slug: Web/JavaScript/Reference/Operators/Right_shift
+tags:
+  - JavaScript
+  - Бітовий оператор
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Right_shift
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Оператор правого зсуву (<code>&gt;&gt;</code>)</strong> виконує зсув першого операнда на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються значенням старшого біта. Оскільки новий старший біт матиме те саме значення, що й попередній старший біт, знаковий (старший) біт не змінюється. Звідси назва оператора "з розширенням знаку".</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-right-shift.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>a</var> &gt;&gt; <var>b</var></code>
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Цей оператор виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються значенням старшого біта. Оскільки новий старший біт матиме те саме значення, що й попередній старший біт, знаковий (старший) біт не змінюється. Звідси назва "з розширенням знаку".</p>
+
+<p>Наприклад, <code>9 &gt;&gt; 2</code> дорівнює 2:</p>
+
+<pre class="brush: js notranslate">.    9 (основа 10): 00000000000000000000000000001001 (основа 2)
+                  --------------------------------
+9 &gt;&gt; 2 (основа 10): 00000000000000000000000000000010 (основа 2) = 2 (base 10)
+</pre>
+
+<p>Аналогічно, <code>-9 &gt;&gt; 2</code> дорівнює <code>-3</code>, оскільки знак зберігається:</p>
+
+<pre class="brush: js notranslate">.    -9 (основа 10): 11111111111111111111111111110111 (основа 2)
+                   --------------------------------
+-9 &gt;&gt; 2 (основа 10): 11111111111111111111111111111101 (основа 2) = -3 (base 10)
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_правого_зсуву">Використання правого зсуву</h3>
+
+<pre class="brush: js notranslate"> 9 &gt;&gt; 2; //  2
+-9 &gt;&gt; 2; // -3
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators', 'Bitwise Shift Operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.right_shift")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%91%D1%96%D1%82%D0%BE%D0%B2%D1%96_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8">Бітові оператори у посібнику JS</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Right_shift_assignment">Оператор присвоєння з правим зсувом</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/right_shift_assignment/index.html b/files/uk/web/javascript/reference/operators/right_shift_assignment/index.html
new file mode 100644
index 0000000000..d006d97e7f
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/right_shift_assignment/index.html
@@ -0,0 +1,60 @@
+---
+title: Присвоєння з правим зсувом (>>=)
+slug: Web/JavaScript/Reference/Operators/Right_shift_assignment
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+  - Оператор присвоєння
+translation_of: Web/JavaScript/Reference/Operators/Right_shift_assignment
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор присвоєння з правим зсувом (<code>&gt;&gt;=</code>) виконує зсув першого операнду на вказану кількість бітів праворуч та присвоює результат у змінну.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-right-shift-assignment.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x &gt;&gt;= y
+<strong>Значення:</strong> x   = x &gt;&gt; y</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_присвоєння_з_правим_зсувом">Використання присвоєння з правим зсувом</h3>
+
+<pre class="brush: js notranslate">let a = 5; //   (00000000000000000000000000000101)
+a &gt;&gt;= 2;   // 1 (00000000000000000000000000000001)
+
+let b = -5; //  (-00000000000000000000000000000101)
+b &gt;&gt;= 2;  // -2 (-00000000000000000000000000000010)</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.right_shift_assignment")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8_%D0%BF%D1%80%D0%B8%D1%81%D0%B2%D0%BE%D1%94%D0%BD%D0%BD%D1%8F">Оператори присвоєння у посібнику JS</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Right_shift">Оператор правого зсуву</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/spread_syntax/index.html b/files/uk/web/javascript/reference/operators/spread_syntax/index.html
new file mode 100644
index 0000000000..ca9598e9eb
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/spread_syntax/index.html
@@ -0,0 +1,253 @@
+---
+title: Оператор розкладу
+slug: Web/JavaScript/Reference/Operators/Spread_syntax
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Довідка
+translation_of: Web/JavaScript/Reference/Operators/Spread_syntax
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Оператор розкладу</strong> дозволяє розкласти ітерабельний об'єкт, такий як масив чи рядок, там, де очікується нуль чи більше аргументів (для викликів функцій) чи елементів (для масивних літералів), або розкласти об'єкт там, де очікується нуль або більше пар ключ-значення (для об'єктних літералів).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Для викликів функцій:</p>
+
+<pre class="syntaxbox notranslate">myFunction(...iterableObj);
+</pre>
+
+<p>Для масивних літералів або рядків:</p>
+
+<pre class="syntaxbox notranslate">[...iterableObj, "4", "п'ять", 6];</pre>
+
+<p>Для об'єктних літералів (нове у ECMAScript 2018):</p>
+
+<pre class="syntaxbox notranslate">let objClone = { ...obj };</pre>
+
+<h2 id="Залишковий_синтаксис_параметри">Залишковий синтаксис (параметри)</h2>
+
+<p>Залишковий синтаксис виглядає так само, як синтаксис розкладання, але використовується для <em>деструктуризації</em> масивів та об'єктів.</p>
+
+<p>В певному сенсі, залишковий синтаксис є протилежністю синтаксису розкладу. Розклад "розпаковує" масив на його окремі елементи, в той час, як залишковий синтаксис збирає множину елементів та "стискає" їх у єдиний елемент. Дивіться {{jsxref("Functions/решта_параметрів", "залишкові параметри", "", 1)}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Розклад_у_викликах_функцій"><a id="Spread_in_function_calls" name="Spread_in_function_calls">Розклад у викликах функцій</a></h3>
+
+<h4 id="Заміна_apply">Заміна <code>apply()</code></h4>
+
+<p>Зазвичай, {{jsxref("Function.prototype.apply()")}} використовується, коли ви бажаєте використати елементи масиву як аргументи у функції.</p>
+
+<pre class="brush: js notranslate">function myFunction(x, y, z) { }
+const args = [0, 1, 2];
+myFunction.apply(null, args);</pre>
+
+<p>З оператором розкладу наведене можна записати так:</p>
+
+<pre class="brush: js notranslate">function myFunction(x, y, z) { }
+const args = [0, 1, 2];
+myFunction(...args);</pre>
+
+<p>Будь-який аргумент у списку може використати синтаксис розкладу, і він може використовуватись неодноразово.</p>
+
+<pre class="brush: js notranslate">function myFunction(v, w, x, y, z) { }
+const args = [0, 1];
+myFunction(-1, ...args, 2, ...[3]);</pre>
+
+<h4 id="Apply_для_оператора_new">Apply для оператора <code>new</code></h4>
+
+<p>Викликаючи конструктор з {{jsxref("Operators/new", "new")}}, неможливо <strong>прямо</strong> використовувати масив та <code>apply</code> (<code>apply</code> виконує <code>[[Call]]</code>, а не <code>[[Construct]]</code>). Однак, масив можна легко використовувати з <code>new</code> завдяки синтаксису розкладу:</p>
+
+<pre class="brush: js notranslate">const dateFields = [1970, 0, 1];  // 1 Січня 1970
+const d = new Date(...dateFields);
+</pre>
+
+<p>Щоб використати new з масивом параметрів без розкладу, вам довелося б зробити це <strong>опосередковано</strong>, частковим застосуванням:</p>
+
+<pre class="brush: js notranslate">function applyAndNew(constructor, args) {
+   function partial () {
+      return constructor.apply(this, args);
+   };
+   if (typeof constructor.prototype === "object") {
+      partial.prototype = Object.create(constructor.prototype);
+   }
+   return partial;
+}
+
+
+function myConstructor () {
+   console.log("arguments.length: " + arguments.length);
+   console.log(arguments);
+   this.prop1="знач1";
+   this.prop2="знач2";
+};
+
+var myArguments = ["вітаю", "як", "ся", "маєте", "п.", null];
+var myConstructorWithArguments = applyAndNew(myConstructor, myArguments);
+
+console.log(new myConstructorWithArguments);
+// (internal log of myConstructor):           arguments.length: 6
+// (internal log of myConstructor):           ["вітаю", "як", "ся", "маєте", "п.", null]
+// (log of "new myConstructorWithArguments"): {prop1: "знач1", prop2: "знач2"}</pre>
+
+<h3 id="Розклад_у_масивних_літералах"><a id="Spread_in_array_literals" name="Spread_in_array_literals">Розклад у масивних літералах</a></h3>
+
+<h4 id="Потужніший_масивний_літерал">Потужніший масивний літерал</h4>
+
+<p>Без оператора розкладу, щоб створити новий масив, частиною якого є існуючий масив, літерального синтаксису масивів недостатньо, доводиться використовувати імперативний код з використанням комбінації з {{jsxref("Array.prototype.push", "push()")}}, {{jsxref("Array.prototype.splice", "splice()")}}, {{jsxref("Array.prototype.concat", "concat()")}}, і т. д. З синтаксисом розкладу все стає набагато лаконічнішим:</p>
+
+<pre class="brush: js notranslate">var parts = ['плечі', 'коліна'];
+var lyrics = ['голова', ...parts, 'та', 'пальці'];
+// ["голова", "плечі", "коліна", "та", "пальці"]
+</pre>
+
+<p>Як і розклад аргументів, <code>...</code> може використовуватись будь-де у масивному літералі, і може використовуватись неодноразово.</p>
+
+<h4 id="Копія_масиву">Копія масиву</h4>
+
+<pre class="brush: js notranslate">const arr = [1, 2, 3];
+const arr2 = [...arr]; // як arr.slice()
+
+arr2.push(4);
+// arr2 стає [1, 2, 3, 4]
+// arr залишається незміненим
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Заувага:</strong> Оператор розкладу ефективно йде на один рівень вглиб при копіюванні масиву. Тому він може бути непридатний для копіювання багатовимірних масивів, як показано у наступному прикладі (те саме з {{jsxref("Object.assign()")}} та розкладом).</p>
+
+<pre class="brush: js example-bad notranslate">const a = [[1], [2], [3]];
+const b = [...a];
+
+b.shift().shift();
+//  1
+
+//  О, ні!  Тепер масив 'a' також змінився:
+a
+//  [[], [2], [3]]</pre>
+</div>
+
+<h4 id="Краще_обєднання_масивів">Краще об'єднання масивів</h4>
+
+<p>Метод {{jsxref("Array.prototype.concat()")}} часто використовується для приєднання масиву в кінець існуючого масиву. Без оператора розкладу це робиться так:</p>
+
+<pre class="brush: js notranslate">const arr1 = [0, 1, 2];
+const arr2 = [3, 4, 5];
+
+// Додати всі елементи з arr2 у arr1
+arr1 = arr1.concat(arr2);</pre>
+
+<p>З оператором розкладу отримуємо:</p>
+
+<pre class="brush: js notranslate">let arr1 = [0, 1, 2];
+let arr2 = [3, 4, 5];
+
+arr1 = [...arr1, ...arr2];
+// arr1 тепер [0, 1, 2, 3, 4, 5]
+// Заувага: Не використовуйте const, це спричинить TypeError (недозволене присвоєння)
+</pre>
+
+<p>Метод {{jsxref("Array.prototype.unshift()")}} часто використовується для додавання масиву значень у початок існуючого масиву. Без оператора розкладу це робиться так:</p>
+
+<pre class="brush: js notranslate">const arr1 = [0, 1, 2];
+const arr2 = [3, 4, 5];
+
+// Подати усі елементи з arr2 до arr1
+Array.prototype.unshift.apply(arr1, arr2)
+
+// arr1 тепер [3, 4, 5, 0, 1, 2]</pre>
+
+<p>З оператором розкладу отримуємо:</p>
+
+<pre class="brush: js notranslate">let arr1 = [0, 1, 2];
+let arr2 = [3, 4, 5];
+
+arr1 = [...arr2, ...arr1];
+// arr1 тепер [3, 4, 5, 0, 1, 2]
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Заувага</strong>: На відміну від <code>unshift()</code>, цей код створює новий <code>arr1</code>, а не змінює початковий масив <code>arr1</code>.</p>
+</div>
+
+<h3 id="Розклад_у_обєктних_літералах"><a id="Spread_in_object_literals" name="Spread_in_object_literals">Розклад у об'єктних літералах</a></h3>
+
+<p>Пропозиція <a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a> (стадія 4) додала розкладені властивості до {{jsxref("Operators/Ініціалізація_об’єктів", "об'єктних літералів", 1)}}. Цей синтаксис копіює особисті, перелічувані властивості наданого об'єкта у новий об'єкт.</p>
+
+<p>Дрібне клонування (без прототипу) чи злиття об'єктів тепер можливе за допомогою синтаксису, коротшого, ніж {{jsxref("Object.assign()")}}.</p>
+
+<pre class="brush: js notranslate">const obj1 = { foo: 'bar', x: 42 };
+const obj2 = { foo: 'baz', y: 13 };
+
+const clonedObj = { ...obj1 };
+// Object { foo: "bar", x: 42 }
+
+const mergedObj = { ...obj1, ...obj2 };
+// Object { foo: "baz", x: 42, y: 13 }</pre>
+
+<p>Зауважте, що {{jsxref("Object.assign()")}} запускає {{jsxref("Functions/set", "сетери")}}, а оператор розкладу ні.</p>
+
+<p>Зауважте, що ви не можете ані замінити, ані імітувати функцію {{jsxref("Object.assign()")}}:</p>
+
+<pre class="brush: js notranslate">let obj1 = { foo: 'bar', x: 42 };
+let obj2 = { foo: 'baz', y: 13 };
+const merge = ( ...objects ) =&gt; ( { ...objects } );
+
+let mergedObj = merge ( obj1, obj2);
+// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } }
+
+let mergedObj = merge ( {}, obj1, obj2);
+// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }</pre>
+
+<p>У наведеному прикладі оператор розкладу працює не так, як можна було очікувати: він розкладає <em>масив</em> аргументів у об'єктний літерал, через наявність залишкового параметра.</p>
+
+<h3 id="Тільки_для_ітерабельних_обєктів">Тільки для ітерабельних об'єктів</h3>
+
+<p>Самі по собі об'єкти не є ітерабельними, але вони стають ітерабельними, коли використовуються у масиві, або з функціями перебору, такими як <code>map()</code>, <code>reduce()</code> та <code>assign()</code>. При з'єднанні 2-х об'єктів за допомогою оператору розкладу, вважається, що застосовується функція перебору, коли відбувається з'єднання.</p>
+
+<p>Оператор розкладу (окрім випадку розкладених властивостей) може застосовуватись тільки до <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator">ітерабельних</a> об'єктів:</p>
+
+<pre class="brush: js notranslate">const obj = {'key1': 'value1'};
+const array = [...obj]; // TypeError: obj is not iterable
+</pre>
+
+<h3 id="Розклад_з_великою_кількістю_значень">Розклад з великою кількістю значень</h3>
+
+<p>При використанні оператора розкладу для викликів функцій пам'ятайте про можливість перевищити ліміт кількості аргументів рушія JavaScript. Більше інформації дивіться у статті {{jsxref("Function.prototype.apply", "apply()")}}.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array-initializer', 'Array initializer')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object initializer')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.spread")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Functions/решта_параметрів">Залишкові параметри</a> (також ‘<code>...</code>’)</li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">fn.apply</a> (також ‘<code>...</code>’)</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/strict_equality/index.html b/files/uk/web/javascript/reference/operators/strict_equality/index.html
new file mode 100644
index 0000000000..4f420a049f
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/strict_equality/index.html
@@ -0,0 +1,105 @@
+---
+title: Строга рівність (===)
+slug: Web/JavaScript/Reference/Operators/Strict_equality
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Strict_equality
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор строгої рівності (<code>===</code>) перевіряє, чи є два операнди рівними, повертаючи результат типу Boolean. На відміну від оператора <a href="/uk/docs/Web/JavaScript/Reference/Operators/Equality">рівності</a>, оператор строгої рівності завжди вважає операнди різних типів різними.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-strict-equality.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">x === y</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Оператори строгої рівності (<code>===</code> та <code>!==</code>) використовують <a class="external external-icon" href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6" rel="noopener">алгоритм строгої рівності</a> для порівняння двох операндів.</p>
+
+<ul>
+ <li>Якщо операнди належать до різних типів, повернути <code>false</code>.</li>
+ <li>Якщо обидва операнди є об'єктами, повернути <code>true</code> тільки якщо вони посилаються на один і той самий об'єкт.</li>
+ <li>Якщо обидва операнди дорівнюють <code>null</code> або обидва операнди дорівнюють <code>undefined</code>, повернути <code>true</code>.</li>
+ <li>Якщо будь-який з операндів є <code>NaN</code>, повернути <code>false</code>.</li>
+ <li>В інших випадках, порівняти значення двох операндів:
+  <ul>
+   <li>Числа повинні мати однакові числові значення. <code>+0</code> та <code>-0</code> вважаються одним значенням.</li>
+   <li>Рядки повинні мати однакові символи в однаковому порядку.</li>
+   <li>Значення Boolean повинні обидва дорівнювати <code>true</code> або обидва дорівнювати <code>false</code>.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Найпомітніша відмінність між цим оператором та оператором <a href="/uk/docs/Web/JavaScript/Reference/Operators/Equality">рівності</a> (<code>==</code>) полягає в тому, що, якщо операнди належать до різних типів, оператор <code>==</code> намагається привести їх до одного типу перед порівнянням.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Порівняння_операндів_одного_типу">Порівняння операндів одного типу</h3>
+
+<pre class="brush: js notranslate">console.log("привіт" === "привіт");   // true
+console.log("привіт" === "агов");    // false
+
+console.log(3 === 3);               // true
+console.log(3 === 4);               // false
+
+console.log(true === true);         // true
+console.log(true === false);        // false
+
+console.log(null === null);         // true</pre>
+
+<h3 id="Порівняння_операндів_різних_типів">Порівняння операндів різних типів</h3>
+
+<pre class="brush: js notranslate">console.log("3" === 3);           // false
+
+console.log(true === 1);          // false
+
+console.log(null === undefined);  // false</pre>
+
+<h3 id="Порівняння_обєктів">Порівняння об'єктів</h3>
+
+<pre class="brush: js notranslate">const object1 = {
+  name: "привіт"
+}
+
+const object2 = {
+  name: "привіт"
+}
+
+console.log(object1 === object2);  // false
+console.log(object1 === object1);  // true</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.strict_equality")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Equality">Оператор рівності</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Inequality">Оператор нерівності</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Strict_inequality">Оператор строгої нерівності</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/strict_inequality/index.html b/files/uk/web/javascript/reference/operators/strict_inequality/index.html
new file mode 100644
index 0000000000..831385fc29
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/strict_inequality/index.html
@@ -0,0 +1,99 @@
+---
+title: Строга нерівність (!==)
+slug: Web/JavaScript/Reference/Operators/Strict_inequality
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Strict_inequality
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор строгої нерівності (<code>!==</code>) перевіряє, чи є два операнди нерівними, повертаючи результат типу Boolean. На відміну від оператора <a href="/uk/docs/Web/JavaScript/Reference/Operators/Inequality">нерівності</a>, оператор строгої нерівності завжди вважає операнди різних типів різними.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-strict-equality.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">x !== y</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Оператор строгої нерівності перевіряє, чи є його операнди нерівними. Він є протилежністю оператора <a href="/uk/docs/Web/JavaScript/Reference/Operators/Strict_equality">строгої рівності</a>, тому наступні два рядки завжди даватимуть однаковий результат:</p>
+
+<pre class="brush: js notranslate">x !== y
+
+!(x === y)</pre>
+
+<p>Подробиці алгоритму порівняння дивіться на сторінці оператора <a href="/uk/docs/Web/JavaScript/Reference/Operators/Strict_equality">строгої рівності</a>.</p>
+
+<p>Як і оператор строгої рівності, оператор строгої нерівності завжди вважатиме операнди різних типів різними:</p>
+
+<pre class="brush: js notranslate">3 !== "3"; // true</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Порівняння_операндів_одного_типу">Порівняння операндів одного типу</h3>
+
+<pre class="brush: js notranslate">console.log("привіт" !== "привіт");   // false
+console.log("привіт" !== "агов");    // true
+
+console.log(3 !== 3);               // false
+console.log(3 !== 4);               // true
+
+console.log(true !== true);         // false
+console.log(true !== false);        // true
+
+console.log(null !== null);         // false</pre>
+
+<h3 id="Порівняння_операндів_різних_типів">Порівняння операндів різних типів</h3>
+
+<pre class="brush: js notranslate">console.log("3" !== 3);           // true
+
+console.log(true !== 1);          // true
+
+console.log(null !== undefined);  // true</pre>
+
+<h3 id="Порівняння_обєктів">Порівняння об'єктів</h3>
+
+<pre class="brush: js notranslate">const object1 = {
+  name: "привіт"
+}
+
+const object2 = {
+  name: "привіт"
+}
+
+console.log(object1 !== object2);  // true
+console.log(object1 !== object1);  // false</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікації</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.strict_inequality")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Equality">Оператор рівності</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Inequality">Оператор нерівності</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Strict_equality">Оператор строгої рівності</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/subtraction/index.html b/files/uk/web/javascript/reference/operators/subtraction/index.html
new file mode 100644
index 0000000000..fe5e53ddc6
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/subtraction/index.html
@@ -0,0 +1,67 @@
+---
+title: Віднімання (-)
+slug: Web/JavaScript/Reference/Operators/Subtraction
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Subtraction
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор віднімання (<code>-</code>) віднімає один операнд від іншого, повертаючи різницю між ними.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-subtraction.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><strong>Оператор:</strong> <var>x</var> - <var>y</var>
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Віднімання_чисел">Віднімання чисел</h3>
+
+<pre class="brush: js notranslate">5 - 3     // 2
+3 - 5     // -2</pre>
+
+<h3 id="Віднімання_з_нечисловими_значеннями">Віднімання з нечисловими значеннями</h3>
+
+<pre class="brush: js notranslate">'foo' - 3 // NaN</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-subtraction-operator-minus', 'Subtraction operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.subtraction")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Addition">Оператор додавання</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Division">Оператор ділення</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Multiplication">Оператор множення</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Remainder">Оператор остачі</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Exponentiation">Оператор піднесення до степеня</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Increment">Оператор інкременту</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Decrement">Оператор декременту</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_negation">Унарний мінус</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_plus">Унарний плюс</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/subtraction_assignment/index.html b/files/uk/web/javascript/reference/operators/subtraction_assignment/index.html
new file mode 100644
index 0000000000..67cd75fa78
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/subtraction_assignment/index.html
@@ -0,0 +1,60 @@
+---
+title: Присвоєння з відніманням (-=)
+slug: Web/JavaScript/Reference/Operators/Subtraction_assignment
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+  - Оператор присвоєння
+translation_of: Web/JavaScript/Reference/Operators/Subtraction_assignment
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор присвоєння з відніманням (<code>-=</code>) віднімає значення правого операнда від змінної та присвоює результат змінній.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-subtraction-assignment.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x -= y
+<strong>Значення:</strong> x  = x - y</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_присвоєння_з_відніманням">Використання присвоєння з відніманням</h3>
+
+<pre class="brush: js notranslate">// Розглянемо таку змінну
+// bar = 5
+
+bar -= 2     // 3
+bar -= 'foo' // NaN</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.subtraction_assignment")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8_%D0%BF%D1%80%D0%B8%D1%81%D0%B2%D0%BE%D1%94%D0%BD%D0%BD%D1%8F">Оператори присвоєння у посібнику JS</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Subtraction">Оператор віднімання</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/super/index.html b/files/uk/web/javascript/reference/operators/super/index.html
new file mode 100644
index 0000000000..b1c2a89135
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/super/index.html
@@ -0,0 +1,184 @@
+---
+title: super
+slug: Web/JavaScript/Reference/Operators/super
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Класи
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/super
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Ключове слово <strong>super</strong> використовується для доступу до функцій на батьківському об'єкті та виклику цих функцій.</p>
+
+<p>Вирази <code>super.prop</code> та <code>super[expr]</code> є коректними у будь-якому <a href="/uk/docs/Web/JavaScript/Reference/Functions/Method_definitions">визначенні методу</a> як у <a href="/uk/docs/Web/JavaScript/Reference/Classes">класах</a>, так і у <a href="/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів">об'єктних літералах</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">super([arguments]); // викликає батьківський конструктор.
+super.functionOnParent([arguments]);
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>При застосуванні у конструкторі ключове слово <code>super</code> використовується окремо та має викликатись до ключового слова <code>this</code>. Ключове слово <code>super</code> також може використовуватись у викликах функцій батьківського об'єкта.</p>
+
+<h2 id="Приклад">Приклад</h2>
+
+<h3 id="Використання_super_у_класах">Використання <code>super</code> у класах</h3>
+
+<p>Цей фрагмент коду взято з <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">прикладу класів</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">демонстрація</a>). Тут <code>super()</code> викликається для запобігання дублюванню частин конструктора, які є спільними у <code>Rectangle</code> (прямокутник) та <code>Square</code> (квадрат).</p>
+
+<pre class="brush: js">class Rectangle {
+  constructor(height, width) {
+    this.name = 'Прямокутник';
+    this.height = height;
+    this.width = width;
+  }
+  sayName() {
+    console.log('Привіт, я ', this.name + '.');
+  }
+  get area() {
+    return this.height * this.width;
+  }
+  set area(value) {
+    this._area = value;
+  }
+}
+
+class Square extends Rectangle {
+  constructor(length) {
+    this.height; // ReferenceError, спочатку має викликатись super!
+
+    // Тут ми викликаємо конструктор батьківського класу з довжиною
+    // в якості ширини та довжини прямокутника
+    super(length, length);
+
+    // Заувага: У похідному класі super() має викликатись до 'this'.
+    // Не врахувавши це, ви отримаєте помилку посилання.
+    this.name = 'Квадрат';
+  }
+}</pre>
+
+<h3 id="Виклик_статичних_методів_через_super">Виклик статичних методів через super</h3>
+
+<p>Ви також можете викликати через super <a href="/uk/docs/Web/JavaScript/Reference/Classes/static">статичні</a> методи.</p>
+
+<pre class="brush: js">class Rectangle {
+  constructor() {}
+  static logNbSides() {
+    return 'Я маю 4 сторони';
+  }
+}
+
+class Square extends Rectangle {
+  constructor() {}
+  static logDescription() {
+    return super.logNbSides() + ', і вони рівні';
+  }
+}
+Square.logDescription(); // 'Я маю 4 сторони, і вони рівні'
+</pre>
+
+<h3 id="Видалення_super-властивостей_викине_помилку">Видалення super-властивостей викине помилку</h3>
+
+<p>Ви не можете використовувати <a href="/uk/docs/Web/JavaScript/Reference/Operators/delete">оператор delete</a> та <code>super.prop</code> або <code>super[expr]</code>, щоб видалити властивість батьківського класу, це викине {{jsxref("ReferenceError")}}.</p>
+
+<pre class="brush: js">class Base {
+  constructor() {}
+  foo() {}
+}
+class Derived extends Base {
+  constructor() {}
+  delete() {
+    delete super.foo; // це погано
+  }
+}
+
+new Derived().delete(); // ReferenceError: некоректний оператор delete з використанням 'super'. </pre>
+
+<h3 id="super.prop_не_може_перезаписувати_властивості_недоступні_для_запису"><code>super.prop</code> не може перезаписувати властивості, недоступні для запису</h3>
+
+<p>Коли властивості створені недоступними для запису, наприклад, за допомогою {{jsxref("Object.defineProperty")}}, <code>super</code> не може перезаписувати значення такої властивості.</p>
+
+<pre class="brush: js">class X {
+  constructor() {
+    Object.defineProperty(this, 'prop', {
+      configurable: true,
+      writable: false,
+      value: 1
+    });
+  }
+}
+
+class Y extends X {
+  constructor() {
+    super();
+  }
+  foo() {
+    super.prop = 2;   // Не можна перезаписати значення.
+  }
+}
+
+var y = new Y();
+y.foo(); // TypeError: "prop" доступна лише для читання
+console.log(y.prop); // 1
+</pre>
+
+<h3 id="Використання_super.prop_у_обєктних_літералах">Використання <code>super.prop</code> у об'єктних літералах</h3>
+
+<p>Super також можна використовувати у нотації <a href="/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів">об'єктної ініціалізації  / літералу</a>. У цьому прикладі два об'єкти визначають метод. У другому об'єкті <code>super</code> викликає метод першого об'єкта. Це працює завдяки методу {{jsxref("Object.setPrototypeOf()")}}, який дає можливість встановити прототипом об'єкта <code>obj2</code> об'єкт <code>obj1</code>, таким чином, <code>super</code> може знайти метод <code>method1</code> на об'єкті <code>obj1</code>.</p>
+
+<pre class="brush: js">var obj1 = {
+  method1() {
+    console.log('метод 1');
+  }
+}
+
+var obj2 = {
+  method2() {
+    super.method1();
+  }
+}
+
+Object.setPrototypeOf(obj2, obj1);
+obj2.method2(); // виводить "метод 1"
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-super-keyword', 'super')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.super")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Classes">Класи</a></li>
+ <li><a href="https://medium.com/beginners-guide-to-mobile-web-development/super-and-extends-in-javascript-es6-understanding-the-tough-parts-6120372d3420">Anurag Majumdar - Super &amp; Extends in JavaScript</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/this/index.html b/files/uk/web/javascript/reference/operators/this/index.html
new file mode 100644
index 0000000000..8f0d159cda
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/this/index.html
@@ -0,0 +1,408 @@
+---
+title: this
+slug: Web/JavaScript/Reference/Operators/this
+tags:
+  - JavaScript
+  - this
+  - Оператор
+  - ключове слово
+translation_of: Web/JavaScript/Reference/Operators/this
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Ключове слово функції <code>this</code></strong> поводиться дещо інакше у JavaScript у порівнянні з іншими мовами. Воно також має певні відмінності між <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">строгим</a> та нестрогим режимами.</p>
+
+<p>У більшості випадків, значення <code>this</code> визначається тим, як викликається функція (прив'язка під час виконання). Воно не може бути переприсвоєне під час виконання, і може змінюватись кожен раз, коли викликається функція. ES5 запровадив метод {{jsxref("Function.prototype.bind()", "bind()")}} для <a href="#Метод_bind">присвоєння значення this у функції незалежно від того, як вона викликається</a>, а ES2015 запровадив <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкові функції</a>, які не мають власної прив'язки <code>this</code> (вони зберігають значення <code>this</code> оточуючого лексичного контексту).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-this.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">this</pre>
+
+<h3 id="Значення">Значення</h3>
+
+<p>Властивість контексту виконання (глобального, функції чи eval), яка, у нестрогому режимі завжди посилається на об'єкт, а у строгому режимі може бути будь-яким значенням.</p>
+
+<h2 id="Глобальний_контекст">Глобальний контекст</h2>
+
+<p>У глобальному контексті виконання (поза межами будь-яких функцій) <code>this</code> посилається на глобальний об'єкт, як у строгому, так і у нестрогому режимі.</p>
+
+<pre class="brush:js">// У веб-переглядачах об'єкт window також є глобальним об'єктом:
+console.log(this === window); // true
+
+a = 37;
+console.log(window.a); // 37
+
+this.b = "MDN";
+console.log(window.b)  // "MDN"
+console.log(b)         // "MDN"
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Заувага:</strong> Ви завжди легко можете отримати глобальний об'єкт за допомогою глобальної властивості {{jsxref("globalThis")}}, незалежно від поточного контексту, у якому виконується ваш код.</p>
+</div>
+
+<h2 id="Контекст_функції">Контекст функції</h2>
+
+<p>Всередині функції значення <code>this</code> залежить від того, як викликається функція.</p>
+
+<h3 id="Простий_виклик">Простий виклик</h3>
+
+<p>Оскільки наступний код не є кодом у <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">строгому режимі</a>, і тому, що значення <code>this</code> не було присвоєне викликом, <code>this</code> за замовчуванням дорівнюватиме глобальному об'єкту, яким у переглядачі є {{domxref("Window", "window")}}. </p>
+
+<pre class="brush:js">function f1() {
+  return this;
+}
+
+// У переглядачі:
+f1() === window; // true
+
+// У Node:
+f1() === global; // true</pre>
+
+<p>Однак, у строгому режимі значення <code>this</code> не присвоюється при вході у контекст виконання, воно залишається <code>undefined</code>, як показано у наступному прикладі<strong>:</strong></p>
+
+<pre class="brush:js">function f2() {
+  'use strict'; // дивіться строгий режим
+  return this;
+}
+
+f2() === undefined; // true
+</pre>
+
+<div class="note">У другому прикладі <code>this</code> має дорівнювати {{jsxref("undefined")}}, тому що функція <code>f2</code> була викликана прямо, а не як метод чи властивість об'єкта (наприклад, <code>window.f2()</code>). Ця функціональність не була реалізована у деяких переглядачах, коли вони вперше почали підтримувати <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode" title="Strict mode">строгий режим</a>. Як результат, вони неправильно повертали об'єкт <code>window</code>.</div>
+
+<p>Для присвоєння <code>this</code> певного значення під час виклику функції використовуйте {{jsxref("Function.prototype.call()", "call()")}} або {{jsxref("Function.prototype.apply()", "apply()")}}, як у наступних прикладах<strong>.</strong></p>
+
+<p><strong>Приклад 1</strong></p>
+
+<pre class="brush:js" dir="rtl">// Об'єкт може бути переданий першим аргументом у call чи apply, і буде прив'язаний до this.
+var obj = {a: 'Користувацький'};
+
+// Ця властивість створена у глобальному об'єкті
+var a = 'Глобальний';
+
+function whatsThis() {
+  return this.a;  // Значення this залежить від того, як викликається функція
+}
+
+whatsThis();          // 'Глобальний'
+whatsThis.call(obj);  // 'Користувацький'
+whatsThis.apply(obj); // 'Користувацький'
+</pre>
+
+<p><strong>Приклад 2</strong></p>
+
+<pre class="brush:js">function add(c, d) {
+  return this.a + this.b + c + d;
+}
+
+var o = {a: 1, b: 3};
+
+// Перший параметр - це об'єкт для використання в якості
+// 'this', наступні параметри передаються як аргументи
+// для виклику фукнції
+add.call(o, 5, 7); // 16
+
+// Перший параметр - це об'єкт для використання в якості
+// 'this', другий - це масив, чиї елементи
+// використовуються як аргументи для виклику функції
+add.apply(o, [10, 20]); // 34
+</pre>
+
+<p>Зауважте, що у нестрогому режимі у <code>call</code> та <code>apply</code>, якщо значення, передане у якості <code>this</code>, не є об'єктом, буде спроба перетворити його на об'єкт внутрішньою операцією <code>ToObject</code>. Тому, якщо передане значення є простою величиною на кшталт <code>7</code> чи <code>'foo'</code>, вона буде загорнута у Object за допомогою відповідного конструктора, а отже, просте число <code>7</code> буде перетворене на об'єкт, як <code>new Number(7)</code>, а рядок <code>'foo'</code> буде перетворений на об'єкт, як <code>new String('foo')</code>, наприклад:</p>
+
+<pre class="brush:js">function bar() {
+  console.log(Object.prototype.toString.call(this));
+}
+
+bar.call(7);     // [object Number]
+bar.call('foo'); // [object String]
+</pre>
+
+<h3 id="Метод_bind">Метод <code>bind</code></h3>
+
+<p>У ECMAScript 5 було запроваждено {{jsxref("Function.prototype.bind()")}}. Виклик <code>f.bind(someObject)</code> створює нову фукнцію з таким самим тілом фукнції та областю видимості, як у <code>f</code>, але, де у початковій функції трапляється <code>this</code>, у новій функції <code>this</code> прив'язано до першого аргументу <code>bind</code>, незалежно від того, як використовується функція.</p>
+
+<pre class="brush:js">function f() {
+  return this.a;
+}
+
+var g = f.bind({a: 'привіт'});
+console.log(g()); // привіт
+
+var h = g.bind({a: 'йо'}); // bind працює лише один раз!
+console.log(h()); // привіт
+
+var o = {a: 37, f: f, g: g, h: h};
+console.log(o.a, o.f(), o.g(), o.h()); // 37,37, привіт, привіт
+</pre>
+
+<h3 id="Стрілкові_функції">Стрілкові функції</h3>
+
+<p>У <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкових функціях</a> <code>this</code> зберігає значення <code>this</code> оточуючого лексичного контексту. У глобальному коді йому буде присвоєно глобальний об'єкт:</p>
+
+<pre class="brush: js">var globalObject = this;
+var foo = (() =&gt; this);
+console.log(foo() === globalObject); // true</pre>
+
+<div class="note">
+<p><strong>Заувага</strong>: якщо this передається як аргумент до call, bind чи apply під час виклику стрілкової функції, він буде проігнорований. Ви все одно можете подавати аргументи до call, але перший аргумент (thisArg) має бути null.</p>
+</div>
+
+<pre class="brush: js">// Виклик в якості методу об'єкта
+var obj = {func: foo};
+console.log(obj.func() === globalObject); // true
+
+// Спроба встановити this за допомогою call
+console.log(foo.call(obj) === globalObject); // true
+
+// Спроба встановити this за допомогою bind
+foo = foo.bind(obj);
+console.log(foo() === globalObject); // true</pre>
+
+<p>Що б не відбувалось, <code>this</code> у <code>foo</code> дорівнює значенню, встановленому під час створення (у наведеному вище прикладі, глобальному об'єкту). Те саме стосується стрілкових функцій, створених всередині інших функцій: їхнє значення <code>this</code> залишиться таким, як у оточуючому лексичному контексті.</p>
+
+<pre class="brush: js">// Створюємо obj з методом bar, який вертає функцію, що
+// повертає своє значення this. Повернена функція створена як
+// стрілкова функція, а отже, її this прив'язується до
+// this оточуючої функції. Можна присвоювати значення bar
+// під час виклику, що в свою чергу присвоїть значення
+// поверненої функції.
+var obj = {
+  bar: function() {
+    var x = (() =&gt; this);
+    return x;
+  }
+};
+
+// Викликаємо bar як метод obj, встановлюючи obj значенням його this
+// Присвоюємо посилання на повернену функцію у fn
+var fn = obj.bar();
+
+// Виклик fn без присвоєння this мав би присвоїти
+// за замовчуванням глобальний об'єкт або undefined у строгому режимі
+console.log(fn() === obj); // true
+
+// Але будьте обережні, якщо посилаєтесь на метод obj, не викликаючи його
+var fn2 = obj.bar;
+// Виклик this стрілкової функції зсередини методу bar
+// тепер поверне window, бо він бере this з fn2.
+console.log(fn2()() == window); // true
+</pre>
+
+<p>У наведеному коді функція (назвемо її анонімною функцією А), присвоєна <code>obj.bar</code>, повертає іншу функцію (назвемо її анонімною функцією Б), яка створюється як стрілкова функція. В результаті <code>this</code> функції Б незмінно дорівнює <code>this</code> з <code>obj.bar</code> (функції A) під час виклику. Коли викликається повернена функція (функція Б), її <code>this</code> завжди дорівнюватиме початково присвоєному значенню. У наведеному прикладі <code>this</code> функції Б присвоюється значення <code>this</code> функції А, яке дорівнює <code>obj</code>, отже, воно залишається рівним <code>obj</code>, навіть коли викликається таким способом, який мав би присвоїти <code>this</code> значення <code>undefined</code> або глобальний об'єкт (чи будь-яким іншим методом, як у попередньому прикладі у глобальному контексті виконання).</p>
+
+<h3 id="Як_метод_обєкта">Як метод об'єкта</h3>
+
+<p>Коли функція викликається як метод об'єкта, її <code>this</code> присвоюється об'єкт, на якому викликається метод.</p>
+
+<p>У наступному прикладі, коли викликається <code>o.f()</code>, всередині функції <code>this</code> прив'язується до об'єкта <code>o</code>.</p>
+
+<pre class="brush:js">var o = {
+  prop: 37,
+  f: function() {
+    return this.prop;
+  }
+};
+
+console.log(o.f()); // 37
+</pre>
+
+<p>Зауважте, що на цю поведінку зовсім не впливає те, як і де була визначена функція. У попередньому прикладі ми визначили функцію <code>f</code> вбудованою, як член об'єкта, під час визначення <code>o</code>. Однак, ми так само легко могли спочатку визначити функцію, а потім додати її до <code>o.f</code>. Це призводить до такої самої поведінки:</p>
+
+<pre class="brush:js">var o = {prop: 37};
+
+function independent() {
+  return this.prop;
+}
+
+o.f = independent;
+
+console.log(o.f()); // 37
+</pre>
+
+<p>Це демонструє, що значення має тільки те, що функція була викликана з <code>f</code>, члена об'єкта <code>o</code>.</p>
+
+<p>Схожим чином, на прив'язку <code>this</code> впливає тільки найближче посилання на об'єкт. У наступному прикладі, коли ми викликаємо функцію, ми викликаємо її як метод <code>g</code> об'єкта <code>o.b</code>. Цього разу під час виконання <code>this</code> всередині функції посилатиметься на <code>o.b</code>. Той факт, що сам об'єкт є членом об'єкта <code>o</code>, не має наслідків; все, що має значення, це найближче посилання.</p>
+
+<pre class="brush:js">o.b = {g: independent, prop: 42};
+console.log(o.b.g()); // 42
+</pre>
+
+<h4 id="this_у_ланцюжку_прототипів_обєкта"><code>this</code> у ланцюжку прототипів об'єкта</h4>
+
+<p>Такий самий принцип діє для методів, визначених десь у ланцюжку прототипів об'єкта. Якщо метод присутній у ланцюжку прототипів об'єкта, <code>this</code> посилається на об'єкт, на якому був викликаний метод, так, ніби метод присутній у самому об'єкті.</p>
+
+<pre class="brush:js">var o = {f: function() { return this.a + this.b; }};
+var p = Object.create(o);
+p.a = 1;
+p.b = 4;
+
+console.log(p.f()); // 5
+</pre>
+
+<p>У цьому прикладі об'єкт, присвоєний змінній <code>p</code>, не має своєї властивості <code>f</code>, він успадковує її від свого прототипу. Але не має значення, що пошук <code>f</code> зрештою знаходить властивість з таким ім'ям у <code>o</code>; пошук починався як посилання на <code>p.f</code>, а отже, <code>this</code> всередині функції приймає значення об'єкта, на який посилається <code>p</code>. Тобто, оскільки <code>f</code> викликається як метод <code>p</code>, його <code>this</code> посилається на <code>p</code>. Це цікава особливість прототипного наслідування JavaScript.</p>
+
+<h4 id="this_з_гетером_або_сетером"><code>this</code> з гетером або сетером</h4>
+
+<p>Знову ж таки, цей самий принцип діє, коли функція викликається з гетера чи сетера. У функції, що використовується в якості гетера чи сетера, <code>this</code> прив'язується до об'єкта, де властивість отримується чи встановлюється.</p>
+
+<pre class="brush:js">function sum() {
+  return this.a + this.b + this.c;
+}
+
+var o = {
+  a: 1,
+  b: 2,
+  c: 3,
+  get average() {
+    return (this.a + this.b + this.c) / 3;
+  }
+};
+
+Object.defineProperty(o, 'sum', {
+    get: sum, enumerable: true, configurable: true});
+
+console.log(o.average, o.sum); // 2, 6
+</pre>
+
+<h3 id="Як_конструктор">Як конструктор</h3>
+
+<p>Коли функція використовується як конструктор (з ключовим словом {{jsxref("Operators/new", "new")}}), її <code>this</code> прив'язується до нового об'єкта, що створюється.</p>
+
+<div class="note">
+<p>Хоча за замовчуванням конструктор повертає об'єкт, на який посилається <code>this</code>, він може, натомість, повернути якийсь інший об'єкт (якщо значення, що повертається, не є об'єктом, тоді повертається об'єкт <code>this</code>).</p>
+</div>
+
+<pre class="brush:js">/*
+ * Конструктори працюють так:
+ *
+ * function MyConstructor(){
+ *   // Тут розташований код тіла функції.
+ *   // Створюємо бажані властивості |this|
+ *   // присвоєнням. Наприклад,
+ *   this.fum = "nom";
+ *   // і так далі...
+ *
+ *   // Якщо функція має оператор return, який
+ *   // повертає об'єкт, цей об'єкт буде
+ *   // результатом виразу |new|. Інакше,
+ *   // результатом виразу буде поточний об'єкт,
+ *   // прив'язаний до |this|
+ *   // (найбільш розповсюджений варіант).
+ * }
+ */
+
+function C() {
+  this.a = 37;
+}
+
+var o = new C();
+console.log(o.a); // 37
+
+
+function C2() {
+  this.a = 37;
+  return {a: 38};
+}
+
+o = new C2();
+console.log(o.a); // 38
+</pre>
+
+<p>У останньому прикладі (<code>C2</code>), через те, що під час створення був повернений об'єкт, новий об'єкт, до якого було прив'язано <code>this</code>, просто відкидається. (Це, по суті, робить інструкцію "<code>this.a = 37;</code>" мертвим кодом. Він не абсолютно мертвий, бо він виконується, але його можна видалити без жодних наслідків для зовнішнього коду.)</p>
+
+<h3 id="Як_обробник_подій_у_DOM">Як обробник подій у DOM</h3>
+
+<p>Коли функція використовується як обробник подій, її значенням <code>this</code> встановлюється елемент, який запустив подію (деякі переглядачі не дотримуються цієї конвенції для прослуховувачів, доданих динамічно іншими методами, ніж {{domxref("EventTarget.addEventListener()", "addEventListener()")}}).</p>
+
+<pre class="brush:js">// Коли викликається як прослуховувач, робить відповідний елемент синім
+function bluify(e) {
+  // Завжди true
+  console.log(this === e.currentTarget);
+  // true, коли currentTarget і target є тим самим об'єктом
+  console.log(this === e.target);
+  this.style.backgroundColor = '#A5D9F3';
+}
+
+// Отримати список усіх елементів у document
+var elements = document.getElementsByTagName('*');
+
+// Додати bluify як прослуховувач події натискання, щоб, коли
+// на елемент натискають, він ставав синім
+for (var i = 0; i &lt; elements.length; i++) {
+  elements[i].addEventListener('click', bluify, false);
+}</pre>
+
+<h3 id="У_вбудованому_обробнику_подій">У вбудованому обробнику подій</h3>
+
+<p>Коли код викликається з вбудованого <a href="/uk/docs/Web/Guide/Events/Event_handlers">обробника подій</a>, значенням його <code>this</code> встановлюється DOM-елемент, де розташований прослуховувач:</p>
+
+<pre class="brush: html">&lt;button onclick="alert(this.tagName.toLowerCase());"&gt;
+  Показати this
+&lt;/button&gt;
+</pre>
+
+<p>Наведене оповіщення показує <code>button</code>. Однак, зауважте, що лише у зовнішньому коді <code>this</code> присвоюється таким чином:</p>
+
+<pre class="brush: html">&lt;button onclick="alert((function() { return this; })());"&gt;
+  Показати this внутрішньої функції
+&lt;/button&gt;
+</pre>
+
+<p>У цьому випадку, <code>this</code> внутрішньої функції не присвоюється, тому функція повертає глобальний об'єкт/window (тобто, об'єкт за замовчуванням у нестрогому режимі, де <code>this</code> не встановлюється викликом).</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-this-keyword', 'The this keyword')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-this-keyword', 'The this keyword')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.1.1', 'The this keyword')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.1.1', 'The this keyword')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.1.1', 'The this keyword')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.this")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">Строгий режим</a></li>
+ <li><a href="https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/">Лагідне роз'яснення ключового слова 'this' у JavaScript</a></li>
+ <li>Отримання глобального контексту: {{jsxref("globalThis")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/typeof/index.html b/files/uk/web/javascript/reference/operators/typeof/index.html
new file mode 100644
index 0000000000..a0e9b217d4
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/typeof/index.html
@@ -0,0 +1,278 @@
+---
+title: typeof
+slug: Web/JavaScript/Reference/Operators/typeof
+tags:
+  - JavaScript
+  - Operator
+  - typeof
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/typeof
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор <strong><code>typeof</code></strong> повертає рядок, що вказує тип необчисленого операнду.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-typeof.html")}}</div>
+
+
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<p>Оператор <code>typeof</code> супроводжується операндом:</p>
+
+<pre class="syntaxbox">typeof <em>operand
+</em>typeof(<em>operand</em>)
+</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>operand</code></dt>
+ <dd>Вираз, що представляє об'єкт або {{Glossary("Primitive", "примітив")}}, тип якого потрібно повернути.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Наступна таблиця наводить можливі значення, повернені <code>typeof</code>. Для отримання додаткової інформації про типи та прості значення, дивіться також статтю про <a href="/uk/docs/Web/JavaScript/Data_structures">Структури даних JavaScript</a>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Тип</th>
+   <th scope="col">Результат</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{glossary("Undefined")}}</td>
+   <td><code>"undefined"</code></td>
+  </tr>
+  <tr>
+   <td>{{glossary("Null")}}</td>
+   <td><code>"object"</code> (дивіться {{anch("null", "нижче")}})</td>
+  </tr>
+  <tr>
+   <td>{{glossary("Boolean")}}</td>
+   <td><code>"boolean"</code></td>
+  </tr>
+  <tr>
+   <td>{{glossary("Number")}}</td>
+   <td><code>"number"</code></td>
+  </tr>
+  <tr>
+   <td>{{glossary("BigInt")}} (нове у ECMAScript 2020)</td>
+   <td><code>"bigint"</code></td>
+  </tr>
+  <tr>
+   <td>{{glossary("String")}}</td>
+   <td><code>"string"</code></td>
+  </tr>
+  <tr>
+   <td>{{glossary("Symbol")}} (нове у ECMAScript 2015)</td>
+   <td><code>"symbol"</code></td>
+  </tr>
+  <tr>
+   <td>Об'єкт {{glossary("Function")}} (реалізує [[Call]] in ECMA-262 terms)</td>
+   <td><code>"function"</code></td>
+  </tr>
+  <tr>
+   <td>Будь-який інший об'єкт</td>
+   <td><code>"object"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p><strong>Заувага:</strong> ECMAScript 2019 та старші версії дозволяли у реалізаціях <code>typeof</code> повертати будь-яке рядкове значення, визначене реалізацією, для об'єктів, які не можна викликати, а також нестандартних екзотичних об'єктів.</p>
+
+<p>Єдиним відомим переглядачем, який дійсно скористався цією можливістю, був старий Internet Explorer (дивіться {{anch("Примітки_щодо_IE", "нижче")}}).</p>
+</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">// Числа
+typeof 37 === 'number';
+typeof 3.14 === 'number';
+typeof(42) === 'number';
+typeof Math.LN2 === 'number';
+typeof Infinity === 'number';
+typeof NaN === 'number'; // Незважаючи на те, що є "Not-A-Number" (не-числом)
+typeof Number('1') === 'number'; // Number намагається розібрати значення як числа
+typeof Number('чобіт') === 'number';   // також значення, які не можуть бути приведені до числових
+
+typeof 42n === 'bigint';
+
+
+// Рядки
+typeof '' === 'string';
+typeof 'бла' === 'string';
+typeof `шаблонний літерал` === 'string';
+typeof '1' === 'string'; // зауважте, що число у рядку все ж має тип string
+typeof (typeof 1) === 'string'; // typeof завжди повертає string
+typeof String(1) === 'string'; // String перетворює будь-що у рядок, безпечніше, ніж toString
+
+
+// Булеві значення
+typeof true === 'boolean';
+typeof false === 'boolean';
+typeof Boolean(1) === 'boolean'; // Boolean() перетворює значення на підставі того, чи є вони правдивими, чи хибними
+typeof !!(1) === 'boolean'; // два виклики оператора ! (логічне НЕ) еквівалентні Boolean()
+
+
+// Символи
+typeof Symbol() === 'symbol'
+typeof Symbol('ква') === 'symbol'
+typeof Symbol.iterator === 'symbol'
+
+
+// Undefined
+typeof undefined === 'undefined'; // змінна, що має значення undefined
+typeof declaredButUndefinedVariable === 'undefined'; // оголошена змінна без значення
+typeof undeclaredVariable === 'undefined'; // неоголошена змінна
+
+
+// Об'єкти
+typeof {a: 1} === 'object';
+
+// Використовуйте Array.isArray або Object.prototype.toString.call,
+// щоб відрізнити звичайні об'єкти від масивів
+typeof [1, 2, 4] === 'object';
+
+typeof new Date() === 'object';
+typeof /regex/ === 'object'; // Дивіться історичні результати у розділі Регулярні вирази
+
+
+// Наведені вирази є заплутаними, небезпечнимм та марнотратними. Уникайте їх.
+typeof new Boolean(true) === 'object';
+typeof new Number(1) === 'object';
+typeof new String('abc') === 'object';
+
+// Функції
+typeof function() {} === 'function';
+typeof class C {} === 'function';
+typeof Math.sin === 'function';</pre>
+
+<h2 id="Додаткова_інформація">Додаткова інформація</h2>
+
+<h3 id="null"><code>null</code></h3>
+
+<pre class="brush:js">// Так було від початку існування JavaScript
+typeof null === 'object';
+</pre>
+
+<p>У першій реалізації JavaScript, значення JavaScript були представлені у вигляді мітки типу та значення. Міткою типу для об'єкта був 0. <code>null</code> був представлений нульовим вказівником (0x00 у більшості платформ). Відповідно, null мав міткою типу 0, звідси повернене значення "object" у <code>typeof</code>. (<a href="http://www.2ality.com/2013/10/typeof-null.html">посилання</a>)</p>
+
+<p>Було запропоноване виправлення для ECMAScript (як експериментальна функціональність), але воно було <a class="external" href="https://web.archive.org/web/20160331031419/http://wiki.ecmascript.org:80/doku.php?id=harmony:typeof_null">відхилене</a>. Воно змінило б результат на <code>typeof null === 'null'</code>.</p>
+
+<h3 id="Використання_оператора_new">Використання оператора <code>new</code></h3>
+
+<pre class="brush:js">// Усі функції-конструктори, за винятком конструктора Function, завжди матимуть тип 'object'
+var str = new String('String');
+var num = new Number(100);
+
+typeof str; // Це поверне 'object'
+typeof num; // Це поверне 'object'
+
+var func = new Function();
+
+typeof func; // Це поверне 'function'
+</pre>
+
+<h3 id="Необхідність_круглих_дужок_для_синтаксису">Необхідність круглих дужок для синтаксису</h3>
+
+<pre class="brush:js">// Круглі дужки можуть використовуватись для визначення типу виразу.
+var iData = 99;
+
+typeof iData + ' Wisen'; // 'number Wisen'
+typeof (iData + ' Wisen'); // 'string'
+</pre>
+
+<h3 id="Регулярні_вирази">Регулярні вирази</h3>
+
+<p>Регулярні вирази, доступні для виклику, були нестандартним доповненням у деяких переглядачах.</p>
+
+<pre class="brush:js">typeof /s/ === 'function'; // Chrome 1-12 не відповідає ECMAScript 5.1
+typeof /s/ === 'object';   // Firefox 5+  відповідає ECMAScript 5.1
+</pre>
+
+<h3 id="Помилки">Помилки</h3>
+
+<p>До ECMAScript 2015 <code>typeof</code> гарантовано повертав рядок для будь-якого наданого операнда. Навіть для неоголошених ідентифікаторів <code>typeof</code> повертав <code>'undefined'</code>. Використання <code>typeof</code> ніяк не могло згенерувати помилку.</p>
+
+<p>Але з додаванням блочних областей видимості у {{jsxref("Statements/let", "let")}} та {{jsxref("Statements/const","const")}}, використання <code>typeof</code> на змінних, створених через <code>let</code> та <code>const</code> (або використання <code>typeof</code> на класі), у блоці до того, як вони були оголошені, викине помилку {{jsxref("ReferenceError")}}. Змінні блочної області видимості знаходяться у "<a href="/uk/docs/Web/JavaScript/Reference/Statements/let#Тимчасова_мертва_зона">тимчасовій мертвій зоні</a>" від початку блоку до завершення ініціалізації, спроба звернення до них в цей час викине помилку.</p>
+
+<pre class="brush: js">typeof undeclaredVariable === 'undefined';
+
+typeof newLetVariable; // ReferenceError
+typeof newConstVariable; // ReferenceError
+typeof newClass; // ReferenceError
+
+let newLetVariable;
+const newConstVariable = 'привіт';
+class newClass{};</pre>
+
+<h3 id="Винятки">Винятки</h3>
+
+<p>Усі нинішні переглядачі відкривають нестандартний хост-об'єкт {{domxref("document.all")}} з типом <code>undefined</code>.</p>
+
+<pre class="brush:js">typeof document.all === 'undefined';
+</pre>
+
+<p>Хоча специфікація дозволяє користувацькі мітки типів для нестандартних екзотичних об'єктів, вона вимагає, щоб ці мітки відрізнялись від попередньо визначених. Випадок використання у <code>document.all</code> типу <code>'undefined'</code> класифікується у веб-стандартах як "умисне порушення" оригінального стандарту ECMA JavaScript.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-typeof-operator', 'The typeof Operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-typeof-operator', 'The typeof Operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.4.3', 'The typeof Operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.4.3', 'The typeof Operator')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.4.3', 'The typeof Operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.1.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.typeof")}}</p>
+
+<h2 id="Примітки_щодо_IE">Примітки щодо IE</h2>
+
+<p>У IE 6, 7 та 8 багато хост-об'єктів є об'єктами, а не функціями. Для прикладу:</p>
+
+<pre class="brush: js">typeof alert === 'object'</pre>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Operators/instanceof", "instanceof")}}</li>
+ <li><a href="http://es-discourse.com/t/why-typeof-is-no-longer-safe/15">Чому typeof більше не є "безпечним"</a></li>
+ <li><a href="https://github.com/tc39/ecma262/issues/668">Умисне порушення стандарту у document.all</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/unary_negation/index.html b/files/uk/web/javascript/reference/operators/unary_negation/index.html
new file mode 100644
index 0000000000..bcaa14e30a
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/unary_negation/index.html
@@ -0,0 +1,77 @@
+---
+title: Унарний мінус (-)
+slug: Web/JavaScript/Reference/Operators/Unary_negation
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Unary_negation
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Унарний мінус (<code>-</code>) ставиться перед своїм операндом та міняє його знак на протилежний.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-unary-negation.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><strong>Оператор:</strong> -<var>x</var>
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Унарний_мінус_перед_числами">Унарний мінус перед числами</h3>
+
+<pre class="brush: js notranslate">const x = 3;
+const y = -x;
+
+// y = -3
+// x = 3
+</pre>
+
+<h3 id="Унарний_мінус_перед_нечисловими_значеннями">Унарний мінус перед нечисловими значеннями</h3>
+
+<p>Унарний мінус може перетворити нечислове значення на число.</p>
+
+<pre class="brush: js notranslate">const x = "4";
+const y = -x;
+
+// y = -4
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-unary-minus-operator', 'Unary negation operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.unary_negation")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Addition">Оператор додавання</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Subtraction">Оператор віднімання</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Division">Оператор ділення</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Multiplication">Оператор множення</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Remainder">Оператор остачі</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Exponentiation">Оператор піднесення до степеня</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Increment">Оператор інкременту</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Decrement">Оператор декременту</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_plus">Унарний плюс</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/unary_plus/index.html b/files/uk/web/javascript/reference/operators/unary_plus/index.html
new file mode 100644
index 0000000000..da66dbc464
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/unary_plus/index.html
@@ -0,0 +1,78 @@
+---
+title: Унарний плюс (+)
+slug: Web/JavaScript/Reference/Operators/Unary_plus
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Unary_plus
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Унарний плюс (<code>+</code>) ставиться перед своїм операндом та повертає значення операнду, але намагається перетворити його на число, якщо він не є числом.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-unary-plus.html", "taller")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><strong>Оператор:</strong> +<var>x</var>
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Хоча унарний мінус (<code>-</code>) також вміє перетворювати нечислові значення, унарний плюс найшвидший та найкращий спосіб перетворити щось у число, тому що він не виконує ніяких інших операцій з числом. Він може перетворювати рядкові представлення цілих чисел та чисел з рухомою комою, а також нерядкові значення <code>true</code>, <code>false</code> та <code>null</code>. Підтримуються цілі числа у десятковому та шістнадцятковому (з префіксом <code>0x</code>) форматах. Підтримуються від'ємні числа (хоча не у шістнадцятковому форматі). Якщо оператор не може розібрати певне значення, він поверне {{jsxref("NaN")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_з_числами">Використання з числами</h3>
+
+<pre class="brush: js notranslate">const x = 1;
+const y = -1;
+
+console.log(+x);
+// 1
+console.log(+y);
+// -1</pre>
+
+<h3 id="Використання_з_нечисловими_значеннями">Використання з нечисловими значеннями</h3>
+
+<pre class="brush: js notranslate">+true  // 1
++false // 0
++null  // 0
++function(val){ return val } // NaN
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-unary-plus-operator', 'Unary plus operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.unary_plus")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Addition">Оператор додавання</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Subtraction">Оператор віднімання</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Division">Оператор ділення</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Multiplication">Оператор множення</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Remainder">Оператор остачі</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Exponentiation">Оператор піднесення до степеня</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Increment">Оператор інкременту</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Decrement">Оператор декременту</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_negation">Унарний мінус</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/unsigned_right_shift/index.html b/files/uk/web/javascript/reference/operators/unsigned_right_shift/index.html
new file mode 100644
index 0000000000..1815bba018
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/unsigned_right_shift/index.html
@@ -0,0 +1,74 @@
+---
+title: Беззнаковий правий зсув (>>>)
+slug: Web/JavaScript/Reference/Operators/Unsigned_right_shift
+tags:
+  - JavaScript
+  - Бітовий оператор
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Unsigned_right_shift
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Оператор беззнакового правого зсуву (<code>&gt;&gt;&gt;</code>)</strong> (правий зсув із заповненням нулями) виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються нулями. Знаковий біт отримує значення <code>0</code>, а отже, результат завжди невід'ємний. На відміну від інших бітових операторів, правий зсув із заповненням нулями повертає беззнакове ціле 32-бітне число.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-unsigned-right-shift.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>a</var> &gt;&gt;&gt; <var>b</var></code>
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Цей оператор виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються нулями. Знаковий біт отримує значення <code>0</code>, а отже, результат завжди невід'ємний. На відміну від інших бітових операторів, правий зсув із заповненням нулями повертає беззнакове ціле 32-бітне число.</p>
+
+<p>Для невід'ємних чисел, правий зсув із заповненням нулями та правий зсув з розширенням знаку дають однаковий результат. Наприклад, <code>9 &gt;&gt;&gt; 2</code> дорівнює 2, так само, як <code>9 &gt;&gt; 2</code>:</p>
+
+<pre class="brush: js notranslate">.     9 (основа 10): 00000000000000000000000000001001 (основа 2)
+                   --------------------------------
+9 &gt;&gt;&gt; 2 (основа 10): 00000000000000000000000000000010 (основа 2) = 2 (основа 10)
+</pre>
+
+<p>Однак, це не одне й те саме для від'ємних чисел. Наприклад, <code>-9 &gt;&gt;&gt; 2</code> поверне 1073741821, що відрізняється від <code>-9 &gt;&gt; 2</code> (що дорівнює <code>-3</code>):</p>
+
+<pre class="brush: js notranslate">.     -9 (основа 10): 11111111111111111111111111110111 (основа 2)
+                    --------------------------------
+-9 &gt;&gt;&gt; 2 (основа 10): 00111111111111111111111111111101 (основа 2) = 1073741821 (основа 10)
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_беззнакового_правого_зсуву">Використання беззнакового правого зсуву</h3>
+
+<pre class="brush: js notranslate"> 9 &gt;&gt;&gt; 2; // 2
+-9 &gt;&gt;&gt; 2; // 1073741821
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators', 'Bitwise Shift Operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.unsigned_right_shift")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%91%D1%96%D1%82%D0%BE%D0%B2%D1%96_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8">Бітові оператори у посібнику JS</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment">Оператор присвоєння з беззнаковим правим зсувом</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/unsigned_right_shift_assignment/index.html b/files/uk/web/javascript/reference/operators/unsigned_right_shift_assignment/index.html
new file mode 100644
index 0000000000..4ffe4bef3d
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/unsigned_right_shift_assignment/index.html
@@ -0,0 +1,60 @@
+---
+title: Присвоєння з беззнаковим правим зсувом (>>>=)
+slug: Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+  - Оператор присвоєння
+translation_of: Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор присвоєння з беззнаковим правим зсувом (<em><code>&gt;&gt;&gt;=</code></em>) виконує зсув першого операнду на вказану кількість бітів праворуч та присвоює результат змінній.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-unsigned-right-shift-assignment.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x &gt;&gt;&gt;= y
+<strong>Значення:</strong> x    = x &gt;&gt;&gt; y</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_присвоєння_з_беззнаковим_правим_зсувом">Використання присвоєння з беззнаковим правим зсувом</h3>
+
+<pre class="brush: js notranslate">let a = 5; //   (00000000000000000000000000000101)
+a &gt;&gt;&gt;= 2;  // 1 (00000000000000000000000000000001)
+
+let b = -5; // (-00000000000000000000000000000101)
+b &gt;&gt;&gt;= 2;   // 1073741822 (00111111111111111111111111111110)</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.unsigned_right_shift_assignment")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8_%D0%BF%D1%80%D0%B8%D1%81%D0%B2%D0%BE%D1%94%D0%BD%D0%BD%D1%8F">Оператори присвоєння у посібнику JS</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift">Оператор беззнакового правого зсуву</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/void/index.html b/files/uk/web/javascript/reference/operators/void/index.html
new file mode 100644
index 0000000000..d280657ad3
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/void/index.html
@@ -0,0 +1,123 @@
+---
+title: Оператор void
+slug: Web/JavaScript/Reference/Operators/void
+tags:
+  - JavaScript
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/void
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Оператор</strong> <strong><code>void</code></strong> обчислює наданий <code><em>вираз</em></code> та повертає {{jsxref("undefined")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-voidoperator.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <em>вираз</em></pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Цей оператор дозволяє обчислення виразів, які повертають значення, у місцях, де очікується вираз, що обчислюється як {{jsxref("undefined")}}.</p>
+
+<p>Оператор <code>void</code> часто використовують лише для того, щоб отримати просту величину <code>undefined</code>, зазвичай, використанням "<code>void(0)</code>" (що є еквівалентним "<code>void 0</code>"). У таких випадках можна замість цього скористатись глобальною змінною {{jsxref("undefined")}} (за умови, що їй не було присвоєне нове значення).</p>
+
+<p>Зауважте, що необхідно враховувати <a href="/uk/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">пріоритет</a> оператора <code>void</code>, і що круглі дужки можуть допомогти прояснити обчислення виразу, розташованого після оператора <code>void</code>:</p>
+
+<pre class="brush: js">void 2 == '2';   // (void 2) == '2', вертає false
+void (2 == '2'); // void (2 == '2'), вертає undefined
+</pre>
+
+<h2 id="Негайно_виконувані_функціональні_вирази">Негайно виконувані функціональні вирази</h2>
+
+<p>При використанні {{Glossary("IIFE", "негайно виконуваного фукнціонального виразу")}} <code>void</code> може використовуватись, щоб змусити ключове слово <code>function</code> сприйматись як вираз, а не як оголошення.</p>
+
+<pre class="brush: js">void function iife() {
+    var bar = function () {};
+    var baz = function () {};
+    var foo = function () {
+        bar();
+        baz();
+     };
+    var biz = function () {};
+
+    foo();
+    biz();
+}();
+</pre>
+
+<h2 id="URI_у_JavaScript">URI у JavaScript</h2>
+
+<p>Коли переглядач переходить по <code>javascript:</code> URI, він обчислює код у URI, після чого замінює вміст сторінки поверненим значенням, якщо тільки повернене значення не є {{jsxref("undefined")}}. Оператор <code>void</code> можна використати, щоб повернути <code>undefined</code>. Наприклад:</p>
+
+<pre class="brush: html">&lt;a href="javascript:void(0);"&gt;
+  Натисніть сюди, щоб не робити нічого
+&lt;/a&gt;
+
+&lt;a href="javascript:void(document.body.style.backgroundColor='green');"&gt;
+  Натисніть сюди, щоб зробити фон зеленим
+&lt;/a&gt;
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Заувага</strong>: використання псевдопротоколу <code>javascript:</code> не заохочується на користь інших альтернатив, таких як ненав'язливі обробники подій.</p>
+</div>
+
+<h2 id="Стрілкові_функції_без_витоків">Стрілкові функції без витоків</h2>
+
+<p>Стрілкові функції запроваджують скорочений бездужковий синтаксис, який повертає вираз. Це може спричинити ненавмисні побічні ефекти, повертаючи результат функціонального виклику, який раніше не повертав нічого. Щоб убезпечитись у випадках, коли результат функції не передбачається використовувати, його можна передати у оператор void, щоб гарантувати, що (наприклад) зміна API не спричинить зміну поведінки стрілкових функцій.</p>
+
+<pre class="brush: js">button.onclick = () =&gt; void doSomething();</pre>
+
+<p>Це гарантує, що повернене значення <code>doSomething</code>, змінюючись з <code>undefined</code> на <code>true</code>, не змінить поведінку цього коду.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-void-operator', 'The void Operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-void-operator', 'The void Operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.4.2', 'The void Operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.4.2', 'The void Operator')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.4.2', 'The void Operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.1</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.void")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("undefined")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/yield/index.html b/files/uk/web/javascript/reference/operators/yield/index.html
new file mode 100644
index 0000000000..0609f221d3
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/yield/index.html
@@ -0,0 +1,121 @@
+---
+title: yield
+slug: Web/JavaScript/Reference/Operators/yield
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Ітератор
+  - Оператор
+  - генератори
+translation_of: Web/JavaScript/Reference/Operators/yield
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Ключове слово <code>yield</code> використовується для призупинення та відновлення виконання функції-генератора ({{jsxref("Statements/function*", "function*")}} або <a href="/uk/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">застарілої функції-генератора</a>).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-yield.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">[<em>rv</em>] = <strong>yield</strong> [<em>expression</em>];</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>Визначає значення, яке буде повернене функцією-генератором згідно <a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору#Протокол_ітератора">протоколу ітератора</a>. Якщо пропущене, повертається <code>undefined</code>.</dd>
+ <dt><code>rv</code></dt>
+ <dd>
+ <p>Отримує необов'язкове значення, передане у метод генератора <code>next()</code> для відновлення виконання.</p>
+ </dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Ключове слово <code>yield</code> призупиняє виконання функції-генератора, а значення виразу, що стоїть після <code>yield</code>, повертається у інструкцію, що викликала генератор. Його можна уявити як генераторну версію ключового слова <code>return</code>.</p>
+
+<p>Оператор <code>yield</code> може викликатись тільки безпосередньо з функції-генератора, яка його містить. Його не можна викликати з вкладених функцій або зворотних викликів.</p>
+
+<p>Ключове слово <code>yield</code> здійснює виклик метода генератора <code>next()</code>, повертаючи об'єкт <code>IteratorResult</code> з двома властивостями, <code>value</code> та <code>done</code>. Властивість <code>value</code> є результатом обчислення виразу <code>yield</code>, а <code>done</code> дорівнює <code>false</code>, вказуючи, що функція-генератор ще не завершена.</p>
+
+<p>Зупинившись на виразі <code>yield</code>, виконання коду генератора залишається на паузі до виклику методу генератора <code>next()</code>. Кожний раз, коли викликається метод генератора <code>next()</code>, генератор відновлює виконання та виконується, поки не досягає чогось з наступного:</p>
+
+<ul>
+ <li>Ключове слово <code>yield</code>, яке змушує генератор знову призупинитись та повертає нове значення генератора. Наступний раз, коли викликатиметься <code>next()</code>, виконання продовжиться з інструкції, що стоїть одразу після <code>yield</code>.</li>
+ <li>Оператор {{jsxref("Statements/throw", "throw")}} використовується для викидання винятків у генераторі. Він повністю зупиняє виконання генератора, а виконання коду продовжується у місці виклику, як це стандартно відбувається, коли викидається виняток.</li>
+ <li>Досягнуто кінця функції-генератора; у цьому випадку виконання генератора завершується, а <code>IteratorResult</code> повертається з <code>value</code>, що дорівнює {{jsxref("undefined")}}, та <code>done</code>, що дорівнює <code>true</code>.</li>
+ <li>Досягнуто оператора {{jsxref("Statements/return", "return")}}. У цьому випадку виконання генератора завершується, а <code>IteratorResult</code> повертається з <code>value</code>, що дорівнює значенню, вказаному у <code>return</code>, та <code>done</code>, що дорівнює <code>true</code>.</li>
+</ul>
+
+<p>Якщо у метод генератора <code>next()</code> було передано необов'язкове значення, воно стає значенням, що повертається поточною операцією генератора <code>yield</code>.</p>
+
+<p>Маючи фрагменти коду, що виконуються генератором, оператори <code>yield</code> та здатність вказувати нове початкове значення, передаючи його у {{jsxref("Generator.prototype.next()")}}, генератори надають неймовірну потужність та контроль.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Наступний код є оголошенням прикладу функції-генератора.</p>
+
+<pre class="brush: js">function* countAppleSales () {
+  var saleList = [3, 7, 5];
+  for (var i = 0; i &lt; saleList.length; i++) {
+    yield saleList[i];
+  }
+}</pre>
+
+<p>Як тільки функція-генератор визначена, її можна використовувати, створивши ітератор, як показано нижче.</p>
+
+<pre class="brush: js">var appleStore = countAppleSales(); // Generator { }
+console.log(appleStore.next()); // { value: 3, done: false }
+console.log(appleStore.next()); // { value: 7, done: false }
+console.log(appleStore.next()); // { value: 5, done: false }
+console.log(appleStore.next()); // { value: undefined, done: true }</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#prod-YieldExpression', 'Yield')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#prod-YieldExpression', 'Yield')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.yield")}}</p>
+
+<h2 id="Примітки_щодо_Firefox">Примітки щодо Firefox</h2>
+
+<ul>
+ <li>Починаючи з Gecko 29 {{geckoRelease(29)}}, завершена функція-генератор більше не викидає помилку {{jsxref("TypeError")}} "generator has already finished". Замість цього вона повертає об'єкт <code>IteratorResult</code> у вигляді <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</li>
+ <li>Починаючи з Gecko 33 {{geckoRelease(33)}} розбір виразу <code>yield</code> було оновлено для відповідності специфікації ES2015 ({{bug(981599)}}):
+  <ul>
+   <li>Вираз після ключового слова <code>yield</code> є необов'язковим, і  його пропуск більше не викидає помилку {{jsxref("SyntaxError")}}: <code>function* countAppleSales() { yield; }</code></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору">Протоколи перебору</a></li>
+ <li>{{jsxref("Statements/function*", "function*")}}</li>
+ <li>{{jsxref("Operators/function*", "вираз function*")}}</li>
+ <li>{{jsxref("Operators/yield*", "yield*")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/yield_star_/index.html b/files/uk/web/javascript/reference/operators/yield_star_/index.html
new file mode 100644
index 0000000000..cb6bf7f77e
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/yield_star_/index.html
@@ -0,0 +1,162 @@
+---
+title: yield*
+slug: Web/JavaScript/Reference/Operators/yield*
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Ітератор
+  - Оператор
+  - генератори
+translation_of: Web/JavaScript/Reference/Operators/yield*
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Вираз</strong> <strong><code>yield*</code></strong> використовується для делегування до іншого {{jsxref("Statements/function*", "генератора")}} чи ітерабельного об'єкта.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-yieldasterisk.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"> yield* [[expression]];</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>Вираз, який повертає ітерабельний об'єкт.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Вираз <code>yield*</code> перебирає свій операнд та видає кожне значення, що він повертає.</p>
+
+<p>Значенням самого виразу <code>yield*</code> є значення, повернене ітератором, коли він закривається (тобто, коли <code>done</code> дорівнює <code>true</code>).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Делегування_до_іншого_генератора">Делегування до іншого генератора</h3>
+
+<p>У наступному коді значення, отримані від <code>g1()</code>, повертаються викликами <code>next()</code> так само, як значення, отримані від <code>g2()</code>.</p>
+
+<pre class="brush: js">function* g1() {
+  yield 2;
+  yield 3;
+  yield 4;
+}
+
+function* g2() {
+  yield 1;
+  yield* g1();
+  yield 5;
+}
+
+var iterator = g2();
+
+console.log(iterator.next()); // {value: 1, done: false}
+console.log(iterator.next()); // {value: 2, done: false}
+console.log(iterator.next()); // {value: 3, done: false}
+console.log(iterator.next()); // {value: 4, done: false}
+console.log(iterator.next()); // {value: 5, done: false}
+console.log(iterator.next()); // {value: undefined, done: true}
+</pre>
+
+<h3 id="Інші_ітерабельні_обєкти">Інші ітерабельні об'єкти</h3>
+
+<p>Окрім об'єктів-генераторів, <code>yield*</code> також може отримувати значення з інших ітерабельних об'єктів, наприкад, з масивів, рядків чи об'єктів arguments.</p>
+
+<pre class="brush: js">function* g3() {
+  yield* [1, 2];
+  yield* '34';
+  yield* Array.from(arguments);
+}
+
+var iterator = g3(5, 6);
+
+console.log(iterator.next()); // {value: 1, done: false}
+console.log(iterator.next()); // {value: 2, done: false}
+console.log(iterator.next()); // {value: "3", done: false}
+console.log(iterator.next()); // {value: "4", done: false}
+console.log(iterator.next()); // {value: 5, done: false}
+console.log(iterator.next()); // {value: 6, done: false}
+console.log(iterator.next()); // {value: undefined, done: true}
+</pre>
+
+<h3 id="Значення_самого_виразу_yield*">Значення самого виразу <code>yield*</code></h3>
+
+<p><code>yield*</code> є виразом, а не оператором, а отже, має обчислене значення.</p>
+
+<pre class="brush: js">function* g4() {
+  yield* [1, 2, 3];
+  return 'foo';
+}
+
+var result;
+
+function* g5() {
+  result = yield* g4();
+}
+
+var iterator = g5();
+
+console.log(iterator.next()); // {value: 1, done: false}
+console.log(iterator.next()); // {value: 2, done: false}
+console.log(iterator.next()); // {value: 3, done: false}
+console.log(iterator.next()); // {value: undefined, done: true},
+                              // g4() повернув {value: 'foo', done: true} в цій точці
+
+console.log(result);          // "foo"
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.yield_star")}}</p>
+
+<h2 id="Примітки_щодо_Firefox">Примітки щодо Firefox</h2>
+
+<ul>
+ <li>Починаючи з Gecko 33 {{geckoRelease(33)}}, розбір виразів yield було оновлено для відповідності специфікації ES2015 ({{bug(981599)}}):
+  <ul>
+   <li>Було реалізовано обмеження на переривання рядка. Переривання рядка між "yield" та "*" є недозволеним. Наступний код викине помилку {{jsxref("SyntaxError")}}:
+    <pre class="brush: js">function* foo() {
+  yield
+  *[];
+}</pre>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору">Протоколи перебору</a></li>
+ <li>{{jsxref("Statements/function*", "function*")}}</li>
+ <li>{{jsxref("Operators/function*", "вираз function*")}}</li>
+ <li>{{jsxref("Operators/yield", "yield")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/деструктуризація/index.html b/files/uk/web/javascript/reference/operators/деструктуризація/index.html
new file mode 100644
index 0000000000..4967086ede
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/деструктуризація/index.html
@@ -0,0 +1,453 @@
+---
+title: Деструктуризація
+slug: Web/JavaScript/Reference/Operators/Деструктуризація
+tags:
+  - Destructuring
+  - ECMAScript 2015
+  - JavaScript
+  - Operator
+  - Деструктуризація
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Деструктуризація</strong> (деструктуризаційне присвоєння) - JavaScript вираз, який дозволяє витягувати дані з масивів та об’єктів в окремі змінні.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:js">var a, b, rest;
+[a, b] = [10, 20];
+console.log(a); // 10
+console.log(b); // 20
+
+[a, b, ...rest] = [10, 20, 30, 40, 50];
+console.log(a); // 10
+console.log(b); // 20
+console.log(rest); // [30, 40, 50]
+
+({a, b} = {a: 10, b: 20});
+console.log(a); // 10
+console.log(b); // 20
+
+// Експерементальний синтаксис (ще не стандартизований)
+({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Вирази присвоєння літералів об’єктів та масивів надають простий спосіб створювати <em>ad hoc (ад-гок)</em> структури даних.</p>
+
+<pre class="brush: js">var x = [1, 2, 3, 4, 5];</pre>
+
+<p>Деструктуризаційне присвоєння використовує подібний синтаксис, де ліва сторона виразу визначає елементи, що потрібно витягнути зі змінної-джерела (правої сторони).</p>
+
+<pre class="brush: js">var x = [1, 2, 3, 4, 5];
+var [y, z] = x;
+console.log(y); // 1
+console.log(z); // 2
+</pre>
+
+<p>Це подібне до способів, що доступні у мовах програмування на кшталт Perl та Python.</p>
+
+<h2 id="Деструктуризація_масивів">Деструктуризація масивів</h2>
+
+<h3 id="Звичайне_присвоєння">Звичайне присвоєння</h3>
+
+<pre class="brush: js">var foo = ['one', 'two', 'three'];
+
+var [one, two, three] = foo;
+console.log(one); // "one"
+console.log(two); // "two"
+console.log(three); // "three"
+</pre>
+
+<h3 id="Присвоєння_окреме_від_оголошення">Присвоєння, окреме від оголошення</h3>
+
+<p>Значення може бути присвоєне змінній окремо від оголошення цієї змінної.</p>
+
+<pre class="brush:js">var a, b;
+
+[a, b] = [1, 2];
+console.log(a); // 1
+console.log(b); // 2
+</pre>
+
+<h3 id="Значення_за_промовчанням">Значення за промовчанням</h3>
+
+<p>Змінній може бути присвоєне значення за промовчанням у випадку, коли витягнуте значення є <code>undefined</code>.</p>
+
+<pre class="brush: js">var a, b;
+
+[a=5, b=7] = [1];
+console.log(a); // 1
+console.log(b); // 7
+</pre>
+
+<h3 id="Обмін_змінних">Обмін змінних</h3>
+
+<p>Дві змінні можуть обмінятися значеннями за допомогою одного деструктуризаційного виразу. </p>
+
+<p>Без деструктуризації, обмін двох значеннь потребує тимчасової змінної (або в деяких низькорівневих мовах <a href="https://uk.wikipedia.org/wiki/%D0%90%D0%BB%D0%B3%D0%BE%D1%80%D0%B8%D1%82%D0%BC_%D0%BE%D0%B1%D0%BC%D1%96%D0%BD%D1%83_XOR">XOR-обміну</a>).</p>
+
+<pre class="brush:js">var a = 1;
+var b = 3;
+
+[a, b] = [b, a];
+console.log(a); // 3
+console.log(b); // 1
+</pre>
+
+<h3 id="Розбір_масиву_поверненого_з_функції">Розбір масиву, поверненого з функції</h3>
+
+<p>Завжди було можливо повернути масив із функції. Деструктуризація може зробити обробку повернутого масиву більш виразною.</p>
+
+<p>У цьому прикладі <code>f()</code> повертає значення <code>[1, 2]</code>, які можуть бути розібрані одним рядком коду за допомогою деструктуризації.</p>
+
+<pre class="brush:js">function f() {
+  return [1, 2];
+}
+
+var a, b;
+[a, b] = f();
+console.log(a); // 1
+console.log(b); // 2
+</pre>
+
+<h3 id="Пропуск_деяких_значень">Пропуск деяких значень</h3>
+
+<p>Можна пропустити повернуті значення, які тобі не цікаві:</p>
+
+<pre class="brush:js">function f() {
+  return [1, 2, 3];
+}
+
+var [a, , b] = f();
+console.log(a); // 1
+console.log(b); // 3
+</pre>
+
+<p>Також можна пропустити всі значення (але навіщо?):</p>
+
+<pre class="brush:js">[,,] = f();
+</pre>
+
+<h3 id="Присвоєння_решти_масиву_змінній">Присвоєння решти масиву змінній</h3>
+
+<p>Деструктуризуючи масив, можна присвоїти змінній решту його елементів за допомогою <a href="/uk/docs/Web/JavaScript/Reference/Operators/%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80_%D1%80%D0%BE%D0%B7%D0%BF%D0%B0%D0%BA%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F">оператора розпакування</a>:</p>
+
+<pre class="brush: js">var [a, ...b] = [1, 2, 3];
+console.log(a); // 1
+console.log(b); // [2, 3]</pre>
+
+<p>Зауваж, що буде видана помилка {{jsxref("SyntaxError")}}, якщо поставити прикінцеву кому в лівій частині виразу за елементом решти:</p>
+
+<pre class="brush: js example-bad">var [a, ...b,] = [1, 2, 3];
+// SyntaxError: елемент решти не може мати прикінцевої коми</pre>
+
+<h3 id="Витягнення_значеннь_з_масиву_збігів_регулярного_виразу">Витягнення значеннь з масиву збігів регулярного виразу</h3>
+
+<p>Коли метод регулярного виразу <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">exec()</a></code> знаходить збіг, він повертає масив, що містить першим елементом повністю відповідну частину рядку, а далі частини рядку, що збіглися з кожною взятою в дужки групою в регулярному виразі. Деструктуризаційне присвоєння дозволяє з легкістю витягувати частини цього масиву, пропускаючи повний збіг, якщо він не потрібний.</p>
+
+<pre class="brush:js">var url = 'https://developer.mozilla.org/en-US/Web/JavaScript';
+
+var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
+console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]
+
+var [, protocol, fullhost, fullpath] = parsedURL;
+
+console.log(protocol); // "https"
+</pre>
+
+<h2 id="Деструктуризація_об’єктів">Деструктуризація об’єктів</h2>
+
+<h3 id="Звичайне_присвоєння_2">Звичайне присвоєння</h3>
+
+<pre class="brush: js">var o = {p: 42, q: true};
+var {p, q} = o;
+
+console.log(p); // 42
+console.log(q); // true
+</pre>
+
+<h3 id="Присвоєння_окреме_від_оголошення_2">Присвоєння, окреме від оголошення</h3>
+
+<p>Значення може бути присвоєне змінній окремо від оголошення цієї змінної.</p>
+
+<pre class="brush:js">var a, b;
+
+({a, b} = {a: 1, b: 2});</pre>
+
+<div class="note">
+<p>Дужки <code>( .. )</code> навколо виразу присвоєння необхідні при деструктуризаційному присвоєні об’єкта без оголошення.</p>
+
+<p>Вираз <code>{a, b} = {a: 1, b: 2}</code> сам по собі є синтаксично неправильним, оскільки <code>{a, b}</code> в лівій його частині розглядається як блок коду, а не як об’єкт.</p>
+
+<p>Проте, <code>({a, b} = {a: 1, b: 2})</code> є правильним, як і <code>var {a, b} = {a: 1, b: 2}</code></p>
+</div>
+
+<h3 id="Присвоєння_новим_змінним">Присвоєння новим змінним</h3>
+
+<p>Значення може бути отримане з об’єкту та присвоєне змінній з іменем, інакшим від назви властивості об’єкта.</p>
+
+<pre class="brush: js">var o = {p: 42, q: true};
+var {p: foo, q: bar} = o;
+
+console.log(foo); // 42
+console.log(bar); // true  </pre>
+
+<h3 id="Значення_за_промовчанням_2">Значення за промовчанням</h3>
+
+<p>Змінній може бути присвоєне значення за промовчанням у випадку, коли витягнуте значення з об’єкту є <code>undefined</code>.</p>
+
+<pre class="brush: js">var {a = 10, b = 5} = {a: 3};
+
+console.log(a); // 3
+console.log(b); // 5</pre>
+
+<h3 id="Встановлення_значення_за_промовчанням_аргументам_функції">Встановлення значення за промовчанням аргументам функції</h3>
+
+<h4 id="ES5_версія">ES5 версія</h4>
+
+<pre class="brush: js">function drawES5Chart(options) {
+  options = options === undefined ? {} : options;
+  var size = options.size === undefined ? 'big' : options.size;
+  var cords = options.cords === undefined ? {x: 0, y: 0} : options.cords;
+  var radius = options.radius === undefined ? 25 : options.radius;
+  console.log(size, cords, radius);
+  // тепер, врешті, малюй діаграму
+}
+
+drawES5Chart({
+  cords: {x: 18, y: 30},
+  radius: 30
+});</pre>
+
+<h4 id="ES2015_версія">ES2015 версія</h4>
+
+<pre class="brush: js">function drawES2015Chart({size = 'big', cords = {x: 0, y: 0}, radius = 25} = {}) {
+  console.log(size, cords, radius);
+  // малюй діаграму
+}
+
+drawES2015Chart({
+  cords: {x: 18, y: 30},
+  radius: 30
+});</pre>
+
+<h3 id="Вкладена_деструктуризація_об’єктів_та_масивів">Вкладена деструктуризація об’єктів та масивів</h3>
+
+<pre class="brush:js">var metadata = {
+    title: 'Scratchpad',
+    translations: [
+       {
+        locale: 'de',
+        localization_tags: [],
+        last_edit: '2014-04-14T08:43:37',
+        url: '/de/docs/Tools/Scratchpad',
+        title: 'JavaScript-Umgebung'
+       }
+    ],
+    url: '/en-US/docs/Tools/Scratchpad'
+};
+
+var {title: englishTitle, translations: [{title: localeTitle}]} = metadata;
+
+console.log(englishTitle); // "Scratchpad"
+console.log(localeTitle);  // "JavaScript-Umgebung"</pre>
+
+<h3 id="For_of_цикл_та_деструктуризація">For of цикл та деструктуризація</h3>
+
+<pre class="brush: js">var people = [
+  {
+    name: 'Mike Smith',
+    family: {
+      mother: 'Jane Smith',
+      father: 'Harry Smith',
+      sister: 'Samantha Smith'
+    },
+    age: 35
+  },
+  {
+    name: 'Tom Jones',
+    family: {
+      mother: 'Norah Jones',
+      father: 'Richard Jones',
+      brother: 'Howard Jones'
+    },
+    age: 25
+  }
+];
+
+for (var {name: n, family: {father: f}} of people) {
+  console.log('Name: ' + n + ', Father: ' + f);
+}
+
+// "Name: Mike Smith, Father: Harry Smith"
+// "Name: Tom Jones, Father: Richard Jones"</pre>
+
+<h3 id="Витягнення_полів_з_об’єктів_що_передані_аргументами_в_функцію">Витягнення полів з об’єктів, що передані аргументами в функцію</h3>
+
+<pre class="brush:js">function userId({id}) {
+  return id;
+}
+
+function whois({displayName, fullName: {firstName: name}}) {
+  console.log(displayName + ' is ' + name);
+}
+
+var user = {
+  id: 42,
+  displayName: 'jdoe',
+  fullName: {
+      firstName: 'John',
+      lastName: 'Doe'
+  }
+};
+
+console.log('userId: ' + userId(user)); // "userId: 42"
+whois(user); // "jdoe is John"</pre>
+
+<p>Це витягує <code>id</code>, <code>displayName</code> та <code>firstName</code> з об’єкта <font face="Consolas, Liberation Mono, Courier, monospace">user</font> та виводить їх.</p>
+
+<h3 id="Розраховувані_імена_властивостей_об’єкта_та_деструктуризація">Розраховувані імена властивостей об’єкта та деструктуризація</h3>
+
+<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів#Розраховувані_імена_властивостей">Розраховувані імена властивостей</a> об’єкта можуть також бути використані разом із деструктуризацією</p>
+
+<pre class="brush: js">let key = 'z';
+let {[key]: foo} = {z: 'bar'};
+
+console.log(foo); // "bar"
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами </h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{ CompatGeckoDesktop("1.8.1") }}</td>
+   <td>14</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Computed property names</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{ CompatGeckoDesktop("34") }}</td>
+   <td>14</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Spread operator</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{ CompatGeckoDesktop("34") }}</td>
+   <td>12<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+   <td>{{CompatChrome(49.0)}}</td>
+  </tr>
+  <tr>
+   <td>Computed property names</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{ CompatGeckoMobile("34") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+  </tr>
+  <tr>
+   <td>Spread operator</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{ CompatGeckoMobile("34") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Потребує ввімкнення "Enable experimental Javascript features" в налаштуваннях `about:flags`</p>
+
+<h2 id="Примітки_для_Firefox">Примітки для Firefox</h2>
+
+<ul>
+ <li>Firefox надавав нестандартне розширення мови в <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JS1.7</a> для деструктуризації. Це розширення було видалене в Gecko 40 {{geckoRelease(40)}}. Дивись {{bug(1083498)}}.</li>
+ <li>Починаючи від Gecko 41 {{geckoRelease(41)}} та згідно зі спецефікацією ES2015, деструктуризаціїні вирази в дужках, на кшталт <code>([a, b]) = [1, 2]</code> or <code>({a, b}) = { a: 1, b: 2 }</code>, зараз вважаються неправильними та будуть видавати помилку {{jsxref("SyntaxError")}}. Дивись <a class="external external-icon" href="http://whereswalden.com/2015/06/20/new-changes-to-make-spidermonkeys-and-firefoxs-parsing-of-destructuring-patterns-more-spec-compliant/">Jeff Walden's blog post</a> та {{bug(1146136)}} щоб довідатись більше.</li>
+</ul>
+
+<h2 id="Дивись_також">Дивись також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8_%D0%BF%D1%80%D0%B8%D1%81%D0%B2%D0%BE%D1%94%D0%BD%D0%BD%D1%8F">Оператори присвоєння</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/">"ES6 in Depth: Destructuring" on hacks.mozilla.org</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/оператор_розпакування/index.html b/files/uk/web/javascript/reference/operators/оператор_розпакування/index.html
new file mode 100644
index 0000000000..c1dc7dfbf8
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/оператор_розпакування/index.html
@@ -0,0 +1,282 @@
+---
+title: Оператор розпакування
+slug: Web/JavaScript/Reference/Operators/Оператор_розпакування
+tags:
+  - Iterator
+  - JavaScript
+  - Operator
+  - Ітератор
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Spread_syntax
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Оператор розпакування</strong> дозволяє розкласти колекцію в місця, де потрібні нуль чи декілька аргументів (як от виклики функцій), або декілька елементів (масиви), чи декілька змінних (деструктуризаційне присвоєння). Також можна розкласти об’єкт у місця де потрібні нуль чи більше пар ключ-значення (для оголошення об’єктів).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Для виклику функцій:</p>
+
+<pre class="brush: js">myFunction(...iterableObj);
+</pre>
+
+<p>Для масивів:</p>
+
+<pre class="brush: js">[...iterableObj, 4, 5, 6];</pre>
+
+<p>Для об’єктів (нове в ECMAScript; чернетка в 3-ій стадії):</p>
+
+<pre class="brush: js">let objClone = { ...obj };</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Розпакування_у_викликах_функції">Розпакування у викликах функції</h3>
+
+<h4 id="Заміна_apply">Заміна apply</h4>
+
+<p><strong>Приклад:</strong> {{jsxref( "Function.prototype.apply")}} прийнято використовувати у випадках, коли потрібно застосувати елементи масиву як аргументи функції.</p>
+
+<pre class="brush: js">function myFunction(x, y, z) { }
+var args = [0, 1, 2];
+myFunction.apply(null, args);</pre>
+
+<p>З розпакуванням тепер отак:</p>
+
+<pre class="brush: js">function myFunction(x, y, z) { }
+var args = [0, 1, 2];
+myFunction(...args);</pre>
+
+<p>Оператор розпакування може бути застосований до будь-якого аргументу та може бути застосований кілька разів.</p>
+
+<pre class="brush: js">function myFunction(v, w, x, y, z) { }
+var args = [0, 1];
+myFunction(-1, ...args, 2, ...[3]);</pre>
+
+<h4 id="Apply_для_new">Apply для new</h4>
+
+<p>Викликаючи конструктор з <code>new, </code>неможливо напряму використовувати на ньому <code>apply</code> (<code>apply</code> робить <code>[[Call]],</code> а не <code>[[Construct]]</code>). Проте з оператором розпакування можна легко розкладати масив у аргументи конструктора:</p>
+
+<pre class="brush: js">var dateFields = [1970, 0, 1]; // 1 Січ 1970
+// var d = new Date.apply(dateFields) не спрацює. Викине TypeError
+var d = new Date(...dateFields); // вуаля</pre>
+
+<h3 id="Розпакування_в_масивах">Розпакування в масивах</h3>
+
+<h4 id="Ліпше_оголошення_масивів">Ліпше оголошення масивів</h4>
+
+<p>Без розпакування, коли потрібно створити новий масив так, щоб якийсь існуючий був його частиною, старого синтаксису оголошення масиву не достатньо та необхідно використовувати комбінацію методів <code>push</code>, <code>splice</code>, <code>concat</code>, тощо. З оператором розпакування це стає значно лаконічніше:</p>
+
+<pre class="brush: js">var parts = ['shoulders', 'knees'];
+var lyrics = ['head', ...parts, 'and', 'toes'];
+// ["head", "shoulders", "knees", "and", "toes"]</pre>
+
+<p>Як і з розпакуванням списку аргументів, <code>...</code> можна використовувати будь-де в оголошенні масиву та будь-яку кількість разів.</p>
+
+<h4 id="Копіювання_масиву">Копіювання масиву</h4>
+
+<pre class="brush: js">var arr = [1, 2, 3];
+var arr2 = [...arr]; // так само як arr.slice()
+arr2.push(4);
+
+// arr2 стає [1, 2, 3, 4]
+// arr залишається незміненим</pre>
+
+<p><strong>Зауваження:</strong> оператор розпакування при копіюванні масиву йде лише на <strong>один</strong> рівень вглиб. Таким чином він не придатний для копіювання багатовимірних масивів, що видно з наступного прикладу (те саме з {{jsxref("Object.assign()")}} та розпакуванням об’єктів).</p>
+
+<pre class="brush: js">var a = [[1], [2], [3]];
+var b = [...a];
+b.shift().shift(); // 1
+// Тепер масив a також змінено: [[], [2], [3]]</pre>
+
+<h4 id="Ліпше_злиття_масивів">Ліпше злиття масивів</h4>
+
+<p>{{jsxref("Array.concat")}} часто використовується, щоб додати один масив у кінець іншого. Без розпакування це робиться так:</p>
+
+<pre class="brush: js">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// Доддати всі елементи з arr2 в arr1
+arr1 = arr1.concat(arr2);</pre>
+
+<p>З розпакуванням це стає:</p>
+
+<pre class="brush: js">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1 = [...arr1, ...arr2];</pre>
+
+<p>{{jsxref("Array.unshift")}} часто використовується для того, щоб вставити значення з одного масиву в початок іншого. Без розпакування це робиться так:</p>
+
+<pre class="brush: js">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// Вставити всі елементи з arr2 в початок arr1
+Array.prototype.unshift.apply(arr1, arr2) // arr1 тепер [3, 4, 5, 0, 1, 2]</pre>
+
+<p>З розпакуванням це стає:</p>
+
+<pre class="brush: js">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1 = [...arr2, ...arr1]; // arr1 тепер [3, 4, 5, 0, 1, 2]</pre>
+
+<h4 id="Розпакування_об’єктів">Розпакування об’єктів</h4>
+
+<p>Пропозиція <a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a> (стадія 3) додає розпакування до <a href="/uk/docs/Web/JavaScript/Reference/Operators/%D0%86%D0%BD%D1%96%D1%86%D1%96%D0%B0%D0%BB%D1%96%D0%B7%D0%B0%D1%86%D1%96%D1%8F_%D0%BE%D0%B1%E2%80%99%D1%94%D0%BA%D1%82%D1%96%D0%B2">об’єктів</a>. It copies own enumerable properties from a provided object onto a new object.</p>
+
+<p>Однорівневе клонування (без прототипу) чи злиття об’єктів тепер можливе використовуючи коротший запис ніж {{jsxref("Object.assign()")}}.</p>
+
+<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 };
+var obj2 = { foo: 'baz', y: 13 };
+
+var clonedObj = { ...obj1 };
+// Object { foo: "bar", x: 42 }
+
+var mergedObj = { ...obj1, ...obj2 };
+// Object { foo: "baz", x: 42, y: 13 }</pre>
+
+<p>Зауваж, що {{jsxref("Object.assign()")}} викликає <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Functions/set">сетери</a>, а оператор розпакування - ні.</p>
+
+<h4 id="Лише_для_ітерованих">Лише для ітерованих</h4>
+
+<p>Розпакування може бути застосоване лише для <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator">ітерованик</a> об’єктів:</p>
+
+<pre class="brush: js">var obj = {'key1': 'value1'};
+var array = [...obj]; // TypeError: obj is not iterable</pre>
+
+<p><strong>Зауваження:</strong> наразі (липень 2017) можна говорити про появу розпакування об’єктів у специфікації (дивись попередній підзаголовок). Але ще не до кінця зрозуміло як працюватиме вищенаведений приклад, адже ще немає конкретного рішення щодо цього у спецефікації. Тобто тепер ти можеш розпакувати об’єкт в об’єкт, але не зрозуміло, що станеться, якщо об’єкт розпаковувати у масив і навпаки, масив у об’єкт. Наприклад транспілятор <a href="https://babeljs.io/">babel</a> вертає наступні результати:</p>
+
+<pre class="brush: js">var obj = {'key1': 'value1'};
+var array = [...obj]; // запише в array пустий масив []
+
+var arr = [1,1,1];
+var obj1 = {...arr}; // запише в obj1 {'0': 1, '1': 1, '2': 1}</pre>
+
+<h4 id="Розпакування_великих_колекцій">Розпакування великих колекцій</h4>
+
+<p>Використовуючи розпакування зважай на можливість досягнення ліміту аргументів, встановленого у JavaScript рушії, адже оператор розпакування витягує <strong>всі</strong> елементи колекції в стек, скільки б їх не було. Дивись <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object)."><code>apply()</code></a> щоб дізнатись більше.</p>
+
+<h2 id="Оператор_решти">Оператор решти</h2>
+
+<p>Оператор решти виглядає точно так само як і оператор розпакування. До певної міри, він протилежний оператору розпакування - оператор розпакування розкладає колекцію на елементи, а оператор решти, натомість, складає кілька елементів у колекцію. Дивись <a href="/uk/docs/Web/JavaScript/Reference/Functions/%D1%80%D0%B5%D1%88%D1%82%D0%B0_%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D1%96%D0%B2">решта параметрів</a>.</p>
+
+<h2 id="Специфікація">Специфікація</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Стан</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Визначено в деяких секціях специфікацій: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Array Initializer</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Argument Lists</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Без змін.</td>
+  </tr>
+  <tr>
+   <td><a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a></td>
+   <td>Чернетка</td>
+   <td>Чернетка в 3 стадії</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Spread operation in array literals</td>
+   <td>{{CompatChrome("46")}}</td>
+   <td>{{ CompatGeckoDesktop("16") }}</td>
+   <td>{{CompatIE("Edge/10240")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Spread operation in function calls</td>
+   <td>{{CompatChrome("46")}}</td>
+   <td>{{ CompatGeckoDesktop("27") }}</td>
+   <td>{{CompatIE("Edge/10240")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Spread operation in destructuring</td>
+   <td>{{CompatChrome("49")}}</td>
+   <td>{{ CompatGeckoDesktop("34") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Spread operation in array literals</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("46")}}</td>
+   <td>{{ CompatGeckoMobile("16") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+   <td>{{CompatChrome("46")}}</td>
+  </tr>
+  <tr>
+   <td>Spread operation in function calls</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("46")}}</td>
+   <td>{{ CompatGeckoMobile("27") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+   <td>{{CompatChrome("46")}}</td>
+  </tr>
+  <tr>
+   <td>Spread operation in destructuring</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("34") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Functions/%D1%80%D0%B5%D1%88%D1%82%D0%B0_%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D1%96%D0%B2">Решта параметрів</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/оператори_порівняння/index.html b/files/uk/web/javascript/reference/operators/оператори_порівняння/index.html
new file mode 100644
index 0000000000..ea253b2291
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/оператори_порівняння/index.html
@@ -0,0 +1,244 @@
+---
+title: Оператори порівняння
+slug: Web/JavaScript/Reference/Operators/Оператори_порівняння
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>JavaScript має як строге порівняння, так і порівняння з перетворенням типів. Строге порівняння (<code>===</code>) є істинним лише в тому випадку, якщо операнди мають однаковий тип, а їхній зміст співпадає. Найчастіше вживане абстрактне порівняння (<code>==</code>) приводить операнди до спільного типу перед виконанням порівняння. Для абстрактних порівнянь (наприклад, <code>&lt;=</code>) операнди спочатку приводяться до простих типів, потім приводяться до спільного типу, а вже тоді порівнюються.</p>
+
+<p>Рядки порівнюються на основі стандартного лексикографічного упорядкування, використовуючи значення Unicode.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/expressions-comparisonoperators.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<p>Особливості порівнянь:</p>
+
+<ul>
+ <li>Два рядки строго рівні, якщо мають однакову послідовність символів, однакову довжину та однакові символи на відповідних позиціях.</li>
+ <li>Два числа строго рівні, якщо вони чисельно рівні (мають однакове числове значення). <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="NaN">NaN</a> не дорівнює нічому, в тому числі NaN. Додатні та від'ємні нулі дорівнюють один одному.</li>
+ <li>Два булеві операнди строго рівні, якщо обидва є <code>true</code>, або обидва є <code>false</code>.</li>
+ <li>Два окремі об'єкти ніколи не є рівними ні при строгому, ні при абстрактному порівнянні.</li>
+ <li>Вираз, що порівнює об'єкти, істинний лише тоді, коли операнди посилаються на один і той самий об'єкт.</li>
+ <li>Типи Null та Undefined строго рівні собі та абстрактно рівні один одному.</li>
+</ul>
+
+<h2 id="Оператори_рівності">Оператори рівності</h2>
+
+<h3 id="Рівність"><a name="Equality">Рівність (==)</a></h3>
+
+<p>Оператор рівності перетворює операнди, якщо вони <strong>не однакового типу</strong>, і після цього застосовує строге порівняння. Якщо <strong>обидва операнди є об'єктами</strong>, JavaScript порівнює внутрішні посилання, які є рівними, якщо операнди посилаються на один і той самий об'єкт у пам'яті.</p>
+
+<h4 id="Синтаксис">Синтаксис</h4>
+
+<pre class="syntaxbox">x == y
+</pre>
+
+<h4 id="Приклади">Приклади</h4>
+
+<pre class="brush: js">1    ==  1         // true
+'1'  ==  1         // true
+1    == '1'        // true
+0    == false      // true
+0    == null       // false
+var object1 = {'key': 'value'}, object2 = {'key': 'value'};
+object1.key == object2.key // true
+0    == undefined  // false
+null == undefined  // true
+</pre>
+
+<h3 id="Нерівність_!"><a name="Inequality">Нерівність (!=)</a></h3>
+
+<p>Оператор нерівності повертає <em>true</em>,  якщо операнди не є рівними. Якщо два операнда <strong>не належать до одного типу</strong>, JavaScript намагається привести операнди до відповідного типу для порівняння. Якщо <strong>обидва операнда є об'єктами</strong>, JavaScript порівнює внутрішні посилання, які є нерівними, якщо операнди посилаються на різні об'єкти у пам'яті.</p>
+
+<h4 id="Синтаксис_2">Синтаксис</h4>
+
+<pre class="syntaxbox">x != y</pre>
+
+<h4 id="Приклади_2">Приклади</h4>
+
+<pre class="brush: js">1 !=   2     // true
+1 !=  '1'    // false
+1 !=  "1"    // false
+1 !=  true   // false
+0 !=  false  // false
+</pre>
+
+<h3 id="Ідентичність_строга_рівність"><a name="Identity">Ідентичність / строга рівність (===)</a></h3>
+
+<p>Оператор ідентичності повертає true, якщо операнди строго рівні (див. вище) <strong>без приведення типів</strong>. </p>
+
+<h4 id="Синтаксис_3">Синтаксис</h4>
+
+<pre class="syntaxbox">x === y</pre>
+
+<h4 id="Приклади_3">Приклади</h4>
+
+<pre class="brush: js ">3 === 3   // true
+3 === '3' // false
+var object1 = {'key': 'value'}, object2 = {'key': 'value'};
+object1 === object2 //false</pre>
+
+<h3 id="Неідентичність_строга_нерівність_!"><a name="Nonidentity">Неідентичність / строга нерівність (!==)</a></h3>
+
+<p>Оператор неідентичності повертає true, якщо операнди <strong>не є рівними та/або не однакового типу</strong>.</p>
+
+<h4 id="Синтаксис_4">Синтаксис</h4>
+
+<pre class="syntaxbox">x !== y</pre>
+
+<h4 id="Приклади_4">Приклади</h4>
+
+<pre class="brush: js">3 !== '3' // true
+4 !== 3   // true
+</pre>
+
+<h2 id="Оператори_відношення">Оператори відношення</h2>
+
+<p>Кожен з цих операторів буде <a href="/uk/docs/Glossary/Type_coercion">примусово приведений</a> до простої величини перед порівнянням. Якщо обидва перетворюються на рядки, вони порівнюються з використанням лексикографічного порядку, інакше вони будуть перетворені на числа для порівняння. Порівняння із <code>NaN</code> завжди поверне <code>false</code>.</p>
+
+<h3 id="Більше_ніж_>"><a name="Greater_than_operator">Більше ніж (&gt;)</a></h3>
+
+<p>Оператор <em>більше ніж </em>повертає true, якщо значення лівого операнда більше за значення правого операнда.</p>
+
+<h4 id="Синтаксис_5">Синтаксис</h4>
+
+<pre class="syntaxbox">x &gt; y</pre>
+
+<h4 id="Приклади_5">Приклади</h4>
+
+<pre class="brush: js">4 &gt; 3 // true
+</pre>
+
+<h3 id="Більше_чи_дорівнює_>"><a name="Greater_than_or_equal_operator">Більше чи дорівнює (&gt;=)</a></h3>
+
+<p>Оператор <em>більше чи дорівнює</em> повертає true, якщо значення лівого операнда більше, або дорівнює значенню правого операнда.</p>
+
+<h4 id="Синтаксис_6">Синтаксис</h4>
+
+<pre class="syntaxbox"> x &gt;= y</pre>
+
+<h4 id="Приклади_6">Приклади</h4>
+
+<pre class="brush: js">4 &gt;= 3 // true
+3 &gt;= 3 // true
+</pre>
+
+<h3 id="Менше_ніж_&lt;"><a name="Less_than_operator">Менше ніж (&lt;)</a></h3>
+
+<p>Оператор <em>менше ніж</em> повертає true, якщо значення лівого операнда менше значення правого операнда.</p>
+
+<h4 id="Синтаксис_7">Синтаксис</h4>
+
+<pre class="syntaxbox"> x &lt; y</pre>
+
+<h4 id="Приклади_7">Приклади</h4>
+
+<pre class="brush: js">3 &lt; 4 // true
+</pre>
+
+<h3 id="Менше_чи_дорівнює_&lt;"><a id="Less_than_or_equal_operator" name="Less_than_or_equal_operator">Менше чи дорівнює (&lt;=)</a></h3>
+
+<p>Оператор <em>менше чи дорівнює</em> повертає true, якщо значення лівого операнда менше або дорівнює значенню правого операнда.</p>
+
+<h4 id="Синтаксис_8">Синтаксис</h4>
+
+<pre class="syntaxbox"> x &lt;= y</pre>
+
+<h4 id="Приклади_8">Приклади</h4>
+
+<pre class="brush: js">3 &lt;= 4 // true
+</pre>
+
+<h2 id="Застосування_операторів_порівняння">Застосування операторів порівняння</h2>
+
+<p>Стандартні оператори рівності (<code>==</code> та <code>!=</code>) використовують <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">алгоритм абстрактної рівності</a> для порівняння двох операндів. Якщо операнди належать до різних типів, алгоритм спробує привести їх до спільного типу перед порівнянням; наприклад, у виразі <code>5 == '5'</code>, рядок праворуч буде приведений до {{jsxref("Число","числа")}} перед здійсненням порівняння.</p>
+
+<p>Оператори строгої рівності (<code>===</code> та <code>!==</code>) використовують <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">алгоритм строгої рівності</a> та призначені для виконання перевірки рівності операндів одного типу. Якщо операнди належать до різних типів, результат завжди буде <code>false</code>, тому <code>5 !== '5'</code>.</p>
+
+<p>Використовуйте оператори строгого порівняння, якщо операнди мають належати до вказаного типу, як і їх значення, або, якщо конкретний тип операндів має значення. Інакше, використовуйте стандартні оператори рівності, які дозволяють перевіряти ідентичність двох операндів, навіть якщо вони не належать до одного типу.</p>
+
+<p>Коли в порівнянні застосовується перетворення типів (тобто, це не строге порівняння), JavaScript перетворює типи операндів {{jsxref ("String")}}, {{jsxref ("Число","Number")}}, {{jsxref ("Boolean" )}} або {{jsxref ("Object")}} наступним чином:</p>
+
+<ul>
+ <li>При порівнянні числа й рядка, рядок конвертується в числове значення. JavaScript намагається конвертувати число у рядковому літералі в значення типу <code>Number</code>. Спочатку математичне значення виводиться з рядкового літерала. Далі ця величина округлюється до найближчого значення типу <code>Number</code>.</li>
+ <li>Якщо один з операндів належить до типу <code>Boolean</code>, цей операнд конвертується у 1, якщо він дорівнює <code>true</code>, і у +0, якщо він дорівнює <code>false</code>.</li>
+ <li>Якщо об'єкт порівнюється з рядком або числом, JavaScript намагається повернути значення об'єкта за замовчуванням. Оператори намагаються перетворити об'єкти на просте значення, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">рядок</span></font> або <code>число</code>, використовуючи методи об'єктів <code>valueOf</code> та <code>toString</code>. Якщо спроба перетворення була невдалою, генерується помилка виконання.</li>
+ <li>Зауважте, що об'єкт перетворюється на просту величину тоді, й тільки тоді, коли порівнюється з простою величиною. Якщо обидва операнди є об'єктами, вони порівнюються як об'єкти, а тест на рівність істинний, тільки якщо вони обидва посилаються на один і той самий об'єкт.</li>
+</ul>
+
+<div class="note"><strong>Заувага:</strong> Рядкові об'єкти є об'єктами типу Object, а не String! Об'єкти типу String використовуються рідко, а отже, наведені нижче результати можуть бути несподіваними:</div>
+
+<pre class="brush:js">// true, оскільки обидва операнди мають тип String (є рядковими примітивами):
+'foo' === 'foo'
+
+var a = new String('foo');
+var b = new String('foo');
+
+// false, оскільки a та b мають тип Object і посилаються на різні об'єкти
+a == b
+
+// false, оскільки a та b мають тип Object і посилаються на різні об'єкти
+a === b
+
+// true, оскільки a та 'foo' мають різні типи, але об'єкт (а)
+// перетворюється на рядок 'foo' перед порівнянням
+a == 'foo'</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення. Реалізовано у JavaScript 1.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Додані оператори <code>===</code> та <code>!==</code> . Реалізовано у JavaScript 1.3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.8')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Дано визначення у декільках секціях специфікації: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Оператори відношення</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Оператори рівності</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-relational-operators')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Дано визначення у декільках секціях специфікації: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-relational-operators">Оператори відношення</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-equality-operators">Оператори рівності</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-relational-operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Дано визначення у декільках секціях специфікації: <a href="http://tc39.github.io/ecma262/#sec-relational-operators">Оператори відношення</a>, <a href="http://tc39.github.io/ecma262/#sec-equality-operators">Оператори рівності</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.comparison")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Object.is()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li><a href="/uk/docs/Web/JavaScript/Перевірка_на_рівність_та_однаковість">Перевірка на рівність та однаковість</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/оператори_присвоєння/index.html b/files/uk/web/javascript/reference/operators/оператори_присвоєння/index.html
new file mode 100644
index 0000000000..d69f9055d1
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/оператори_присвоєння/index.html
@@ -0,0 +1,418 @@
+---
+title: Оператори присвоєння
+slug: Web/JavaScript/Reference/Operators/Оператори_присвоєння
+tags:
+  - JavaScript
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators#Assignment_operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Оператор присвоєння</strong> присвоює своєму лівому операнду значення, на підставі значення правого операнду.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Огляд">Огляд</h2>
+
+<p>Базовим оператором присвоєння є оператор дорівнює (<code>=</code>), який присвоює значення свого правого операнда лівому операнду. Таким чином, <code>x = y</code> присвоює змінній <code>x</code> значення змінної <code>y</code>. Інші оператори присвоєння у своїй більшості є скороченнями для стандарних операцій, як це вказано у наступній таблиці з визначеннями та прикладами.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Назва</th>
+   <th>Оператор скороченого запису</th>
+   <th>Значення</th>
+  </tr>
+  <tr>
+   <td><a href="#Присвоєння">Присвоєння</a></td>
+   <td><code>x = y</code></td>
+   <td><code>x = y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Присвоєння_з_додаванням">Присвоєння з додаванням</a></td>
+   <td><code>x += y</code></td>
+   <td><code>x = x + y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Присвоєння_з_відніманням">Присвоєння з відніманням</a></td>
+   <td><code>x -= y</code></td>
+   <td><code>x = x - y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Присвоєння_з_множенням">Присвоєння з множенням</a></td>
+   <td><code>x *= y</code></td>
+   <td><code>x = x * y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Присвоєння_з_діленням">Присвоєння з діленням</a></td>
+   <td><code>x /= y</code></td>
+   <td><code>x = x / y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Присвоєння_остачі">Присвоєння остачі</a></td>
+   <td><code>x %= y</code></td>
+   <td><code>x = x % y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Присвоєння_з_піднесенням_до_степеня">Присвоєння з піднесенням до степеня</a></td>
+   <td><code>x **= y</code></td>
+   <td><code>x = x ** y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Присвоєння_з_лівим_зсувом">Присвоєння з лівим зсувом</a></td>
+   <td><code>x &lt;&lt;= y</code></td>
+   <td><code>x = x &lt;&lt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Присвоєння_з_правим_зсувом">Присвоєння з правим зсувом</a></td>
+   <td><code>x &gt;&gt;= y</code></td>
+   <td><code>x = x &gt;&gt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Присвоєння_з_беззнаковим_правим_зсувом">Присвоєння з беззнаковим правим зсувом</a></td>
+   <td><code>x &gt;&gt;&gt;= y</code></td>
+   <td><code>x = x &gt;&gt;&gt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Присвоєння_з_побітовим_І">Присвоєння з побітовим І</a></td>
+   <td><code>x &amp;= y</code></td>
+   <td><code>x = x &amp; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Присвоєння_з_виключним_побітовим_АБО">Присвоєння з виключним побітовим АБО</a></td>
+   <td><code>x ^= y</code></td>
+   <td><code>x = x ^ y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Присвоєння_з_побітовим_АБО">Присвоєння з побітовим АБО</a></td>
+   <td><code>x |= y</code></td>
+   <td><code>x = x | y</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Присвоєння"><a name="Assignment">Присвоєння</a></h2>
+
+<p>Простий оператор присвоєння використовується для присвоєння змінній значення. Оператор присвоєння обчислює значення, що присвоюється. Можна використовувати ланцюжок присвоюваннь, щоб присвоїти одне значення декільком змінним. Дивіться приклад нижче.</p>
+
+<h4 id="Синтаксис">Синтаксис</h4>
+
+<pre class="syntaxbox"><strong>Оператор:</strong> x = y
+</pre>
+
+<h4 id="Приклади">Приклади</h4>
+
+<pre class="brush: js">// Розглянемо такі змінні:
+//  x = 5
+//  y = 10
+//  z = 25
+
+x = y     // x дорівнює 10
+x = y = z // x, y та z усі дорівнюють 25
+</pre>
+
+<h3 id="Присвоєння_з_додаванням"><a name="Addition_assignment">Присвоєння з додаванням</a></h3>
+
+<p>Оператор присвоєння з додаванням <strong>додає</strong> значення правого операнду до змінної (лівого перанду) та записує у неї отриманий результат. Типи двох операндів визначають поведінку оператора. Таким чином, його результатом може стати або додавання або конкатенація. Для більш детального огляду дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор додавання", "#Addition", 1)}}.</p>
+
+<h4 id="Синтаксис_2">Синтаксис</h4>
+
+<pre class="syntaxbox"><strong>Оператор:</strong>  x += y
+<strong>Значення:</strong>  x  = x + y
+</pre>
+
+<h4 id="Приклади_2">Приклади</h4>
+
+<pre class="brush: js">// Розглянемо такі змінні:
+//  foo = 'foo'
+//  bar = 5
+//  baz = true
+
+
+// число + число -&gt; додавання
+bar += 2 // 7
+
+// булеве значення + число -&gt; додавання
+baz += 1 // 2
+
+// булеве значення + булеве значення -&gt; додавання
+baz += false // 1
+
+// число + рядок -&gt; конкатенація
+bar += 'foo' // "5foo"
+
+// рядок + булеве значення -&gt; конкатенація
+foo += false // "foofalse"
+
+// рядок + рядок -&gt; конкатенація
+foo += 'bar' // "foobar"
+</pre>
+
+<h3 id="Присвоєння_з_відніманням"><a name="Subtraction_assignment">Присвоєння з відніманням</a></h3>
+
+<p>Оператор присвоєння з відніманням <strong>віднімає</strong> значення правого операнду від змінної (лівого перанду) та записує у неї отриманий результат. Дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор віднімання", "#Subtraction", 1)}} для більш детального огляду.</p>
+
+<h4 id="Синтаксис_3">Синтаксис</h4>
+
+<pre class="syntaxbox"><strong>Оператор: </strong> x -= y
+<strong>Значення:</strong>  x  = x - y
+</pre>
+
+<h4 id="Приклади_3">Приклади</h4>
+
+<pre class="brush: js">// Розглянемо такі змінні:
+//  bar = 5
+
+bar -= 2     // 3
+bar -= 'foo' // NaN
+</pre>
+
+<h3 id="Присвоєння_з_множенням"><a name="Multiplication_assignment">Присвоєння з множенням</a></h3>
+
+<p>Оператор присвоєння з множенням <strong>помножує</strong> змінну (лівий операнд) на значення правого операнду та записує отриманий результат у змінну. Дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор множення", "#Multiplication", 1)}} для більш детального огляду.</p>
+
+<h4 id="Синтаксис_4">Синтаксис</h4>
+
+<pre class="syntaxbox"><strong>Оператор:</strong>  x *= y
+<strong>Значення:</strong>  x  = x * y
+</pre>
+
+<h4 id="Приклади_4">Приклади</h4>
+
+<pre class="brush: js">// Розглянемо такі змінні:
+//  bar = 5
+
+bar *= 2     // 10
+bar *= 'foo' // NaN
+</pre>
+
+<h3 id="Присвоєння_з_діленням"><a name="Division_assignment">Присвоєння з діленням</a></h3>
+
+<p>Оператор присвоєння з діленням <strong>ділить</strong> змінну (лівий операнд) на значення правого операнду та записує отриманий результат у змінну. Дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор ділення", "#Division", 1)}} для більш детального огляду.</p>
+
+<h4 id="Синтаксис_5">Синтаксис</h4>
+
+<pre class="syntaxbox"><strong>Оператор: </strong> x /= y
+<strong>Значення:</strong>  x  = x / y
+</pre>
+
+<h4 id="Приклади_5">Приклади</h4>
+
+<pre class="brush: js">// Розглянемо такі змінні:
+//  bar = 5
+
+bar /= 2     // 2.5
+bar /= 'foo' // NaN
+bar /= 0     // Infinity
+</pre>
+
+<h3 id="Присвоєння_остачі"><a name="Remainder_assignment">Присвоєння остачі</a></h3>
+
+<p>Оператор присвоєння остачі <strong>ділить</strong> змінну на значення правого операнду та присвоює <strong>остачу</strong> змінній. Дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор остачі", "#Remainder", 1)}} для більш детального огляду.</p>
+
+<h4 id="Синтаксис_6">Синтаксис</h4>
+
+<pre class="syntaxbox"><strong>Оператор:</strong>  x %= y
+<strong>Значення:</strong>  x  = x % y
+</pre>
+
+<h4 id="Приклади_6">Приклади</h4>
+
+<pre class="brush: js">// Розглянемо такі змінні:
+//  bar = 5
+
+bar %= 2     // 1
+bar %= 'foo' // NaN
+bar %= 0     // NaN
+</pre>
+
+<h3 id="Присвоєння_з_піднесенням_до_степеня"><a id="Exponentiation_assignment" name="Exponentiation_assignment">Присвоєння з піднесенням до степеня</a></h3>
+
+<p>Оператор присвоєння з піднесенням до степеня обчислює результат піднесення першого операнду до <strong>показника степеня</strong> другого операнду. Дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор піднесення до степеня", "#Exponentiation", 1)}} для більш детального огляду.</p>
+
+<h4 id="Синтаксис_7">Синтаксис</h4>
+
+<pre class="syntaxbox"><strong>Оператор: </strong> x **= y
+<strong>Значення:</strong>  x  = x ** y
+</pre>
+
+<h4 id="Приклади_7">Приклади</h4>
+
+<pre class="brush: js">// Розглянемо такі змінні:
+//  bar = 5
+
+bar **= 2     // 25
+bar **= 'foo' // NaN</pre>
+
+<h3 id="Присвоєння_з_лівим_зсувом"><a name="Left_shift_assignment">Присвоєння з лівим зсувом</a></h3>
+
+<p>Оператор присвоєння з лівим зсувом виконує зсув першого операнду на вказану кількість бітів ліворуч та присвоює результат у змінну. Дивіться {{jsxref("Operators/Bitwise_Operators", "оператор лівого зсуву", "#Left_shift", 1)}} для більш детального огляду.</p>
+
+<h4 id="Синтаксис_8">Синтаксис</h4>
+
+<pre class="syntaxbox"><strong>Оператор: </strong> x &lt;&lt;= y
+<strong>Значення:</strong>  x   = x &lt;&lt; y
+</pre>
+
+<h4 id="Приклади_8">Приклади</h4>
+
+<pre class="brush: js">var bar = 5; //  (00000000000000000000000000000101)
+bar &lt;&lt;= 2; // 20 (00000000000000000000000000010100)
+</pre>
+
+<h3 id="Присвоєння_з_правим_зсувом"><a name="Right_shift_assignment">Присвоєння з правим зсувом</a></h3>
+
+<p>Оператор присвоєння з правим зсувом виконує зсув першого операнду на вказану кількість бітів праворуч та присвоює результат у змінну. Дивіться {{jsxref("Operators/Bitwise_Operators", "оператор правого зсуву", "#Right_shift", 1)}} для більш детального огляду.</p>
+
+<h4 id="Синтаксис_9">Синтаксис</h4>
+
+<pre class="syntaxbox"><strong>Оператор: </strong> x &gt;&gt;= y
+<strong>Значення:</strong>  x   = x &gt;&gt; y
+</pre>
+
+<h4 id="Приклади_9">Приклади</h4>
+
+<pre class="brush: js">var bar = 5; //   (00000000000000000000000000000101)
+bar &gt;&gt;= 2;   // 1 (00000000000000000000000000000001)
+
+var bar -5; //    (-00000000000000000000000000000101)
+bar &gt;&gt;= 2;  // -2 (-00000000000000000000000000000010)
+</pre>
+
+<h3 id="Присвоєння_з_беззнаковим_правим_зсувом"><a name="Unsigned_right_shift_assignment">Присвоєння з беззнаковим правим зсувом</a></h3>
+
+<p>Оператор присвоєння з беззнаковим правим зсувом виконує зсув першого операнду на вказану кількість бітів праворуч та присвоює результат змінній. Дивіться {{jsxref("Operators/Bitwise_Operators", " оператор беззнакового правого зсуву", "#Unsigned_right_shift", 1)}} для більш детального огляду.</p>
+
+<h4 id="Синтаксис_10">Синтаксис</h4>
+
+<pre class="syntaxbox"><strong>Оператор: </strong> x &gt;&gt;&gt;= y
+<strong>Значення:</strong>  x    = x &gt;&gt;&gt; y
+</pre>
+
+<h4 id="Приклади_10">Приклади</h4>
+
+<pre class="brush: js">var bar = 5; //   (00000000000000000000000000000101)
+bar &gt;&gt;&gt;= 2;  // 1 (00000000000000000000000000000001)
+
+var bar = -5; // (-00000000000000000000000000000101)
+bar &gt;&gt;&gt;= 2; // 1073741822 (00111111111111111111111111111110)</pre>
+
+<h3 id="Присвоєння_з_побітовим_І"><a name="Bitwise_AND_assignment">Присвоєння з побітовим І</a></h3>
+
+<p>Оператор присвоєння з побітовим І використовує двійкове представлення обох операндів, виконує над ними операцію побітового І та присвоює результат змінній. Дивіться {{jsxref("Operators/Bitwise_Operators", "оператор побітового І", "#Bitwise_AND", 1)}} для більш детального огляду.</p>
+
+<h4 id="Синтаксис_11">Синтаксис</h4>
+
+<pre class="syntaxbox"><strong>Оператор:</strong>  x &amp;= y
+<strong>Значення:</strong>  x  = x &amp; y
+</pre>
+
+<h4 id="Приклади_11">Приклади</h4>
+
+<pre class="brush: js">var bar = 5;
+// 5:     00000000000000000000000000000101
+// 2:     00000000000000000000000000000010
+bar &amp;= 2; // 0
+</pre>
+
+<h3 id="Присвоєння_з_виключним_побітовим_АБО"><a name="Bitwise_XOR_assignment">Присвоєння з виключним побітовим АБО</a></h3>
+
+<p>Оператор присвоєння з виключним побітовим АБО використовує двійкове представлення обох операндів, виконує над ними операцію виключного побітового АБО (XOR) та присвоює результат змінній. Дивіться {{jsxref("Operators/Bitwise_Operators", "оператор виключного побітового АБО", "#Bitwise_XOR", 1)}} для більш детального огляду.</p>
+
+<h4 id="Синтаксис_12">Синтаксис</h4>
+
+<pre class="syntaxbox"><strong>Оператор: </strong> x ^= y
+<strong>Значення:</strong>  x  = x ^ y
+</pre>
+
+<h4 id="Приклади_12">Приклади</h4>
+
+<pre class="brush: js">var bar = 5;
+bar ^= 2; // 7
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+// -----------------------------------
+// 7: 00000000000000000000000000000111
+</pre>
+
+<h3 id="Присвоєння_з_побітовим_АБО"><a name="Bitwise_OR_assignment">Присвоєння з побітовим АБО</a></h3>
+
+<p>Оператор присвоєння з побітовим АБО використовує двійкове представлення обох операндів, виконує над ними операцію побітового АБО та присвоює результат змінній. Дивіться {{jsxref("Operators/Bitwise_Operators", "оператор побітового АБО", "#Bitwise_OR", 1)}} для більш детального огляду.</p>
+
+<h4 id="Синтаксис_13">Синтаксис</h4>
+
+<pre class="syntaxbox"><strong>Оператор: </strong> x |= y
+<strong>Значення:</strong>  x  = x | y
+</pre>
+
+<h4 id="Приклади_13">Приклади</h4>
+
+<pre class="brush: js">var bar = 5;
+bar |= 2; // 7
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+// -----------------------------------
+// 7: 00000000000000000000000000000111
+</pre>
+
+<h2 id="Приклади_14">Приклади</h2>
+
+<h3 id="Лівий_операнд_з_іншим_оператором_присвоєння">Лівий операнд з іншим оператором присвоєння</h3>
+
+<p>У незвичних ситуаціях оператор присвоєння (наприклад, <code> x += y</code>) не є ідентичним виразу, який він означає (в даному випадку <code>x = x + y</code>). Коли лівий операнд оператора присвоєння сам містить оператор присвоєння, лівий операнд обчислюється лише один раз. Наприклад:</p>
+
+<pre class="brush: js">a[i++] += 5         // i обчислюється лише один раз
+a[i++] = a[i++] + 5 // i обчислюється двічі
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-assignment-operators', 'Assignment operators')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.13', 'Assignment operators')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.13', 'Assignment operators')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.operators.assignment")}}</p>
+
+<div id="compat-mobile"></div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">Арифметичні оператори</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/operators/ініціалізація_об’єктів/index.html b/files/uk/web/javascript/reference/operators/ініціалізація_об’єктів/index.html
new file mode 100644
index 0000000000..00d1497164
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/ініціалізація_об’єктів/index.html
@@ -0,0 +1,296 @@
+---
+title: Ініціалізатор об’єкта
+slug: Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів
+tags:
+  - ECMAScript 2015
+  - JSON
+  - JavaScript
+  - Об'єкт
+  - властивості
+  - літерал
+  - методи
+  - мутація
+  - обчислені
+translation_of: Web/JavaScript/Reference/Operators/Object_initializer
+---
+<div>{{JsSidebar("Operators")}}</div>
+
+<p>Об'єкти можна ініціалізувати через <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>new Object()</code></a>, <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a></code>, або за допомогою <em>літеральної</em> нотації (нотації <em>ініціалізатора</em>). Ініціалізатор об'єкта - це список з нуля або більше розділених комою пар імен властивостей та асоційованих з ними значень об'єкта, записаних у фігурних дужках (<code>{}</code>).</p>
+
+<p>{{EmbedInteractiveExample("pages/js/expressions-objectinitializer.html", "taller")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js notranslate">let o = {}
+let o = {a: 'няв', b: 42, c: {}}
+
+let a = 'няв', b = 42, c = {}
+let o = {a: a, b: b, c: c}
+
+let o = {
+  <var>property: function </var>([<var>parameters</var>]) {},
+  get <var>property</var>() {},
+  set <var>property</var>(<var>value</var>) {}
+};
+</pre>
+
+<h3 id="Нові_позначення_у_ECMAScript_2015">Нові позначення у ECMAScript 2015</h3>
+
+<p>Будь ласка, перевірте підтримку цих позначень у таблиці сумісностей. У тих середовищах, де вони не підтримуються, вони призведуть до синтаксичних помилок.</p>
+
+<pre class="brush: js notranslate">// Скорочений запис імен властивостей (ES2015)
+let a = 'привіт', b = 42, c = {};
+let o = {a, b, c}
+
+// Скорочений запис імен методів (ES2015)
+let o = {
+  <var>property</var>([<var>parameters</var>]) {}
+}
+
+// Обчислювані імена властивостей (ES2015)
+let prop = 'foo'
+let o = {
+  [prop]: 'як',
+  ['b' + 'ar']: 'справи'
+}</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Ініціалізатор об'єкта - це вираз, який описує ініціалізацію {{jsxref("Object","об'єкта")}}. Об'єкт складається з <em>властивостей</em>, які описують цей об'єкт. Значення властивостей об'єкта можуть містити або {{Glossary("primitive","прості")}} типи даних, або інші об'єкти.</p>
+
+<h3 id="Літеральна_нотація_обєкта_та_JSON">Літеральна нотація об'єкта та JSON</h3>
+
+<p>Літеральна нотація об'єкта - це не те саме, що запис об'єктів JavaScript (<strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation, <a href="/uk/docs/Glossary/JSON">JSON</a>). Хоча вони схожі, між ними є кілька відмінностей:</p>
+
+<ul>
+ <li>JSON дозволяє визначення властивості <em>тільки</em> у форматі <code>"property": value</code>. Ім'я властивості має бути записане у подвійних лапках, а визначення не може бути скороченим.</li>
+ <li>У JSON значення можуть бути тільки рядками, числами, масивами, <code>true</code>, <code>false</code>, <code>null</code> або іншими об'єктами (JSON).</li>
+ <li>Функція (дивіться "Визначення методів") не може бути присвоєна як значення у JSON.</li>
+ <li>Об'єкти типу {{jsxref("Date")}} перетворяться на рядок після виклику {{jsxref("JSON.parse()")}}.</li>
+ <li>{{jsxref("JSON.parse()")}} відхилить обчислювані імена властивостей, буде викинута помилка.</li>
+</ul>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Створення_обєктів">Створення об'єктів</h3>
+
+<p>Порожній об'єкт без властивостей може бути створений так:</p>
+
+<pre class="brush: js notranslate">let object = {}</pre>
+
+<p>Однак, перевагою <em>літералу</em> або <em>ініціалізатора</em> об'єкта є те, що ви можете швидко створити об'єкт з властивостями всередині фігурних дужок. Ви просто позначаєте список пар <code>key: value</code>, розділених комами.</p>
+
+<p>Наступний код створює об'єкт з трьома властивостями, його ключами є <code>"foo"</code>, <code>"age"</code> та <code>"baz"</code>. Значеннями цих ключів є рядок <code>"bar"</code>, число <code>42</code>, а третя властивість має інший об'єкт в якості свого значення.</p>
+
+<pre class="brush: js notranslate">let object = {
+  foo: 'bar',
+  age: 42,
+  baz: {myProp: 12}
+}</pre>
+
+<h3 id="Доступ_до_властивостей">Доступ до властивостей</h3>
+
+<p>Коли ви створили об'єкт, ви можете захотіти прочитати чи змінити його. До властивостей об'єкта можна звертатись, використовуючи крапкову нотацію або дужкову нотацію. Читайте <a href="/uk/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Доступ до властивостей</a>, щоб дізнатись більше.</p>
+
+<pre class="brush: js notranslate">object.foo // "bar"
+object['age'] // 42
+
+object.foo = 'baz'
+</pre>
+
+<h3 id="Визначення_властивостей">Визначення властивостей</h3>
+
+<p>Ми вже дізнались, як позначати властивості за допомогою синтаксису ініціалізатора. Часто у коді є змінні, які ви б хотіли використати в об'єкті. Ви побачите код на зразок такого:</p>
+
+<pre class="brush: js notranslate">let a = 'foo',
+    b = 42,
+    c = {};
+
+let o = {
+  a: a,
+  b: b,
+  c: c
+}</pre>
+
+<p>У ECMAScript 2015 є коротше позначення, яке робить те саме:</p>
+
+<pre class="brush: js notranslate">let a = 'foo',
+    b = 42,
+    c = {};
+
+// Скорочений запис імен властивостей (ES2015)
+let o = {a, b, c}
+
+// Іншими словами,
+console.log((o.a === {a}.a)) // true
+</pre>
+
+<h4 id="Дублювання_імен_властивостей">Дублювання імен властивостей</h4>
+
+<p>Якщо використовуються однакові імена властивостей, друга властивість перепише першу.</p>
+
+<pre class="brush: js notranslate">var a = {x: 1, x: 2};
+console.log(a); // {x: 2}
+</pre>
+
+<p>У строгому режимі ECMAScript 5 дублювання імен властивостей вважалося помилкою {{jsxref("SyntaxError")}}. З появою обчислюваних імен властивостей, що робило дублювання можливим під час виконання, це обмеження було прибране з ECMAScript 2015.</p>
+
+<pre class="brush: js notranslate">function haveES2015DuplicatePropertySemantics() {
+  'use strict';
+  try {
+    ({prop: 1, prop: 2});
+
+    // Помилка не викидається, дублікати дозволені у строгому режимі
+    return true;
+  } catch(e) {
+    // Помилка викидається, дублікати заборонені у строгому режимі
+    return false;
+  }
+}</pre>
+
+<h3 id="Визначення_методів">Визначення методів</h3>
+
+<p>Властивість об'єкта може також посилатись на <a href="/uk/docs/Web/JavaScript/Reference/Functions">функцію</a> або <a href="/uk/docs/Web/JavaScript/Reference/Functions/get">гетер</a> чи <a href="/uk/docs/Web/JavaScript/Reference/Functions/set">сетер</a>.</p>
+
+<pre class="brush: js notranslate">let o = {
+  <var>property: function </var>([<var>parameters</var>]) {},
+  get <var>property</var>() {},
+  set <var>property</var>(<var>value</var>) {}
+}</pre>
+
+<p>У ECMAScript 2015 доступне скорочене позначення, тому ключове слово "<code>function</code>" більше не є обов'язковим.</p>
+
+<pre class="brush: js notranslate">// Скорочений запис імен методів (ES2015)
+let o = {
+  <var>property</var>([<var>parameters</var>]) {},
+}</pre>
+
+<p>У ECMAScript 2015 є можливість стисло визначати властивості, значеннями яких є функції-генератори:</p>
+
+<pre class="brush: js notranslate">let o = {
+  *<var>generator</var>() {
+    ...........
+  }
+};</pre>
+
+<p>Що є еквівалентним цьому позначенню в стилі ES5 (але зауважте, що у ECMAScript 5 немає генераторів):</p>
+
+<pre class="brush: js notranslate">let o = {
+  generator<var>: function* </var>() {
+    ...........
+  }
+}</pre>
+
+<p>Більше інформації та прикладів щодо методів дивіться у статті <a href="/uk/docs/Web/JavaScript/Reference/Functions/Method_definitions">визначення методів</a>.</p>
+
+<h3 id="Обчислювані_імена_властивостей">Обчислювані імена властивостей</h3>
+
+<p>Починаючи з ECMAScript 2015, синтаксис об'єктного ініціалізатора також підтримує обчислювані імена властивостей. Це дозволяє розташувати вираз у квадратних дужках <code>[]</code>, і він буде обчислений як ім'я властивості. Цей синтаксис є аналогічним дужковій нотації у <a href="/uk/docs/Web/JavaScript/Reference/Operators/Property_Accessors">доступі до властивостей</a>, який ви вже могли використовувати, щоб читати та встановлювати властивості. Тепер ви можете використовувати такий самий синтаксис і для об'єктних літералів:</p>
+
+<pre class="brush: js notranslate">// Обчислювані імена властивостей (ES2015)
+let i = 0
+let a = {
+  ['foo' + ++i]: i,
+  ['foo' + ++i]: i,
+  ['foo' + ++i]: i
+}
+
+console.log(a.foo1) // 1
+console.log(a.foo2) // 2
+console.log(a.foo3) // 3
+
+let param = 'size'
+let config = {
+  [param]: 12,
+  ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4
+}
+
+console.log(config) // {size: 12, mobileSize: 4}</pre>
+
+<h3 id="Розкладені_властивості">Розкладені властивості</h3>
+
+<p>Пропозиція <a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a> (стадія 4) додає <a href="/uk/docs/Web/JavaScript/Reference/Operators/Spread_syntax">розкладені</a> властивості до об'єктних літералів. Ця функціональність копіює особисті перелічувані властивості з наданого об'єкта у новий об'єкт.</p>
+
+<p>Дрібне клонування (не включає <code>prototype</code>) чи злиття об'єктів тепер можливе з використанням синтаксису, коротшого, ніж {{jsxref("Object.assign()")}}.</p>
+
+<pre class="brush: js notranslate">let obj1 = { foo: 'bar', x: 42 }
+let obj2 = { foo: 'baz', y: 13 }
+
+let clonedObj = { ...obj1 }
+// Object { foo: "bar", x: 42 }
+
+let mergedObj = { ...obj1, ...obj2 }
+// Object { foo: "baz", x: 42, y: 13 }</pre>
+
+<p>Зауважте, що {{jsxref("Object.assign()")}} запускає <a href="/uk/docs/Web/JavaScript/Reference/Functions/set">сетери</a>, а оператор розкладу ні!</p>
+
+<h3 id="Мутація_прототипу">Мутація прототипу</h3>
+
+<p>Визначення властивості виду <code>__proto__: value</code> чи <code>"__proto__": value</code> не створює властивість з іменем <code>__proto__</code>. Замість цього, якщо надане значення є об'єктом чи <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>, воно змінює <code>[[Prototype]]</code> створеного об'єкта на це значення. (Якщо значення не є об'єктом чи null, об'єкт не змінюється.)</p>
+
+<pre class="brush: js notranslate">let obj1 = {};
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+
+let obj2 = {__proto__: null};
+assert(Object.getPrototypeOf(obj2) === null);
+
+let protoObj = {};
+let obj3 = {'__proto__': protoObj};
+assert(Object.getPrototypeOf(obj3) === protoObj);
+
+let obj4 = {__proto__: 'не об\'єкт чи null'};
+assert(Object.getPrototypeOf(obj4) === Object.prototype);
+assert(!obj4.hasOwnProperty('__proto__'));
+</pre>
+
+<p>У об'єктному літералі дозволена лише одна мутація: декілька мутацій прототипу є синтаксичною помилкою.</p>
+
+<p>Визначення властивостей, які не використовують нотацію з двокрапкою, не є мутаціями прототипу: вони є визначеннями властивостей, які поводяться ідентично до схожих визначень, що використовують будь-яке інше ім'я.</p>
+
+<pre class="brush: js notranslate">let __proto__ = 'змінна';
+
+let obj1 = {__proto__};
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+assert(obj1.hasOwnProperty('__proto__'));
+assert(obj1.__proto__ === 'змінна');
+
+let obj2 = {__proto__() { return 'привіт'; }};
+assert(obj2.__proto__() === 'привіт');
+
+let obj3 = {['__prot' + 'o__']: 17};
+assert(obj3.__proto__ === 17);
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.operators.object_initializer")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Доступ до властивостей</a></li>
+ <li><code><a href="/uk/docs/Web/JavaScript/Reference/Functions/get">get</a></code> / <code><a href="/uk/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Functions/Method_definitions">Визначення методів</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar">Лексична граматика</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/statements/async_function/index.html b/files/uk/web/javascript/reference/statements/async_function/index.html
new file mode 100644
index 0000000000..da4ac5f24a
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/async_function/index.html
@@ -0,0 +1,272 @@
+---
+title: async function
+slug: Web/JavaScript/Reference/Statements/async_function
+tags:
+  - JavaScript
+  - async
+  - Функція
+  - приклад
+translation_of: Web/JavaScript/Reference/Statements/async_function
+---
+<div>
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><span class="seoSummary">Оголошення <code><strong>async function</strong></code> визначає <strong>асинхронну функцію</strong> — функцію, яка є об'єктом {{jsxref("Global_Objects/AsyncFunction","AsyncFunction")}}.</span> Асинхронні функції мають окремий від решти функцій порядок виконання, через <a href="/uk/docs/Web/JavaScript/EventLoop">цикл подій</a>, вертаючи неявний {{jsxref("Promise","проміс")}} в якості результату. Але синтаксис та структура коду, який використовує асинхронні функції, виглядають, як стандартні синхронні функції.</p>
+
+<div class="noinclude">
+<p>Ви також можете визначити асинхронну функцію за допомогою {{jsxref("Operators/async_function", "виразу async function", "", 1)}}.</p>
+</div>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-async.html", "taller")}}</div>
+
+<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">async function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Ім'я функції.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Ім'я аргумента, що передається у функцію.</dd>
+</dl>
+
+<dl>
+ <dt><code>statements</code></dt>
+ <dd>Інструкції, що складають тіло функції.</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Об'єкт <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>, який буде вирішений зі значенням, поверненим асинхронною функцією, або відхилений з винятком, не перехопленим всередині асинхронної функції.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Асинхронна функція може містити вираз {{jsxref("Operators/await", "await")}}, який призупиняє виконання функції, щоб дочекатись на вирішення об'єкта <code>Promise</code>, після чого відновлює виконання асинхронної функції та повертає вирішене значення.<br>
+ <br>
+ <strong>Ключове слово <code>await</code> працює тільки всередині асинхронних функцій.</strong> Якщо ви використаєте його поза межами тіла асинхронної функції, то отримаєте помилку <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code>.</p>
+
+<p>Поки асинхронна функція призупинена, функція, що її викликала, продовжує виконання (отримавши неявний проміс, повернений асинхронною функцією).</p>
+
+<div class="note">
+<p>Метою <code>async</code>/<code>await</code> є спрощення синхронного використання промісів, а також виконання певних дій над групою промісів. Як проміси схожі на структуровані зворотні виклики, так використання <code>async</code>/<code>await</code> схоже на поєднання <a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators">генераторів</a> та промісів.</p>
+</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Асинхронні_функції_та_порядок_виконання">Асинхронні функції та порядок виконання</h3>
+
+<pre class="brush: js">function resolveAfter2Seconds() {
+  console.log("починається повільний проміс")
+  return new Promise(resolve =&gt; {
+    setTimeout(function() {
+      resolve("повільний")
+      console.log("повільний проміс завершено")
+    }, 2000);
+  });
+}
+
+function resolveAfter1Second() {
+  console.log("починається швидкий проміс")
+  return new Promise(resolve =&gt; {
+    setTimeout(function() {
+      resolve("швидкий")
+      console.log("швидкий проміс завершено")
+    }, 1000);
+  });
+}
+
+async function sequentialStart() {
+  console.log('==ПОСЛІДОВНИЙ СТАРТ==')
+
+  // 1. Виконання доходить сюди майже миттєво
+  const slow = await resolveAfter2Seconds()
+  console.log(slow) // 2. це виконується 2 секунди після 1.
+
+  const fast = await resolveAfter1Second()
+  console.log(fast) // 3. це виконується 3 секунди після 1.
+}
+
+async function concurrentStart() {
+  console.log('==КОНКУРЕНТНИЙ СТАРТ з await==')
+  const slow = resolveAfter2Seconds() // запускає таймер негайно
+  const fast = resolveAfter1Second() // запускає таймер негайно
+
+  // 1. Виконання доходить сюди майже миттєво
+  console.log(await slow) // 2. це виконується 2 секунди після 1.
+  console.log(await fast) // 3. це виконується 2 секунди після 1., одразу після 2., оскільки швидкий вже вирішений
+}
+
+function concurrentPromise() {
+  console.log('==КОНКУРЕНТНИЙ СТАРТ з Promise.all==')
+  return Promise.all([resolveAfter2Seconds(), resolveAfter1Second()]).then((messages) =&gt; {
+    console.log(messages[0]) // повільний
+    console.log(messages[1]) // швидкий
+  });
+}
+
+async function parallel() {
+  console.log('==ПАРАЛЕЛЬНИЙ з await Promise.all==')
+
+  // Починає 2 "роботи" паралельно та чекає, поки обидві не завершаться
+  await Promise.all([
+      (async()=&gt;console.log(await resolveAfter2Seconds()))(),
+      (async()=&gt;console.log(await resolveAfter1Second()))()
+  ])
+}
+
+// Ця функція не обробляє помилки. Дивіться застереження нижче!
+function parallelPromise() {
+  console.log('==ПАРАЛЕЛЬНИЙ з Promise.then==')
+  resolveAfter2Seconds().then((message)=&gt;console.log(message))
+  resolveAfter1Second().then((message)=&gt;console.log(message))
+}
+
+sequentialStart() // через 2 секунди виводить "повільний", далі через ще 1 секунду "швидкий"
+
+// чекає, поки попередній завершиться
+setTimeout(concurrentStart, 4000) // через 2 секунди виводить "повільний", а потім "швидкий"
+
+// знову чекає
+setTimeout(concurrentPromise, 7000) // такий самий, як і concurrentStart
+
+// знову чекає
+setTimeout(parallel, 10000) // справді паралельний: через 1 секунду виводить "швидкий", потім ще через 1 секунду "повільний"
+
+// знову чекає
+setTimeout(parallelPromise, 13000) // такий самий, як і parallel
+</pre>
+
+<h4 id="await_та_паралелізм"><code>await</code> та паралелізм</h4>
+
+<p>У <code>sequentialStart</code> виконання відкладається на 2 секунди для першого <code>await</code>, а потім ще на секунду для другого <code>await</code>. Другий таймер не створюється, поки перший не завершиться, отже, код завершує виконання через 3 секунди.</p>
+
+<p>У <code>concurrentStart</code> обидва таймери створюються і потім очікуються у <code>await</code>. Таймери виконуються конкурентно, це означає, що код завершує виконання через 2, а не через 3 секунди, тобто, як найповільніший таймер.<br>
+ Однак, виклики <code>await</code> все одно запускаються один за одним, це означає, що другий <code>await</code> чекатиме, поки перший не завершиться. У цьому випадку результат швидшого таймера обробляється після повільнішого.</p>
+
+<p>Якщо ви бажаєте виконувати дві або більше робіт паралельно, ви маєте використовувати <code>await Promise.all([job1(), job2()])</code>, як це показано у прикладі <code>parallel</code>.</p>
+
+<div class="warning">
+<h4 id="asyncawait_проти_Promisethen_та_обробка_помилок"><code>async</code>/<code>await</code> проти Promise#then та обробка помилок</h4>
+
+<p>Більшість асинхронних функцій також можна написати як звичайні функції, що використовують проміси. Однак, асинхронні функції менш каверзні, коли доходить до обробки помилок.</p>
+
+<p>І <code>concurrentStart</code>, і <code>concurrentPromise</code> функціонально еквівалентні:</p>
+
+<ul>
+ <li>У <code>concurrentStart</code>, якщо будь-який з викликів з <code>await</code>-ом зазнає невдачі, виняток буде автоматично перехоплений, виконання асинхронної функції перерветься, а помилка спливе наверх через неявний проміс, що повертається.</li>
+ <li>Щоб те саме сталось у випадку з Promise, функція має потурбуватись щодо повернення об'єкту <code>Promise</code>, який захопить завершення функції. У <code>concurrentPromise</code> це означає повернення проміса з <code>Promise.all([]).then()</code> через <code>return</code>. До речі, попередня версія цього прикладу забула це зробити!</li>
+</ul>
+
+<p>Однак, асинхронні функції все ж можуть ковтати помилки.<br>
+ Візьміть для прикладу асинхронну функцію <code>parallel</code>. Якби вона не мала <code>await</code> (чи <code>return</code>) для повернення результату виклику <code>Promise.all([])</code>, будь-яка помилка не спливала б.<br>
+ В той час, як приклад <code>parallelPromise</code> виглядає простішим, він взагалі не обробляє помилки! Для цього знадобилося б схожа конструкція <code>return </code><code>Promise.all([])</code>.</p>
+</div>
+
+<h3 id="Заміна_ланцюжка_промісів_на_асинхронну_функцію">Заміна ланцюжка промісів на асинхронну функцію</h3>
+
+<p>API, який вертає {{jsxref("Promise")}}, створить ланцюжок промісів, і це розбиває функцію на багато частин. Розглянемо наступний код:</p>
+
+<pre class="brush: js">function getProcessedData(url) {
+  return downloadData(url) // вертає проміс
+    .catch(e =&gt; {
+      return downloadFallbackData(url) // вертає проміс
+    })
+    .then(v =&gt; {
+      return processDataInWorker(v) // вертає проміс
+    })
+}
+</pre>
+
+<p>його можна переписати єдиною асинхронною функцією наступним чином:</p>
+
+<pre class="brush: js">async function getProcessedData(url) {
+  let v
+  try {
+    v = await downloadData(url)
+  } catch(e) {
+    v = await downloadFallbackData(url)
+  }
+  return processDataInWorker(v)
+}
+</pre>
+
+<p>У наведеному вище прикладі немає оператора <code>await</code> після ключового слова <code>return</code>, тому що повернене значення <code>async function</code> неявно загортається у {{jsxref("Promise.resolve")}}.</p>
+
+<div class="blockIndicator note">
+<h4 id="return_await_promiseValue_проти_return_promiseValue"><code>return await promiseValue;</code> проти <code>return promiseValue;</code></h4>
+
+<p>Неявне загортання повернених значень у {{jsxref("Promise.resolve")}} не означає, що <code>return await promiseValue;</code> є функціонально еквівалентним <code>return promiseValue;</code></p>
+
+<p>Розглянемо наступну переробку наведеного вище коду, яка вертає null, якщо <code>processDataInWorker</code> відхиляється з помилкою:</p>
+
+<pre class="brush: js">async function getProcessedData(url) {
+  let v;
+  try {
+    v = await downloadData(url)
+  } catch(e) {
+    v = await downloadFallbackData(url)
+  }
+  try {
+    return await processDataInWorker(v) // Зауважте `return await` у порівнянні з `return`
+  } catch (e) {
+    return null
+  }
+}
+</pre>
+
+<p>Варіант <code>return processDataInWorker(v);</code> спричинив би відхилення об'єкта {{jsxref("Promise")}}, поверненого функцією, замість вирішення його зі значенням <code>null</code>, якщо <code>processDataInWorker(v)</code> відхилено.</p>
+
+<p>Це висвітлює тонку різницю між <code>return foo;</code> та <code>return await foo;</code> — <code>return foo;</code> негайно вертає <code>foo</code> і ніколи не викидає помилку, навіть якщо <code>foo</code> є промісом, який відхиляється. <code>return await foo;</code> <em>чекатиме</em> на вирішення чи відхилення <code>foo</code>, якщо це проміс, і викидає помилку <strong>до повернення</strong>, якщо його відхилено.</p>
+</div>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Початкове визначення у ES2017.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES8', '#sec-async-function-definitions', 'async function')}}</td>
+   <td>{{Spec2('ES8')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.statements.async_function")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Operators/async_function", "вираз асинхронної функції")}}</li>
+ <li>Об'єкт {{jsxref("AsyncFunction")}}</li>
+ <li>{{jsxref("Operators/await", "await")}}</li>
+ <li><a href="http://innolitics.com/10x/javascript-decorators-for-promise-returning-functions/">"Decorating Async Javascript Functions" на "innolitics.com"</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/statements/block/index.html b/files/uk/web/javascript/reference/statements/block/index.html
new file mode 100644
index 0000000000..4a5dd619aa
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/block/index.html
@@ -0,0 +1,132 @@
+---
+title: Блок
+slug: Web/JavaScript/Reference/Statements/block
+tags:
+  - JavaScript
+  - Довідка
+translation_of: Web/JavaScript/Reference/Statements/block
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>Блок</strong> (або <strong>складена інструкція</strong> у інших мовах) використовується, щоб об'єднати нуль або більше інструкцій. Блок позначається парою фігурних дужок і може мати необов'язкову {{jsxref("Statements/label", "мітку")}}:</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-block.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Блок">Блок</h3>
+
+<pre class="syntaxbox">{
+  <em>StatementList</em>
+}
+</pre>
+
+<h3 id="Блок_з_міткою">Блок з міткою</h3>
+
+<pre class="syntaxbox"><em>LabelIdentifier</em>: {
+  <em>StatementList</em>
+}
+</pre>
+
+<dl>
+ <dt><code>StatementList</code></dt>
+ <dd>Інструкції, згруповані всередині блоку.</dd>
+ <dt><code>LabelIdentifier</code></dt>
+ <dd>Необов'язкова {{jsxref("Statements/label", "мітка")}} для візуальної ідентифікації або як вказівник для оператора {{jsxref("Statements/break", "break")}}.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Блок часто називають <strong>складеною інструкцією</strong> у інших мовах. Він дозволяє використовувати декілька інструкцій там, де JavaScript очікує лише одну. Об'єднання інструкцій у блоки є звичайною практикою у JavaScript. Протилежна поведінка можлива завдяки <a href="/uk/docs/Web/JavaScript/Reference/Statements/Empty">порожньому оператору</a>, де ви не надаєте інструкцію, хоча вона вимагається.</p>
+
+<p>Блоки часто використовуються у поєднанні з операторами <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/if...else">if</a></code> та <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for">for</a></code>.</p>
+
+<h3 id="Правила_області_видимості_блоку">Правила області видимості блоку</h3>
+
+<h4 id="З_var_та_оголошенням_функцій">З <code>var</code> та оголошенням функцій</h4>
+
+<p>Змінні, оголошені оператором <code>var</code> або створені <a href="/uk/docs/Web/JavaScript/Reference/Statements/function">оголошенням функцій</a>, <strong>не мають</strong> блочної області видимості. Змінні, створені всередині блоку, додаються у область видимості функції або скрипта, що його містить, і ефект від присвоєння їм значення виходить за межі блоку. Іншими словами, блок не створює область видимості. Для прикладу:</p>
+
+<pre class="brush: js example-bad">var x = 1;
+{
+  var x = 2;
+}
+console.log(x); // виведе 2
+</pre>
+
+<p>Цей код виведе 2, тому що інструкція <code>var x</code> всередині блоку знаходиться в тій самій області видимості, що й інструкція <code>var x</code> перед блоком.</p>
+
+<h4 id="З_let_та_const">З <code>let</code> та <code>const</code></h4>
+
+<p>А ось ідентифікатори, оголошені операторами {{jsxref("Statements/let", "let")}} та {{jsxref("Statements/const", "const")}} <strong>мають </strong>блочну область видимості:</p>
+
+<pre class="brush: js">let x = 1;
+{
+  let x = 2;
+}
+console.log(x); // виведе 1</pre>
+
+<p>Інструкція <code>x = 2</code> обмежена областю видимості блоку, у якому записана.</p>
+
+<p>Те саме працює для <code>const</code>:</p>
+
+<pre class="brush: js">const c = 1;
+{
+  const c = 2;
+}
+console.log(c); // виведе 1 і не викине SyntaxError...</pre>
+
+<p>Зауважте, що <code>const c = 2</code> у області видимості блоку <em>не викине</em> <code>SyntaxError: Identifier 'c' has already been declared</code>, тому що оголошення є унікальним всередині блоку.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-block', 'Block statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-block', 'Block statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.1', 'Block statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.1', 'Block statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.1', 'Block statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.statements.block")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Statements/while", "while")}}</li>
+ <li>{{jsxref("Statements/if...else", "if...else")}}</li>
+ <li>{{jsxref("Statements/let", "let")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/statements/break/index.html b/files/uk/web/javascript/reference/statements/break/index.html
new file mode 100644
index 0000000000..700d495bd6
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/break/index.html
@@ -0,0 +1,151 @@
+---
+title: break
+slug: Web/JavaScript/Reference/Statements/break
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Statements/break
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Оператор <strong>break</strong> перериває виконання поточного циклу, перемикача {{jsxref("Statements/switch", "switch")}} або {{jsxref("Statements/label", "поміченого")}} блоку і передає контроль до наступної за перерваним блоком інструкції.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-break.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>break [<em>label</em>];</code></pre>
+
+<dl>
+ <dt><code>label</code> {{optional_inline}}</dt>
+ <dd>Ідентифікатор, асоційований з міткою конструкції. Якщо конструкція не є циклом або перемикачем {{jsxref("Statements/switch", "switch")}}, цей параметр є обов'язковим.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Оператор <code>break</code> має необов'язкову мітку, яка дозволяє програмі переривати виконання поміченої конструкції. Оператор <code>break</code> має бути розташований всередині конструкції, на яку посилається. Вона може бути будь-яким {{jsxref("Statements/block", "блоком")}} інструкцій; це необов'язково має бути цикл.</p>
+
+<p>Оператор <code>break</code>, з міткою або без неї, не може використовуватися всередині тіла фукнції, що вкладена у цикл, перемикач або помічений блок, який має перервати оператор <code>break</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Наступна фукнція містить оператор <code>break</code>, що перериває цикл {{jsxref("Statements/while", "while")}}, коли <code>i</code> дорівнює 3, а після цього поветає значення 3 * <code>x</code>.</p>
+
+<pre class="brush:js;highlight:[6];">function testBreak(x) {
+  var i = 0;
+
+  while (i &lt; 6) {
+    if (i == 3) {
+      break;
+    }
+    i += 1;
+  }
+
+  return i * x;
+}</pre>
+
+<p>Наступний код використовує оператори <code>break</code> з поміченими блоками. Оператор <code>break</code> має знаходитися всередині будь-якої мітки, на яку посилається. Зауважте, що <code>inner_block</code> вкладений у <code>outer_block</code>.</p>
+
+<pre class="brush:js;highlight:[1,2,4];">outer_block: {
+  inner_block: {
+    console.log('1');
+    break outer_block; // перериває обидва inner_block та outer_block
+    console.log(':-('); // пропускається
+  }
+  console.log('2'); // пропускається
+}
+</pre>
+
+<p>Наступний код також використовує оператори <code>break</code> з поміченими блоками, але генерує помилку SyntaxError, тому що оператор <code>break</code> знаходиться всередині <code>block_1</code>, але посилається на <code>block_2</code>. Оператор <code>break</code> завжди має знаходитися всередині будь-якої мітки, на яку посилається.</p>
+
+<pre class="brush:js;highlight:[1,3,6];">block_1: {
+  console.log('1');
+  break block_2; // SyntaxError: label not found
+}
+
+block_2: {
+  console.log('2');
+}
+</pre>
+
+<p>Помилки SyntaxError також генеруються у наступних прикладах, які використовують оператори <code>break</code> всередині функцій, що вкладені у цикл чи помічений блок, що їх мають перервати оператори <code>break</code>.</p>
+
+<pre class="brush:js;highlight:[1,3,6];">function testBreak(x) {
+  var i = 0;
+
+  while (i &lt; 6) {
+    if (i == 3) {
+      (function() {
+        break;
+      })();
+    }
+    i += 1;
+  }
+
+return i * x;
+}
+
+testBreak(1); // SyntaxError: Illegal break statement
+</pre>
+
+<pre class="brush:js;highlight:[1,3,6];">block_1: {
+  console.log('1');
+  ( function() {
+    break block_1; // SyntaxError: Undefined label 'block_1'
+  })();
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення. Версія без мітки.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Додано версію з міткою.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.8', 'Break statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-break-statement', 'Break statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-break-statement', 'Break statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.statements.break")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Statements/continue", "continue")}}</li>
+ <li>{{jsxref("Statements/label", "label")}}</li>
+ <li>{{jsxref("Statements/switch", "switch")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/statements/class/index.html b/files/uk/web/javascript/reference/statements/class/index.html
new file mode 100644
index 0000000000..1350459ce8
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/class/index.html
@@ -0,0 +1,119 @@
+---
+title: class
+slug: Web/JavaScript/Reference/Statements/class
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Довідка
+  - Класи
+  - оголошення
+translation_of: Web/JavaScript/Reference/Statements/class
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>Оголошення класу</strong> створює новий клас із заданим ім'ям, на основі прототипного наслідування.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-class.html")}}</div>
+
+
+
+<div class="noinclude">
+<p>Ви також можете визначити клас, використовуючи {{jsxref("Operators/class", "вираз класу", "", 1)}}. Але, на відміну від виразу класу, оголошення класу не дозволяє повторне оголошення існуючого класу і викине помилку при спробі це зробити. </p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">class <em>name</em> [extends] {
+  // тіло класу
+}
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Тіло класу у оголошенні класу виконується у <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">строгому режимі</a>. Властивість constructor є необов'язковою.</p>
+
+<p>Оголошення класу не {{Glossary("Hoisting", "виринають")}} (на відміну від <a href="/uk/docs/Web/JavaScript/Reference/Statements/function">оголошення функцій</a>).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Просте_оголошення_класу">Просте оголошення класу</h3>
+
+<p>У наступному прикладі ми спочатку визначаємо клас на ім'я Polygon, далі розширюємо його, створюючи клас на ім'я Square. Зауважте, що ключове слово super() може використовуватись лише у конструкторах і має викликатись раніше, ніж використовується ключове слово <code>this</code>.</p>
+
+<pre class="brush: js">class Polygon {
+  constructor(height, width) {
+    this.name = 'Polygon';
+    this.height = height;
+    this.width = width;
+  }
+}
+
+class Square extends Polygon {
+  constructor(length) {
+    super(length, length);
+    this.name = 'Square';
+  }
+}</pre>
+
+<div class="warning">
+<h3 id="Спроба_оголосити_клас_двічі">Спроба оголосити клас двічі</h3>
+
+<p>Повторне оголошення класу викидає помилку типу.</p>
+
+<pre class="brush: js">class Foo {};
+class Foo {}; // Uncaught SyntaxError: Identifier 'Foo' has already been declared
+</pre>
+
+<p>Така сама помилка викидається, коли клас був визначений до використання виразу класу.</p>
+
+<pre class="brush: js">var Foo = class {};
+class Foo {}; // Uncaught TypeError: Identifier 'Foo' has already been declared
+
+</pre>
+</div>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2017')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.statements.class")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/function">оголошення <code>функції</code></a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/class">вираз <code>класу</code></a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Classes">Класи</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/statements/const/index.html b/files/uk/web/javascript/reference/statements/const/index.html
new file mode 100644
index 0000000000..18e898e6cb
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/const/index.html
@@ -0,0 +1,232 @@
+---
+title: const
+slug: Web/JavaScript/Reference/Statements/const
+tags:
+  - константа
+translation_of: Web/JavaScript/Reference/Statements/const
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>Оголошення <code>const</code> </strong> створює посилання на значення, доступне лише для читання. Що <strong>не</strong> гарантує незмінність значення, на котре вказує посилання, а лише той факт, що не можна повторно присвоїти будь-яке значення змінній з відповідним ім'ям.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">const <em>назваКонстантноїЗмінної1 = <em>значення1 [</em>, назваКонстантноїЗмінної<em>2</em> = <em>значення2 [</em>, ... [</em>, <em>назваКонстантноїЗмінноїN</em> = <em><em>значення</em>N]]]</em>;</pre>
+
+<dl>
+ <dt><code>значенняN</code></dt>
+ <dd>Назва константи, будь-який прийнятний {{Glossary("identifier")}} (ідентифікатор).</dd>
+ <dt><code>значенняN</code></dt>
+ <dd>Значення константи; будь-яки дозволений вираз (<a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions">expression</a>).</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>This declaration creates a constant that can be either global or local to the function in which it is declared. An initializer for a constant is required; that is, you must specify its value in the same statement in which it's declared (which makes sense, given that it can't be changed later).</p>
+
+<p>Constants are block-scoped, much like variables defined using the <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code> statement. The value of a constant cannot change through re-assignment, and it can't be redeclared.</p>
+
+<p>All the considerations about the "<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let">temporal dead zone</a>" that apply to <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, also apply to <code>const</code>.</p>
+
+<p>A constant cannot share its name with a function or a variable in the same scope.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The following example demonstrates how constants behave. Try this in your browser console.</p>
+
+<pre class="brush:js">// NOTE: Constants can be declared with uppercase or lowercase, but a common
+// convention is to use all-uppercase letters.
+
+// define MY_FAV as a constant and give it the value 7
+const MY_FAV = 7;
+
+// this will throw an error in Firefox and Chrome (but does not fail in Safari)
+MY_FAV = 20;
+
+// will print 7
+console.log("my favorite number is: " + MY_FAV);
+
+// trying to redeclare a constant throws an error
+const MY_FAV = 20;
+
+// the name MY_FAV is reserved for constant above, so this will also fail
+var MY_FAV = 20;
+
+// this throws an error also
+let MY_FAV = 20;
+
+// it's important to note the nature of block scoping
+if (MY_FAV === 7) {
+    // this is fine and creates a block scoped MY_FAV variable
+    // (works equally well with let to declare a block scoped non const variable)
+    const MY_FAV = 20;
+
+    // MY_FAV is now 20
+    console.log("my favorite number is " + MY_FAV);
+
+    // this gets hoisted into the global context and throws an error
+    var MY_FAV = 20;
+}
+
+// MY_FAV is still 7
+console.log("my favorite number is " + MY_FAV);
+
+// Assigning to A const variable is a syntax error
+const A = 1; A = 2;
+
+// throws an error, missing initializer in const declaration
+const FOO;
+
+// const also works on objects
+const MY_OBJECT = {"key": "value"};
+
+// Overwriting the object behaves as above (throws an error in Firefox and Chrome but does not fail in Safari)
+MY_OBJECT = {"OTHER_KEY": "value"};
+
+// However, object keys are not protected,
+// so the following statement is executed without problem
+MY_OBJECT.key = "otherValue"; // Use Object.freeze() to make object immutable
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(21)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(36)}}</td>
+   <td>11</td>
+   <td>12</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>Reassignment fails</td>
+   <td>{{CompatChrome(20)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(13)}}</td>
+   <td>11</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Allowed in sloppy mode</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Reassignment fails</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Allowed in sloppy mode</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatChrome(49.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<p>In earlier versions of Firefox &amp; Chrome and as of Safari 5.1.7 and Opera 12.00, if you define a variable with <code>const</code>, you can still change its value later. It is not supported in Internet Explorer 6-10, but is included in Internet Explorer 11.</p>
+
+<h3 id="Firefox-specific_notes">Firefox-specific notes</h3>
+
+<p>The <code>const</code> declaration was implemented in Firefox long before <code>const</code> appeared in the ECMAScript 2015 (ES6) specification. For <code>const</code> ES6 compliance see {{bug(950547)}} and {{bug(611388)}}.</p>
+
+<ul>
+ <li>Prior to SpiderMonkey 46 {{geckoRelease(46)}}, a {{jsxref("TypeError")}} was thrown on redeclaration instead of a {{jsxref("SyntaxError")}} ({{bug(1198833)}}).</li>
+ <li>Starting with SpiderMonkey 36 {{geckoRelease("36")}}:
+  <ul>
+   <li><code>{const a=1};a</code> now throws a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError" title="The ReferenceError object represents an error when a non-existent variable is referenced."><code>ReferenceError</code></a> and does not return <code>1</code> anymore due to block-scoping.</li>
+   <li><code>const a;</code> now throws a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError" title="The SyntaxError object represents an error when trying to interpret syntactically invalid code."><code>SyntaxError</code></a> ("missing = in const declaration<code>"</code>): An initializer is required.</li>
+   <li><code>const a = 1; a = 2;</code> now also throws a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError" title="The SyntaxError object represents an error when trying to interpret syntactically invalid code."><code>SyntaxError</code></a> ("invalid assignment to const a").</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var"><code>var</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Constants">Constants in the JavaScript Guide</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/statements/continue/index.html b/files/uk/web/javascript/reference/statements/continue/index.html
new file mode 100644
index 0000000000..59adc0173a
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/continue/index.html
@@ -0,0 +1,164 @@
+---
+title: continue
+slug: Web/JavaScript/Reference/Statements/continue
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Statements/continue
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Оператор <strong>continue</strong> перериває виконання поточної ітерації у поточному або поміченому циклі, і продовжує виконання циклу з наступної ітерації.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-continue.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">continue [<em>label</em>];</pre>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Ідентифікатор, асоційований з міткою циклу.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>На відміну від оператора {{jsxref("Statements/break", "break")}}, <code>continue</code> не перериває виконання циклу повністю: замість цього,</p>
+
+<ul>
+ <li>У циклі {{jsxref("Statements/while", "while")}} він повертається до умови.</li>
+</ul>
+
+<ul>
+ <li>У циклі {{jsxref("Statements/for", "for")}} він переходить до оновлення виразу.</li>
+</ul>
+
+<p>Оператор <code>continue</code> може містити необов'язкову мітку, яка дозволяє програмі перестрибнути до наступної ітерації поміченого циклу замість поточного циклу. В цьому випадку оператор <code>continue</code> має бути розташований всередині цього поміченого циклу.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_continue_з_while">Використання continue з while</h3>
+
+<p>Наступний приклад демонструє цикл {{jsxref("Statements/while", "while")}}, що містить оператор <code>continue</code>, який виконується, коли значення <code>i</code> дорівнює 3. Таким чином, <code>n</code> приймає значення 1, 3, 7 та 12.</p>
+
+<pre class="brush: js">var i = 0;
+var n = 0;
+
+while (i &lt; 5) {
+  i++;
+
+  if (i === 3) {
+    continue;
+  }
+
+  n += i;
+}
+</pre>
+
+<h3 id="Використання_continue_з_міткою">Використання continue з міткою</h3>
+
+<p>У наступному прикладі цикл, помічений як <code>checkiandj</code>, містить цикл, помічений як <code>checkj</code>. Якщо зустрічається <code>continue</code>, програма продовжує виконання з початку циклу <code>checkj</code>. Кожен раз, як зустрічається <code>continue</code>, <code>checkj</code> починає нову ітерацію, поки його умова не поверне false. Коли повертається false, виконується решта циклу <code>checkiandj</code>.</p>
+
+<p>Якби оператор <code>continue</code> мав мітку <code>checkiandj</code>, програма би продовжувалась з початку циклу <code>checkiandj</code>.</p>
+
+<p>Дивіться також статтю {{jsxref("Statements/label", "Мітка")}}.</p>
+
+<pre class="brush: js">var i = 0;
+var j = 8;
+
+checkiandj: while (i &lt; 4) {
+  console.log('i: ' + i);
+  i += 1;
+
+  checkj: while (j &gt; 4) {
+    console.log('j: ' + j);
+    j -= 1;
+
+    if ((j % 2) == 0)
+      continue checkj;
+    console.log(j + ' непарне число.');
+  }
+  console.log('i = ' + i);
+  console.log('j = ' + j);
+}
+</pre>
+
+<p>Виведе:</p>
+
+<pre class="brush: js">i: 0
+
+// початок checkj
+j: 8
+7 непарне число.
+j: 7
+j: 6
+5 непарне число.
+j: 5
+// кінець checkj
+
+i = 1
+j = 4
+
+i: 1
+i = 2
+j = 4
+
+i: 2
+i = 3
+j = 4
+
+i: 3
+i = 4
+j = 4
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення. Версія без мітки.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Додана версія з міткою.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.7', 'Continue statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-continue-statement', 'Continue statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-continue-statement', 'Continue statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.statements.continue")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Statements/break", "break")}}</li>
+ <li>{{jsxref("Statements/label", "label")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/statements/debugger/index.html b/files/uk/web/javascript/reference/statements/debugger/index.html
new file mode 100644
index 0000000000..12277d50e5
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/debugger/index.html
@@ -0,0 +1,78 @@
+---
+title: debugger
+slug: Web/JavaScript/Reference/Statements/debugger
+tags:
+  - JavaScript
+  - Оператор
+translation_of: Web/JavaScript/Reference/Statements/debugger
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>Оператор</strong> <strong>debugger</strong> запускає будь-яку доступну налагоджувальну функціональність, наприклад, встановлення точки переривання. Якщо налагоджувальна функціональність недоступна, цей оператор не матиме ефекту.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>debugger;</code></pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Наступний приклад демонструє код, у який був вставлений оператор debugger, щоб запустити налагоджувач (якщо він є), коли викликається функція.</p>
+
+<pre class="brush:js">function potentiallyBuggyCode() {
+    debugger;
+    // потенційно помилковий код, через який треба пройти, дослідити і т.д.
+}</pre>
+
+<p>Коли викликається налагоджувач, виконання призупиняється на операторі debugger. Це як точка переривання у коді скрипта.</p>
+
+<p><a href="https://mdn.mozillademos.org/files/6963/Screen Shot 2014-02-07 at 9.14.35 AM.png"><img alt="Paused at a debugger statement." src="https://mdn.mozillademos.org/files/6963/Screen%20Shot%202014-02-07%20at%209.14.35%20AM.png" style="height: 371px; width: 700px;"></a></p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-debugger-statement', 'Debugger statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-debugger-statement', 'Debugger statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.15', 'Debugger statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Початкове визначення</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-7.5.3', 'Debugger statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-7.4.3', 'Debugger statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Лише згаданий як зарезервоване слово.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.statements.debugger")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Debugging_JavaScript">Налагодження JavaScript</a></li>
+ <li><a href="/uk/docs/Tools/Debugger">The Debugger in the Firefox Developer Tools</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/statements/default/index.html b/files/uk/web/javascript/reference/statements/default/index.html
new file mode 100644
index 0000000000..648a2ec139
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/default/index.html
@@ -0,0 +1,117 @@
+---
+title: default
+slug: Web/JavaScript/Reference/Statements/default
+translation_of: Web/JavaScript/Reference/Statements/switch
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Ключове слово <strong>default</strong> може використовуватись у двох ситуаціях у<strong> </strong>JavaScript: у конструкції {{jsxref("Statements/switch", "switch")}} або з оператором {{jsxref("Statements/export", "export")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-default.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>У конструкції {{jsxref("Statements/switch", "switch")}}:</p>
+
+<pre class="syntaxbox">switch (expression) {
+  case value1:
+    //Інструкції, що виконуються, коли значення expression дорівнює value1
+    [break;]
+  default:
+    //Інструкції, що виконуються, коли жодне значення не дорівнює значенню expression
+    [break;]
+}</pre>
+
+<p>З оператором {{jsxref("Statements/export", "export")}}:</p>
+
+<pre class="syntaxbox">export default <em>nameN</em> </pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Більш детально дивіться на сторінках</p>
+
+<ul>
+ <li>конструкції {{jsxref("Statements/switch", "switch")}} та</li>
+ <li>оператора {{jsxref("Statements/export", "export")}}.</li>
+</ul>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_default_у_конструкціях_switch">Використання <code>default</code> у конструкціях <code>switch</code></h3>
+
+<p>У наступному прикладі, якщо <code>expr</code> оцінюється як "Апельсини" або "Яблука", програма зайде або у блок case "Апельсини", або у "Яблука" та виконає відповідну інструкцію. Ключове слово <code>default</code> допоможе у будь-якому іншому випадку та виконає пов'язану інструкцію.</p>
+
+<pre class="brush: js">switch (expr) {
+  case 'Апельсини':
+    console.log('Апельсини коштують $0.59 за кілограм.');
+    break;
+  case 'Яблука':
+    console.log('Яблука коштують $0.32 за кілограм.');
+    break;
+  default:
+    console.log('На жаль, в нас закінчились ' + expr + '.');
+}</pre>
+
+<h3 id="Використання_default_з_export">Використання <code>default</code> з <code>export</code></h3>
+
+<p>Якщо ви хочете експортувати єдине значення, або вам потрібне запасне значення модуля, можна використати default у export:</p>
+
+<pre class="brush: js">// module "my-module.js"
+let cube = function cube(x) {
+  return x * x * x;
+};
+export default cube;</pre>
+
+<p>Тоді у іншому скрипті буде прямий імпорт експорту за замовчуванням:</p>
+
+<pre class="brush: js">// module "another-module.js"
+import cube from 'my-module';  //default export gave us the liberty to say import cube, instead of import cube from 'my-module'
+console.log(cube(3)); // 27
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.statements.default")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Statements/export", "export")}}</li>
+ <li>{{jsxref("Statements/switch", "switch")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/statements/do...while/index.html b/files/uk/web/javascript/reference/statements/do...while/index.html
new file mode 100644
index 0000000000..676ce0a4ca
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/do...while/index.html
@@ -0,0 +1,101 @@
+---
+title: do...while
+slug: Web/JavaScript/Reference/Statements/do...while
+tags:
+  - JavaScript
+  - Цикл
+translation_of: Web/JavaScript/Reference/Statements/do...while
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Оператор <strong><code>do...while</code></strong> створює цикл, який виконує вказану інструкцію, доки перевірочна умова не буде оцінена як false. Умова оцінюється після виконання інструкції, в результаті вказана інструкція виконується принаймні один раз.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-dowhile.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">do
+   <em>statement</em>
+while (<em>condition</em>);
+</pre>
+
+<dl>
+ <dt><code>statement</code></dt>
+ <dd>Інструкція, яка виконується принаймні один раз, і виконується повторно кожен раз, коли умова оцінюється як true. Для виконання кількох інструкцій, використовуйте {{jsxref("Statements/block", "блок")}} (<code>{ ... }</code>), щоб згрупувати ці інструкції.</dd>
+</dl>
+
+<dl>
+ <dt><code>condition</code></dt>
+ <dd>Вираз, який оцінюється після кожного проходу циклу. Якщо <code>condition</code> оцінюється як true, <code>statement</code> виконується повторно. Коли <code>condition</code> оцінюється як false, контроль переходить до наступної після <code>do...while</code> інструкції.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Приклад</h2>
+
+<h3 id="Використання_do...while">Використання <code>do...while</code></h3>
+
+<p>У наступному прикладі цикл <code>do...while</code> виконується принаймні один раз, і продовжує виконуватись, доки <code>i</code> не перестане бути менше 5.</p>
+
+<h3 id="HTML-зміст">HTML-зміст</h3>
+
+<pre class="brush: html">&lt;div id="example"&gt;&lt;/div&gt;</pre>
+
+<h3 id="JavaScript-зміст">JavaScript-зміст</h3>
+
+<pre class="brush: js">var result = '';
+var i = 0;
+do {
+   i += 1;
+   result += i + ' ';
+} while (i &gt; 0 &amp;&amp; i &lt; 5); // Хоча i == 0, цикл виконається, оскільки починається без перевірки
+document.getElementById('example').innerHTML = result;</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Examples') }}</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.6.1', 'do-while statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-do-while-statement', 'do-while statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Кінцева крапка з комою ; тепер необов'язкова.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-do-while-statement', 'do-while statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.statements.do_while")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Statements/while", "while")}}</li>
+ <li>{{jsxref("Statements/for", "for")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/statements/empty/index.html b/files/uk/web/javascript/reference/statements/empty/index.html
new file mode 100644
index 0000000000..cdb9945396
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/empty/index.html
@@ -0,0 +1,105 @@
+---
+title: Порожній оператор
+slug: Web/JavaScript/Reference/Statements/Empty
+tags:
+  - JavaScript
+  - Оператор
+translation_of: Web/JavaScript/Reference/Statements/Empty
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>Порожній оператор</strong> використовується, щоб не надавати інструкції там, де синтаксис JavaScript їх очікує.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-empty.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">;
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Порожній оператор - це крапка з комою (;), вона позначає, що жодної інструкції не буде виконано, навіть якщо синтаксис JavaScript її вимагає. Протилежна поведінка, коли ви бажаєте виконати декілька інструкцій, але JavaScript дозволяє лише одну, можлива за допомогою <a href="/uk/docs/Web/JavaScript/Reference/Statements/block">блоку</a>; він об'єднує декілька інструкцій у одну.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Порожній оператор іноді використовується у циклах. Дивіться наступний приклад з порожнім тілом циклу:</p>
+
+<pre class="brush: js">var arr = [1, 2, 3];
+
+// Присвоїти всім елементам масиву значення 0
+for (i = 0; i &lt; arr.length; arr[i++] = 0) /* порожній оператор */ ;
+
+console.log(arr)
+// [0, 0, 0]
+</pre>
+
+<p><strong>Заувага</strong>: Гарною ідеєю є коментувати навмисне використання порожнього оператора, оскільки його буває важко відрізнити від звичайної крапки з комою. У наступному прикладі його використання, мабуть, не є навмисним:</p>
+
+<pre class="brush: js">if (condition);       // Обережно, цей "if" нічого не робить!
+   killTheUniverse()  // Тому це ніколи не виконається!!!
+</pre>
+
+<p>Інший приклад: Конструкція <a href="/uk/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a> без фігурних дужок (<code>{}</code>). Якщо <code>three</code> дорівнює <code>true</code>, то нічого не відбудеться, <code>four</code> не грає ролі, і, таким чином, функція <code>launchRocket()</code> у випадку <code>else</code> не буде виконана.</p>
+
+<pre class="brush: js">if (one)
+  doOne();
+else if (two)
+  doTwo();
+else if (three)
+  ; // тут нічого
+else if (four)
+  doFour();
+else
+  launchRocket();</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-empty-statement', 'Empty statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-empty-statement', 'Empty statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.3', 'Empty statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.3', 'Empty statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.3', 'Empty statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.statements.empty")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Statements/block", "Блок")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/statements/export/index.html b/files/uk/web/javascript/reference/statements/export/index.html
new file mode 100644
index 0000000000..ef946fa4e4
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/export/index.html
@@ -0,0 +1,205 @@
+---
+title: export
+slug: Web/JavaScript/Reference/Statements/export
+translation_of: Web/JavaScript/Reference/Statements/export
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><span class="seoSummary">Вираз <strong><code>export</code></strong> використовується для створення модулів у Javascript для експортування функцій, об'єктів, або примітивних значень з модуля щоб їх можна було використовувати в інших програмах за допомогою виразу {{jsxref("Statements/import", "import")}}.</span></p>
+
+<p>Експортовані модулі знаходяться в {{jsxref("Strict_mode","strict mode")}} незалежно від того чи ви оголошуєте їх як такі чи ні. Вираз експорт не може бути використаним в вбудованих скріптах (embedded scripts).</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<p>Існує три види експортів</p>
+
+<ol>
+ <li>Іменовані експорти (Нуль або більше експортів в модулі)</li>
+ <li>Дефолтний експорт (Один на модуль)</li>
+ <li>Гібридні експорти</li>
+</ol>
+
+<pre class="syntaxbox">// Експортування індивідуальних властивостей
+export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>; // також var, const
+export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>; // також var, const
+export function functionName(){...}
+export class ClassName {...}
+
+// Список експортів
+export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> };
+
+// Перейменування експортів
+export { <var>variable1</var> as <var>name1</var>, <var>variable2</var> as <var>name2</var>, …, <var>nameN</var> };
+
+// Експортування деструктивних значень з перейменуванням
+export const { <var>name1</var>, <var>name2: bar</var> } = o;
+
+// Дефолтні експорти
+export default <em>expression</em>;
+export default function (…) { … } // також class, function*
+export default function name1(…) { … } // також class, function*
+export { <var>name1</var> as default, … };
+
+//  Агрегаціямодулів
+export * from …; // не встановлює дефолтний експорт
+export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> } from …;
+export { <var>import1</var> as <var>name1</var>, <var>import2</var> as <var>name2</var>, …, <var>nameN</var> } from …;
+export { default } from …;</pre>
+
+<dl>
+ <dt><code><var>nameN</var></code></dt>
+ <dd>Змінна яку потрібно експортувати (щоб імпортувати за допомогою {{jsxref("Statements/import", "import")}} в іншому скрипті).</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Існує два типи експортів, <strong>іменовані</strong> і <strong>дефолтні</strong>. Ви можете мати багато іменованих в модулі, але тільки один дефолтний експорт. Кожен тип має відповідність у синтаксі наведеному вище:</p>
+
+<p>Іменовані експорти:</p>
+
+<pre class="brush: js">// експорт функціоналу оголошеного раніше
+export { myFunction, myVariable };
+
+// експортуємо індивідуальний функціонал (можу бути var, let,
+// const, function, class)
+export let myVariable = Math.sqrt(2);
+export function myFunction() { ... };
+</pre>
+
+<p>Дефолтні експорти:</p>
+
+<pre class="brush: js">// експорт функціоналу оголошеного раніше як дефолтний
+export { myFunction as default };
+
+// експорт індивідуального функціоналу як дефолтний
+export default myFunction() { ... }
+export default class { .. }</pre>
+
+<p>Іменоввані експорти є корисними при експортуванні декількох значень. Під час імпорту іменованих експортів обов'язково потрібно використовувати те саме ім'я відповідного об'єкта.</p>
+
+<p>Але дефолтний експорт може бути імпортований з будь яким ім'ям, наприклад:</p>
+
+<pre class="brush: js">// файл test.js
+let k; export default k = 12;
+</pre>
+
+<pre class="brush: js">// якийсь інший файл
+import m from './test'; // Візьміть до уваги що ми можемо використовувати import m замість import k, тому що k є дефолтним експортом
+console.log(m);        // виведе 12
+</pre>
+
+<p>Ви також можете переіменовувати іменні експорти щоб уникнути конфліктів:</p>
+
+<pre class="brush: js">export { <var>myFunction</var> as <var>function1</var>,<var>
+         myVariable</var> as variable };</pre>
+
+<p>І складати підмодулі докупи в батьківському модулі щоб можна було їх імпортувати з цього модуля.</p>
+
+<pre class="brush: js">// В parentModule.js
+export { myFunction, myVariable } from 'childModule1.js';
+export { myClass } from 'childModule2.js';
+</pre>
+
+<pre class="brush: js">// В модулі вищого рівня
+import { myFunction, myVariable, myClass } from 'parentModule.js'</pre>
+
+<h2 id="Приклад">Приклад</h2>
+
+<h3 id="Використання_іменних_експортів">Використання іменних експортів</h3>
+
+<p>В модулі <code>my-module.js</code>, ми можемо написати такий код:</p>
+
+<pre class="brush: js">// модуль "my-module.js"
+function cube(x) {
+  return x * x * x;
+}
+
+const foo = Math.PI + Math.SQRT2;
+
+var graph = {
+  options: {
+      color:'white',
+      thickness:'2px'
+  },
+  draw: function() {
+      console.log('From graph draw function');
+  }
+}
+
+export { cube, foo, graph };
+</pre>
+
+<p>Потім у модулі вищого порядку всередині вашої HTML сторінки ми можемо написати:</p>
+
+<pre class="brush: js">import { cube, foo, graph } from './my-module.js';
+
+graph.options = {
+    color:'blue',
+    thickness:'3px'
+};
+
+graph.draw();
+console.log(cube(3)); // 27
+console.log(foo);    // 4.555806215962888</pre>
+
+<p>Важливо звернути увагу на наступне:</p>
+
+<ul>
+ <li>Ви маєте добавити скріпт в ваш HTML за допомогою тега  {{htmlelement("script")}} і типом type="module", якщо хочете щоб він розпізнавався як модуль.</li>
+ <li>Ви не можете виконувати JS модулі за допомогою  <code>file://</code> URL — ви отримаєте <a href="/en-US/docs/Web/HTTP/CORS">CORS</a> помилки. Ви маєте виконувати модулі церез http сервер.</li>
+</ul>
+
+<h3 id="Використання_дефолтного_експорта">Використання дефолтного експорта</h3>
+
+<p>Якщо ви хочете експортувати одне значення з вашого модулю ви можете використати дефолтний екпорт:</p>
+
+<pre class="brush: js">// модуль "my-module.js"
+
+export default function cube(x) {
+  return x * x * x;
+}
+</pre>
+
+<p>Потім, у дефолтному скрипті імпортувати напряму це значення:</p>
+
+<pre class="brush: js">import cube from './my-module.js';
+console.log(cube(3)); // 27
+</pre>
+
+<h2 id="Специфікація">Специфікація</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_браузерами">Підтримка браузерами</h2>
+
+
+
+<p>{{Compat("javascript.statements.export")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{jsxref("Statements/import", "import")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Modules">JavaScript modules</a> guide</li>
+ <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li>
+ <li><a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">ES modules: A cartoon deep-dive</a>, Hacks blog post by Lin Clark</li>
+ <li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/statements/for-await...of/index.html b/files/uk/web/javascript/reference/statements/for-await...of/index.html
new file mode 100644
index 0000000000..9c0440c346
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/for-await...of/index.html
@@ -0,0 +1,253 @@
+---
+title: for await...of
+slug: Web/JavaScript/Reference/Statements/for-await...of
+tags:
+  - JavaScript
+  - await
+  - Інструкція
+  - асинхронний
+  - перебір
+translation_of: Web/JavaScript/Reference/Statements/for-await...of
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>Інструкція</strong> <strong><code>for await...of</code> </strong>створює цикл, що перебирає як асинхронні ітерабельні об'єкти, так і синхронні ітерабельні об'єкти, в тому числі вбудовані {{jsxref("String")}}, {{jsxref("Array")}}, подібні до масивів об'єкти (наприклад, {{jsxref("Functions/arguments", "arguments")}} чи {{DOMxRef("NodeList")}}), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, а також визначені користувачем асинхронні/синхронні ітерабельні об'єкти. Вона викликає користувацький хук до ітерацій з командами, що виконуватимуться для значення кожної окремої властивості об'єкта. Як і оператор {{jsxref("Operators/await", "await")}}, інструкція може використовуватись лише всередині {{jsxref("Statements/async_function", "асинхронної функції")}}.</p>
+
+<div class="blockIndicator note">
+<p><code>for await...of</code> не працює з асинхронними ітераторами, які не є асинхронними ітерабельними об'єктами.</p>
+</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">for await (<var>variable</var> of <var>iterable</var>) {
+  <var>statement</var>
+}
+</pre>
+
+<dl>
+ <dt><code><var>variable</var></code></dt>
+ <dd>На кожній ітерації значення іншої властивості присвоюється змінній <code><var>variable</var></code>. Змінна <code><var>variable</var></code> може бути оголошена через <code>const</code>, <code>let</code> або <code>var</code>.</dd>
+ <dt><code><var>iterable</var></code></dt>
+ <dd>Об'єкт, чиї ітерабельні властивості перебираються.</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Перебір_асинхронних_ітерабельних_обєктів">Перебір асинхронних ітерабельних об'єктів</h3>
+
+<p>Ви також можете перебирати об'єкт, який явно реалізує протокол асинхронного ітерабельного об'єкта:</p>
+
+<pre class="brush:js">const asyncIterable = {
+  [Symbol.asyncIterator]() {
+    return {
+      i: 0,
+      next() {
+        if (this.i &lt; 3) {
+          return Promise.resolve({ value: this.i++, done: false });
+        }
+
+        return Promise.resolve({ done: true });
+      }
+    };
+  }
+};
+
+(async function() {
+   for await (let num of asyncIterable) {
+     console.log(num);
+   }
+})();
+
+// 0
+// 1
+// 2
+</pre>
+
+<h3 id="Перебір_асинхронних_генераторів">Перебір асинхронних генераторів</h3>
+
+<p>Оскільки значення, що повертають асинхронні генератори, відповідають протоколу асинхронного ітерабельного об'єкта, їх можна перебирати циклом <code>for await...of</code>.</p>
+
+<pre class="brush: js">async function* asyncGenerator() {
+  let i = 0;
+  while (i &lt; 3) {
+    yield i++;
+  }
+}
+
+(async function() {
+  for await (let num of asyncGenerator()) {
+    console.log(num);
+  }
+})();
+// 0
+// 1
+// 2</pre>
+
+<p>Для більш конкретного прикладу перебору асинхронного генератора за допомогою <code>for await...of</code>, розгляньте перебір даних з API.</p>
+
+<p>Цей приклад спочатку створює асинхронний ітерабельний об'єкт для потоку даних, а далі використовує його, щоб дізнатись розмір відповіді від API.</p>
+
+<pre class="brush: js">async function* streamAsyncIterable(stream) {
+  const reader = stream.getReader();
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) {
+        return;
+      }
+      yield value;
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}
+// Отримує дані з URL та обчислює розмір відповіді за допомогою
+// асинхронного генератора.
+async function getResponseSize(url) {
+  const response = await fetch(url);
+  // Міститиме розмір відповіді, у байтах.
+  let responseSize = 0;
+  // Цикл for-await-of. Асинхронно перебирає кожну частку відповіді.
+  for await (const chunk of streamAsyncIterable(response.body)) {
+    // Збільшує загальну довжину відповіді.
+    responseSize += chunk.length;
+  }
+
+  console.log(`Розмір відповіді: ${responseSize} байтів`);
+  // очікуваний результат: "Розмір відповіді: 1071472 байтів"
+  return responseSize;
+}
+getResponseSize('https://jsonplaceholder.typicode.com/photos');</pre>
+
+<h3 id="Перебір_синхронних_ітерабельних_обєктів_та_генераторів">Перебір синхронних ітерабельних об'єктів та генераторів</h3>
+
+<p>Цикл <code>for await...of</code> також споживає синхронні ітерабельні об'єкти та генератори. У цьому випадку він внутрішньо чекає на видані значення перед тим, як присвоювати їх керівній змінній циклу.</p>
+
+<pre class="brush: js">function* generator() {
+  yield 0;
+  yield 1;
+  yield Promise.resolve(2);
+  yield Promise.resolve(3);
+  yield 4;
+}
+
+(async function() {
+  for await (let num of generator()) {
+    console.log(num);
+  }
+})();
+// 0
+// 1
+// 2
+// 3
+// 4
+
+// порівняйте з циклом for-of:
+
+for (let numOrPromise of generator()) {
+  console.log(numOrPromise);
+}
+// 0
+// 1
+// Promise { 2 }
+// Promise { 3 }
+// 4
+</pre>
+
+<div></div>
+
+<div class="blockIndicator note">
+<p><strong>Заувага</strong>: остерігайтеся видавати відхилені проміси з синхронного генератора. У цьому випадку <code>for await...of</code> викидає виняток при споживанні відхиленого проміса та НЕ ВИКЛИКАЄ блоки <code>finally</code> всередині цього генератора. Це може бути небажаним, якщо вам треба звільнити певні виділені ресурси за допомогою <code>try/finally</code>.</p>
+</div>
+
+<pre class="brush: js">function* generatorWithRejectedPromises() {
+  try {
+    yield 0;
+    yield 1;
+    yield Promise.resolve(2);
+    yield Promise.reject(3);
+    yield 4;
+    throw 5;
+  } finally {
+    console.log('викликано finally')
+  }
+}
+
+(async function() {
+  try {
+    for await (let num of generatorWithRejectedPromises()) {
+      console.log(num);
+    }
+  } catch (e) {
+    console.log('перехоплено', e)
+  }
+})();
+// 0
+// 1
+// 2
+// перехоплено 3
+
+// порівняйте з циклом for-of:
+
+try {
+  for (let numOrPromise of generatorWithRejectedPromises()) {
+    console.log(numOrPromise);
+  }
+} catch (e) {
+  console.log('перехоплено', e)
+}
+// 0
+// 1
+// Promise { 2 }
+// Promise { &lt;rejected&gt; 3 }
+// 4
+// перехоплено 5
+// викликано finally
+</pre>
+
+<p>Для того, щоб блоки <code>finally</code> у синхронному генераторі завжди викликались, використовуйте належну форму циклу, <code>for await...of</code> для асинхронних генераторів та <code>for...of</code> для синхронних, та чекайте на видані проміси явно всередині циклу.</p>
+
+<pre class="brush: js">(async function() {
+  try {
+    for (let numOrPromise of generatorWithRejectedPromises()) {
+      console.log(await numOrPromise);
+    }
+  } catch (e) {
+    console.log('перехоплено', e)
+  }
+})()
+// 0
+// 1
+// 2
+// перехоплено 3
+// викликано finally</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'ECMAScript Language: The for-in, for-of, and for-await-of Statements')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.statements.for_await_of")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Symbol/asyncIterator", "Symbol.asyncIterator")}}</li>
+ <li>{{jsxref("Statements/for...of", "for...of")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/statements/for...in/index.html b/files/uk/web/javascript/reference/statements/for...in/index.html
new file mode 100644
index 0000000000..f8bb6221be
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/for...in/index.html
@@ -0,0 +1,149 @@
+---
+title: for...in
+slug: Web/JavaScript/Reference/Statements/for...in
+tags:
+  - JavaScript
+  - Інструкція
+  - Цикл
+translation_of: Web/JavaScript/Reference/Statements/for...in
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Цикл <strong><code>for...in</code></strong> перебирає усі <a href="/uk/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">перелічувані властивості</a> об'єкта, ключами яких є рядки (ігноруючи ті, ключами яких є <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Symbol">символи</a>), в тому числі успадковані перелічувані властивості.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-forin.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">for (<var>variable</var> in <var>object</var>)
+  statement</pre>
+
+<dl>
+ <dt><code>variable</code></dt>
+ <dd>Нове ім'я властивості призначається параметру <em>variable</em> на кожній ітерації.</dd>
+ <dt><code>object</code></dt>
+ <dd>Об'єкт, чиї не символьні перелічувані властивості перебираються.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Цикл <code>for...in</code> перебирає лише перелічувані, не символьні властивості. Об'єкти, створені вбудованими конструкторами, як <code>Array</code> та <code>Object</code>, успадковують неперелічувані властивості від <code>Object.prototype</code> та <code>String.prototype</code>, такі як метод {{jsxref("String.indexOf", "indexOf()")}} у {{jsxref("String")}} або метод {{jsxref("Object.toString", "toString()")}} у {{jsxref("Object")}}. Цикл перебиратиме усі особисті перелічувані властивості об'єкта й ті, які об'єкт успадковує від прототипу конструктора (властивості, розташовані ближче до об'єкта у ланцюжку прототипів, заміщують властивості прототипу).</p>
+
+<h3 id="Видалені_додані_або_модифіковані_властивості">Видалені, додані або модифіковані властивості</h3>
+
+<p>Цикл <code>for...in</code> перебирає властивості об'єкта у довільному порядку (дивіться оператор {{jsxref("Operators/delete", "delete")}}, щоб дізнатись, чому не можна покладатися на удавану впорядкованість перебору, принаймні, у кросбраузерних налаштуваннях).</p>
+
+<p>Якщо властивість була змінена під час однієї ітерації і потім відвідується під час наступної, її значенням у циклі буде значення під час наступної ітерації. Властивість, що була видалена до того, як була відвідана, не буде відвідана пізніше. Властивості, додані до об'єкта під час поточного перебору, можуть бути або відвідані, або пропущені під час цього перебору.</p>
+
+<p>Загалом, краще не додавати, не змінювати й не видаляти властивості об'єкта під час перебору, окрім властивості, що відвідується у даний момент. Немає гарантії, що додана властивість буде відвідана, чи що змінена властивість (якщо це не поточна властивість) буде відвідана до чи після того, як була змінена, чи що видалена властивість не була відвідана до того, як була видалена.</p>
+
+<h3 id="Перебір_масиву_та_for...in">Перебір масиву та for...in</h3>
+
+<div class="note">
+<p><strong>Заувага:</strong> цикл <code>for...in</code> не слід використовувати для перебору {{jsxref("Array", "масиву")}}, де порядок індексів є важливим.</p>
+</div>
+
+<p>Індекси масивів є просто перелічуваними властивостями з цілочисельними іменами, в усьому іншому вони ідентичні загальним властивостям об'єкта. Немає гарантій, що <code>for...in</code> поверне індекси у певному порядку. Цикл <code>for...in</code> поверне усі перелічувані властивості, в тому числі не цілочисельні імена та успадковані властивості.</p>
+
+<p>Оскільки порядок перебору залежить від реалізації, перебір масиву може відвідувати елементи масиву непослідовно. Тому краще використовувати цикл {{jsxref("Statements/for", "for")}} з числовим індексом (або {{jsxref("Array.prototype.forEach()")}} чи {{jsxref("Statements/for...of", "for...of")}}) для перебору масивів, коли порядок звернення до елементів важливий.</p>
+
+<h3 id="Перебір_лише_особистих_властивостей">Перебір лише особистих властивостей</h3>
+
+<p>Якщо ви бажаєте розглядати властивості, притаманні лише самому об'єкту, а не його прототипам, скористайтесь {{jsxref("Object.getOwnPropertyNames", "getOwnPropertyNames()")}} або виконайте перевірку {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}} (також можна використати {{jsxref("Object.prototype.propertyIsEnumerable", "propertyIsEnumerable()")}}). Альтернативно, якщо ви певні, що не буде зовнішнього втручання у код, ви можете розширити вбудовані прототипи методом перевірки.</p>
+
+<h2 id="Навіщо_використовувати_for...in">Навіщо використовувати for...in?</h2>
+
+<p>Враховуючи, що цикл <code>for...in</code> створений для перебору властивостей об'єкта, не рекомендований для використання у масивах, і що існують такі варіанти як <code>Array.prototype.forEach()</code> та <code>for...of</code>, яка взагалі може бути користь від <code>for...in</code>?</p>
+
+<p>Він може бути найбільш практичним для налагодження, оскільки ним легко перевіряти властивості об'єкта (виводячи їх у консоль чи іншим чином). Хоча масиви часто більш зручні для зберігання даних, у ситуаціях, де для роботи з даними потрібні пари ключ-значення (де властивості виконують роль "ключів"), можливі випадки, коли ви захочете перевірити, чи містить якийсь з цих ключів певне значення.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_for...in">Використання for...in</h3>
+
+<p>Наведений цикл <code>for...in</code> перебирає усі перелічувані, не символьні властивості об'єкта та виводить рядки імен властивостей та їхніх значень.</p>
+
+<pre class="brush: js notranslate">var obj = {a: 1, b: 2, c: 3};
+
+for (const prop in obj) {
+  console.log(`obj.${prop} = ${obj[prop]}`);
+}
+
+// Виведе:
+// "obj.a = 1"
+// "obj.b = 2"
+// "obj.c = 3"</pre>
+
+<h3 id="Перебір_особистих_властивостей">Перебір особистих властивостей</h3>
+
+<p>Наступна функція ілюструє використання {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}}: успадковані властивості не виводяться.</p>
+
+<pre class="brush: js notranslate">var triangle = {a: 1, b: 2, c: 3};
+
+function ColoredTriangle() {
+  this.color = 'red';
+}
+
+ColoredTriangle.prototype = triangle;
+
+var obj = new ColoredTriangle();
+
+for (const prop in obj) {
+  if (obj.hasOwnProperty(prop)) {
+    console.log(`obj.${prop} = ${obj[prop]}`);
+  }
+}
+
+// Виведе:
+// "obj.color = red"</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.statements.for_in")}}</p>
+
+<h3 id="Сумісність_Ініціалізація_лічильника_у_строгому_режимі">Сумісність: Ініціалізація лічильника у строгому режимі</h3>
+
+<p>До Firefox 40 було можливо використати ініціалізацію лічильника (<code>i=0</code>) у циклі <code>for...in</code>:</p>
+
+<pre class="brush: js example-bad notranslate">var obj = {a: 1, b: 2, c: 3};
+for (var i = 0 in obj) {
+  console.log(obj[i]);
+}
+// 1
+// 2
+// 3
+</pre>
+
+<p>Ця нестандартна поведінка тепер ігнорується у версії 40 та пізніших і викличе помилку {{jsxref("SyntaxError")}} ("<a href="/uk/docs/Web/JavaScript/Reference/Errors/Invalid_for-in_initializer">for-in loop head declarations may not have initializers</a>") у <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">строгому режимі</a> ({{bug(748550)}} та {{bug(1164741)}}).</p>
+
+<p>Інші рушії, такі як v8 (Chrome), Chakra (IE/Edge) та JSC (WebKit/Safari), також проводять дослідження щодо прибирання цієї нестандартної поведінки.</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Statements/for...of", "for...of")}} – схожий цикл, що перебирає <em>значення</em> властивостей</li>
+ <li>{{jsxref("Statements/for_each...in", "for each...in")}} {{deprecated_inline}} – схожий, але застарілий цикл, що перебирає значення властивостей об'єкта, а не самі імена властивостей</li>
+ <li>{{jsxref("Statements/for", "for")}}</li>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators">Вираз функції-генератора</a> (використовує синтаксис <code>for...in</code>)</li>
+ <li><a href="/uk/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Перелічуваність та належність властивостей</a></li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/statements/for...of/index.html b/files/uk/web/javascript/reference/statements/for...of/index.html
new file mode 100644
index 0000000000..dc4ebaf7b8
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/for...of/index.html
@@ -0,0 +1,319 @@
+---
+title: for...of
+slug: Web/JavaScript/Reference/Statements/for...of
+tags:
+  - ECMAScript 2015
+  - ES6
+  - JavaScript
+  - Довідка
+translation_of: Web/JavaScript/Reference/Statements/for...of
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Конструкція <strong><code>for...of</code> </strong>створює цикл, що перебирає <a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору#The_iterable_protocol">ітерабельні об'єкти</a>, в тому числі: вбудовані {{jsxref("String")}}, {{jsxref("Array")}}, подібні до масиву об'єкти (наприклад, {{jsxref("Functions/arguments", "arguments")}} або {{domxref("NodeList")}}), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, а також визначені користувачем ітерабельні об'єкти. Він викликає користувацький хук до ітерацій з командами, що виконуються для значення кожної окремої властивості об'єкта.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-forof.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">for (<em>variable</em> of <em>iterable</em>) {
+  <em>statement
+</em>}
+</pre>
+
+<dl>
+ <dt><code>variable</code></dt>
+ <dd>На кожній ітерації параметру <em>variable </em>призначається значення іншої властивості. Параметр <em>variable</em> може бути оголошений через <code>const</code>, <code>let</code> або <code>var</code>.</dd>
+ <dt><code>iterable</code></dt>
+ <dd>Об'єкт, чиї ітерабельні властивості перебираються.</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Перебір_об'єкта_jsxref(Array)">Перебір об'єкта {{jsxref("Array")}}</h3>
+
+<pre class="brush:js">let iterable = [10, 20, 30];
+
+for (let value of iterable) {
+  value += 1;
+  console.log(value);
+}
+// 11
+// 21
+// 31
+</pre>
+
+<p>Ви також можете використати <a href="/uk/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a> замість <a href="/uk/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a>, якщо не переприсвоюєте змінну всередині блоку.</p>
+
+<pre class="brush:js">let iterable = [10, 20, 30];
+
+for (const value of iterable) {
+  console.log(value);
+}
+// 10
+// 20
+// 30
+</pre>
+
+<h3 id="Перебір_об'єкта_jsxref(String)">Перебір об'єкта {{jsxref("String")}}</h3>
+
+<pre class="brush:js">let iterable = 'фух';
+
+for (let value of iterable) {
+  console.log(value);
+}
+// "ф"
+// "у"
+// "х"
+</pre>
+
+<h3 id="Перебір_об'єкта_jsxref(TypedArray)">Перебір об'єкта {{jsxref("TypedArray")}}</h3>
+
+<pre class="brush:js">let iterable = new Uint8Array([0x00, 0xff]);
+
+for (let value of iterable) {
+  console.log(value);
+}
+// 0
+// 255
+</pre>
+
+<h3 id="Перебір_об'єкта_jsxref(Map)">Перебір об'єкта {{jsxref("Map")}}</h3>
+
+<pre class="brush:js">let iterable = new Map([['а', 1], ['б', 2], ['в', 3]]);
+
+for (let entry of iterable) {
+  console.log(entry);
+}
+// ['а', 1]
+// ['б', 2]
+// ['в', 3]
+
+for (let [key, value] of iterable) {
+  console.log(value);
+}
+// 1
+// 2
+// 3
+</pre>
+
+<h3 id="Перебір_об'єкта_jsxref(Set)">Перебір об'єкта {{jsxref("Set")}}</h3>
+
+<pre class="brush:js">let iterable = new Set([1, 1, 2, 2, 3, 3]);
+
+for (let value of iterable) {
+  console.log(value);
+}
+// 1
+// 2
+// 3
+</pre>
+
+<h3 id="Перебір_об'єкта_arguments">Перебір об'єкта arguments</h3>
+
+<p>Ви можете перебирати об'єкт {{jsxref("Functions/arguments", "arguments")}}, щоб дослідити усі параметри, передані у функцію JavaScript:</p>
+
+<pre class="brush: js">(function() {
+  for (let argument of arguments) {
+    console.log(argument);
+  }
+})(1, 2, 3);
+
+// 1
+// 2
+// 3</pre>
+
+<h3 id="Перебір_колекції_DOM-елементів">Перебір колекції DOM-елементів</h3>
+
+<p>Перебір колекцій DOM-елементів, таких як {{domxref("NodeList")}}: наступний приклад додає клас <code>read</code> до вузлів paragraph, які є прямими нащадками вузла article:</p>
+
+<pre class="brush:js">// Заувага: Це працюватиме лише у платформах, де
+// реалізовано NodeList.prototype[Symbol.iterator]
+let articleParagraphs = document.querySelectorAll('article &gt; p');
+
+for (let paragraph of articleParagraphs) {
+  paragraph.classList.add('read');
+}
+</pre>
+
+<h3 id="Закриття_ітераторів">Закриття ітераторів</h3>
+
+<p>У циклах <code>for...of</code> раптове переривання ітерації може бути спричинено операторами <code>break</code>, <code>throw</code> або <code>return</code>. У цих випадках ітератор закривається.</p>
+
+<pre class="brush: js">function* foo(){
+  yield 1;
+  yield 2;
+  yield 3;
+};
+
+for (let o of foo()) {
+  console.log(o);
+  break; // закриває ітератор, виконання продовжується поза циклом
+}
+console.log('done');
+</pre>
+
+<h3 id="Перебір_генераторів">Перебір генераторів</h3>
+
+<p>Ви також можете перебирати <a href="/uk/docs/Web/JavaScript/Reference/Statements/function*">генератори</a>, тобто, функції, що генерують ітерабельні об'єкти:</p>
+
+<pre class="brush:js">function* fibonacci() { // функція-генератор
+  let [prev, curr] = [0, 1];
+  while (true) {
+    [prev, curr] = [curr, prev + curr];
+    yield curr;
+  }
+}
+
+for (let n of fibonacci()) {
+  console.log(n);
+  // обрізати послідовність на 1000
+  if (n &gt;= 1000) {
+    break;
+  }
+}
+</pre>
+
+<h4 id="Не_використовуйте_генератори_повторно">Не використовуйте генератори повторно</h4>
+
+<p>Генератори не можна використовувати повторно, навіть якщо цикл <code>for...of</code> завчасно перервався, наприклад, ключовим словом {{jsxref("Statements/break", "break")}}. На виході з циклу генератор закривається, і спроби викликати його знову не дадуть подальших результатів.</p>
+
+<pre class="brush: js example-bad">let gen = (function *(){
+  yield 1;
+  yield 2;
+  yield 3;
+})();
+for (let o of gen) {
+  console.log(o);
+  break;  // закриває ітератор
+}
+
+// Генератор не можна використовувати знову, наступне не має сенсу!
+for (let o of gen) {
+  console.log(o); // Ніколи не виконається.
+}
+</pre>
+
+<h3 id="Перебір_інших_ітерабельних_об'єктів">Перебір інших ітерабельних об'єктів</h3>
+
+<p>Ви також можете перебирати об'єкт, який відкрито реалізує протокол <a href="/uk/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">ітерабельного</a>:</p>
+
+<pre class="brush:js">let iterable = {
+  [Symbol.iterator]() {
+    return {
+      i: 0,
+      next() {
+        if (this.i &lt; 3) {
+          return { value: this.i++, done: false };
+        }
+        return { value: undefined, done: true };
+      }
+    };
+  }
+};
+
+for (let value of iterable) {
+  console.log(value);
+}
+// 0
+// 1
+// 2
+</pre>
+
+<h3 id="Різниця_між_for...of_та_for...in">Різниця між <code>for...of</code> та <code>for...in</code></h3>
+
+<p>І цикл <code>for...in</code>, і цикл <code>for...of</code> щось перебирають. Головна різниця між ними полягає в тому, що саме вони перебирають.</p>
+
+<p>Цикл {{jsxref("Statements/for...in", "for...in")}} перебирає <a href="/uk/docs/Web/JavaScript/Перелічуваність_та_належність_властивостей">перелічувані властивості</a> об'єкта, у довільному порядку.</p>
+
+<p>Цикл <code>for...of</code> перебирає значення, які <a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables">ітерабельний об'єкт</a> визначає для перебирання.</p>
+
+<p>Наступний приклад демонструє різницю між циклом <code>for...of</code> та циклом <code>for...in</code> при використанні з {{jsxref("Array", "масивом")}}.</p>
+
+<pre class="brush:js">Object.prototype.objCustom = function() {};
+Array.prototype.arrCustom = function() {};
+
+let iterable = [3, 5, 7];
+iterable.foo = 'привіт';
+
+for (let i in iterable) {
+  console.log(i); // виведе 0, 1, 2, "foo", "arrCustom", "objCustom"
+}
+
+for (let i in iterable) {
+  if (iterable.hasOwnProperty(i)) {
+    console.log(i); // виведе 0, 1, 2, "foo"
+  }
+}
+
+for (let i of iterable) {
+  console.log(i); // виведе 3, 5, 7
+}
+</pre>
+
+<p>Розглянемо наведений код крок за кроком.</p>
+
+<pre class="brush: js">Object.prototype.objCustom = function() {};
+Array.prototype.arrCustom = function() {};
+
+let iterable = [3, 5, 7];
+iterable.foo = 'привіт';</pre>
+
+<p>Кожний об'єкт успадковуватиме властивість <code>objCustom</code> і кожний об'єкт, що є об'єктом {{jsxref("Array")}}, успадковуватиме властивість <code>arrCustom</code>, оскільки ці властивості були додані у {{jsxref("Object.prototype")}} та {{jsxref("Array.prototype")}} відповідно. Об'єкт <code>iterable</code> успадковує властивості <code>objCustom</code> та <code>arrCustom</code> через <a href="/uk/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">наслідування та ланцюжок прототипів</a>.</p>
+
+<pre class="brush: js">for (let i in iterable) {
+  console.log(i); // виведе 0, 1, 2, "foo", "arrCustom", "objCustom"
+}</pre>
+
+<p>Цей цикл виводить тільки <a href="/uk/docs/Web/JavaScript/Перелічуваність_та_належність_властивостей">перелічувані властивості</a> об'єкта <code>iterable</code>, у довільному порядку. Він не виводить <strong>елементи</strong> масиву <code>3</code>, <code>5</code>, <code>7</code> або <code>привіт</code>, оскільки вони <strong>не</strong> є перелічуваними властивостями, власне, вони взагалі не є властивостями, вони є <strong>значеннями</strong>. Цикл виводить <strong>індекси</strong> масиву, а також <code>arrCustom</code> та <code>objCustom</code>, які є властивостями. Якщо ви не певні, чому ці властивості перебираються, є більш детальне пояснення того, як працює {{jsxref("Statements/for...in", "перебір масиву та for...in", "#Перебір_масиву_та_for...in")}}.</p>
+
+<pre class="brush: js">for (let i in iterable) {
+  if (iterable.hasOwnProperty(i)) {
+    console.log(i); // виведе 0, 1, 2, "foo"
+  }
+}</pre>
+
+<p>Цей цикл схожий на перший, але використовує {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}} для перевірки, чи є знайдена перелічувана властивість особистою властивістю об'єкта, тобто, не успадкованою. Якщо є, властивість виводиться. Властивості <code>0</code>, <code>1</code>, <code>2</code> та <code>foo</code> виводяться, оскільки вони є особистими властивостями (<strong>не успадкованими</strong>). Властивості <code>arrCustom</code> та <code>objCustom</code> не виводяться, оскільки вони <strong>успадковані</strong>.</p>
+
+<pre class="brush: js">for (let i of iterable) {
+  console.log(i); // виведе 3, 5, 7
+}</pre>
+
+<p>Цей цикл перебирає та виводить <strong>значення</strong>, які <code>iterable</code> як <a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables">ітерабельний об'єкт</a><strong> </strong>визначає для перебору. <strong>Елементи</strong> об'єкта <code>3</code>, <code>5</code>, <code>7</code> виводяться, але немає жодної з <strong>властивостей</strong> об'єкта.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.statements.for_of")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Map.prototype.forEach()")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/statements/for/index.html b/files/uk/web/javascript/reference/statements/for/index.html
new file mode 100644
index 0000000000..12e0bbefd7
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/for/index.html
@@ -0,0 +1,165 @@
+---
+title: for
+slug: Web/JavaScript/Reference/Statements/for
+tags:
+  - JavaScript
+  - for
+  - Цикл
+translation_of: Web/JavaScript/Reference/Statements/for
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>Оператор for </strong>створює цикл, що складається з трьох необов'язкових виразів, заключених у дужки та розділених крапками з комами, за ними розташовані команди (зазвичай, <a href="/uk/docs/Web/JavaScript/Reference/Statements/block">блок команд</a>), який потрібно виконати у циклі.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-for.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">for ([<em>initialization</em>]; [<em>condition</em>]; [<em>final-expression</em>])
+   <em>statement</em></pre>
+
+<dl>
+ <dt><code>initialization</code></dt>
+ <dd>Вираз (в тому числі вирази присвоєння) або оголошення змінної, оцінюється один раз перед початком циклу. Зазвичай використовується для ініціалізації змінної лічильника. Цей вираз може також оголошувати нові змінні ключовими словами <code>var</code> або <code>let</code>. Змінні, оголошені через <code>var</code> не є локальними для циклу, тобто, вони знаходяться у тій же області видимості, що й сам цикл <code>for</code>. Змінні, оголошені через <code>let</code>, є локальними змінними циклу.</dd>
+ <dd>Результат цього виразу відкидається.</dd>
+ <dt><code>condition</code></dt>
+ <dd>Вираз, який оцінюється перед кожною ітерацією циклу. Якщо вираз оцінюється як true, то <code>statement</code> виконується. Ця перевірка є необов'язковою. Якщо вона пропущена, то умова завжди оцінюється як true. Якщо вираз оцінюється як false, виконання переходить до першого виразу, розташованого після конструкції <code>for</code>.</dd>
+ <dt><code>final-expression</code></dt>
+ <dd>Вираз, який оцінюється в кінці кожної ітерації циклу. Це відбувається до наступного оцінювання виразу <code>condition</code>. Зазвичай використовується, щоб оновити або збільшити значення змінної лічильника.</dd>
+ <dt><code>statement</code></dt>
+ <dd>Команда, яка виконується, поки умова оцінюється як true. Для виконання кількох команд, використовуйте {{jsxref("Statements/block", "блок", "", 0)}} (<code>{ ... }</code>), щоб згрупувати ці команди. Щоб не виконувати жодних команд, скористайтесь {{jsxref("Statements/empty", "порожнім", "", 0)}} оператором (<code>;</code>).</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_циклу_for">Використання циклу <code>for</code></h3>
+
+<p>Наведений цикл <code>for</code> починається з оголошення змінної <code>i</code> та ініціалізації її значенням <code>0</code>. Він перевіряє, що значення <code>i</code> менше дев'яти, виконує дві команди та збільшує <code>i</code> на 1 після кожного проходу через цикл.</p>
+
+<pre class="brush: js">for (let i = 0; i &lt; 9; i++) {
+   console.log(i);
+   // ще команди
+}
+</pre>
+
+<h3 id="Необов'язкові_вирази_циклу_for">Необов'язкові вирази циклу <code>for</code></h3>
+
+<p>Всі три вирази у шапці циклу <code>for</code> є необов'язковими.</p>
+
+<p>Наприклад, у блоці <em>initialization</em> не вимагається ініціалізувати змінні:</p>
+
+<pre class="brush: js">var i = 0;
+for (; i &lt; 9; i++) {
+    console.log(i);
+    // ще команди
+}
+</pre>
+
+<p>Як і блок <em>initialization</em>, блок умови <em>condition</em> також є необов'язковим. Якщо ви пропускаєте цей вираз, то маєте переконатись, що встановили переривання у тілі циклу, щоб не створити нескінченний цикл.</p>
+
+<pre class="brush: js">for (let i = 0;; i++) {
+   console.log(i);
+   if (i &gt; 3) break;
+   // ще команди
+}</pre>
+
+<p>Ви також можете пропустити всі три блоки. Знову ж таки, переконайтеся, що ви встановили оператор {{jsxref("Statements/break", "break")}}, щоб закінчити цикл, а також змінили (збільшили) змінну, щоб умова для переривання в якийсь момент набула значення true.</p>
+
+<pre class="brush: js">var i = 0;
+
+for (;;) {
+  if (i &gt; 3) break;
+  console.log(i);
+  i++;
+}
+</pre>
+
+<h3 id="Використання_циклу_for_без_команд">Використання циклу <code>for</code> без команд</h3>
+
+<p>Наведений цикл <code>for</code> обчислює зміщення вузла у розділі <em>final-expression</em>, і тому не вимагає використання розділу <code>statement</code>, замість нього використовується крапка з комою.</p>
+
+<pre class="brush: js">function showOffsetPos(sId) {
+
+  var nLeft = 0, nTop = 0;
+
+  for (
+
+    var oItNode = document.getElementById(sId); /* ініціалізація */
+
+    oItNode; /* умова */
+
+    nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent /* final-expression */
+
+  ); /* крапка з комою */
+
+  console.log('Зміщення елемента \'' + sId + '\':\n left: ' + nLeft + 'px;\n top: ' + nTop + 'px;');
+
+}
+
+/* Приклад виклику: */
+
+showOffsetPos('content');
+
+// Результат:
+// "Зміщення елемента "content":
+// left: 0px;
+// top: 153px;"</pre>
+
+<div class="note"><strong>Заувага:</strong> Це один з небагатьох випадків у JavaScript, коли <strong>крапка з комою є обов'язковою</strong>. Дійсно, без крапки з комою рядок, що записаний після циклу, вважатиметься командою циклу.</div>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.6.2', 'for statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.6.3', 'for statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.6.3', 'for statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-for-statement', 'for statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-for-statement', 'for statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.statements.for")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Statements/empty", "порожній оператор", "", 0)}}</li>
+ <li>{{jsxref("Statements/break", "break")}}</li>
+ <li>{{jsxref("Statements/continue", "continue")}}</li>
+ <li>{{jsxref("Statements/while", "while")}}</li>
+ <li>{{jsxref("Statements/do...while", "do...while")}}</li>
+ <li>{{jsxref("Statements/for...in", "for...in")}}</li>
+ <li>{{jsxref("Statements/for...of", "for...of")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/statements/function/index.html b/files/uk/web/javascript/reference/statements/function/index.html
new file mode 100644
index 0000000000..c038ec106d
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/function/index.html
@@ -0,0 +1,179 @@
+---
+title: Оголошення функції
+slug: Web/JavaScript/Reference/Statements/function
+tags:
+  - JavaScript
+  - Функція
+translation_of: Web/JavaScript/Reference/Statements/function
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>Оголошення функції</strong> (функціональний оператор) визначає функцію з вказаними параметрами.</p>
+
+<p>Ви також можете визначати функції за допомогою конструктора {{jsxref("Function")}} та {{jsxref("Operators/function", "функціонального виразу")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-function.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">function <em>name</em>([<em>param</em>[, <em>param</em>,[..., <em>param</em>]]]) {
+   [<em>statements</em>]
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Ім'я функції.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Ім'я аргументу, що передається у функцію. Максимальна кількість аргументів відрізняється у різних рушіях.</dd>
+</dl>
+
+<dl>
+ <dt><code>statements</code></dt>
+ <dd>Інструкції, які складають тіло функції.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Функція, утворена через оголошення функції, є об'єктом <code>Function</code>, і має усі властивості, методи та поведінку об'єктів <code>Function</code>. Більш детальну інформацію щодо функцій дивіться у статті {{jsxref("Function")}}.</p>
+
+<p>Функція також може бути створена через за допомогою виразу (дивіться {{jsxref("Operators/function", "функціональний вираз")}}).</p>
+
+<p>За замовчуванням функції повертають <code>undefined</code>. Щоб повернути будь-яке інше значення, функція повинна мати оператор {{jsxref("Statements/return", "return")}}, який вказує значення, що буде повернене.</p>
+
+<h3 id="Умовне_створення_функцій">Умовне створення функцій</h3>
+
+<p>Функції можуть оголошуватися за певної умови, тобто, оголошення функції може бути вкладене у <code>if</code>, однак, результат різниться між реалізаціями, тому цей шаблон не варто використовувати у виробничому коді. Для умовного створення функції використовуйте, натомість, функціональний вираз.</p>
+
+<pre class="brush: js">var hoisted = "foo" in this;
+console.log(`Ім'я 'foo'${hoisted ? "" : " не"} піднімається. typeof foo дорівнює ${typeof foo}`);
+if (false) {
+  function foo(){ return 1; }
+}
+
+// У Chrome:
+// Ім'я 'foo' піднімається. typeof foo дорівнює undefined
+//
+// У Firefox:
+// Ім'я 'foo' піднімається. typeof foo дорівнює undefined
+//
+// У Edge:
+// Ім'я 'foo' не піднімається. typeof foo дорівнює undefined
+//
+// У Safari:
+// Ім'я 'foo' піднімається. typeof foo дорівнює function
+</pre>
+
+<p>Результат буде такий самий для умови, яка дорівнює true</p>
+
+<pre class="brush: js">var hoisted = "foo" in this;
+console.log(`Ім'я 'foo' ${hoisted ? "" : " не"} піднімається. typeof foo дорівнює ${typeof foo}`);
+if (true) {
+  function foo(){ return 1; }
+}
+
+// У Chrome:
+// Ім'я 'foo' піднімається. typeof foo дорівнює undefined
+//
+// У Firefox:
+// Ім'я 'foo' піднімається. typeof foo дорівнює undefined
+//
+// У Edge:
+// Ім'я 'foo' не піднімається. typeof foo дорівнює undefined
+//
+// У Safari:
+// Ім'я 'foo' піднімається. typeof foo дорівнює function
+</pre>
+
+<h3 id="Підняття_оголошення_функції">Підняття оголошення функції</h3>
+
+<p>Оголошення функцій у JavaScript піднімаються наверх замикаючої функції або глобальної області видимості. Ви можете використовувати функцію до того, як оголосили її:</p>
+
+<pre class="brush: js">hoisted(); // виводить "foo"
+
+function hoisted() {
+  console.log('foo');
+}
+</pre>
+
+<p>Зауважте, що {{jsxref("Operators/function", "функціональні вирази")}} не піднімаються:</p>
+
+<pre class="brush: js">notHoisted(); // TypeError: notHoisted is not a function
+
+var notHoisted = function() {
+   console.log('bar');
+};
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_function">Використання <code>function</code></h3>
+
+<p>Наступний код оголошує функцію, яка повертає загальну суму продажів, отримуючи кількість одиниць продуктів <code>a</code>, <code>b</code> та <code>c</code>.</p>
+
+<pre class="brush: js">function calc_sales(units_a, units_b, units_c) {
+   return units_a * 79 + units_b * 129 + units_c * 699;
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-13', 'Function definition')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.statements.function")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Functions", "Функції")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Operators/function", "функціональний вираз")}}</li>
+ <li>{{jsxref("Statements/function*", "оператор function*")}}</li>
+ <li>{{jsxref("Operators/function*", "вираз function*")}}</li>
+ <li>{{jsxref("Functions/Стрілкові_функції", "Стрілкові функції")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li>{{jsxref("Statements/async_function", "async function")}}</li>
+ <li>{{jsxref("Operators/async_function", "вираз async function")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/statements/function_star_/index.html b/files/uk/web/javascript/reference/statements/function_star_/index.html
new file mode 100644
index 0000000000..f900241ddc
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/function_star_/index.html
@@ -0,0 +1,268 @@
+---
+title: function*
+slug: Web/JavaScript/Reference/Statements/function*
+tags:
+  - ECMAScript 2015
+  - Function
+  - JavaScript
+  - Ітератор
+  - генератор
+translation_of: Web/JavaScript/Reference/Statements/function*
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Оголошення <code><strong>function*</strong></code> (ключове слово <code>function</code> з зірочкою) визначає <em>функцію-генератор</em>, яка повертає об'єкт {{jsxref("Global_Objects/Generator","Generator")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-functionasterisk.html")}}</div>
+
+
+
+<p>Ви також можете визначати функції-генератори за допомогою конструктора {{jsxref("GeneratorFunction")}} або функціонального виразу.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Ім'я функції.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Ім'я формального параметра функції.</dd>
+</dl>
+
+<dl>
+ <dt><code>statements</code></dt>
+ <dd>Інструкції, що складають тіло функції.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Генератори - це функції, з яких можна вийти та пізніше повторно зайти. Їхній контекст (зв'язування змінних) збережеться між заходами.<br>
+ <br>
+ Генератори у JavaScript -- особливо у поєднанні з промісами -- дуже потужний інструмент асинхронного програмування, бо вони пом'якшують -- якщо не усувають повністю -- проблеми зворотних викликів, такі як <a href="http://callbackhell.com/">Пекло зворотних викликів</a> та <a href="https://frontendmasters.com/courses/rethinking-async-js/callback-problems-inversion-of-control/">Інверсія управління</a>.</p>
+
+<p>Виклик функції-генератора не виконує тіло функції негайно; замість цього повертається об'єкт-<a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору#Протокол_ітератора">ітератор</a> для функції. Коли викликається метод ітератора <code>next()</code>, тіло функції-генератора виконується до першого виразу {{jsxref("Operators/yield", "yield")}}, який визначає значення, що має бути повернене ітератором, або, оператором {{jsxref("Operators/yield*", "yield*")}}, делегується до іншої функції-генератора. Метод <code>next()</code> повертає об'єкт з властивістю <code>value</code>, що містить отримане значення, та властивістю <code>done</code>, яка вказує, чи генератор віддав останнє значення, у вигляді булевого значення. Виклик метода <code>next()</code> з аргументом відновить виконання функції-генератора, замінюючи вираз <code>yield</code> в тій точці, де виконання було призупинене, аргументом з <code>next()</code>.</p>
+
+<p>Оператор <code>return</code> у генераторі змусить генератор завершити виконання (тобто, властивості <code>done</code> поверненого об'єкта буде присвоєне значення <code>true</code>). Якщо повертається значення, воно буде присвоєте властивості <code>value</code> об'єкта, що повертається генератором.<br>
+ Схоже на оператор <code>return</code>, викидання помилки всередині генератора змусить генератор завершити виконання -- якщо не буде перехоплене у тілі генератора.<br>
+ Коли генератор завершує виконання, наступні виклики <code>next</code> не виконають жодного коду генератора, вони лише повернуть об'єкт наступного вигляду: <code>{value: undefined, done: true}</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Простий_приклад">Простий приклад</h3>
+
+<pre class="brush: js">function* idMaker() {
+  var index = 0;
+  while (true)
+    yield index++;
+}
+
+var gen = idMaker();
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+console.log(gen.next().value); // 3
+// ...</pre>
+
+<h3 id="Приклад_з_yield*">Приклад з yield*</h3>
+
+<pre class="brush: js">function* anotherGenerator(i) {
+  yield i + 1;
+  yield i + 2;
+  yield i + 3;
+}
+
+function* generator(i) {
+  yield i;
+  yield* anotherGenerator(i);
+  yield i + 10;
+}
+
+var gen = generator(10);
+
+console.log(gen.next().value); // 10
+console.log(gen.next().value); // 11
+console.log(gen.next().value); // 12
+console.log(gen.next().value); // 13
+console.log(gen.next().value); // 20
+</pre>
+
+<h3 id="Передача_аргументів_у_обєкти_Generator">Передача аргументів у об'єкти Generator</h3>
+
+<pre class="brush: js">function* logGenerator() {
+  console.log(0);
+  console.log(1, yield);
+  console.log(2, yield);
+  console.log(3, yield);
+}
+
+var gen = logGenerator();
+
+// перший виклик метода next виконує функцію з початку
+// до першого оператора yield
+gen.next();             // 0
+gen.next('крендель');   // 1 крендель
+gen.next('кава');       // 2 кава
+gen.next('майонез');    // 3 майонез
+</pre>
+
+<h3 id="Оператор_return_у_генераторі">Оператор return у генераторі</h3>
+
+<pre class="brush: js">function* yieldAndReturn() {
+  yield "Y";
+  return "R";
+  yield "недосяжний";
+}
+
+var gen = yieldAndReturn()
+console.log(gen.next()); // { value: "Y", done: false }
+console.log(gen.next()); // { value: "R", done: true }
+console.log(gen.next()); // { value: undefined, done: true }
+</pre>
+
+<h3 id="Генератор_як_властивість_обєкта">Генератор як властивість об'єкта</h3>
+
+<pre class="brush: js">const someObj = {
+  *generator () {
+    yield 'а';
+    yield 'б';
+  }
+}
+
+const gen = someObj.generator()
+
+console.log(gen.next()); // { value: 'а', done: false }
+console.log(gen.next()); // { value: 'б', done: false }
+console.log(gen.next()); // { value: undefined, done: true }
+</pre>
+
+<h3 id="Генератор_як_метод_класу">Генератор як метод класу</h3>
+
+<pre class="brush: js">class Foo {
+  *generator () {
+    yield 1;
+    yield 2;
+    yield 3;
+  }
+}
+
+const f = new Foo ();
+const gen = f.generator();
+
+console.log(gen.next()); // { value: 1, done: false }
+console.log(gen.next()); // { value: 2, done: false }
+console.log(gen.next()); // { value: 3, done: false }
+console.log(gen.next()); // { value: undefined, done: true }
+</pre>
+
+<h3 id="Генератор_як_обчислювана_властивість">Генератор як обчислювана властивість</h3>
+
+<pre class="brush: js">class Foo {
+  *[Symbol.iterator] () {
+    yield 1;
+    yield 2;
+  }
+}
+
+const SomeObj = {
+  *[Symbol.iterator] () {
+    yield 'а';
+    yield 'б';
+  }
+}
+
+console.log(Array.from(new Foo)); // [ 1, 2 ]
+console.log(Array.from(SomeObj)); // [ 'а', 'б' ]
+</pre>
+
+<h3 id="Генератори_не_є_конструкторами">Генератори не є конструкторами</h3>
+
+<pre class="brush: js">function* f() {}
+var obj = new f; // викидає "TypeError: f is not a constructor
+</pre>
+
+<h3 id="Генератор_визначений_у_виразі">Генератор, визначений у виразі</h3>
+
+<pre class="brush: js">const foo = function* () {
+  yield 10;
+  yield 20;
+};
+
+const bar = foo();
+console.log(bar.next()); // {value: 10, done: false}</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator-function-definitions', 'function*')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#sec-generator-function-definitions', 'function*')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td>Внесено зміни, що генератори не повинні мати пастки [[Construct]] та викидатимуть помилку при використанні з <code>new</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.statements.generator_function")}}</p>
+</div>
+
+<h2 id="Примітки_щодо_Firefox">Примітки щодо Firefox</h2>
+
+<h4 id="Генератори_та_ітератори_у_Firefox_до_26-ї_версії">Генератори та ітератори у Firefox до 26-ї версії</h4>
+
+<p>Старші версії Firefox реалізують старшу версію пропозиції генераторів. У старшій версії генератори визначались за допомогою звичайного ключового слова <code>function</code> (без зірочки), серед інших відмінностей. Дивіться більше інформації у статті <a href="/uk/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">Застаріла функція-генератор</a>.</p>
+
+<h4 id="Замість_викидання_помилки_повертається_обєкт_IteratorResult">Замість викидання помилки повертається об'єкт <code>IteratorResult</code></h4>
+
+<p>Починаючи з Gecko 29 {{geckoRelease(29)}}, завершена функція-генератор більше не викидає помилку {{jsxref("TypeError")}} "generator has already finished". Замість цього, вона повертає об'єкт <code>IteratorResult</code> у вигляді <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Operators/function*", "вираз function*")}}</li>
+ <li>Об'єкт {{jsxref("GeneratorFunction")}}</li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору">Протоколи перебору</a></li>
+ <li>{{jsxref("Operators/yield", "yield")}}</li>
+ <li>{{jsxref("Operators/yield*", "yield*")}}</li>
+ <li>Об'єкт {{jsxref("Function")}}</li>
+ <li>{{jsxref("Statements/function", "оголошення функції")}}</li>
+ <li>{{jsxref("Operators/function", "функціональний вираз")}}</li>
+ <li>{{jsxref("Functions", "Функції")}}</li>
+ <li>Інші веб-ресурси:
+  <ul>
+   <li><a href="http://facebook.github.io/regenerator/">Regenerator</a>, компілятор генераторів ES2015 у ES5</li>
+   <li><a href="http://www.youtube.com/watch?v=qbKWsbJ76-s">Forbes Lindesay: Promises and Generators: control flow utopia -- JSConf EU 2013</a></li>
+   <li><a href="https://github.com/mozilla/task.js">Task.js</a></li>
+   <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/async%20%26%20performance/ch4.md#iterating-generators-asynchronously">Асинхронний перебір генераторів</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/uk/web/javascript/reference/statements/if...else/index.html b/files/uk/web/javascript/reference/statements/if...else/index.html
new file mode 100644
index 0000000000..bee07d07bf
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/if...else/index.html
@@ -0,0 +1,173 @@
+---
+title: if...else
+slug: Web/JavaScript/Reference/Statements/if...else
+tags:
+  - JavaScript
+  - else
+  - if
+  - Оператор
+translation_of: Web/JavaScript/Reference/Statements/if...else
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><span class="seoSummary">Умовний оператор <strong><code>if</code></strong> виконує команду, якщо вказана умова є {{Glossary("truthy", "правдивою")}}. Якщо умова є {{Glossary("falsy", "хибною")}}, може бути виконана інша команда.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-ifelse.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">if (<var>condition</var>)
+   <var>statement1</var>
+[else
+   <var>statement2</var>]
+</pre>
+
+<dl>
+ <dt><code>condition</code></dt>
+ <dd><a href="/uk/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions">Вираз</a>, який вважається або {{Glossary("truthy", "правдивим")}}, або {{Glossary("falsy", "хибним")}}.</dd>
+</dl>
+
+<dl>
+ <dt><code>statement1</code></dt>
+ <dd>Команда, що виконується, якщо <var>умова</var> є {{Glossary("truthy", "правдивою")}}. Може бути будь-яка команда, в тому числі вкладені оператори <code>if</code>. Для виконання кількох команд використовуйте <a href="/uk/docs/Web/JavaScript/Reference/Statements/block" title="en/JavaScript/Reference/Statements/block">блок</a> ({ ... }), щоб згрупувати ці команди. Щоб не виконувати жодних команд, використайте <a href="/uk/docs/Web/JavaScript/Reference/Statements/Empty">порожній</a> оператор.</dd>
+</dl>
+
+<dl>
+ <dt><code>statement2</code></dt>
+ <dd>Команда, що виконується, якщо <var>умова</var> є {{Glossary("falsy", "хибною")}} та присутній блок <code>else</code>. Може бути будь-яка команда, в тому числі блок команд та вкладені оператори <code>if</code>.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Можна додавати вкладені вирази <code>if...else</code> для створення конструкції <code>else if</code>. Зауважте, що у JavaScript не існує ключового слова <code>elseif</code> (одним словом).</p>
+
+<pre class="brush: js">if (<var>condition1</var>)
+  <var>statement1</var>
+else if (<var>condition2</var>)
+  <var>statement2</var>
+else if (<var>condition3</var>)
+  <var>statement3</var>
+...
+else
+  <var>statementN</var>
+</pre>
+
+<p>Щоб побачити, як це працює, ось так це виглядає з правильно оформленими відступами:</p>
+
+<pre class="brush: js">if (<var>condition1</var>)
+  <var>statement1</var>
+else
+  if (<var>condition2</var>)
+    <var>statement2</var>
+  else
+    if (<var>condition3</var>)
+...
+</pre>
+
+<p>Щоб виконати декілька команд, використовуйте позначення блоку (<code>{ ... }</code>), щоб згрупувати ці команди. Взагалі, гарною практикою вважається завжди використовувати блочні вирази, особливо у коді, який містить вкладені оператори <code>if</code>:</p>
+
+<pre class="brush: js">if (<var>condition</var>) {
+  <var>statements1</var>
+} else {
+  <var>statements2</var>
+}
+</pre>
+
+<p>Не плутайте примітивні булеві значення <code>true</code> та <code>false</code> з правдивістю та хибністю об'єкта {{jsxref("Global_Objects/Boolean", "Boolean")}}. Будь-яке значення, яке не є <code>false</code>, <code>undefined</code>, <code>null</code>, <code>0</code>, <code>-0</code>, <code>NaN</code>, або порожнім текстовим рядком (<code>""</code>), і будь-який об'єкт, в тому числі об'єкт Boolean, чиє значення дорівнює false, вважається {{Glossary("truthy", "правдивим")}} при використанні у якості умови. Для прикладу:</p>
+
+<pre class="brush: js">var b = new Boolean(false);
+if (b) // ця умова є правдивою
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_if...else">Використання <code>if...else</code></h3>
+
+<pre class="brush: js">if (cipher_char === from_char) {
+  result = result + to_char;
+  x++;
+} else {
+  result = result + clear_char;
+}
+</pre>
+
+<h3 id="Використання_else_if">Використання <code>else if</code></h3>
+
+<p>Зауважте, що у JavaScript немає оператора <code>elseif</code>. Однак, ви можете його записати з пробілом між <code>else</code> та <code>if</code>:</p>
+
+<pre class="brush: js">if (x &gt; 50) {
+  /* зробити що треба */
+} else if (x &gt; 5) {
+  /* зробити що треба */
+} else {
+  /* зробити що треба */
+}</pre>
+
+<h3 id="Присвоєння_всередині_умовного_виразу">Присвоєння всередині умовного виразу</h3>
+
+<p>Не рекомендовано використовувати прості присвоєння в умовному виразі, тому що присвоєння можна переплутати з порівнянням при швидкому перегляді коду. Наприклад, не використовуйте наступний код:</p>
+
+<pre class="brush: js example-bad">if (x = y) {
+  /* зробити що треба */
+}
+</pre>
+
+<p>Якщо вам потрібно використати присвоєння в умовному виразі, загальноприйнятим є використання додаткових дужок навколо присвоєння. Наприклад:</p>
+
+<pre class="brush: js example-good">if ((x = y)) {
+  /* зробити що треба */
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-if-statement', 'if statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-if-statement', 'if statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.5', 'if statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.5', 'if statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.5', 'if statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.statements.if_else")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Statements/block", "block")}}</li>
+ <li>{{jsxref("Statements/switch", "switch")}}</li>
+ <li><a href="/uk/docs/JavaScript/Reference/Operators/Conditional_Operator">Умовний оператор</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/statements/index.html b/files/uk/web/javascript/reference/statements/index.html
new file mode 100644
index 0000000000..7a16fcc672
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/index.html
@@ -0,0 +1,130 @@
+---
+title: Інструкції та оголошення
+slug: Web/JavaScript/Reference/Statements
+tags:
+  - JavaScript
+  - Довідка
+  - оголошення
+  - інструкції
+translation_of: Web/JavaScript/Reference/Statements
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Застосунки JavaScript складаються з інструкцій з відповідним синтаксисом. Одна інструкція може займати декілька рядків. Декілька інструкцій можуть розташовуватись на одному рядку, якщо кожна інструкція відділена крапкою з комою. Це не ключове слово, а група ключових слів.</p>
+
+<h2 id="Інструкції_та_оголошення_за_категоріями">Інструкції та оголошення за категоріями</h2>
+
+<p>Список в алфавітному порядку дивіться на бічній панелі ліворуч.</p>
+
+<h3 id="Потік_керування">Потік керування</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/block", "Block")}}</dt>
+ <dd>Блок використовують, щоб згрупувати нуль чи більше інструкцій. Блок позначається парою фігурних дужок.</dd>
+ <dt>{{jsxref("Statements/break", "break")}}</dt>
+ <dd>Перериває поточний цикл, switch або помічену інструкцію та передає контроль програми у інструкцію, наступну за перерваною інструкцією.</dd>
+ <dt>{{jsxref("Statements/continue", "continue")}}</dt>
+ <dd>Перериває виконання інструкцій у поточній ітерації поточного або поміченого циклу та продовжує виконання циклу з наступної ітерації.</dd>
+ <dt>{{jsxref("Statements/Empty", "Empty")}}</dt>
+ <dd>Порожній оператор використовується, щоб не надавати інструкцію там, де синтаксис JavaScript її очікує.</dd>
+ <dt>{{jsxref("Statements/if...else", "if...else")}}</dt>
+ <dd>Виконує інструкцію, якщо вказана умова дорівнює true. Якщо умова дорівнює false, виконується інша інструкція.</dd>
+ <dt>{{jsxref("Statements/switch", "switch")}}</dt>
+ <dd>Обчислює вираз, шукаючі збіг значення виразу з блоком case, та виконує інструкції, асоційовані з цим блоком.</dd>
+ <dt>{{jsxref("Statements/throw", "throw")}}</dt>
+ <dd>Викидає визначений користувачем виняток.</dd>
+ <dt>{{jsxref("Statements/try...catch", "try...catch")}}</dt>
+ <dd>Позначає блок інструкцій, які необхідно спробувати виконати, та визначає відповідь у випадку, якщо викидається виняток.</dd>
+</dl>
+
+<h3 id="Оголошення">Оголошення</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/var", "var")}}</dt>
+ <dd>Оголошує змінну, необов'язково ініціалізуючи її значенням.</dd>
+ <dt>{{jsxref("Statements/let", "let")}}</dt>
+ <dd>Оголошує локальну змінну блочної області видимості, необов'язково ініціалізуючи її значенням.</dd>
+ <dt>{{jsxref("Statements/const", "const")}}</dt>
+ <dd>Оголошує іменовану константу, доступну лише для читання.</dd>
+</dl>
+
+<h3 id="Функції_та_класи">Функції та класи</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/function", "function")}}</dt>
+ <dd>Оголошує функцію з вказаними параметрами.</dd>
+ <dt>{{jsxref("Statements/function*", "function*")}}</dt>
+ <dd>Функції-генератори спрощують написання <a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору#Протокол_ітератора">ітераторів</a>.</dd>
+ <dt>{{jsxref("Statements/async_function", "async function")}}</dt>
+ <dd>Оголошує асинхронну функцію з вказаними параметрами.</dd>
+ <dt>{{jsxref("Statements/return", "return")}}</dt>
+ <dd>Вказує значення, яке має повернути функція.</dd>
+ <dt>{{jsxref("Statements/class", "class")}}</dt>
+ <dd>Оголошує клас.</dd>
+</dl>
+
+<h3 id="Перебори">Перебори</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/do...while", "do...while")}}</dt>
+ <dd>Створює цикл, що виконує вказану інструкцію, яка виконується, доки перевірочна умова не стане дорівнювати false. Умова обчислюється після виконання інструкції, в результаті вказана інструкція виконується принаймні один раз.</dd>
+ <dt>{{jsxref("Statements/for", "for")}}</dt>
+ <dd>Створює цикл, що складається з трьох необов'язкових виразів, записаних у дужках та розділених крапками з комами, після яких вказується інструкція для виконання циклом.</dd>
+ <dt>{{jsxref("Statements/for_each...in", "for each...in")}}</dt>
+ <dd>Перебирає вказаною змінною усі значення властивостей об'єкта. Для кожної окремої властивості виконується вказана інструкція.</dd>
+ <dt>{{jsxref("Statements/for...in", "for...in")}}</dt>
+ <dd>Перебирає перелічувані властивості об'єкта у довільному порядку. Для кожної окремої властивості можуть виконуватись інструкції.</dd>
+ <dt>{{jsxref("Statements/for...of", "for...of")}}</dt>
+ <dd>Перебирає ітерабельні об'єкти (в тому числі {{jsxref("Global_Objects/Array","масиви","","true")}}, подібні до масивів об'єкти, <a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators">ітератори та генератори</a>), викликаючи користувацький хук до ітерацій з інструкціями, що виконуватимуться для значення кожної окремої властивості.</dd>
+ <dt>{{jsxref("Statements/for-await...of", "for await...of")}}</dt>
+ <dd>Перебирає асинхронні ітерабельні об'єкти, подібні до масивів об'єкти, <a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators">ітератори та генератори</a>, викликаючи користувацький хук до ітерацій з інструкціями, що виконуватимуться для значення кожної окремої властивості.</dd>
+ <dt>{{jsxref("Statements/while", "while")}}</dt>
+ <dd>Створює цикл, який виконує вказану інструкцію, доки перевірочна умова дорівнює true. Умова обчислюється перед виконанням інструкції.</dd>
+</dl>
+
+<h3 id="Інші">Інші</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/debugger", "debugger")}}</dt>
+ <dd>Запускає будь-яку доступну налагоджувальну функціональність. Якщо налагоджувальна функціональність недоступна, цей оператор не матиме ефекту.</dd>
+ <dt>{{jsxref("Statements/export", "export")}}</dt>
+ <dd>Використовується для експорту функцій, щоб зробити їх доступними для імпорту у зовнішні модулі та інші скрипти.</dd>
+ <dt>{{jsxref("Statements/import", "import")}}</dt>
+ <dd>Використовується для імпорту функцій, експортованих з зовнішнього модуля чи іншого скрипта.</dd>
+ <dt><a href="/uk/docs/Web/JavaScript/Reference/Statements/import.meta"><code>import.meta</code></a></dt>
+ <dd>Об'єкт, що відкриває залежні від контексту метадані про модуль JavaScript.</dd>
+ <dt>{{jsxref("Statements/label", "label")}}</dt>
+ <dd>Надає інструкцію з ідентифікатором, на який можна посилатись при використанні інструкцій <code>break</code> або <code>continue</code>.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Statements/with", "with")}}</dt>
+ <dd>Розширює ланцюжок областей видимості для інструкції.</dd>
+</dl>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.statements")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators">Оператори</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/statements/label/index.html b/files/uk/web/javascript/reference/statements/label/index.html
new file mode 100644
index 0000000000..b29fa8fb42
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/label/index.html
@@ -0,0 +1,182 @@
+---
+title: Мітка
+slug: Web/JavaScript/Reference/Statements/label
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Statements/label
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>Мітка </strong>(label) може використовуватися з операторами {{jsxref("Statements/break", "break")}} та {{jsxref("Statements/continue", "continue")}}. Вона додається попереду виразу у вигляді ідентифікатора, на який можна посилатися.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-label.html")}}</div>
+
+
+
+<div class="note">
+<p><strong>Заувага:</strong> Використання помічених циклів або блоків є дуже нестандартним підходом. Зазвичай використовуються виклики функцій замість стрибків у циклах.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>label</em> :
+   <em>statement</em>
+</pre>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Будь-який ідентифікатор JavaScript, який не є зарезервованим словом.</dd>
+ <dt><code>statement</code></dt>
+ <dd>Інструкція JavaScript. Оператор <code>break</code> може використовуватися з будь-якою поміченою конструкцією, а оператор <code>continue</code> може використовуватися з поміченими циклами.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Ви можете використати мітку, щоб ідентифікувати цикл, а потім скористатись операторами <code>break</code> чи <code>continue</code>, щоб вказати, що програма має перервати чи продовжити його виконання.</p>
+
+<p>Зауважте, що у JavaScript <em>немає</em> оператора <code>goto</code>, ви можете використовувати мітки лише з <code>break</code> або <code>continue</code>.</p>
+
+<p>У <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">строгому режимі</a> не можна використовувати "<code>let</code>" в якості імені мітки. Це спричинить викидання {{jsxref("SyntaxError")}} (let є зарезервованим ідентифікатором).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_поміченого_continue_з_циклами_for">Використання поміченого <code>continue</code> з циклами <code>for</code></h3>
+
+<pre class="brush: js notranslate">var i, j;
+
+loop1:
+for (i = 0; i &lt; 3; i++) {      //Перший цикл for помічений як "loop1"
+   loop2:
+   for (j = 0; j &lt; 3; j++) {   //Другий цикл for помічений як "loop2"
+      if (i === 1 &amp;&amp; j === 1) {
+         continue loop1;
+      }
+      console.log('i = ' + i + ', j = ' + j);
+   }
+}
+
+// Результат:
+//   "i = 0, j = 0"
+//   "i = 0, j = 1"
+//   "i = 0, j = 2"
+//   "i = 1, j = 0"
+//   "i = 2, j = 0"
+//   "i = 2, j = 1"
+//   "i = 2, j = 2"
+// Зауважте, що пропущені як "i = 1, j = 1", так і "i = 1, j = 2"
+</pre>
+
+<h3 id="Використання_поміченого_оператора_continue">Використання поміченого оператора <code>continue</code></h3>
+
+<p>Маючи масив елементів та масив тестів, цей приклад рахує кількість елементів, які пройшли усі тести.</p>
+
+<pre class="brush: js notranslate">var itemsPassed = 0;
+var i, j;
+
+top:
+for (i = 0; i &lt; items.length; i++) {
+  for (j = 0; j &lt; tests.length; j++) {
+    if (!tests[j].pass(items[i])) {
+      continue top;
+    }
+  }
+
+  itemsPassed++;
+}</pre>
+
+<h3 id="Використання_поміченого_оператора_break_з_циклами_for">Використання поміченого оператора <code>break</code> з циклами <code>for</code></h3>
+
+<pre class="brush: js notranslate">var i, j;
+
+loop1:
+for (i = 0; i &lt; 3; i++) {      //Перший цикл for помічений як "loop1"
+   loop2:
+   for (j = 0; j &lt; 3; j++) {   //Другий цикл for помічений як "loop2"
+      if (i === 1 &amp;&amp; j === 1) {
+         break loop1;
+      }
+      console.log('i = ' + i + ', j = ' + j);
+   }
+}
+
+// Результат:
+//   "i = 0, j = 0"
+//   "i = 0, j = 1"
+//   "i = 0, j = 2"
+//   "i = 1, j = 0"
+// Зауважте різницю з попереднім прикладом з continue</pre>
+
+<h3 id="Використання_поміченого_оператора_break">Використання поміченого оператора <code>break</code></h3>
+
+<p>Маючи масив елементів та масив тестів, цей приклад визначає, чи усі елементи пройшли усі тести.</p>
+
+<pre class="brush: js notranslate">var allPass = true;
+var i, j;
+
+top:
+for (i = 0; items.length; i++)
+  for (j = 0; j &lt; tests.length; i++)
+    if (!tests[j].pass(items[i])) {
+      allPass = false;
+      break top;
+    }</pre>
+
+<h3 id="Використання_поміченого_блоку_з_оператором_break">Використання поміченого блоку з оператором <code>break</code></h3>
+
+<p>Ви можете використовувати мітки всередині звичайних блоків, але тільки оператор <code>break</code> може працювати з мітками не у циклах.</p>
+
+<pre class="brush: js notranslate">foo: {
+  console.log('пере');
+  break foo;
+  console.log('ця частина не виконається');
+}
+console.log('стрибнув');
+
+// цей код виведе:
+
+// "пере"
+// "стрибнув </pre>
+
+<h3 id="Помічені_оголошення_функцій">Помічені оголошення функцій</h3>
+
+<p>Починаючи з ECMAScript 2015, помічені оголошення функцій тепер стандартизовані для не строгого режиму у <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-labelled-function-declarations">додатку специфікації щодо веб-сумісності</a>.</p>
+
+<pre class="brush: js notranslate">L: function F() {}</pre>
+
+<p>Однак, у <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">строгому режимі</a> це викине помилку {{jsxref("SyntaxError")}}:</p>
+
+<pre class="brush: js notranslate">'use strict';
+L: function F() {}
+// SyntaxError: functions cannot be labelled</pre>
+
+<p><a href="/uk/docs/Web/JavaScript/Reference/Statements/function*">Функції-генератори</a> також не можуть мати мітки ні у строгому, ні у звичайному режимі:</p>
+
+<pre class="brush: js notranslate">L: function* F() {}
+// SyntaxError: generator functions cannot be labelled
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-labelled-statements', 'Labelled statement')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.statements.label")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Statements/break", "break")}}</li>
+ <li>{{jsxref("Statements/continue", "continue")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/statements/let/index.html b/files/uk/web/javascript/reference/statements/let/index.html
new file mode 100644
index 0000000000..ee0db303e6
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/let/index.html
@@ -0,0 +1,272 @@
+---
+title: let
+slug: Web/JavaScript/Reference/Statements/let
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - let
+  - змінні
+translation_of: Web/JavaScript/Reference/Statements/let
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Оператор <strong><code>let</code></strong> оголошує локальну змінну блочної області видимості, з необов'язковим присвоєнням їй початкового значення.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-let.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">let <em>var1</em> [= <em>value1</em>] [, <em>var2</em> [= <em>value2</em>]] [, ..., <em>varN</em> [= <em>valueN</em>];</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>var1</code>, <code>var2</code>, …, <code>varN</code></dt>
+ <dd>Імена змінної або змінних, що оголошуються. Кожне ім'я має бути дозволеним ідентифікатором JavaScript.</dd>
+ <dt><code>value1</code>, <code>value2</code>, …, <code>valueN</code> {{optional_inline}}</dt>
+ <dd>Для кожної оголошеної змінної ви можете вказати її початкове значення будь-яким дозволеним виразом JavaScript.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Оператор <strong><code>let</code></strong> дозволяє оголошувати змінні, що обмежені областю видимості {{jsxref("statements/block", "блоку")}} або виразу, для якого використовуються, на відміну від ключового слова {{jsxref("statements/var", "var")}}, яке визначає змінну глобально, чи локально для всієї функції, незалежно від області видимості блоку. Інша відмінність між операторами {{jsxref("statements/var", "var")}} та <code>let</code> полягає в тому, що останній ініціалізується тільки після <a href="#Тимчасова_мертва_зона">оцінювання синтаксичним аналізатором (дивіться нижче)</a>.</p>
+
+<p>Як і {{jsxref("statements/const", "const", "Description")}}, <code>let</code> <em>не</em> створює властивостей об'єкта {{domxref('window')}} при глобальному оголошенні (у області видимості верхнього рівня).</p>
+
+<p>Пояснення, чому була обрана назва "<strong>let</strong>" можна подивитись <a href="https://stackoverflow.com/questions/37916940/why-was-the-name-let-chosen-for-block-scoped-variable-declarations-in-javascri">тут</a>.</p>
+
+<h3 id="Правила_області_видимості">Правила області видимості</h3>
+
+<p>Областю видимості змінних, оголошених через <strong><code>let</code></strong>, є блок, у якому вони визначені, а також будь-які вкладені в нього блоки. У цьому сенсі <strong><code>let</code></strong> дуже схожий на <strong><code>var</code></strong>. Головна відмінність полягає в тому, що областю видимості змінної <strong><code>var</code></strong> є уся замикаюча функція:</p>
+
+<pre class="brush:js">function varTest() {
+  var x = 1;
+  {
+    var x = 2;  // та сама змінна!
+    console.log(x);  // 2
+  }
+  console.log(x);  // 2
+}
+
+function letTest() {
+  let x = 1;
+  {
+    let x = 2;  // інша змінна
+    console.log(x);  // 2
+  }
+  console.log(x);  // 1
+}
+</pre>
+
+<p id="Scoping_rules">На верхньому рівні програм та функцій <strong><code>let</code></strong>, на відміну від <strong><code>var</code></strong>, не створює властивості глобального об'єкта. Наприклад:</p>
+
+<pre class="brush:js">var x = 'глобальна';
+let y = 'глобальна';
+console.log(this.x); // "глобальна"
+console.log(this.y); // undefined
+</pre>
+
+<h3 id="Імітація_приватних_членів">Імітація приватних членів</h3>
+
+<p>Працюючи з <a href="/uk/docs/Glossary/Constructor">конструкторами</a>, можна використовувати <strong><code>let</code></strong>-зв'язування для створення приватних членів без використання <a href="/uk/docs/Web/JavaScript/Closures">замикань</a>:</p>
+
+<pre class="brush:js">var Thing;
+
+{
+  let privateScope = new WeakMap();
+  let counter = 0;
+
+  Thing = function() {
+    this.someProperty = 'foo';
+
+    privateScope.set(this, {
+      hidden: ++counter,
+    });
+  };
+
+  Thing.prototype.showPublic = function() {
+    return this.someProperty;
+  };
+
+  Thing.prototype.showPrivate = function() {
+    return privateScope.get(this).hidden;
+  };
+}
+
+console.log(typeof privateScope);
+// "undefined"
+
+var thing = new Thing();
+
+console.log(thing);
+// Thing {someProperty: "foo"}
+
+thing.showPublic();
+// "foo"
+
+thing.showPrivate();
+// 1
+</pre>
+
+<p>Такий самий шаблон приватності з використанням замикань для локальних змінних можна створити через <code>var</code>, але це потребує функціональної області видимості (зазвичай, це НВФВ у шаблоні модуль) замість просто блочної області видимості у вищенаведеному прикладі.</p>
+
+<h3 id="Повторні_оголошення">Повторні оголошення</h3>
+
+<p>Повторне оголошення тієї самої змінної у області видимості тієї самої функції чи блоку спричиняє помилку {{jsxref("SyntaxError")}}.</p>
+
+<pre class="brush: js example-bad">if (x) {
+  let foo;
+  let foo; // викидається SyntaxError.
+}
+</pre>
+
+<p>Ви можете стикнутися з помилками у конструкціях <a href="/uk/docs/JavaScript/Reference/Statements/switch"><code>switch</code></a>, бо вони мають лише один блок.</p>
+
+<pre class="brush: js example-bad">let x = 1;
+switch(x) {
+  case 0:
+    let foo;
+    break;
+
+  case 1:
+    let foo; // SyntaxError через повторне оголошення.
+    break;
+}</pre>
+
+<p>Однак, важливо зазначити, що блок, вкладений у блок case, створить нове лексичне середовище блочної області видимості, яке не викличе помилок повторного оголошення, показаних вище.</p>
+
+<pre class="brush: js">let x = 1;
+
+switch(x) {
+  case 0: {
+    let foo;
+    break;
+  }
+  case 1: {
+    let foo;
+    break;
+  }
+}</pre>
+
+<h3 id="Тимчасова_мертва_зона">Тимчасова мертва зона</h3>
+
+<p>На відміну від змінних, оголошених через <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting">var</a></code>, які спочатку мають значення <code>undefined</code>, <code>let</code>-змінні <em>не</em> ініціалізуються, поки не відбудеться обчислення їхнього оголошення. Звернення до змінної до ініціалізації призводить до викидання <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError">ReferenceError</a></code>. Змінна знаходиться у "тимчасовій мертвій зоні" від початку блоку і до проходження ініціалізації.</p>
+
+<pre class="brush: js example-bad">function do_something() {
+  console.log(bar); // undefined
+  console.log(foo); // ReferenceError
+  var bar = 1;
+  let foo = 2;
+}</pre>
+
+<h3 id="Тимчасова_мертва_зона_та_typeof">Тимчасова мертва зона та <code>typeof</code></h3>
+
+<p>На відміну від просто неоголошених змінних та змінних, що містять значення <code>undefined</code>, використання оператора <code>typeof</code> для перевірки типу змінної, що знаходиться у своїй ТМЗ, викине <code>ReferenceError</code>:</p>
+
+<pre class="brush: js">// виведе 'undefined'
+console.log(typeof undeclaredVariable);
+// призведе до 'ReferenceError'
+console.log(typeof i);
+let i = 10;</pre>
+
+<h3 id="Ще_один_приклад_тимчасової_мертвої_зони_у_поєднанні_з_лексичною_областю_видимості">Ще один приклад тимчасової мертвої зони у поєднанні з лексичною областю видимості</h3>
+
+<p>Через наявність лексичної області видимості, ідентифікатор <code>foo</code> у виразі <code>(foo + 55)</code> оцінюється як ідентифікатор foo блоку if, а не розташована вище змінна foo зі значенням 33.</p>
+
+<p>У цьому конретному рядку змінна <code>foo</code> блоку if вже була створена у лексичному середовищі, але ще не пройшла (і перервала) свою ініціалізацію (яка є частиною інструкції).</p>
+
+<p>Змінна <code>foo</code> блоку if досі у тимчасовій мертвій зоні.</p>
+
+<pre class="brush: js example-bad">function test(){
+   var foo = 33;
+   if (true) {
+      let foo = (foo + 55); // ReferenceError
+   }
+}
+test();</pre>
+
+<p>Цей феномен може заплутати, наприклад, у наступній ситуації. Інструкція <code>let n of n.a</code> вже знаходиться всередині приватної області видимості блоку циклу for. Отже, ідентифікатор <code>n.a</code> вважається властивістю 'a' об'єкта 'n', розташованого у першій частині цієї ж інструкції ("let n").</p>
+
+<p>Він досі знаходиться у тимчасовій мертвій зоні, оскільки його оголошення ще не було виконано та перервалось.</p>
+
+<pre class="brush: js example-bad">function go(n) {
+  // n тут визначений!
+  console.log(n); // Object {a: [1,2,3]}
+
+  for (let n of n.a) { // ReferenceError
+    console.log(n);
+  }
+}
+
+go({a: [1, 2, 3]});
+</pre>
+
+<h2 id="Інші_ситуації">Інші ситуації</h2>
+
+<p>При використанні всередині блоку, <strong><code>let</code></strong> обмежує область видимості змінної цим блоком. Зауважте відмінність від <code><strong>var</strong></code><em>,</em> чия область видимості - функція, де відбулось оголошення.</p>
+
+<pre class="brush: js">var a = 1;
+var b = 2;
+
+if (a === 1) {
+  var a = 11; // глобальна область видимості
+  let b = 22; // областю видимості є блок if
+
+  console.log(a);  // 11
+  console.log(b);  // 22
+}
+
+console.log(a); // 11
+console.log(b); // 2
+</pre>
+
+<p>Однак, комбінація оголошень <code><strong>var</strong></code> та <strong><code>let</code></strong>, наведена нижче, спричинить <code>SyntaxError </code>через підняття <code><strong>var</strong></code> наверх блоку. Це призводить до неявного повторного оголошення змінної.</p>
+
+<pre class="brush: js example-bad">let x = 1;
+
+{
+  var x = 2; // SyntaxError через повторне оголошення
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення. Не визначає let-вирази та let-блоки.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.statements.let")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/var"><code>var</code></a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a></li>
+ <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-let-and-const/">ES6 In Depth: <code>let</code> and <code>const</code></a></li>
+ <li><a href="https://blog.mozilla.org/addons/2015/10/14/breaking-changes-let-const-firefox-nightly-44/">Breaking changes in <code>let</code> and <code>const</code> in Firefox 44</a></li>
+ <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch3.md">You Don't Know JS: Scope &amp; Closures: Chapter 3: Function vs. Block Scope</a></li>
+ <li><a href="https://stackoverflow.com/a/33198850/1125029">StackOverflow: What is the Temporal Dead Zone. </a></li>
+ <li><a href="https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var-to-declare-a-variable">StackOverflow: What is the difference between using let and var?</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/statements/return/index.html b/files/uk/web/javascript/reference/statements/return/index.html
new file mode 100644
index 0000000000..030027232f
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/return/index.html
@@ -0,0 +1,159 @@
+---
+title: return
+slug: Web/JavaScript/Reference/Statements/return
+tags:
+  - JavaScript
+  - Оператор
+translation_of: Web/JavaScript/Reference/Statements/return
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>Оператор</strong> <strong><code>return</code></strong> завершує виконання функції та вказує значення, що буде повернене функцією.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-return.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">return [[expression]]; </pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>Вираз, значення якого буде повернене. Якщо пропущений, повертається <code>undefined</code>.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Коли у тілі функції використовується оператор <code>return</code>, виконання функції зупиняється. За наявності, надане значення повертається у інструкцію, що викликала функцію. Наприклад, наступна функція повертає квадрат свого аргументу <code>x</code>, де <code>x</code> є числом.</p>
+
+<pre class="brush: js">function square(x) {
+   return x * x;
+}
+var demo = square(3);
+// demo дорівнюватиме 9
+</pre>
+
+<p>Якщо значення не вказане, повертається <code>undefined</code>.</p>
+
+<p>Всі наведені оператори return переривають виконання функції:</p>
+
+<pre class="brush: js">return;
+return true;
+return false;
+return x;
+return x + y / 3;
+</pre>
+
+<h3 id="Автоматична_вставка_крапки_з_комою">Автоматична вставка крапки з комою</h3>
+
+<p>Оператор <code>return</code> підпадає під <a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">автоматичну вставку крапки з комою (ASI, automatic semicolon insertion)</a>. Символи кінця рядка недозволені між ключовим словом <code>return</code> та виразом.</p>
+
+<pre class="brush: js">return
+a + b;
+</pre>
+
+<p>перетворюється у:</p>
+
+<pre class="brush: js">return;
+a + b;
+</pre>
+
+<p>Консоль виведе попередження "unreachable code after return statement" (недосяжний код після оператора return).</p>
+
+<div class="note">Починаючи з Gecko 40 {{geckoRelease(40)}}, у консолі виводиться попередження, якщо після оператора return знайдено недосяжний код.</div>
+
+<p>Щоб уникнути цієї проблеми (запобігти ASI), використовуйте дужки:</p>
+
+<pre class="brush: js">return (
+  a + b
+);
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Переривання_функції">Переривання функції</h3>
+
+<p>Функція негайно зупиняється у точці виклику оператора <code>return</code>.</p>
+
+<pre class="brush: js">function counter() {
+  for (var count = 1; ; count++) {  // нескінченний цикл
+    console.log(count + 'A'); // до 5
+      if (count === 5) {
+        return;
+      }
+      console.log(count + 'B');  // до 4
+    }
+  console.log(count + 'C');  // ніколи не виводиться
+}
+
+counter();
+
+// Результат:
+// 1A
+// 1B
+// 2A
+// 2B
+// 3A
+// 3B
+// 4A
+// 4B
+// 5A
+</pre>
+
+<h3 id="Повернення_результату_функції">Повернення результату функції</h3>
+
+<p>Дивіться також статтю про <a href="/uk/docs/Web/JavaScript/Closures">Замикання</a>.</p>
+
+<pre class="brush: js">function magic() {
+  return function calc(x) { return x * 42; };
+}
+
+var answer = magic();
+answer(1337); // 56154
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.9', 'Return statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-return-statement', 'Return statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.statements.return")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Functions" title="En/Core_JavaScript_1.5_Reference/Functions">Функції</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Closures">Замикання</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/statements/switch/index.html b/files/uk/web/javascript/reference/statements/switch/index.html
new file mode 100644
index 0000000000..986ba49599
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/switch/index.html
@@ -0,0 +1,295 @@
+---
+title: switch
+slug: Web/JavaScript/Reference/Statements/switch
+tags:
+  - JavaScript
+  - Інструкція
+  - Довідка
+translation_of: Web/JavaScript/Reference/Statements/switch
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><span class="seoSummary"><strong>Інструкція</strong> <strong><code>switch</code> </strong>обчислює <a href="/uk/docs/Web/JavaScript/Guide/Вирази_та_оператори">вираз</a>, зіставляє значення виразу зі значенням блоку <code>case</code> та виконує <a href="/uk/docs/Web/JavaScript/Reference/Statements">інструкції</a>, що відносяться до цього блоку, а також інструкції у блоках <code>case</code>, наступних за блоком, що має збіг.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-switch.html", "taller")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">switch (<var>expression</var>) {
+  case <var>value1</var>:
+    //Інструкції, що виконуються, коли
+    //результат виразу збігається з value1
+    [break;]
+  case <var>value2</var>:
+    //Інструкції, що виконуються, коли
+    //результат виразу збігається з value2
+    [break;]
+  ...
+  case <var>valueN</var>:
+    //Інструкції, що виконуються, коли
+    //результат виразу збігається з valueN
+    [break;]
+  [default:
+    //Інструкції, що виконуються, коли жодне
+    //значення не збігається зі значенням виразу
+    [break;]]
+}</pre>
+
+<dl>
+ <dt><code><var>expression</var></code></dt>
+ <dd>Вираз, чий результат зіставляється з кожним блоком <code>case</code>.</dd>
+ <dt><code>case <var>valueN</var></code> {{optional_inline}}</dt>
+ <dd>Блок <code>case</code>, який зіставляється з виразом <code><var>expression</var></code>. Якщо значення <code><var>expression</var></code> збігається з вказаним значенням <code><var>valueN</var></code>, інструкції всередині блоку <code>case</code> виконуються, поки не досягнуть або кінця інструкції <code>switch</code>, або оператора <code>break</code>.</dd>
+ <dt><code>default</code> {{optional_inline}}</dt>
+ <dd>Блок <code>default</code>; якщо вказаний, виконується у випадку, коли значення <code><var>expression</var></code> не збігається з жодним з блоків <code>case</code>.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Інструкція <code>switch</code> спочатку обчислює вираз. Далі шукає перший блок <code>case</code>, чий вираз має таке саме значення, що й результат вхідного виразу (використовуючи <a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння">строгу рівність</a>, <code>===</code>) та передає контроль цьому блоку, виконуючи інструкції, що до нього відносяться. (Якщо більше одного <code>case</code> збігаються з наданим значенням, обирається перший знайдений <code>case</code>, навіть якщо блоки <code>case</code> не дорівнюють одне одному.)</p>
+
+<p>Якщо не знайдено жодного збігу серед блоків <code>case</code>, програма шукає необов'язковий блок <code>default</code>, і, якщо знаходить, передає йому контроль, виконуючи відповідні інструкції. Якщо блоку <code>default</code> не знайдено, програма продовжує виконання першої з інструкції, що йде після завершення <code>switch</code>. Прийнято писати блок <code>default</code> останнім, але це не обов'язково.</p>
+
+<p>Необов'язковий оператор <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/break" title="JavaScript/Reference/Statements/break">break</a></code> у кожному <code>case</code> гарантує, що програма перериває виконання <code>switch</code>, як тільки виконані знайдені інструкції, та продовжує виконання з інструкції, що йде після <code>switch</code>. Якщо <code>break</code> не вказано, програма продовжує виконання наступної інструкції у <code>switch</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_switch">Використання <code>switch</code></h3>
+
+<p>У наступному прикладі, якщо <code>expr</code> дорівнює <code>Банани</code>, програма знаходить збіг з блоком <code>case 'Банани'</code> та виконує відповідну інструкцію. Дійшовши до оператора <code>break</code>, програма перериває виконання <code>switch</code> та виконує інструкцію, наступну після <code>switch</code>. Якби не оператор <code>break</code>, інструкція блоку <code>case 'Вишні'</code> також би виконалась.</p>
+
+<pre class="brush: js">switch (expr) {
+  case 'Апельсини':
+    console.log('Апельсини коштують $0.59 за фунт.');
+    break;
+  case 'Яблука':
+    console.log('Яблука коштують $0.32 за фунт.');
+    break;
+  case 'Банани':
+    console.log('Банани коштують $0.48 за фунт.');
+    break;
+  case 'Вишні':
+    console.log('Вишні коштують $3.00 за фунт.');
+    break;
+  case 'Манго':
+  case 'Папайя':
+    console.log('Манго та папайя коштують $2.79 за фунт.');
+    break;
+  default:
+    console.log('Вибачте, в нас закінчились ' + expr + '.');
+}
+
+console.log("Бажаєте чого-небудь ще?");
+</pre>
+
+<h3 id="Що_станеться_якщо_я_забуду_break">Що станеться, якщо я забуду <code>break</code>?</h3>
+
+<p>Якщо ви забудете <code>break</code>, скрипт буде виконуватись, починаючи від блоку, який відповідає умові, і продовжить виконувати наступні блоки, <strong>незалежно від того, чи відповідають вони умові</strong>.</p>
+
+<p>Дивіться наступний приклад:</p>
+
+<pre class="brush: js">var foo = 0;
+switch (foo) {
+  case -1:
+    console.log('від\'ємна 1');
+    break;
+  case 0: // foo дорівнює 0, отже, умова виконана, і цей блок виконається
+    console.log(0);
+    // ЗАУВАГА: забутий break стояв би тут
+  case 1: // немає оператора break у 'case 0:', тому цей блок також виконається
+    console.log(1);
+    break; // програма зустріне тут break і не виконуватиме 'case 2:'
+  case 2:
+    console.log(2);
+    break;
+  default:
+    console.log('default');
+}</pre>
+
+<h3 id="Чи_можна_поставити_default_між_блоками_case">Чи можна поставити <code>default</code> між блоками <code>case</code>?</h3>
+
+<p>Так, можна! JavaScript відправить вас у <code>default</code>, якщо не знайде збігів:</p>
+
+<pre class="brush: js">var foo = 5;
+switch (foo) {
+  case 2:
+    console.log(2);
+    break; // програма зустріне тут break, і не виконуватиме 'default:'
+  default:
+    console.log('default')
+    // проходимо далі
+  case 1:
+    console.log('1');
+}
+</pre>
+
+<p>Це також працює, якщо поставити <code>default</code> перед усіма блоками <code>case</code>.</p>
+
+<h3 id="Методи_для_кількох_критеріїв_case">Методи для кількох критеріїв <code>case</code></h3>
+
+<p>Джерело цієї техніки тут:</p>
+
+<p><a href="http://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript">Інструкція switch з кількома блоками case у JavaScript (Stack Overflow)</a></p>
+
+<h4 id="Декілька_case_одна_операція">Декілька <code>case</code> : одна операція</h4>
+
+<p>Цей метод використовує переваги того факту, що, якщо в кінці блоку <code>case</code> немає оператора break, він продовжить виконувати наступний блок <code>case</code>, незалежно від того, чи той відповідає необхідній умові. (Дивіться розділ <a href="#Що_станеться_якщо_я_забуду_break">Що станеться, якщо я забуду <code>break</code>?</a>)</p>
+
+<p>Ось приклад інструкції для єдиної операції з послідовних <code>case</code>, де чотири різні значення виконують одне й те саме.</p>
+
+<pre class="brush: js">var Animal = 'Жирафа';
+switch (Animal) {
+  case 'Корова':
+  case 'Жирафа':
+  case 'Собака':
+  case 'Свиня':
+    console.log('Ці тварини підуть на Ноїв ковчег.');
+    break;
+  case 'Динозавр':
+  default:
+    console.log('Ця тварина не піде.');
+}</pre>
+
+<h4 id="Декілька_case_ланцюгові_операції">Декілька <code>case</code> : ланцюгові операції</h4>
+
+<p>Ось приклад кількох операцій у послідовних блоках <code>case</code>, де, в залежності від наданого цілого числа, ви можете отримати різний результат. Він демонструє, що виконуватиметься у тому порядку, в якому ви розташували блоки <code>case</code>, і вони не обов'язково мають бути чисельно послідовні. У JavaScript ви навіть можете змішувати їх з рядковими значеннями.</p>
+
+<pre class="brush: js">var foo = 1;
+var output = 'Результат: ';
+switch (foo) {
+  case 0:
+    output += 'То ';
+  case 1:
+    output += 'як ';
+  case 2:
+    output += 'тебе ';
+  case 3:
+    output += 'звати';
+  case 4:
+    output += '?';
+    console.log(output);
+    break;
+  case 5:
+    output += '!';
+    console.log(output);
+    break;
+  default:
+    console.log('Будь ласка, оберіть число від 0 до 5!');
+}</pre>
+
+<p>Результат цього прикладу:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Значення</th>
+   <th scope="col">Виведений текст</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>foo</code> дорівнює <code>NaN</code> або не <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code> чи <code>0</code></td>
+   <td>Будь ласка, оберіть число від 0 до 5!</td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td>Результат: То як тебе звати?</td>
+  </tr>
+  <tr>
+   <td><code>1</code></td>
+   <td>Результат: як тебе звати?</td>
+  </tr>
+  <tr>
+   <td><code>2</code></td>
+   <td>Результат: тебе звати?</td>
+  </tr>
+  <tr>
+   <td><code>3</code></td>
+   <td>Результат: звати?</td>
+  </tr>
+  <tr>
+   <td><code>4</code></td>
+   <td>Результат: ?</td>
+  </tr>
+  <tr>
+   <td><code>5</code></td>
+   <td>Результат: !</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Змінні_блочної_області_видимості_у_інструкціях_switch">Змінні блочної області видимості у інструкціях <code>switch</code></h3>
+
+<p>Маючи підтримку ECMAScript 2015 (ES6) у більшості сучасних веб-переглядачів, у певних випадках ви захочете використати оператори {{jsxref("Statements/let", "let")}} та {{jsxref("Statements/const", "const")}} для оголошення змінних блочної області видимості.</p>
+
+<p>Погляньте на цей приклад:</p>
+
+<pre class="brush: js">const action = 'скажи_привіт';
+switch (action) {
+  case 'скажи_привіт':
+    let message = 'привіт';
+    console.log(message);
+    break;
+  case 'скажи_бувай':
+    let message = 'бувай';
+    console.log(message);
+    break;
+  default:
+    console.log('Отримана порожня дія.');
+    break;
+}</pre>
+
+<p>Цей приклад спричинить помилку <code>Uncaught SyntaxError: Identifier 'message' has already been declared</code>, яку ви, можливо, не очікували.</p>
+
+<p>Все тому, що перше оголошення <code>let message = 'привіт';</code> конфліктує з другим оголошенням <code>let message = 'бувай';</code> хоча вони й розташовані у окремих блоках <code>case 'скажи_привіт':</code> та <code>case 'скажи_бувай':</code>. Зрештою, це відбувається тому, що обидва оголошення <code>let</code> інтерпретуються як дублюючі оголошення однієї змінної всередині тієї самої блочної області видимості.</p>
+
+<p>Ми можемо легко це виправити, огорнувши наші блоки <code>case</code> у дужки:</p>
+
+<pre class="brush: js">const action = 'скажи_привіт';
+switch (action) {
+  case 'скажи_привіт': <strong>{ // додані дужки</strong>
+    let message = 'привіт';
+    console.log(message);
+    break;
+  <strong>} // додані дужки</strong>
+  case 'скажи_бувай': <strong>{ // додані дужки</strong>
+    let message = 'бувай';
+    console.log(message);
+    break;
+  <strong>} // додані дужки</strong>
+  default: <strong>{ // додані дужки</strong>
+    console.log('Отримана порожня дія.');
+    break;
+  <strong>} // додані дужки</strong>
+}</pre>
+
+<p>Тепер цей код, як і задумано, виведе у консоль <code>привіт</code> без жодних помилок.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.statements.switch")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Statements/if...else", "if...else")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/statements/throw/index.html b/files/uk/web/javascript/reference/statements/throw/index.html
new file mode 100644
index 0000000000..96b8974f40
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/throw/index.html
@@ -0,0 +1,198 @@
+---
+title: throw
+slug: Web/JavaScript/Reference/Statements/throw
+tags:
+  - JavaScript
+  - throw
+  - виняток
+translation_of: Web/JavaScript/Reference/Statements/throw
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>Оператор</strong> <strong><code>throw</code> </strong>викидає визначений користувачем виняток. Виконання поточної функції буде зупинено (оператори після <code>throw</code> не будуть виконані), а контроль буде передано до першого блоку <a href="/uk/docs/Web/JavaScript/Reference/Statements/try...catch"><code>catch</code></a> у стеку викликів. Якщо жодного блоку <code>catch</code> не існує, виконання програми переривається.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-throw.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">throw <em>expression</em>; </pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>Вираз, що викидається.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Скористайтеся оператором <code>throw</code>, щоб викинути виняток. Коли викидаєте виняток, <code>expression</code> вказує значення винятка. Кожна з наступних команд викидає виняток:</p>
+
+<pre class="brush: js">throw 'Error2'; // генерує виняток, що має рядкове значення
+throw 42;       // генерує виняток, що має значення 42
+throw true;     // генерує виняток, що має значення true
+throw new Error('Required');  // генерує об'єкт помилки з повідомленням Required
+</pre>
+
+<p>Також зазначте, що на оператор <code>throw</code> впливає <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">автоматична вставка крапки з комою (automatic semicolon insertion, ASI)</a>, оскільки між ключовим словом <code>throw</code> та виразом не дозволяється вставляти символи закінчення рядка.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Викидання_обєкта">Викидання об'єкта</h3>
+
+<p>Ви можете вказати об'єкт, коли викидаєте виняток. Після цього ви можете звертатися до властивостей об'єкта у блоці <code>catch</code>. Наступний приклад створює об'єкт типу <code>UserException</code>, і далі використовує його з оператором <code>throw</code>.</p>
+
+<pre class="brush: js">function UserException(message) {
+   this.message = message;
+   this.name = 'UserException';
+}
+function getMonthName(mo) {
+   mo = mo - 1; // Припасувати номер місяця до індексу масиву (1 = Січ, 12 = Груд)
+   var months = ['Січ', 'Лют', 'Берез', 'Квіт', 'Трав', 'Черв', 'Лип',
+      'Серп', 'Верес', 'Жовт', 'Листоп', 'Груд'];
+   if (months[mo] !== undefined) {
+      return months[mo];
+   } else {
+      throw new UserException('InvalidMonthNo');
+   }
+}
+
+try {
+   // команди до виконання
+   var myMonth = 15; // 15 не входить у визначені межі й викликає виняток
+   var monthName = getMonthName(myMonth);
+} catch (e) {
+   monthName = 'unknown';
+   console.error(e.message, e.name); // передати об'єкт винятку до обробника помилок
+}
+</pre>
+
+<h3 id="Ще_один_приклад_викидання_обєкта">Ще один приклад викидання об'єкта</h3>
+
+<p>Наступний приклад перевіряє наданий текстовий рядок на формат поштового індексу. Якщо поштовий індекс використовує неправильний формат, оператор throw викидає виняток, створюючи об'єкт типу <code>ZipCodeFormatException</code>.</p>
+
+<pre class="brush: js">/*
+ * Створює об'єкт ZipCode.
+ *
+ * Дозволені формати поштового індексу:
+ *    12345
+ *    12345-6789
+ *    123456789
+ *    12345 6789
+ *
+ * Якщо аргумент, переданий до конструктора ZipCode, не відповідає
+ * жодному з цих шаблонів, викидається виняток.
+ */
+
+function ZipCode(zip) {
+   zip = new String(zip);
+   pattern = /[0-9]{5}([- ]?[0-9]{4})?/;
+   if (pattern.test(zip)) {
+      // значення поштового індексу буде першим збігом у рядку
+      this.value = zip.match(pattern)[0];
+      this.valueOf = function() {
+         return this.value
+      };
+      this.toString = function() {
+         return String(this.value)
+      };
+   } else {
+      throw new ZipCodeFormatException(zip);
+   }
+}
+
+function ZipCodeFormatException(value) {
+   this.value = value;
+   this.message = 'не відповідає очікуваному формату поштового індексу';
+   this.toString = function() {
+      return this.value + this.message;
+   };
+}
+
+/*
+ * Це можна вставити у скрипт, який перевіряє дані адреси
+ * на відповідність формату адрес.
+ */
+
+const ZIPCODE_INVALID = -1;
+const ZIPCODE_UNKNOWN_ERROR = -2;
+
+function verifyZipCode(z) {
+   try {
+      z = new ZipCode(z);
+   } catch (e) {
+      if (e instanceof ZipCodeFormatException) {
+         return ZIPCODE_INVALID;
+      } else {
+         return ZIPCODE_UNKNOWN_ERROR;
+      }
+   }
+   return z;
+}
+
+a = verifyZipCode(95060);         // повертає 95060
+b = verifyZipCode(9560);          // повертає -1
+c = verifyZipCode('a');           // повертає -1
+d = verifyZipCode('95060');       // повертає 95060
+e = verifyZipCode('95060 1234');  // повертає 95060 1234
+</pre>
+
+<h3 id="Повторне_викидання_винятку">Повторне викидання винятку</h3>
+
+<p>Ви можете скористатись оператором <code>throw</code>, щоб повторно викинути виняток після того, як перехопите його. Наступний приклад перехоплює виняток з числовим значенням та повторно викидає його, якщо значення більше за 50. Повторно викинутий виняток спливає наверх до замикаючої функції або на верхній рівень, так, що користувач його бачить.</p>
+
+<pre class="brush: js">try {
+   throw n; // викидає виняток з числовим значенням
+} catch (e) {
+   if (e &lt;= 50) {
+      // команди для обробки винятків 1-50
+   } else {
+      // неможливо обробити цей виняток, тому викидаємо його повторно
+      throw e;
+   }
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.4</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.statements.throw")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/try...catch"><code>try...catch</code></a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/statements/try...catch/index.html b/files/uk/web/javascript/reference/statements/try...catch/index.html
new file mode 100644
index 0000000000..9d506beb60
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/try...catch/index.html
@@ -0,0 +1,319 @@
+---
+title: try...catch
+slug: Web/JavaScript/Reference/Statements/try...catch
+tags:
+  - Error
+  - JavaScript
+  - виняток
+  - помилка
+translation_of: Web/JavaScript/Reference/Statements/try...catch
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Конструкція <strong><code>try...catch</code></strong> позначає блок команд, які треба виконати, та визначає реакцію в разі, якщо буде викинуто виняток.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-trycatch.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">try {
+  <em>try_statements</em>
+}
+[catch (<em>exception_var_1</em> if <em>condition_1</em>) { // нестандартна форма
+  <em>catch_statements_1</em>
+}]
+...
+[catch (<em>exception_var_2</em>) {
+  <em>catch_statements_2</em>
+}]
+[finally {
+  <em>finally_statements</em>
+}]
+</pre>
+
+<dl>
+ <dt><code>try_statements</code></dt>
+ <dd>Команди, які треба виконати.</dd>
+</dl>
+
+<dl>
+ <dt><code>catch_statements_1</code>, <code>catch_statements_2</code></dt>
+ <dd>Команди, що виконуються, якщо викинуто виняток у блоці <code>try</code>.</dd>
+</dl>
+
+<dl>
+ <dt><code>exception_var_1</code>, <code>exception_var_2</code></dt>
+ <dd>Ідентифікатор, що містить об'єкт винятку для відповідного блоку <code>catch</code>.</dd>
+</dl>
+
+<dl>
+ <dt><code>condition_1</code></dt>
+ <dd>Умовний вираз.</dd>
+</dl>
+
+<dl>
+ <dt><code>finally_statements</code></dt>
+ <dd>Команди, що виконуються після завершення блоку <code>try</code>. Ці команди виконуються незалежно від того, чи було викинуто або перехоплено виняток.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Вираз <code>try</code> містить одну або більше команд у блоці <code>try</code>. Фігурні дужки <code>{}</code> є обов'язковими, навіть для однієї команди. Має бути присутній принаймні один блок <code>catch</code> або <code>finally</code>. Це утворює три можливі форми виразу <code>try</code>:</p>
+
+<ol>
+ <li><code>try...catch</code></li>
+ <li><code>try...finally</code></li>
+ <li><code>try...catch...finally</code></li>
+</ol>
+
+<p>Блок <code>catch</code> містить команди, які визначають, що робити, якщо викинуто виняток у блоці <code>try</code>. Отже, ви хочете, щоб блок <code>try</code> виконався успішно, а в разі неуспіху ви хочете передати контроль до блоку <code>catch</code>. В разі, якщо будь-який вираз всередині блоку <code>try</code> (або функція, викликана зсередини блоку <code>try</code>) викидає виняток, контроль негайно переходить до блоку <code>catch</code>. Якщо жодних винятків у блоці <code>try</code> не було викинуто, блок <code>catch</code> пропускається.</p>
+
+<p>Блок <code>finally</code> виконується після виконання блоків <code>try</code> та <code>catch</code>, але до команд, що йдуть після виразу <code>try</code>. Він завжди виконується, незалежно від того, чи було викинуто або перехоплено виняток.</p>
+
+<p>Ви можете створити один або більше вкладених виразів <code>try</code>. Якщо внутрішній <code>try</code> не має блоку <code>catch</code>, контроль передається у блок <code>catch</code> зовнішнього <code>try</code>.</p>
+
+<p>Ви також можете використовувати <code>try</code>, щоб обробляти винятки JavaScript. Ви знайдете більше інформації щодо винятків JavaScript у <a href="/uk/docs/Web/JavaScript/Guide" title="en/JavaScript/Guide">Посібнику JavaScript</a>.</p>
+
+<h3 id="Безумовний_catch">Безумовний <code>catch</code></h3>
+
+<p>Коли використовується один безумовний блок <code>catch</code>, перехід у <code>catch</code> відбувається у випадку викидання будь-якого винятку. Наприклад, коли виняток стається у наступному коді, контроль передається до блоку <code>catch</code>.</p>
+
+<pre class="brush: js">try {
+  throw 'myException'; // генерує виняток
+}
+catch (e) {
+  // команди обробки будь-яких винятків
+  logMyErrors(e); // передає об'єкт винятку до обробника помилок
+}
+</pre>
+
+<p>Блок <code>catch</code> вказує ідентифікатор (<code>e</code> у наведеному прикладі), який містить значення, визначене у операторі <code>throw</code>. Блок <code>catch</code> унікальний тим, що JavaScript створює цей ідентифікатор при вході у блок <code>catch</code>, а також додає його у область видимості; ідентифікатор "живе" тільки протягом виконання блоку <code>catch</code>; коли <code>catch</code> завершується, ідентифікатор більше недоступний.</p>
+
+<h3 id="Умовний_блок_catch">Умовний блок <code>catch</code></h3>
+
+<p>{{non-standard_header}}</p>
+
+<p>Ви також можете використати один або декілька умовних блоків <code>catch</code> для обробки специфічних винятків. В цьому випадку вхід у відповідний блок <code>catch</code> відбувається, коли викидається вказаний виняток. У наступному прикладі код у блоці <code>try</code> може викинути один з трьох винятків: {{jsxref("TypeError")}}, {{jsxref("RangeError")}} або {{jsxref("EvalError")}}. Коли виникає виняток, контроль передається до відповідного блоку <code>catch</code>. Якщо виняток не є одним із вказаних, і був знайдений безумовний блок <code>catch</code>, контроль передається до цього блоку <code>catch</code>.</p>
+
+<p>Якщо ви використовуєте безумовний <code>catch</code> з одним або кількома умовними блоками <code>catch</code>, безумовний <code>catch</code> має бути вказаний останнім. Інакше безумовний <code>catch</code> перехоплюватиме всі види винятків до того, як вони потраплять в умовні блоки.</p>
+
+<p>Нагадування: ця функціональність не є частиною специфікації ECMAScript і ніколи не прибиралася з Firefox 59. Вона більше не підтримується у жодних сучасних веб-переглядачах.</p>
+
+<pre class="brush: js">try {
+  myroutine(); // може викинути три типи винятків
+} catch (e if e instanceof TypeError) {
+  // команди обробки винятків типу TypeError
+} catch (e if e instanceof RangeError) {
+  // команди обробки винятків типу RangeError
+} catch (e if e instanceof EvalError) {
+  // команди обробки винятків типу EvalError
+} catch (e) {
+  // команди обробки не вказаних типів винятків
+  logMyErrors(e); // передати об'єкт винятку до обробника помилок
+}
+</pre>
+
+<p>Ось такі ж "Умовні блоки catch", написані кодом, що відповідає специфікації ECMAScript (він доволі багатослівний, зате працює всюди):</p>
+
+<pre class="brush: js">try {
+  myroutine(); // може викинути три типи винятків
+} catch (e) {
+  if (e instanceof TypeError) {
+    // команди обробки винятків типу TypeError
+  } else if (e instanceof RangeError) {
+    // команди обробки винятків типу RangeError
+  } else if (e instanceof EvalError) {
+    // команди обробки винятків типу EvalError
+  } else {
+    // команди обробки не вказаних типів винятків
+    logMyErrors(e); // передати об'єкт винятку до обробника помилок
+  }
+}
+</pre>
+
+<h3 id="Ідентифікатор_винятку">Ідентифікатор винятку</h3>
+
+<p>Коли викидається виняток у блоці <code>try</code>, ідентифікатор <em><code>exception_var</code></em> (наприклад, <code>e</code> у <code>catch (e)</code>) містить значення, вказане у виразі <code>throw</code>. Ви можете скористатись цим ідентифікатором, щоб отримати інформацію про виняток. Це локальний ідентифікатор блоку <code>catch</code>. Тобто, він створюється при вході у <code>catch</code>, а після того, як виконання блоку <code>catch</code> завершується, ідентифікатор більше недоступний.</p>
+
+<pre class="brush: js">function isValidJSON(text) {
+  try {
+    JSON.parse(text);
+    return true;
+  } catch {
+    return false;
+  }
+}
+</pre>
+
+<h3 id="Блок_finally">Блок <code>finally</code></h3>
+
+<p>Блок <code>finally</code> містить команди, які виконуються після виконання блоків <code>try</code> та <code>catch</code>, але до команд, що розташовані після конструкції  <code>try...catch...finally</code>. Зверніть увагу, що <code>finally</code> виконується незалежно від того, чи був викинутий виняток. Також, якщо виняток було викинуто, команди блоку <code>finally</code> виконуються навіть якщо немає блоку <code>catch</code>, щоб обробити виняток.</p>
+
+<p>Ви можете скористатись блоком <code>finally</code>, щоб у разі викидання винятку ваш скрипт переривався красиво; наприклад, вам може знадобитися звільнити ресурс, до якого був прив'язаний ваш скрипт.</p>
+
+<p>Це може виглядати дивним, мати спеціальний блок, пов'язаний з винятками, що виконується <em>незалежно</em> від того, чи стався виняток, але ця конструкція насправді виконує свою задачу. Важливим моментом є те, що блок <code>finally</code> виконується завжди, на відміну від звичайного коду, розташованого після <code>try...catch</code>.</p>
+
+<p>Наприклад, якщо станеться інший виняток всередині <code>catch</code> цього <code>try</code>, будь-який код, що не був виконаний у зовнішньому <code>try</code>, що замикає цей <code>try...catch</code> (або у головному потоці, якщо виконувався не зовнішній <code>try</code>), не буде виконаний, оскільки контроль негайно перейде до блоку <code>catch</code> зовнішнього <code>try</code> (або до внутнішнього генератора помилок, якщо виконується не блок <code>try</code>).</p>
+
+<p>Таким чином, будь який поточний код очистки, що виконується у цій зовнішній (або головній) секції перед закінченням, буде пропущений. Однак, якщо вираз <code>try</code> містить блок <code>finally</code>, то спочатку буде виконаний код блоку <code>finally</code>, дозволяючи зробити очистку, і тільки ПОТІМ контроль буде передано до блоку <code>catch</code> іншого <code>try</code> (або до генератора помилок) для обробки винятку.</p>
+
+<p>Отже, якщо поточна очистка повинна бути зроблена, не зважаючи на те, чи успішно виконаний код у <code>try...catch</code>, тоді, якби блок <code>finally</code> виконувався тільки після винятку, той самий код очистки довелося б повторювати і всередині, і поза блоком <code>finally</code>, і, таким чином, немає причини не мати один лише блок <code>finally</code>, який виконується незалежно від того, стався виняток чи ні.</p>
+
+<p>Наступний приклад відкриває файл і далі виконує команди, які використовують цей файл (JavaScript на стороні сервера дозволяє звертатись до файлів). Якщо викидається виняток, доки файл відкритий, блок <code>finally</code> закриває цей файл до того, як скрипт переривається. Код у блоці <code>finally</code> також виконується з явним поверненням з блоку <code>try</code> або <code>catch</code>.</p>
+
+<pre class="brush: js">openMyFile();
+try {
+  // прив'язати ресурс
+  writeMyFile(theData);
+}
+finally {
+  closeMyFile(); // завжди закривати ресурс
+}
+</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Вкладені_блоки_try">Вкладені блоки try</h3>
+
+<p>Спочатку подивимось, що відбувається тут:</p>
+
+<pre class="brush: js">try {
+  try {
+    throw new Error('ой-ой');
+  }
+  finally {
+    console.log('finally');
+  }
+}
+catch (ex) {
+  console.error('зовнішній', ex.message);
+}
+
+// Результат:
+// "finally"
+// "зовнішній" "ой-ой"
+</pre>
+
+<p>Тепер, якщо ми вже перехопили виняток у внутрішньому try, додавши блок catch.</p>
+
+<pre class="brush: js">try {
+  try {
+    throw new Error('ой-ой');
+  }
+  catch (ex) {
+    console.error('внутрішній', ex.message);
+  }
+  finally {
+    console.log('finally');
+  }
+}
+catch (ex) {
+  console.error('зовнішній', ex.message);
+}
+
+// Результат:
+// "внутрішній" "ой-ой"
+// "finally"
+</pre>
+
+<p>А тепер викинемо цю помилку повторно.</p>
+
+<pre class="brush: js">try {
+  try {
+    throw new Error('ой-ой');
+  }
+  catch (ex) {
+    console.error('внутрішній', ex.message);
+    throw ex;
+  }
+  finally {
+    console.log('finally');
+  }
+}
+catch (ex) {
+  console.error('зовнішній', ex.message);
+}
+
+// Результат:
+// "внутрішній" "ой-ой"
+// "finally"
+// "зовнішній" "ой-ой"
+</pre>
+
+<p>Будь-який виняток буде перехоплений лише один раз найближчим замикаючим блоком catch, якщо тільки він не був викинутий повторно.  Звісно, будь-які нові винятки, викинуті у "внутрішньому" блоці (бо код у блоці catch може зробити те, що викине помилку), будуть перехоплені "зовнішнім" блоком.</p>
+
+<h3 id="Повернення_значень_з_блоку_finally">Повернення значень з блоку finally</h3>
+
+<p>Якщо блок <code>finally</code> повертає значення, це значення повертається усією конструкцією <code>try-catch-finally</code>, не зважаючи на будь-які інші оператори <code>return</code> у блоках <code>try</code> та <code>catch</code>. Це стосується й винятків, викинутих всередині блоку catch:</p>
+
+<pre class="brush: js">(function() {
+  try {
+    try {
+      throw new Error('ой-ой');
+    }
+    catch (ex) {
+      console.error('внутрішній', ex.message);
+      throw ex;
+    }
+    finally {
+      console.log('finally');
+      return;
+    }
+  }
+  catch (ex) {
+    console.error('зовнішній', ex.message);
+  }
+})();
+
+// Результат:
+// "внутрішній" "ой-ой"
+// "finally"</pre>
+
+<p>Зовнішній "ой-ой" не викидається через return у блоці finally. Те саме стосувалося б будь-якого значення, що поверталося б з блоку catch.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Початкове визначення. Реалізоване у JavaScript 1.4</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.14', 'try statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-try-statement', 'try statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-try-statement', 'try statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Не є частиною нинішнього стандарту ECMA-262: Використання кількох блоків catch та умовні блоки (розширення SpiderMonkey, JavaScript 1.5).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.statements.try_catch")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("Statements/throw", "throw")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/statements/var/index.html b/files/uk/web/javascript/reference/statements/var/index.html
new file mode 100644
index 0000000000..5044c8cfc5
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/var/index.html
@@ -0,0 +1,226 @@
+---
+title: var
+slug: Web/JavaScript/Reference/Statements/var
+tags:
+  - JavaScript
+  - Довідка
+  - Оператор
+translation_of: Web/JavaScript/Reference/Statements/var
+---
+<div><font><font><font><font>{{jsSidebar("Заяви")}}</font></font></font></font></div>
+
+<p><font><font><strong><font><font>Оператор <code>var</code></font></font></strong><font><font> оголошує змінну, з необов'язковим наданням їй початкового значення.</font></font></font></font></p>
+
+<div><font><font><font><font>{{EmbedInteractiveExample ("pages/js/statement-var.html")}}</font></font></font></font></div>
+
+<p class="hidden">Першокод цього прикладу збережено у репозиторії GitHub. Якщо ви хочете долучитися до створення чи поліпшення таких прикладів, пропонуйте нам свої зміни до репозиторію <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>.</p>
+
+<h2 id="Синтаксис"><font><font><font><font>Синтаксис</font></font></font></font></h2>
+
+<pre class="syntaxbox"><font><font><font><font>var </font></font></font></font><em><font><font><font><font>varname1 [</font></font></font></font></em><font><font><font><font>= </font></font></font></font><em><font><font><font><font>value1] [</font></font></font></font></em><font><font><font><font>, </font></font></font></font><em><font><font><font><font>varname2 [</font></font></font></font></em><font><font><font><font>= </font></font></font></font><em><font><font><font><font>value2] …</font></font></font></font></em><em><font><font><font><font> [</font></font></font></font></em><font><font><font><font>, </font></font></font></font><em><font><font><font><font>varnameN [</font></font></font></font></em><font><font><font><font>= </font></font></font></font><em><font><font><font><font>valueN]]]</font></font></font></font></em><font><font><font><font> ;</font></font></font></font></pre>
+
+<dl>
+ <dt><code>varnameN</code></dt>
+ <dd><font><font><font><font>Ім'я змінної. Може бути </font></font></font><font><font><font>будь-яким дозволеним ідентифікатором.</font></font></font></font></dd>
+</dl>
+
+<dl>
+ <dt><code>valueN</code></dt>
+ <dd><font><font><font><font>Початкове значення змінної. Може бути будь-яким дозволеним виразом. </font></font></font><font><font><font>Якщо відсутнє, початковим значенням буде <em>undefined</em></font></font></font></font><font><font><font><font>.</font></font></font></font></dd>
+</dl>
+
+<h2 id="Опис"><font><font><font><font>Опис</font></font></font></font></h2>
+
+<p><font><font><font><font>Оголошення змінних через <code>var</code> обробляються до виконання будь-якого коду. Це називається підняттям, і обговорюється нижче.</font></font></font></font></p>
+
+<p><font><font><font><font>Область видимості змінної, що її оголошено оператором <code>var</code>, залежить від <em>контексту виконання</em>, це або замикаюча функція, або — якщо змінну оголошено поза межами всіх функцій — глобальний контекст</font></font></font></font><font><font><font><font>. </font></font></font></font><font><font><font><font>Повторне оголошення змінної у JavaScript не скидає її значення.</font></font></font></font></p>
+
+<p><font><font><font><font>Присвоєння значення неоголошеній змінній просто створює її як глобальну змінну (вона стає властивістю глобального об'єкта) під час виконання присвоєння. Відмінності між оголошеними та неоголошеними змінними наступні:</font></font></font></font></p>
+
+<p><font><font><font><font>1. Оголошені змінні обмежені контекстом виконання, в якому їх оголошено. </font></font></font><font><font><font>Неоголошені змінні завжди глобальні.</font></font></font></font></p>
+
+<pre class="brush: js"><font><font><font><font>function x() {
+  y = 1;  // у строгому режимі викидає ReferenceError
+  var z = 2;
+}</font></font></font></font>
+<font><font><font><font>
+x();</font></font></font></font>
+<font><font><font><font>
+console.log(y);  </font></font></font><font><font><font>// 1</font></font></font></font><font><font><font><font>
+console.log(z);  </font></font></font><font><font><font>// викидає ReferenceError: z не визначено за межами x</font></font></font></font></pre>
+
+<p><font><font><font><font>2. Оголошені змінні створюються до виконання будь-якого коду. Н</font><font>еоголошені </font></font></font><font><font><font>не існують до виконання коду, що присвоює їм значення.</font></font></font></font></p>
+
+<pre class="brush: js"><font><font><font><font>console.log(a); </font></font></font><font><font><font>// викидає ReferenceError
+console.log('виконання триває…');  // ніколи не виконається</font></font></font></font>
+</pre>
+
+<pre class="brush: js"><font><font><font><font>var a;
+console.log(a); // "undefined" чи "", залежно від переглядача
+console.log('виконання триває…'); // виконання триває…</font></font></font></font></pre>
+
+<p><font><font><font><font>3. Оголошені змінні є недоступними для налаштування властивостями свого контексту виконання (функціонального чи глобального). </font></font></font><font><font><font>Неоголошені змінні доступні для налаштування (наприклад, їх можна видалити).</font></font></font></font></p>
+
+<pre class="brush: js">var a = 1;
+b = 2;
+
+delete this.а;  // у строгому режимі викидає TypeError, поза ним просто не спрацьовує
+delete this.b;
+
+console.log(a, b);  // викидає ReferenceError
+// Властивість 'b' була видалена й більше не існує.</pre>
+
+<p><font><font>Через ці відмінності використання неоголошених змінних, ймовірно, матиме несподівані наслідки. </font><font>Тож, </font></font><strong><font><font>рекомендується завжди оголошувати змінні, незалежно від того, чи розташовані вони всередині функціі, чи у глобальній області видимості. </font></font></strong><font><font>У </font></font><a href="/uk/docs/Web/JavaScript/Reference/Strict_mode"><font><font>строгому режимі</font></font></a><font><font> ECMAScript 5</font><font> присвоєння у неоголошену змінну викидає помилку.</font></font></p>
+
+<h3 id="Підняття_var">Підняття var</h3>
+
+<p><font><font>Позаяк оголошення змінних (та й оголошення загалом) обробляються до виконанням будь-якого коду, оголошення змінної будь-де у коді є тотожним оголошенню на його початку. Це також означає, що змінну можна використовувати до того, як вона була оголошена. </font></font><font><font>Ця поведінка називається «підняттям», бо виглядає так, наче оголошення було пересунуто на початок функції чи глобального коду. </font></font></p>
+
+<pre class="brush: js"><font><font>bla = 2;</font></font><font><font>
+var bla;</font></font><font><font>
+</font></font><font><font>
+// ...неявно означає таке:</font></font>
+<font><font>
+var bla;</font></font><font><font>
+bla = 2;</font></font></pre>
+
+<p><font><font>З цієї причини рекомендується завжди оголошувати змінні нагорі їхньої області видимості (на початку тіла функції чи глобального коду), бо так легше зрозуміти, котра змінна належить до області видимості функції (локальна), а яка обчислюється через ланцюжок областей видимості.</font></font></p>
+
+<p><font><font>Важливо зазначити, що підняття стосується оголошення змінної, але не її ініціалізації. Початкове значення дійсно буде присвоєне по виконанні відповідного рядка</font><font>:</font></font></p>
+
+<pre class="brush: js"><font><font><font><font>function</font></font> do_something() {
+  console.log(bar);  // undefined</font></font><font><font>
+  var bar = 111;
+  console.log(bar);  // 111
+}</font></font>
+
+<font><font>// ...неявно означає таке:</font></font>
+
+<font><font>function</font></font> do_something() {
+  var bar;
+  console.log(bar);  // undefined
+  bar = 111;
+  console.log(bar);  // 111
+}</pre>
+
+<h2 id="Приклади"><font><font>Приклади</font></font></h2>
+
+<h3 id="Оголошення_та_ініціалізація_двох_змінних"><font><font>Оголошення та ініціалізація двох змінних</font></font></h3>
+
+<pre class="brush: js"><font><font>var a = 0, b = 0;</font></font></pre>
+
+<h3 id="Присвоєння_двом_змінним_одного_рядкового_значення"><font><font>Присвоєння двом змінним одного рядкового значення</font></font></h3>
+
+<pre class="brush: js"><font><font>var a = 'А';</font></font><font><font>
+var b = a;</font></font>
+<font><font>
+// ...те саме, що й:</font></font>
+<font><font>
+var a, b = a = 'А';</font></font></pre>
+
+<p><font><font>Зважайте на порядок:</font></font></p>
+
+<pre class="brush: js"><font><font>var x = y, y = 'А';</font></font><font><font>
+console.log(x, y);  </font><font>// undefinedА</font></font></pre>
+
+<p><font><font>Тут </font></font><code>x</code> та<font><font> </font></font><code>y</code> оголошуються до виконання коду, але присвоєння значень відбувається пізніше<font><font>. </font><font>Під час обчислення "</font></font><code>x = y</code><font><font>" змінна </font></font><code>y</code><font><font> вже існує, тому </font></font><code>ReferenceError</code> <font><font>не викидається, а її значенням є <code>undefined</code></font></font><font><font>. </font><font>Отже, змінна </font></font><code>x</code> <font><font>дістане значення <code>undefined</code></font></font><font><font>. Далі змінній <code>y</code> присвоюється значення <code>'А'</code>. Отже, після першого рядка <code>x === undefined &amp;&amp; y === 'A'</code>, звідси результат.</font></font></p>
+
+<h3 id="Ініціалізація_кількох_змінних"><font><font>Ініціалізація кількох змінних</font></font></h3>
+
+<pre class="brush: js"><font><font>var x = 0;</font></font>
+<font><font>function f() {
+  var x = y = 1; // Оголошує x локально; оголошує y глобально.
+}</font></font>
+
+f();
+
+<font><font>console.log (x, y); // 0 1
+
+// У нестрогому режимі:
+// глобальна змінна x, як і очікувалось;
+// Але змінна y просочилась за межі функції!</font></font></pre>
+
+<p>Той самий приклад, але у строгому режимі:</p>
+
+<pre class="brush: js">'use strict';
+
+var x = 0;
+function f() {
+  var x = y = 1; // Викидає ReferenceError у строгому режимі.
+}
+f();
+
+console.log(x, y);</pre>
+
+<h3 id="Неявні_глобальні_змінні_та_область_видимості_зовнішньої_функції"><font><font>Неявні глобальні змінні та область видимості зовнішньої функції</font></font></h3>
+
+<p>Змінні, що виглядають неявними глобальними змінними, можуть бути посиланнями на змінні області видимості зовнішньої функції:</p>
+
+<pre class="brush: js"><font><font><font><font>var x = 0;  // оголошує змінну х в межах файлу та присвоює їй значення 0</font></font></font></font>
+<font><font><font><font>
+console.log(typeof z);  </font></font></font><font><font><font>// "undefined", позаяк змінна z ще не існує</font></font></font></font>
+<font><font><font><font>
+function a() {</font></font></font></font><font><font><font><font>
+  var y = 2;  </font></font></font><font><font><font>// Оголошує змінну y в області видимості функції a, та присвоює їй значення 2</font></font></font></font>
+<font><font><font><font>
+  console.log (x, y);  </font></font></font><font><font><font>// 0 2 </font></font></font></font>
+<font><font><font><font>
+  function b() {
+    x = 3;  // Присвоює 3 оголошеній в межах файлу змінній x.
+    у = 4;  // Присвоює 4 оголошеній зовнішній змінній y.
+    z = 5;  // Створює нову глобальну змінну z та присвоює їй значення 5.
+            // (Викидає ReferenceError у строгому режимі.)
+  }</font></font></font></font>
+<font><font><font><font>
+  b();  </font></font></font><font><font><font>// Створює змінну z в глобальній області видимості.</font></font></font></font><font><font><font><font>
+  console.log(x, y, z);  </font></font></font><font><font><font>// 3 4 5 </font></font></font></font><font><font><font><font>
+</font></font></font></font>}
+<font><font><font><font>
+a();  </font></font></font><font><font><font>// Також викликає b.
+console.log(x, z);  // 3 5
+console.log(typeof y);  // "undefined", бо y є локальною змінною функції a</font></font></font></font></pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col"><font><font><font><font>Специфікація</font></font></font></font></th>
+   <th scope="col"><font><font><font><font>Статус</font></font></font></font></th>
+   <th scope="col"><font><font><font><font>Коментар</font></font></font></font></th>
+  </tr>
+  <tr>
+   <td><font><font><font><font>{{SpecName ('ES1')}}</font></font></font></font></td>
+   <td><font><font><font><font>{{Spec2('ES1')}}</font></font></font></font></td>
+   <td>Початкова виознака. Запроваджено у JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td><font><font><font><font>{{SpecName ('ES5.1', '#sec-12.2', 'var statement')}}</font></font></font></font></td>
+   <td><font><font><font><font>{{Spec2('ES5.1')}}</font></font></font></font></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><font><font><font><font>{{SpecName ('ES6', '#sec-variable-statement', 'variable statement')}}</font></font></font></font></td>
+   <td><font><font><font><font>{{Spec2('ES6')}}</font></font></font></font></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><font><font><font><font>{{SpecName ('ESDraft', '#sec-variable-statement', 'variable statement')}}</font></font></font></font></td>
+   <td><font><font><font><font>{{Spec2('ESDraft')}}</font></font></font></font></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p><font><font><font><font>{{Compat ("javascript.statements.var")}}</font></font></font></font></p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Statements/let", "let")}}</li>
+ <li>{{jsxref("Statements/const", "const")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/statements/while/index.html b/files/uk/web/javascript/reference/statements/while/index.html
new file mode 100644
index 0000000000..bddac682fb
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/while/index.html
@@ -0,0 +1,104 @@
+---
+title: while
+slug: Web/JavaScript/Reference/Statements/while
+tags:
+  - JavaScript
+  - while
+translation_of: Web/JavaScript/Reference/Statements/while
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Оператор <strong>while</strong> створює цикл, який виконує вказану інструкцію, доки перевірочна умова оцінюється як true. Умова оцінюється перед виконанням інструкції.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-while.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">while (<var>condition</var>)
+  <var>statement</var>
+</pre>
+
+<dl>
+ <dt><code><var>condition</var></code></dt>
+ <dd>Вираз, який оцінюється перед кожним проходом циклу. Якщо ця умова оцінюється як true, <code><var>statement</var></code> виконується. Коли умова оцінюється як false, виконання продовжується з інструкції, що розташована після циклу <code>while</code>.</dd>
+ <dt><code><var>statement</var></code></dt>
+ <dd>Необов'язкова інструкція, яка виконується, поки умова оцінюється як true. Для виконання кількох інструкцій у циклі, скористайтесь <a href="/uk/docs/JavaScript/Reference/Statements/block">блоком</a> <code>({ ... })</code>, щоб згрупувати ці інструкції.<br>
+ <br>
+ Заувага: Використовуйте оператор <code>break</code>, щоб зупинити цикл раніше, ніж умова буде оцінена як false.</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Наступний цикл <code>while</code> виконується, поки <code>n</code> менше трьох.</p>
+
+<pre class="brush:js">var n = 0;
+var x = 0;
+
+while (n &lt; 3) {
+  n++;
+  x += n;
+}</pre>
+
+<p>На кожній ітерації цикл збільшує змінну <code>n</code> на один та додає її до <code>x</code>. Отже, <code>x</code> та <code>n</code> приймають наступні значення:</p>
+
+<ul>
+ <li>Після першого проходу: <code>n</code> = 1 та <code>x</code> = 1</li>
+ <li>Після другого проходу: <code>n</code> = 2 та <code>x</code> = 3</li>
+ <li>Після третього проходу: <code>n</code> = 3 та <code>x</code> = 6</li>
+</ul>
+
+<p>Після завершення третього проходу умова <code>n</code> &lt; 3 більше не дорівнює true, тому цикл переривається.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-while-statement', 'while statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-while-statement', 'while statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.6.2', 'while statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.6.2', 'while statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.6.1', 'while statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Початкове визначення</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.statements.while")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Statements/do...while", "do...while")}}</li>
+ <li>{{jsxref("Statements/for", "for")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/statements/with/index.html b/files/uk/web/javascript/reference/statements/with/index.html
new file mode 100644
index 0000000000..fca48fda25
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/with/index.html
@@ -0,0 +1,107 @@
+---
+title: with
+slug: Web/JavaScript/Reference/Statements/with
+tags:
+  - JavaScript
+  - Оператор
+  - не рекомендований
+translation_of: Web/JavaScript/Reference/Statements/with
+---
+<div class="warning">Використання оператора <code>with</code> не рекомендоване, оскільки може бути джерелом заплутаних помилок та проблем із сумісністю. Дивіться абзац "Мінуси для однозначності" у розділі "Опис", щоб дізнатись більше.</div>
+
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Оператор <strong>with</strong> розширює ланцюжок областей видимості для інструкції.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">with (expression)
+  <em>statement</em>
+</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>Додає наданий вираз до ланцюжка областей видимості, який використовується під час обчислення інструкції. Круглі дужки навколо виразу є обов'язковими.</dd>
+ <dt><code>statement</code></dt>
+ <dd>Будь-яка інструкція. Щоб виконати більше однієї інструкції, скористайтесь <a href="/uk/docs/Web/JavaScript/Reference/Statements/block">блоком</a> ({ ... }), щоб згрупувати ці інструкції.</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>JavaScript шукає некваліфіковане ім'я у ланцюжку областей видимості, пов'язаних з контекстом виконання скрипта чи функції, що містить це некваліфіковане ім'я. Оператор 'with' додає наданий об'єкт у початок цього ланцюжка під час обчислення своїх інструкцій. Якщо некваліфіковане ім'я, що використовується у інструкціях, співпадає з властивістю з ланцюжка областей видимості, це ім'я зв'язується з властивістю та об'єктом, що містить цю властивість. Інакше, викидається помилка {{jsxref("ReferenceError")}}.</p>
+
+<div class="note">Використання <code>with</code> не рекомендоване та заборонене у <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">строгому режимі </a>ECMAScript 5. Рекомендованою альтернативою є присвоєння об'єкта, чиї властивості вам потрібні, тимчасовій змінній.</div>
+
+<h3 id="Плюси_та_мінуси_для_швидкодії">Плюси та мінуси для швидкодії</h3>
+
+<p><strong>Плюси:</strong> Оператор <code>with</code> може допомогти зменшити розмір файлу, скорочуючи необхідність повторювати довгі посилання на об'єкти без погіршення швидкодії. Зміна ланцюжка областей видимості, спричинена використанням 'with', не є затратною для обчислення. Використання 'with' звільнить інтерпретатор від розбору повторюваних посилань на об'єкти. Зауважте, однак, що у багатьох випадках ця перевага досягається використанням тимчасової змінної для зберігання посилання на необхідний об'єкт.</p>
+
+<p><strong>Мінуси:</strong> Оператор <code>with</code> спочатку спричиняє пошук усіх імен на вказаному об'єкті. Таким чином, усі ідентифікатори, що не є членами вказаного об'єкта, шукатимуться у блоці 'with' набагато повільніше. У випадках, коли швидкодія важлива, 'with' слід використовувати лише у тих блоках коду, які звертаються до членів вказаного об'єкта.</p>
+
+<h3 id="Мінуси_для_однозначності">Мінуси для однозначності</h3>
+
+<p><strong>Мінус:</strong> З оператором <code>with</code> стає важко зрозуміти, людині чи компілятору JavaScript, чи буде некваліфіковане ім'я знайдене у ланцюжку областей видимості, і, якщо так, то в якому об'єкті. Отже, у наступному прикладі:</p>
+
+<pre class="brush: js notranslate">function f(x, o) {
+  with (o) {
+    console.log(x);
+  }
+}</pre>
+
+<p>Лише коли функція <code>f</code> викликана, змінна <code>x</code> або буде знайдена, або ні, а, якщо буде знайдена, то або в <code>o</code>, або (якщо такої властивості не існує) у об'єкті активації <code>f</code>, де <code>x</code> іменує перший формальний аргумент. Якщо ви забудете визначити <code>x</code> у об'єкті, який передаєте другим аргументом, або в разі якоїсь схожої помилки чи плутанини, ви не отримаєте помилку -- лише неочікувані результати.</p>
+
+<p><strong>Мінус: </strong>Код, що використовує <code>with</code>, може бути несумісним знизу вгору, особливо при використанні з чимось інакшим, ніж простий об'єкт. Розглянемо цей приклад:</p>
+
+<div>
+<pre class="brush:js notranslate">function f(foo, values) {
+  with (foo) {
+    console.log(values);
+  }
+}
+</pre>
+
+<p>Якщо ви викличете <code>f([1,2,3], obj)</code> у середовищі ECMAScript 5, то посилання <code>values</code> всередині блоку <code>with</code> поверне <code>obj</code>. Однак, ECMAScript 2015 вводить властивість <code>values</code> у {{jsxref("Array.prototype")}} (таким чином, доступну у кожному масиві). Отже, у середовищі JavaScript, яке підтримує ECMAScript 2015, посилання <code>values</code> всередині блоку <code>with</code> може повернути <code>[1,2,3].values</code>. Однак, конкретно у цьому прикладі {{jsxref("Array.prototype")}} було визначено з <code>values</code> у об'єкті {{jsxref("Symbol.unscopables")}}. Якби не це, ми б побачили, як важко було б його відлагоджувати.</p>
+</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_with">Використання <code>with</code></h3>
+
+<p>Наступний оператор <code>with</code> вказує, що об'єкт <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Math"><code>Math</code></a> є об'єктом за замовчуванням. Інструкції, що йдуть після <code>with</code>, посилаються на властивість <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Math/PI"><code>PI</code></a>, а також методи <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Math/cos"><code>cos</code></a> та <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Math/sin"><code>sin</code></a> без зазначення об'єкта. JavaScript припускає, що об'єктом цих посилань є <code>Math</code>.</p>
+
+<pre class="brush:js notranslate">var a, x, y;
+var r = 10;
+
+with (Math) {
+  a = PI * r * r;
+  x = r * cos(PI);
+  y = r * sin(PI / 2);
+}</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-with-statement', 'with statement')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.statements.with")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Statements/block", "block")}}</li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">Строгий режим</a></li>
+ <li>{{jsxref("Symbol.unscopables")}}</li>
+ <li>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/strict_mode/index.html b/files/uk/web/javascript/reference/strict_mode/index.html
new file mode 100644
index 0000000000..8701c7bc5c
--- /dev/null
+++ b/files/uk/web/javascript/reference/strict_mode/index.html
@@ -0,0 +1,364 @@
+---
+title: Строгий режим
+slug: Web/JavaScript/Reference/Strict_mode
+tags:
+  - ECMAScript5
+  - JavaScript
+  - Строгий режим
+translation_of: Web/JavaScript/Reference/Strict_mode
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p>Строгий режим (<em>strict mode</em>) у <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript 5</a> — це спосіб використання обмеженого варіанта JavaScript. Строгий режим є не просто підмножиною JavaScript: це семантика, яка <em>навмисно</em> відрізняється від звичайного коду. Переглядачі, що не підтримують строгий режим, виконуватимуть його код у дещо інший спосіб, аніж ті переглядачі, що таку підтримку мають. Отже, перш ніж покладатися на строгий режим, перевірте наявність підтримки його окремих складників. Код у строгому режимі та код поза ним можуть співіснувати, тому скрипти можна переводити у строгий режим поступово.</p>
+
+<p>Строгий режим вносить декілька змін до звичної семантики JavaScript. По-перше, деякі помилки, що в звичайному режимі лишаються непомітними, натомість у строгому режимі викидаються в явний спосіб. По-друге, строгий режим виправляє помилки, що ускладнюють або унеможливлюють виконання певних оптимізацій рушіями JavaScript: код у строгому режимі іноді можна змусити виконуватися швидше, ніж такий самий код у звичайному режимі. По-третє, строгий режим забороняє деякий синтаксис, який, скоріше за все, буде визначено у майбутніх версіях ECMAScript.</p>
+
+<p>Дивіться "Перехід до строгого режиму" (<a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode">transitioning to strict mode</a>), якщо бажаєте змінити свій код так, щоб він працював із обмеженим варіантом JavaScript.</p>
+
+<div class="note">
+<p>Іноді ви побачите посилання на стандартний, не строгий режим, як на “брудний режим”. Це неофіційний термін, але вам краще знати про нього, про всяк випадок.</p>
+</div>
+
+<h2 id="Виклик_строгого_режиму">Виклик строгого режиму</h2>
+
+<p>Строгий режим застосовується до <em>цілих скриптів</em>, або до <em>індивідуальних функцій</em>. Він не застосовується до блочних виразів, замкнених у фігурних дужках {}; спроба застосувати його в такому контексті не дасть результату. <code>eval</code> код, <code>Function</code> код, атрибути обробника подій, рядки, що передаються у {{domxref("WindowTimers.setTimeout()")}}, і подібні до них є повноцінними скриптами, і виклик строгого режиму в них працює, як і очікується.</p>
+
+<h3 id="Строгий_режим_у_скриптах">Строгий режим у скриптах</h3>
+
+<p>Щоб увімкнути строгий режим у цілому скрипті, запишіть <em>точний</em> вираз “use strict”; (або ‘use strict’;) перед будь-якими іншими виразами.</p>
+
+<pre class="brush: js">// Синтаксис строгого режиму для цілого скрипта
+"use strict";
+var v = "Привіт! Я скрипт у строгому режимі!";
+</pre>
+
+<p>Цей синтаксис приховує пастку, в яку <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=579119">вже втрапив</a> <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=627531">один великий сайт</a>: неможливо наосліп поєднати не суперечливі скрипти. Розглянемо об'єднання скрипту у строгому режимі із скриптом у звичайному режимі: вся конкатенація виходить у строгому режимі! Зворотнє теж правда: скрипт у звичайному режимі, поєднаний із скриптом у строгому режимі, призводить до звичайного режиму. Об'єднання скриптів у строгому та звичайному режимах є проблематичним. Тому рекомендується включати строгий режим у кожній функції окремо (принаймні, на час переміщення).</p>
+
+<p>Ви також можете застосувати підхід із загортанням всього вмісту скрипту у функцію та наданням цій зовнішній функції строгого режиму. Це позбавляє проблеми конкатенації, але це означає, що вам доведеться явно експортувати будь-які глобальні змінні поза область видимості функції.</p>
+
+<h3 id="Строгий_режим_у_функціях">Строгий режим у функціях</h3>
+
+<p>Таким самим чином, щоб застосувати строгий режим у функції, напишіть <em>точний</em> вираз “use strict”; (або 'use strict';) у тілі функції перед будь-якими іншими виразами.</p>
+
+<pre class="brush: js">function strict() {
+  // Синтаксис строгого режиму на рівні функції
+  'use strict';
+  function nested() { return "І я також!"; }
+  return "Привіт!  Я функція у строгому режимі!  " + nested();
+}
+function notStrict() { return "А я ні."; }
+</pre>
+
+<h2 id="Зміни_у_строгому_режимі">Зміни у строгому режимі</h2>
+
+<p>Строгий режим змінює як синтаксис, так і поведінку під час виконання. Зміни загалом підпадають під такі категорії: зміни, що перетворюють похибки<font color="#ff0000"> </font>на помилки (такі, як помилки синтаксису під час виконання), зміни, що спрощують обчислення конкретної змінної для заданого використання імені, зміни, що спрощують <code>eval</code> та <code>arguments</code>, зміни, що спрощують написання “безпечного” коду JavaScript, а також зміни, що передбачають майбутню еволюцію ECMAScript.</p>
+
+<h3 id="Перетворення_похибок_на_помилки">Перетворення похибок на помилки</h3>
+
+<p>Строгий режим перетворює деякі раніше прийнятні похибки на помилки. JavaScript був розроблений таким чином, щоб бути простим для програмістів-початківців, й іноді позначає операції, які мали б бути помилками, як не помилкові. Іноді це вирішує невідкладну проблему, але іноді створює ще гірші проблеми в майбутньому. Строгий режим позначає ці похибки як помилки, що дозволяє виявляти їх та вчасно виправляти.</p>
+
+<p>По-перше, строгий режим робить неможливим випадкове створення глобальних змінних. В звичайному режимі JavaScript неправильно написане ім'я змінної під час присвоювання створює нову властивість у глобальному об’єкті та продовжує “працювати” (хоча в майбутньому можливе не спрацювання: ймовірно, у новій версії JavaScript). Присвоювання, які могли випадково створити глобальні змінні, у строгому режимі генерують помилку:</p>
+
+<pre class="brush: js">"use strict";
+                       // Припускаючи, що глобальна змінна mistypedVariable
+mistypedVariable = 17; // існує, ця строка згенерує помилку ReferenceError
+                       // через неправильне написання змінної
+</pre>
+
+<p>По-друге, строгий режим змушує присвоювання, які б в іншому випадку непомітно не спрацювали, генерувати помилку. Наприклад, <code>NaN</code> є глобальною змінною, яку не можна редагувати. В нормальному коді присвоювання у <code>NaN</code> нічого не робить; розробник отримує неуспішний результат. У строгому режимі присвоювання у <code>NaN</code> викликає виняток. Будь-яке присвоювання, яке непомітно не спрацює у нормальному коді (присвоювання властивості, яку не можна редагувати, присвоювання властивості, яка має лише геттер, присвоювання нової властивості <a href="/uk/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions" title="en-US/JavaScript/Reference/Global Objects/Object/preventExtensions">нерозширюваного</a> об'єкту) згенерує виняток у строгому режимі:</p>
+
+<pre class="brush: js">"use strict";
+
+// Присвоєння у властивість, яку не можна редагувати
+var obj1 = {};
+Object.defineProperty(obj1, "x", { value: 42, writable: false });
+obj1.x = 9; // генерує помилку TypeError
+
+// Присвоєння у властивість, яка має лише геттер
+var obj2 = { get x() { return 17; } };
+obj2.x = 5; // генерує помилку TypeError
+
+// Присвоєння властивості нерозширюваного об'єкту
+var fixed = {};
+Object.preventExtensions(fixed);
+fixed.newProp = "ohai"; // генерує помилку TypeError
+</pre>
+
+<p>По-третє, строгий режим генерує винятки при намаганні видалити властивість, яку не можна видаляти (раніше така спроба просто не мала б ніякого ефекту):</p>
+
+<pre class="brush: js">"use strict";
+delete Object.prototype; // генерує помилку TypeError
+</pre>
+
+<p>По-четверте, строгий режим до версії<font color="#ff0000"> </font>Gecko 34 вимагає, щоб усі властивості у літералі об’єкту були унікальними. В звичайному коді можливо дублювати імена властивостей, при цьому останній запис встановлює значення властивості. Але, оскільки лише останній запис має значення, дублювання — це просто джерело помилок, якщо в коді змінюється значення властивості не в останньому запису. Дублювання імен властивостей є синтаксичною помилкою у строгому режимі:</p>
+
+<div class="note">
+<p>Більше не працює у ECMAScript 2015 ({{bug(1041128)}}).</p>
+</div>
+
+<pre class="brush: js">"use strict";
+var o = { p: 1, p: 2 }; // !!! синтаксична помилка
+</pre>
+
+<p>По-п’яте, строгий режим вимагає, щоб імена параметрів функцій були унікальними. В звичайному коді останній дубльований аргумент ховає попередні ідентично названі аргументи. Ці попередні аргументи лишаються доступними через <code>arguments[i]</code>, тому вони не остаточно недоступні. Однак, таке приховання не має сенсу і, скоріше за все, є небажаним (воно може, наприклад, ховати помилку у написанні), тому у строгому режимі дублювання імен аргументів є синтаксичною помилкою:</p>
+
+<pre class="brush: js">function sum(a, a, c) { // !!! синтаксична помилка
+  "use strict";
+  return a + b + c; // неправильно, якщо виконати цей код
+}
+</pre>
+
+<p>По-шосте, строгий режим у ECMAScript 5 забороняє вісімковий синтаксис. Вісімковий синтаксис не є частиною ECMAScript 5, але він підтримується у всіх веб-переглядачах додаванням нуля попереду вісімкового числа: <code>0644 === 420</code> and <code>"\045" === "%"</code>. У ECMAScript 5 вісімкове число підтримується з допомогою додавання "<code>0</code>o", тобто </p>
+
+<pre class="brush: js">var a = 0o10; // ES2015: вісімкове число</pre>
+
+<p>Програмісти-початківці вважають, що нуль попереду числа не має семантичного значення, тому вони використовують його для вирівнювання строки — але це змінює значення числа! Вісімковий синтаксис рідко використовується і може бути використаний помилково, тому строгий режим позначає вісімковий запис як синтаксичну помилку:</p>
+
+<pre class="brush: js">"use strict";
+var sum = 015 + // !!! синтаксична помилка
+          197 +
+          142;
+</pre>
+
+<p>По-сьоме, строгий режим у ECMAScript 5 забороняє присвоєння властивостей {{Glossary("primitive", "примітивним")}} значенням. Без строгого режиму, присвоєння таких властивостей просто ігнорується (no-op), однак, у строгому режимі генерується помилка {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js">(function() {
+"use strict";
+
+false.true = "";         // TypeError
+(14).sailing = "home";     // TypeError
+"with".you = "far away"; // TypeError
+
+})();</pre>
+
+<h3 id="Спрощення_використання_змінних">Спрощення використання змінних</h3>
+
+<p>Строгий режим спрощує прив'язку імен змінних до певних визначень змінних у коді. Багато оптимізацій компілятора покладаються на спроможність сказати, що змінна Х зберігається у <em>цій</em> локації: це критично для повної оптимізації кода JavaScript. Іноді JavaScript робить базову прив'язку імені до визначення змінної в коді неможливим до запуску коду. Строгий режим усуває більшість випадків, в яких це відбувається, тому компілятор може краще оптимізувати код у строгому режимі.</p>
+
+<p>По-перше, строгий режим забороняє <code>with</code>. Проблема з <code>with</code> полягає в тому, що будь-яке ім’я всередині блоку може вказувати або на властивість об’єкта, який йому передають, або на змінну з поточної (або навіть з глобальної) області видимості під час виконання: неможливо знати наперед. Строгий режим робить <code>with</code> синтаксичною помилкою і не дає можливості імені з <code>with</code> посилатися на невідому локацію під час виконання:</p>
+
+<pre class="brush: js">"use strict";
+var x = 17;
+with (obj) // !!! синтаксична помилка
+{
+  // Якби це не був строгий режим, була б це змінна x, або
+  // це була б властивість obj.x?  Неможливо заздалегідь
+  // сказати, не запустивши код, тому ім'я не можна
+  // оптимізувати.
+  x;
+}
+</pre>
+
+<p>Проста альтернатива присвоювання об’єкта змінній з коротким ім’ям, з отриманням доступу до відповідної властивості через цю змінну, здатна замінити <code>with</code>.</p>
+
+<p>По-друге, <a class="external" href="http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/"><code>eval</code> у строгому режимі не додає нові змінні у поточну область видимості</a>. У звичайному коді <code>eval("var x;")</code> створює змінну <code>x</code> у області видимості поточної функції або глобального об'єкту. Це означає, що, в цілому, у функції, що містить виклик <code>eval</code> кожне ім’я, яке не посилається на аргумент або на локальну змінну, мусить бути прив'язане до певного оголошення під час виконання (тому що <code>eval</code> міг створити нову змінну, яка сховає зовнішню змінну). У строгому режимі <code>eval</code> створює змінні лише для коду, який обчислюється, тому <code>eval</code> не може впливати на те, посилається ім’я на зовнішню змінну, чи на якусь локальну змінну:</p>
+
+<pre class="brush: js">var x = 17;
+var evalX = eval("'use strict'; var x = 42; x");
+console.assert(x === 17);
+console.assert(evalX === 42);
+</pre>
+
+<p>Відповідно, якщо функція <code>eval</code> викликається виразом у вигляді <code>eval(...)</code> у строгому режимі, код буде оцінюватися як код у строгому режимі. Код може явно увімкнути строгий режим, але в цьому нема необхідності.</p>
+
+<pre class="brush: js">function strict1(str) {
+  "use strict";
+  return eval(str); // str буде вважатися кодом у строгому режимі
+}
+function strict2(f, str) {
+  "use strict";
+  return f(str); // not eval(...): str матиме строгий режим тільки в тому
+                 // випадку, якщо він його вмикає
+}
+function nonstrict(str) {
+  return eval(str); // str матиме строгий режим тільки в тому випадку,
+                    // якщо він його вмикає
+}
+
+strict1("'Код у строгому режимі!'");
+strict1("'use strict'; 'Код у строгому режимі!'");
+strict2(eval, "'Код у звичайному режимі.'");
+strict2(eval, "'use strict'; 'Код у строгому режимі!'");
+nonstrict("'Код у звичайному режимі.'");
+nonstrict("'use strict'; 'Код у строгому режимі!'");
+</pre>
+
+<p>Таким чином, імена у <code>eval</code> коді строгого режиму поводяться ідентично іменам у строгому режимі, які не оцінюються як результат <code>eval</code>.</p>
+
+<p>По-третє, строгий режим забороняє видалення простих імен. <code>delete name</code> у строгому режимі є синтаксичною помилкою:</p>
+
+<pre class="brush: js">"use strict";
+
+var x;
+delete x; // !!! синтаксична помилка
+
+eval("var y; delete y;"); // !!! синтаксична помилка</pre>
+
+<h3 id="Спрощення_eval_та_arguments">Спрощення <code>eval</code> та <code>arguments</code></h3>
+
+<p>Строгий режим робить <code>arguments</code> та <code>eval</code> менш химерно магічними. Обидва поводяться досить загадково в нормальному коді: <code>eval</code> для додавання або видалення зв’язків або для зміни значень зв’язків, та <code>arguments</code> з його індексованими властивостями в якості псевдонімів імен аргументів. Строгий режим робить величезний крок до поводження з <code>eval</code> та <code>arguments</code> як з ключовими словами, хоча остаточні зміни з’являться не раніше майбутнього видання ECMAScript.</p>
+
+<p>По-перше, згідно з синтаксисом, імена <code>eval</code> та <code>arguments</code> не можуть бути прив’язані або отримати присвоєння. Всі спроби це зробити згенерують синтаксичні помилки:</p>
+
+<pre class="brush: js">"use strict";
+eval = 17;
+arguments++;
+++eval;
+var obj = { set p(arguments) { } };
+var eval;
+try { } catch (arguments) { }
+function x(eval) { }
+function arguments() { }
+var y = function eval() { };
+var f = new Function("arguments", "'use strict'; return 17;");
+</pre>
+
+<p>По-друге, у строгому режимі властивості створених в ньому об’єктів <code>arguments</code> не є псевдонімами. У звичайному коді у функції із першим аргументом <code>arg</code>, зміна значення <code>arg</code> також змінює значення <code>arguments[0]</code>, і навпаки (крім випадку, коли аргументи відсутні, або <code>arguments[0]</code> було видалено). Об'єкти <code>arguments</code> у строгому режимі зберігають у функціях початкові аргументи на момент, коли функція була викликана. <code>arguments[i]</code> не відслідковує значення відповідного іменованого аргументу, також іменований аргумент не відслідковує значення відповідного <code>arguments[i]</code>.</p>
+
+<pre class="brush: js">function f(a) {
+  "use strict";
+  a = 42;
+  return [a, arguments[0]];
+}
+var pair = f(17);
+console.assert(pair[0] === 42);
+console.assert(pair[1] === 17);
+</pre>
+
+<p>По-третє, <code>arguments.callee</code> більше не підтримується. В звичайному коді <code>arguments.callee</code> посилається на замкнену функцію. Цей випадок використання дуже слабкий: просто назвіть цю функцію! Більше того, <code>arguments.callee</code> ґрунтовно перешкоджає оптимізаціям, наприклад, вбудові функції, тому що має бути можливість надати посилання на не вбудовану функцію, якщо трапляється <code>arguments.callee</code>. У функціях строгого режиму <code>arguments.callee</code> є властивістю, яку не можна видаляти, вона генерує помилку при присвоюванні або виклику:</p>
+
+<pre class="brush: js">"use strict";
+var f = function() { return arguments.callee; };
+f(); // генерує помилку TypeError
+</pre>
+
+<h3 id="Убезпечення_JavaScript">"Убезпечення" JavaScript</h3>
+
+<p>Строгий режим спрощує написання “безпечного” коду в JavaScript. Деякі веб-сайти зараз надають користувачам можливість писати код JavaScript, який буде виконуватися на цій сторінці <em>від імені інших користувачів</em>. JavaScript у веб-переглядачах може мати доступ до приватної інформації користувачів, тому такий код має бути частково перетворений перед виконанням, щоб контролювати доступ до забороненої функціональності. Гнучкість JavaScript робить це практично неможливим без купи перевірок під час виконання. Певні функції мови настільки розповсюджені, що перевірки під час виконання призводять до суттєвих втрат у продуктивності. Кілька вивертів строгого режиму, плюс вимога, щоб код JavaScript, наданий користувачем, був у строгому режимі і щоб він запускався певним чином, суттєво зменшують необхідність в таких перевірках.</p>
+
+<p>По-перше, значення, що передається у функцію як <code>this,</code> в строгому режимі не зобов'язане бути об'єктом (т. зв. “обгорнуте” значення). У звичайній функції <code>this</code> завжди є об'єктом: це або переданий об'єкт, якщо функція викликається із <code>this</code>, що є об'єктом; обгорнуте значення, якщо функція викликається із логічним (Boolean), строковим (string) або числовим (number) <code>this</code>; або глобальний об'єкт, якщо функція викликається із <code>this, </code>що дорівнює <code>undefined</code> або <code>null</code> . (Використовуйте <a href="/uk/Web/JavaScript/Reference/Global_Objects/Function/call" title="en-US/JavaScript/Reference/Global_Objects/Function/call"><code>call</code></a>, <a href="/uk/Web/JavaScript/Reference/Global_Objects/Function/apply" title="en-US/JavaScript/Reference/Global_Objects/Function/apply"><code>apply</code></a>, або <a href="/uk/Web/JavaScript/Reference/Global_Objects/Function/bind" title="en-US/JavaScript/Reference/Global_Objects/Function/bind"><code>bind</code></a> щоб вказати конкретний <code>this</code>.) Автоматичне обгортання не лише призводить до втрат продуктивності. Викриття глобального об'єкту у веб-переглядачах є небезпечним, тому що глобальний об'єкт надає доступ до функціональності, яку “безпечний” JavaScript код має обмежувати. Таким чином, для функції у строгому режимі заданий <code>this</code> не обгортається у об'єкт, а якщо він не заданий, <code>this</code> буде мати значення <code>undefined</code>:</p>
+
+<pre class="brush: js">"use strict";
+function fun() { return this; }
+console.assert(fun() === undefined);
+console.assert(fun.call(2) === 2);
+console.assert(fun.apply(null) === null);
+console.assert(fun.call(undefined) === undefined);
+console.assert(fun.bind(true)() === true);
+</pre>
+
+<p>Це означає, окрім іншого, що у веб-переглядачах більше неможливо посилатися на об'єкт <code>window</code> через <code>this</code> всередині функції строгого режиму.</p>
+
+<p>По-друге, у строгому режимі більше неможливо “пройтися” через стек JavaScript за допомогою часто вживаних розширень ECMAScript. В звичайному коді із цими розширеннями, коли функція <code>fun</code> знаходиться у процесі виклику, <code>fun.caller</code> – це функція, яка останньою викликала <code>fun</code>, а <code>fun.arguments</code>– це аргументи для цього виклику <code>fun</code>. Обидва розширення є проблематичними для “безпечного” коду JavaScript, тому що вони дозволяють “безпечному” коду мати доступ до “привілейованих” функцій та їхніх (потенційно небезпечних) аргументів. Якщо <code>fun</code> знаходиться у строгому режимі, <code>fun.caller</code> та <code>fun.arguments</code> є властивостями, які не можна видаляти, і генерують помилку під час присвоєння або виклику:</p>
+
+<pre class="brush: js">function restricted()
+{
+  "use strict";
+  restricted.caller;    // викидає TypeError
+  restricted.arguments; // викидає TypeError
+}
+function privilegedInvoker()
+{
+  return restricted();
+}
+privilegedInvoker();
+</pre>
+
+<p>По-третє, <code>arguments</code> у строгому режимі функції більше не надають доступу до відповідних змінних викликаної функції. В деяких старих версіях ECMAScript <code>arguments.caller</code> був об'єктом, чиї властивості були псевдонімами змінних у цій функції. Це <a class="external" href="http://stuff.mit.edu/iap/2008/facebook/">небезпечно</a>, тому що порушує можливість приховувати привілейовані значення через абстракцію функції; це також перешкоджає більшості оптимізацій. З цих причин сучасні переглядачі не мають цієї можливості. Тим не менш, через свою історичну функціональність, <code>arguments.caller</code> у функції строгого режиму також є властивістю, яку не можна видаляти, і генерує помилку під час присвоєння або виклику:</p>
+
+<pre class="brush: js">"use strict";
+function fun(a, b)
+{
+  "use strict";
+  var v = 12;
+  return arguments.caller; // генерує помилку TypeError
+}
+fun(1, 2); // не викриває v (або a, або b)
+</pre>
+
+<h3 id="Прокладання_шляху_для_майбутніх_версій_ECMAScript">Прокладання шляху для майбутніх версій ECMAScript</h3>
+
+<p>Майбутні версії ECMAScript, скоріше за все, запропонують новий синтаксис, а строгий режим у ECMAScript 5 застосовує деякі обмеження, щоб спростити перехід. Буде простіше внести деякі зміни, якщо основи цих змін заборонені у строгому режимі.</p>
+
+<p>По-перше, у строгому режимі деякі ідентифікатори стають зарезервованими ключовими словами. Ці слова: <code>implements</code>, <code>interface</code>, <code>let</code>, <code>package</code>, <code>private</code>, <code>protected</code>, <code>public</code>, <code>static</code>, та <code>yield</code>. Тоді у строгому режимі ви не зможете називати ними або використовувати змінні або аргументи з такими іменами.</p>
+
+<pre class="brush: js">function package(protected) { // !!!
+  "use strict";
+  var implements; // !!!
+
+  interface: // !!!
+  while (true) {
+    break interface; // !!!
+  }
+
+  function private() { } // !!!
+}
+function fun(static) { 'use strict'; } // !!!
+
+</pre>
+
+<p>Два застереження для Mozilla: по-перше, якщо ваш код використовує JavaScript версії 1.7 або вище (наприклад, у коді хрома, або при використанні <code>&lt;script type=""&gt;</code>) та використовує строгий режим, <code>let</code> та <code>yield</code> матимуть функціональність, яку вони мали з тих пір, як ці ключові слова були вперше введені. Але код у строгому режимі у мережі, завантажений з допомогою <code>&lt;script src=""&gt;</code> або <code>&lt;script&gt;...&lt;/script&gt;</code>, не зможуть використовувати <code>let</code>/<code>yield</code> як ідентифікатори. По-друге, в той час, як ES5 безумовно резервує слова <code>class</code>, <code>enum</code>, <code>export</code>, <code>extends</code>, <code>import</code>, та <code>super</code>, раніше Firefox 5 Mozilla резервував їх лише у строгому режимі.</p>
+
+<p>По-друге, <a class="external" href="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/">строгий режим забороняє функціональні вирази не на верхньому рівні скрипта чи функції</a>. В звичайному коді в переглядачах функціональні вирази дозволені “будь-де”. <em>Це не є частиною</em><em>ES5 (</em><em>або навіть</em><em>ES3)!</em> Це розширення з несумісною семантикою у різних переглядачах. Є надія, що в майбутніх версіях ECMAScript буде введено нову семантику для функціональних виразів не на верхньому рівні скрипта або функції. <a class="external" href="http://wiki.ecmascript.org/doku.php?id=conventions:no_non_standard_strict_decls">Заборона таких функціональних виразів у строгому режимі</a> "розчищає поле" для специфікації майбутнього випуску ECMAScript:</p>
+
+<pre class="brush: js">"use strict";
+if (true) {
+  function f() { } // !!! синтаксична помилка
+  f();
+}
+
+for (var i = 0; i &lt; 5; i++) {
+  function f2() { } // !!! синтаксична помилка
+  f2();
+}
+
+function baz() { // кошерно
+  function eit() { } // теж кошерно
+}
+</pre>
+
+<p>Ця заборона не є правильною для строгого режиму, тому що такі функціональні вирази є розширенням базового ES5. Але це рекомендація комітету ECMAScript, і бразуери будуть її впроваджувати.</p>
+
+<h2 id="Строгий_режим_у_веб-переглядачах">Строгий режим у веб-переглядачах</h2>
+
+<p>У більшості переглядачів в наш час реалізовано строгий режим. Однак, не покладайтеся на нього наосліп, оскільки досі існує велика кількість <a class="external" href="http://caniuse.com/use-strict" rel="external" title="caniuse.com availability of strict mode">версій переглядачів, які лише частково підтримують строгий режим </a>або взагалі його не підтримують (наприклад, Internet Explorer нижче 10-ї версії!). <em>Строгий режим змінює семантику.</em> Покладання на строгий режим призведе до численних помилок у переглядачах, в яких не реалізовано строгий режим. Використовуйте строгий режим з обережністю, та, опираючись на строгий режим, підстраховуйтесь тестуванням функціональності, яке перевірить, чи реалізовані відповідні частини строгого режиму. Нарешті, переконайтеся, що <em>протестували свій код у переглядачах, які підтримують та не підтримують строгий режим</em>. Якщо ви тестуєте лише у тих переглядачах, які не підтримують строгий режим, ви, ймовірно, будете мати проблеми у переглядачах, які його підтримують, та навпаки.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-10.1.1', 'Strict Mode Code')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Базове визначення. Дивіться також: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-C">Strict mode restriction and exceptions</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-strict-mode-code', 'Strict Mode Code')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td><a href="http://www.ecma-international.org/ecma-262/6.0/#sec-strict-mode-of-ecmascript">Strict mode restriction and exceptions</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-strict-mode-code', 'Strict Mode Code')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td><a href="https://tc39.github.io/ecma262/#sec-strict-mode-of-ecmascript">Strict mode restriction and exceptions</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li><a class="external" href="http://whereswalden.com/2010/09/08/new-es5-strict-mode-support-now-with-poison-pills/" title="http://whereswalden.com/2010/09/08/new-es5-strict-mode-support-now-with-poison-pills/">Where's Walden? » New ES5 strict mode support: now with poison pills!</a></li>
+ <li><a class="external" href="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/" title="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/">Where's Walden? » New ES5 strict mode requirement: function statements not at top level of a program or function are prohibited</a></li>
+ <li><a class="external" href="http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/" title="http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/">Where's Walden? » New ES5 strict mode support: new vars created by strict mode eval code are local to that code only</a></li>
+ <li><a href="http://qnimate.com/javascript-strict-mode-in-nutshell/">JavaScript "use strict" tutorial for beginners.</a></li>
+ <li><a class="external" href="http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/" title="http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/">John Resig - ECMAScript 5 Strict Mode, JSON, and More</a></li>
+ <li><a class="external" href="http://dmitrysoshnikov.com/ecmascript/es5-chapter-2-strict-mode/">ECMA-262-5 in detail. Chapter 2. Strict Mode.</a></li>
+ <li><a class="external" href="http://kangax.github.io/compat-table/es5/#Strict_mode">Strict mode compatibility table</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode">Transitioning to strict mode</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/template_literals/index.html b/files/uk/web/javascript/reference/template_literals/index.html
new file mode 100644
index 0000000000..fcd2c3adab
--- /dev/null
+++ b/files/uk/web/javascript/reference/template_literals/index.html
@@ -0,0 +1,259 @@
+---
+title: Шаблонні літерали (шаблонні рядки)
+slug: Web/JavaScript/Reference/Template_literals
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - String
+  - Посібник
+  - рядок
+  - шаблонні літерали
+  - шаблонні рядки
+translation_of: Web/JavaScript/Reference/Template_literals
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p><span class="seoSummary">Шаблонні літерали - це рядкові літерали, які дозволяють використання вбудованих виразів. З ними ви можете використовувати багаторядковий запис та засоби інтерполяції рядків. </span></p>
+
+<p>У попередніх версіях специфікації ES2015 вони називались "шаблонними рядками".</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">`текстовий рядок`
+
+`текстовий рядок 1
+ текстовий рядок 2`
+
+`текст ${<var>вираз</var>} текст`
+
+<var>тег</var>`текст ${<var>вираз</var>} текст`
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Шаблонні літерали заключаються у зворотні лапки (` `) (<a href="https://uk.wikipedia.org/wiki/%D0%93%D1%80%D0%B0%D0%B2%D1%96%D1%81_(%D0%B4%D1%96%D0%B0%D0%BA%D1%80%D0%B8%D1%82%D0%B8%D1%87%D0%BD%D0%B8%D0%B9_%D0%B7%D0%BD%D0%B0%D0%BA)">гравіс</a>) замість подвійних чи одинарних лапок.</p>
+
+<p>Шаблонні літерали можуть містити заповнювачі. Вони позначаються знаком долара та фігурними дужками (<code>${вираз}</code>). Вирази у заповнювачах та текст між зворотними лапками (` `) передаються у функцію.</p>
+
+<p>Проста функція просто з'єднує декілька частин у єдиний рядок. Якщо перед шаблоном знаходиться вираз (<code>тег</code>), він називається <dfn><em>тегованим шаблоном</em></dfn>. У цьому випадку вираз тегу (зазвичай, це функція) викликається разом із шаблонним літералом, і ви можете маніпулювати ним перед поверненням.</p>
+
+<p>Щоб екранувати зворотні лапки у шаблонному літералі, поставте зворотній слеш (<code>\</code>)<strong> </strong>перед лапками.</p>
+
+<pre class="brush: js">`\`` === '`' // --&gt; true</pre>
+
+<h3 id="Багаторядковий_запис">Багаторядковий запис</h3>
+
+<p>Будь-які символи нового рядка, вставлені у першокод, є частиною шаблонного літералу.</p>
+
+<p>У звичайних рядках вам довелося б використати наступний синтаксис, щоб отримати багаторядковий запис:</p>
+
+<pre class="brush: js">console.log('текстовий рядок 1\n' +
+'текстовий рядок 2');
+// "текстовий рядок 1
+// текстовий рядок 2"</pre>
+
+<p>У шаблонних літералах ви можете зробити те саме ось так:</p>
+
+<pre class="brush: js">console.log(`текстовий рядок 1
+текстовий рядок 2`);
+// "текстовий рядок 1
+// текстовий рядок 2"</pre>
+
+<h3 id="Інтерполяція_виразів">Інтерполяція виразів</h3>
+
+<p>Для того, щоб вставити вирази у звичайні рядки, ви б використали наступний синтаксис:</p>
+
+<pre class="brush: js">let a = 5;
+let b = 10;
+console.log('П\'ятнадцять - це ' + (a + b) + ', а\nне ' + (2 * a + b) + '.');
+// "П'ятнадцять - це 15, а
+// не 20."</pre>
+
+<p>Тепер, з шаблонними літералами, ви можете скористатись синтаксичним цукром, зробивши підстановки легшими для читання наступним чином:</p>
+
+<pre class="brush: js">let a = 5;
+let b = 10;
+console.log(`П'ятнадцять - це ${a + b}, а
+не ${2 * a + b}.`);
+// "П'ятнадцять - це 15, а
+// не 20."</pre>
+
+<h3 id="Вкладені_шаблони">Вкладені шаблони</h3>
+
+<p>У певних випадках вкладений шаблон - це найкращий (і, мабуть, найлегший для читання) спосіб створювати рядки, що конфігуруються. Всередині шаблона у зворотних лапках легко створити внутрішні зворотні лапки, просто використавши їх всередині заповнювача <code>${ }</code> у шаблоні.</p>
+
+<p>Наприклад, якщо умова a дорівнює <code>true</code>, то повернути цей шаблонований літерал.</p>
+
+<p>У ES5:</p>
+
+<pre class="brush: js">let classes = 'header';
+classes += (isLargeScreen() ?
+  '' : item.isCollapsed ?
+    ' icon-expander' : ' icon-collapser');
+</pre>
+
+<p>У ES2015 з шаблонними літералами та без вкладення:</p>
+
+<pre class="brush: js">const classes = `header ${ isLargeScreen() ? '' :
+  (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;</pre>
+
+<p>У ES2015 з вкладеними шаблонними літералами:</p>
+
+<pre class="brush: js">const classes = `header ${ isLargeScreen() ? '' :
+  `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;</pre>
+
+<h3 id="Теговані_шаблони">Теговані шаблони</h3>
+
+<p>Більш прогресивною формою шаблонних літералів є <em>теговані</em> шаблони.</p>
+
+<p>Теги дозволяють розбирати шаблонні літерали за допомого функцій. Перший аргумент функції-тегу містить масив рядкових значень. Решта аргументів відносяться до виразів.</p>
+
+<p>Далі функція-тег може виконати будь-які операції над цими аргументами та повернути отриманий рядок. (Як варіант, вона може повернути щось зовсім інше, як описано у одному з наступних прикладів.) </p>
+
+<p>Ім'я функції, що використовується для тегу, може бути яким завгодно.</p>
+
+<pre class="brush: js">let person = 'Майк';
+let age = 28;
+
+function myTag(strings, personExp, ageExp) {
+  let str0 = strings[0]; // "Цей "
+  let str1 = strings[1]; // " - "
+
+  // Технічно, існує рядок після
+  // останнього виразу (в нашому прикладі),
+  // але він порожній (""), тому не зважаємо.
+  // let str2 = strings[2];
+
+  let ageStr;
+  if (ageExp &gt; 99){
+    ageStr = 'довгожитель';
+  } else {
+    ageStr = 'юнак';
+  }
+
+  // Ми навіть можемо повернути рядок, побудований шаблонним літералом
+  return `${str0}${personExp}${str1}${ageStr}`;
+}
+
+let output = myTag`Цей ${ person } - ${ age }`;
+
+console.log(output);
+// Цей Майк - юнак</pre>
+
+<p>Функція-тег може навіть не повертати рядок!</p>
+
+<pre class="brush: js">function template(strings, ...keys) {
+  return (function(...values) {
+    let dict = values[values.length - 1] || {};
+    let result = [strings[0]];
+    keys.forEach(function(key, i) {
+      let value = Number.isInteger(key) ? values[key] : dict[key];
+      result.push(value, strings[i + 1]);
+    });
+    return result.join('');
+  });
+}
+
+let t1Closure = template`${0}${1}${0}!`;
+t1Closure('Й', 'О');                      // "ЙОЙ!"
+let t2Closure = template`${0} ${'foo'}!`;
+t2Closure('Всім', {foo: 'привіт'});       // "Всім привіт!"
+</pre>
+
+<h3 id="Сирі_рядки">Сирі рядки</h3>
+
+<p>Спеціальна властивість <code>raw</code>, доступна на першому аргументі функції-тегу, дає доступ до сирих рядків у тому вигляді, як вони були записані, без обробки <a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types#Використання_спеціальних_символів_у_рядках">екранувань</a>.</p>
+
+<pre class="brush: js">function tag(strings) {
+  console.log(strings.raw[0]);
+}
+
+tag`текстовий рядок 1 \n текстовий рядок 2`;
+// виводить "текстовий рядок 1 \n текстовий рядок 2" ,
+// в тому числі два символи, '\' та 'n'
+</pre>
+
+<p>На додачу, існує метод {{jsxref("String.raw()")}} для створення сирих рядків — так само, як їх би створили проста шаблонна функція та об'єднання рядків.</p>
+
+<pre class="brush: js">let str = String.raw`Привіт\n${2+3}!`;
+// "Привіт\n5!"
+
+str.length;
+// 10
+
+Array.from(str).join(',');
+// "П,р,и,в,і,т,\,n,5,!"
+</pre>
+
+<h3 id="Теговані_шаблони_та_екрановані_послідовності">Теговані шаблони та екрановані послідовності</h3>
+
+<h4 id="Поведінка_в_ES2016">Поведінка в ES2016</h4>
+
+<p>У ECMAScript 2016 теговані шаблони відповідають правилам наступних екранованих послідовностей:</p>
+
+<ul>
+ <li>Послідовності Юнікоду починаються з "<code>\u</code>", наприклад, <code>\u00A9</code></li>
+ <li>Екранування кодів символів Юнікоду позначаються через "<code>\u{}</code>", наприклад, <code>\u{2F804}</code></li>
+ <li>Шістнадцяткові послідовності починаються з "<code>\x</code>", наприклад, <code>\xA9</code></li>
+ <li>Вісімкові літеральні послідовності починаються з "<code>\0o</code>", далі йде одна чи більше цифр, наприклад, <code>\0o251</code></li>
+</ul>
+
+<p>Це означає, що тегований шаблон, наведений нижче, є проблематичним, оскільки, згідно з граматикою ECMAScript, синтаксичний аналізатор шукає коректну екрановану послідовність Юнікоду, але знаходить неправильно сформований синтаксис:</p>
+
+<pre class="brush: js">latex`\unicode`
+// Викидає помилку у старших версіях ECMAScript (ES2016 та старші)
+// SyntaxError: malformed Unicode character escape sequence</pre>
+
+<h4 id="Перегляд_недозволених_екранованих_послідовностей_у_ES2018">Перегляд недозволених екранованих послідовностей у ES2018</h4>
+
+<p>Теговані шаблони повинні дозволяти вкладені мови (наприклад, <a href="https://uk.wikipedia.org/wiki/%D0%9F%D1%80%D0%B5%D0%B4%D0%BC%D0%B5%D1%82%D0%BD%D0%BE-%D0%BE%D1%80%D1%96%D1%94%D0%BD%D1%82%D0%BE%D0%B2%D0%B0%D0%BD%D0%B0_%D0%BC%D0%BE%D0%B2%D0%B0_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F">DSL</a> чи <a href="https://uk.wikipedia.org/wiki/LaTeX">LaTeX</a>), де існують інші екрановані послідовності. Пропозиція ECMAScript <a href="https://tc39.github.io/proposal-template-literal-revision/">Template Literal Revision</a> (Стадія 4, має бути інтегрована у стандарт ECMAScript 2018) прибирає обмеження синтаксису екранованих послідовностей ECMAScript з тегованих шаблонів.</p>
+
+<p>Однак, недозволені екрановані послідовності все одно мають бути представлені у “готовому” представленні. Вони з'являться як елемент {{jsxref("undefined")}} у масиві “cooked” (готовий):</p>
+
+<pre class="brush: js">function latex(str) {
+  return { "cooked": str[0], "raw": str.raw[0] }
+}
+
+latex`\unicode`
+
+// { cooked: undefined, raw: "\\unicode" }</pre>
+
+<p>Зауважте, що обмеження екранованих послідовностей прибираються лише з <em>тегованих</em> шаблонів, вони не прибираються з <em>нетегованих</em> шаблонних літералів:</p>
+
+<pre class="brush: js example-bad">let bad = `погана екранована послідовність: \unicode`;</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-template-literals', 'Template Literals')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-tagged-templates', 'Tagged templates Literals')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.grammar.template_literals")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+ <li>{{jsxref("String.raw()")}}</li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar">Лексична граматика</a></li>
+ <li><a href="https://gist.github.com/WebReflection/8f227532143e63649804">Подібні до шаблонів рядки у сумісному з ES3 синтаксисі</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-template-strings-2/">"ES6 в подробицях: Шаблонні рядки" на hacks.mozilla.org</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/trailing_commas/index.html b/files/uk/web/javascript/reference/trailing_commas/index.html
new file mode 100644
index 0000000000..3daa0363b5
--- /dev/null
+++ b/files/uk/web/javascript/reference/trailing_commas/index.html
@@ -0,0 +1,171 @@
+---
+title: Кінцеві коми
+slug: Web/JavaScript/Reference/Trailing_commas
+tags:
+  - ECMAScript2017
+  - ECMAScript5
+  - JavaScript
+  - Синтаксис
+  - кома
+  - кінцева кома
+translation_of: Web/JavaScript/Reference/Trailing_commas
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p><strong>Кінцеві коми</strong> (іноді їх називають "заключними комами") можуть бути корисними для додавання нових елементів, параметрів чи властивостей у коді JavaScript. Якщо ви хочете додати нову властивість, ви можете просто додати новий рядок, не змінюючи перед цим попередній рядок, якщо цей рядок вже використовує кінцеву кому. Це робить контроль версій зрозумілішим, а редагування коду може бути менш проблемним.</p>
+
+<p>Кінцеві коми були дозволені у масивних літералах JavaScript з самого початку, а пізніше вони були додані до об'єктних літералів (ECMAScript 5) та нещодавно (ECMAScript 2017) до параметрів функцій.</p>
+
+<p><a href="/uk/docs/Glossary/JSON">JSON</a>, однак, не дозволяє кінцеві коми.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">,</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Кінцеві_коми_у_літералах">Кінцеві коми у літералах</h3>
+
+<h4 id="Масиви">Масиви</h4>
+
+<p>JavaScript ігнорує кінцеві коми у масивах:</p>
+
+<pre class="brush: js notranslate">var arr = [
+  1,
+  2,
+  3,
+];
+
+arr; // [1, 2, 3]
+arr.length; // 3</pre>
+
+<p>Якщо використовується більше однієї кінцевої коми, утворюється пропуск (або діра). Масив з дірами називається <em>розрідженим</em> (<em>щільний</em> масив не має дір). Під час перебору масивів, наприклад, за допомогою {{jsxref("Array.prototype.forEach()")}} або {{jsxref("Array.prototype.map()")}}, діри в масивах пропускаються.</p>
+
+<pre class="brush: js notranslate">var arr = [1, 2, 3,,,];
+arr.length; // 5
+</pre>
+
+<h4 id="Обєкти">Об'єкти</h4>
+
+<p>Починаючи з ECMAScript 5, кінцеві коми у об'єктних літералах також дозволені:</p>
+
+<pre class="brush: js notranslate">var object = {
+  foo: "bar",
+  baz: "qwerty",
+  age: 42,
+};</pre>
+
+<h3 id="Кінцеві_коми_у_функціях">Кінцеві коми у функціях</h3>
+
+<p>ECMAScript 2017 дозволяє кінцеві коми у списку параметрів функцій.</p>
+
+<h4 id="Визначення_параметрів">Визначення параметрів</h4>
+
+<p>Наступні пари визначень функцій є дозволеними та еквівалентні одне одному. Кінцеві коми не впливають на властивість <code>length</code> оголошень функцій або на їхній об'єкт <code>arguments</code>.</p>
+
+<pre class="brush: js notranslate">function f(p) {}
+function f(p,) {}
+
+(p) =&gt; {};
+(p,) =&gt; {};
+</pre>
+
+<p>Кінцеві коми також працюють у <a href="/uk/docs/Web/JavaScript/Reference/Functions/Method_definitions">визначеннях методів</a> для класів чи об'єктів:</p>
+
+<pre class="brush: js notranslate">class C {
+  one(a,) {}
+  two(a, b,) {}
+}
+
+var obj = {
+  one(a,) {},
+  two(a, b,) {},
+};
+</pre>
+
+<h4 id="Виклики_функцій">Виклики функцій</h4>
+
+<p>Наступні пари викликів функцій є дозволеними та еквівалентні один одному.</p>
+
+<pre class="brush: js notranslate">f(p);
+f(p,);
+
+Math.max(10, 20);
+Math.max(10, 20,);
+</pre>
+
+<h4 id="Недозволені_кінцеві_коми">Недозволені кінцеві коми</h4>
+
+<p>Визначення параметрів функцій або виклики функцій, які містять лише кому, викинуть {{Jsxref("SyntaxError")}}. Крім того, при використанні <a href="/uk/docs/Web/JavaScript/Reference/Functions/решта_параметрів">залишкових параметрів</a> кінцеві коми недозволені:</p>
+
+<pre class="brush: js example-bad notranslate">function f(,) {} // SyntaxError: missing formal parameter
+(,) =&gt; {};       // SyntaxError: expected expression, got ','
+f(,)             // SyntaxError: expected expression, got ','
+
+function f(...p,) {} // SyntaxError: parameter after rest parameter
+(...p,) =&gt; {}        // SyntaxError: expected closing parenthesis, got ','
+</pre>
+
+<h3 id="Кінцеві_коми_у_деструктуризації">Кінцеві коми у деструктуризації</h3>
+
+<p>Кінцеві коми також дозволені по ліву сторону при використанні <a href="/uk/docs/Web/JavaScript/Reference/Operators/Деструктуризація">деструктуризаційного присвоєння</a>:</p>
+
+<pre class="brush: js notranslate">// деструктуризація масиву з кінцевою комою
+[a, b,] = [1, 2];
+
+// деструктуризація об'єкта з кінцевою комою
+var o = {
+  p: 42,
+  q: true,
+};
+var {p, q,} = o;
+</pre>
+
+<p>Знову ж таки, при використання залишкового елемента, буде викинуто {{jsxref("SyntaxError")}}:</p>
+
+<pre class="brush: js example-bad notranslate">var [a, ...b,] = [1, 2, 3];
+// SyntaxError: rest element may not have a trailing comma</pre>
+
+<h3 id="Кінцеві_коми_у_JSON">Кінцеві коми у JSON</h3>
+
+<p>Кінцеві коми у об'єктах були введені лише починаючи з ECMAScript 5. Оскільки JSON базується на синтаксисі JavaScript, що існував до ES5, <strong>кінцеві коми не дозволені у JSON</strong>.</p>
+
+<p>Обидва рядки викинуть <code>SyntaxError</code>:</p>
+
+<pre class="brush: js example-bad notranslate">JSON.parse('[1, 2, 3, 4, ]');
+JSON.parse('{"foo" : 1, }');
+// SyntaxError JSON.parse: unexpected character
+// at line 1 column 14 of the JSON data
+</pre>
+
+<p>Уникайте кінцевих ком, щоб розібрати JSON коректно:</p>
+
+<pre class="brush: js example-good notranslate">JSON.parse('[1, 2, 3, 4 ]');
+JSON.parse('{"foo" : 1 }');</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.grammar.trailing_commas")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>Початкова пропозиція ECMAScript: <a href="https://github.com/tc39/proposal-trailing-function-commas">кінцеві коми у функції</a>, автор Jeff Morrison</li>
+</ul>
diff --git a/files/uk/web/javascript/reference/протоколи_перебору/index.html b/files/uk/web/javascript/reference/протоколи_перебору/index.html
new file mode 100644
index 0000000000..d5899043ca
--- /dev/null
+++ b/files/uk/web/javascript/reference/протоколи_перебору/index.html
@@ -0,0 +1,352 @@
+---
+title: Протоколи перебору
+slug: Web/JavaScript/Reference/Протоколи_перебору
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Ітератор
+  - ітерабельний об'єкт
+translation_of: Web/JavaScript/Reference/Iteration_protocols
+---
+<div>{{jsSidebar("More")}}</div>
+
+<p>Пара доповнень до ECMAScript 2015 є не новими вбудованими елементами чи синтаксисом, а протоколами. Ці протоколи можуть реалізовуватись будь-яким об'єктом, що відповідає певним правилам.</p>
+
+<p>Існують два протоколи: <a href="#Протокол_перебируваного">протокол ітерабельного об'єкта</a> і <a href="#Протокол_перебирача">протокол ітератора</a>.</p>
+
+<h2 id="Протокол_ітерабельного_обєкта">Протокол ітерабельного об'єкта</h2>
+
+<p>Протокол <strong>ітерабельного об'єкта</strong> дозволяє об'єктам JavaScript визначати чи налаштовувати свою ітераційну поведінку, наприклад, через які значення буде проходити цикл у конструкції {{jsxref("Statements/for...of", "for..of")}}. Деякі вбудовані типи є <a href="#Built-in_iterables">вбудованими ітерабельними об'єктами</a> з визначеною за замовчуванням ітераційною поведінкою, наприклад, {{jsxref("Array")}} або {{jsxref("Map")}}, в той час, як інші типи (такі, як {{jsxref("Object")}}) не є ітерабельними.</p>
+
+<p>Для того, щоб бути <strong>ітерабельним</strong>, об'єкт має реалізувати метод <strong>@@iterator</strong>, тобто, цей об'єкт (або один з об'єктів у його <a href="/uk/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">ланцюжку прототипів</a>) повинен мати властивість з ключем <strong>@@iterator</strong>, доступну через константу <code>{{jsxref("Symbol.iterator")}}</code>:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Властивість</th>
+   <th scope="col">Значення</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>[Symbol.iterator]</code></td>
+   <td>Функція без аргументів, яка повертає об'єкт, що відповідає <a href="#The_iterator_protocol">протоколу ітератора</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Коли виникає необхідність перебрати об'єкт (наприклад, на початку циклу <code>for..of</code>), його метод <code>@@iterator</code> викликається без аргументів, а <strong>ітератор</strong>, який він повертає, використовується для отримання значень, що перебираються.</p>
+
+<h2 id="Протокол_ітератора">Протокол ітератора</h2>
+
+<p>Протокол <strong>ітератора</strong> визначає стандартний спосіб створювати послідовності значень (скінченні або нескінченні).</p>
+
+<p>Об'єкт є ітератором, коли реалізує метод <code><strong>next()</strong></code> з наступною семантикою:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Властивість</th>
+   <th scope="col">Значення</th>
+  </tr>
+  <tr>
+   <td><code>next</code></td>
+   <td>
+    <p>Функція з нулем аргументів, яка повертає об'єкт з двома властивостями:</p>
+
+    <ul>
+     <li><code>done</code> (булеве значення)
+
+      <ul>
+       <li>Має значення <code>true</code>, якщо ітератор досяг кінця послідовності, що перебирається. В цьому випадку <code>value</code> може містити <em>значення, що повертається</em> ітератором. Значення, що повертаються, пояснюються <a href="http://www.2ality.com/2013/06/iterators-generators.html#generators-as-threads">тут</a>.</li>
+       <li>Має значення <code>false</code>, якщо ітератор був здатний надати наступне значення послідовності. Це аналогічно тому, щоб взагалі не вказувати значення властивості <code>done</code>.</li>
+      </ul>
+     </li>
+     <li><code>value</code> - будь-яке значення JavaScript, що повертає ітератор. Його можна не вказувати, коли <code>done</code> дорівнює <code>true</code>.</li>
+    </ul>
+
+    <p>Метод <code>next</code> завжди повинен повертати об'єкт з належними властивостями, в тому числі <code>done</code> та <code>value</code>. Якщо повертається значення, що не є об'єктом (наприклад, <code>false</code> чи <code>undefined</code>), буде викинуто помилку {{jsxref("TypeError")}} ("iterator.next() returned a non-object value").</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p>Неможливо знати, чи певний об'єкт реалізує протокол ітератора, однак, можна легко створити об'єкт, який відповідає обом протоколам, ітератора та ітерабельного об'єкта (як показано нижче у прикладі). Це дозволяє використовувати ітератор там, де очікується ітерабельний об'єкт. Тому нечасто є потреба реалізовувати протокол ітератора, не реалізуючи також протокол ітерабельного об'єкта. </p>
+
+<pre><code>var myIterator = {
+    next: function() {
+        // ...
+    },
+    [Symbol.iterator]: function() { return this }
+};</code>
+</pre>
+</div>
+
+<h2 id="Приклади_застосування_протоколів_перебору">Приклади застосування протоколів перебору</h2>
+
+<p>Об'єкт {{jsxref("String")}} є прикладом вбудованого ітерабельного об'єкта:</p>
+
+<pre class="brush: js">var someString = '13';
+typeof someString[Symbol.iterator];          // "function"
+</pre>
+
+<p><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/String/@@iterator">Вбудований ітератор </a>об'єкта <code>String</code> повертає коди символів рядка один за одним:</p>
+
+<pre class="brush: js">var iterator = someString[Symbol.iterator]();
+iterator + '';                               // "[object String Iterator]"
+
+iterator.next();                             // { value: "1", done: false }
+iterator.next();                             // { value: "3", done: false }
+iterator.next();                             // { value: undefined, done: true }</pre>
+
+<p>Деякі вбудовані конструкції, такі як <a href="/uk/docs/Web/JavaScript/Reference/Operators/Spread_syntax">оператор розпакування</a>, використовують під капотом той самий протокол перебору:</p>
+
+<pre class="brush: js">[...someString]                              // ["1", "3"]</pre>
+
+<p>Ми можемо перевизначити поведінку під час перебору, надавши свій власний метод <code>@@iterator</code>:</p>
+
+<pre class="brush: js">var someString = new String('привіт');   // необхідно явно конструювати об'єкт String, щоб запобігти автопакуванню
+
+someString[Symbol.iterator] = function() {
+  return { // це ітератор, що повертає єдиний елемент, рядок "бувай"
+    next: function() {
+      if (this._first) {
+        this._first = false;
+        return { value: 'бувай', done: false };
+      } else {
+        return { done: true };
+      }
+    },
+    _first: true
+  };
+};
+</pre>
+
+<p>Зверніть увагу, як перевизначення методу <code>@@iterator</code> впливає на поведінку вбудованих конструкцій, що використовують протокол перебору:</p>
+
+<pre class="brush: js">[...someString];                             // ["бувай"]
+someString + '';                             // "привіт"
+</pre>
+
+<h2 id="Приклади_ітерабельних_обєктів">Приклади ітерабельних об'єктів</h2>
+
+<h3 id="Вбудовані_ітерабельні_обєкти">Вбудовані ітерабельні об'єкти</h3>
+
+<p>{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} та {{jsxref("Set")}} всі є вбудованими ітерабельними об'єктами, тому що кожний з їхніх прототипів реалізує метод <code>@@</code><code>iterator</code>.</p>
+
+<h3 id="Створені_користувачем_ітерабельні_обєкти">Створені користувачем ітерабельні об'єкти</h3>
+
+<p>Ми можемо створювати власні ітерабельні об'єкти наступним чином:</p>
+
+<pre class="brush: js">var myIterable = {};
+myIterable[Symbol.iterator] = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+};
+[...myIterable]; // [1, 2, 3]
+</pre>
+
+<h3 id="Вбудовані_API_що_приймають_ітерабельні_обєкти">Вбудовані API, що приймають ітерабельні об'єкти</h3>
+
+<p>Існує багато API, які приймають ітерабельні об'єкти, наприклад: {{jsxref("Map", "Map([iterable])")}}, {{jsxref("WeakMap", "WeakMap([iterable])")}}, {{jsxref("Set", "Set([iterable])")}} and {{jsxref("WeakSet", "WeakSet([iterable])")}}:</p>
+
+<pre class="brush: js">var myObj = {};
+new Map([[1, 'а'], [2, 'б'], [3, 'в']]).get(2);               // "б"
+new WeakMap([[{}, 'а'], [myObj, 'б'], [{}, 'в']]).get(myObj); // "б"
+new Set([1, 2, 3]).has(3);                               // true
+new Set('123').has('2');                                 // true
+new WeakSet(function* () {
+    yield {};
+    yield myObj;
+    yield {};
+}()).has(myObj);                                         // true
+</pre>
+
+<p>Дивіться також {{jsxref("Promise.all", "Promise.all(iterable)")}}, {{jsxref("Promise.race", "Promise.race(iterable)")}} та {{jsxref("Array.from", "Array.from()")}}.</p>
+
+<h3 id="Синтаксис_що_очікує_на_ітерабельний_обєкт">Синтаксис, що очікує на ітерабельний об'єкт</h3>
+
+<p>Деякі оператори та вирази очікують на ітерабельні об'єкти, наприклад, цикли <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for...of">for-of</a></code>, <a href="/uk/docs/Web/JavaScript/Reference/Operators/Spread_syntax">оператор розпакування</a>, <code><a href="/uk/docs/Web/JavaScript/Reference/Operators/yield*">yield*</a></code> та <a href="/uk/docs/Web/JavaScript/Reference/Operators/Деструктуризація">деструктуризаційне присвоєння</a>:</p>
+
+<pre class="brush: js">for(let value of ['а', 'б', 'в']){
+    console.log(value);
+}
+// "а"
+// "б"
+// "в"
+
+[...'абв']; // ["а", "б", "в"]
+
+function* gen() {
+  yield* ['а', 'б', 'в'];
+}
+
+gen().next(); // { value:"а", done:false }
+
+[a, b, c] = new Set(['а', 'б', 'в']);
+a // "а"
+
+</pre>
+
+<h3 id="Погано_сформовані_ітерабельні_обєкти">Погано сформовані ітерабельні об'єкти</h3>
+
+<p>Якщо метод ітерабельного об'єкта <code>@@iterator</code> не повертає об'єкт ітератора, то це погано сформований ітерабельний об'єкт. Використання його в такому вигляді ймовірно призведе до викидання винятків під час виконання або помилкової поведінки:</p>
+
+<pre class="brush: js">var nonWellFormedIterable = {}
+nonWellFormedIterable[Symbol.iterator] = () =&gt; 1
+[...nonWellFormedIterable] // TypeError: [] is not a function
+</pre>
+
+<h2 id="Приклади_ітераторів">Приклади ітераторів</h2>
+
+<h3 id="Простий_ітератор">Простий ітератор</h3>
+
+<pre class="brush: js">function makeIterator(array) {
+    var nextIndex = 0;
+
+    return {
+       next: function() {
+           return nextIndex &lt; array.length ?
+               {value: array[nextIndex++], done: false} :
+               {done: true};
+       }
+    };
+}
+
+var it = makeIterator(['yo', 'ya']);
+
+console.log(it.next().value); // 'yo'
+console.log(it.next().value); // 'ya'
+console.log(it.next().done);  // true
+</pre>
+
+<h3 id="Нескінченний_ітератор">Нескінченний ітератор</h3>
+
+<pre class="brush: js">function idMaker() {
+    var index = 0;
+
+    return {
+       next: function(){
+           return {value: index++, done: false};
+       }
+    };
+}
+
+var it = idMaker();
+
+console.log(it.next().value); // '0'
+console.log(it.next().value); // '1'
+console.log(it.next().value); // '2'
+// ...
+</pre>
+
+<h3 id="З_генератором">З генератором</h3>
+
+<pre class="brush: js">function* makeSimpleGenerator(array) {
+    var nextIndex = 0;
+
+    while (nextIndex &lt; array.length) {
+        yield array[nextIndex++];
+    }
+}
+
+var gen = makeSimpleGenerator(['yo', 'ya']);
+
+console.log(gen.next().value); // 'yo'
+console.log(gen.next().value); // 'ya'
+console.log(gen.next().done);  // true
+
+
+
+function* idMaker() {
+    var index = 0;
+    while (true)
+        yield index++;
+}
+
+var gen = idMaker();
+
+console.log(gen.next().value); // '0'
+console.log(gen.next().value); // '1'
+console.log(gen.next().value); // '2'
+// ...
+</pre>
+
+<h3 id="З_класом_ES2015">З класом ES2015</h3>
+
+<pre class="brush: js">class SimpleClass {
+  constructor(data) {
+    this.index = 0;
+    this.data = data;
+  }
+
+  [Symbol.iterator]() {
+    return {
+      next: () =&gt; {
+        if (this.index &lt; this.data.length) {
+          return {value: this.data[this.index++], done: false};
+        } else {
+          this.index = 0; //Якщо ми хотіли б перебрати його знову, без примусового ручного оновлення індексу
+          return {done: true};
+        }
+      }
+    }
+  };
+}
+
+const simple = new SimpleClass([1,2,3,4,5]);
+
+for (const val of simple) {
+  console.log(val);  //'0' '1' '2' '3' '4' '5'
+}
+</pre>
+
+<h2 id="Генератор_є_ітератором_чи_ітерабельним_обєктом">Генератор є ітератором чи ітерабельним об'єктом?</h2>
+
+<p><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Generator">Об'єкт генератор</a> є одночасно ітератором та ітерабельним об'єктом:</p>
+
+<pre class="brush: js">var aGeneratorObject = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+}();
+typeof aGeneratorObject.next;
+// "function", бо він має метод next, отже, він ітератор
+typeof aGeneratorObject[Symbol.iterator];
+// "function", бо він має метод @@iterator, отже, він ітерабельний об'єкт
+aGeneratorObject[Symbol.iterator]() === aGeneratorObject;
+// true, бо його метод @@iterator повертає себе (ітератор),
+// отже, він добре сформований ітерабельний об'єкт
+[...aGeneratorObject];
+// [1, 2, 3]
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-iteration', 'Iteration')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкова виознака.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-iteration', 'Iteration')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>Більше інформації щодо генераторів ES2015 дивіться у <a href="/uk/docs/Web/JavaScript/Reference/Statements/function*">документації по function*</a>.</li>
+</ul>
diff --git a/files/uk/web/javascript/перевірка_на_рівність_та_однаковість/index.html b/files/uk/web/javascript/перевірка_на_рівність_та_однаковість/index.html
new file mode 100644
index 0000000000..45d16489a1
--- /dev/null
+++ b/files/uk/web/javascript/перевірка_на_рівність_та_однаковість/index.html
@@ -0,0 +1,494 @@
+---
+title: Перевірка на рівність та однаковість
+slug: Web/JavaScript/Перевірка_на_рівність_та_однаковість
+tags:
+  - JavaScript
+  - NaN
+  - SameValue
+  - SameValueZero
+  - Однаковість
+  - Рівність
+  - Тотожність
+  - порівняння
+translation_of: Web/JavaScript/Equality_comparisons_and_sameness
+---
+<div>{{jsSidebar("Intermediate")}}</div>
+
+<p>У ES2015 існує чотири алгоритми рівності:</p>
+
+<ul>
+ <li>Абстрактна рівність (<code>==</code>);</li>
+ <li>Строга рівність (<code>===</code>): вживається у методах <code>Array.prototype.indexOf</code>, <code>Array.prototype.lastIndexOf</code> та у блоках <code>case</code>;</li>
+ <li>SameValueZero (однакове значення або нуль): вживається конструкторами {{jsxref("Global_Objects/TypedArray", "типізованих масивів")}} та {{jsxref("Global_Objects/ArrayBuffer", "ArrayBuffer")}}, так само, як і операціями з {{jsxref("Global_Objects/Map", "Map")}} та {{jsxref("Global_Objects/Set", "Set")}}, а також методами <code>String.prototype.includes</code> та <code>Array.prototype.includes</code>, починаючи з ES2016;</li>
+ <li>SameValue (однакове значення): вживається у решті випадків.</li>
+</ul>
+
+<p>JavaScript надає три різні операції порівняння значень:</p>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Ідентичність_строга_рівність_()">===</a> - Строга рівність ("ідентичність", "потрійне дорівнює")</li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Рівність_()">==</a> - Абстрактна рівність ("нестрога рівність", "подвійне дорівнює")</li>
+ <li>метод {{jsxref("Object.is")}} реалізує SameValue (нове у ES2015).</li>
+</ul>
+
+<p>Вибір оператора залежитиме від того, який різновид порівняння вам потрібен. Коротко:</p>
+
+<ul>
+ <li>подвійне дорівнює (<code>==</code>) виконає приведення типів при порівнянні двох величин, і оброблятиме <code>NaN</code>, <code>-0</code> та <code>+0</code> особливим чином, у відповідності з IEEE 754 (тому <code>NaN != NaN</code>, а <code>-0 == +0</code>);</li>
+ <li>потрійне дорівнює (<code>===</code>) виконує таке саме порівняння, як і подвійне дорівнює (і так само поводиться з <code>NaN</code>, <code>-0</code> та <code>+0</code>), але без приведення типів; якщо типи величин відрізняються, повертається <code>false</code>.</li>
+ <li><code>Object.is</code> не виконує приведення типів та не обробляє <code>NaN</code>, <code>-0</code> та <code>+0</code> особливим чином (має таку саму поведінку, як і <code>===</code>, за винятком цих спеціальних числових значень).</li>
+</ul>
+
+<p>Зауважте, що усі відмінності операторів стосуються їхнього поводження з простими величинами; жоден з них не порівнює, чи є параметри концептуально однаковими за структурою. Для будь-яких не примітивних об'єктів <code>x</code> та <code>y</code>, що мають однакову структуру, але є двома окремими об'єктами, всі вищенаведені форми порівняння вертатимуть <code>false</code>.</p>
+
+<h2 id="Строга_рівність_за_допомогою">Строга рівність за допомогою <code>===</code></h2>
+
+<p>Строга рівність перевіряє рівність двох значень. До жодного з них не застосовується неявне приведення перед порівнянням. Якщо значення мають різні типи, вони вважаються нерівними. Якщо значення мають однаковий тип, не є числами, і мають однакові значення, вони вважаються рівними. Нарешті, якщо обидва значення є числами, вони вважаються рівними, якщо обидва не дорівнюють <code>NaN</code> та мають однакові значення, або якщо одне дорівнює <code>+0</code>, а інше <code>-0</code>.</p>
+
+<pre class="brush: js">var num = 0;
+var obj = new String('0');
+var str = '0';
+
+console.log(num === num); // true
+console.log(obj === obj); // true
+console.log(str === str); // true
+
+console.log(num === obj); // false
+console.log(num === str); // false
+console.log(obj === str); // false
+console.log(null === undefined); // false
+console.log(obj === null); // false
+console.log(obj === undefined); // false
+</pre>
+
+<p>Строга рівність майже завжди є доречною операцією порівняння. Для усіх значень, крім чисел, вона використовує очевидну семантику: значення дорівнює лише самому собі. Для чисел вона використовує трохи відмінну семантику, щоб згладити два граничні випадки. Перший полягає в тому, що нуль з рухомою комою є або додатним, або від'ємним. Це корисно для представлення деяких математичних рішень, але, оскільки у більшості ситуацій різниця між <code>+0</code> та <code>-0</code> не має значення, строга рівність вважає їх одним значенням. Другий випадок полягає в тому, що рухома кома містить концепцію не числа, <code>NaN</code> (not a number), для вирішення деяких нечітко визначених математичних проблем: наприклад, від'ємна нескінченність, додана до позитивної нескінченності. Строга рівність вважає значення <code>NaN</code> нерівним будь-якій іншій величині, в тому числі самому собі. (Єдиний випадок, у якому <code>(x !== x)</code> дорівнює <code>true</code>, це коли <code>x</code> дорівнює <code>NaN</code>.)</p>
+
+<h2 id="Нестрога_рівність_за_допомогою">Нестрога рівність за допомогою ==</h2>
+
+<p>Нестрога рівність порівнює два значення <em>після</em> приведення обох значень до спільного типу. Після приведення (один чи обидва значення можуть зазнати перетворення), фінальне порівняння виконується так само, як його виконує оператор <code>===</code>. Нестрога рівність є <em>симетричною</em>: вираз <code>A == B</code> за семантикою завжди ідентичний <code>B == A</code> для будь-яких значень <code>A</code> та <code>B</code> (за винятком порядку, в якому виконуються перетворення).</p>
+
+<p>Порівняльна операція виконується наступним чином для операндів різних типів:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row"></th>
+   <th colspan="7" scope="col" style="text-align: center;">Операнд B</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row"></th>
+   <td></td>
+   <td style="text-align: center;">Undefined</td>
+   <td style="text-align: center;">Null</td>
+   <td style="text-align: center;">Number</td>
+   <td style="text-align: center;">String</td>
+   <td style="text-align: center;">Boolean</td>
+   <td style="text-align: center;">Object</td>
+  </tr>
+  <tr>
+   <th colspan="1" rowspan="6" scope="row">Операнд A</th>
+   <td>Undefined</td>
+   <td style="text-align: center;"><code>true</code></td>
+   <td style="text-align: center;"><code>true</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td>Null</td>
+   <td style="text-align: center;"><code>true</code></td>
+   <td style="text-align: center;"><code>true</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td>Number</td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>A === B</code></td>
+   <td style="text-align: center;"><code>A === ToNumber(B)</code></td>
+   <td style="text-align: center;"><code>A === ToNumber(B)</code></td>
+   <td style="text-align: center;"><code>A == ToPrimitive(B)</code></td>
+  </tr>
+  <tr>
+   <td>String</td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>ToNumber(A) === B</code></td>
+   <td style="text-align: center;"><code>A === B</code></td>
+   <td style="text-align: center;"><code>ToNumber(A) === ToNumber(B)</code></td>
+   <td style="text-align: center;"><code>A == ToPrimitive(B)</code></td>
+  </tr>
+  <tr>
+   <td>Boolean</td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>ToNumber(A) === B</code></td>
+   <td style="text-align: center;"><code>ToNumber(A) === ToNumber(B)</code></td>
+   <td style="text-align: center;"><code>A === B</code></td>
+   <td style="text-align: center;"><code>ToNumber(A) == ToPrimitive(B)</code></td>
+  </tr>
+  <tr>
+   <td>Object</td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>ToPrimitive(A) == B</code></td>
+   <td style="text-align: center;"><code>ToPrimitive(A) == B</code></td>
+   <td style="text-align: center;"><code>ToPrimitive(A) == ToNumber(B)</code></td>
+   <td style="text-align: center;"><code>A === B</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>У наведеній вище таблиці <code>ToNumber(A)</code> пробує перетворити свій аргумент на число перед порівнянням. Його поведінка еквівалентна операції <code>+A</code> (унарний оператор +). <code>ToPrimitive(A)</code> пробує перетворити свій аргумент-об'єкт на просту величину, викликаючи в різній послідовності методи <code>A.toString</code> та <code>A.valueOf</code> на операнді <code>A</code>.</p>
+
+<p>Традиційно, та згідно з ECMAScript, усі об'єкти нестрого нерівні <code>undefined</code> та <code>null</code>. Але більшість переглядачів дозволяють дуже вузькому класу об'єктів (зокрема, об'єкту <code>document.all</code> на будь-якій сторінці) у певному контексті поводитись, як наче вони <em>емулюють</em> значення <code>undefined</code>. Нестрога рівність у такому контексті: <code>null == A</code> та <code>undefined == A</code> оцінить як true тільки за умови, що A є об'єктом, який <em>емулює</em> <code>undefined</code>. У всіх інших випадках об'єкт ніколи не є нестрого рівним <code>undefined</code> або <code>null</code>.</p>
+
+<pre class="brush: js">var num = 0;
+var obj = new String('0');
+var str = '0';
+
+console.log(num == num); // true
+console.log(obj == obj); // true
+console.log(str == str); // true
+
+console.log(num == obj); // true
+console.log(num == str); // true
+console.log(obj == str); // true
+console.log(null == undefined); // true
+
+// обидва дорівнюють false, крім виняткових випадків
+console.log(obj == null);
+console.log(obj == undefined);
+</pre>
+
+<p>Деякі розробники вважають, що краще ніколи не використовувати нестрогу рівність. Результат порівняння за допомогою строгої рівності легше передбачити, а, оскільки жодного приведення типів не виконується, обчислення може відбуватись швидше.</p>
+
+<h2 id="Порівняння_за_алгоритмом_same-value">Порівняння за алгоритмом same-value</h2>
+
+<p>Порівняння same-value (однакове значення) спрямоване на останній випадок використання: визначення того, чи є два значення <em>функціонально ідентичними</em> в усіх контекстах. (Цей випадок використання демонструє приклад <a href="https://uk.wikipedia.org/wiki/%D0%9F%D1%80%D0%B8%D0%BD%D1%86%D0%B8%D0%BF_%D0%BF%D1%96%D0%B4%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B8_%D0%9B%D1%96%D1%81%D0%BA%D0%BE%D0%B2" title="http://en.wikipedia.org/wiki/Liskov_substitution_principle">принципу підстановки Лісков</a>.) Один приклад виникає, коли робиться спроба змінити незмінну властивість:</p>
+
+<pre class="brush: js">// Додати незмінну властивість NEGATIVE_ZERO у конструктор Number.
+Object.defineProperty(Number, 'NEGATIVE_ZERO',
+                      { value: -0, writable: false, configurable: false, enumerable: false });
+
+function attemptMutation(v) {
+  Object.defineProperty(Number, 'NEGATIVE_ZERO', { value: v });
+}
+</pre>
+
+<p><code>Object.defineProperty</code> викине виняток, коли спроба змінити незмінну властивість дійсно змінить її, але нічого не зробить, якщо не робиться запитів на реальну зміну. Якщо <code>v</code> дорівнює <code>-0</code>, запитів на зміну не виконувалось, жодна помилка не буде викинута. Внутрішньо, коли перевизначається незмінна властивість, нове значення порівнюється з наявним значенням за допомогою алгоритму same-value.</p>
+
+<p>Алгоритм same-value надається методом {{jsxref("Object.is")}}.</p>
+
+<h2 id="Порівняння_за_алгоритмом_same-value-zero">Порівняння за алгоритмом same-value-zero</h2>
+
+<p>Схожий на алгоритм same-value, але вважає +0 та -0 рівними.</p>
+
+<h2 id="Абстрактна_рівність_строга_рівність_та_однакове_значення_у_специфікації">Абстрактна рівність, строга рівність та однакове значення у специфікації</h2>
+
+<p>У ES5 порівняння, що виконується за допомогою <a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Рівність_()" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>==</code></a>, описане у <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.3" title="http://ecma-international.org/ecma-262/5.1/#sec-11.9.3">Розділі 11.9.3, Алгоритм абстрактної рівності</a>. Порівняння <a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Ідентичність_строга_рівність_()" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>===</code></a> у <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.6" title="http://ecma-international.org/ecma-262/5.1/#sec-11.9.6">11.9.6, Алгоритм строгої рівності</a>. (Сходіть почитайте. Вони короткі та легкі для читання. Підказка: читайте спочатку алгоритм строгої рівності.) ES5 також описує, у <a href="http://ecma-international.org/ecma-262/5.1/#sec-9.12" title="http://ecma-international.org/ecma-262/5.1/#sec-9.12">Розділі 9.12, Алгоритм SameValue</a>, для внутрішнього використання рушієм JS. Він значною мірою такий самий, як алгоритм строгої рівності, за винятком того, як 11.9.6.4 та 9.12.4 відрізняються у поводженні з {{jsxref("Number","числами")}}. ES2015 просто відкриває цей алгоритм через {{jsxref("Object.is")}}.</p>
+
+<p>Щодо подвійного та потрійного дорівнює, можна побачити, що, за винятком попередньої перевірки типу у 11.9.6.1, алгоритм строгої рівності є підмножиною алгоритму абстрактної рівності, бо 11.9.6.2–7 відповідають 11.9.3.1.a–f.</p>
+
+<h2 id="Модель_для_розуміння_порівняльних_алгоритмів">Модель для розуміння порівняльних алгоритмів?</h2>
+
+<p>До ES2015 ви, можливо, сказали б щодо подвійного та потрійного дорівнює, що один є "посиленою" версією іншого. Наприклад, хтось може сказати, що подвійне дорівнює є посиленою версією потрійного дорвінює, тому що перше робить усе, що робить друге, але з приведенням типів у операндах. Наприклад, <code>6 == "6"</code>. (Альтернативно, хтось може сказати, що подвійне дорівнює є основою, а потрійне дорівнює є посиленою версією, тому що воно вимагає, щоб два операнди були однакового типу, і таким чином, вводить додаткове обмеження. Яка модель краща для розуміння, залежить від того, яким чином ви розглядаєте питання.)</p>
+
+<p>Однак, така модель вбудованих операторів однаковості не може бути поширена на ES2015 з включенням у свій "діапазон" методу {{jsxref("Object.is")}}. Метод {{jsxref("Object.is")}} не просто "абстрактніший", ніж подвійне, або "суворіший", ніж потрійне дорівнює, він також не вписується десь посередині (тобто, будучи одночасно суворішим за подвійне дорівнює, але менш строгим за потрійне дорівнює). Як можна побачити з наведеної нижче порівняльної таблиці, все через поводження {{jsxref("Object.is")}} з {{jsxref("NaN")}}. Зверніть увагу, що, якби значення <code>Object.is(NaN, NaN)</code> дорівнювало <code>false</code>, ми <em>могли б</em> сказати, що метод вписується у абстрактно-суворий діапазон як ще суворіший за потрійне дорівнює, такий, що розрізняє <code>-0</code> та <code>+0</code>. Однак, його поводження з {{jsxref("NaN")}} означає, що це не так. На жаль, {{jsxref("Object.is")}} просто має сприйматись з точки зору його особливих характеристик, а не його абстрактності чи суворості у порівнянні з операторами рівності.</p>
+
+<table class="standard-table" style="height: 944px; width: 892px;">
+ <caption>Порівняльні алгоритми</caption>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">x</th>
+   <th scope="col" style="text-align: center;">y</th>
+   <th scope="col" style="width: 10em; text-align: center;"><code>==</code></th>
+   <th scope="col" style="width: 10em; text-align: center;"><code>===</code></th>
+   <th scope="col" style="width: 10em; text-align: center;"><code>Object.is</code></th>
+   <th scope="col" style="width: 10em; text-align: center;"><code>SameValueZero</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>undefined</code></td>
+   <td><code>undefined</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>null</code></td>
+   <td><code>null</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>'foo'</code></td>
+   <td><code>'foo'</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>0</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>+0</code></td>
+   <td><code>-0</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>+0</code></td>
+   <td><code>0</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>-0</code></td>
+   <td><code>0</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>""</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>""</code></td>
+   <td><code>0</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>'0'</code></td>
+   <td><code>0</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>'17'</code></td>
+   <td><code>17</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>[1, 2]</code></td>
+   <td><code>'1,2'</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>new String('foo')</code></td>
+   <td><code>'foo'</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>null</code></td>
+   <td><code>undefined</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>null</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>undefined</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>{ foo: 'bar' }</code></td>
+   <td><code>{ foo: 'bar' }</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>new String('foo')</code></td>
+   <td><code>new String('foo')</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>null</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>NaN</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>'foo'</code></td>
+   <td><code>NaN</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>NaN</code></td>
+   <td><code>NaN</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Коли_використовувати_jsxrefObject.is_та_потрійне_дорівнює">Коли використовувати {{jsxref("Object.is")}} та потрійне дорівнює</h2>
+
+<p>Загалом, єдиний випадок, коли особлива поведінка {{jsxref("Object.is")}} щодо нулів може становити інтерес, це впровадження певних схем метапрограмування, особливо тих, що стосуються дескрипторів властивостей, коли бажано, щоб ваша робота відображала певні характеристики {{jsxref("Object.defineProperty")}}. Якщо ваш випадок цього не вимагає, пропонується уникати {{jsxref("Object.is")}} та використовувати натомість <a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Ідентичність_строга_рівність_()" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>===</code></a>. Навіть якщо у вашому випадку вимагається, щоб порівняння двох {{jsxref("NaN")}} повертало <code>true</code>, загалом, легше перевіряти {{jsxref("NaN")}} окремо (за допомогою методу {{jsxref("isNaN")}}, доступного у попередніх версіях ECMAScript), ніж розбиратися, як навколишні обчислення можуть вплинути на знаки нулів, які зустрінуться вам у порівняннях.</p>
+
+<p>Ось невичерпний список вбудованих методів та операцій, що можуть спричинити відмінності між <code>-0</code> та <code>+0</code>, які можуть проявити себе у коді:</p>
+
+<dl>
+ <dt><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation"><code>- (унарний мінус)</code></a></dt>
+</dl>
+
+<dl>
+ <dd>
+ <pre class="brush:js">let stoppingForce = obj.mass * -obj.velocity;</pre>
+
+ <p>Якщо <code>obj.velocity</code> дорівнює <code>0</code> (або обчислюється як <code>0</code>), в цьому місці отримуємо <code>-0</code>, який переходить далі у <code>stoppingForce</code>.</p>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Math.atan2")}}</dt>
+ <dt>{{jsxref("Math.ceil")}}</dt>
+ <dt>{{jsxref("Math.pow")}}</dt>
+ <dt>{{jsxref("Math.заокругелння","Math.round")}}</dt>
+</dl>
+
+<dl>
+ <dd>У деяких випадках <code>-0</code> може потрапити у вираз як результат одного з цих методів, навіть коли жоден параметр не дорівнює <code>-0</code>. Наприклад, при використанні {{jsxref("Math.pow")}} для піднесення {{jsxref("Infinity", "-Infinity")}} до будь-якого від'ємного непарного степеня, отримуємо <code>-0</code>. Звертайтесь до документації щодо окремих методів.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Math.floor")}}</dt>
+ <dt>{{jsxref("Math.max")}}</dt>
+ <dt>{{jsxref("Math.min")}}</dt>
+ <dt>{{jsxref("Math.sin")}}</dt>
+ <dt>{{jsxref("Math.sqrt")}}</dt>
+ <dt>{{jsxref("Math.tan")}}</dt>
+</dl>
+
+<dl>
+ <dd>Можливо отримати <code>-0</code> як результат виконання даних методів у певних випадках, коли <code>-0</code> присутній як один з параметрів. Наприклад, <code>Math.min(-0, +0)</code> повертає <code>-0</code>. Звертайтесь до документації щодо окремих методів.</dd>
+</dl>
+
+<dl>
+ <dt><code><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Побітове_НЕ" title="Побітове НЕ">~</a></code></dt>
+ <dt><code><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#&lt;&lt;_Лівий_зсув" title="Лівий зсув">&lt;&lt;</a></code></dt>
+ <dt><code><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#>>_Правий_зсув_з_розширенням_знаку" title="Правий зсув з розширенням знаку">&gt;&gt;</a></code></dt>
+ <dd>Кожний з цих операторів внутрішньо використовує алгоритм ToInt32. Оскільки існує лише одне представлення 0 у внутрішньому 32-бітному цілочисельному типі, <code>-0</code> не збережеться після подвійної операції інверсії. Наприклад, і <code>Object.is(~~(-0), -0)</code>, і <code>Object.is(-0 &lt;&lt; 2 &gt;&gt; 2, -0)</code> повернуть <code>false</code>.</dd>
+</dl>
+
+<p>Покладатися на метод {{jsxref("Object.is")}}, не беручи до уваги знаки нулів, може бути небезпечно. Звісно, якщо на меті стоїть розрізнити <code>-0</code> та <code>+0</code>, він робить саме те, що потрібно.</p>
+
+<h2 id="Попередження_jsxrefObject.is_та_NaN">Попередження: {{jsxref("Object.is")}} та NaN</h2>
+
+<p>Специфікація {{jsxref("Object.is")}} вважає усі екземпляри {{jsxref("NaN")}} тим самим об'єктом, але, оскільки нам доступні <a href="/uk/docs/Web/JavaScript/Typed_arrays">типізовані масиви</a>, ми можемо мати окремі екземпляри, які не поводитимуться ідентично в усіх контекстах. Приклад:</p>
+
+<pre class="brush: js">var f2b = x =&gt; new Uint8Array(new Float64Array([x]).buffer);
+var b2f = x =&gt; new Float64Array(x.buffer)[0];
+var n = f2b(NaN);
+n[0] = 1;
+var nan2 = b2f(n);
+nan2
+&gt; NaN
+Object.is(nan2, NaN)
+&gt; true
+f2b(NaN)
+&gt; Uint8Array(8) [0, 0, 0, 0, 0, 0, 248,127)
+f2b(nan2)
+&gt; Uint8Array(8) [1, 0, 0, 0, 0, 0, 248,127)</pre>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="http://dorey.github.io/JavaScript-Equality-Table/">JS Comparison Table</a></li>
+</ul>
diff --git a/files/uk/web/progressive_web_apps/index.html b/files/uk/web/progressive_web_apps/index.html
new file mode 100644
index 0000000000..8eaeed72d2
--- /dev/null
+++ b/files/uk/web/progressive_web_apps/index.html
@@ -0,0 +1,95 @@
+---
+title: Новітні web-застосунки
+slug: Web/Progressive_web_apps
+tags:
+  - Modern web apps
+  - Progressive web apps
+  - Застосунки
+translation_of: Web/Progressive_web_apps
+---
+<p class="summary">Новітні web-застосунки — це загалом те саме, що й колишні сайти, але <strong>краще</strong>. В сучасних переглядачах вони розкривають <strong>надзвичайні можливості</strong> і стають…</p>
+
+<div class="column-container">
+<div class="column-1"> </div>
+
+<div class="column-3"><img alt="" src="https://mdn.mozillademos.org/files/12654/discoverable.svg" style="float: right; height: 40px; width: 38px;">
+<p style="font-size: 110%;"><a href="/en-US/docs/Web/Apps/Modern/Discoverable"><strong>Discoverable</strong></a></p>
+
+<p style="width: 70%;">Identifiable as applications, findable by search engines.</p>
+</div>
+
+<div class="column-3"><img alt="" src="https://mdn.mozillademos.org/files/12656/installable.svg" style="float: right; height: 40px; width: 38px;">
+<p style="font-size: 110%;"><strong><a href="/en-US/docs/Web/Apps/Modern/Installable">Installable</a></strong></p>
+
+<p style="width: 70%;">Available on the device, on users' home screens — without the hassle of an app store.</p>
+</div>
+
+<div class="column-3"><img alt="" src="https://mdn.mozillademos.org/files/12658/linkable.svg" style="float: right; height: 40px; width: 38px;">
+<p style="font-size: 110%;"><strong><a href="/en-US/docs/Web/Apps/Modern/Linkable">Linkable</a></strong></p>
+
+<p style="width: 70%;">Easily shareable via URLs, without requiring complex installation.</p>
+</div>
+
+<div class="column-1"> </div>
+</div>
+
+<div class="column-container">
+<div class="column-1"> </div>
+
+<div class="column-3"><img alt="" src="https://mdn.mozillademos.org/files/12660/network-independent.svg" style="float: right; height: 40px; width: 38px;">
+<p style="font-size: 110%;"><strong><a href="/en-US/docs/Web/Apps/Modern/Network_independent">Network independent</a></strong></p>
+
+<p style="width: 70%;">Works offline or on low quality networks.</p>
+</div>
+
+<div class="column-3"><img alt="" src="https://mdn.mozillademos.org/files/12662/progressive.svg" style="float: right; height: 40px; width: 38px;">
+<p style="font-size: 110%;"><strong><a href="/en-US/docs/Web/Apps/Modern/Progressive">Progressive</a></strong></p>
+
+<p style="width: 70%;">Works for every user, regardless of browser choice.</p>
+</div>
+
+<div class="column-3"><img alt="" src="https://mdn.mozillademos.org/files/12666/re-engageable.svg" style="float: right; height: 40px; width: 38px;">
+<p style="font-size: 110%;"><strong><a href="/en-US/docs/Web/Apps/Modern/Re-engageable">Re-engageable</a></strong></p>
+
+<p style="width: 70%;">Makes user engagement easy by drawing attention, even when users aren't using their devices.</p>
+</div>
+
+<div class="column-1"> </div>
+</div>
+
+<div class="column-container">
+<div class="column-1"> </div>
+
+<div class="column-3"><img alt="" src="https://mdn.mozillademos.org/files/12650/responsive.svg" style="float: right; height: 40px; width: 38px;">
+<p style="font-size: 110%;"><strong><a href="/en-US/docs/Web/Apps/Modern/Responsive">Responsive</a></strong></p>
+
+<p style="width: 70%;">Fits any form factor: desktop, mobile, tablet, or whatever comes next.</p>
+</div>
+
+<div class="column-3"><img alt="" src="https://mdn.mozillademos.org/files/12664/safe.svg" style="float: right; height: 40px; width: 38px;">
+<p style="font-size: 110%;"><strong><a href="/en-US/docs/Web/Apps/Modern/Safe">Safe</a></strong></p>
+
+<p style="width: 70%;">Delivery mechanism prevents snooping and ensures content hasn’t been tampered with.</p>
+
+<p style="width: 70%;"> </p>
+</div>
+
+<div class="column-1"> </div>
+
+<div class="column-1"> </div>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/progressive-web-apps">Progressive web apps</a> on Google Developers</li>
+ <li class="graf--h3 graf--first" id="4c45"><a href="https://medium.com/@slightlylate/progressive-apps-escaping-tabs-without-losing-our-soul-3b93a8561955#.6czgj0myh">Progressive Web Apps: Escaping Tabs Without Losing Our Soul</a> by Alex Russell</li>
+ <li class="graf--h3 graf--first"><a href="https://developers.google.com/web/progressive-web-apps/checklist">Progressive Web Apps Check List</a></li>
+ <li class="graf--h3 graf--first"><a href="https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk">The Lighthouse Tool</a> by Google</li>
+ <li class="graf--h3 graf--first"><a href="https://github.com/angular/mobile-toolkit">Tools for building progressive web apps with Angular</a></li>
+ <li class="graf--h3 graf--first"><a href="https://github.com/codebusking/react-pwa-guide-kit">React PWA Guide Kit</a></li>
+ <li class="graf--h3 graf--first"><a href="https://www.pokedex.org/">Offline-capable Pokédex web site</a></li>
+ <li class="graf--h3 graf--first">
+  <p><a href="https://hnpwa.com/">Hacker News readers as Progressive Web Apps</a> </p>
+ </li>
+</ul>
diff --git a/files/uk/web/reference/index.html b/files/uk/web/reference/index.html
new file mode 100644
index 0000000000..3e328a32a5
--- /dev/null
+++ b/files/uk/web/reference/index.html
@@ -0,0 +1,29 @@
+---
+title: Web technology reference
+slug: Web/Reference
+tags:
+  - Landing
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web
+translation_of: Web/Reference
+---
+<p>{{draft()}}<br>
+ The open Web is built using a number of technologies that require an adequate knowledge in order to use them. Below you'll find the links to our reference material for each of them.</p>
+
+<h2 class="Documentation" id="Web_technologies">Web technologies</h2>
+
+<p>It is recommended that you already <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">got started with the web</a>, however it isn't absolutely necessary.</p>
+
+<dl>
+ <dt><strong><a href="/en-US/docs/Glossary/HTML">HTML</a></strong> — structuring the Web</dt>
+ <dd>The <strong>HyperText Markup Language</strong> is used to define and describe semantically the content (<a href="/en-US/docs/Glossary/markup">markup</a>) of a Web page in a well-structured format.<br>
+ HTML provides a means to create structured documents, made up of blocks called <a href="/en-US/docs/Web/HTML/Element">HTML elements</a> that are delineated by <em><a href="/en-US/docs/Glossary/Tag">tags</a></em>, written using angle brackets: some introduce content into the page directly, others provide information about document text and may include other tags as sub-elements. Obviously, browsers do not display them, since they are used to interpret the content of the page.<br>
+ <br>
+ <a href="/en-US/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> | <a href="/en-US/Learn/HTML">Learn HTML</a> | <a href="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> | <a href="/en-US/docs/Web/Guide/HTML">Developer guide</a> | <a href="/en-US/docs/Web/HTML/Element">Element reference</a> | <strong><a href="/en-US/docs/Web/HTML/Reference">reference</a></strong></dd>
+ <dt><strong><a href="/en-US/docs/Glossary/CSS">CSS</a></strong> — styling the Web</dt>
+ <dd>The <strong>Cascading Style Sheets</strong> are used to describe the appearance of Web content.<br>
+ <br>
+ <a href="/en-US/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>  | <a href="/en-US/docs/Web/Guide/CSS/Getting_started">Getting started with CSS</a> | <a href="/en-US/Learn/CSS">Learn CSS</a> | <a href="/en-US/docs/Web/CSS/CSS3">CSS3 </a>| <a href="/en-US/docs/Web/Guide/CSS">Developer guide</a> | <a href="/en-US/docs/Web/CSS/Common_CSS_Questions">Common CSS questions</a> | <strong><a href="/en-US/docs/Web/CSS/Reference">reference</a></strong></dd>
+</dl>
diff --git a/files/uk/web/xml/index.html b/files/uk/web/xml/index.html
new file mode 100644
index 0000000000..5c54c27742
--- /dev/null
+++ b/files/uk/web/xml/index.html
@@ -0,0 +1,17 @@
+---
+title: 'XML: Extensible Markup Language'
+slug: Web/XML
+tags:
+  - Draft
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+  - Web
+  - XML
+translation_of: Web/XML
+---
+<p>{{QuickLinksWithSubpages("/en-US/docs/Web/XML")}}{{Draft}}</p>
+
+<p class="summary">The <strong>Extensible Markup Language</strong> is a strict serialisation of the <a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model</a>.</p>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/uk/web/xml/xml_introduction/index.html b/files/uk/web/xml/xml_introduction/index.html
new file mode 100644
index 0000000000..8fa9171979
--- /dev/null
+++ b/files/uk/web/xml/xml_introduction/index.html
@@ -0,0 +1,136 @@
+---
+title: XML Введення
+slug: Web/XML/XML_introduction
+tags:
+  - Beginner
+  - Introduction
+  - XML
+translation_of: Web/XML/XML_introduction
+---
+<p><span class="seoSummary">XML - це мова розмітки на зразок як HTML. Розшифровується як (англ. </span>Extensible Markup Language -  Розширювана Мова Розмітки) і рекомендується суспільством <a href="https://www.w3.org/" rel="noopener">W3C</a> в якості мови розмітки загального застосування (<a href="https://www.w3.org/TR/xml/" rel="noopener">W3C recommended</a>)<span class="seoSummary">. На відміну від інших мов розмітки, XML сам по собі не визначений (це означає, що ви самі повинні визначати теги, які використовуєте). Основним призначенням XML є  інформації між різноманітними системами (навіть концептуально різними), такими як інтернет.</span></p>
+
+<p>Багато мов базуються на  XML; Деякі з них: <a href="/en-US/docs/Glossary/XHTML" title="en/XHTML">XHTML</a>, <a href="/en-US/docs/Web/MathML" title="en/MathML">MathML</a>, <a href="/en-US/docs/Web/SVG" title="en/SVG">SVG</a>, <a href="/en-US/docs/Mozilla/Tech/XUL" title="en/XUL">XUL</a>, <a href="/en-US/docs/Mozilla/Tech/XBL" title="en/XBL">XBL</a>, <a href="/en-US/docs/Web/RSS" title="en/RSS">RSS</a>, та <a href="/en-US/docs/Web/RDF" title="en/RDF">RDF</a>. Ви можете розробити свій.</p>
+
+<h2 id="Корректний_XML_правильно_сформований">"Корректний" XML (правильно сформований)</h2>
+
+<h3 id="Правила_оформлення">Правила оформлення</h3>
+
+<p>Для корректного XML докумунту повинні виконуватися наступні умови:</p>
+
+<ul>
+ <li>Правильне оформлення документу.</li>
+ <li>Повинні виконуватися усі синтаксичні правила XML.</li>
+ <li>Документ повинен відповідати семантичним правилам мови (які зазвичай вказані в схемі XML або DTD (англ. <strong><a href="https://developer.mozilla.org/en-US/docs/Glossary/DTD" title="en/DTD">Document Type Definition</a></strong>)). </li>
+</ul>
+
+<h3 id="Приклад">Приклад</h3>
+
+<p>Приклад нижче демонструє документ з тегом, який не закриває сам себе і не має закриваючого тега (це неправильно оформлений XML документ).</p>
+
+<pre class="brush: xml">&lt;message&gt;
+    &lt;warning&gt;
+        Hello World
+    &lt;!--missing &lt;/warning&gt; --&gt;
+&lt;/message&gt;
+</pre>
+
+<p>Давайте подивимось на коректну версію цього документу:</p>
+
+<pre class="brush: xml">&lt;message&gt;
+    &lt;warning&gt;
+         Hello World
+    &lt;/warning&gt;
+&lt;/message&gt;
+</pre>
+
+<p>Документ, який містить невизначений тег є не коректним. Наприклад, якщо ми не визначили тег <code>&lt;warning&gt;</code>, то наведений вище документ не коректний.</p>
+
+<ul>
+</ul>
+
+<div class="note">
+<p>В більшості бразерів є вбудований налагоджувач, який може ідинтифікувати погано написаний XML документ.</p>
+</div>
+
+<h2 id="Entities" name="Entities">Сутності</h2>
+
+<p>HTML та XML пропонують методи (які називають сутності) для звертання до спеціальних зарезервованих символів (наприклад: кутові дужки, які позначають початок і кінець тега). Існує п'ять сутностей, які ви обов'язково повинні знати:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Сутність</th>
+   <th scope="col">Символ</th>
+   <th scope="col">Опис</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>&amp;lt;</td>
+   <td>&lt;</td>
+   <td>Знак менше (одна з кутових дужок)</td>
+  </tr>
+  <tr>
+   <td>&amp;gt;</td>
+   <td>&gt;</td>
+   <td>Знак більше (одна з кутових дужок)</td>
+  </tr>
+  <tr>
+   <td>&amp;amp;</td>
+   <td>&amp;</td>
+   <td>Амперсанд</td>
+  </tr>
+  <tr>
+   <td>&amp;quot;</td>
+   <td>"</td>
+   <td>Подвійна лапка</td>
+  </tr>
+  <tr>
+   <td>&amp;apos;</td>
+   <td>'</td>
+   <td>Одинарна лапка (апостроф)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Не дивлячись на те, що за замовчуванням створено усього п'ять сутностей, ви можете додати до документу свої сутності використовуючи <a href="https://developer.mozilla.org/en-US/docs/Glossary/DTD" title="en/DTD">Document Type Definition</a>. Наприклад, створити нову <code>&amp;warning;</code> сутність, можно так:</p>
+
+<pre>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;!DOCTYPE body [
+  &lt;!ENTITY warning "Попередження: сталася помилка, оновіть і спробуте ще раз."&gt;
+]&gt;
+&lt;body&gt;
+  &lt;message&gt; &amp;warning; &lt;/message&gt;
+&lt;/body&gt;
+</pre>
+
+<p>Також ви можете використовувати нумеричні посилання для специфічних спеціальних символів. Наприклад, &amp;#xA9; - це символ "©".</p>
+
+<h2 id="Відображення_XML">Відображення XML</h2>
+
+<p>XML зазвичай використовують для опису чогось. Існують методи відображення XML даних, але якщо ви не визначили спосіб візуалізаціі XML документу, то в браузері він відобразиться построчно, як звичайний текстовий файл.</p>
+
+<p>Один з методів відображення XML - вказати <a href="https://developer.mozilla.org/ru/docs/Web/CSS" title="ru/CSS">CSS</a> (щоб використовувати в документі треба прописати інструкцію <code>xml-stylesheet</code>, як показно у прикладі нижче).</p>
+
+<pre>&lt;?xml-stylesheet type="text/css" href="stylesheet.css"?&gt;</pre>
+
+<p>Також існує багато потужних методів відображення XML, наприклад, <a href="https://developer.mozilla.org/en-US/docs/Web/XSLT" title="en/XSLT">XSLT</a>(англ. <strong>Extensible Stylesheet Language Transformations</strong>), який може використовуватись для  перетворення XML в інші мови, як HTML. Це робить XML дуже універсальним.</p>
+
+<pre>&lt;?xml-stylesheet type="text/xsl" href="transform.xsl"?&gt;</pre>
+
+<h2 id="Recommendations" name="Recommendations">Рекомендації</h2>
+
+<p>Ця стаття є маленьким введенням до XML, з дуже малою кількістю прикладів та посилань, щоб ви могли почати працювати з цією мовою. Щоб більше дізнатися про XML, вам доведеться шукати інформацію та більш інформативні статті в інтернеті.</p>
+
+<p>Вивчення <a href="https://developer.mozilla.org/ru/docs/Web/HTML" title="ru/HTML">HTML</a> (англ. HyperText Markup Language) допоможе вам краще зрозуміти XML.</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li><a class="external" href="http://www.xml.com/">XML.com</a></li>
+ <li><a class="external" href="https://www.w3.org/XML/">Extensible Markup Language (XML) @ W3.org</a></li>
+ <li><a class="external" href="http://www.alistapart.com/d/usingxml/xml_uses_a.html">XML Example: A List Apart</a></li>
+ <li><a class="external" href="http://www.alistapart.com/articles/usingxml/">Using XML: A List Apart</a></li>
+</ul>
+
+<p>Стаття <a href="http://www.alistapart.com/articles/usingxml/">Using XML</a> - чудовий русурс із великою кількістю інформації про розробку своєї мови на основі XML.</p>
diff --git a/files/uk/web/xslt/index.html b/files/uk/web/xslt/index.html
new file mode 100644
index 0000000000..87c2299bfd
--- /dev/null
+++ b/files/uk/web/xslt/index.html
@@ -0,0 +1,54 @@
+---
+title: XSLT
+slug: Web/XSLT
+translation_of: Web/XSLT
+---
+<div><strong>In progress. Extensible Stylesheet Language Transformations (XSLT)</strong> is an <a href="/en-US/docs/XML" title="XML">XML</a>-based language used, in conjunction with specialized processing software, for the transformation of XML documents. Although the process is referred to as "transformation," the original document is not changed; rather, a new XML document is created based on the content of an existing document. Then, the new document may be serialized (output) by the processor in standard XML syntax or in another format, such as <a href="/en-US/docs/HTML" title="HTML">HTML</a> or plain text. XSLT is most often used to convert data between different XML schemas or to convert XML data into web pages or PDF documents. {{ Ref("one") }}</div>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2>
+
+    <dl>
+     <dt><a href="/en-US/docs/XSLT/Elements" title="XSLT/Elements">XSLT Element Reference</a></dt>
+     <dd>Reference.</dd>
+     <dt><a href="/en-US/docs/Web/XSLT/Transforming_XML_with_XSLT" title="Transforming_XML_with_XSLT">Transforming XML with XSLT</a></dt>
+     <dd>XSLT allows a stylesheet author to transform a primary XML document in two significant ways: manipulating and sorting the content, including a wholesale reordering of it if so desired, and transforming the content into a different format.</dd>
+     <dt><a href="/en-US/docs/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations" title="Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations">Using the Mozilla JavaScript interface to XSL Transformations</a></dt>
+     <dd>This document describes the JavaScript interface to the XSLT processing engine in Mozilla 1.2 and up.</dd>
+     <dt><a href="/en-US/docs/XSLT/PI_Parameters" title="XSLT/PI_Parameters">Specifying parameters using processing instructions</a></dt>
+     <dd>Firefox allows stylesheet parameters to be specified when using the <code>&lt;?xml-stylesheet?&gt;</code> processing instruction. This is done using the <code>&lt;?xslt-param?&gt;</code> PI described in this document.</dd>
+     <dt><span class="external">XSLT &amp; XPath Tutorial</span></dt>
+     <dd>The TopXML XSLT tutorial introduces you to the basics of XSLT concepts, syntax, and programming.</dd>
+     <dt><a class="external" href="http://www.w3schools.com/xml/xsl_intro.asp">XSLT Tutorial</a></dt>
+     <dd>This <a class="external" href="http://www.w3schools.com">W3Schools</a> tutorial teaches the reader how to use XSLT to transform XML documents into other formats, like XHTML.</dd>
+     <dt><a class="external" href="http://www.xml.com/pub/a/2000/08/holman/">What is XSLT?</a></dt>
+     <dd>This extensive introduction to XSLT and XPath assumes no prior knowledge of the technologies, and guides the reader through background, context, structure, concepts and introductory terminology.</dd>
+     <dt><a href="/en-US/docs/Common_XSLT_Errors" title="Common XSLT Errors">Common XSLT Errors</a></dt>
+     <dd>This article lists some common problems using XSLT in Firefox.</dd>
+     <dt><a href="/en-US/docs/XSLT_2.0" title="XSLT_2.0">XSLT 2.0</a> (new)</dt>
+    </dl>
+
+    <p><span class="alllinks"><a href="/en-US/docs/tag/XSLT" title="en-US/docs/tag/XSLT">View All...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Community" id="Community" name="Community">Community</h2>
+
+    <ul>
+     <li>View Mozilla forums... {{ DiscussionList("dev-tech-xslt", "mozilla.dev.tech.xslt") }}</li>
+    </ul>
+
+    <h4 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h4>
+
+    <ul>
+     <li><a href="/en-US/docs/XML" title="XML">XML</a>, <a href="/en-US/docs/XPath" title="XPath">XPath</a>, <a href="/en-US/docs/XQuery" title="XQuery">XQuery</a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<hr>
+<p><small>{{ endnote("one") }} This description of XSLT is obtained from the <a class="external" href="http://en.wikipedia.org/wiki/Xslt">Wikipedia XSLT article</a>. </small></p>
diff --git a/files/uk/web/гудіні/index.html b/files/uk/web/гудіні/index.html
new file mode 100644
index 0000000000..92be6ef3cc
--- /dev/null
+++ b/files/uk/web/гудіні/index.html
@@ -0,0 +1,87 @@
+---
+title: CSS Гудіні
+slug: Web/Гудіні
+translation_of: Web/Houdini
+---
+<p>Гудіні - це набір низькорівневих API, які надають доступ до СSS движка, даючи розробникам змогу розширити СSS підключаючись до процесу створення макету та застосування стилів в процесі роботи браузерного движка. Гудіні - набір API, які дають розробникам прямий доступ  <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model">CSS Object Model</a> (CSSOM), дозволяючи розробникам писати код який браузер може розібрати як CSS, таким чином створюючи нові СSS властивості не чекаючи щоб вони були реалізовані в браузерах.</p>
+
+<h2 id="Переваги_Гудіні">Переваги Гудіні</h2>
+
+<p>Гудіні дозволяє швидше змінювати стилі  ніж при використанні JavaScript .style. Браузер розбирає CSSOM, включаючи макет, процеси відмальовування і компонування, перед застосування будьяких змін знайдених в скрипті. Крім того всі ці процеси повторюються для застосування змін з JavaScript. Гудіні не очікує на завершення першого циклу рендерингу, він включений в цей цикл, створюючи відмальовані зрозумілі стилі. Гудіні надає Гудіні дозволяє швидше змінювати стилі  ніж при використанні JavaScript .style. Браузер розбирає CSSOM, включаючи макет, процеси відмальовування і компонування, перед застосування будьяких змін знайдених в скрипті. Крім того всі ці процеси повторюються для застосування змін з JavaScript. Гудіні не очікує на завершення першого циклу рендерингу, він включений в цей цикл, створюючи відмальовані зрозумілі стилі. Гудіні надає об'єктно-орієнтований API для роботи з  CSS значеннями в JavaScript.</p>
+
+<p>Гудіні CSS Типізована OM є a CSS Об'єктвною моделю з типами і методами,  показуючи значення як JavaScript об'єкт, це робить Гудіні бульш інтуїтивним ніж  <code><a href="/en-US/docs/Web/API/HTMLElement/style">HTMLElement.style</a></code> маніпуляції. Кожний елемент і таблиця стилів мають карту стилів, до якої можна доступитись через його значення  <code><a href="/en-US/docs/Web/API/StylePropertyMap">StylePropertyMap</a></code>.</p>
+
+<p>Особливістю СSS Гудіні є  <a href="/en-US/docs/Web/API/Worklet">Worklet</a>. З ворклетами, ви можете створювати модульний CSS, це потребує однієї лінійки JavaScript для імпорту налаштовуваних компоненів: без пре-процесорів, пост-процесорів або JavaScript фреймворків.</p>
+
+<pre class="brush: js">&lt;script&gt;
+  CSS.paintWorklet.addModule('csscomponent.js');
+&lt;/script&gt;
+</pre>
+
+<p>Цей доданий модуль містить <code><a href="/en-US/docs/Web/API/PaintWorklet/registerPaint">registerPaint()</a></code> фунцкію, яка реєструє  повністю налаштовувані ворклетів.</p>
+
+<p> Функція CSS <code>paint()</code> включає в себе ім'я ворклета а також можливі додаткові параметри. Ворклет також має доступ до звичайних значеннь елемента, їх не потрібно передавати як параметри функції.</p>
+
+<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">li</span> <span class="punctuation token">{</span>
+	<span class="property token">background-image</span><span class="punctuation token">:</span> <span class="function token">paint</span><span class="punctuation token">(myComponent</span><span class="punctuation token">,</span> stroke<span class="punctuation token">,</span> <span class="number token">10</span><span class="token unit">px</span><span class="punctuation token">)</span><span class="punctuation token">;
+    --hilights: blue;
+    --lowlights: green;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="blockIndicator note">
+<p><strong>Примітка</strong>: З великою силою приходить велика відповідальність! З Гудіні ви можете придумати свій власний макет, сітку, або реалізацію регіонів, але робити це не завжди найкраща ідея. Робоча група CSS робить багато роботи щоб упевнетись, що всі функції є продуктивними, розглядає всі можливі країні випадки і забезпечує безпеку, конфіденційність і доступність.  Коли ви почнете з СSS Гудіні, упевніться що ви дотримуєтесь цих стандартів і починайте з малого перш ніж перейти до більш амбітних проектів.</p>
+</div>
+
+<h2 class="Documentation" id="Гудіні_API">Гудіні API</h2>
+
+<p>Ніжче ви можете знайти посилання на основну довідку про API, які знаходяться під егідою Гудіні, а також посилання на туторіали.</p>
+
+<div class="hidden">
+<p>Почніть з <a href="https://developer.mozilla.org/en-US/docs/Web/Houdini/learn">Houdini, an introduction</a> — тут ви знайдете коротку історію Гудіні а також швидкий огляд його головних особливостей.</p>
+</div>
+
+<dl>
+ <dt>CSS Парсер API</dt>
+ <dd>API використовуючи  CSS парсер, для парсингу CSS-подібних мов в слабо типізовані.<br>
+ <br>
+ Для цього АPI ще не написано туторіалу чи довідки.</dd>
+ <dt>API CSS властивостей і значеннь</dt>
+ <dd>Визначає API для нових CSS властивостей. Властивості зареєстровані з цим API забезпечені синтаксисом синтаксичного аналізу, який визначає тип, поведінкою успадкування, і початкове значення.<br>
+ <br>
+ <a href="/en-US/docs/Web/API/CSS_Properties_and_Values_API">CSS Properties and Values API reference</a><br>
+ <a href="/en-US/docs/Web/API/CSS_Properties_and_Values_API/guide">CSS Properties and Values API guide</a></dd>
+ <dt></dt>
+ <dt>CSS Typed OM</dt>
+ <dd>Перетворює CSSOM в значно типізований JavaScript перетворення може значно вплинути на продуктивність. CSS типізована ОМ виставляє CSS значення як JavaScript об'єкти та дозволяє ефективно керувати ним.<br>
+ <br>
+ <a href="/en-US/docs/Web/API/CSS_Typed_OM_API">CSS Typed OM reference</a><br>
+ <a href="/en-US/docs/Web/API/CSS_Typed_OM_API/Guide">CSS Typed OM guide</a></dd>
+ <dt>CSS Layout API </dt>
+ <dd>
+ <p>Призначений для поліпшення розтяжності CSS, це API дозволяє розробникам створювати свої власні алгоритми компонування, такі як макет або лінії прив'язки. Це ще не доступно спочатку.</p>
+
+ <p>Для цього АPI ще не написано туторіалу чи довідки.</p>
+ </dd>
+ <dt>CSS Painting API</dt>
+ <dd>
+ <p>Призначений для поліпшення розтяжності CSS — дозволяє розробникам писати  JavaScript функції що доволяють рисувати прямо в задній фон, границі, або зміст елементу за допомогою CSS функції <code>paint()</code> .<br>
+  <br>
+  <a href="/en-US/docs/Web/API/CSS_Painting_API">CSS Painting API reference</a><br>
+  <a href="/en-US/docs/Web/API/CSS_Painting_API/Guide">CSS Painting API guide </a></p>
+ </dd>
+ <dt>Worklets </dt>
+ <dd>
+ <p>API для запуску скриптів на різних етапах потоку рендерингу незалежно від головного JavaScript середовища. Worklets концептуально схожі на <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Web Workers</a>, і застосовуються для розширення движка рендерину.</p>
+
+ <p><br>
+  <a href="/en-US/docs/Web/API/Worklet">Worklets reference</a></p>
+ </dd>
+</dl>
+
+<h2 id="Інші_теми">Інші теми</h2>
+
+<p>Схожі теми, які можуть юути цікаві, так як вони можуть бути використані в поєднанні з API Гудіні цікавими способами.</p>
+
+<dl>
+ <dt>Composite Scrolling and Animation </dt>
+</dl>
diff --git a/files/uk/web/посібники/index.html b/files/uk/web/посібники/index.html
new file mode 100644
index 0000000000..7add4b42cd
--- /dev/null
+++ b/files/uk/web/посібники/index.html
@@ -0,0 +1,184 @@
+---
+title: Посібники
+slug: Web/Посібники
+tags:
+  - Керівництво
+  - Код
+  - Основи
+  - Посібник
+  - Початківець
+  - вебдизайн
+translation_of: Web/Tutorials
+---
+<p>Посилання на цій сторінці ведуть до різноманітних посібників і навчальних матеріалів. Незалежно від того, чи ви початківець, чи маєте достатньо досвіду в веб-розробці, ви знайдете безліч корисних ресурсів та найкращих практик. Ці матеріали були створенні перспективними компаніями та веб-розробниками, котрі використовують відкриті стандарти та найкращі практики в веб-розробці, що дозволяє перекладати й розповсюджувати матеріали через ліцензію відкритого контенту, таку як Creative Commons.</p>
+
+<h2 id="Для_початківців_Інтернету"><span class="tlid-translation translation" lang="uk"><span title="">Для початківців Інтернету</span></span></h2>
+
+<dl>
+ <dt><a href="/uk/docs/Learn/Getting_started_with_the_web">Початок роботи з Інтернетом </a></dt>
+ <dd><span class="tlid-translation translation" lang="uk"><span title=""><em>Початок роботи з Інтернетом</em> - це стислий цикл, який знайомить вас із практичними можливостями веб-розробки.</span> <span title="">Ви налаштуєте інструменти, необхідні для створення простої веб-сторінки та публікації власного простого коду.</span></span></dd>
+</dl>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Documentation" name="Documentation">HTML Посібники</h2>
+
+<h3 id="Вступний_рівень">Вступний рівень</h3>
+
+<dl>
+ <dt>
+ <p><strong><a href="/uk/docs/Learn/HTML/Introduction_to_HTML">Введення в HTML</a></strong></p>
+ </dt>
+ <dd>
+ <p>Цей модуль знайомить вас з важливими поняттями і синтаксисом, розглядає застосування HTML до тексту, як створювати гіперпосилання і як сформувати структуру HTML сторінки. Статті, які подано далі, розбирають кожну частину HTML більш суттєво.</p>
+ </dd>
+ <dt>
+ <p><strong><a href="https://www.theblogstarter.com/html-for-beginners" rel="external">Створення простої веб-сторінки з HTML</a></strong></p>
+ </dt>
+ <dd><span class="tlid-translation translation" lang="uk"><span title="">Посібник з HTML для початківців, який містить пояснення загальних тегів, включаючи теги HTML5.</span> <span title="">Також включає покрокове керівництво зі створення базової веб-сторінки з прикладами коду.</span></span></dd>
+ <dt><strong><a href="/uk/docs/Web/HTML/Елемент">MDN Довідник HTML елементів</a></strong></dt>
+ <dd>Повний довідник HTML елементів та як вони підтримуються в різних браузерах.</dd>
+ <dt><strong><a href="https://en.wikiversity.org/wiki/Web_Design/HTML_Challenges" rel="external">HTML Задачі</a></strong></dt>
+ <dd><span class="tlid-translation translation" lang="uk"><span title="">Використовуйте ці задачі, щоб відточити свої навички HTML (наприклад, "Чи слід використовувати &lt;h2&gt; елемент або &lt;strong&gt; елемент?"),</span></span> фокусуючись на значенні розмітки.</dd>
+ <dd>
+ <h3 id="Середній_рівень">Середній рівень</h3>
+ </dd>
+ <dt><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding">Мультимедіа та вбудовування</a></strong></dt>
+ <dd>Цей модуль досліджує, як використовувати HTML для включення мультимедіа на ваші веб-сторінки, включаючи різні способи включення зображень, а також як вставити відео, аудіо та навіть цілі інші веб-сторінки.</dd>
+ <dt><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Tables">HTML таблиці</a></strong></dt>
+ <dd><span class="tlid-translation translation" lang="uk"><span title="">Представлення табличних даних на веб-сторінці зрозумілим</span></span>, {{glossary("Accessibility", "accessible")}} <span class="tlid-translation translation" lang="uk"><span title="">може бути проблемою.</span> <span title="">Цей модуль охоплює базову розмітку таблиці, а також більш складні функції, такі як реалізація підписів та резюме</span></span>.</dd>
+</dl>
+
+<h3 id="Професійний_рівень">Професійний рівень</h3>
+
+<dl>
+ <dt><strong><a href="https://developer.mozilla.org/en-US/docs/Tips_for_Authoring_Fast-loading_HTML_Pages">Поради щодо створення швидкозавантажуваних HTML сторінок</a></strong></dt>
+ <dd>Оптимізуйте веб-сторінки, щоб забезпечити більш зручний та швидкозавантажуваний сайт для відвідувачів, щоб зменшити навантаження на ваш веб-сервер і підключення до Інтернету.</dd>
+ <dt><strong><a href="http://www.html5rocks.com/tutorials/" rel="external">HTML5 Підручники</a></strong></dt>
+ <dd>Проведіть екскурсію по коду, який використовує функції HTML5.</dd>
+ <dt><strong><a href="http://www.alistapart.com/articles/semanticsinhtml5/" rel="external">Семантика в HTML5</a></strong></dt>
+ <dd>Дізнайтеся про значущу розмітку, яка розширюється та сумісна з попередніми версіями.</dd>
+ <dt><strong><a href="https://developer.mozilla.org/en-US/docs/Canvas_tutorial">Canvas Підручник</a></strong></dt>
+ <dd>Дізнайтеся, як малювати графіку за допомогою скриптів та використовуючи елемент canvas (полотно).</dd>
+ <dt><strong><a href="http://html5doctor.com/" rel="external">HTML5 Доктор</a></strong></dt>
+ <dd>Статті про використання HTML5 "тут і зараз".</dd>
+ <dt><strong><a href="http://www.elated.com/articles/html5-audio/" rel="external">Використання HTML5 Audio</a></strong></dt>
+ <dd>Дізнайтеся, як легко використовувати HTML аудіо елемент, <span class="tlid-translation translation" lang="uk"><span title="">щоб легко вставляти звуки на своїх веб-сторінках.</span> <span title="">У підручнику включено багато прикладів коду</span></span>.</dd>
+ <dt><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Forms">HTML forms</a></strong></dt>
+ <dd><span class="tlid-translation translation" lang="uk"><span title="">Форми є дуже важливою частиною Інтернету - вони забезпечують значну функціональність, необхідну для взаємодії з веб-сайтами, наприклад,</span> <span title="">реєстрація та вхід у систему, надсилання відгуків, покупка товарів онлайн тощо.</span> <span title="">Цей модуль розпочав роботу зі створення частин форм клієнтської форми.</span></span></dd>
+</dl>
+
+<h2 class="Documentation" id="Documentation" name="Documentation">Javascript Посібники</h2>
+
+<h3 id="Вступний_рівень_2">Вступний рівень</h3>
+
+<dl>
+ <dt><strong><a href="http://www.codecademy.com/">Codecademy</a></strong></dt>
+ <dd><span class="tlid-translation translation" lang="uk"><span title="">Codecademy - це простий спосіб навчитися кодувати JavaScript.</span> <span title="">Це інтерактивна робота, і ви можете це робити з друзями.</span></span></dd>
+ <dt><strong><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Getting_Started">Початок роботи з JavaScript</a></strong></dt>
+ <dd>Що таке JavaScript і як це може допомогти вам?</dd>
+ <dt><strong><a href="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices" rel="external">JavaScript найкращі практики</a><a href="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices" title="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices"> </a>(WebPlatform.org)</strong></dt>
+ <dd>Дізнайтесь про деякі з очевидних (та не дуже) найкращі практики написання JavaScript.</dd>
+</dl>
+
+<h3 id="Середній_рівень_2">Середній рівень</h3>
+
+<dl>
+ <dt><strong><a href="https://developer.mozilla.org/en-US/docs/A_re-introduction_to_JavaScript">Повторне введення в JavaScript</a></strong></dt>
+ <dd>Резюме мови програмування JavaScript, спрямоване на розробників середнього рівня.</dd>
+ <dt><strong><a href="http://eloquentjavascript.net/" rel="external">Красномовний JavaScript</a></strong></dt>
+ <dd>Вичерпний посібник з проміжних та розширених методологій JavaScript.</dd>
+ <dt><strong><a href="http://speakingjs.com/es5/" rel="external">Розмовляючи на JavaScript</a> (Dr. Axel Rauschmayer)</strong></dt>
+ <dd><span class="tlid-translation translation" lang="uk"><span title="">Для програмістів, які хочуть швидко та правильно вивчити JavaScript, та для програмістів JavaScript, які хочуть поглибити свої навички та / або шукати конкретні теми.</span></span></dd>
+ <dt><strong><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external">Основні шаблони дизайну JavaScript</a> (Addy Osmani)</strong></dt>
+ <dd><span class="tlid-translation translation" lang="uk"><span title="">Ознайомлення з основними моделями дизайну JavaScript.</span></span></dd>
+ <dt><strong><a href="http://www.yuiblog.com/blog/2007/01/24/video-crockford-tjpl/" rel="external">Мова програмування JavaScript</a> (YUI Blog)</strong></dt>
+ <dd>Douglas Crockford <span class="tlid-translation translation" lang="uk"><span title="">досліджує мову, якою вона є сьогодні, і якою вона стала</span></span>.</dd>
+ <dt><strong><a href="https://developer.mozilla.org/en-US/docs/Introduction_to_Object-Oriented_JavaScript">Введення в об'єктно-орієнтований JavaScript</a></strong></dt>
+ <dd>Дізнайтеся про об'єктно-орієнтовану модель JavaScript.</dd>
+ <dt>
+ <h3 id="Розповсюджені_додатки">Розповсюджені додатки</h3>
+ </dt>
+ <dd>https://developer.mozilla.org/en-US/Add-ons/Overlay_Extensions/XUL_School - <span class="tlid-translation translation" lang="uk"><span title="">це дає гарне ознайомлення з деякими аспектами адонів Firefox</span></span>...</dd>
+ <dt>.... <span class="tlid-translation translation" lang="uk"><span title="">Потрібні інші посилання на інші навчальні посібники про розповсюджені додатки</span></span>...</dt>
+</dl>
+</div>
+
+<div class="section">
+<h3 id="Професійний_рівень_2">Професійний рівень</h3>
+
+<dl>
+ <dt><strong><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide">JavaScript Guide</a></strong></dt>
+ <dd>A comprehensive, regularly updated guide to JavaScript for all levels of learning from beginner to advanced.</dd>
+ <dt><strong><a href="https://github.com/getify/You-Dont-Know-JS" rel="external">You Don't Know JS</a> (Kyle Simpson)</strong></dt>
+ <dd>A series of books diving deep into the core mechanisms of the JavaScript language.</dd>
+ <dt><strong><a href="http://ejohn.org/apps/learn/" rel="external">Learning Advanced JavaScript</a> (John Resig)</strong></dt>
+ <dd>John Resig's guide to advanced JavaScript.</dd>
+ <dt><strong><a href="http://www.elated.com/articles/javascript-dom-intro/" rel="external">Introducing the JavaScript DOM</a> (Elated)</strong></dt>
+ <dd>What is the Document Object Model, and why is it useful? This article gives you a gentle introduction to this powerful JavaScript feature.</dd>
+ <dt><strong><a href="http://yuiblog.com/blog/2006/10/20/video-crockford-domtheory/" rel="external">An Inconvenient API: The Theory of the DOM</a> (YUI Blog)</strong></dt>
+ <dd>Douglas Crockford explains the Document Object Model.</dd>
+ <dt><strong><a href="http://yuiblog.com/blog/2006/11/27/video-crockford-advjs/" rel="external">Advanced JavaScript</a> (YUI Blog)</strong></dt>
+ <dd>Douglas Crockford looks closely at code patterns from which JavaScript programmers can choose in authoring their applications.</dd>
+ <dt><strong><a href="http://bonsaiden.github.com/JavaScript-Garden/" rel="external">JavaScript Garden</a></strong></dt>
+ <dd>Documentation of the most quirky parts of JavaScript.</dd>
+ <dt><strong><a href="http://exploringjs.com/es6/" rel="external">Exploring ES6</a> (Dr. Axel Rauschmayer)</strong></dt>
+ <dd>Reliable and in-depth information on ECMAScript 6.</dd>
+ <dt><strong><a href="http://yuiblog.com/blog/2008/07/22/non-blocking-scripts/" rel="external">Non-Blocking JavaScript Downloads</a> (YUI Blog)</strong></dt>
+ <dd>Tips on improving the download performance of pages containing JavaScript.</dd>
+ <dt><strong><a href="http://shichuan.github.io/javascript-patterns" rel="external">Javascipt Patterns</a></strong></dt>
+ <dd>A JavaScript pattern and antipattern collection that covers function patterns, jQuery patterns, jQuery plugin patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, DOM.</dd>
+ <dt><strong><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How browsers work</a></strong></dt>
+ <dd>A detailed research article describing different modern browsers, their engines, page rendering etc.</dd>
+</dl>
+
+<h2 class="Documentation" id="Documentation" name="Documentation">CSS Посібники</h2>
+
+<h3 id="Вступний_рівень_3">Вступний рівень</h3>
+
+<dl>
+ <dt><strong><a href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started">CSS Getting Started</a></strong></dt>
+ <dd>This tutorial introduces you to Cascading Style Sheets (CSS). It guides you through the basic features of CSS with practical examples that you can try for yourself on your own computer.</dd>
+ <dt><strong><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_Classes" rel="external">CSS Selector Classes</a> (Wikiversity)</strong></dt>
+ <dd>Що є класами в CSS?</dd>
+ <dt><strong><a href="http://en.wikiversity.org/wiki/Web_Design/External_CSS" rel="external">External CSS</a> (Wikiversity)</strong></dt>
+ <dd>Використання у CSS зовнішніньої таблиці стилів.</dd>
+ <dt><strong><a href="http://www.w3.org/MarkUp/Guide/Style" rel="external">Adding a Touch of Style</a> (W3C)</strong></dt>
+ <dd>A brief beginner's guide to styling web pages with CSS.</dd>
+ <dt><strong><a href="https://developer.mozilla.org/en-US/docs/Common_CSS_Questions">Common CSS Questions</a></strong></dt>
+ <dd>Загальні запитання та відповіді для початківців.</dd>
+ <dt><strong><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors" title="http://codeavengers.com/">CSS Selectors</a></strong></dt>
+ <dd>Знайомство з CSS селекторами</dd>
+</dl>
+
+<h3 id="Середній_рівень_3">Середній рівень</h3>
+
+<dl>
+ <dt><strong><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference">CSS Reference</a></strong></dt>
+ <dd>Повний довідник з CSS, де є деталі про підтримку CSS у Firefox та інших броузерах.</dd>
+ <dt><strong><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">CSS Challenges</a> (Wikiversity)</strong></dt>
+ <dd>Flex your CSS skills, and see where you need more practice.</dd>
+ <dt><strong><a href="http://www.html.net/tutorials/css/" rel="external">Intermediate CSS Concepts</a> (HTML.net)</strong></dt>
+ <dd>Групування, псевдокласи, та інше.</dd>
+ <dt><strong><a href="http://www.alistapart.com/articles/css-positioning-101/" rel="external">CSS Positioning 101</a> (A List Apart)</strong></dt>
+ <dd>Використовуйте позиціювання для стандартного, безтабличного макету.</dd>
+ <dt><strong><a href="http://www.alistapart.com/articles/progressiveenhancementwithcss/" rel="external">Progressive Enhancement with CSS</a> (A List Apart)</strong></dt>
+ <dd>Втілення прогресивного покращення у ваші web сторінки за допомогою CSS.</dd>
+ <dt><strong><a href="http://www.alistapart.com/articles/fluidgrids/" rel="external">Fluid Grids</a> (A List Apart)</strong></dt>
+ <dd>Design layouts that fluidly resize with the browser window, while still using a typographic grid.</dd>
+</dl>
+
+<h3 id="Професійний_рівень_3">Професійний рівень</h3>
+
+<dl>
+ <dt><strong><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transforms">Using CSS Transforms</a></strong></dt>
+ <dd>Застосування обертання, перекошування, маштабування та транслявання у CSS.</dd>
+ <dt><strong><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_transitions">CSS Transitions</a></strong></dt>
+ <dd>CSS transitions, part of the draft CSS3 specification, provide a way to animate changes to CSS properties, instead of having the changes take effect instantly.</dd>
+ <dt><strong><a href="http://www.html5rocks.com/tutorials/webfonts/quick/" rel="external">Quick Guide to Implement Web Fonts with @font-face</a> (HTML5 Rocks)</strong></dt>
+ <dd>The @font-face feature from CSS3 allows you to use custom typefaces on the web in an accessible, manipulatable, and scalable way.</dd>
+ <dt><strong><a href="http://davidwalsh.name/starting-css" rel="external">Starting to Write CSS</a> (David Walsh)</strong></dt>
+ <dd>An introduction to tools and methodologies to write more succinct, maintainable, and scalable CSS.</dd>
+</dl>
+</div>
+</div>