diff options
Diffstat (limited to 'files/uk/learn/javascript')
| -rw-r--r-- | files/uk/learn/javascript/client-side_web_apis/index.html | 43 | ||||
| -rw-r--r-- | files/uk/learn/javascript/first_steps/index.html | 69 | ||||
| -rw-r--r-- | files/uk/learn/javascript/first_steps/what_is_javascript/index.html | 422 | ||||
| -rw-r--r-- | files/uk/learn/javascript/index.html | 65 | ||||
| -rw-r--r-- | files/uk/learn/javascript/objects/basics/index.html | 259 | ||||
| -rw-r--r-- | files/uk/learn/javascript/objects/index.html | 46 | ||||
| -rw-r--r-- | files/uk/learn/javascript/objects/object-oriented_js/index.html | 295 | ||||
| -rw-r--r-- | files/uk/learn/javascript/асинхронний/index.html | 51 | ||||
| -rw-r--r-- | files/uk/learn/javascript/будівельні_блоки/index.html | 57 |
9 files changed, 1307 insertions, 0 deletions
diff --git a/files/uk/learn/javascript/client-side_web_apis/index.html b/files/uk/learn/javascript/client-side_web_apis/index.html new file mode 100644 index 0000000000..ee5df2ea53 --- /dev/null +++ b/files/uk/learn/javascript/client-side_web_apis/index.html @@ -0,0 +1,43 @@ +--- +title: Веб-APIs на стороні клієнта +slug: Learn/JavaScript/Client-side_web_APIs +translation_of: Learn/JavaScript/Client-side_web_APIs +--- +<div>{{LearnSidebar}}</div> + +<div>При написанні клієнтського JavaScript для веб-сайтів або додатків, ви досить скоро зустрінитесь з Інтерфейсами для Програмування Додатків (APIs). APIs є функціями програмування, що надають можливість маніпулювання різними аспектами браузера та операційної системи, на якій працює сайт, або обробки даних з інших веб-сайтів або службю. У цьому модулі ми розглянемо, що таке API, і як використовувати деякі з найбільш поширених API, які ви часто зустрічаєте в процесі розробки.</div> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Щоб даний модуль був максимально корисним, ми рекомендуємо вам пройти попередні 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>, та <a href="/en-US/docs/Learn/JavaScript/Objects">JavaScript objects</a>). Дані модулі, як правило, передбачають просте використання API, тому що зачасту досить важко писати приклади клієнтського JavaScript без них. Для даної інструкції ми припустимо, що ви ознайомлені з основами мови JavaScript, та вивчимо загальні Web APIs більш детально.</p> + +<p>Базові знання <a href="/en-US/docs/Learn/HTML">HTML</a> та <a href="/en-US/docs/Learn/CSS">CSS</a> також будуть корисними.</p> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introduction to web APIs</a></dt> + <dd>Перш за все, ми почнемо з розгляду APIs з високого рівня - що вони собою представляють, як вони працюють, як використовувати їх у власному коді та яку вони мають структуру? Ми також розглянемо, що таке різні основні класи APIs та як вони використовуються.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulating documents</a></dt> + <dd>При написанні веб-сторінок і додатків однією з найпоширеніших речей, яку ви захочете зробити це маніпуляція веб-документами. Зазвичай це робиться за допомогою об'єктної моделі документа (DOM), набору API для керування HTML та інформацією про стиль, яка використовує об'єкт {{domxref ("Document")}}. У цій статті ми детально розглянемо, як використовувати DOM, а також деякі інші цікаві API, які можуть змінити ваше середовище цікавими способами.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a></dt> + <dd>Іншим дуже поширеним завданням на сучасних веб-сайтах і додатках є отримання окремих елементів даних з сервера для оновлення розділів веб-сторінки без необхідності завантажувати абсолютно нову сторінку. Ця, здавалося б, невелика деталь мала величезний вплив на продуктивність і поведінку сайтів. У цій статті ми пояснимо концепцію і розглянемо технології, які роблять це можливим, наприклад, {{domxref ("XMLHttpRequest")}} і <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Third party APIs</a></dt> + <dd>APIs, які ми розглянули є вбудованими в браузер, але не всі APIs є частиною браузерів. Багато великих веб-сайтів і служб, таких як Google Maps, Twitter, Facebook, PayPal тощо, надають API, що дозволяють розробникам використовувати свої дані (наприклад, показувати ваш Twitter у вашому блозі) або послуги (наприклад, показувати індивідуально налаштовані Google Maps на вашому сайті або використання логіна Facebook для входу в систему користувачів. У цій статті розглядаються відмінності між API браузера та APIs третьої сторони і показано деякі типові використання останнього.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></dt> + <dd>Браузер містить деякі дуже потужні засоби графічного програмування, від мови масштабованої векторної графіки (<a href="/en-US/docs/Web/SVG">SVG</a>), до APIs для малювання елементів HTML {{htmlelement ("canvas")}} (див. <a href="/en-US/docs/Web/API/Canvas_API">The Canvas API</a> та <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>). Ця стаття містить вступ до Canvas API, а також додаткові ресурси, які дозволять вам дізнатися більше.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Video and audio APIs</a></dt> + <dd>HTML5 поставляється з елементами для вбудовування мультимедійних даних у документи - {{htmlelement ("відео")}} і {{htmlelement ("аудіо")}} - які, в свою чергу, мають власні APIs для керування відтворенням, пошуком і т.д. Дана стаття демонструє, як виконувати звичайні завдання, наприклад, створювати власні елементи керування відтворенням.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a></dt> + <dd>Сучасні веб-браузери мають ряд різних технологій, які дозволяють зберігати дані, пов'язані з веб-сайтами, і отримувати їх у разі необхідності, дозволяючи зберігати дані на довгий термін, зберігати сайти в автономному режимі та багато іншого. У цій статті пояснюються основи як це все працює.</dd> +</dl> diff --git a/files/uk/learn/javascript/first_steps/index.html b/files/uk/learn/javascript/first_steps/index.html new file mode 100644 index 0000000000..023c9c97e6 --- /dev/null +++ b/files/uk/learn/javascript/first_steps/index.html @@ -0,0 +1,69 @@ +--- +title: Перші кроки у JavaScript +slug: Learn/JavaScript/First_steps +tags: + - Arrays + - Article + - Assessment + - Beginner + - CodingScripting + - Guide + - JavaScript + - Landing + - Module + - Numbers + - Operators + - Variables + - maths + - strings + - Мова + - Україньська +translation_of: Learn/JavaScript/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">У нашому першому модулі JavaScript ми спочатку відповімо на деякі фундаментальні питання, такі як "Що таке JavaScript?", "Як він виглядає?" Та "Що він може робити?", Перш ніж перейти до першого практичного досвіду написання JavaScript. Після цього ми детально обговоримо деякі основні елементи, такі як змінні, рядки, числа та масиви.</p> + +<h2 id="Передумови">Передумови</h2> + +<p>Для того щоб почати з цього модуля, вам не потрібні попередні знання JavaScript, однак ви повинні бути добре знайомі з HTML та CSS. Перед початком роботи з JavaScript вам рекомендується виконати такі модулі:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Початок роботи з Інтернетом</a> (що включає початковий рівень <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a>).</li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введення в HTML</a>.</li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введення в CSS</a></li> +</ul> + +<div class="note"> +<p><strong>Примітка</strong>: Якщо ви працюєте на комп'ютері / планшеті / іншому пристрої, де ви не можете створювати власні файли, можна спробувати (більшість) прикладів коду в онлайн-програмі кодування, наприклад, <a href="http://jsbin.com/">JSBin</a> або <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Посібники">Посібники</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">Що таке JavaScript?</a></dt> + <dd>Ласкаво просимо до курсу JavaScript для новачків MDN! У цій першій статті ми розглянемо JavaScript з висоти, відповідаючи на такі запитання, як "що це таке?" Та "що воно робить?", і переконаємось у тому, що JavaScript відповідає вашим вимогам.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">Перші спроби на JavaScript</a></dt> + <dd>Тепер ви дізнались щось про теорію JavaScript, і що ви можете з ним робити, ми збираємося дати вам курс по написанню основних функцій JavaScript за допомогою повністю практичного підручника. Тут ви створите просту гру "Вгадай номер", крок за кроком.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">Що пішло не так? Усунення несправностей JavaScript</a></dt> + <dd>Коли ви створили гру "Вгадай номер" в попередній статті, ви помітили, що программа не працює. Ніколи не бійтеся - ця стаття спрямована на те, щоб позбавити вас від виривання волосся на голові при виникненні таких проблем, надаючи вам прості поради щодо того, як знайти та виправити помилки у програмах JavaScript.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Збереження потрібної вам інформації - змінні</a></dt> + <dd>Тепер прочитавши останні пару статей, ви повинні знати, що таке JavaScript, що він може зробити для вас, як вам використовувати його разом з іншими веб-технологіями та які його функції є високорівневими. У цій статті ми перейдемо до справжніх основ дивлячись як працювати з основними будівельними блоками JavaScript-змінних.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Основи математики в JavaScript - цифри та оператори</a></dt> + <dd>На цьому етапі ми обговорюємо математику в JavaScript - як ми можемо об'єднати оператори та інші функції, щоб успішно оперувати числами в наших командах.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Обробка текстових рядків у JavaScript</a></dt> + <dd>Далі ми звернемо увагу на рядки - що є фрагментами тексту при програмуванні. У цій статті ми розглянемо всі загальні речі, які ви повинні знати про рядки при вивченні JavaScript, такі як створення рядків, використання лапок в рядку, та їх об'єднання.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Корисні рядкові методи</a></dt> + <dd>Тепер коли ми розглянули основи рядків, давайте перейдемо до механізму та почнемо вивчати корисні операції які ми можемо виконувати в рядках за допомогою вбудованих методів, таких як пошук довжини текстового рядка, об'єднання та розбиття рядків, заміна одного символу в рядку іншим, і так далі.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Масиви</a></dt> + <dd>У заключній статті цього модуля ми розглянемо масиви - обережний спосіб зберігання списку елементів даних під одним ім'ям змінної. Тут ми розглянемо, чому це корисно, а потім навчимось створювати масиви, витягувати, додавати і видаляти елементи, що зберігаються в масиві, і інше.</dd> +</dl> + +<h2 id="Оцінки">Оцінки</h2> + +<p>Наступна оцінка перевірить ваше розуміння базових правил JavaScript, описаних вище в посібниках.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Генератор випадкових історій</a></dt> + <dd>У цьому оцінюванні вам буде запропоновано застосувати деякі знання, здобуті у статтях цього модуля, і застосувати їх для створення веселого прикладу, який генеруватиме випадкові історії. Порозважайтеся!</dd> +</dl> diff --git a/files/uk/learn/javascript/first_steps/what_is_javascript/index.html b/files/uk/learn/javascript/first_steps/what_is_javascript/index.html new file mode 100644 index 0000000000..a3ca8c054d --- /dev/null +++ b/files/uk/learn/javascript/first_steps/what_is_javascript/index.html @@ -0,0 +1,422 @@ +--- +title: What is JavaScript? +slug: Learn/JavaScript/First_steps/What_is_JavaScript +translation_of: Learn/JavaScript/First_steps/What_is_JavaScript +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</div> + +<div>Ласкаво просимо до курсу для новачків від MDN! В цій статті ми подивимося на JavaScript в загальному, пробуючи дати відповідь на запитання "Що це таке?" і "Що ти можеш з ним зробити?". Нашою ціллю буде ознайомити тебе з метою JavaScript-та в ІТ сфері.</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Потрібні знання:</th> + <td>Базове розуміння культури програмування, базові знання HTML і CSS</td> + </tr> + <tr> + <th scope="row">Ціль:</th> + <td> + <p>Отримати розуміння, що таке JavaScript, на що він здатний, і як він забезпечує роботу веб сторінок</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Поверхневе_визначення">Поверхневе визначення</h2> + +<p>JavaScript - це мова програмування, що дозволяє тобі створювати складні речі на веб сторінках. Якщо веб сторінка робить, щось більше ніж просто показує статичну інформацію, наприклад: виконує моніторинг в реальному часі, інтерактивні карти, анімовану 2D/3D графіку, здатна на параллакс-скроллинг - ти можеш бути досить впевненим, що це без JavaScript там не обійшлося. Це є третій шар стандартного веб торту, з двома з них (<a href="/en-US/docs/Learn/HTML">HTML</a> і <a href="/en-US/docs/Learn/CSS">CSS</a>) ми ознайомилися в більших деталях в інших частинах курсу Навчальної зони (Learning Area).</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13502/cake.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>{{glossary("HTML")}} це є мова розмітки, яку ми використовуємо для структиризації зовнішнього вигляду нашої веб сторінки. Наприклад, визначення параграфів, заголовків, таблиць даних, чи вбудованих світлин та відео</li> + <li>{{glossary("CSS")}} is a language of style rules that we use to apply styling to our HTML content, for example setting background colors and fonts, and laying out our content in multiple columns.</li> + <li>{{glossary("JavaScript")}} is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. (Okay, not everything, but it is amazing what you can achieve with a few lines of JavaScript code.)</li> +</ul> + +<p>The three layers build on top of one another nicely. Let's take a simple text label as an example. We can mark it up using HTML to give it structure and purpose:</p> + +<pre class="brush: html"><p>Player 1: Chris</p></pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13422/just-html.png" style="height: 28px; width: 108px;"></p> + +<p>Then we can add some CSS into the mix to get it looking nice:</p> + +<pre class="brush: css">p { + font-family: 'helvetica neue', helvetica, sans-serif; + letter-spacing: 1px; + text-transform: uppercase; + text-align: center; + border: 2px solid rgba(0,0,200,0.6); + background: rgba(0,0,200,0.3); + color: rgba(0,0,200,0.6); + box-shadow: 1px 1px 2px rgba(0,0,200,0.4); + border-radius: 10px; + padding: 3px 10px; + display: inline-block; + cursor: pointer; +}</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13424/html-and-css.png" style="height: 48px; width: 187px;"></p> + +<p>And finally, we can add some JavaScript to implement dynamic behaviour:</p> + +<pre class="brush: js">const para = document.querySelector('p'); + +para.addEventListener('click', updateName); + +function updateName() { + let name = prompt('Enter a new name'); + para.textContent = 'Player 1: ' + name; +} +</pre> + +<p>{{ EmbedLiveSample('A_high-level_definition', '100%', 80, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>Try clicking on this last version of the text label to see what happens (note also that you can find this demo on GitHub — see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">source code</a>, or <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">run it live</a>)!</p> + +<p>JavaScript can do a lot more than that — let's explore what in more detail.</p> + +<h2 id="So_what_can_it_really_do">So what can it really do?</h2> + +<p>The core client-side JavaScript language consists of some common programming features that allow you to do things like:</p> + +<ul> + <li>Store useful values inside variables. In the above example for instance, we ask for a new name to be entered then store that name in a variable called <code>name</code>.</li> + <li>Operations on pieces of text (known as "strings" in programming). In the above example we take the string "Player 1: " and join it to the <code>name</code> variable to create the complete text label, e.g. ''Player 1: Chris".</li> + <li>Running code in response to certain events occurring on a web page. We used a {{Event("click")}} event in our example above to detect when the button is clicked and then run the code that updates the text label.</li> + <li>And much more!</li> +</ul> + +<p>What is even more exciting however is the functionality built on top of the client-side JavaScript language. So-called <strong>Application Programming Interfaces</strong> (<strong>APIs</strong>) provide you with extra superpowers to use in your JavaScript code.</p> + +<p>APIs are ready-made sets of code building blocks that allow a developer to implement programs that would otherwise be hard or impossible to implement. They do the same thing for programming that ready-made furniture kits do for home building — it is much easier to take ready-cut panels and screw them together to make a bookshelf than it is to work out the design yourself, go and find the correct wood, cut all the panels to the right size and shape, find the correct-sized screws, and <em>then</em> put them together to make a bookshelf.</p> + +<p>They generally fall into two categories.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p> + +<p><strong>Browser APIs</strong> are built into your web browser, and are able to expose data from the surrounding computer environment, or do useful complex things. For example:</p> + +<ul> + <li>The {{domxref("Document_Object_Model","DOM (Document Object Model) API")}} allows you to manipulate HTML and CSS, creating, removing and changing HTML, dynamically applying new styles to your page, etc. Every time you see a popup window appear on a page, or some new content displayed (as we saw above in our simple demo) for example, that's the DOM in action.</li> + <li>The {{domxref("Geolocation","Geolocation API")}} retrieves geographical information. This is how <a href="https://www.google.com/maps">Google Maps</a> is able to find your location and plot it on a map.</li> + <li>The {{domxref("Canvas_API","Canvas")}} and {{domxref("WebGL_API","WebGL")}} APIs allow you to create animated 2D and 3D graphics. People are doing some amazing things using these web technologies —see <a href="https://www.chromeexperiments.com">Chrome Experiments</a> and <a href="http://webglsamples.org/">webglsamples</a>.</li> + <li><a href="https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video APIs</a> like {{domxref("HTMLMediaElement")}} and {{domxref("WebRTC API", "WebRTC")}} allow you to do really interesting things with multimedia, such as play audio and video right in a web page, or grab video from your web camera and display it on someone else's computer (try our simple <a href="http://chrisdavidmills.github.io/snapshot/">Snapshot demo</a> to get the idea).</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: Many of the above demos won't work in an older browser — when experimenting, it's a good idea to use a modern browser like Firefox, Chrome, Edge or Opera to run your code in. You will need to consider <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">cross browser testing</a> in more detail when you get closer to delivering production code (i.e. real code that real customers will use).</p> +</div> + +<p><strong>Third party APIs</strong> are not built into the browser by default, and you generally have to grab their code and information from somewhere on the Web. For example:</p> + +<ul> + <li>The <a href="https://dev.twitter.com/overview/documentation">Twitter API</a> allows you to do things like displaying your latest tweets on your website.</li> + <li>The <a href="https://developers.google.com/maps/">Google Maps API</a> and <a href="https://wiki.openstreetmap.org/wiki/API">OpenStreetMap API</a> allows you to embed custom maps into your website, and other such functionality.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: These APIs are advanced, and we'll not be covering any of these in this module. You can find out much more about these in our <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs module</a>.</p> +</div> + +<p>There's a lot more available, too! However, don't get over excited just yet. You won't be able to build the next Facebook, Google Maps, or Instagram after studying JavaScript for 24 hours — there are a lot of basics to cover first. And that's why you're here — let's move on!</p> + +<h2 id="What_is_JavaScript_doing_on_your_page">What is JavaScript doing on your page?</h2> + +<p>Here we'll start actually looking at some code, and while doing so explore what actually happens when you run some JavaScript in your page.</p> + +<p>Let's briefly recap the story of what happens when you load a web page in a browser (first talked about in our <a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">How CSS works</a> article). When you load a web page in your browser, you are running your code (the HTML, CSS, and JavaScript) inside an execution environment (the browser tab). This is like a factory that takes in raw materials (the code) and outputs a product (the web page).</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13504/execution.png" style="display: block; margin: 0 auto;"></p> + +<p>The JavaScript is executed by the browser's JavaScript engine, after the HTML and CSS have been assembled and put together into a web page. This ensures that the structure and style of the page are already in place by the time the JavaScript starts to run.</p> + +<p>This is a good thing, as a very common use of JavaScript is to dynamically modify HTML and CSS to update a user interface, via the Document Object Model API (as mentioned above). If the JavaScript loaded and tried to run before the HTML and CSS were there to affect, then errors would occur.</p> + +<h3 id="Browser_security">Browser security</h3> + +<p>Each browser tab is its own separate bucket for running code in (these buckets are called "execution environments" in technical terms) — this means that in most cases the code in each tab is run completely separately, and the code in one tab cannot directly affect the code in another tab — or on another website. This is a good security measure — if this were not the case, then pirates could start writing code to steal information from other websites, and other such bad things.</p> + +<div class="note"> +<p><strong>Note</strong>: There are ways to send code and data between different websites/tabs in a safe manner, but these are advanced techniques that we won't cover in this course.</p> +</div> + +<h3 id="JavaScript_running_order">JavaScript running order</h3> + +<p>When the browser encounters a block of JavaScript, it generally runs it in order, from top to bottom. This means that you need to be careful what order you put things in. For example, let's return to the block of JavaScript we saw in our first example:</p> + +<pre class="brush: js">const para = document.querySelector('p'); + +para.addEventListener('click', updateName); + +function updateName() { + let name = prompt('Enter a new name'); + para.textContent = 'Player 1: ' + name; +}</pre> + +<p>Here we are selecting a text paragraph (line 1), then attaching an event listener to it (line 3) so that when the paragraph is clicked, the <code>updateName()</code> code block (lines 5–8) is run. The <code>updateName()</code> code block (these types of reusable code blocks are called "functions") asks the user for a new name, and then inserts that name into the paragraph to update the display.</p> + +<p>If you swapped the order of the first two lines of code, it would no longer work — instead, you'd get an error returned in the <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer console</a> — <code>TypeError: para is undefined</code>. This means that the <code>para</code> object does not exist yet, so we can't add an event listener to it.</p> + +<div class="note"> +<p><strong>Note</strong>: This is a very common error — you need to be careful that the objects referenced in your code exist before you try to do stuff to them.</p> +</div> + +<h3 id="Interpreted_versus_compiled_code">Interpreted versus compiled code</h3> + +<p>You might hear the terms <strong>interpreted</strong> and <strong>compiled</strong> in the context of programming. In interpreted languages, the code is run from top to bottom and the result of running the code is immediately returned. You don't have to transform the code into a different form before the browser runs it. The code is received in its programmer-friendly text form and processed directly from that.</p> + +<p>Compiled languages on the other hand are transformed (compiled) into another form before they are run by the computer. For example, C/C++ are compiled into assembly language that is then run by the computer. The program is executed from a binary format which was generated from the original program source code.</p> + +<p>JavaScript is a lightweight interpreted programming language. The web browser receives the JavaScript code in its original text form and runs the script from that. From a technical standpoint, most modern JavaScript interpreters actually use a technique called <strong>just-in-time compiling</strong> to improve performance; the JavaScript source code gets compiled into a faster, binary, format while the script is being used, so that it can be run as quickly as possible. However, JavaScript is still considered an intepreteted language, since the compilation is being handled at run time, rather than ahead of time.</p> + +<p>There are advantages to both types of language, but we won't discuss them right now.</p> + +<h3 id="Server-side_versus_client-side_code">Server-side versus client-side code</h3> + +<p>You might also hear the terms <strong>server-side</strong> and <strong>client-side</strong> code, especially in the context of web development. Client-side code is code that is run on the user's computer — when a web page is viewed, the page's client-side code is downloaded, then run and displayed by the browser. In this module we are explicitly talking about <strong>client-side JavaScript</strong>.</p> + +<p>Server-side code on the other hand is run on the server, then its results are downloaded and displayed in the browser. Examples of popular server-side web languages include PHP, Python, Ruby, ASP.NET and... JavaScript! JavaScript can also be used as a server-side language, for example in the popular Node.js environment — you can find out more about server-side JavaScript in our <a href="/en-US/docs/Learn/Server-side">Dynamic Websites – Server-side programming</a> topic.</p> + +<h3 id="Dynamic_versus_static_code">Dynamic versus static code</h3> + +<p>The word <strong>dynamic</strong> is used to describe both client-side JavaScript, and server-side languages — it refers to the ability to update the display of a web page/app to show different things in different circumstances, generating new content as required. Server-side code dynamically generates new content on the server, e.g. pulling data from a database, whereas client-side JavaScript dynamically generates new content inside the browser on the client, e.g. creating a new HTML table, filling it with data requested from the server, then displaying the table in a web page shown to the user. The meaning is slightly different in the two contexts, but related, and both approaches (server-side and client-side) usually work together.</p> + +<p>A web page with no dynamically updating content is referred to as <strong>static</strong> — it just shows the same content all the time.</p> + +<h2 id="How_do_you_add_JavaScript_to_your_page">How do you add JavaScript to your page?</h2> + +<p>JavaScript is applied to your HTML page in a similar manner to CSS. Whereas CSS uses {{htmlelement("link")}} elements to apply external stylesheets and {{htmlelement("style")}} elements to apply internal stylesheets to HTML, JavaScript only needs one friend in the world of HTML — the {{htmlelement("script")}} element. Let's learn how this works.</p> + +<h3 id="Internal_JavaScript">Internal JavaScript</h3> + +<ol> + <li>First of all, make a local copy of our example file <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a>. Save it in a directory somewhere sensible.</li> + <li>Open the file in your web browser and in your text editor. You'll see that the HTML creates a simple web page containing a clickable button.</li> + <li>Next, go to your text editor and add the following in your head — just before your closing <code></head></code> tag: + <pre class="brush: html"><script> + + // JavaScript goes here + +</script></pre> + </li> + <li>Now we'll add some JavaScript inside our {{htmlelement("script")}} element to make the page do something more interesting — add the following code just below the "// JavaScript goes here" line: + <pre class="brush: js">document.addEventListener("DOMContentLoaded", function() { + function createParagraph() { + let para = document.createElement('p'); + para.textContent = 'You clicked the button!'; + document.body.appendChild(para); + } + + const buttons = document.querySelectorAll('button'); + + for(let i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); + } +});</pre> + </li> + <li>Save your file and refresh the browser — now you should see that when you click the button, a new paragraph is generated and placed below.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: If your example doesn't seem to work, go through the steps again and check that you did everything right. Did you save your local copy of the starting code as a <code>.html</code> file? Did you add your {{htmlelement("script")}} element just before the <code></head></code> tag? Did you enter the JavaScript exactly as shown? <strong>JavaScript is case sensitive, and very fussy, so you need to enter the syntax exactly as shown, otherwise it may not work.</strong></p> +</div> + +<div class="note"> +<p><strong>Note</strong>: You can see this version on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">see it live too</a>).</p> +</div> + +<h3 id="External_JavaScript">External JavaScript</h3> + +<p>This works great, but what if we wanted to put our JavaScript in an external file? Let's explore this now.</p> + +<ol> + <li>First, create a new file in the same directory as your sample HTML file. Call it <code>script.js</code> — make sure it has that .js filename extension, as that's how it is recognized as JavaScript.</li> + <li>Replace your current {{htmlelement("script")}} element with the following: + <pre class="brush: html"><script src="script.js" defer></script></pre> + </li> + <li>Inside <code>script.js</code>, add the following script: + <pre class="brush: js">function createParagraph() { + let para = document.createElement('p'); + para.textContent = 'You clicked the button!'; + document.body.appendChild(para); +} + +const buttons = document.querySelectorAll('button'); + +for(let i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); +}</pre> + </li> + <li>Save and refresh your browser, and you should see the same thing! It works just the same, but now we've got our JavaScript in an external file. This is generally a good thing in terms of organizing your code and making it reusable across multiple HTML files. Plus, the HTML is easier to read without huge chunks of script dumped in it.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: You can see this version on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">apply-javascript-external.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js">script.js</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">see it live too</a>).</p> +</div> + +<h3 id="Inline_JavaScript_handlers">Inline JavaScript handlers</h3> + +<p>Note that sometimes you'll come across bits of actual JavaScript code living inside HTML. It might look something like this:</p> + +<div id="inline_js_example"> +<pre class="brush: js example-bad">function createParagraph() { + let para = document.createElement('p'); + para.textContent = 'You clicked the button!'; + document.body.appendChild(para); +}</pre> + +<pre class="brush: html example-bad"><button onclick="createParagraph()">Click me!</button></pre> +</div> + +<p>You can try this version of our demo below.</p> + +<p>{{ EmbedLiveSample('inline_js_example', '100%', 150, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>This demo has exactly the same functionality as in the previous two sections, except that the {{htmlelement("button")}} element includes an inline <code>onclick</code> handler to make the function run when the button is pressed.</p> + +<p><strong>Please don't do this, however.</strong> It is bad practice to pollute your HTML with JavaScript, and it is inefficient — you'd have to include the <code>onclick="createParagraph()"</code> attribute on every button you wanted the JavaScript to apply to.</p> + +<p>Using a pure JavaScript construct allows you to select all the buttons using one instruction. The code we used above to serve this purpose looks like this:</p> + +<pre class="brush: js">const buttons = document.querySelectorAll('button'); + +for(let i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); +}</pre> + +<p>This might be a bit longer than the <code>onclick</code> attribute, but it will work for all buttons — no matter how many are on the page, nor how many are added or removed. The JavaScript does not need to be changed.</p> + +<div class="note"> +<p><strong>Note</strong>: Try editing your version of <code>apply-javascript.html</code> and add a few more buttons into the file. When you reload, you should find that all of the buttons when clicked will create a paragraph. Neat, huh?</p> +</div> + +<h3 id="Script_loading_strategies">Script loading strategies</h3> + +<p>There are a number of issues involved with getting scripts to load at the right time. Nothing is as simple as it seems! A common problem is that all the HTML on a page is loaded in the order in which it appears. If you are using JavaScript to manipulate elements on the page (or more accurately, the <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#The_document_object_model">Document Object Model</a>), your code won't work if the JavaScript is loaded and parsed before the HTML you are trying to do something to.</p> + +<p>In the above code examples, in the internal and external examples the JavaScript is loaded and run in the head of the document, before the HTML body is parsed. This could cause an error, so we've used some constructs to get around it.</p> + +<p>In the internal example, you can see this structure around the code:</p> + +<pre class="brush: js">document.addEventListener("DOMContentLoaded", function() { + ... +});</pre> + +<p>This is an event listener, which listens for the browser's "DOMContentLoaded" event, which signifies that the HTML body is completely loaded and parsed. The JavaScript inside this block will not run until after that event is fired, therefore the error is avoided (you'll <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">learn about events</a> later in the course).</p> + +<p>In the external example, we use a more modern JavaScript feature to solve the problem, the <code>defer</code> attribute, which tells the browser to continue downloading the HTML content once the <code><script></code> tag element has been reached.</p> + +<pre class="brush: js"><script src="script.js" defer></script></pre> + +<p>In this case both the script and the HTML will load simultaneously and the code will work.</p> + +<div class="note"> +<p><strong>Note</strong>: In the external case, we did not need to use the <code>DOMContentLoaded</code> event because the <code>defer</code> attribute solved the problem for us. We didn't use the <code>defer</code> solution for the internal JavaScript example because <code>defer</code> only works for external scripts.</p> +</div> + +<p>An old-fashioned solution to this problem used to be to put your script element right at the bottom of the body (e.g. just before the <code></body></code> tag), so that it would load after all the HTML has been parsed. The problem with this solution is that loading/parsing of the script is completely blocked until the HTML DOM has been loaded. On larger sites with lots of JavaScript, this can cause a major performance issue, slowing down your site.</p> + +<h4 id="async_and_defer">async and defer</h4> + +<p>There are actually two ways we can bypass the problem of the blocking script — <code>async</code> and <code>defer</code>. Let's look at the difference between these two.</p> + +<p>Async scripts will download the script without blocking rendering the page and will execute it as soon as the script finishes downloading. You get no guarantee that scripts will run in any specific order, only that they will not stop the rest of the page from displaying. It is best to use <code>async</code> when the scripts in the page run independently from each other and depend on no other script on the page.</p> + +<p>For example, if you have the following script elements:</p> + +<pre class="brush: html"><script async src="js/vendor/jquery.js"></script> + +<script async src="js/script2.js"></script> + +<script async src="js/script3.js"></script></pre> + +<p>You can't rely on the order the scripts will load in. <code>jquery.js</code> may load before or after <code>script2.js</code> and <code>script3.js</code> and if this is the case, any functions in those scripts depending on <code>jquery</code> will produce an error because <code>jquery</code> will not be defined at the time the script runs.</p> + +<p><code>defer</code> will run the scripts in the order they appear in the page and execute them as soon as the script and content are downloaded:</p> + +<pre class="brush: html"><script defer src="js/vendor/jquery.js"></script> + +<script defer src="js/script2.js"></script> + +<script defer src="js/script3.js"></script></pre> + +<p>All the scripts with the <code>defer</code> attribute will load in the order they appear on the page. So in the second example, we can be sure that <code>jquery.js</code> will load before <code>script2.js</code> and <code>script3.js</code> and that <code>script2.js</code> will load before <code>script3.js</code>.</p> + +<p>To summarize:</p> + +<ul> + <li>If your scripts don't need to wait for parsing and can run independently without dependencies, then use <code>async</code>.</li> + <li>If your scripts need to wait for parsing and depend on other scripts load them using <code>defer</code> and put their corresponding <code><script></code> elements in the order you want the browser to execute them.</li> +</ul> + +<h2 id="Comments">Comments</h2> + +<p>As with HTML and CSS, it is possible to write comments into your JavaScript code that will be ignored by the browser, and exist simply to provide instructions to your fellow developers on how the code works (and you, if you come back to your code after six months and can't remember what you did). Comments are very useful, and you should use them often, particularly for larger applications. There are two types:</p> + +<ul> + <li>A single line comment is written after a double forward slash (//), e.g. + <pre class="brush: js">// I am a comment</pre> + </li> + <li>A multi-line comment is written between the strings /* and */, e.g. + <pre class="brush: js">/* + I am also + a comment +*/</pre> + </li> +</ul> + +<p>So for example, we could annotate our last demo's JavaScript with comments like so:</p> + +<pre class="brush: js">// Function: creates a new paragraph and appends it to the bottom of the HTML body. + +function createParagraph() { + let para = document.createElement('p'); + para.textContent = 'You clicked the button!'; + document.body.appendChild(para); +} + +/* + 1. Get references to all the buttons on the page in an array format. + 2. Loop through all the buttons and add a click event listener to each one. + + When any button is pressed, the createParagraph() function will be run. +*/ + +const buttons = document.querySelectorAll('button'); + +for (let i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); +}</pre> + +<div class="note"> +<p><strong>Note</strong>: In general more comments is usually better than less, but you should be careful if you find yourself adding lots of comments to explain what variables are (your variable names perhaps should be more intuitive), or to explain very simple operations (maybe your code is overcomplicated).</p> +</div> + +<h2 id="Summary">Summary</h2> + +<p>So there you go, your first step into the world of JavaScript. We've begun with just theory, to start getting you used to why you'd use JavaScript and what kind of things you can do with it. Along the way, you saw a few code examples and learned how JavaScript fits in with the rest of the code on your website, amongst other things.</p> + +<p>JavaScript may seem a bit daunting right now, but don't worry — in this course, we will take you through it in simple steps that will make sense going forward. In the next article, we will <a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">plunge straight into the practical</a>, getting you to jump straight in and build your own JavaScript examples.</p> + +<ul> +</ul> + +<p>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> +</ul> diff --git a/files/uk/learn/javascript/index.html b/files/uk/learn/javascript/index.html new file mode 100644 index 0000000000..151ff7435e --- /dev/null +++ b/files/uk/learn/javascript/index.html @@ -0,0 +1,65 @@ +--- +title: JavaScript +slug: Learn/JavaScript +tags: + - Beginner + - CodingScripting + - JavaScript + - JavaScripting beginner + - Landing + - Module + - Topic + - Мова + - Українська +translation_of: Learn/JavaScript +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">{{Glossary("JavaScript")}} — це мова програмування, що дозволяє вам створювати живі, динамічні веб-сторінки. Кожного разу, коли веб-сторінка робить більше, ніж просто відображає Вам статичну інформацію для перегляду, відображає своєчасне оновлення вмісту або інтерактивні карти або анімовану 2D / 3D-графіку, або прокручує відео в медіапрогравачі, і таке інше — ви можете бути впевнені, що це робота JavaScript.</p> + +<h2 id="Навчальний_шлях">Навчальний шлях</h2> + +<p>Навряд чи JavaScript важче вивчати, ніж суміжні технології, такі як <a href="/en-US/docs/Learn/HTML">HTML</a> та <a href="/en-US/docs/Learn/CSS">CSS</a>. Але перш ніж намагатися вивчити JavaScript, вам настійно рекомендується спочатку ознайомитись хоча б з цими двома технологіями та, можливо, з деякими іншими. Почніть свою роботу з таких модулів:</p> + +<ul> + <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">Початок роботи з </a><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Web</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Introduction">Введення в HTML</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Введення в CSS</a></li> +</ul> + +<p>Попередній досвід роботи з іншими мовами програмування також може допомогти.</p> + +<p>Ознайомившись з основами JavaScript, ви повинні бути в курсі більш досконалих тем, наприклад:</p> + +<ul> + <li>JavaScript з середини, як навчають в нашому <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">JavaScript посібнику</a></li> + <li><a href="/en-US/docs/Web/API">Веб-інтерфейси</a></li> +</ul> + +<h2 id="Модулі">Модулі</h2> + +<p>Ця тема містить наступні модулі в запропонованому порядку для роботи з ними.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">Перші кроки JavaScript</a></dt> + <dd>У нашому першому модулі JavaScript ми спочатку відповімо на деякі фундаментальні питання, такі як "Що таке JavaScript?", "Як він виглядає?" Та "Що він може робити?", Потім ми перйдемо до першого практичного завданя з написання JavaScript. Після цього ми докладно розглянемо деякі ключові функції JavaScript, такі як змінні, рядки, числа та масиви.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">Структурні блоки JavaScript</a></dt> + <dd>У цьому модулі ми продовжуємо охоплювати всі основні фундаментальні функції JavaScript, звертаючи увагу на ті типи блоків коду які нам будуть часто зустрічатися, такі як умовні вирази, цикли, функції та події. Ви вже бачили цей матеріал в курсі, тільки тут ми все це розглянемо дитально.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Представляємо об'єкти JavaScript</a></dt> + <dd>У JavaScript більшість речей - це об'єкти, від основних функцій, як рядки та масиви, до API браузера, побудованого на вершині JavaScript. Ви навіть можете створити свої власні об'єкти, щоб інкапсулювати пов'язані функції та змінні в ефективні пакети. Об'єктно-орієнтований характер JavaScript важливо зрозуміти, якщо ви хочете піти далі з вашими знаннями мови та написати більш ефективний код, тому ми надали цей модуль, щоб допомогти вам. Тут ми детально вивчимо теорію об'єктів та синтаксис, подивимося як створити власні об'єкти, з'ясуємо що таке дані JSON, і як працювати з ним.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Веб-API на стороні клієнта</a></dt> + <dd>Під час написання JavaScript-клієнта для веб-сайтів або програм ви не заходите дуже далеко, перш ніж почати використовувати API-інтерфейси для роботи з різними аспектами браузера та операційної системи, на якому працює сайт, або навіть дані з інших веб-сайтів або послуги. У цьому модулі ми вивчимо, які API існують та як використовувати деякі з найпоширеніших API, які часто зустрічаються в роботі з розробкою.</dd> +</dl> + +<h2 id="Вирішення_загальних_проблем_JavaScript">Вирішення загальних проблем JavaScript</h2> + +<p><a href="/en-US/docs/Learn/JavaScript/Howto">Використовуйте JavaScript, щоб вирішувати поширені проблеми,</a> це посилання на розділи, що пояснюють, як використовувати JavaScript для вирішення дуже поширених проблем при створенні веб-сторінок.</p> + +<h2 id="Див._також">Див. також</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript">JavaScript на MDN</a></dt> + <dd>Основне джерело для документації JavaScript на MDN - тут ви знайдете великі довідкові документи з усіх аспектів мови JavaScript та деякі розширені навчальні посібники, націлені на досвідчених JavaScript програмістів.</dd> + <dt><a href="https://www.youtube.com/user/codingmath">Кодування математики</a></dt> + <dd>Відмінна серія відео уроків з вивчення математики яку ви повинні розуміти щоб бути ефективним програмістом, від <a href="https://twitter.com/bit101">Кейта Пітерса.</a></dd> +</dl> 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> diff --git a/files/uk/learn/javascript/objects/index.html b/files/uk/learn/javascript/objects/index.html new file mode 100644 index 0000000000..48bb0d98f1 --- /dev/null +++ b/files/uk/learn/javascript/objects/index.html @@ -0,0 +1,46 @@ +--- +title: Вступ до об'єктів JavaScript +slug: Learn/JavaScript/Objects +tags: + - JavaScript + - Об'єкти +translation_of: Learn/JavaScript/Objects +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Чи не кожна річ у JavaScript є об'єктом — від самих основ, як-от рядки та масиви, до програмних інтерфейсів веб-переглядача. Ба більше, можна створювати власні об'єкти з передбаченою множиною властивостей та функцій для їх обробки. Для дальшого вивчення JavaScript важливим є розуміння об'єктно-орієнтованої природи цієї мови. Саме для того наводимо цю добірку статей. Тут ми докладно вивчатимемо теорію об'єктів та пов'язаний синтаксис, а відтак розглянемо створення власних об'єктів.</p> + +<h2 id="Необхідні_знання">Необхідні знання</h2> + +<p>Перш ніж розпочати, вам слід принаймні ознайомитися з HTML та CSS. Радимо спершу приділити увагу розділам <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction">Вступ до HTML</a> та <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Вступ до CSS</a>, а вже тоді переходити до вивчення JavaScript.</p> + +<p>Крім того, докладне вивчення об'єктів JavaScript потребує розуміння певних основ цієї мови. Тож варто спершу переглянути статті <a href="/en-US/docs/Learn/JavaScript/First_steps">Перші кроки з JavaScript</a> та <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Структурні елементи в JavaScript</a>.</p> + +<div class="note"> +<p><strong>Заувага</strong>: Якщо ви працюєте за комп'ютером, планшетом тощо, де не маєте змоги створювати власні файли, можете випробувати приклади коду (більшість) в онлайн-редакторах для програмування, як-от <a href="https://jsfiddle.net">JSFiddle</a>, <a href="http://jsbin.com/">JSBin</a> або <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Путівники">Путівники</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/Objects/Basics">Основи об'єктів в JavaScript</a><a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/Objects/Basics"> </a></dt> + <dd>В першій статті, що розглядає об'єкти JavaScript, ми ознайомимось з основами синтаксису об'єктів JavaScript та пересвідчимось, що велика частина функціоналу, з яким ми вже працювали, є насправді об'єктами.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Об'єктно-орієнтований JavaScript для початківців</a></dt> + <dd>Розібравшись з основами, ми зосередимось на об'єктно-орієнтованому JavaScript (OOJS) — у цій статті представлені основи теорії об'єктно-орієнтованого програмування (ООП), а далі дізнаємось, як за допомогою конструктора функцій JavaScript емулює класи об'єктів та як створювати екземпляри об'єктів.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Прототипи об'єктів</a></dt> + <dd>Прототипи — це механізм, завдяки якому об'єкти JavaScript наслідують функціонал один від одного, але при цьому вони працюють по-іншому, якщо порівнювати з механізмами наслідування в класичних об'єктно-орієнтованих мовах програмування. В цій статті ми дослідимо цю різницю, пояснимо як працюють прототипні ланцюги (prototype chains), і розглянемо як властивість прототипу може використовуватись для додавання методів до існуючих конструкторів.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Наслідування в JavaScript</a></dt> + <dd>Ознайомившись з значною частиною деталей OOJS, ця стаття покаже як створювати "дочірні" класи об'єктів (конструктори), які наслідують функціонал від своїх "батьківських" класів. Крім того, ми дамо декілька порад щод того, де і коли ви можете використовувати OOJS.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Робота з даними JSON</a></dt> + <dd>JavaScript Object Notation (JSON) — це стандартний текстовий формат для представлення структурованих даних на основі об'єктного синтаксису JavaScript, який зазвичай використовується для представлення та передачі даних на веб-сайтах (наприклад, відправлення деяких даних із сервера до клієнта, тому він може відображатись на веб-сторінці). Ви часто стикатиметесь з цим, тому в цій статті ми дамо вам все, що потрібно для роботи з JSON використовуючи JavaScript, включаючи синтаксичний аналіз (parsing) JSON, щоб ви могли отримувати доступ до елементів даних і писати свій власний JSON.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Практика побудови об'єктів</a></dt> + <dd>У попередніх статтях ми розглянули найголовніші моменти в теорії та деталях синтаксису об'єктів JavaScript, що дає вам тверду основу для початку. В цій статті ми перейдемо до практичних занять, отримаємо більше практичної роботи для побудови власних JavaScript об'єктів, щоб створити щось веселе та барвисте — декілька кольорових стрибучих кульок.</dd> + <dd> </dd> +</dl> + +<h2 id="Завдання">Завдання</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Додавання функціоналу до демо зі стрибучими кульками </a></dt> + <dd>У цьому завданні, ми очікуємо, що ви, використовуючи демо з стрибаючими кульками з попередньої статті як відправну точку, додасте трохи нового та цікавого функціоналу до нього.</dd> +</dl> diff --git a/files/uk/learn/javascript/objects/object-oriented_js/index.html b/files/uk/learn/javascript/objects/object-oriented_js/index.html new file mode 100644 index 0000000000..67b61867ff --- /dev/null +++ b/files/uk/learn/javascript/objects/object-oriented_js/index.html @@ -0,0 +1,295 @@ +--- +title: Об'єктно-орієнтований JavaScript для початківців +slug: Learn/JavaScript/Objects/Object-oriented_JS +translation_of: Learn/JavaScript/Objects/Object-oriented_JS +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">Розібравшись з основами, зосередимось на об'єктно-орієнтованому JavaScript (OOJS) - в цій статті представлені основні позиції теорії об'єктно-орієнтованого програмування (ООП) , потім розглянемо, як в JavaScript емулювати класи об'єктів за допомогою функції конструктора, і як створити екземпляри об'єктів.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row"> + <table> + <tbody> + <tr> + <th scope="row">Необхідні знання:</th> + <td>Елементарна комп'ютерна грамотність, базове розуміння HTML та CSS, знайомство з основами JavaScript (див. <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">First steps</a> та <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>) і основи OOJS (див. <a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/Objects/Basics">Основи об'єктів в JS</a>).</td> + </tr> + <tr> + <th scope="row">Мета:</th> + <td>Розуміння основ теоріі об'єктно-орієнтованого програмування, як це пов'язано з JavaScript ("більшість речей є об'єктами'), і як створювати конструктори та екземпляри об'єктів.</td> + </tr> + </tbody> + </table> + </th> + </tr> + </tbody> +</table> + +<h2 id="Об'єктно-орієнтоване_програмування_-_основи">Об'єктно-орієнтоване програмування - основи</h2> + +<p>Давайте почнемо з спрощеного, високорівневого уявлення про об'єктно-орієнтоване програмування (ООП). Ми говоримо спрощеного, тому що ООП може швидко стати дуже складним, і якщо зараз дати повний курс, ймовірно, можна більше заплутати, ніж допомогти. Основна ідея ООП полягає в тому, що ми використовуємо об'єкти, щоб моделювати реальні речі, які ми хочемо представити всередині наших програм і/або забезпечити простий спосіб доступу до функціональних можливостей, які в іншому випадку було б важко або неможливо використати.</p> + +<p>Об'єкти можуть містити пов'язані дані і код, які представляють інформацію про те, що ви намагаєтеся змоделювати, а також функціональні можливості або поведінку, які ви хочете мати. Дані об'єкта (і часто функції теж) можуть бути акуратно збережені (офіційне поняття <strong>інкапсульовані</strong>) всередині об'єктного пакету (якому можна дати певне ім'я для позначення, яке іноді називають <strong>простором імен</strong>), що полегшує структуру і доступ; об'єкти також часто використовуються як сховища даних, які можна легко відправляти по мережі.</p> + +<h3 id="Визначення_шаблону_об'єкта">Визначення шаблону об'єкта</h3> + +<p>Давайте розглянемо просту програму, яка відображає інформацію про учнів та вчителів в школі. Тут ми розглянемо теорію ООП загалом, а не в контексті будь-якої конкретної мови програмування.</p> + +<p>Щоб почати, повернемося до об'єкта <code>person</code> з нашої статті <a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/Objects/Basics">Основи об'єктів в JavaScript</a>, який визначає загальні відомості і функціональні можливості людини. Є багато речей, які ви <em>можете</em> дізнатись про людину (її адресу, зріст, розмір взуття, профіль ДНК, номер паспорта, значні особистісні риси ...) , але в цьому випадку нас цікавлять лише ім'я, вік, стать та інтереси, і ми також хочемо написати коротку інформацію про неї на основі цих даних, і отримувати їх, щоб привітатись. Це відомо як <strong>абстракція (abstraction)</strong> - створення простої моделі більш складної речі, яка представляє її найважливіші аспекти таким чином, щоб було зручно працювати для виконання цілей нашої програми.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13889/person-diagram.png" style="display: block; height: 219px; margin: 0px auto; width: 610px;"></p> + +<p>В деяких мовах ООП, це загальне визначення типу об'єкта називається класом <strong>(class) </strong>(JavaScript використовує інший механізм і термінологію, як ви побачите нижче) - це насправді не об'єкт, це швидше шаблон, який визначає, які характеристики повинен мати об'єкт.</p> + +<h3 id="Створення_реальних_об'єктів">Створення реальних об'єктів</h3> + +<p>З нашого класу ми можемо створити <strong>екземпляри об'єктів</strong> - об'єкти, що містять дані та функціональні можливості, визначені в класі. З нашого класу Person, можемо створити декілька справжніх людей:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15163/MDN-Graphics-instantiation-2-fixed.png" style="display: block; height: 702px; margin: 0px auto; width: 695px;"></p> + +<p>Коли екземпляр об'єкта створюється з класу, <strong>функція конструктора</strong> класу виконується для його створення. Цей процес створення екземпляра об'єкта з класу називається <strong>instantiation</strong> - екземпляр об'єкта створюється з класу.</p> + +<h3 id="Specialist_classes">Specialist classes</h3> + +<p>In this case we don't want generic people — we want teachers and students, which are both more specific types of people. In OOP, we can create new classes based on other classes — these new <strong>child classes</strong> can be made to <strong>inherit</strong> the data and code features of their <strong>parent class</strong>, so you can reuse functionality common to all the object types rather than having to duplicate it. Where functionality differs between classes, you can define specialized features directly on them as needed.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13881/MDN-Graphics-inherited-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p> + +<p>This is really useful — teachers and students share many common features such as name, gender, and age, so it is convenient to only have to define those features once. You can also define the same feature separately in different classes, as each definition of that feature will be in a different namespace. For example, a student's greeting might be of the form "Yo, I'm [firstName]" (e.g <em>Yo, I'm Sam</em>), whereas a teacher might use something more formal, such as "Hello, my name is [Prefix] [lastName], and I teach [Subject]." (e.g <em>Hello, My name is Mr Griffiths, and I teach Chemistry</em>).</p> + +<div class="note"> +<p><strong>Note</strong>: The fancy word for the ability of multiple object types to implement the same functionality is <strong>polymorphism</strong>. Just in case you were wondering.</p> +</div> + +<p>You can now create object instances from your child classes. For example:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13885/MDN-Graphics-instantiation-teacher-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p> + +<p>In the rest of the article, we'll start to look at how OOP theory can be put into practice in JavaScript.</p> + +<h2 id="Constructors_and_object_instances">Constructors and object instances</h2> + +<p>Some people argue that JavaScript is not a true object-oriented language — for example, its <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class</a></code> statement is just syntactical sugar over existing prototypical inheritance and is not a <code>class</code> in a traditional sense. JavaScript, uses special functions called <strong>constructor functions</strong> to define objects and their features. They are useful because you'll often come across situations in which you don't know how many objects you will be creating; constructors provide the means to create as many objects as you need in an effective way, attaching data and functions to them as required.</p> + +<p>When a new object instance is created from a constructor function, its core functionality (as defined by its prototype, which we'll explore in the article <a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a>) is not all copied over to the new object like "classic" OO languages — instead the functionality is linked to via a reference chain called a <strong>prototype chain</strong>. So this is not true instantiation, strictly speaking — JavaScript uses a different mechanism to share functionality between objects.</p> + +<div class="note"> +<p><strong>Note</strong>: Not being "classic OOP" is not necessarily a bad thing; as mentioned above, OOP can get very complex very quickly, and JavaScript has some nice ways to take advantage of OO features without having to get too deep into it.</p> +</div> + +<p>Let's explore creating classes via constructors and creating object instances from them in JavaScript. First of all, we'd like you to make a new local copy of the <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a> file we saw in our first Objects article.</p> + +<h3 id="A_simple_example">A simple example</h3> + +<ol> + <li>Let's start by looking at how you could define a person with a normal function. Add this function within the <code>script</code> element: + + <pre class="brush: js">function createNewPerson(name) { + var obj = {}; + obj.name = name; + obj.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); + }; + return obj; +}</pre> + </li> + <li>You can now create a new person by calling this function — try the following lines in your browser's JavaScript console: + <pre class="brush: js">var salva = createNewPerson('Salva'); +salva.name; +salva.greeting();</pre> + This works well enough, but it is a bit long-winded; if we know we want to create an object, why do we need to explicitly create a new empty object and return it? Fortunately JavaScript provides us with a handy shortcut, in the form of constructor functions — let's make one now!</li> + <li>Replace your previous function with the following: + <pre class="brush: js">function Person(name) { + this.name = name; + this.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); + }; +}</pre> + </li> +</ol> + +<p>The constructor function is JavaScript's version of a class. You'll notice that it has all the features you'd expect in a function, although it doesn't return anything or explicitly create an object — it basically just defines properties and methods. You'll see the <code>this</code> keyword being used here as well — it is basically saying that whenever one of these object instances is created, the object's <code>name</code> property will be equal to the name value passed to the constructor call, and the <code>greeting()</code> method will use the name value passed to the constructor call too.</p> + +<div class="note"> +<p><strong>Note</strong>: A constructor function name usually starts with a capital letter — this convention is used to make constructor functions easier to recognize in code.</p> +</div> + +<p>So how do we call a constructor to create some objects?</p> + +<ol> + <li>Add the following lines below your previous code addition: + <pre class="brush: js">var person1 = new Person('Bob'); +var person2 = new Person('Sarah');</pre> + </li> + <li>Save your code and reload it in the browser, and try entering the following lines into your JS console: + <pre class="brush: js">person1.name +person1.greeting() +person2.name +person2.greeting()</pre> + </li> +</ol> + +<p>Cool! You'll now see that we have two new objects on the page, each of which is stored under a different namespace — when you access their properties and methods, you have to start calls with <code>person1</code> or <code>person2</code>; they are neatly packaged away so they won't clash with other functionality. They do, however, have the same <code>name</code> property and <code>greeting()</code> method available. Note that they are using their own <code>name</code> value that was assigned to them when they were created; this is one reason why it is very important to use <code>this</code>, so they will use their own values, and not some other value.</p> + +<p>Let's look at the constructor calls again:</p> + +<pre class="brush: js">var person1 = new Person('Bob'); +var person2 = new Person('Sarah');</pre> + +<p>In each case, the <code>new</code> keyword is used to tell the browser we want to create a new object instance, followed by the function name with its required parameters contained in parentheses, and the result is stored in a variable — very similar to how a standard function is called. Each instance is created according to this definition:</p> + +<pre class="brush: js">function Person(name) { + this.name = name; + this.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); + }; +}</pre> + +<p>After the new objects have been created, the <code>person1</code> and <code>person2</code> variables contain the following objects:</p> + +<pre class="brush: js">{ + name: 'Bob', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +} + +{ + name: 'Sarah', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +}</pre> + +<p>Note that when we are calling our constructor function, we are defining <code>greeting()</code> every time, which isn't ideal. To avoid this, we can define functions on the prototype instead, which we will look at later.</p> + +<h3 id="Creating_our_finished_constructor">Creating our finished constructor</h3> + +<p>The example we looked at above was only a simple example to get us started. Let's now get on and create our final <code>Person()</code> constructor function.</p> + +<ol> + <li>Remove the code you inserted so far, and add in this replacement constructor — this is exactly the same as the simple example in principle, with just a bit more complexity: + <pre class="brush: js">function Person(first, last, age, gender, interests) { + this.name = { + 'first': first, + 'last' : last + }; + this.age = age; + this.gender = gender; + this.interests = interests; + this.bio = function() { + alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.'); + }; + this.greeting = function() { + alert('Hi! I\'m ' + this.name.first + '.'); + }; +}</pre> + </li> + <li>Now add in the following line below it, to create an object instance from it: + <pre class="brush: js">var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre> + </li> +</ol> + +<p>You'll now see that you can access the properties and methods just like we did previously — try these in your JS console:</p> + +<pre class="brush: js">person1['age'] +person1.interests[1] +person1.bio() +// etc.</pre> + +<div class="note"> +<p><strong>Note</strong>: If you are having trouble getting this to work, try comparing your code against our version — see <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-finished.html">oojs-class-finished.html</a> (also <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-finished.html">see it running live</a>).</p> +</div> + +<h3 id="Further_exercises">Further exercises</h3> + +<p>To start with, try adding a couple more object creation lines of your own, and try getting and setting the members of the resulting object instances.</p> + +<p>In addition, there are a couple of problems with our <code>bio()</code> method — the output always includes the pronoun "He", even if your person is female, or some other preferred gender classification. And the bio will only include two interests, even if more are listed in the <code>interests</code> array. Can you work out how to fix this in the class definition (constructor)? You can put any code you like inside a constructor (you'll probably need a few conditionals and a loop). Think about how the sentences should be structured differently depending on gender, and depending on whether the number of listed interests is 1, 2, or more than 2.</p> + +<div class="note"> +<p><strong>Note</strong>: If you get stuck, we have provided an <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">answer inside our GitHub repo</a> (<a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">see it live</a>) — try writing it yourself first though!</p> +</div> + +<h2 id="Other_ways_to_create_object_instances">Other ways to create object instances</h2> + +<p>So far we've seen two different ways to create an object instance — <a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Object_basics">declaring an object literal</a>, and using a constructor function (see above).</p> + +<p>These make sense, but there are other ways — we want to make you familiar with these in case you come across them in your travels around the Web.</p> + +<h3 id="The_Object()_constructor">The Object() constructor</h3> + +<p>First of all, you can use the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object()</a></code> constructor to create a new object. Yes, even generic objects have a constructor, which generates an empty object.</p> + +<ol> + <li>Try entering this into your browser's JavaScript console: + <pre class="brush: js">var person1 = new Object();</pre> + </li> + <li>This stores an empty object in the <code>person1</code> variable. You can then add properties and methods to this object using dot or bracket notation as desired; try these examples in your console: + <pre class="brush: js">person1.name = 'Chris'; +person1['age'] = 38; +person1.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); +};</pre> + </li> + <li>You can also pass an object literal to the <code>Object()</code> constructor as a parameter, to prefill it with properties/methods. Try this in your JS console: + <pre class="brush: js">var person1 = new Object({ + name: 'Chris', + age: 38, + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +});</pre> + </li> +</ol> + +<h3 id="Using_the_create()_method">Using the create() method</h3> + +<p>Constructors can help you give your code order—you can create constructors in one place, then create instances as needed, and it is clear where they came from.</p> + +<p>However, some people prefer to create object instances without first creating constructors, especially if they are creating only a few instances of an object. JavaScript has a built-in method called <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create()</a></code> that allows you to do that. With it, you can create a new object based on any existing object.</p> + +<ol> + <li>With your finished exercise from the previous sections loaded in the browser, try this in your JavaScript console: + <pre class="brush: js">var person2 = Object.create(person1);</pre> + </li> + <li>Now try these: + <pre class="brush: js">person2.name +person2.greeting()</pre> + </li> +</ol> + +<p>You'll see that <code>person2</code> has been created based on <code>person1</code>—it has the same properties and method available to it.</p> + +<p>One limitation of <code>create()</code> is that IE8 does not support it. So constructors may be more effective if you want to support older browsers.</p> + +<p>We'll explore the effects of <code>create()</code> in more detail later on.</p> + +<h2 id="Summary">Summary</h2> + +<p>This article has provided a simplified view of object-oriented theory — this isn't the whole story, but it gives you an idea of what we are dealing with here. In addition, we have started to look at how JavaScript relates to and how it differs from "classic OOP", how to implement classes in JavaScript using constructor functions, and different ways of generating object instances.</p> + +<p>In the next article, we'll explore JavaScript object prototypes.</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</p> + +<p> </p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</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> + +<p> </p> diff --git a/files/uk/learn/javascript/асинхронний/index.html b/files/uk/learn/javascript/асинхронний/index.html new file mode 100644 index 0000000000..3167a1f55a --- /dev/null +++ b/files/uk/learn/javascript/асинхронний/index.html @@ -0,0 +1,51 @@ +--- +title: Асинхронний JavaScript +slug: Learn/JavaScript/Асинхронний +translation_of: Learn/JavaScript/Asynchronous +--- +<div>{{LearnSidebar}}</div> + +<p class="summary"><span class="seoSummary">In this module we take a look at {{Glossary("asynchronous")}} {{Glossary("JavaScript")}}, why it is important, and how it can be used to effectively handle potential blocking operations such as fetching resources from a server.</span></p> + +<div class="in-page-callout webdev"> +<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3> + +<p>We have put together a course that includes all the essential information you need to work towards your goal.</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p> +</div> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Asynchronous JavaScript is a fairly advanced topic, and you are advised to work through <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a> and <a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a> modules before attempting this.</p> + +<p>If you are not familiar with the concept of asynchronous programming, you should definitely start with the <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a> article in this module. If you are, then you can probably skip to the <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a> module.</p> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you can try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com">Glitch</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></dt> + <dd> + <p>In this article we'll run through a number of important concepts relating to asynchronous programming, and how this looks in web browsers and JavaScript. You should understand these concepts before working through the other articles in the module.</p> + </dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></dt> + <dd>In this article we briefly recap the problems associated with sychronous JavaScript, and take a first look at some of the different asynchronous JavaScript techniques you'll encounter, showing how they can help us solve such problems.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Loops_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></dt> + <dd>Here we look at the traditional methods JavaScript has available for running code asychronously after a set time period has elapsed, or at a regular interval (e.g. a set number of times per second), talk about what they are useful for, and look at their inherent issues.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Handling async operations gracefully with Promises</a></dt> + <dd>Promises are a comparatively new feature of the JavaScript language that allow you to defer further actions until after the previous action has completed, or respond to its failure. This is really useful for setting up a sequence of operations to work correctly. This article shows you how promises work, where you'll see them in use in WebAPIs, and how to write your own.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></dt> + <dd>Promises can be somewhat complex to set up and understand, and so modern browsers have implemented <code>async</code> functions and the <code>await</code> operator. The former allows standard functions to implicitly behave asynchronously with promises, whereas the latter can be used inside <code>async</code> functions to wait for promises before the function continues. This makes chaining promises simpler and easier to read.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></dt> + <dd>To finish this module off, we'll consider the different coding techniques and features we've discussed throughout, looking at which ones you should use when, with recommendations and reminders of common pitfalls where appropriate.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://eloquentjavascript.net/11_async.html">Asynchronous Programming</a> from the fantastic <a href="https://eloquentjavascript.net/">Eloquent JavaScript</a> online book by Marijn Haverbeke.</li> +</ul> diff --git a/files/uk/learn/javascript/будівельні_блоки/index.html b/files/uk/learn/javascript/будівельні_блоки/index.html new file mode 100644 index 0000000000..d4a6238d0f --- /dev/null +++ b/files/uk/learn/javascript/будівельні_блоки/index.html @@ -0,0 +1,57 @@ +--- +title: Будівельні блоки JavaScript +slug: Learn/JavaScript/Будівельні_блоки +translation_of: Learn/JavaScript/Building_blocks +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">In this module, we continue our coverage of all JavaScript's key fundamental features, turning our attention to commonly-encountered types of code blocks such as conditional statements, loops, functions, and events. You've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly.</p> + +<div class="in-page-callout webdev"> +<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3> + +<p>We have put together a course that includes all the essential information you need to work towards your goal.</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p> +</div> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Before starting this module, you should have some familiarity with the basics of <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML</a> and <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS</a>, and you should have also worked through our previous module, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a>.</p> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></dt> + <dd>In any programming language, code needs to make decisions and carry out actions accordingly depending on different inputs. For example, in a game, if the player's number of lives is 0, then it's game over. In a weather app, if it is being looked at in the morning, show a sunrise graphic; show stars and a moon if it is nighttime. In this article we'll explore how conditional structures work in JavaScript.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></dt> + <dd>Sometimes you need a task done more than once in a row. For example, looking through a list of names. In programming, loops perform this job very well. Here we will look at loop structures in JavaScript.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></dt> + <dd>Another essential concept in coding is <strong>functions. Functions</strong> allow you to store a piece of code that does a single task inside a defined block, and then call that code whenever you need it using a single short command — rather than having to type out the same code multiple times. In this article we'll explore fundamental concepts behind functions such as basic syntax, how to invoke and define functions, scope, and parameters.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></dt> + <dd>With most of the essential theory dealt with previously, this article provides a practical experience. Here you'll get some practice with building up your own custom function. Along the way, we'll also explain some further useful details of dealing with functions.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></dt> + <dd>The last essential concept you must know about a function is return values. Some functions don't return a significant value after completion, but others do. It's important to understand what their values are, how to make use of them in your code, and how to make your own custom functions return useful values. </dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></dt> + <dd>Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired. For example if the user clicks a button on a webpage, you might want to respond to that action by displaying an information box. In this final article we will discuss some important concepts surrounding events, and look at how they work in browsers.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<p>The following assessment will test your understanding of the JavaScript basics covered in the guides above.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></dt> + <dd>Now that we've looked at the fundamental building blocks of JavaScript, we'll test your knowledge of loops, functions, conditionals and events by building a fairly common item you'll see on a lot of websites — a JavaScript-powered image gallery.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="https://learnjavascript.online/">Learn JavaScript</a></dt> + <dd>An excellent resource for aspiring web developers — Learn JavaScript in an interactive environment, with short lessons and interactive tests, guided by automated assessment. The first 40 lessons are free, and the complete course is available for a small one-time payment.</dd> +</dl> |