JavaScript Базовий

На цьому уроці буде розглянуто оточення, в якому виконується JavaScript код. Ви дізнаєтесь, що таке DOM та BOM. І найголовніше - навчитеся шукати потрібні вузли DOM дерева, що дозволить почати будувати динамічні веб-сторінки і впливати на вміст документа за допомогою JavaScript коду.

Для того, щоб будувати динамічні сторінки, необхідно розуміти, як взаємодіяти з вузлами DOM дерева, а також розуміти, які властивості доступні для редагування цих вузлів. Не менш важливо - навчитися переходити від елемента до елемента на основі розташування знайденого елемента DOM дереві. На цьому уроці ви дізнаєтеся, як відбувається навігація по DOM дереву, а також типи вузлів і вивчіть їх основні властивості.

На цьому уроці ви дізнаєтеся, як за допомогою JavaScript коду можна маніпулювати вмістом сторінки – додавати та видаляти елементи. Спочатку ви навчитеся створювати нові вузли, а потім дізнаєтеся, як за допомогою різних методів додавати створені вузли у потрібні частини сторінки. Цей урок дасть розуміння основ створення нового контенту для веб-сторінок за допомогою JavaScript коду.

Об'єкти, які знаходяться в DOM дереві, створюються на основі HTML розмітки, а властивості для цих об'єктів визначаються через HTML атрибути. На цьому уроці ви дізнаєтесь, як отримати доступ до значень атрибутів і як змінити атрибути через код JavaScript. Дізнаєтеся навіщо потрібні data атрибути та розберете приклади використання data атрибутів на практиці.

Мета цього уроку – навчитися використовувати CSS класи в JavaScript коді та змінювати оформлення елементів як за допомогою класів, так і за допомогою inline css стилів. Також, у цьому відео уроці буде розглянуто таке поняття, як обчислені стилі, розуміння яких важливе для JavaScript розробника, що вносить зміни в оформлення сторінки під час виконання сценарію.

Побудова інтерфейсу користувача нерозривно пов'язане з реакцією на взаємодію з елементами управління – натисканням на кнопки, введенням значень у поля та іншими подібними діями. Щоб відреагувати на дію користувача, необхідно вміти обробляти події та знати, які елементи управління, можуть їх видати. На цьому уроці ви дізнаєтеся, що таке події і як обробляти події JavaScript, використовуючи властивості DOM елементів і метод addEventListener.

Цей урок націлений на вивчення подій, які часто використовуються при побудові інтерфейсів користувача. Ви дізнаєтесь, як обробляти події миші, події натискання на клавіші клавіатури, а також навчитеся обробляти події, пов'язані із завантаженням документа. Цей урок орієнтований на практичне застосування різних подій і містить кілька цікавих прикладів побудови інтерфейсу, де використовуються події руху курсору та клавіатури.

У DOM дереві подія проходить за певним маршрутом - від кореня дерева до елемента, який ініціював подію, а після цього подія йде у зворотний бік - до кореня DOM дерева. Використовуючи addEventListener в JavaScript, можна визначити, на якому саме етапі буде оброблятись подія. Це дозволяє створити ефективний код обробки подій кількох елементів керування. На цьому уроці будуть розглянуті етапи поширення події, способи встановлення обробників на різні етапи та приклади коду, що показують для чого це використовується.

Сучасний інтерфейс користувача складається з безлічі HTML елементів з різними атрибутами і, зазвичай, його структура досить складна. Побудова такого інтерфейсу на чистому JavaScript не проста задача, яка може бути пов'язана з безліччю дрібних помилок. Щоб уникнути цих помилок та спростити генерацію розмітки, використовуються спеціальні бібліотеки – шаблонізатори. На цьому уроці ви навчитеся використовувати шаблонизатор mustache.js і дізнаєтеся про те, як користуватися HTML елементом template.

Об'єкти – важлива частина розробки будь-якою об'єктно-орієнтованою мовою програмування. JavaScript включає різні ООП техніки, тому робота з об'єктами дуже важлива для написання повноцінних сценаріїв. На цьому уроці ви навчитеся створювати об'єкти з однаковою структурою за допомогою функцій конструкторів. А також дізнаєтеся про те, що таке прототип і яку роль він грає в роботі багатьох механізмів JavaScript.

