Курси JavaScript on-line

Базові поняття:

• коротка історія JS;
• що таке JS в розрізі браузера;
• вибір та встановлення програм для роботи;
• короткий огляд консолі браузера;
• підключення JS до HTML-сторінки;
• синтаксичні правила в JS;
• типи даних - специфічні значення та їх призначення;
• створення змінних: поняття змінної та константи;
• поняття хойстингу;
• ідентифікатори, зарезервовані слова;
• поняття оператора, оператор typeof;
• знайомство з функціями BOM.

Практика: створення HTML та JS файлів, підключення сценаріїв, вирішення практичних завдань на типи даних.

Робота з операторами JS:

• основні оператори;
• оператори порівняння;
• логічні оператори;
• приведення типів даних: неявне та явне.

Практика: вирішення задач різного рівня складності з усіма видами операторів. Практичні завдання на приведення типів.

Цикли:

• умовні оператори;
• конструкція switch;
• знайомство з циклами;
• цикл for;
• цикл while;
• цикл do while;
• порівняння циклів, ознайомлення з ситуаціями в яких доцільно/не доцільно використовувати певні види циклів;
• вкладені цикли.

Практика: написання коду для кожного виду циклів. Заміна одного циклу іншим. Циклічний перебір даних всередині зовнішнього циклу (Побудова таблиці множення).

Функції:

• поняття функції;
• синтаксис функції;
• функції в ES6;
• параметри функції та робота з ними.

Практика: написання функції, що працює з кількома аргументами.

Особливості функцій:

• області видимості;
• замикання;
• рекурсивні функції;
• поняття методу;
• відмінність методу та функції.

Практика: написання коду з замиканням. Використання рекурсії.

Масиви:

• знайомство з масивами даних;
• запис даних в масив;
• методи масиву: push, pop, shift, unshift;
• перебір елементів масиву;
• інші методи масивів.

Практика: створення та наповнення масивів. Практичне застосування методів масиву.

Об’єкти:

• поняття об’єкту;
• зберігання даних в об’єкті;
• робота з даними об’єкту;
• перебір даних за ключами;
• методи об’єктів;
• глобальний об’єкт.

Практика: створення об’єкту, перебір його властивостей. Дослідження глобального об’єкту браузера.

Введення в DOM:

• поняття DOM;
• поняття BOM;
• короткий екскурс по основних об’єктах BOM, їх призначення;
• побудова DOM-дерева;
• види вузлів;
• переміщення по вузлах DOM-дерева;
• пошук елементів вручну.

Практика: створення тестової HTML-сторінки, дослідження її DOM-дерева. Організація доступу до вузлів DOM.

Робота з DOM:

• методи для зручного пошуку елементів в DOM-дереві;
• основні властивості вузлів-елементів;
• створення текстових вузлів;
• створення вузлів-елементів;
• додавання текстових вузлів та вузлів-елементів на сторінку;
• робота зі стилями через JS;
• підміна стилів.

Практика: створення HTML-сторінки посередництвом DOM-вузлів. Зміна вмісту елементу та його стилів за допомогою JS.

Події:

• робота з прокруткою елементів;
• ознайомлення з подіями браузера;
• перехват подій, спливаючі події;
• об’єкт події;
• практична робота з подіями браузера;
• конструкція try/catch.

Практика: навішування різних подій на різні елементи. Перехват подій.

Старт навчального проекту.

Практика:

• вибір теми проекту (з запропонованих);
• створення базового HTML для роботи зі сторінкою;
• організація модального вікна за допомогою асинхронних функцій.

Продовження роботи над проектом.

Практика: допрацювання навчального проекту (в залежності від обраної теми).