JavaScript для детей. Самоучитель по программированию - Ник Морган

Все права на текст принадлежат автору: Ник Морган.
Это короткий фрагмент для ознакомления с книгой.

Купить эту книгу в ЛитРес

Москва

«Манн, Иванов и Фербер»

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

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

Доступ к элементам массива . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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

Многократное использование return вместо конструкции if... else . . . . . 137

Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

ЧАСТЬ II.

ПРОДВИНУТЫЙ JAVASCRIPT

9. DOM И JQUERY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

Поиск элементов DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146

Работа с деревом DOM через jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149

Создание новых элементов через jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150

Анимация элементов средствами jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152

Цепной вызов и анимация на jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152

Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154

10. ИНТЕРАКТИВНОЕ ПРОГРАММИРОВАНИЕ . . . . . . . . . . . . . . . . . . . . 156

Отложенное выполнение кода и setTimeout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156

Отмена действия таймера . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158

Многократный запуск кода и setInterval . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158

Анимация элементов с помощью setInterval . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160

Реакция на действия пользователя . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164

11. ПИШЕМ ИГРУ «НАЙДИ КЛАД!» . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166

Проектирование игры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166

Создаем веб-страницу с HTML-кодом . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167

Выбор случайного места для клада . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168

Обработчик кликов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169

Код игры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173

Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175

Оглавление 7

12. ОБЪЕКТНООРИЕНТИРОВАННОЕ

ПРОГРАММИРОВАНИЕ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176

Простой объект . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176

Добавление к объектам новых методов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177

Создание объектов с помощью конструкторов . . . . . . . . . . . . . . . . . . . . . . . . . . 180

Рисуем машины . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182

Настройка объектов через прототипы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184

Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188

ЧАСТЬ III. ГРАФИКА

13. ЭЛЕМЕНТ CANVAS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193

Создаем «холст» . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193

Рисование на «холсте» . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194

Выбор цвета . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196

Рисование контуров прямоугольников . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197

Рисование линий или путей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198

Заливка путей цветом . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200

Рисование дуг и окружностей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201

Рисование нескольких окружностей с помощью функции . . . . . . . . . . . . 204

Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205

14. АНИМАЦИИ С ПОМОЩЬЮ CANVAS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208

Движение по странице . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208

Изменение размера квадрата . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210

Случайная пчела . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211

Отскакивающий мяч . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217

Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222

15. УПРАВЛЕНИЕ АНИМАЦИЯМИ С КЛАВИАТУРЫ . . . . . . . . . . . . . . 224

События клавиатуры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224

Управляем мячом с клавиатуры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227

Код программы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233

Запуск программы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235

Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235

16. ПИШЕМ ИГРУ «ЗМЕЙКА»: ЧАСТЬ 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237

Игровой процесс . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237

8 Оглавление

Структура игры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238

Начинаем писать игру . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240

Рисуем рамку . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

Отображение счета . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245

Конец игры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249

Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250

17. ПИШЕМ ИГРУ «ЗМЕЙКА»: ЧАСТЬ 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252

Создаем конструктор Block . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252

Создаем змейку . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257

Перемещаем змейку . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259

Управляем змейкой с клавиатуры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

Создаем яблоко . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266

Код игры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268

Что мы узнали . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273

ПОСЛЕСЛОВИЕ:

КУДА ДВИГАТЬСЯ ДАЛЬШЕ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276

Больше о JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276

Веб-программирование . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277

Графическое программирование . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278

3D-программирование . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278

Программирование роботов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279

Программирование звука . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279

Программирование игр . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279

Обмен кодом с помощью JSFiddle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280

ГЛОССАРИЙ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281

ОБ АВТОРЕ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286

БЛАГОДАРНОСТИ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287

Посвящается Филли

(и Оладушку)

В В Е Д Е Н И Е

Эта книга научит вас писать программы на JavaScript — одном из попу-

лярных языков программирования. А освоив язык программирования,

вы станете программистом — человеком, который не просто пользуется

компьютерами, а управляет ими. Научившись программированию, вы

сможете вертеть компьютерами как хотите, и они всегда будут послушно

следовать вашим указаниям.

Изучить именно JavaScript — отличная идея, потому что этот язык

используется повсюду. Его поддерживают браузеры Chrome, Firefox

