Меню
Що нового?
Від:
Фільтри

Придбаний [HTML Academy] JavaScript. Профессиональная разработка веб-интерфейсов [3 октября — 4 декабря 2023]

Інформація про покупку
Тип покупки: Складчина
Ціна: 17267 ГРН
Учасників: 0 з 12
Організатор: Відсутній
Статус: Набір учасників
Внесок: 1496.5 ГРН
0%
Основний список
Резервний список
G

Gadzhi

Модератор
  • .
Натисніть, щоби розкрити...
[HTML Academy] JavaScript. Профессиональная разработка веб-интерфейсов [3 октября — 4 декабря 2023]


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

Раздел 1
Знакомство c JavaScript
Рассмотрим схему работы на курсе, какие инструменты понадобятся, и как их настроить. Разберём, что представляет собой язык JavaScript, причём здесь спецификация ECMAScript и браузер.

Как проходит курс. Организационные вопросы.

  • Схема работы на курсе.
  • Обзор проектов.
  • Критерии качества.
Язык JavaScript

  • Спецификация ECMAScript.
  • Что даёт JavaScript'у браузер.
Основы JavaScript.

  • Базовый синтаксис: круглые и фигурные скобки, операторы, зарезервированные слова, комментарии.
  • Основные строительные блоки — переменные и функции.
  • Примитивы и сложные типы данных.
Рабочие инструменты.

  • Редакторы кода.
  • Линтеры.
  • Сервер для разработки.
Практика

  • Настройка рабочих инструментов.
  • Создание репозитория, форк, клонирование.
  • Создание ветки, коммита, синхронизация репозиториев.
  • Создание пулреквеста на Гитхабе.
  • Тренажёры.
Раздел 2
Основные возможности JavaScript
Начнём изучать основные конструкции JavaScript, особенно пристально — функции. Разберём нюансы объявления переменных. Познакомимся с инструментами разработчика.

Переменные.

  • Области видимости.
Условные операторы.

  • Тернарный оператор.
  • Оператор множественного выбора switch.
Циклы.

Приведение типов.

Функции.

  • Стрелочные функции.
  • Параметры функций по умолчанию.
rest-параметры.

Подвешивание (hoisting) переменных и функций.

Знакомство с DevTools (инструментами разработчика).


Практика

  • Работа с техзаданием: превращение требований в код.
  • Написание вспомогательных функций.
  • Тренажёры.
Раздел 3
Объекты и массивы
Раздел без лайва

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

Сложные типы данных.

Массивы.

  • Основные методы массивов.
Объекты.

Колбэки (функции обратного вызова).


Практика

  • Тренажёры.
Раздел 4
Встроенные объекты и функции
Рассмотрим существующие в самом языке JavaScript объекты и функции. Затронем контекст выполнения this. Запустим и отладим код в консоли инструментов разработчика.

Деструктуризация.

spread-синтаксис.

Встроенные объекты и их методы.

  • String.
  • Number.
  • Boolean.
  • Date.
  • Math.
Оператор new.

Встроенные в JavaScript функции.

Контекст функций.

  • Ключевое слово this.
  • Потеря окружения.
DevTools. Использование Console (консоли).


Практика

  • Разработка структур данных проекта.
  • Генерация временных данных для разработки проекта.
Раздел 5
Организация кода
Разберём понятие областей видимости. Обсудим принцип DRY (не повторяйся) и как им пользоваться для того, чтобы писать меньше кода, и при этом делать больше. Узнаем, что такое модули и как «бить» код на них; что такое точка входа.

Области видимости.

  • Глобальная область видимости window.
  • Замыкания.
Модульность.

  • Повторное использование кода, принцип DRY.
  • Понятие модуля.
  • Точка входа.
  • Модули ECMAScript, синтаксис import и export.
DevTools: отладка кода с помощью Sources (исходников).


Практика

  • Разделение кода на модули.
  • Соблюдение принципа DRY и выделение повторяющихся частей кода в функции.
  • Перенос функций, повторяющихся в разных файлах, в отдельные модули.
Раздел 6
DOM и события
Раздел без лайва

Вы самостоятельно познакомитесь с объектной моделью документа (англ. Document Object Model или DOM). Рассмотрите, как описывать реакции на действия пользователя: ввод текста, нажатие на определённые элементы, прокрутку и прочее.

