Все курсы

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

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

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

Цели курса

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

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

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

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

За неделю до курса мы попросим вас посмотреть вводные материалы по основам 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
Константин АлександровВедёт курс с 14 января 2020

Увлекаюсь программированием с 13 лет. Коммерческим программированием занимаюсь с 2009г. Работал ведущим разработчиком и арихитектором программного обеспечения в таких компаниях как Сравни.ру, Тензор (CБИС).

Опыт преподавания почти 10 лет (с 2014г оффлайн, с 2019 года – на этом сайте).

Photo
Влад ТарасовВедёт курс с 14 декабря 2020

Занимаюсь фронтенд-разработкой с 2017 года.

Работал в Mail.ru над такими проектами как Почта, Календарь, Задачи. Сейчас работаю в Яндексе.

Иногда делаю доклады. Также активно занимаюсь обучением стажеров/команд студентов в Яндекс.

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

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

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

Курс регулярно обновляется. Все отзывы относятся к последней версии курса.

Гарантия

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

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

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

Для компаний

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

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

Физическим лицам даём справку об оплате, если нужна компании для компенсации расходов и документы для налогового вычета: детали для РФ.

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

Комментарии

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