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

Главное, что отличает JavaScript для подростка, — у программы сразу появляется публика. Игру на Python обычно видит только её автор, а страницу с JavaScript можно открыть на телефоне и отправить другу файлом. Это хорошо мотивирует. Расплата — синтаксис: фигурные скобки, точки с запятой, два вида сравнения и язык, который молча складывает строку с числом там, где Python остановился бы с ошибкой. Поэтому JavaScript редко бывает первым языком и чаще идёт вторым.

Scratch, Python и JavaScript: что меняется для ребёнка

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

Из таблицы видно главное: Scratch и JavaScript устроены вокруг событий. В Scratch есть блок «когда спрайт нажат», в JavaScript — обработчик addEventListener("click", ...). Ребёнок, который делал игры в Scratch, узнаёт эту идею быстрее того, кто писал на Python консольные программы, где всё идёт строго сверху вниз.

С какого возраста и после чего

Возраст говорит меньше, чем три умения. Ребёнок читает английские слова function, if, return и названия ошибок, не пугаясь их. Находит на клавиатуре парные символы вроде { и } без долгого поиска. И уже довёл до конца хотя бы одну программу с циклом и условием — неважно, на блоках или в тексте.

Если все три умения есть, текстовый JavaScript пойдёт с 11–12 лет. Ребёнку 9–10 лет, который пока только играл, лучше начать со Scratch — о нём у нас есть отдельная статья — или с игровой платформы, где команды двигают героя по уровню. Подростку, который уже знает Python (о нём для детей у нас тоже есть материал), JavaScript даётся за несколько недель: циклы и функции он понимает, переучивать приходится запись.

Если ребёнку нравятся олимпиадные задачи, а не то, как программа выглядит, ему удобнее Python: меньше синтаксического шума, больше задачников.

Учебный пример: игра «Поймай квадрат»

Первая игра помещается в один файл, который открывается двойным щелчком. На холсте появляется красный квадрат; если попасть по нему мышью, счёт растёт, а квадрат прыгает в случайное место. Учебную версию можно сохранить как igra.html:

<canvas id="field" width="400" height="300"></canvas>
<p>Очки: <span id="score">0</span></p>
<script>
const field = document.getElementById("field");
const ctx = field.getContext("2d");
let x = 100, y = 100, score = 0;
function draw() {
  ctx.clearRect(0, 0, 400, 300);
  ctx.fillStyle = "tomato";
  ctx.fillRect(x, y, 40, 40);
}
field.addEventListener("click", function (e) {
  if (e.offsetX >= x && e.offsetX <= x + 40 && e.offsetY >= y && e.offsetY <= y + 40) {
    score = score + 1;
    document.getElementById("score").textContent = score;
  }
  x = Math.random() * 360;
  y = Math.random() * 260;
  draw();
});
draw();
</script>

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

Новички ломают такую игру в одних и тех же местах. Пишут getElementByID с большой «D» — и ничего не происходит: JavaScript различает регистр букв. Теряют закрывающую } — и видят пустую страницу без подсказок, пока не откроют консоль. Берут число из поля ввода и получают "5" + 1, то есть строку "51" вместо 6: значение приходит текстом, и его превращают в число через Number(). Заодно удобно объяснить разницу между == и ===: первое сравнение считает "5" и 5 равными, второе — нет, и в учебном коде лучше всегда пользоваться вторым.

Консоль браузера и чужой код

Консоль, которая открывается клавишей F12, — главный инструмент начинающего: здесь видны ошибки. Но о ней стоит поговорить до первого урока. Мошенники присылают «секретный код», который якобы даёт бесплатную игровую валюту или скины, и просят вставить его в консоль на открытом сайте. Такой код работает от имени самого ребёнка: может отправить сообщения из его аккаунта или передать аккаунт чужим людям. Атаку называют self-XSS, потому что вредоносный скрипт запускает сама жертва.

В Chrome от этого есть встроенная защита, и подросток почти наверняка на неё наткнётся. Как описано в блоге разработчиков Chrome о защите от self-XSS, пока в истории консоли профиля меньше пяти записей, DevTools не даёт вставить скопированный код и показывает предупреждение. Чтобы снять блокировку, нужно вручную напечатать allow pasting, а закрытие предупреждения не помогает. Если ребёнок завёл новый профиль браузера и копирует код из видеоурока, предупреждение появится и на безобидном примере, и это хороший повод договориться о правиле: в консоль вставляем только код, который можем объяснить построчно, и никогда — код от незнакомца, который что-то обещает. А учебные примеры полезнее перепечатывать руками: поиск собственных опечаток и есть тренировка.

