Все курсы

Курс "JavaScript/​DOM/​Интерфейсы" для программистов

Этот курс предназначен для изучения JavaScript программистами, а также для тех, кто разрабатывал на нём эпизодически и теперь хочет освоить профессионально.

JavaScript/DOM/Интерфейсы для программистов
Ближайший набор
ПреподавательВладимир Шевчук
Перейти к записи

Цели курса

  • Дать глубокое знание языка JavaScript, соответствующее позиции хорошего среднего/продвинутого (middle+) разработчика.
  • Научиться делать браузерные интерфейсы.
  • Подготовить к освоению фреймворка: React, Vue, Angular или другого, если ваша цель - создавать сложные приложения.

Как организовано обучение?

Курс идёт примерно 1.5 месяца.

До начала обучения: вводные материалы

За неделю до курса вы получите видео-лекции по основам JavaScript.

Мы также будем использовать систему Git/GitHub для обмена исходным кодом, так делает большинство проектов. Для тех, кому это в новинку - дадим крэш-курс и поможем разобраться.

Онлайн-занятия с преподавателем 2 раза в неделю

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

Домашние задания, обратная связь по ним

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

Чат

Между занятиями доступен групповой чат для общения и вопросов преподавателю.

Курсовой проект

Делаем курсовой проект: админку товаров для интернет-магазина. Большую часть кода для проекта пишете вы.

Результат

Разработчик на JavaScript хорошего среднего уровня ("middle").

Вы хорошо знаете JavaScript, свободно разрабатываете и отлаживаете программы на этом языке.

Вы умеете создавать интерфейсы без фреймворков.

У вас достаточно знаний для освоения фреймворков (React, Vue и других) и Node.js.

Сертификат

По окончанию курсов вы получаете сертификат в электронном виде на русском и английском языках.

Хотя сертификатам в нашей профессии обычно не придают значения. Главное - знания и умения, которые вы получите, если будете полноценно участвовать в курсе.

img

Программа по занятиям

Занятия проходят онлайн два раза в неделю.

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

Собрание

Первая встреча традиционно является собранием. На нём мы знакомимся, проверяем подключение, обсуждаем организационные вопросы, взаимодействие с преподавателем, как учиться на курсе.

Основы языка, инструменты для разработки и отладки

К первому занятию вы посмотрели вводный видеокурс и уже знаете основы JavaScript. Вместе проходим по важным особенностям JavaScript, обращаем внимание на нюансы и особые возможности языка, убеждаемся в том, что понимаем их.

Разбираем функции, замыкания в JavaScript и многое другое.

Знакомимся с инструментами для разработки и отладки JavaScript, которыми будем пользоваться и глубже изучим далее.

Объекты и массивы, основы тестирования

Объекты и массивы вам уже знакомы. На этом занятии мы изучаем их особенности в JavaScript.

  • Массивы: обзор методов, особенности и нюансы использования.
  • Функции с переменным количеством аргументов.
  • Объект как коллекция: передача по ссылке, итерация, копирование, флаги свойств.
  • Set/Map: область использования, отличия от Object.
  • Деструктуризация объектов и массивов.

Также мы изучаем, как устроено автоматическое тестирование при помощи Jest. Пока основы, чтобы были понятны тесты, приложенные к домашнему заданию. Позже мы изучим тестирование более глубоко.

Объектно-ориентированное программирование, введение в DOM.

Мы полагаем, что у вас уже есть опыт с ООП, поэтому сосредотачиваемся на особенностях JavaScript.

  • Методы объектов, динамический контекст this.
  • Потеря контекста, передача контекста в функцию и его привязка.
  • Функции-конструкторы.
  • Прототипное наследование, свойство prototype.
  • Классы, их внутреннее устройство.

Введение в DOM и компонентную архитектуру.

  • DOM - объектная модель документа, основные методы.
  • Введение в компонентную архитектуру веб-страницы.
  • Пример создания графического компонента "диаграмма", организация кода.

DOM-модель в деталях.

Глубже изучаем DOM-модель документа и методы работы с ней. Они нужны, чтобы отображать кнопки, меню и другие компоненты, а также динамических их менять.

JavaScript-модули, их особенности по сравнению с "обычными" скриптами.

Процесс загрузки страницы, порядок выполнения модулей и скриптов.

События

Изучаем взаимодействие с посетителем при помощи событий:

  • Установка обработчиков событий.
  • Свойства событий.
  • Погружение и всплытие.
  • Приём проектирования "делегирование" для работы с большим количеством элементов, упрощения сложных интерфейсов.
  • Приём проектирования "поведение" для добавления функционала при помощи HTML-атрибутов.
  • Архитектура, связывание компонентов при помощи своих событий.

Создание компонент "всплывающая подсказка" и "календарь с выбором диапазона дат" для проекта.

Асинхронный код: Promise, async/await, fetch

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

  • Событийный цикл: внутреннее устройство браузера, setTimeout(..., 0), макрозадачи.
  • Promise, их преимущества перед колбэками.
  • Чейнинг (создание цепочек) Promise.
  • Промисификация функций.
  • Микрозадачи и макрозадачи.
  • Async/Await
  • Обработка ошибок.
  • Fetch API, запросы на сервер (основы).

