Все курсы

Курс "JavaScript/​DOM/​Интерфейсы" для новичков

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

JavaScript/DOM/Интерфейсы для новичков

Цели курса

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

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

Курс идёт около 1 месяца.

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

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

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

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

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

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

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

Чат

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

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

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

Результат

Разработчик на JavaScript начального-среднего уровня ("junior+").

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

Вы можете разобраться в чужом коде.

Вы готовы к освоению фреймворков (React, Vue и других), а также Node.js для серверного JavaScript.

Сертификат

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

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

img

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

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

Собрание

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

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

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

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

Объекты

Объекты являются основной структурой данных в JavaScript, поэтому изучаем их подробно.

  • Основные действия с объектами: запись и чтение свойств, перебор.
  • Особенности объектов в JavaScript: передача по ссылке, копирование объектов.
  • Методы объектов, использование this.
  • Деструктуризация объектов и массивов.

Массивы и Функции

Способы задания функций в JavaScript: Function Expression, Function Declaration, функции-стрелки, их отличия.

Замыкания, функции-колбэки и методы массивов, которые их используют, сортировка, поиск.

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

DOM-модель

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

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

  • Создание, вставка, изменение элементов на странице.
  • Атрибуты, свойства, управление классами.
  • Простые задачи по генерации компонентов интерфейса.
  • DOM и инструменты разработчика в браузере.
  • Динамическая генерация элементов интерфейса.

Обработчики событий

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

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

Каникулы

Отдых, повторение, следующее занятие - через неделю.

Компонентная архитектура, ООП

Современный подход к разработке приложений: создание интерфейсных компонентов, использование своих событий (Custom Events) для связи между ними. Архитектура веб-приложения.

Классы, ООП в JavaScript.

Модули в JavaScript.

На дом - компоненты для проекта: карточка товара, карусель с картинками.

Более сложные компоненты

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

  • Drag'n'drop при помощи событий, компонент "слайдер" для проекта.
  • Обработка пользовательского ввода, события клавиатуры.
  • Компоненты "модальное окно", "ленточное меню".

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

Начинаем это занятие с обычных HTTP-форм, затем переходим к динамическим сетевым запросам.

  • Создание и отправка форм, динамические формы, их валидация.
  • DOM-свойства и методы для форм. Чтение данных из формы.
  • Метод fetch и, основы Promise для сетевых запросов.
  • Обмен данными с сервером в формате JSON.

Promise в деталях, более сложный асинхронный код

Для организации последовательных сетевых запросов или других асинхронных вызовов используются специальные объекты Promise. Изучаем, как с ними работать.

  • Событийный цикл браузера.
  • Объектов Promise в деталях, их методы, цепочки Promise.
  • Промисификация функций.
  • Синтаксис async/await.

Сборка проекта, фреймворки.

На этом занятии мы собираем воедино проект, компоненты которого создавали в предыдущих занятиях.

  • Серверный JavaScript: основы Node.js
  • Сборка проекта при помощи Webpack.

Основные JavaScript фреймворки: как устроены, куда двигаться дальше, что изучать, откуда брать информацию.

Ответы на дополнительные вопросы.

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

Ресторан с онлайн-заказом "Bangkok Express".

  • Сверху карусель с товарами, ниже ленточное меню, слайдер, далее подгрузка товаров с сервера, динамическая фильтрация списка товаров.
  • А также корзина товаров с динамическим позиционированием при прокрутке, анимацией, модальным окном и формой заказа.
  • Компонентная архитектура позволяет легко расширять ресторан, усложнять интерфейс и структуру.

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

  • Знакомство с HTML/CSS: верстать макеты не понадобится, но основные теги, позиционирование, margin/padding надо знать.
  • Интернет 256кб/с или быстрее для видео.

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

Photo
Илья БурлакВедёт курс с 21 мая 2019

В разработке около 10 лет, последние 6 лет разрабатываю только web-приложения на Javascript.

Долгое время работал в компании Mail.Ru, на позиции Frontend Team Leader. После этого работал руководителем команды на проекте JivoSite, сейчас занимаю должность техлида в компании Qlean.ru.

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

Photo
Станислав ДолгачёвВедёт курс с 22 июля 2019

Живу фронтенд-разработкой c 2014 года. За это время прошёл путь от начинающего до ведущего разработчика в компании EPAM.

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

Photo
Константин АлександровВедёт курс с 14 января 2020

Увлекаюсь программированием с 13 лет. Коммерческим программированием занимаюсь с 2009г. Основной язык – JavaScript. Очень нравится писать на нём хотя знаю и несколько других языков. Разнообразие применения JavaScript просто поражает. Зная его можно создать web-приложение, desktop и даже мобильное приложение!

Сейчас работаю архитектором программного обеспечения для медицинской системы, на клиенте используем Polymer, а на сервере Node.js.

Также с 2014г преподаю курсы по web-разработке в Новосибирске, с 2019 года – на этом сайте.

Гарантия

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

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

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

Для компаний

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

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

Подписаться на уведомления по курсу

Набор на этот курс открывается каждые 2-3 недели. Вы можете запросить уведомление:

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

Комментарии

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