и Internet Explorer. Возможности JavaScript позволяют программистам

делать из обычных веб-страниц полноценные интерактивные приложе-

ния и видеоигры. Но это еще не все: JavaScript также работает на интер-

нет-серверах и даже может использоваться для управления роботами

и другими устройствами.

Для кого эта книга?

Эта книга предназначена для всех, кто хочет изучить именно JavaScript

или же просто начать программировать с нуля. Она написана для детей,

но может стать первым самоучителем по программированию для человека

любого возраста.

Работая с книгой, вы будете постепенно узнавать новое, закреплять

прочитанное и двигаться дальше и дальше. Начав с простых типов

данных, вы перейдете к более сложным, по пути освоив управляющие

конструкции и функции. После этого вы научитесь писать код, реаги-

рующий на перемещения мышки или нажатия клавиш, и наконец позна-

комитесь с элементом canvas, который позволяет создавать рисунки

и анимации — любые, какие только пожелаете!

Как читать эту книгу

Самое главное, читайте по порядку! Может быть, этот совет звучит

странно, однако нередко людям не терпится сразу перейти к чему-нибудь

занимательному, например к созданию игр. Но поверьте — вам будет

гораздо проще создать игру, если вы все-таки будете читать с начала,

глава за главой, так как каждый новый раздел основывается на материа ле

предыдущих.

Языки программирования похожи на обычные языки. Вы, наверное,

знаете — чтобы овладеть языком, нужно выучить грамматику и запом-

нить достаточно много слов. Это требует времени. Это же правило рабо-

тает и с JavaScript — чтобы научиться пользоваться этим языком, нужно

постоянно исследовать код и писать на нем программы. По мере того

как вы будете писать больше и больше, вы обнаружите, что пользуетесь

командами все более естественно, и в конце концов сможете свободно

выражать свои мысли в коде.

Я настоятельно рекомендую тестировать примеры кода по мере чте-

ния книги. Если вам не до конца понятно, как код работает, попробуйте

вносить в него небольшие изменения и смотреть, как изменится резуль-

тат. Если же ваши правки не приводят к ожидаемому эффекту, постарай-

тесь выяснить, почему это происходит.

Обязательно выполняйте задания из разделов «Попробуйте сами»

и «Упражнения». Вводить в компьютер код из книги — отличное начало,

но по-настоящему вы станете понимать программирование только

тогда, когда начнете писать собственный код. Если задания покажутся

вам интересными, не останавливайтесь! Придумывайте свои задачи

по усовершенствованию написанных вами программ.

Вы можете найти примеры выполнения заданий и исходный код

игр по адресу www.nostarch.com/javascriptforkids или на странице книги

на сайте www.mann-ivanov-ferber.ru. Постарайтесь заглядывать в решения

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

с моим. И только если вы зашли в тупик, обратитесь за подсказкой. Однако

помните, что это лишь варианты решения — в JavaScript существует мно-

жество способов выполнить одну и ту же задачу, так что не беспокойтесь,

если ваше решение получится совсем не похожим на мое.

Если вы встретите слово, значение которого не понимаете, загляните

в глоссарий в конце книги.

Что вас ждет?

Глава 1 содержит краткое введение в JavaScript. Кроме того, вы узна-

ете, как писать код в консоли Google Chrome.

Глава 2 расскажет про переменные и основные типы данных

в JavaScript: числа, строки и булевы значения.

12 Введение

Глава 3 посвящена массивам, предназначенным для хранения набо-

ров других элементов данных.

Глава 4 расскажет об объектах, содержащих пары «ключ-значение».

Глава 5 — это введение в HTML, язык для создания веб-страниц.

Глава 6 научит, как управлять выполнением кода с помощью кон-

струкций if, циклов for и других структур.

Глава 7 покажет, как на основе изученного материала создать про-

стую игру на отгадывание слов — «Виселицу».

Глава 8 научит писать собственные функции, что позволит группи-

ровать фрагменты кода и использовать их повторно.

Глава 9 — это введение в jQuery, инструмент, облегчающий управле-

ние веб-страницами из JavaScript-кода.

Глава 10 научит, как использовать таймеры, интервалы и обработ-

чики событий, делая код более интерактивным.

