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

Первый месяц: язык

Переменные и типы. Числа, строки, логические значения, а также два особых значения для «ничего» — их различие спрашивают на собеседованиях.

Приведение типов. Тема, которая у новичков вызывает боль: язык умеет молча превращать одно в другое. Разберитесь, чем строгое сравнение отличается от нестрогого, и всегда используйте строгое.

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

Функции. Обычные и стрелочные, разница в поведении, аргументы по умолчанию, функции как значения.

Условия и циклы. Плюс короткие формы записи, которые встречаются в любом чужом коде.

Второй месяц: браузер

Работа с деревом документа. Найти элемент, изменить содержимое, добавить и удалить узел, поменять оформление.

События. Нажатия, ввод, отправка формы. Понимание, как событие всплывает от вложенного элемента к родителю.

Формы и проверка введённого. Одна из самых частых задач в реальной работе.

Хранилища в браузере. Как сохранить данные между заходами.

Третий месяц: связь с сервером

Запросы. Отправить запрос, получить ответ, разобрать данные, обработать ошибку.

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

Формат обмена данными. Как превратить объект в строку и обратно.

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

Что можно отложить

• Классы и наследование. В современном коде используются реже, чем кажется.
• Тонкости работы с контекстом вызова. Знать о существовании достаточно.
• Сборщики и их настройку. Сначала научитесь писать, потом настраивать сборку.
• Фреймворки. Только после того, как язык освоен: иначе вы будете знать фреймворк, но не язык.

На чём застревают

Асинхронность. Первое место с большим отрывом. Код выполняется не в том порядке, в каком написан, и это ломает картину мира.

Ключевое слово для текущего объекта. Его значение зависит от способа вызова, а не от места объявления. Разбирается один раз и запоминается навсегда.

Приведение типов. Сравнения выдают неожиданные результаты. Лечится привычкой к строгому сравнению.

Перебор с изменением исходного массива. Классический источник загадочных ошибок.

Проверка себя

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

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