Как изучить JavaScript с нуля

Где писать и запускать код#

Самый быстрый способ — консоль в инструментах разработчика браузера: F12,
вкладка Console. Для файлов понадобится редактор кода и страница, к
которой подключён скрипт:

<script src="app.js" defer></script>

Установи Node.js — он пригодится, чтобы запускать JavaScript вне браузера
(node app.js), ставить пакеты через npm и запускать тесты. Сразу
заведи Git-репозиторий под учебные упражнения.

Этап 1: язык (4–5 недель)#

Объявление переменных через let и const (старый var оставь для
чтения чужого кода), типы данных, строки и шаблонные строки, условия,
циклы, функции — объявления, стрелочные функции, параметры по умолчанию.
Затем массивы и их методы (map, filter, reduce, find), объекты,
деструктуризация, spread.

Отдельно разбери места, где JavaScript ведёт себя неожиданно:

console.log("5" + 3);        // "53" — сложение со строкой склеивает
console.log("5" - 3);        // 2 — вычитание приводит к числу
console.log(0.1 + 0.2 === 0.3); // false — погрешность чисел с плавающей точкой
console.log(typeof null);    // "object" — историческая особенность языка

Правило на каждый день: сравнивай через строгое ===, а не ==.

Этап 2: страница и события (3–4 недели)#

DOM — дерево элементов страницы, с которым работает скрипт. Поиск
элементов (querySelector), изменение текста и классов, создание новых
элементов, обработчики событий (addEventListener) для кликов, ввода и
отправки форм. Упражнения: счётчик кликов, переключатель тёмной темы,
список дел с добавлением и удалением пунктов, сохранение списка в
localStorage.

Этап 3: асинхронность и сеть (3 недели)#

Цикл событий, колбэки, промисы, async/await, обработка ошибок через
try/catch. Запросы к серверу через fetch и разбор JSON. Практика —
приложение погоды или поиска фильмов на открытом API с индикатором
загрузки и сообщением об ошибке, если сеть недоступна.

Этап 4: инструменты и следующий шаг#

Модули import/export, пакеты из npm, сборщик (например, Vite),
линтер ESLint, форматирование Prettier. Тесты — Vitest или Jest: начни с
чистых функций, которые получают данные и возвращают результат без
обращения к странице. После этого можно выбирать фреймворк — React, Vue или
Svelte — либо уходить в серверную разработку на Node.js. Браться за
фреймворк до уверенного владения самим языком — частая причина того, что
код «работает, но непонятно почему».

Проекты для портфолио#

• список дел с фильтрами «все / активные / выполненные» и сохранением;
• викторина с таймером, подсчётом очков и таблицей результатов;
• приложение на открытом API с поиском и постраничной загрузкой;
• небольшая игра на <canvas> — змейка или арканоид.

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

Самопроверка#

• Предскажи результат фрагмента кода до запуска, потом проверь в
  консоли. Ошибки предсказаний — список тем для повторения.
• Пиши тесты к функциям обработки данных и держи их зелёными.
• Включи ESLint и разбирайся с каждым замечанием.
• Открой свой проект с медленным интернетом (вкладка Network позволяет
  его сымитировать) и проверь, что пользователь видит понятные
  сообщения.

План по этапам

1. Неделя 1 — окружениеКонсоль браузера, редактор, Node.js, репозиторий для упражнений.
2. Недели 2–6 — языкПеременные, функции, массивы и объекты, методы массивов, приведение типов.
3. Недели 7–10 — DOM и событияИзменение страницы, обработчики, формы, localStorage; список дел.
4. Недели 11–13 — асинхронностьПромисы, async/await, fetch, приложение на открытом API.
5. Недели 14–16 — инструменты и тестыМодули, npm, сборщик, ESLint, тесты; выбор фреймворка или Node.js.

Проверь себя

Источники

• Современный учебник JavaScriptБесплатный подробный учебник на русском с задачами
  бесплатно
• MDN Web DocsСправочник по языку, DOM и браузерным API
  бесплатно
• Node.jsСреда выполнения JavaScript вне браузера и её документация
  бесплатно

Было полезно?

Да Нет