Кирупа Чиннатхамби

JavaScript с нуля
Серия «Библиотека программиста»
Перевел с английского Д. Акуратер
Заведующая редакцией Ю. Сергиенко
Руководитель проекта А. Питиримов
Ведущий редактор К. Тульцева
Литературный редактор Н. Нефидова
Обложка В. Мостипан
Корректоры Н. Петрова, М. Одинокова
Верстка Е. Неволайнен

ББК 32.988.02-018
УДК 004.738.5

Кирупа Чиннатхамби
К43 JavaScript с нуля. — СПб.: Питер, 2021. — 400 с.: ил. — (Серия «Библиотека
программиста»).
ISBN 978-5-4461-1701-7
JavaScript еще никогда не был так прост! Вы узнаете все возможности языка программирования
без общих фраз и неясных терминов. Подробные примеры, иллюстрации и схемы будут понятны даже
новичку. Легкая подача информации и живой юмор автора превратят нудное заучивание в заниматель-
ную практику по написанию кода. Дойдя до последней главы, вы настолько прокачаете свои навыки,
что сможете решить практически любую задачу, будь то простое перемещение элементов на странице
или даже собственная браузерная игра.

16+ (В соответствии с Федеральным законом от 29 декабря 2010 г. № 436-ФЗ.)

ISBN 978-0136502890 англ. Authorized translation from the English language edition,
entitled JAVASCRIPT ABSOLUTE BEGINNER'S GUIDE, 2nd Edition
by KIRUPA CHINNATHAMBI, published by Pearson Education, Inc,
publishing as Que Publishing. © 2020 Pearson Education, Inc.
ISBN 978-5-4461-1701-7 © Перевод на русский язык ООО Издательство «Питер», 2021
© Издание на русском языке, оформление ООО Издательство «Питер», 2021
© Серия «Библиотека программиста», 2021

Права получены по соглашению с Pearson Education, Inc. Все права защищены. Никакая часть данной книги не мо-
жет быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских прав.

Изготовлено в России. Изготовитель: ООО «Прогресс книга».

Место нахождения и фактический адрес: 194044, Россия, г. Санкт-Петербург,
Б. Сампсониевский пр., д. 29А, пом. 52. Тел.: +78127037373.
Дата изготовления: 04.2021. Наименование: книжная продукция.
Срок годности: не ограничен.
Налоговая льгота — общероссийский классификатор продукции ОК 034-2014,
58.11.12 — Книги печатные профессиональные, технические и научные.
Импортер в Беларусь: ООО «ПИТЕР М», 220020, РБ, г. Минск,
ул. Тимирязева, д. 121/3, к. 214, тел./факс: 208 80 01.
Подписано в печать 24.03.21. Формат 70х100/16. Бумага офсетная. Усл. п. л. 32,250. Тираж 1000. Заказ
ОГЛАВЛЕНИЕ

Благодарности......................................................................................................... 18

Об авторе................................................................................................................. 18

От издательства...................................................................................................... 19

Введение .........................................................................................................20
Парле ву JavaScript?................................................................................................ 21

Связь со мной ......................................................................................................... 22

Глава 1. Hello, world!.......................................................................................23

Что такое JavaScript?.............................................................................................. 24

Hello, world! ............................................................................................................ 25

HTML-документ........................................................................................................26

Обзор кода: инструкции и функции....................................................................... 28

ЧАСТЬ I. Элементарно, Ватсон

Глава 2. Значения и переменные ..................................................................31

Использование переменных . ................................................................................ 32

Еще кое-что о переменных..................................................................................... 33

Именование переменных . ......................................................................................33
Что еще нужно знать об объявлении и инициализации переменных..................34

Глава 3. Функции ............................................................................................37

Что такое функция?................................................................................................. 39

Простая функция..................................................................................................... 40

Создание функции, принимающей аргументы...................................................... 44

Создание функции, возвращающей результат..................................................... 48

Ключевое слово return.............................................................................................48
Ранний выход из функции . .....................................................................................49
8    Оглавление

Глава 4. Условные обозначения: if…else и switch . ......................................51

Инструкция if…else ................................................................................................ 53
Встречайте: условные операторы! ........................................................................55
Создание более сложных выражений . ..................................................................57
Варианты инструкций if…else ................................................................................58
Фух ...........................................................................................................................60