Взаимодействие с сервером

Формы, Fetch для POST-запросов:

  • Создание и отправка форм, динамические формы, валидация.
  • DOM-свойства и методы для форм.
  • POST-запросы на сервер, кодировка, обмен данными в формате JSON.
  • Загрузка изображений.

Тестирование JavaScript-приложений.

Вы много раз видели написанные нами тесты в предыдущих занятиях. Теперь у вас достаточно знаний, чтобы писать их самостоятельно.

  • TDD/BDD-разработка.
  • Виды тестирования: юнит-тестирование, интеграционное и E2E-тестирование.
  • Jasmine/Jest API. "Спаи" (spy), "моки" (mock) и "стабы" (stub).
  • Инструменты для E2E-тестирования: puppeteer, cypress.

Одностраничные веб-приложения, роутинг.

Создание SPA-приложений, которые работают без перезагрузки страницы.

  • History API в браузере.
  • Динамическая подгрузка модулей.
  • Архитектура: роутер для перехода по страницам.

Сборка проекта с помощью Webpack.

Ранее мы делали различные компоненты для проекта. Теперь соберём их вместе и подготовим к публикации на "боевом" сервере.

Пожалуй, самым мощным и гибким средством сборки является Webpack.

  • Конфигурация Webpack, примеры сборки.
  • Лоадеры, подключение и сборка CSS.
  • Важные плагины: HtmlWebpackPlugin, DefinePlugin, CopyWebpackPlugin и ряд других.
  • Полифилы для работы сборки в старых браузерах.

Дополнительные темы, ответы на вопросы.

Вопросы по темам, которые не вошли в основную программу курса.

Фреймворки: React, Angular, другие, куда двигаться дальше.

Курсовой проект

Админка товаров для магазина.

  • Одностраничное приложение: роутинг, динамическая подгрузка страниц.
  • Сортируемая таблица товаров с подгрузкой и без подгрузки.
  • Редактирование, сохранение товаров.
  • Слайдер, drag'n'drop-сортировка картинок и категорий.
  • Ряд других графических компонент.
  • Современная компонентная архитектура.

Предварительные требования

  • Знакомство с HTML/CSS: верстать макеты не понадобится, но основные теги, позиционирование, margin/padding надо знать.
  • Опыт на языке с использованием ООП от 1 года (не только HTML/CSS) или пройденный курс JavaScript для новичков.
  • Интернет 256кб/с или быстрее для видео.

Опыт требуется не просто так: ряд продвинутых приёмов проектирования имеет смысл изучать, когда программирование само по себе давно знакомо. Кроме того, зная, что у вас уже есть опыт в программировании, мы можем сосредоточиться именно на особенностях JavaScript и, тем самым, успеть больше.

Преподаватель

Photo
Владимир ШевчукВедёт курс с 30 января 2020

Разработкой занимаюсь с 2010 года, на JS пишу с 2012 года. За это время успел поработать на разных проектах от небольших стартапов до крупных банковских платформ.

Исполнял обязанности тимлида, competency manager-а в компании Eleks (отвечал за развитие компетенции фронтенд направления) и CTO в Global Tech Makers.

С 2016 года активно занимаюсь преподаванием, веду оффлайн тренинги внутри компаний, организовываю менторские программы.

Люблю “чистый” хорошо читабельный код, часто сравниваю код с литературой.

Что говорят о курсе участники

Мы занимаемся обучением с 2007 года. За это время у нас обучились тысячи разработчиков из разных стран и компаний.

Все отзывы являются честными. Мы не модерируем их.

Эти отзывы пока относятся к предыдущей версии курса, до разделения программы на "для новичков" и "для программистов".

Гарантия

  • Если объяснения будут вам непонятны
  • Если курсы не дадут вам новых знаний и умений
  • Если вы не сможете подключиться к системе онлайн-обучения

…то вы сможете получить деньги назад.

Для этого достаточно не позже окончания первой недели курса написать, указав причину из этого списка и что именно вас не устраивает, и тогда ваше участие будет прекращено, а вы получите деньги обратно.

Для компаний

У нас большой опыт работы с самыми разными компаниями: как маленькими, так и IT-гигантами (Яндекс, Мейл.ру и другие).

  • При записи нужно выбрать способ оплаты "счёт на компанию", и документы будут автоматически сгенерированы: договор, акт и счёт.
  • Для зарубежных компаний выдаём инвойс на английском языке.
  • Физическим лицам даём справку об оплате, если нужна компании для компенсации расходов.
  • Сведения о нас (для бухгалтерии): скачать архив с документами.

Комментарии

перед тем как писать…
  • Если вам кажется, что в статье что-то не так - вместо комментария напишите на GitHub.
  • Для одной строки кода используйте тег <code>, для нескольких строк кода — тег <pre>, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)
  • Если что-то непонятно в статье — пишите, что именно и с какого места.