Глава 11 использует функции, jQuery и обработчики событий для

создания игры «Найди клад!».

Глава 12 научит элементам объектно-ориентированного про грам-

мирования.

Глава 13 расскажет об элементе canvas, позволяющем создавать

графические изображения на веб-страницах.

Глава 14 на основе способов анимации из главы 10 покажет, как соз-

давать анимации на «холсте» canvas,

тогда как

Глава 15 научит, как управлять этими анимациями с клавиатуры.

В главах 16 и 17 вы создадите полноценную игру «Змейка», исполь-

зуя все знания, полученные в предыдущих пятнадцати главах!

Послесловие подскажет, куда двигаться дальше при изучении

программирования.

Глоссарий даст определения множества новых слов, которые вам

встретятся.

Повеселитесь!

И еще один момент, о котором не стоит забывать: веселитесь! Про грам-

мирование может быть увлекательным, творческим занятием, как рисо-

вание или игры (а работая с книгой, вы изрядно порисуете и поиграете).

Как только вы научитесь программировать, для вас не будет иных пре-

град, кроме собственного воображения. Добро пожаловать в потряса-

ющий мир компьютерного программирования — и желаю вам отлично

провести время!

Ч АС Т Ь I

Основы

Ч АС Т Ь I

Ос

Осно

н в

о ы

Ч Т О ТА КО Е J AVA S C R I P T ?

Компьютеры — необычайно мощные машины, способные

делать потрясающие вещи. Например, они могут играть

в шахматы, обслуживать тысячи интернет-страничек и менее

чем за несколько секунд выполнять миллионы сложных

вычислений. Однако сами по себе компьютеры неразумны,

и делают они лишь то, что прикажут люди. Мы сообщаем

компьютерам, что нам от них нужно, с помощью наборов

инструкций, которые называются программами. Без про-

грамм компьютеры вообще ничего не умеют!

Знакомьтесь: JavaScript

Более того, компьютеры не знают ни английского, ни русского, ни других

естественных языков; и компьютерные программы создают на специ-

альных языках программирования. Одним из таких языков является

JavaScript. Даже если вы слышите про JavaScript впервые, вы опреде-

ленно заходили на сайты, которые его используют. Например, JavaScript

может управлять внешним видом странички или делать так, чтобы стра-

ница реагировала на нажатие клавиши или перемещение мышки.

Такие сайты, как Gmail, Facebook и Twitter, используют JavaScript для

облегчения работы с почтой, отправки комментариев или улучшения

навигации. К примеру, когда вы, читая в Twitter сообщения от @nostarch,

проматываете страничку вниз и видите все больше и больше сообщений,

это происходит благодаря JavaScript.

Чтобы понять, чем же так хорош JavaScript, достаточно посетить

несколько сайтов:

• JavaScript позволяет проигрывать музыку и создавать яркие визу-

альные эффекты. Например, вы можете полетать в интерактивном

видеоклипе от студии HelloEnjoy на песню Элли Голдинг Lights