DOM-дерево.

  • document — корень всего.
  • Структура DOM-дерева.
  • Поиск элементов на странице.
  • Управление атрибутами элементов.
Шаблоны и данные.

События на странице.

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

  • Тренажёры.
Раздел 7
Манипуляции с DOM
Попробуем создавать, удалять, перемещать и управлять DOM-элементами. С помощью шаблонов отрисуем данные, созданные ранее.

Управление DOM-деревом.

  • Управление атрибутами DOM-элементов.
  • Перемещение элементов в DOM-дереве.
Подходы к созданию DOM-элементов.

  • Создание DOM-объектов.
  • Управление разметкой: append, prepend, insertAdjacentHTML, innerHTML, textContent.
Шаблонизация.

  • Строковая шаблонизация (шаблонные строки).
  • Специальный тег <template>.
Практика

  • Генерация DOM-элементов по шаблону и наполнение их данными.
  • Тренажёры.
Раздел 8
Работа с событиями
Обработаем взаимодействие с пользователем, чтобы страница реагировала на ввод текста в формы, нажатие на определённые элементы, прокрутку и прочее. Рассмотрим, как сделать это взаимодействие доступным.

События.

  • Объект Event, управление событиями: preventDefault и stopPropagation.
  • Фазы событий и делегирование.
  • Клавиатурные события и доступность.
Event Loop.

Валидация форм.

  • Pristine — библиотека для валидации форм.
Валидация с помощью регулярных выражений.

DevTools: возможности Elements (инспектора) для работы с DOM и событиями.


Практика

  • Обработка пользовательской реакции.
  • Работа с доступностью.
  • Валидация форм.
  • Тренажёры.
Раздел 9
Внешние API и сторонние библиотеки
Рассмотрим, как не «писать свой велосипед», а переиспользовать чужой опыт и код. Познакомимся с понятием программного интерфейса (англ. Application Programming Interface или API), рассмотрим API сторонних JavaScript-библиотек и JavaScript API картографических сервисов. Кратко рассмотрим API, которые предоставляет разработчикам браузер.

Понятие API.

Картографические сервисы и их JavaScript API.

  • OpenStreetMap.
  • Leaflet.
Сторонние библиотеки.

  • Зачем нужны библиотеки.
  • Как подключить в проект.
  • noUiSlider.
Обзор API браузера.


Практика

  • Использование в проекте API карт.
  • Подключение в проект сторонних библиотек.
Раздел 10
Сеть
Раздел без лайва

Вы самостоятельно рассмотрите протокол HTTP, формат данных JSON. Рассмотрите, как меняется взаимодействие пользователя с сайтом при работе с сетью, что может пойти не так.

Протокол HTTP и форматы данных.

  • JSON.
Обработка исключений.

  • try...catch.
Инструменты для работы с сетевыми запросами.

Раздел 11
Асинхронность. Работа с сетью
Разберём понятие асинхронности и способы её достижения с помощью промисов (англ. Promise, обещание). Познакомимся с технологиями, которые позволяют делать запросы к серверу из браузера. Рассмотрим, как на практике обработать ошибки при работе с сетью, если что-то пошло не так.

Асинхронность.

  • setTimeout и setInterval.
  • Promise.
Работа с сетью.

  • fetch для обращения к серверу.
  • Обработка ошибок в запросах.
DevTools: работа с сетевыми запросами в Network (сети).


Практика

  • Загрузка данных для шаблонов из интернета.
  • Добавление реакции на ошибки загрузки.
Раздел 12
Обратная связь и оптимизация
Оптимизируем работу с данными и событиями на нашем сайте. Реализуем понятную и приятную пользователю обратную связь интерфейса.

Продвинутая работа с массивами.

  • Сортировка.
  • Фильтрация.
Оптимизации производительности.

  • Пропуск кадров — тротлинг (throttle).
  • Устранение дребезга — дебаунс (debounce).
File API.

  • URL.createObjectURL().
  • FileReader.
Предлагаю всем дружно выкупить и пройти три курса по JavaScript. В самом курсе довольно много мелких и приятных обновлений в структуре.
Цена курса будет изменятся от 25 900 до 30 900 по мере старта потока.
Нажмите, чтобы раскрыть...
Натисніть, щоби розкрити...
Сайт: https://htmlacademy.ru/intensive/javascript
 
Увійдіть або зареєструйтеся для відповіді.
Угорі