Бесплатно · 9–14 лет · 16 уроков

JavaScript и мини-игры

HTML показывает страницу, CSS её украшает, а JavaScript заставляет работать: считать, реагировать на нажатия и играть. За шестнадцать уроков ты напишешь три игры — и разберёшься, как они устроены изнутри.

Пройдено уроков0 / 16

1Урок 1. Первая программа и консольНачнём с команды, которой пользуются вообще все программисты — от первого дня до пенсии.+20 XP 2Урок 2. Переменные: let и constПеременная — это коробка с подписью, в которую программа кладёт значение, чтобы не забыть.+20 XP 3Урок 3. Числа и математикаКомпьютер вообще-то калькулятор. Пора этим воспользоваться.+25 XP 4Урок 4. Строки и шаблонные строкиТекст в программировании называют строкой. И с ним есть одна ловушка, в которую попадают все.+25 XP 5Урок 5. Меняем страницу из кодаДо сих пор всё происходило в консоли. Пора выйти на саму страницу.+30 XP 6Урок 6. События: игра-кликерПервая игра. Кнопка, которая считает нажатия — с неё начинались все кликеры в мире.+35 XP 7Урок 7. Условия: if и elseПока программа делала одно и то же. Научим её выбирать.+30 XP 8Урок 8. Логика: И, ИЛИ, НЕОдного условия часто мало. Научимся проверять сразу несколько.+30 XP 9Урок 9. Игра «Угадай число»Вторая игра курса — и первая, в которой компьютер думает сам.+40 XP 10Урок 10. Циклы: forКомпьютеры хороши тем, что не устают повторять. Научимся этим пользоваться.+30 XP 11Урок 11. Массивы: список значенийОдна переменная хранит одно значение. А если их сто?+30 XP 12Урок 12. Функции: свои командыФункция — это способ дать имя куску кода и вызывать его сколько угодно раз.+35 XP 13Урок 13. Объекты: карточка герояМассив хранит список одинаковых вещей. А если у одной вещи много разных свойств?+35 XP 14Урок 14. Таймеры: заставим двигатьсяВсё, что движется в браузере, движется потому, что кто-то много раз в секунду немного меняет положение.+35 XP 15Урок 15. Холст: рисуем кодомЕсть особый элемент, на котором можно рисовать прямо из кода. Как в графическом редакторе, только командами.+35 XP 16Урок 16. Финал: игра «Поймай кружок»Финал. Собираем всё вместе — холст, события, случайность, условия и счёт.+70 XP

О курсе

JavaScript — язык, на котором написана интерактивная часть почти всего интернета. Кнопка «нравится», корзина в магазине, карта с пробками, онлайн-игра в браузере — всё это он. И, что удобно для обучения, он уже встроен в каждый браузер: устанавливать ничего не нужно.

Почему через игры

Можно объяснять цикл for на подсчёте суммы чисел, а можно — на том, как в игре появляются десять врагов. Второе ребёнок запоминает сразу, потому что видит смысл. В этом курсе каждая тема сразу превращается в работающую вещь на экране, а три урока целиком отданы играм.

Что будет написано за курс

Кликер — кнопка, которая считает нажатия. Первое знакомство с событиями;
«Угадай число» — компьютер загадывает, игрок отгадывает, программа подсказывает «больше» или «меньше». Здесь появляются условия и случайные числа;
«Поймай кружок» — аркада на холсте с очками. Финальный проект, в котором сходится всё.

Что нужно знать заранее

Желательно пройти трек «Свой первый сайт» — здесь мы постоянно обращаемся к элементам страницы по их id и меняем стили. Без базового понимания HTML будет сложнее, хотя каждый новый тег в заданиях объясняется.

Чего в курсе нет

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

Частые вопросы

С какого возраста ребёнку можно учить JavaScript?

Обычно с 9–10 лет. Нужны устойчивое чтение, умение печатать латиницей и базовое понимание того, что такое переменная — примерно уровень школьной математики за 3–4 класс. Детям младше лучше начать с блочного программирования или HTML.

Нужно ли знать HTML перед JavaScript?

Желательно. JavaScript почти всегда что-то меняет на странице, а для этого надо понимать, из чего страница состоит. Достаточно пройти наш бесплатный трек «Свой первый сайт».

Что такое консоль и зачем она нужна?

Это окно, куда программа пишет служебные сообщения командой console.log, а браузер — сообщения об ошибках. На уроках она открывается кнопкой «Консоль» над окном результата и помогает понять, где именно код сломался.

Ребёнок написал код, но ничего не происходит. Почему?

Чаще всего дело в одной из трёх вещей: опечатка в имени элемента, пропущенная скобка или код обращается к элементу, который в HTML называется иначе. Откройте консоль — браузер обычно прямо пишет, что не так и в какой строке.

Можно ли на JavaScript написать настоящую игру?

Да, и очень многие браузерные игры написаны именно на нём. В курсе мы доходим до аркады на холсте со счётом — это уже настоящая игра, просто небольшая.

Раздел бесплатный и сделан агентством «Дом Маркетинга». Если вам нужен сайт или продвижение для бизнеса — это как раз то, чем мы занимаемся в рабочее время.

Перейти в агентство