JavaScript для начинающих: практические задачи для тренировки

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

Почему практика важнее перечитывания теории

Когда вы читаете чужой код, мозг соглашается: «всё логично, я понял». Но стоит сесть за пустой файл — и оказывается, что вы не помните ни как объявить функцию, ни как получить элемент со страницы. Это нормально и случается со всеми.

Навык формируется только в момент, когда вы сами формулируете задачу, пробуете решение, получаете ошибку и исправляете её. Поэтому правило простое: на каждые 20 минут теории — минимум час практики. Задачи ниже идут от простого к сложному, так что двигайтесь по порядку.

Правила тренировки, которые экономят время

• Решайте каждый день по чуть-чуть. Тридцать минут ежедневно дают больше, чем пять часов раз в неделю.
• Не подсматривайте решение сразу. Дайте себе 15–20 минут на попытки, даже если они неудачные.
• Проверяйте результат в консоли. Метод console.log — ваш главный инструмент на старте.
• Усложняйте сами. Если задача далась легко, добавьте условие: проверку на пустой ввод, обработку ошибок, вывод на страницу.
• Сохраняйте решения. Папка с маленькими файлами через месяц превратится в личную шпаргалку.

Задачи для старта: переменные, числа, строки

Эти задания не требуют вёрстки и работы с браузером — только консоль. Их цель — привыкнуть к синтаксису и логике вычислений.

Калькулятор скидки

Задайте цену товара и размер скидки в процентах. Выведите итоговую стоимость и сумму экономии. Усложнение: если скидка больше 50%, добавьте пометку «горячее предложение», а если цена меньше 1000 — сообщение о том, что скидка не применяется.

Конвертер температуры

Напишите функцию, которая переводит градусы Цельсия в Фаренгейты и обратно. Проверьте её на нескольких значениях, включая отрицательные. Здесь вы впервые столкнётесь с тем, что функция должна возвращать значение, а не просто выводить его в консоль.

Форматирование имени

Пользователь вводит имя как попало: строчными буквами, с лишними пробелами. Сделайте так, чтобы на выходе получалось аккуратное «Иван Петров» — с заглавных букв и без двойных пробелов.

Массивы и объекты: учимся перебирать данные

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

Список покупок

Создайте массив из 5–7 товаров. Выведите их нумерованным списком, посчитайте общее количество позиций и найдите самый длинный по названию товар.

Фильтр товаров по цене

Сделайте массив объектов с полями «название», «цена», «категория». Выведите только товары дешевле заданной суммы, отсортируйте их по возрастанию цены и посчитайте общую стоимость корзины. Попробуйте решить через метод filter, а потом через обычный цикл — и сравните, какой вариант читается лучше.

DOM: связываем JavaScript с вёрсткой

Вот здесь начинается настоящая веб-разработка. Создайте простую HTML-страницу и постепенно добавляйте к ней поведение.

Кнопка «Показать и скрыть»

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

Счётчик кликов

Каждое нажатие на кнопку увеличивает число на экране. Добавьте вторую кнопку для сброса и третью для уменьшения — но не позволяйте счётчику уходить в минус.

Переключение вкладок

Сверстайте три кнопки и три блока с контентом. По клику должен показываться только один блок, а активная кнопка — визуально выделяться. Это уже полноценный UI-компонент, который часто встречается в реальных макетах.

Формы и события

Проверка формы подписки

Сделайте форму с полями «имя», «email» и чекбоксом согласия. При отправке проверяйте: поля не пустые, email содержит символ @, галочка установлена. Выводите сообщения об ошибках рядом с полями, а при успехе — очищайте форму и показывайте благодарность. Не забудьте отменить стандартную отправку формы, иначе страница перезагрузится.

Мини-проекты для портфолио

Когда отдельные задачи перестанут пугать, соберите из них что-то цельное:

• Список дел — добавление, отметка выполнения, удаление, сохранение в localStorage.
• Таймер «Помодоро» — запуск, пауза, сброс и звуковой сигнал.
• Квиз с вопросами — подсчёт правильных ответов и финальный результат.
• Погодное приложение — запрос к открытому API и вывод данных на страницу.
• Калькулятор — обработка нажатий и вычисления без библиотек.

Как проверять свои решения

• Разбейте задачу на шаги и проверяйте каждый через console.log, а не весь код сразу.
• Используйте инструменты разработчика в браузере: вкладки Elements и Console показывают, что реально происходит со страницей.
• Тестируйте крайние случаи: пустую строку, ноль, отрицательное число, очень длинный текст.
• Через день вернитесь к решению и попробуйте переписать его короче — это лучший способ закрепить материал.

Частые ошибки новичков

• Скрипт подключён до появления элементов на странице, поэтому поиск элемента возвращает пустоту.
• Путаница между присваиванием и сравнением в условиях.
• Забытая проверка на пустой ввод — код работает только на «идеальных» данных.
• Попытка выучить всё сразу: фреймворки, сборщики и типизацию раньше обычных циклов и функций.

Начните с первой задачи прямо сегодня — не читайте дальше, а откройте редактор и напишите пару строк. Через пару недель таких коротких сессий вы заметите, что решения приходят быстрее, ошибки раздражают меньше, а вместо страха перед пустым файлом появляется азарт. JavaScript прощает новичкам почти всё — главное, не откладывать практику на «когда дочитаю теорию».