(http://lights.helloenjoy.com/), рис. 1.1.

Рис. 1.1. В клипе Lights нужно управлять искрящимся курсором

• С помощью JavaScript можно создавать инструменты для творчества.

Patatap (http://www.patatap.com/) — это нечто вроде виртуальной

драм-машины, которая издает всевозможные шумы и звуки, а также

проигрывает забавные анимации, рис. 1.2.

Рис. 1.2. Зайдя на страничку Patatap, нажимайте на разные клавиши, чтобы услышать

разные звуки!

18 Часть I. Основы

• JavaScript дает нам возможность играть в увлекательные игры.

CubeSlam (https://www.cubeslam.com/) — это трехмерное подобие

классической игры «Понг», похожее на аэрохоккей. Посоревнуйтесь

с кем-нибудь из друзей или с медведем, за которого играет компью-

тер. См. рис. 1.3.

Рис. 1.3. Игра CubeSlam написана целиком на JavaScript!

Зачем изучать JavaScript?

JavaScript — далеко не единственный язык программирования. В сущ-

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

чин выбрать именно JavaScript. Например, изучать его гораздо проще

(и интереснее), чем многие другие языки. Но, пожалуй, самая веская

причина такова: чтобы писать и выполнять JavaScript-программы, доста-

точно интернет-браузера — такого, как Internet Explorer, Mozilla Firefox

или Google Chrome. В каждый из этих браузеров встроен интерпретатор

JavaScript, который сможет выполнять JavaScript-программы. И ника-

кого специального программного обеспечения вам не понадобится.

Написав программу на JavaScript, отправьте ссылку на нее другим

людям, и они тоже смогут ее запустить — у себя на компьютере, в брау-

зере (см. «Обмен кодом с помощью JSFiddle» на с. 280).

Пробуем JavaScript

Давайте напишем простую JavaScript-программку с помощью браузера

Google Chrome (www.google.com/chrome). Установите Chrome на свой

компьютер (если он еще не установлен), запустите его и введите слова

about:blank в адресной строке. Теперь нажмите ENTER — откроется

пустая страничка, как на рис. 1.4.

1. Что такое JavaScript? 19

Начнем с программирования в JavaScript-консоли Chrome (это секрет-

ный инструмент для тестирования коротких программ на JavaScript).

Если ваш компьютер работает под управлением Microsoft Windows

или Linux, нажмите и не отпускайте клавиши CTRL и SHIFT, а затем

нажмите J. Если же вы пользуетесь системой MacOS, нажмите и удержи-

вайте COMMAND и OPTION, а затем нажмите J.

Если вы все сделали правильно, то увидите пустую веб-страницу, под

которой стоит значок угловой скобки (>), а после него мигает курсор (|).

Здесь нам и предстоит писать код на языке JavaScript!

! Текст в консоли Chrome подсвечивается разными цветами в зависи-

мости от типа данных. В этой книге код для ввода в консоль напе-

чатан такими же цветами там, где это имеет значение. Но там,

где разноцветный код будет вас только отвлекать, синим мы будем

выделять то, что сами вводим в консоль, а данные, которые авто-

матически выдаст программа, будут цветными.

Адресная строка используется для перехода на сайты,

например Facebook.com или Google.com. Сейчас нам

нужна пустая страница, поэтому вводим about:blank

и жмем ENTER.

JavaScript-консоль: здесь мы будем

тестировать короткие программы.

Рис. 1.4. JavaScript-консоль Google Chrome

Когда вы введете код и нажмете ENTER, JavaScript должен запу-

стить (иначе говоря, выполнить) ваш код, показав на следующей строке

результат (когда он есть). Например, введите в консоли:

20 Часть I. Основы

3 + 4;

Теперь нажмите ENTER. JavaScript должен напечатать результат сло-

жения (7) на следующей строке:

3 + 4;

Как видите, ничего сложного. Но JavaScript — это нечто определенно

большее, чем просто затейливый калькулятор. Давайте попробуем кое-

что еще.

Строение JavaScript-программы

Давайте позабавимся — напишем JavaScript-программу, которая печа-

тает японские смайлики каомодзи в виде кошачьей мордочки:

=^.^=

В отличие от простого сложения, с которого мы

начали, эта программа занимает несколько строк.

Чтобы ввести ее в консоли, нужно будет в конце

каждой строки переходить на новую строку нажа-

тием SHIFT-ENTER. (Если нажать просто ENTER,

Chrome попытается выполнить те команды, кото-

рые вы уже ввели, и программа не будет рабо-

тать правильно. Сами по себе компьютеры ничего

не соображают — я предупреждал!)

Введите в консоли браузера:

// Рисуем столько котиков, сколько захотим!

Draw cats —

var drawCats = function (howManyTimes) {

рисовать

for (var i = 0; i < howManyTimes; i++) {

котиков

console.log(i + " =^.^=");

}

Function —

};

функция

drawCats(10); // Вместо 10 тут может быть другое число

How

many

times —

сколько раз

1. Что такое JavaScript? 21

В конце последней строки нажмите ENTER, а не SHIFT-ENTER.

Программа должна напечатать следующее:

0 =^.^=

1 =^.^=

2 =^.^=

3 =^.^=

4 =^.^=

5 =^.^=

6 =^.^=

7 =^.^=

8 =^.^=

9 =^.^=

Если при вводе программы вы где-то ошиб лись, результат может ока-

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

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

программа должна быть написана идеально, чтобы компьютер понял,

что от него требуется!

Я не буду сейчас вдаваться в подробности, объясняя, как работает этот

код (мы еще вернемся к нему в восьмой главе), однако давайте рассмотрим

некоторые особенности этой программы, да и JavaScript-программ в целом.

Синтаксис

В нашей программе встречается много символов, таких как скобки (), точки

с запятой ;, фигурные скобки {}, знаки плюс +, а также некоторые таин-

ственные на первый взгляд слова (например, var и console.log). Все это

является частью синтаксиса JavaScript — то есть правил, указывающих, как

объединять символы и слова, чтобы составить работающую программу.

Одна из главных сложностей при освоении нового языка программи-

рования — запомнить правила написания команд. Поначалу легко про-

пустить какие-нибудь скобки или запутаться в очередности записи зна-

чений. Не волнуйтесь, с опытом вы привыкнете писать код правильно.

В этой книге мы будем изучать материал медленно, постепенно зна-

комясь с новыми командами языка, чтобы вы могли писать все более

и более мощные программы.

Комментарии

В первой строке нашей программы написано:

// Рисуем столько котиков, сколько захотим!

22 Часть I. Основы

Это называется комментарий. Программисты пишут коммента-

рии, чтобы другим программистам было легче читать и понимать их

код. Компьютер же комментарии игнорирует. В JavaScript комментарии

начинаются с двух символов наклонной черты (//). Все, что идет следом

за ними (в той же строке), интерпретатор JavaScript пропускает, поэтому

комментарии не оказывают влияния на выполнение программы — это

всего лишь пояснение.

В примерах кода, которые встретятся вам в этой книге, комментарии

описывают, что и как там происходит. При написании своего кода тоже

добавляйте комментарии — когда вы заглянете в программу некоторое

время спустя, они напомнят вам, как работает код и что происходит

на том или ином этапе.

В конце нашей программы-примера есть еще один коммента-

рий. Напоминаю: все, что записано после символов //, компьютер

игнорирует!

drawCats(10); // Вместо 10 тут может быть другое число

Комментарии могут занимать отдельную строку или следовать сразу

после кода. Но если вы поставите // перед кодом, вот так:

// drawCats(10);

...то не произойдет вообще ничего! Chrome решит, что вся эта

строка — комментарий, хоть там и записаны инструкции на языке

JavaScript.

Когда вы, помимо примеров в этой книге, начнете изучать чужой

JavaScript-код, вам будут попадаться комментарии, которые выглядят

иначе:

Рисуем столько котиков,

сколько захотим!

Это другая разновидность комментариев; их обычно используют,

когда текст примечания не помещается на одной строке. Однако прин-

цип здесь тот же: текст, записанный между /* и */, — это комментарий,

и выполнять его компьютер не будет.

1. Что такое JavaScript? 23

Что мы узнали

В этой главе мы познакомились с языком JavaScript и узнали,

что можно делать с его помощью. Кроме того, мы научились

запускать JavaScript-код в браузере Google Chrome и ввели

несложную программу-пример. Все примеры из этой книги

можно (и нужно!) запускать в JavaScript-консоли Google

Chrome (если только я не скажу, что этого делать не надо).

Просто читать код недостаточно — проверяйте, как он рабо-

тает! Это единственный способ научиться программировать.

В следующей главе мы приступим к изучению основ

языка JavaScript, начиная с трех основных типов данных,

с которыми вам предстоит работать: чисел, строк и булевых

значений.

Т И П Ы Д А Н Н Ы Х И П Е Р Е М Е Н Н Ы Е

Программирование — это работа с данными, но что такое данные?

Данные — это информация, которая хранится в наших компьютерных

программах. Например, ваше имя — это элемент данных, и ваш возраст

тоже. Цвет волос, количество братьев и сестер, ваш адрес и пол — все это

данные.

В JavaScript есть три основных типа данных: числа, строки и булевы

значения. Числа — они и есть числа, тут все понятно. Например, числом

можно выразить возраст или рост.

В JavaScript числа записываются так:

Любые текстовые данные записываются в строки. В JavaScript ваше

имя можно выразить строкой (так же как и адрес вашей электронной

почты).

Строки выглядят так:

"Привет, я строка";

Булевы значения могут хранить одну из двух величин —

либо это true («истина»), либо false («ложь»). Например, таким

способом можно показать, носите ли вы очки или любите ли вы

брокколи.

Пример булева значения:

true;

С данными разных типов и обращаться следует по-разному.

Например, перемножить два числа можно, а перемножить две строки —

нет. Зато, имея строку, можно выделить пять ее первых символов. Взяв

два булевых значения, можно проверить, являются ли они оба «истиной»

(true). Вот все эти действия на примере:

99 * 123;

12177

"Вот длинная строка".slice(0, 3);

"Вот"

true && false;

false

Любые данные в JavaScript — не более чем сочетание этих основных

типов. Далее мы по очереди рассмотрим каждый тип данных и изучим

различные способы работы с ними.

! Наверное, вы заметили, что все эти команды оканчиваются

на точку с запятой (;). Этим символом обозначают конец каждой

отдельной команды или инструкции языка JavaScript — примерно

так же, как точка отмечает конец предложения.

Числа и операторы

JavaScript позволяет выполнять основные математические опера-

ции, такие как сложение, вычитание, умножение и деление. Для

их записи используются символы +, −, * и /, которые называют

опе раторами.

Консоль JavaScript можно использовать как калькулятор. Один

из примеров — сложение 3 и 4 — нам уже знаком. Давайте вычислим

что-нибудь посложнее: сколько будет 12345 плюс 56789?

12345 + 56789;

69134

Посчитать это в уме не так уж просто, а JavaScript мгновенно спра-

вился с задачей.

26 Часть I. Основы

Можно сложить несколько чисел с помощью нескольких знаков «плюс»:

22 + 33 + 44;

Также JavaScript умеет вычитать...

1000 - 17;

983

умножать (с помощью символа «звездочка»)...

123 * 456;

56088

и делить (с помощью косой черты — слэша)...

12345 / 250;

49.38

Кроме того, можно объединять эти простые операции, составляя

более сложные выражения, вроде такого:

1234 + 57 * 3 - 31 / 4;

1397.25

Есть один нюанс — результат вычислений зависит

1234 + 57 * 3 - 31 / 4

от порядка, в котором JavaScript выполняет отдельные

операции. В математике существует правило, по которому

1234 + 171 - 31 / 4

умножение и деление выполняются прежде, чем сложение

и вычитание, и JavaScript ему следует.

1234 + 171 - 7.75

Порядок, в котором интерпретатор JavaScript выполняет

эти операции, показан на рис. 2.1. Сначала он умножает

1405 - 7.75

57 * 3, получая 171 (выделено красным). Затем делит 31 / 4,

получая 7.75 (выделено синим). Затем складывает 1234 + 171,

1397.25

получая 1405 (выделено зеленым). И наконец, вычитает

1405 − 7.75, что дает 1397.25 — окончательный результат.

Но как быть, если вы хотите выполнить сложение

Рис. 2.1. Очередность выполнения

и вычитание до умножения и деления? Для примера предпо-

операций: умножение, деление,

ложим, что у вас есть 1 брат, 3 сестры и 8 карамелек, которые

сложение, вычитание

2. Типы данных и переменные 27

вы решили поровну разделить между ними (свою долю вы уже прикарма-

нили). Нужно разделить 8 на общее количество братьев и сестер.

Попытаемся это сделать:

8 / 1 + 3;

Это не может быть верным ответом! Не получится дать

каждому родственнику по 11 карамелек, если у вас всего-то

8 конфет! Проблема в том, что JavaScript выполняет деление

прежде, чем сложение, то есть он делит 8 на 1 (что равно 8)

и затем прибавляет 3, получая в результате 11. Чтобы испра-

вить эту ошибку, заставим JavaScript сначала выполнить

сложение, воспользовавшись скобками:

8 / (1 + 3);

Так гораздо лучше — вышло по две карамельки каждому из род-

ственников. Скобки вынудили JavaScript сложить 1 и 3 до деления 8 на 4.

ПОПР ОБУ ЙТЕ !

Предположим, ваша подруга пытается подсчитать с помощью JavaScript,

сколько ей нужно купить воздушных шаров. Она устраивает вечеринку

и хочет, чтобы каждый из гостей смог надуть по 2 шарика. Сначала было

приглашено 15 человек, но потом ваша подруга позвала еще 9.

Она написала такой код:

15 + 9 * 2;

Однако ответ, судя по всему, неверен.

Где надо поставить скобки, чтобы JavaScript сначала складывал, а потом

умножал, и сколько шариков нужно вашей подруге на самом деле?

Переменные

Значениям в JavaScript можно давать имена, используя переменные.

Переменная похожа на ящичек, в который помещается лишь один пред-

мет. Чтобы положить туда что-то еще, прежнее содержимое придется

заменить.

Чтобы создать новую переменную, используйте ключевое слово var,

после которого укажите имя переменной. Ключевое слово — это слово,

28 Часть I. Основы

обладающее для JavaScript особым значением. В данном случае, когда

JavaScript встречает слово var, он понимает, что следом указано имя

новой переменной. Например, вот как создать переменную с именем nick:

var nick;

Undefined —

undefined

значение

не определено

Мы создали новую переменную под названием nick. В ответ консоль

выдала undefi ned — «значение не определено». Однако это не ошибка!

JavaScript всегда так делает, если команда не возвращает какого-либо

значения. Вы спросите, а что такое «возвращать значение»? Вот пример:

когда вы ввели 12345 + 56789;, консоль вернула значение 69134. Однако

в JavaScript команда создания переменной никакого значения не возвра-

щает, поэтому интерпретатор печатает undefi ned.

В этом примере и дальше мы будем давать переменным англоязыч-

ные имена, потому что английский — основной язык всей IT-области

и программы принято писать только латиницей (кроме комментариев

и строковых значений). Использовать русскоязычные имена перемен-

ных — это как если при составлении математических уравнений вме-

сто x и y вы использовали бы русские буквы. Можно, но не принято.

Итак, чтобы задать переменной значение, используйте знак «равно»:

var age = 12;

Аge — возраст

undefined

Задание значения переменной называют присваиванием (здесь мы

присваиваем значение 12 переменной age). И опять в консоли появля-

ется undefi ned, поскольку мы только что создали новую переменную.

(В дальнейших примерах я буду пропускать это undefi ned.)

Теперь в интерпретаторе есть переменная age, которой присвоено

значение 12. И если ввести в консоли имя age, интерпретатор выдаст

значение этой переменной:

age;

Здорово! При этом значение переменной не высечено в камне ( пере-

менные потому так и зовутся, что могут менять значения), и, если вам

вздумается его обновить, просто используйте знак «равно» еще раз.

age = 13;

2. Типы данных и переменные 29

На этот раз я не использовал ключевое слово var, поскольку перемен-

ная age уже существует. Писать var нужно только при создании пере-

менной, а не при ее использовании. И обратите внимание: поскольку мы

не создавали новой переменной, команда присваивания вернула значе-

ние 13, которое и было напечатано в следующей строке.

Вот чуть более сложный пример — решение задачи про карамельки

без помощи скобок:

Number

var numberOfSiblings = 1 + 3;

of siblings —

var numberOfCandies = 8;

число братьев

numberOfCandies / numberOfSiblings;

и сестер

Number

of candies —

число конфет

Сначала мы создали переменную с именем numberOfSiblings

(количество братьев и сестер) и присвоили ей значение выражения

1 + 3 (которое JavaScript вычислил, получив 4). Потом мы создали

переменную numberOfCandies (количество карамелек) и присво-

или ей значение 8. И наконец, мы ввели: numberOfCandies / num-

berOfSiblings. Поскольку переменная numberOfCandies содержит

значение 8, а numberOfSiblings — 4, JavaScript вычислил, сколько

будет 8 / 4, вернув в результате 2.

Имена переменных

Вводя имена переменных, будьте внимательны и не допускайте опеча-

ток. Даже если вы перепутаете строчные и заглавные буквы, интерпре-

татор JavaScript не поймет, чего вы от него хотите! Например, если вы

случайно введете имя numberOfCandies со строчной буквой c, воз-

никнет ошибка:

numberOfcandies / numberOfSiblings;

Reference

ReferenceError: numberOfcandies is not defined

error —

ошибка

данных

Увы, JavaScript следует вашим указаниям буквально. Если вы непра-

вильно ввели имя переменной, JavaScript не поймет, что вы имели в виду,

и выдаст сообщение об ошибке.

Еще один нюанс именования переменных в JavaScript — в именах

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

чтения. Если бы я назвал переменную numberofcandies, без заглавных

букв, читать программу стало бы труднее, поскольку неясно, где в этом

имени заканчиваются отдельные слова.

Один из обычных способов решения этой проблемы — писать каждое

слово с заглавной буквы: NumberOfCandies. Такую манеру именования

30 Часть I. Основы

называют верблюжьей записью, поскольку выпирающие

заглавные буквы напоминают верблюжьи горбы.

Имена переменных принято начинать со строчной

буквы, поэтому с заглавной буквы обычно пишут все слова

имени, кроме самого первого: numberOfCandies. В этой

книге я также использую эту форму верблюжьей записи;

впрочем, вы можете называть свои переменные как вам

угодно!

Создание новых переменных на основе

вычислений

Можно создавать новые переменные, выполняя матема-

тические действия с переменными, созданными ранее.

Давайте с помощью переменных выясним, сколько секунд

в году и каков ваш возраст в секундах! Но для начала разбе-

ремся, сколько секунд в одном часе.

Сколько секунд в часе

Сначала создадим две новые переменные — secondsInAMinute

Seconds

(количество секунд в минуте) и minutesInAHour (количество минут

in a minute —

в часе) — и присвоим им обеим значение 60 (поскольку, как мы знаем,

секунд

в минуте

в минуте 60 секунд, а в часе 60 минут). Теперь создадим переменную

secondsInAHour (количество секунд в часе), и пусть ее значение рав-

Minutes

няется secondsInAMinute умножить на minutesInAHour. И нако-

in a hour —

нец в строке  введем secondsInAHour, что означает «покажи мне

минут в часе

содержимое переменной secondsInAHour», и JavaScript тут же выдаст

ответ: 3600.

var secondsInAMinute = 60;

var minutesInAnHour = 60;

var secondsInAnHour = secondsInAMinute * minutesInAnHour;

 secondsInAnHour;

3600

Сколько секунд в сутках

Теперь создадим переменную hoursInADay (количество

Hours in a day —

часов в сутках) и присвоим ей значение 24. Затем созда-

часов в день

дим переменную secondsInADay (количество секунд

в сутках), и пусть она равняется secondsInAHour умно-

жить на hoursInADay. Запросив в строке  значение

secondsInADay, получим 86 400 — именно столько

секунд в сутках.

2. Типы данных и переменные 31

var hoursInADay = 24;

var secondsInADay = secondsInAnHour * hoursInADay;

 secondsInADay;

86400

Сколько секунд в году

Days in a year —

И наконец, создадим переменные daysInAYear (количество дней в году)

дней в году

и secondsInAYear (количество секунд в году): daysInAYear присвоим

значение 365, а secondsInAYear пусть равняется secondsInADay

умножить на daysInAYear. Запрашиваем значение secondsInAYear

и видим, что это число 31 536 000 (более 31 миллиона секунд!).

var daysInAYear = 365;

var secondsInAYear = secondsInADay * daysInAYear;

secondsInAYear;

31536000

Возраст в секундах

Теперь, зная, сколько секунд в году, вы можете запросто узнать свой воз-

раст в секундах (с точностью до последнего дня рождения). К примеру,

когда я пишу эти строки, мне 29 лет:

var age = 29;

age * secondsInAYear;

914544000

Чтобы вычислить свой возраст в секундах, введите тот же самый код,

но замените значение переменной age на ваш возраст. Или просто заме-

ните эту переменную на число, соответствующее вашему возрасту:

29 * secondsInAYear;

914544000

Смотрите-ка, мне исполнилось больше 900 миллионов секунд!

А вам?

Инкремент и декремент

Вам как программисту понадобится увеличивать или уменьшать зна-

чения числовых переменных на единицу. Например, у вас в программе

может быть переменная для подсчета, сколько раз за день вам сказали

32 Часть I. Основы

«Дай пять!». И при каждом новом приветствии эту переменную надо ...

Все права на текст принадлежат автору: Ник Морган.
Это короткий фрагмент для ознакомления с книгой.

Купить эту книгу в ЛитРес