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

• Введение в курс
• Введение JavaScript
• Кратко о JS: тип языка по виду трансляции, в каких целях используется, спецификация ECMAScript, движки и какие бывают
• Переменные и типы данных
• Способы создания переменных и ключевые слова: const и let. Принцип работы переменных в JS. Типы данных и динамическая типизация. Примитивные типы данных: number, string, BigInt, undefined, boolean, Symbol. Остальные типы: Object, null, Function. Функция console.log для отладки
• Математические операторы и преобразование типов
• Основные операторы: присваивания, сложения, разности, деления, умножения, остаток от деления, возведение в степень. Двоякое использование одного и того же оператора. Декремент и инкремент, постфиксные и префиксные. Преобразование типов данных при математических операций. Самостоятельное преобразование с помощью Number, String, Boolean
• Логические операторы: сравнение (== и ===), отрицание, больше и меньше. Приведение типов при сравнении. Подводные камни (как всегда)
• Ветвления и условные операторы
• Логические операторы: И, ИЛИ, НЕ. Конструкции: if, if else, if else if. Тернарное условие Конструкция switch
• Встроенные функции для взаимодействия с пользователем
• Функции alert, prompt, confirm и как их использовать

Итог: Понимание, что есть такое 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 и использование его для автоматизации рутинных задач.

• Компоненты и JSX
• Состояние компонентов
• Хуки
• Стилизация компонентов
• React-Router

• Статическая типизация
• Интерфейсы и типы
• Перечисляемые типы Enum

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

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

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

Легенда

В период пандемии и закрытых границ в Петербурге появилась потребность в локальном сервисе по бронирования жилья в черте городе.

Цель

создать простой и удобный сервис, который будет лучше аналогичных сервисов за счёт простой авторизации и понятного интерфейса.

Задача

Необходимо создать сайт - сервис по бронированию жилья

В неавторизованном режиме на сайте должны быть страницы:

• Список помещений (главная страница)
• Отдельная страница (карточка) помещения
• Регистрация
• Авторизация

В авторизованном режиме:

• Список помещений (главная страница)
• Отдельная страница (карточка) помещения
• Личный кабинет

Легенда

В компании “Инкилевич и сыновья” проходят постоянные соревнования между коллегами для укрепления корпоративного духа. Работают в основном IT-специалисты со сложными задачами. Им хочется простую по механике игру, в которой они могли бы разгрузить мозг и посоревноваться друг с другом.

🦖 Цель - реализовать браузерную 2D игру про приключения динозаврика

Задача

Пример похожей игры - это классическая игра «Марио».

Динозаврик движется слева направо, при достижении правого края отрывается новая сцена (продолжение мира). Через несколько сцен заканчивается уровень и происходит переход в следующий уровень.

Для всех студентов мы открываем доступ к материалам из онлайн-курса по JavaScript