Инструкция switch .................................................................................................. 60

Использование инструкции switch..........................................................................60
Сходство с инструкцией if…else.............................................................................64

Что же использовать . ............................................................................................ 66

Глава 5. Циклы for, while и do…while.............................................................68

Цикл for.................................................................................................................... 70
Стартовое значение.................................................................................................72
Шаг............................................................................................................................73
Условие, или продолжительность цикла ...............................................................73
Собирая все вместе.................................................................................................74

Некоторые примеры цикла for................................................................................ 75

Прерывание цикла . .................................................................................................75
Пропуск итерации ...................................................................................................76
Возврат назад ..........................................................................................................76
Числа использовать необязательно.......................................................................77
О нет! Он не сделал этого!.....................................................................................77

Другие циклы........................................................................................................... 77
Цикл while ................................................................................................................78
Цикл do...while..........................................................................................................78

Глава 6. Комментирование кода… Что за?!..................................................80

Что такое комментарии?......................................................................................... 81
Однострочные комментарии...................................................................................82
Многострочные комментарии.................................................................................83

Лучшие способы комментирования....................................................................... 84

 ОГЛАВЛЕНИЕ    9

Глава 7. Таймеры.............................................................................................87
Задержка с помощью setTimeout .......................................................................... 87
Выполнение циклов с помощью setInterval............................................................89
Плавная анимация с помощью requestAnimationFrame . ......................................90

Глава 8. Область видимости переменных ....................................................93

Глобальная область видимости . ........................................................................... 94

Локальная область видимости .............................................................................. 95

Особенности областей видимости . ...................................................................... 97

Области блоков....................................................................................................... 97
Как JavaScript обрабатывает переменные............................................................100
Замыкания...............................................................................................................102

Глава 9. Замыкания........................................................................................103
Функции внутри функций...................................................................................... 104

Когда внутренние функции независимы . ........................................................... 108

Глава 10. Где можно размещать код?..........................................................115

Подход № 1: весь код в HTML‑документе........................................................... 118

Подход № 2: код существует в отдельном файле.............................................. 119

JS-файл ..................................................................................................................119
Ссылка на JavaScript-файл.....................................................................................120

Итак, какой подход использовать?....................................................................... 121

Да, мой код будет использоваться в нескольких документах!...........................123
Нет, мой код используется только в одном HTML‑документе...........................124

ЧАСТЬ II. Это объектно ориентированный мир, приятель!

Глава 11. Вывод сообщений в консоль........................................................126

Знакомство с консолью ....................................................................................... 127

Отображение консоли ......................................................................................... 128

Для тех, кому важны детали . .............................................................................. 131

10    Оглавление

Журналирование в консоли.................................................................................. 132

Знакомство с методом log.....................................................................................132
Предопределенный текст — не предел...............................................................134
Отображение предупреждений и ошибок............................................................135

Глава 12. О пицце, типах, примитивах и объектах . ...................................138

Сначала поговорим о пицце.................................................................................. 139

От пиццы к JavaScript............................................................................................ 141

Что такое объект?................................................................................................. 143

Предопределенные объекты в JavaScript . ......................................................... 145

Глава 13. Массивы.........................................................................................147

Создание массива ................................................................................................ 148

Обращение к значениям массива ....................................................................... 148

Добавление элементов ........................................................................................ 150

Удаление элементов............................................................................................. 151

Поиск элементов в массиве................................................................................. 152

Слияние массивов................................................................................................. 153

Отображение, фильтрация и сокращение массивов.......................................... 154

Консервативный способ........................................................................................ 154

Изменение каждого элемента с помощью map ................................................. 155

Фильтрация элементов..........................................................................................157

Получение одного значения из массива элементов . ........................................ 158

Экскурс в функциональное программирование.................................................. 161

Глава 14. Строки............................................................................................162

Основы................................................................................................................... 162

Свойства и методы строк . ................................................................................... 164

Обращение к отдельным символам . ...................................................................164
Совмещение (конкатенация) строк.......................................................................166
 ОГЛАВЛЕНИЕ    11

Получение подстрок из строк...............................................................................167

Разделение строки с помощью split ....................................................................168
Поиск по строке ....................................................................................................169
Строки в нижнем и верхнем регистрах................................................................170

