1. Базовые понятия:
- короткая история JS;
- что такое JS в разрезе браузера;
- выбор и установка программ для работы;
- краткий обзор консоли браузера;
- подключение JS к HTML-страницы;
- синтаксические правила в JS;
- типы данных - специфические значения и их назначения;
- создание переменных: понятие переменной и константы;
- понятие хойстинга;
- идентификаторы, зарезервированные слова;
- понятие оператора, оператор typeof;
- знакомство с функциями BOM.
Практика: создание HTML и JS файлов, подключение сценариев, решение практических задач на типы данных.
2. Работа с операторами JS:
- основные операторы;
- операторы сравнения;
- логические операторы;
- приведение типов данных: неявное и явное.
Практика: решения задач разного уровня сложности со всеми видами операторов. Практические задания на приведение типов.
3. Циклы:
- условные операторы;
- конструкция switch;
- знакомство с циклами;
- цикл for;
- цикл while;
- цикл do while;
- сравнения циклов, ознакомление с ситуациями в которых целесообразно / нецелесообразно использовать определенные виды циклов;
- вложенные циклы.
Практика: написание кода для каждого вида циклов. Замена одного цикла другим. Циклический перебор данных внутри внешнего цикла (построение таблицы умножения).
4. Функции:
- понятие функции;
- синтаксис функции;
- функции в ES6;
- параметры функции и работа с ними.
Практика: написанные функции, которая работает с несколькими аргументами.
5. Особенности функций:
- области видимости;
- замыкания;
- рекурсивные функции;
- понятие метода;
- отличие метода и функции.
Практика: написания кода с замыканием. Использование рекурсии.
6. Массивы:
- знакомство с массивами данных;
- запись данных в массив;
- методы массива: push, pop, shift, unshift;
- перебор элементов массива;
- другие методы массивов.
Практика: создание и наполнение массивов. Практическое применение методов массива.
7. Объекты:
- понятие объекта;
- хранения данных в объекте;
- работа с данными объекта;
- перебор данных по ключам;
- методы объектов;
- глобальный объект.
Практика: создание объекта, перебор его свойств. Исследования глобального объекта браузера.
8. Введение в DOM:
- понятие DOM;
- понятие BOM;
- краткий экскурс по основным объектам BOM, их назначение;
- построение DOM-дерева;
- виды узлов;
- перемещения по узлам DOM-дерева;
- поиск элементов вручную.
Практика: создание тестовой HTML-страницы, исследования ее DOM-дерева. Организация доступа к узлам DOM.
9. Работа с DOM:
- методы для удобного поиска элементов в DOM-дереве;
- основные свойства узлов-элементов;
- создание текстовых узлов;
- создание узлов-элементов;
- добавления текстовых узлов и узлов-элементов на страницу;
- работа со стилями через JS;
- подмена стилей.
Практика: создание HTML-страницы посредством DOM-узлов. Изменение содержания элемента и его стилей с помощью JS.
10. События:
- работа с прокруткой элементов;
- знакомство с событиями браузера;
- перехват событий, всплывающие события;
- объект события;
- практическая работа с событиями браузера;
- конструкция try / catch.
Практика: навешивание различных событий на различные элементы. Перехват событий.
11. Старт учебного проекта.
Практика:
- выбор темы проекта (с предложенных);
- создание базового HTML для работы со страницей;
- организация модального окна с помощью асинхронных функций.
12. Продолжение работы над проектом.
Практика: доработка учебного проекта (в зависимости от выбранной темы).
