Как устроен этот учебник

Каждая статья — список разделов, и при загрузке они свёрнуты: видны только заголовки с короткой подписью-тизером, по ней понятно, что внутри. Раскрываете тот, который нужен, — разделы ведут себя как аккордеон: следующий раскрытый сворачивает предыдущий, чтобы страница не росла бесконечно. Хочется видеть всё сразу — под вступлением есть панель «Разделы темы: развернуть все · свернуть все». Уже знаете тему? Не открывайте её и идите дальше: учебник не заставляет читать всё подряд.

Под шапкой статьи оставлено место под видео-разбор темы: те же 5–7 минут голосом и с живым экраном. Ролики снимаются отдельным конвейером и появляются постепенно, а место под них держится сразу — чтобы страница не переезжала, когда видео приедет. Кому-то проще прочитать, кому-то — посмотреть, как код набирают и запускают; текст ниже полон сам по себе.

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

console.log("Привет, учебник!");

Код в примерах можно редактировать — и нужно. Измените текст, поменяйте число, нажмите Run ещё раз. Сломать страницу невозможно: песочница изолирована, а перезагрузка вернёт исходный код.

let year = 1995;
console.log("JavaScript появился в " + year + " году");

console.log(2 + 3);

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

Задачи устроены иначе: у каждой есть решение, но оно скрыто. Рядом с названием задачи — отметка важности: пять точек, закрашено от одной до пяти. Чем больше закрашено, тем нужнее навык в реальной работе. Самые важные пропускать не стоит.

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

let price = 200;
let discount = 50;
console.log(price - discount);

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

Запусти → сломай → почини. Только так код становится твоим.

Маршрут построен слоями. Сначала — сам язык: переменные, функции, объекты, всё то, что работает одинаково везде. Затем — браузер: как JavaScript управляет страницей, реагирует на клики и общается с сервером. И только потом — экосистема: TypeScript, React, Node.js и то, из чего собирают настоящие проекты.

const path = ["язык", "браузер", "экосистема"];
console.log(path.join(" → "));

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

Есть у маршрута и необязательное начало — пролог, часть 0. Скрипт работает со страницей, а страницу описывают разметка HTML и стили CSS; пролог — две главы о них для тех, кто вёрстку ещё не трогал. Нужен ли он вам, покажет его первая статья: если разметка и стили вам знакомы, пролог можно пропустить.