Глава 15. Когда примитивы ведут себя как объекты..................................172

Строки — это не единственная проблема . ........................................................ 173

Давайте все-таки выберем строки....................................................................... 173

Почему это важно ................................................................................................ 175

Глава 16. Числа..............................................................................................177

Использование чисел............................................................................................ 177

Операторы............................................................................................................. 178
Простые математические действия......................................................................179

Увеличение и уменьшение................................................................................... 180

Шестнадцатеричные и восьмеричные значения . .............................................. 181

Особые значения — Infinity и NaN ...................................................................... 182

Infinity......................................................................................................................182
NaN..........................................................................................................................183

Объект Math.......................................................................................................... 183

Константы...............................................................................................................184
Округление чисел..................................................................................................185
Тригонометрические функции .............................................................................186
Степени и квадратные корни . ..............................................................................186
Получение абсолютного значения........................................................................187

Случайные числа .................................................................................................. 187

Глава 17. Методы получения и изменения данных.....................................189

История двух свойств .......................................................................................... 190

Знакомство с геттерами и сеттерами . ............................................................... 192

Генератор крика.....................................................................................................193
12    Оглавление

Регистрирование действий ..................................................................................193

Проверка значения свойства.................................................................................194

Глава 18. Об объектах подробнее................................................................196

Знакомство с объектом........................................................................................ 196
Создание объектов................................................................................................197
Добавление свойств . ............................................................................................198
Удаление свойств...................................................................................................201
Что же происходит под капотом?.........................................................................202

Создание пользовательских объектов................................................................ 206

Ключевое слово this.............................................................................................. 210

Глава 19. Расширение встроенных объектов..............................................214

И снова приветствуем прототип!......................................................................... 215

Спорность расширения встроенных объектов.................................................... 220

Вы не контролируете будущее встроенного объекта.........................................220
Некоторую функциональность не следует расширять или переопределять.......220

Глава 20. Использование классов................................................................222

Синтаксис классов и создание объектов . .......................................................... 223
Создание объекта .................................................................................................223
Знакомьтесь с конструктором . ............................................................................225
Что помещается в класс........................................................................................227

Расширение объектов........................................................................................... 230

Глава 21. Логические типы и строгие операторы === и !==.....................236

Объект Boolean .................................................................................................... 237

Логическая функция.............................................................................................. 237

Операторы строгого равенства и неравенства................................................... 239

Глава 22. null и undefined..............................................................................242

Null.......................................................................................................................... 242

Undefined .............................................................................................................. 243

 ОГЛАВЛЕНИЕ    13

ЧАСТЬ III. DOM, милый DOM

Глава 23. Все о JSON (объектная нотация JavaScript)................................246

Что такое JSON?................................................................................................... 246

Объект JSON изнутри........................................................................................... 250

Имена свойств........................................................................................................250
Значения ................................................................................................................250

Чтение данных JSON ........................................................................................... 254

Парсинг JSON-подобных данных в действительный JSON.................................256

Запись данных JSON?........................................................................................... 257

Глава 24. JS, браузер и DOM . .....................................................................258

Что делают HTML, CSS и JavaScript ................................................................... 258

HTML определяет структуру................................................................................ 259

Приукрась мой мир, CSS!..................................................................................... 261

Настало время JavaScript!.................................................................................... 262

Знакомьтесь с объектной моделью документа ................................................. 263

Объект window.......................................................................................................265
Объект document ..................................................................................................266

Глава 25. Поиск элементов в DOM..............................................................268

Знакомьтесь с семейством querySelector .......................................................... 269
querySelector...........................................................................................................270
querySelectorAll.......................................................................................................270

Таков синтаксис селектора CSS .......................................................................... 271

Глава 26. Модифицирование элементов DOM ..........................................274

Элементы DOM — они как объекты.................................................................... 275

Пора модифицировать элементы DOM............................................................... 277

Изменение значения текста элемента.................................................................279
Значения атрибутов...............................................................................................281
14    Оглавление

Глава 27. Cтиль контента..............................................................................284

Зачем устанавливать стили с помощью JavaScript?........................................... 285

Два подхода стилизации....................................................................................... 286

Установка стиля напрямую....................................................................................286
Добавление и удаление классов с помощью JavaScript......................................287

Проверка наличия значения класса..................................................................... 290

