Все курсы

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

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

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

Цели курса

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

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

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

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

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

Курс идёт примерно 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-сортировка картинок и категорий.
  • Ряд других графических компонент.
  • Современная компонентная архитектура.

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

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

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

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

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

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

Photo
Дмитрий РагозинВедёт курс с 18 апреля 2022

Занимаюсь разработкой с 2006 года. Начинал с fullstack разработки, с 2017 разрабатываю в основном Frontend.

Ранее работал в Tinkoff над созданием CRM. В настоящее время работаю руководителем группы разработчиков в Яндексе.

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

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

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

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

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

Гарантия

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

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

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

Для компаний

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

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

Если остались вопросы – посмотрите в часто задаваемых, напишите в комментариях внизу этой страницы или на почту help@javascript.ru (ответ обычно в течение дня), а если срочно — задайте по телефону +7-903-5419441.

Комментарии

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