Москва
«Манн, Иванов и Фербер»
2016
УДК 087.5:004.43
ББК 76.1,62:32.973.412
М79
Перевод с английского Станислава Ломакина
Издано с разрешения No Starch Press, Inc., a California Corporation
На русском языке публикуется впервые
Возрастная маркировка в соответствии
с Федеральным законом № 436-ФЗ: 6+
Морган, Ник
М79 JavaScript для детей. Самоучитель по программированию / Ник Морган ;
пер. с англ. Станислава Ломакина ; [науч. ред. Д. Абрамова]. — М. : Манн,
Иванов и Фербер, 2016. — 288 с.
ISBN 978-5-00100-295-6
Эта книга позволит вам погрузиться в программирование и с легкостью
освоить JavaScipt. Вы напишете несколько настоящих игр — поиск сокро-
вищ на карте, «Виселицу» и «Змейку». На каждом шаге вы сможете оценить
результаты своих трудов — в виде работающей программы, а с понятными
инструкциями, примерами и забавными иллюстрациями обучение будет
только приятным. Книга для детей от 10 лет.
УДК 087.5:004.43
ББК 76.1,62:32.973.412
Все права защищены. Никакая часть данной книги не
может быть воспроизведена в какой бы то ни было форме
без письменного разрешения владельцев авторских прав.
Правовую поддержку издательства обеспечивает юриди-
ческая фирма «Вегас-Лекс».
ISBN 978-5-00100-295-6
Copyright © 2014 by Nick Morgan.
Title of English-language original: JavaScript for Kids,
ISBN 978-1-59327-408-5, published by No Starch Press.
оформление. ООО «Манн, Иванов и Фербер», 2016
О ГЛ А В Л Е Н И Е
ВВЕДЕНИЕ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
ЧАСТЬ I. ОСНОВЫ
1. ЧТО ТАКОЕ JAVASCRIPT? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Знакомьтесь: JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Зачем изучать JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Пробуем JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Строение JavaScript-программы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
2. ТИПЫ ДАННЫХ И ПЕРЕМЕННЫЕ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Числа и операторы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Переменные . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Строки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Булевы значения . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Undefined и null . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
3. МАССИВЫ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Зачем нужны массивы? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Создание массива . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
5
Доступ к элементам массива . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Создание и изменение элементов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Разные типы данных в одном массиве . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Работаем с массивами . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Что полезного можно сделать с массивами . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
4. ОБЪЕКТЫ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Создание объектов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Доступ к значениям внутри объектов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Добавление элементов объекта . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Массивы объектов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Исследование объектов в консоли . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Что полезного можно сделать с объектами . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
5. ОСНОВЫ HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Текстовые редакторы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Наш первый HTML-документ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Теги и элементы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Полноценный HTML-документ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Иерархия HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Добавим в HTML ссылки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
6. УСЛОВИЯ И ЦИКЛЫ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Внедрение JavaScript-кода в HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Условные конструкции . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Циклы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
7. ПИШЕМ ИГРУ «ВИСЕЛИЦА» . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Взаимодействие с игроком . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Проектирование игры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Программируем игру . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Код игры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
6 Оглавление
8. ФУНКЦИИ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Базовое устройство функции . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Создаем простую функцию . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Вызов функции . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Передача аргументов в функцию . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Возврат значения из функции . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Вызов функции в качестве значения . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Упрощаем код с помощью функций . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Ранний выход из функции по return . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136