Углубление.............................................................................................................290

Глава 28. Перемещение по DOM.................................................................291

Поиск пути............................................................................................................. 292
Работа с братьями и родителями..........................................................................294
Давай заведем детей!............................................................................................295

Складываем все воедино...................................................................................... 296

Проверка наличия потомка . .................................................................................296
Обращение ко всем потомкам..............................................................................296
Прогулка по DOM . ................................................................................................297

Глава 29. Создание и удаление элементов DOM . .....................................298

Создание элементов............................................................................................. 299

Удаление элементов............................................................................................. 306

Клонирование элементов..................................................................................... 307

Глава 30. Браузерные инструменты разработчика.....................................313

Знакомство с инструментами разработчика....................................................... 314
Просмотр DOM . ....................................................................................................316
Отладка JavaScript . ...............................................................................................321
Знакомство с консолью ........................................................................................326
Инспектирование объектов . ................................................................................327
Журналирование сообщений . ..............................................................................328
 ОГЛАВЛЕНИЕ    15

ЧАСТЬ IV. Полны событиями

Глава 31. События . .......................................................................................331

Что такое события?............................................................................................... 332

События и JavaScript............................................................................................. 334

1. Прослушивание событий...................................................................................334
2. Реагирование на события..................................................................................336

Простой пример ................................................................................................... 337

Аргументы и типы событий . ................................................................................ 339

Глава 32. Всплытие и погружение событий.................................................342

Событие опускается. Событие поднимается....................................................... 343

Знакомьтесь с фазами.......................................................................................... 346

Кому это важно?.................................................................................................... 349

Прерывание события . .......................................................................................... 349

Глава 33. События мыши . ............................................................................353

Знакомьтесь с событиями мыши . ....................................................................... 354
Одинарный или двойной клик ..............................................................................354
Наведение и отведение курсора...........................................................................356
События mousedown и mouseup . ........................................................................357
Событие услышано снова… и снова… и снова! . ................................................359
Контекстное меню ................................................................................................359

Свойства MouseEvent........................................................................................... 361

Глобальная позиция мыши....................................................................................361
Позиция курсора мыши в браузере .....................................................................362
Определение нажатой кнопки . ............................................................................362
Работа с колесиком мыши.....................................................................................364

Глава 34. События клавиатуры.....................................................................366

Знакомьтесь с событиями клавиатуры................................................................ 367

Использование событий ...................................................................................... 368

16    Оглавление

Свойства события Keyboard.................................................................................. 369

Примеры . .............................................................................................................. 370

Проверка нажатия конкретной клавиши..............................................................370
Совершение действий при нажатии клавиш стрелок . .......................................371
Определение нажатия нескольких клавиш..........................................................371

Глава 35. События загрузки страницы и прочее.........................................375

Что происходит в процессе загрузки страницы.................................................. 376
Стадия первая.........................................................................................................377
Стадия вторая.........................................................................................................377
Стадия третья.........................................................................................................378

DOMContentLoaded и load Events........................................................................ 379

Сценарии и их расположение в DOM.................................................................. 380

Элементы сценария async и defer........................................................................ 383

async . .....................................................................................................................384
defer.........................................................................................................................384

Глава 36. Обработка событий для нескольких элементов.........................387

Как все это делается?........................................................................................... 389
Плохое решение . ..................................................................................................390
Хорошее решение..................................................................................................391
Объединяя все сказанное . ...................................................................................394

Глава 37. Заключение....................................................................................396

Глоссарий.......................................................................................................398
 В ЭТОЙ ГЛАВЕ:

1
y разберемся, почему JavaScript прекрасен;
y немного попотеем, разбирая простой код;
y узнаем, что нас ждет впереди.

HELLO, WORLD!
Суть HTML в отображении, а CSS — в хорошей картинке. С помощью
их обоих вы можете создать нечто прекрасное вроде примера с прогно-
зом погоды, доступного для просмотра здесь: http://bit.ly/kirupaWeather.
На рис. 1.1 показано, как это выглядит.

РИС. 1.1.
Приложение прогноза погоды — яркий пример дизайна страницы,
выполненного с помощью CSS
24    ГЛАВА 1. Hello, world!

Несмотря на то как изящно смотрятся сайты, выполненные с помощью