С чего начать дома

Попробовать JavaScript можно бесплатно: нужны браузер и текстовый редактор. Шаги ниже идут от мгновенного ответа к собственной идее. Сначала ребёнок видит, что язык реагирует, потом связывает код со страницей и только после этого делает игру, где одновременно работают событие, условие и рисование. Если начать сразу с игры, ошибки накладываются друг на друга и их трудно разобрать.

1. Наберите в консоли 2 + 2, "5" + 1, "5" === 5 и обсудите, почему ответы такие.
2. Сделайте страницу с кнопкой, которая при каждом нажатии увеличивает число на экране.
3. Перепечатайте «Поймай квадрат», не копируя, и найдите свои опечатки через консоль.
4. Измените правила: штраф за промах, таймер на 30 секунд.
5. Предложите сделать что-то без образца: викторину или рисовалку.

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

Как выбрать курс

Детских курсов, где JavaScript — главный язык, немного. Чаще он стоит рядом с Python в игровой оболочке или внутри курса по созданию сайтов, после разметки и оформления. Перед записью полезно понять, сколько занятий приходится собственно на язык.

Для детей 10–12 лет подходит игровой курс CODDY «Python и JavaScript» на платформе CodeCombat. Ребёнок управляет героем командами и решает одни и те же задачи на двух языках, поэтому видит, что цикл остаётся циклом, а меняется только запись. Темы — переменные, типы данных, циклы, условия, функции, массивы и координаты. Курс короткий: от трёх модулей по 8 часов, занятие два часа раз в неделю, в группе до 8 человек или индивидуально. Собственной игры с нуля на этом курсе нет, результат измеряется пройденными уровнями, а поурочный план школа присылает по запросу.

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

С индивидуальным темпом такой шаг даёт курс Hello World «Frontend-разработка сайтов для детей и подростков» с 10 лет. Занятия идут один на один по 55 минут, пять уровней минимум по 27 занятий, всего около 135, и 58 проектов. Сначала HTML, затем CSS и адаптивная вёрстка, потом JavaScript. Если ребёнок пришёл именно за языком, спросите, на каком уровне начинаются скрипты; программа дополнительного уровня неясна, её тоже стоит уточнить у школы.

Индивидуальный формат подходит тем, кто стесняется спрашивать при всех. Тех, кого мотивирует чужой интерес к проекту, лучше держит группа.

Для подростков 10–15 лет, которым нравится командная работа, есть курс Skillbox «Создание сайтов для детей»: 8 месяцев, 18 вебинаров и 14 видеоуроков. Модули идут от HTML и CSS через Flexbox и библиотеки Bootstrap, Swiper и Animate.css к основам JavaScript, в конце — командный проект с защитой, в портфолио остаётся шесть сайтов. Школа сама пишет, что JavaScript здесь дан в базовом объёме и не заменяет дальнейшего изучения программирования: курс скорее о том, как собрать страницу целиком, чем о языке.

Сколько стоит и что даёт

Сам JavaScript ничего не стоит: браузер, консоль и редактор есть на любом компьютере. Платят за педагога. На карточках Учи.Онлайн у CODDY на 4 сентября 2026 года модуль стоит 8 080 ₽, или 1 010 ₽ за астрономический час, три месяца — около 24 240 ₽. Skillbox на 11 октября 2026 года просит 74 400 ₽ при зачёркнутой цене 106 286 ₽. У Hello World первое занятие стоит 1 400 ₽, дальше — абонемент; пакеты на 6, 12 и 24 урока указаны в евро: 177, 328 и 606 €. Оплату маткапиталом или с налоговым вычетом школа допускает при договоре с российским юрлицом — проверьте это до оплаты.

Заработка JavaScript ребёнку не даёт, и курс, который его обещает, стоит обходить. Даёт он умение довести идею до вещи, которую можно показать, и привычку читать ошибки в консоли. Как язык применяют взрослые без перехода в программисты, мы разбирали в отдельной статье о JavaScript.

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

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

Сравнить онлайн-школы по условиям поможет общий рейтинг онлайн-школ для детей и взрослых по возрасту и аудитории с фильтрами «10–13 лет» и «14–17 лет». Программированию он отдельно не посвящён, поэтому возраст, формат и долю JavaScript в программе сверяйте на странице курса. А до оплаты дайте подростку пройти пять домашних шагов и посмотрите, вернётся ли он к своей игре на следующий день без напоминаний.