Учебник JavaScript с практикой: маршрут для самостоятельного обучения

Хороший учебник JavaScript с практикой должен вести не просто по темам, а по повторяемому циклу: прочитать короткий блок, запустить пример, изменить данные, решить маленькую задачу и собрать мини-проект. Если только читать объяснения, JavaScript быстро кажется понятным, но код не пишется самостоятельно

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

По этой теме полезно отдельно посмотреть Идеи приложений на JavaScript для портфолио, чтобы расширить контекст и сравнить подходы

По этой теме полезно отдельно посмотреть Вопросы JavaScript на собеседовании, чтобы расширить контекст и сравнить подходы

Этап 1. Синтаксис и переменные

Начните с переменных, строк, чисел, булевых значений и вывода результата

const name = 'Анна';
const hours = 5;
const message = `${name} учит JavaScript ${hours} часов в неделю`;

console.log(message);

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

Этап 2. Условия

Условия нужны для решений: показывать ошибку, разрешать действие, выбирать сообщение

const age = 17;

if (age >= 18) {
  console.log('Доступ открыт');
} else {
  console.log('Доступ ограничен');
}

Практика: сделайте проверку скидки, проверки пароля и проверки пустого поля формы

Этап 3. Массивы и перебор

Массивы появляются почти везде: список задач, товаров, комментариев, пользователей, карточек

const tasks = ['HTML', 'CSS', 'JavaScript'];

tasks.forEach((task, index) => {
  console.log(`${index + 1}. ${task}`);
});

Практика: выведите только длинные задачи, найдите задачу по тексту, добавьте новую задачу в массив

Этап 4. Объекты

Объекты описывают сущности с несколькими полями

const product = {
  title: 'Клавиатура',
  price: 2500,
  inStock: true,
};

console.log(`${product.title}: ${product.price} ₽`);

Практика: создайте массив товаров, посчитайте общую стоимость, отфильтруйте товары дешевле 3000 и покажите только те, что есть в наличии

Этап 5. Функции

Функции помогают не копировать одну и ту же логику

function formatPrice(price) {
  return new Intl.NumberFormat('ru-RU').format(price) + ' ₽';
}

console.log(formatPrice(1490));

Практика: напишите функции getTotal, filterActiveTasks, isEmailValid, capitalizeName. Для каждой функции сделайте минимум три вызова с разными данными

Этап 6. DOM

DOM связывает JavaScript со страницей

<input id="name" placeholder="Ваше имя">
<button id="hello">Поздороваться</button>
<p id="result"></p>

const input = document.querySelector('#name');
const button = document.querySelector('#hello');
const result = document.querySelector('#result');

button.addEventListener('click', () => {
  const name = input.value.trim();
  result.textContent = name ? `Привет, ${name}` : 'Введите имя';
});

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

Этап 7. События

События — это клики, ввод текста, отправка формы, переключение фильтра

const search = document.querySelector('#search');

search.addEventListener('input', () => {
  console.log(search.value);
});

Практика: сделайте живой поиск по списку товаров. Пользователь печатает текст, а список сразу сокращается

Этап 8. Мини-проект

После базовых тем соберите todo-list. Это лучший учебный проект для связки DOM, массивов, объектов и событий

Функции первой версии:

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

Не берите фреймворк до этого этапа. Сначала нужно почувствовать обычный JavaScript

Как заниматься по учебнику

Один учебный блок должен заканчиваться действием. Пример ритма на 60-90 минут:

1. 10 минут повторить прошлый код
2. 20 минут прочитать новую тему
3. 25 минут повторить пример руками
4. 20 минут решить похожую задачу без подсказки
5. 10 минут записать ошибку и следующий шаг

Если вы не можете объяснить код своими словами, не переходите дальше. JavaScript накапливается слоями: слабые функции потом мешают DOM, слабые массивы мешают фильтрам, слабые объекты мешают работе с данными

Как понять, что пора идти дальше

Переходите к следующей теме, когда можете сделать три вещи: написать пример без копирования, изменить входные данные и объяснить ошибку, если код сломался. Если тема понятна только рядом с открытым ответом, дайте себе еще один день практики

Частые ошибки самообучения

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

Вторая ошибка — смотреть видео без собственного кода. Видео создает ощущение понимания, но навык появляется только после запуска и ошибки

Третья ошибка — слишком рано идти в React. Если обычный список задач на чистом JavaScript пока не получается, фреймворк добавит еще один слой сложности

Четвертая ошибка — не хранить свои решения. Сохраняйте папку с упражнениями: через месяц она покажет прогресс лучше любых ощущений

Практика после каждого раздела

После каждого раздела делайте маленькую задачу, которая похожа на реальный интерфейс

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

Контрольный мини-проект

Соберите каталог книг. В данных должны быть название, цена и жанр. На странице сделайте поиск и фильтр по жанру

const books = [
  { title: 'JavaScript basics', price: 900, genre: 'programming' },
  { title: 'HTML guide', price: 700, genre: 'layout' },
  { title: 'DOM practice', price: 1100, genre: 'programming' },
];

function findBooks(query) {
  return books.filter((book) => book.title.toLowerCase().includes(query.toLowerCase()));
}

console.log(findBooks('dom'));

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

Как вести заметки

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

Как проверять себя без преподавателя

После каждого мини-проекта сделайте контрольный повтор через день. Закройте старый код и восстановите решение по памяти: сначала HTML-разметку, потом данные, потом функции, потом обработчики событий. Если приходится постоянно смотреть в прошлый файл, тема еще не закрепилась

Хороший признак прогресса — вы можете не только повторить старую задачу, но и слегка изменить ее: вместо списка книг сделать список задач, вместо поиска по названию — фильтр по статусу, вместо вывода в консоль — карточки на странице