CSS и HTML, они до боли статичны. Они не подстроятся и не среагируют
на ваши действия. Эффект, созданный этой парочкой, напоминает не-
прерывный просмотр любимой серии «Друзей», что рано или поздно все
равно навеет на вас скуку. Сайты, которые вы используете часто (вроде
тех, что изображены на рис. 1.2), обладают некоторой степенью интер­
активности и персонализации, что само по себе значительно выходит
за пределы возможностей HTML и CSS.
Для оживления контента на вашем сайте вам пригодится сторонний
помощник. Им вполне может стать JavaScript!

РИС. 1.2.
Примеры сайтов, функциональность которых во многом полагается на JavaScript

Что такое JavaScript?

JavaScript — это современный язык программирования и партнер
HTML и CSS. Если коротко, этот язык позволяет привнести в доку-
мент интерактивность. Вот краткий перечень возможностей, которые
предоставляет JavaScript:
y Прослушивание событий, будь то клик мыши или выполнение коман­ды.
y Изменение HTML- и CSS-страниц после их загрузки.
y Задание незаурядных траекторий перемещения объектов по экрану.
 Hello, world!    25

y Создание увлекательнейших браузерных игр вроде Cut the Rope.

y Обмен данными между сервером и браузером.
y Взаимодействие с веб-камерой, микрофоном и другими устрой-
ствами.
А также многое другое! Написание же JavaScript кода весьма несложно.
Вы комбинируете слова, большинство из которых встречается в англий-
ском языке, отдавая таким образом браузеру команды. Следующий
пример — некое сочетание классики JavaScript в новой доработке:
let defaultName = "JavaScript";

function sayHello(name) {
if (name == null) {
alert("Hello, " + defaultName + "!");
} else {
alert("Hello, " + name + "!");
}
}

Ничего страшного, если вам пока ничего не понятно. Просто обратите

внимание на то, как этот код выглядит. Заметьте, что использовано
много английских слов: function, if, else, alert, name. Помимо них
есть еще странные символы и знаки из тех областей клавиатуры, куда
взгляд обычно не падает. Но скоро, по мере того как их количество
начнет расти на ваших глазах, вы постепенно разберетесь, за что от-
вечает каждый элемент приведенного кода.
Как бы там ни было, пока что этой вспомогательной информации до-
статочно. Хоть вы, возможно, ожидали найти здесь историю JavaScript
и справку о его создателях, я не буду утомлять вас подобными скучными
вещами. Вместо этого мне хотелось бы, чтобы вы немного потрениро-
вались в написании JavaScript-кода и к концу урока создали что-нибудь
милое и простое, отображающее текст в браузере.

Hello, world!
Возможно, сейчас вы ощутите недостаток навыков для написания кода.
Тем более если вы не знакомы с программированием даже в общих
чертах. Но уже скоро вы поймете, что JavaScript не такой бесячий
и сложный, каким ему хочется казаться. Итак, приступим.
26    ГЛАВА 1. Hello, world!

ВАЖНО ЗНАТЬ ОСНОВЫ ВЕБ-ПРОГРАММИРОВАНИЯ

Чтобы начать писать на JavaScript, вам нужно знать основы создания веб-
страниц, использования редактора кода и добавления HTML/CSS. Если вы
не знакомы с этими вещами, призываю вас для начала прочесть статью
«Создание вашей первой веб-страницы» (https://www.kirupa.com/html5/
building_your_first_web_page.htm). Это поможет плавно настроиться на
восприятие дальнейшей информации.

HTML-документ
Первое, что вам нужно, — это открыть HTML-документ. В этом доку-
менте вы будете записывать свой код на JavaScript. Затем запустите
свой любимый редактор кода. Если у вас такового пока нет, рекомендую
использовать Visual Studio Code. После запуска редактора перейдите
к созданию нового файла. В Visual Studio Code вы увидите вкладку
Untitled, как на рис. 1.3.

РИС. 1.3.
Вкладка Untitled-1 в Visual Studio Code

Сохраните созданный файл через меню File | Save. Вам нужно указать
его имя и рабочий стол. После сохранения добавьте в него следующий
код HTML:
 Hello, world!    27

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>An Interesting Title Goes Here</title>

<style>

</style>
</head>

<body>
<script>

</script>

</body>

</html>