Функції конструктори та прототипи, які ви вивчали на минулому уроці, важливі для правильного розуміння роботи багатьох конструкцій у JavaScript. Сьогодні замість функцій конструкторів на практиці застосовують класи та інші сучасні можливості, пов'язані з ними. На цьому уроці ви дізнаєтеся, що клас - це, по суті, розширення функцій конструкторів і це дуже зручний спосіб роботи з об'єктами, який дозволяє за допомогою невеликого обсягу коду визначити властивості та методи і правильно скористатися прототипами.

Успадкування – концепція ООП мов програмування, за якою функціональність одного класу може бути передано до іншого класу. З появою ключового слова class в JavaScript успадкування стало дуже простим і не вимагає написання великої кількості коду, пов'язаного із прототипами, як це було раніше. На цьому уроці ви дізнаєтеся, як працює успадкування та використовується ключове слово extends. Важливою частиною цього уроку буде розгляд роботи статичних властивостей та методів.

На цьому уроці буде детально розглянуто поняття контексту функції. Ви дізнаєтеся, які можливі значення може приймати ключове слово this. Як поводиться контекст глобальних функцій у строгому режимі, а також дізнаєтеся, як користуватися методами call, apply і bind для зміни контексту функції, що викликається. Функції - важливий інструмент JavaScript, так як ця мова включає в себе техніки функціонального програмування. Хороше розуміння функцій дає можливість краще розуміти та використовувати різні шаблони кодування JavaScript.

Замикання – корисний механізм будь-якої функціональної мови програмування. У JavaScript замикання працюють на основі внутрішніх структур, які створюються під час виконання функцій – контекстів виконання та лексичних оточень. Цей відео урок присвячений механізмам, які лежать в основі роботи функцій та показує приклади того, як використовується замикання у сценаріях JavaScript.

На цьому уроці ви навчитеся працювати з HTML формами через JavaScript код та отримувати значення, введені користувачем. Також ви дізнаєтеся навіщо потрібні HTML форми і як вони працюють при надсиланні значень на сервер.

Перевірка даних – основна роль JavaScript, коли йдеться про HTML форми. Дані, введені користувачем, можуть не відповідати очікуванням розробника. Користувач може не ввести якесь обов'язкове значення або вказати дані в неправильному форматі, наприклад, коли потрібно ввести адресу електронної пошти та номер телефону. На  цьому уроці ви дізнаєтеся про події, які будуть корисними при перевірці даних, а також розгляньте кілька підходів в організації процесу перевірки введених значень, у тому числі вивчіть перевірку даних без застосування JavaScript за допомогою HTML5 атрибутів для валідації.

На цьому уроці буде вивчено основні варіанти зберігання даних на стороні клієнта. Cookies - найпростіший спосіб зберегти невеликий обсяг даних, але значення, записані в cookies, відправляються на сервер при кожному запиті, тому такий спосіб зберігання даних більше підходить для відстеження дій користувача та авторизації користувача на сайті. WebStorage – це більш сучасний API для роботи з браузером, який дозволяє зберегти більше даних, ніж cookies та призначений лише для збереження значень та не пов'язаний із відправкою даних на сервер.

У будь-якій програмі можуть виникнути помилки під час виконання. Такі помилки часто неможливо передбачити, наприклад, при надсиланні запиту на сервер зникло з'єднання і відправити запит не вийде або JSON дані містять помилку і відновити на основі цих даних об'єкт вже неможливо. Усі ситуації, через які не можна продовжити виконання коду, називаються винятками, а два ключові слова try/catch – спосіб обробити помилку в коді та надати альтернативний спосіб виконання сценарію.

На цьому відео уроці йтиметься про організацію асинхронного коду. Ви дізнаєтеся про те, як можна обробити результат асинхронної операції за допомогою функції зворотного виклику та зрозумієте недоліки такого підходу при описі складної логіки. Але більшість уроку присвячена використанню об'єктів Promise, з допомогою яких код виходить простіше і дозволяє уявити кожну асинхронну операцію як окремий об'єкт.

Сучасний веб-додаток, написаний за допомогою JavaScript, неможливо уявити без взаємодії з серверною стороною. На цьому уроці для кращого розуміння принципів роботи з мережевими запитами, будуть розглянуті основи HTTP протоколу. Ви дізнаєтеся, як виглядає запит і відповідь, які бувають HTTP дієслова і на що вони впливають, а також дізнаєтеся про основні статус коди, які надходять у відповіді сервера. Головне завдання уроку – показати, як користуватися методом fetch та надіслати HTTP запит на сервер, після чого опрацювати отриману відповідь.