JavaScript онлайн-учебник: план обучения на 30 дней

План на 30 дней нужен не для красивого расписания, а для спокойного движения от первой строки JavaScript к маленькому рабочему интерфейсу. Каждый день должен заканчиваться кодом: функцией, проверкой, обработчиком события, фильтром списка или частью мини-проекта

Не пытайтесь выучить весь язык за месяц. Хороший результат для старта — понимать базовый синтаксис, уверенно читать ошибки, работать с массивами и объектами, находить элементы на странице, реагировать на действия пользователя и собрать простой todo-list или каталог

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

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

Как заниматься каждый день

Оптимальная учебная сессия занимает 60-90 минут. Первые 10 минут повторите вчерашний код, затем 25-35 минут разберите новую тему, после этого решите задачу без подсказки и в конце запишите, что сломалось

Держите один файл index.html для DOM-задач и отдельные файлы .js для задач в консоли. Так вы быстрее увидите разницу между обычными вычислениями и кодом, который управляет страницей

Неделя 1. Синтаксис и первые функции

Цель первой недели — перестать бояться кода и научиться запускать маленькие примеры. Не трогайте React, сборщики и сложные настройки. Достаточно браузера, редактора и консоли разработчика

1. День 1: переменные, строки, числа, console.log
2. День 2: if, сравнения, логические операторы
3. День 3: функции с параметрами и return
4. День 4: массивы и обращение по индексу
5. День 5: циклы for и for...of
6. День 6: методы map, filter, find, reduce
7. День 7: повторение и маленький набор задач

Пример для проверки первой недели:

function getDiscountPrice(price, percent) {
  if (price <= 0 || percent < 0) {
    return 0;
  }

  return price - price * percent / 100;
}

console.log(getDiscountPrice(1000, 15));
console.log(getDiscountPrice(500, 0));
console.log(getDiscountPrice(-100, 20));

Если вы можете объяснить, почему функция возвращает разные значения, первая неделя уже дала базу

Неделя 2. Массивы, объекты и данные

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

1. День 8: объект с несколькими полями
2. День 9: массив объектов
3. День 10: фильтрация списка
4. День 11: поиск элемента
5. День 12: сортировка
6. День 13: подсчет суммы через reduce
7. День 14: мини-проект в консоли

Практический пример:

const products = [
  { title: 'Книга', price: 900, category: 'books' },
  { title: 'Клавиатура', price: 2500, category: 'tech' },
  { title: 'Монитор', price: 12000, category: 'tech' },
];

const cheapTech = products.filter((product) => {
  return product.category === 'tech' && product.price < 5000;
});

console.log(cheapTech);

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

Неделя 3. DOM и события

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

1. День 15: querySelector и изменение текста
2. День 16: обработчик click
3. День 17: чтение значения из input
4. День 18: создание элемента через createElement
5. День 19: список задач на странице
6. День 20: удаление и отметка выполненной задачи
7. День 21: повторение DOM-сценариев

Минимальный DOM-пример:

<input id="taskInput" placeholder="Новая задача">
<button id="addTask">Добавить</button>
<ul id="taskList"></ul>

const input = document.querySelector('#taskInput');
const button = document.querySelector('#addTask');
const list = document.querySelector('#taskList');

button.addEventListener('click', () => {
  const title = input.value.trim();

  if (!title) {
    return;
  }

  const item = document.createElement('li');
  item.textContent = title;
  list.append(item);
  input.value = '';
});

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

Неделя 4. Мини-проект и закрепление

Последняя неделя нужна, чтобы собрать темы в один сценарий. Лучший учебный проект — todo-list, каталог товаров или список книг с поиском и фильтром

1. День 22: хранить данные в массиве
2. День 23: рендерить список из массива
3. День 24: добавлять элемент через форму
4. День 25: удалять элемент по id
5. День 26: фильтровать список
6. День 27: сохранять данные в localStorage
7. День 28: обрабатывать пустое состояние
8. День 29: привести код в порядок
9. День 30: собрать контрольный проект заново без подсказки

Контрольная структура проекта:

const tasks = [];

function addTask(title) {
  const cleanTitle = title.trim();

  if (!cleanTitle) {
    return;
  }

  tasks.push({
    id: Date.now(),
    title: cleanTitle,
    done: false,
  });
}

function getActiveTasks() {
  return tasks.filter((task) => !task.done);
}

На 30-й день попробуйте восстановить проект с чистого файла. Если приходится подглядывать, это нормально: отметьте, где именно застряли, и повторите этот блок на следующий день

Что проверять после каждой темы

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

Типичные ошибки в 30-дневном плане

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

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

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

Четвертая ошибка — не проверять крайние случаи. Пустая строка, ноль, отсутствующее поле и пустой массив часто учат лучше, чем идеальный пример

Как понять, что план сработал

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

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