После добавления этого HTML сохраните документ для подтвержде-

ния изменений. Теперь можно посмотреть, как будет выглядеть ваша
страница в браузере.
Проследуйте на рабочий стол в проводнике или поисковике и двойным
щелчком откройте файл hello_world.htm. Вы увидите, как появится ваш
браузер по умолчанию, который отобразит имя этого файла. На рис. 1.4
показано примерно то, что вы увидите у себя на экране.
Если все сработало, как надо, вы увидите пустую страницу, и это вполне
нормально. Несмотря на то что страница имеет содержимое, на ней
ничего не отображается. Скоро мы это исправим. Для этого потребуется
вернуться в редактор и обратиться к тегу <script>, который находится
в нижней части HTML:
<script>

</script>

Тег script выступает в роли контейнера, в который вы можете по-

мещать любой JavaScript-код для запуска. Мы же хотим отобразить
слова hello, world! в диалоговом окне, появляющемся при загрузке
HTML-страницы. Для этого внутрь сегмента script добавим следую-
щую строку:
<script>
alert("hello, world!");
</script>
28    ГЛАВА 1. Hello, world!

Сохраните файл HTML и запустите его в браузере. Обратите внимание

на то, что увидите после загрузки страницы. Должно появиться диа-
логовое окно (рис. 1.5).
Если это была ваша первая попытка написания кода на JavaScript, при-
мите мои поздравления! Теперь давайте разберем, как именно все это
у вас получилось.

РИС. 1.4.
Проименованная вкладка в Visual Studio Code

РИС. 1.5.
Так должно выглядеть диалоговое окно hello, world

Обзор кода: инструкции и функции

Вы только что написали очень простую инструкцию JavaScript. Инструк-
ция состоит из логического набора действий, которые должен выпол-
нить браузер. В обычном приложении содержится великое множество
инструкций. В нашем же случае есть только одна:
alert("hello, world!");
 Обзор кода: инструкции и функции    29

Понять, что перед вами инструкция, можно, обратив внимание на ее

последний знак. Обычно это точка с запятой (;).
Внутри инструкции вы увидите всевозможный незатейливый жаргон
на JavaScript. И наш код длиной в одну строку — не исключение. Мы
также видим странный элемент alert, который задает отображение.
Это пример привычного английского слова, имеющего схожее значение
в мире языка JavaScript. Оно призвано привлечь ваше внимание путем
отображения некоего текста.
Если быть более точным, слово alert — это то, что часто называют
функцией. Вы будете использовать функции повсеместно. По своей
сути они являются фрагментами переиспользуемого кода, который
что-то делает. Это «что-то» может определяться вами, сторонней
библиотекой или же самим фреймворком JavaScript. В нашем случае
код, который дает функции alert магическую способность отображать
диалоговое окно с переданным в нее сообщением, существует в глуби-
нах браузера. Все, что вам на самом деле нужно знать, так это то, что
для использования функции alert ее нужно просто вызвать и передать
ей сообщение для отображения. Все остальное будет сделано за вас.
Вернемся к нашему примеру. Обратите внимание на то, как я определяю
отображение текста hello, world!. Я заключаю эти слова в кавычки:
<script>
alert("hello, world!");
</script>

При работе с текстом (наиболее часто используемый термин — стро-

ка) он всегда заключается в одинарные или двойные кавычки. И как
бы странно это ни прозвучало, но у каждого языка программирования
свои особенности. И эта — одна из многих, с которыми вы столкнетесь
при дальнейшем знакомстве с JavaScript. Очень скоро мы рассмотрим
строки более подробно, а пока просто наслаждайтесь их видом.
Сделаем еще шаг. Вместо hello, world! укажите свои имя и фамилию.
Вот пример кода, в котором использовано мое имя:
<script>
alert("Kirupa Chinnathambi!");
</script>

Запустите приложение, и тогда вы увидите свое имя в диалоговом

окне (рис. 1.6).
30    ГЛАВА 1. Hello, world!

РИС. 1.6.
Теперь в диалоговом окне отображается ваше имя

Проще простого, не так ли? Вы можете вписать в строку что угодно:

имя питомца, название любимого сериала и т. д. — а JavaScript все
это отобразит.

