1 files changed, 259 insertions, 0 deletions
diff --git a/files/uk/learn/javascript/objects/basics/index.html b/files/uk/learn/javascript/objects/basics/index.html
new file mode 100644
index 0000000000..e7bc44b38b
--- /dev/null
+++ b/files/uk/learn/javascript/objects/basics/index.html
@@ -0,0 +1,259 @@
+---
+title: Основи об'єктів в JavaScript
+slug: Learn/JavaScript/Objects/Basics
+tags:
+  - JavaScript
+  - this
+  - Об'єкт
+  - Основи об'єктів
+  - Синтаксис
+translation_of: Learn/JavaScript/Objects/Basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">В цій статті ми розглянемо основи синтаксису JavaScript об'єктів і заново вивчимо деякий функціонал JavaScript, який ми досліджували  раніше на курсі, підтверджуючи той факт, що велика частина функціоналу, з яким ми вже зіткнулись, в дійсності є об'єктами.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необхідні знання:</th>
+   <td>Елементарна комп'ютерна грамотність, базове розуміння HTML та CSS, знайомство з основами JavaScript (див. <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> та <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Мета:</th>
+   <td>Розуміння основ теоріі об'єктно-орієнтованого програмування, як це пов'язано з JavaScript ("більшість речей є об'єктами'), і як почати роботу з об'єктами JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Основи_об'єктів">Основи об'єктів</h2>
+
+<p>Об'єкт - це сукупність пов'язаних даних і/або функціональності (які зазвичай складаються з декількох змінних і функцій, які називаються властивостями та методами, якщо вони знаходяться всередині об'єктів). Давайте розберемо приклад , щоб показати, як вони виглядають.</p>
+
+<p>Щоб почати, скопіюйте собі <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a> файл. У ньому міститься дуже мало —  {{HTMLElement("script")}} елемент для написання нашого вихідного коду. Ми будемо використовувати це як основу для вивчення основ синтаксису об'єктів. Під час роботи з цим прикладом ви повинні відкрити <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools#The_JavaScript_console">developer tools JavaScript console</a>, щоб вводити деякі команди.</p>
+
+<p>Як і в багатьох випадках в JavaScript, створення об'єкту часто починається з визначення та ініціалізації змінної. Спробуйте ввести наступний нижче код в завантажений файл JavaScript, а потім збережіть і оновіть сторінку:</p>
+
+<pre class="brush: js">var person = {};</pre>
+
+<p>Якщо ви введете <code>person</code> в консоль JS і натиснете кнопку, то повинні отримати наступний результат:</p>
+
+<pre class="brush: js">[object Object]</pre>
+
+<p>Вітаємо, ви щойно створили свій перший об'єкт. Але це порожній об'єкт, тому ми не можемо з ним багато чого зробити. Давайте доповнимо наш об'єкт, щоб він виглядав так:</p>
+
+<pre class="brush: js">var person = {
+  name: ['Bob', 'Smith'],
+  age: 32,
+  gender: 'male',
+  interests: ['music', 'skiing'],
+  bio: function() {
+    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
+  },
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name[0] + '.');
+  }
+};
+</pre>
+
+<p>Після збереження та оновлення спробуйте ввести деякі з наведених нижче елементів у консолі JS:</p>
+
+<pre class="brush: js">person.name[0]
+person.age
+person.interests[1]
+person.bio()
+person.greeting()</pre>
+
+<p>Тепер всередині об'єкта є деякі дані та функціонал, і тепер до них можна отримати доступ за допомогою легкого і простого синтаксису!</p>
+
+<div class="note">
+<p><strong>Заувага</strong>: Якщо у вас виникли проблеми із застосуванням файлу в роботі, спробуйте порівняти свій код з нашою версією  — див. <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (також <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">see it running live</a>). Одна з найпоширеніших помилок, коли ви починаєте роботу з об'єктами, ставити кому в кінці останнього члена - це призводить до помилки.</p>
+</div>
+
+<p>Отже, що тут відбувається? Об'єкт складається з декількох елементів, кожен з яких має назву (наприклад, <code>name</code> та <code>age</code> вище), і значення (наприклад, <code>['Bob', 'Smith']</code> та <code>32</code>). Кожна пара назва/значення повинна бути відокремлена комою, а назва і значення в кожному випадку розділяються між собою двокрапкою. Синтаксис завжди дотримується цього шаблону:</p>
+
+<pre class="brush: js">var objectName = {
+  member1Name: member1Value,
+  member2Name: member2Value,
+  member3Name: member3Value
+}</pre>
+
+<p>Значенням члена об'єкта може бути майже все — в нашому об'єкті <code>person</code> є рядок, число, два масиви та дві функції.  Перші чотири елементи є елементами даних, що відносяться до <strong>властивостей</strong> об'єкта. Останні два елементи - це функції, які дозволяють об'єкту щось зробити з цими елементами даних, називаються <strong>методами</strong> об'єкта.</p>
+
+<p>Такі об'єкти називаються <strong>літералами об'єкта (object literal) </strong>- ми буквально вписали весь вміст об'єкта для його створення. Цей спосіб сильно відрізняється від об'єктів, реалізованих класами, які ми розглянемо пізніше.</p>
+
+<p>Дуже часто створення об'єкта за допомогою літералу використовується, коли вам потрібно перенести  певним чином ряд структурованих, пов'язаних елементів даних, наприклад, надсилаючи запит на сервер для розміщення їх в базі даних. Відправка одного об'єкта набагато ефективніша, ніж відправлення кількох елементів окремо, а також з ним легше працювати, ніж з масивом, коли ви хочете ідентифікувати окремі елементи за назвою.</p>
+
+<h2 id="Крапкова_нотація_(Dot_notation)">Крапкова нотація (Dot notation)</h2>
+
+<p>Вище ми отримали доступ до властивостей об'єкта та методів використовуючи <strong>крапкову нотацію (dot notation)</strong>. Ім'я об'єкта (person) діє як <strong>простір імен (namespace) </strong>- його потрібно вводити першим для того, щоб ми могли отримати доступ до всього, що вкладено <strong>(encapsulated)</strong> всередині об'єкта.  Далі ви ставите крапку, після якої вказуєте елемент, який хочете отримати - це може бути іназва простої властивості,  елемент масиву або виклик одного з методів об'єкту, наприклад:</p>
+
+<pre class="brush: js">person.age
+person.interests[1]
+person.bio()</pre>
+
+<h3 id="Sub-простори_імен_(Sub-namespaces)">Sub-простори імен (Sub-namespaces)</h3>
+
+<p>Значенням елемента об'єкта можна зробити навіть інший об'єкт. Наприклад, спробуйте змінити значення властивості name з такого</p>
+
+<pre class="brush: js">name: ['Bob', 'Smith'],</pre>
+
+<p>на</p>
+
+<pre class="brush: js">name : {
+  first: 'Bob',
+  last: 'Smith'
+},</pre>
+
+<p>Тут ми ефективно створюємо <strong>sub-простір імен</strong>. Звучить складно, але насправді це не так - щоб отримати доступ до необхідних елементів, вам просто потрібно зробити ще один додатковий крок через крапку. Спробуйте це у консолі JS:</p>
+
+<pre class="brush: js">person.name.first
+person.name.last</pre>
+
+<p><strong>Важливо:</strong> на цьому етапі вам також доведеться переглянути код вашого методу і змінити екземпляри з </p>
+
+<pre class="brush: js">name[0]
+name[1]</pre>
+
+<p>на </p>
+
+<pre class="brush: js">name.first
+name.last</pre>
+
+<p>Інакше ваші методи більше не працюватимуть.</p>
+
+<h2 id="Дужкова_нотація_(Bracket_notation)">Дужкова нотація (Bracket notation)</h2>
+
+<p>Існує ще один спосіб отримати доступ до властивостей об'єкту - використання <strong>дужкової нотації (bracket notation)</strong>. Замість написання цього коду:</p>
+
+<pre class="brush: js">person.age
+person.name.first</pre>
+
+<p>Ви можете використовувати:</p>
+
+<pre class="brush: js">person['age']
+person['name']['first']</pre>
+
+<p>Це виглядає дуже схожим на те, як ви отримуєте доступ до елементів у масиві, і в принципі так воно і є - замість використання числових індексів для вибору елемента, ви асоціюєте ім'я для кожного значення. Не дивно, що ці об'єкти іноді називають <strong>асоціативними масивами</strong> - вони зіставляють рядки зі значеннями так само, як масиви зіставляють числові індекси зі значеннями.</p>
+
+<h2 id="Встановлення_елементів_об'єкта">Встановлення елементів об'єкта</h2>
+
+<p>Досі ми розглядали лише повернення (або <strong>отримання</strong>) елементів об'єктів - ви також можете <strong>встановити</strong> (оновити) значення елемента об'єкта, просто оголосивши елемент, який ви хочете встановити (використовуючи крапкову або дужкову нотацію), наприклад:</p>
+
+<pre class="brush: js">person.age = 45;
+person['name']['last'] = 'Cratchit';</pre>
+
+<p>Спробуйте ввести ці рядки, а потім знову поверніть елементи, щоб побачити, як вони змінилися:</p>
+
+<pre class="brush: js">person.age
+person['name']['last']</pre>
+
+<p>Ви можете не просто оновлювати і встановлювати значення властивостей і методів об'єкта, а так сам створювати абсолютно нові елементи. Наприклад:</p>
+
+<pre class="brush: js">person['eyes'] = 'hazel';
+person.farewell = function() { alert("Bye everybody!"); }</pre>
+
+<p>Тепер ви можете перевірити ваші нові елементи:</p>
+
+<pre class="brush: js">person['eyes']
+person.farewell()</pre>
+
+<p>Одним із корисних аспектів дужкової нотації є те, що вона може використовуватись не тільки для динамічного встановлення значень елементів, але й для їх імен. Припустимо, ми хочемо, щоб користувачі могли зберігати користувацькі типи даних, ввівши ім'я та значення елемента в два текстові поля? Ми могли б отримати такі значення:</p>
+
+<pre class="brush: js">var myDataName = nameInput.value;
+var myDataValue = nameValue.value;</pre>
+
+<p>Потім ми могли б додати новий елемент і його значення в об'єкт <code>person</code> таким чином:</p>
+
+<pre class="brush: js">person[myDataName] = myDataValue;</pre>
+
+<p>Щоб перевірити це, спробуйте додати наступні рядки до свого коду:</p>
+
+<pre class="brush: js">var myDataName = 'height';
+var myDataValue = '1.75m';
+person[myDataName] = myDataValue;</pre>
+
+<p>Тепер збережіть й оновіть, і введіть наступне:</p>
+
+<pre class="brush: js">person.height</pre>
+
+<p>Додавання властивості об'єкту з використанням наведеного вище методу неможливе з крапковою нотацією, яка може приймати лише літеральне ім'я елемента, а не значення змінної, що вказує на ім'я. </p>
+
+<h2 id="Що_таке_this">Що таке "this"?</h2>
+
+<p>Ви могли помітити щось дивне в наших методах. Подивіться на це, наприклад:</p>
+
+<pre class="brush: js">greeting: function() {
+  alert('Hi! I\'m ' + this.name.first + '.');
+}</pre>
+
+<p>Ймовірно, вас цікавить, що таке "this"?  <code>this</code> - це ключове слово, яке посилається на поточний об'єкт, всередині якого написаний код - тому, в нашому випадку, <code>this</code> рівнозначний об'єкту <code>person</code>. Але чому б просто не написати <code>person</code>? Як ви побачите в статті  <a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Об'єктно-орієнтований JavaScript для початківців</a>, коли ми починаємо створювати конструктори, і т.д., <code>this</code> дуже корисний - він завжди буде гарантувати, що використовується правильне значення, коли контекст елемента змінюється (наприклад, два різні екземпляри об'єкта <code>person</code> можуть мати різні імена, але захочуть використовувати своє власне при вітанні). </p>
+
+<p>Давайте проілюструємо, що ми маємо на увазі з спрощеною парою об'єктів <code>person</code>:</p>
+
+<pre class="brush: js">var person1 = {
+  name: 'Chris',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+
+var person2 = {
+  name: 'Brian',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}</pre>
+
+<p>В цьому випадку, <code>person1.greeting()</code> виведе "Hi! I'm Chris."; <code>person2.greeting()</code> з іншого боку виведе "Hi! I'm Brian.", хоча код методу однаковий в обох випадках. Як ми вже говорили раніше, <code>this</code> рівнозначний об'єкту, всередині якого знаходиться код - це не дуже корисно, коли ви пишете літерали об'єктів вручну, але це дійсно допомагає, коли ви генеруєте об'єкти динамічно (наприклад, використовуючи конструктори). Пізніше це стане зрозумілішим.</p>
+
+<h2 id="Ви_використовували_об'єкти_постійно">Ви використовували об'єкти постійно</h2>
+
+<p>Поки ви проходили ці приклади, ймовірно, ви помітили, що крапкова нотація, яку ви використовували, виглядає дуже знайомо. Це тому, що ви використовували її протягом усього курсу! Кожного разу, коли ми працювали над прикладом, який використовував вбудований API-інтерфейс браузера або JavaScript об'єкт, ми використовували об'єкти, тому що такі функції побудовані з використанням тих же структур об'єктів, які ми тут розглядали, хоча і більш складні, ніж наші власні користувацькі приклади.</p>
+
+<p>Тому, коли ви використовували рядкові методи, такі як:</p>
+
+<pre class="brush: js">myString.split(',');</pre>
+
+<p>Ви використовували метод, доступний в екземплярі класу <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>. Кожного разу, створюючи рядок у своєму коді, цей рядок автоматично створюється як екземпляр <code>String</code>, і тому має декілька загальних  методів/властивостей, доступних на ньому.</p>
+
+<p>Коли ви звертались до об'єктної моделі документа (DOM), використовуючи такі рядки:</p>
+
+<pre class="brush: js">var myDiv = document.createElement('div');
+var myVideo = document.querySelector('video');</pre>
+
+<p>Ви використовували методи доступні в екземплярі класу <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document">Document</a></code>. Для кожної завантаженої веб-сторінки створюється екземпляр <code>Document</code>, так званий <code>document,</code> який представляє структуру і зміст всієї сторінки, а також інші функції, такі як URL.</p>
+
+<p>Те саме стосується і багатьох інших вбудованих об'єктів/API, які ви використовували — <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code>, і т.д.</p>
+
+<p>Зверніть увагу, що вбудовані об'єкти/API не завжди створюють екземпляри об'єктів автоматично. Наприклад, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API">Notifications API</a>, який дозволяє новим браузерам запускати системні повідомлення, вимагає, щоб ви створювали новий екземпляр об'єкта, за допомогою конструктора, для кожного повідомлення, яке ви хочете запустити. Спробуйте ввести наступне в консоль JavaScript:</p>
+
+<pre class="brush: js">var myNotification = new Notification('Hello!');</pre>
+
+<p>Ми розглянемо конструктори в наступній статті.</p>
+
+<div class="note">
+<p><strong>Заувага: </strong>Корисно подумати про те, як об'єкти взаємодіють шляхом передачі повідомлень - коли об'єкту потрібен інший об'єкт для виконання якої-небудь дії, він часто надсилає повідомлення іншому об'єкту, за допомогою одного з методів, і чекає відповіді, яку ми знаємо як повернене значення (return value).</p>
+</div>
+
+<h2 id="Підсумок">Підсумок</h2>
+
+<p>Вітаємо, ви дійшли до завершення нашої першої статті про об'єкти в JS, тепер у вас має бути гарне уявлення про те, як працювати з об'єктами в JavaScript - в тому числі створювати свої власні прості об'єкти. Ви також повинні розуміти, що об'єкти дуже корисні в якості структур для зберігання пов'язаних даних і функціональності - якби ми намагались відстежувати всі властивості і методи в нашому об'єкті <code>person</code> як окремі змінні і функції, цу було б неефективно, і ми б ризикували зіткнутись з іншими змінними і функціями з такими ж іменами. Об'єкти дозволяють нам безпечно зберігати інформацію в своєму власному блоці, поза небезпекою.</p>
+
+<p>У наступній статті ми почнемо розглядати теорію об'єктно-орієнтованого програмування (ООП), і як ці техніки можуть бути використані в JavaScript.</p>
+
+<p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="В_цьому_модулі">В цьому модулі</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/Objects/Basics">Основи об'єктів в JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
+</ul>