[htmlacademy] Интенсивный онлайн‑курс: Профессиональный JavaScript. Уровень 1. (14-й поток)

  • Автор темы I AM
  • 1317
  • Обновлено
  • 25, Aug 2018
  • #1
htmlacademy Интенсивный онлайн‑курс: Профессиональный JavaScript. Уровень 1. (14-й поток)



Описание: Курс рассчитан на людей без навыков программирования. Для прохождения понадобятся навыки вёрстки, которые можно получить пройдя интерактивные курсы или интенсив «Профессиональный HTML и CSS, уровень 1».
Программа обучения:
Знакомство.
Рассмотрим схему работы на интенсиве, какие инструменты понадобятся. Начнём разбирать основы JavaScript:
Организационные вопросы:
  • Обзор проектов.
  • Схема работы на интенсиве.
  • Введение в программирование:
  • Программирование и алгоритмы.
  • Данные.
  • Линейные алгоритмы.
  • Ветвящиеся алгоритмы.


Основы JavaScript:
  • Типы данных.
  • Операторы.
  • Приведение типов.
  • Переменные.
  • Функции.
  • Условные операторы.


Встроенные API. Разбираемся со сложными типами данных: массивы и объекты, циклические алгоритмы, а также посмотрим на встроенные в JavaScript объекты для работы с окном браузера,открытой страницей, DOM-элементами и графикой:
Отладка кода.
Сложные типы данных:
  • Циклические алгоритмы.
  • Массивы.
  • Объекты.


Встроенные объекты:
  • document, элемент для работы c DOM-деревом.
  • canvas, элемент для работы c программируемой графикой.


DOM. Пробуем создавать, удалять, перемещать и управлять DOM-элементами. Опишем данные, которые будем отображать на странице, а затем, с помощью шаблонов отрисуем их:
Управление DOM-деревом:
  • DOM-дерево: структура.
  • Поиск элементов на странице.
  • Управление атрибутами DOM-элементов.
  • Перемещение элементов в DOM-дереве.


Подходы к созданию DOM-элементов:
  • Управление разметкой: insertAdjacentHTML, innerHTML, textContent.
  • Создание DOM-объектов.


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


Обработка событий. Рассмотрим динамическое взаимодействие с пользователем: как сделать так, чтобы страница начала реагировать на ввод текста в формы, нажатие на определённые элементы, прокрутки и прочее. Заодно попробуем сделать страницу более доступной: как добавить правильную работу с клавиатурой и зачем это нужно:
Асинхронность, Event Loop.
События:
  • Обработчики событий.
  • Объект Event, управление событиями.
  • Фазы событий и делегирование.
  • Клавиатурные события и доступность.
  • Валидация форм.


Модули. Обсудим принцип DRY (не повторяйся) и как им пользоваться для того, чтобы писать меньше кода, но при этом делать больше:
Перетаскивание:
  • Изменение координат элементов на странице.
  • Drag and Drop.
  • Области видимости функций:
  • Области видимости.
  • Глобальная область видимости.
  • Замыкания.
  • Потеря окружения.


Модульность:
  • Повторное использование кода, принцип DRY.
  • Функции как модули.
  • Понятие модуля, виды модулей.
  • Инкапсуляция.
  • Немедленно выполняющиеся функции (IIFE).


Работа с сетью. Взглянем на протокол HTTP и инструменты, которые позволяют делать запросы из браузера. Рассмотрим, как меняется взаимодействие пользователя с сайтом при начале работы с сетью, что может пойти не так и что с этим делать:
  • Исключения.
  • Оператор множественного выбора switch.
  • Протокол HTTP и форматы данных:
  • XML.
  • JSON.
  • JSONP.
  • Объект XMLHttpRequest.
  • Обработка ошибок в запросах.


Структуры данных. Разберём непопулярную среди фронтенд-разработчиков тему структур данных. Что такое данные, почему у них есть структура, и на доступных примерах посмотрим, как использование структур данных может облегчить разработчику жизнь:
Контекст функций:
  • Ключевое слово this.
  • Изменение контекста.


Продвинутая работа с массивами:
  • Управление массивами: вставка и удаление элементов.
  • Выборки из массива: slice и filter.
  • Сортировка.
  • Итераторы по массивам.
  • Свёртка массивов: some, every и reduce.


Оптимизации производительности:
  • Оценка эффективности алгоритмов.
  • Пропуск кадров — тротлинг (throttle).
  • Устранение дребезга — дебаунс (debounce).


Компонентный подход. Разберём продвинутую работу с объектами, узнаем как можно удобным способом создавать большое количество одинаковых объектов и зачем это нужно:
Типизированные объекты:
  • Функции-конструкторы.
  • Прототипы.
  • Цепочки прототипов, наследование.
  • Полиморфизм, переопределение методов.


Рефакторинг.
Узкие места в JavaScript. Посмотрим на особенности JavaScript, которые лучше не забывать учитывать при разработке. Заодно взглянем на дополнительные полезные техники, не разобранные на интенсиве:
  • Необязательные точки с запятой.
  • Подвешивание (hoisting) переменных и функций.
  • Продвинутые техники программирования.
  • Регулярные выражения.
  • Минификация кода.


Финал. Подводим итоги интенсива. Что делать дальше.
Скачать: Скрытая информация :: Авторизуйтесь для просмотра »

I AM


Рег
23 Jul, 2011

Тем
49554

Постов
57426

Баллов
552966
Тем
49554
Комментарии
57426
Опыт
552966