КОРОТКО О ГЛАВНОМ
В этой главе вы познакомились с написанием кода на JavaScript. В процессе
этого знакомства я дал некоторые принципы и термины. Разумеется, я не
жду, что вы все это сразу запомните. В следующих уроках мы возьмем
наиболее интересные части пройденного материала и проработаем их
более детально. В конце концов, я уверен, что с помощью JS вам хочется
создавать штуки, выходящие далеко за рамки примитивного отображения
текста с помощью диалогового окна.
Забегая вперед, скажу, что в конце каждой главы есть набор ссылок, веду-
щих на ресурсы, созданные мной или другими разработчиками. Вы сможете
почерпнуть больше информации, взглянуть на пройденный материал под
другим углом, а также опробовать свои силы на практике, решая более
сложные примеры. Рассматривайте материал из этой книги как трамплин,
позволяющий допрыгнуть до более крутых штук.
Если у вас есть какие-либо вопросы относительно этой главы, оставляйте
свои сообщения на форуме https://forum.kirupa.com, где вам оперативно
ответит кто-то из крутых разработчиков или я.
 В ЭТОЙ ГЛАВЕ:
y узнаем, как использовать значения для хранения
данных;

2
y создадим свой код, задавая значения;
y вкратце ознакомимся с соглашениями о при-
своении имен переменных.

ЗНАЧЕНИЯ И ПЕРЕМЕННЫЕ
Принято считать, что каждый фрагмент данных на JavaScript, предо-
ставляемый или используемый нами, содержит значение. Из уже рас-
смотренного примера мы узнали, что вместо слов hello, world! могут
быть любые слова, с помощью которых мы задаем функцию alert:
alert("hello, world!");

В JavaScript эти слова несут в себе определенную информацию и счи-

таются значениями. Мы могли об этом особенно не задумываться,
набирая их на клавиатуре, но во вселенной JavaScript каждый элемент
данных, с которым мы имеем дело, считается значением.
Итак, почему это так важно понимать? А все потому, что нам предстоит
много работать со значениями. И важно, чтобы эта работа не свела вас
с ума. Чтобы облегчить себе жизнь, вам пригодятся умения:
y легко идентифицировать эти значения;
y повторно их использовать в ходе разработки приложения, не при-
бегая к лишнему дублированию самого значения.
Две вещи, на которые предстоит потратить все наше оставшееся вре-
мя, — это переменные. Давайте рассмотрим их поподробнее.
32    ГЛАВА 2. Значения и переменные

Использование переменных
Переменная — это идентификатор значения. Чтобы не набирать hello,
world! каждый раз, когда вы хотите использовать этот фрагмент для
написания кода приложения, можно присвоить эту фразу переменной
и использовать ее тогда, когда нужно. Еще чуть-чуть, и вам станет
гораздо понятнее — я обещаю!
Есть несколько способов, как использовать переменные. В большинстве
случаев лучше всего полагаться на ключевое слово let, после которого
вы можете задать имя своей переменной:
let myText

В этой строке кода мы объявляем переменную myText. На данный

момент наша переменная просто объявлена и не содержит никакого
значения, то есть является пустой оболочкой.
Давайте исправим это через инициализацию переменной значением.
К примеру, hello, world!.
let myText = "hello, world!";

С этого момента при выполнении кода значение hello, world! будет

ассоциироваться с нашей переменной myText. Теперь соберем все части
в единое выражение. Если у вас все еще открыт файл hello_world.htm,
замените содержимое тега script следующим (или создайте новый
файл, добавив в него следующий код):
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>An Interesting Title Goes Here</title>

<style>

</style>
</head>

<body>
<script>
let myText = "hello, world!";
alert(myText);
</script>

</body>

</html>
 Еще кое-что о переменных    33

Обратите внимание, что мы больше не передаем текст hello, world!

в функцию alert напрямую. Вместо этого мы передаем в нее имя пере-
менной myText. Конечный результат такой же, то есть при выполнении
этой строчки отобразится функция alert с надписью hello, world!.
Благодаря этому изменению нам достаточно определить hello, world!
в одном месте кода. И если мы в дальнейшем захотим изменить hello,
world!, к примеру, на The dog ate my homework! (Собака съела мою
домашку!), то все, что нам понадобится, — это просто изменить фразу,
определенную в переменной myText:
let myText = "The dog ate my homework!";
alert(myText);

