Курс JavaScript-разработчик

• Массивы
• Определение массива. Способы создания массивов в JavaScript. Объект Array. Одномерные массивы и двумерные массивы. Сравнение массивов с помощью логических операторов (это невозможно)
• Методы для работы с массивами
• Извлечение нужного элемента по индексу. Длина массива (length). Добавление нового элемента в начало и в конец (pop и shift). Удаление элемента (push и unshift)
• Если ученики уже знакомы со всем вышеперечисленным, то рассказать про методы массивов ES6: map, forEach, every, some, find, filter, reduce
• Циклы for и while
• Синтаксис конструкций for и while. Виды while: do..while. Виды for: for..in, for..of. Поиск элемента в массиве
• Вложенные массивы
• Поиск элемента во вложенных массивах. Методы для поиска элемента в массиве
• Работа с консолью
• Дополнительные функции для работы с консолью: console.table, console.error, console.time, console.timeEnd, console.warn

Итог: Понимание массивов, как создавать и как изменять. Циклы и применение для поиска элементов, а также для других задач. Дополнительные команды для работы с консолью.

• Определение функции. Стрелочная функция и её отличия от обычной. Function Expression и Function Declaration
• Область видимости
• Что такое область видимости блока. Как она работает. LexicalEnvironment
• Таймеры и замыкание
• Функции setInterval, setTimeout, clearInterval, clearTimeout. Что такое замыкание и как его можно использовать
• Функции обратного вызова
• Определение функций обратного вызова. Примеры применения
• Функции в JavaScript. Способы их создания. Область видимости и замыкание

• Объекты и словари. Как создавать объекты. Ключевое слово this. Получение, изменение и удаление свойств объекта. Ссылки на объекты
• Прототипное наследование
• Все в JavaScript объект. Как работает наследование свойств и методов. Конструкторы
• Определение классов и преимущества использования. Расширение классов. Приватные методы и публичные. Геттеры и сеттеры. Пример создания программы с применением классов и архитектура MVP
• DOM
• Объектная модель страницы и зачем она нужна. Поиск элементов на странице и их получение. Перебор элементов и основные свойства
• События. Обработчики событий элементов и их удаление. Объект Event. Всплытие и погружение

Итог: Понимание внутреннего устройства JavaScript и принцип работы объектов. DOM и взаимодействие со страницей.

• JavaScript-анимации. Изменение CSS свойств элементов. Кривая Безье. Примеры анимаций
• Рендеринг в браузере
• Оптимизированные свойства. Функция requestAnimationFrame
• Библиотеки с анимациями
• Anime.js основы. Примеры анимаций с помощью библиотеки

Итог: Понимание работы анимаций JavaScript-анимаций. Оптимизация рендеринга. Основы работы с библиотекой Anime.js.

• Слайдер. Создание собственного слайдера с помощью CSS и JavaScript
• Аккордион. Создание собственного аккордиона с помощью CSS и JavaScript
• Тултип
• Создание собственного тултип библиотеки с помощью CSS и JavaScript

Итог: Понимание, как создаются сложные компоненты без применения сторонних библиотек. Более углубленные знания по работе со страницей.

• Введение в Node.js
• Возможности Node.js. Кратко о модулях и их предназначениях: fs, child_process, https
• NPM. Основные команды пакетного менеджера. Инициализация проекта и установка первых пакетов. Структура package.json
• Основы Webpack. Зачем нужны сборщики и какие этапы можно автоматизировать. Первый конфиг Webpack и автоматизация сборки: минификация кода, конкатенация модулей и использование препроцессора SCSS
• Препроцессор SCSS. Преимущества препроцессоров. Краткий обзор различий между некоторыми: SCSS, SASS, Less, post-css Основные конструкции: переменные, миксины, функции

Итог: Умение работать с Node.js и использование его для автоматизации рутинных задач.

• Повторение. Как делать запросы к серверу с клиента (в зависимости от того же). Axios
• Работа с REST API

• Написать свой сервер
• Обработка запросов, ошибок при обработке
• Отправка ответов
• Дополнительные модули для Node.js

• Автоматическая сборка и деплой проекта
• Зачем и как это работает
• GitLab