Теперь во всех секциях кода при обращении к переменной myText

мы будем видеть новый текст. Невозможно придумать ничего более
удобного и значительно экономящего время, особенно при работе со
сложными приложениями, что позволяет вносить изменение в одном
месте, и при этом это действие отразится в остальных частях кода.
Вы увидите другие, менее тривиальные примеры со значимыми пере-
менными далее.

Еще кое-что о переменных

Материал из предыдущей главы позволяет нам сильно продвинуться
вперед. По меньшей мере, в той части, которая касается знакомства
с JavaScript. Сейчас мы не станем слишком углубляться в переменные,
так как займемся ими в следующих главах, когда рассмотрим код с важ-
ными переменными посложнее. И прежде чем закругляться, затронем
еще несколько моментов.

Именование переменных
Мы вольны именовать переменные так, как нам подходит. Игнорируя
то, какие имена нам следует выбрать с точки зрения философских,
культурных или стилистических предпочтений, с технической точки
зрения язык JavaScript очень гибок и позволяет включать в них символы.
Однако эта гибкость не безгранична, поэтому при именовании следует
помнить о следующем:
34    ГЛАВА 2. Значения и переменные

y Имя переменной может содержать один символ или столько, сколько

вы хотите, — только представьте, тысячи тысяч символов!
y Переменные могут начинаться с буквы, нижнего подчеркивания или
символа $, но не могут начинаться с числа.
y Следом за первым символом переменные могут состоять из любого
сочетания букв, подчеркиваний, чисел и $. Мы также можем смеши-
вать и комбинировать нижний и верхний регистры, пока не надоест.
y Пробелы не допускаются.
Ниже приведены некоторые примеры имен переменных:
let myText;
let $;
let r8;
let _counter;
let $field;
let thisIsALongVariableName_butItCouldBeLonger;
let $abc;
let OldSchoolNamingScheme;

Чтобы определить, является ли имя переменной допустимым, восполь-

зуйтесь прекрасным сервисом по проверке имен переменных JavaScript
https://mothereff.in/js-variables.
Помимо допустимых имен есть еще другие важные моменты, такие
как соглашения о присвоении имен и то, сколько людей обычно име-
нуют переменные и другие компоненты, которые вы идентифицируете
с именем. Мы затронем эти темы в следующих главах.

Что еще нужно знать об объявлении

и инициализации переменных
Одна из особенностей JavaScript, о которой вы скоро узнаете, состоит
в том, что это всепрощающий язык, который может дать вам множество
поблажек.

Объявление переменной не обязательно

Например, нам не обязательно использовать ключевое слово let, чтобы
объявить переменную. Можно просто написать так:
myText = "hello, world!";
alert(myText);
 Еще кое-что о переменных    35

Обратите внимание, что переменная myText использована, не будучи

формально объявленной с помощью ключевого слова let. И хотя так де-
лать и не рекомендуется, это считается вполне допустимым. В конечном
счете мы получаем переменную с именем myText. Единственный нюанс
состоит в том, что при объявлении переменной подобным образом мы
делаем это глобально. Не беспокойтесь, если последнее предложение
вам не понятно. Мы поговорим о значении слова «глобально» позже,
когда рассмотрим область видимость переменных.

Объявлять и инициализировать переменные

в отдельных строках — это круто!
Стоит упомянуть, что объявление и инициализация переменной не
обязательно должны быть частью одной инструкции. Можно разделить
эти действия на разные строки:
let myText;
myText = "hello, world!";
alert(myText);

На практике мы будем разделять их постоянно.

Изменение значений переменных и ключевое слово const

И наконец, отмечу, что мы можем менять значение переменной, объ-
явленной с let, на что угодно и когда угодно:
let myText;
myText = "hello, world!";
myText = 99;
myText = 4 * 10;
myText = true;
myText = undefined;
alert(myText);

Если вы работали с более требовательными языками, которые не по-

зволяют переменным хранить разные типы данных, то знайте, что эту
гибкость JavaScript одни восхваляют, а другие ненавидят. Тем не менее
в JavaScript есть способ запретить изменять значения переменной по-
сле инициализации. Это можно сделать с помощью ключевого слова
const, с которым мы можем объявлять и инициализировать переменные:

const siteURL = "https://www.google.com";

alert(siteURL);