Владимир Дронов

Владимир Дронов

ауа с г ір і

/Отакої}ЦаЯ НіїиЦінних

Санкт-Петербург
«БХВ-Петербург»
2021
УДК 004.438JavaScript
ББК 32.973.26-018.1
Д75

Дронов В. А.
Д75 JavaScript: 20 уроков для начинающих. — СПб.: БХВ-Петербург, 2021. —
352 с.: ил. — (Для начинающих)
ISBN 978-5-9775-6589-9
В книге 20 иллюстрированных уроков, 40 практических упражнений на тему
программирования веб-сценариев и более 70 заданий для самостоятельной работы.
Изложены основы JavaScript: данные и операторы, выражения и управляющие кон­
струкции, функции, классы, объекты и массивы, средства отладки. Раскрыты меха­
низмы управления веб-страницами: события и их обработка, управление элемента­
ми, графика и мультимедиа, веб-формы и элементы управления, регулярные
выражения, навигация и управление окнами. Рассмотрена работа с HTML API и
компонентное программирование: асинхронное программирование, работа с внеш­
ними данными, программная графика, объявление своих классов, создание компо­
нентов. Освещены технологии взаимодействия с сервером: AJAX, PHP, разработка
фронтендов и бэкендов, серверные сообщения.
Электронный архив на сайте издательства содержит коды всех примеров и ре­
зультаты выполнения упражнений.
Для начинающих веб-разработчиков

УДК 004.43 8JavaScript

ББК 32.973.26-018.1

Группа подготовки издания:

Руководитель проекта Евгений Рыбаков

Зав. редакцией Екатерина Сависте
Компьютерная верстка Ольги Сергиенко
Дизайн обложки Карины Соловьевой

Подписано в печать 07.07.20.

Формат 70хЮ 01/1в. Печать офсетная. Уел. печ. л. 28,38.
Тираж 1000 экз. Заказ №11504.
"БХВ-Петербург", 191036, Санкт-Петербург, Гончарная ул., 20.
Отпечатано с готового оригинал-макета
ООО "Принт-М", 142300, М.О., г. Чехов, ул. Полиграфистов, д. 1

ISBN 978-5-9775-6589-9 © ООО "БХВ", 2021

©Оформление ООО "БХВ-Петербург", 2021
 Оглавление

Введение.......................................................................................................................... 11
Почему JavaScript?..........................................................................................................................11
Что вы найдете в этой книге?........................................................................................................12
Что вам понадобится?....................................................................................................................12
Типографские соглашения.............................................................................................................13

ЧАСТЬ L НАЧАЛА JAVASCRIPT............................................................................. 15

Урок 1. Типы данных, операторы и переменные.................................................... 17
1.1. Упражнение. Используем консоль веб-обозревателя.......................................................... 17
1.2. Типы данных и операторы..................................................................................................... 20
1.3. Числа, арифметические операторы и приоритет операторов.............................................20
1.4. Строки. Конкатенация строк................................................................................................. 22
1.5. Условия и операторы сравнения........................................................................................... 23
1.6. Логические операторы........................................................................................................... 24
1.7. Переменные.............................................................................................................. 24
1.7.1. Три оператора объявления переменных..................................................................... 27
1.7.2. Еще об объявлении переменных................................................................................. 27
1.8. Арифметические операторы, применимые лишь к переменным.......................................28
1.9. Условный оператор................................................................................................................ 28
1.10. Получение типа данных....................................................................................................... 29
1.11. Преобразование типов.......................................................................................................... 30
1.12. Самостоятельные упражнения............................................................................................ 32

Урок 2. Выражения и управляющие конструкции.................................................35

2.1. Упражнение. Пишем первый веб-сценарий......................................................................... 35
2.2. Упражнение. Применяем условные выражения.................................................................. 38
2.2.1. Сокращенная форма условного выражения............................................................... 39
2.2.2. Множественное условное выражение........................................................................ 39
2.3. Упражнение. Используем блоки........................................................................................... 40
2.3.1. Переменные в блоках................................................................................................... 41
2.4. Выражение выбора................................................................................................................. 41
2.5. Упражнение. Используем цикл со счетчиком.......................................................................43
2.5.1. Объявление счетчика непосредственно в цикле........................................................46
2.5.2. В приращении можно записать несколько выражений.............................................46
2.6. Циклы с предусловием и постусловием...............................................................................46
2.7. Операторы break и continue................................................................................................... 47
2.8. Комментарии........................................................................................................................... 48
2.9. Строгий режим........................................................................................................................ 48
2.10. Как набирать JavaScript-код?............................................................................................... 49
2.11. Самостоятельные упражнения............................................................................................ 49
4 Оглавление

Урок 3. Функции и массивы.......................................................................................§1

3.1. Упражнение. Используем функции......................................................................................51
3.2. Локальные переменные и вложенные функции.................................................................. 54
3.3. Функции с необязательными параметрами...................... .................................................. 55
3.3.1. Функции с необязательными параметрами в «старом» стиле.................................56
3.4. Функции с произвольным количеством параметров...........................................................56
3.5. Упражнение. Используем рекурсию.....................................................................................57
3.6. Анонимные функции и функции-стрелки............................................................................58
3.7. Функциональный тип данных...............................................................................................60
3.8. Упражнение. Создаем внешний веб-сценарий....................................................................60
3.9. Встроенные функции JavaScript............................................................................................61
3.10. Массивы. Объектный тип данных.......................................................................................61
3.11. Самостоятельные упражнения............................................................................................63

Урок 4. Классы и объекты...........................................................................................65

4.1. Объекты. Свойства и методы................................................................................................65
4.1.1. Доступ к свойствам объекта посредством оператора [] (квадратные скобки)......66
4.2. Классы..................................................................................................................................... 66
4.3. Класс Number.......................................................................................................................... 67
4.4. Класс String.............................................................................................................................69
4.5. Класс Array.............................................................................................................................. 71
4.5.1. Сортировка массивов...................................................................................................76
4.6. Класс D ate............................................................................................................................... 78
4.7. Класс Math............................................................................................................................... 80
4.8. Класс Arguments. Коллекции.................................................................................................82
4.9. Класс Object. Служебные объекты. Объектная нотация.....................................................82
4.10. Объектный тип. Значение null.............................................................................................83
4.11. Хранение объектов в переменных. Значащие и ссылочные типы..................................84
4.12. Добавленные свойства.........................................................................................................85
4.13. Дополнительные средства для работы с объектами..........................................................86
4.14. Самостоятельные упражнения............................................................................................87

Урок 5. Средства отладки............................................................................................89

5.1. Вывод сообщений в консоли.................................................................................................89
5.1.1. Вывод в консоли произвольных сообщений..............................................................89
5.2. Упражнение. Работаем с отладчиком веб-обозревателя.....................................................90
5.2.1. Удаление точек останова.............................................................................................95
5.3. Инспектор DOM .....................................................................................................................95
5.4. Исключения и их обработка..................................................................................................96
5.4.1. Генерирование исключений........................................................................................98
5.5. Самостоятельные упражнения..............................................................................................99

ЧАСТЬ II. УПРАВЛЕНИЕ ВЕБ-СТРАНИЦЕЙ

И ВЕБ-ОБОЗРЕВАТЕЛЕМ....................................................................................... 101
Урок 6. События и их обработка..............................................................................103
6.1. Упражнение. Обрабатываем события.............................................................................. 103
6.1.1. Еще немного об обработчиках событий................................................................... 107
6.1.2. Удаление привязки обработчика к событию........................................................... 108
6.1.3. Альтернативный способ привязки обработчиков к событиям...............................108
Оглавление 5

6.2. События, поддерживаемые элементами страницы............................................................109

6.2.1. Особенности события beforeunload......................................................................... 110
6.3. Упражнение. Получаем сведения о событии.....................................................................111
6.3.1. Классы событий и их свойства................................................................................. 113
6.4. Упражнение. Изучаем фазы событий................................................................................ 116
6.4.1. Свойства и методы класса Event, имеющие отношение
к «прохождению» событий...................................................................................................118
6.5. Упражнение. Отменяем обработку событий по умолчанию........................................... 118
6.5.1. Свойства класса Event, касающиеся обработки события по умолчанию............. 121
6.6. Самостоятельные упражнения.............................................................................................121

Урок 7. Управление элементами веб-страниц....................................................... 123

7.1. Получение доступа к элементам страницы........................................................................123
7.1.1. Доступ к элементам определенного типа.................................................................123
7.1.2. Доступ к любому элементу страницы......................................................................124
7.1.3. Доступ к родителю, соседям и потомкам.................................................................126
7.1.4. Контекст исполнения веб-сценариев........................................................................ 127
7.2. Управление элементами веб-страницы...............................................................................127
7.3. Упражнение. Делаем стильную полосу прокрутки.......................................................... 131
7.4. Упражнение. Управляем стилями........................................................................................134
7.4.1. Средства для управления стилевыми классами...................................................... 136
7.4.2. Средства для управления встроенными стилями.................................................... 137
7.5. Изменение содержимого элементов....................................................................................137
7.5.1. Методы write и writeln.................................................................................................139
7.6. Упражнение. Создаем новые элементы веб-страниц путем конструирования............... 139
7.6.1. Методы, конструирующие элементы веб-страниц.................................................. 141
7.7. Получение сведений о веб-странице....................................................................................144
7.8. Самостоятельные упражнения.............................................................................................144

Урок 8. Графика и мультимедиа.............................................................................. 147

8.1. Получение сведений о графических изображениях.......................................................... 147
8.2. Управление мультимедийными элементами...................................................................... 148
8.2.1. Свойства.......................................................................................................................148
8.2.2. Методы.........................................................................................................................149
8.2.3. События........................................................................................................................150
8.3. Упражнение. Реализуем свой видеопроигрыватель.......................................................... 151
8.4. Самостоятельные упражнения.............................................................................................154

Урок 9. Веб-формы и элементы управления.......................................................... 155

9.1. Взаимодействие с элементами управления........................................................................ 155
9.1.1. Получение и обработка введенного в элемент значения....................................... 158
9.1.2. Программное создание и удаление пунктов списка............................................... 159
9.2. Упражнение. Пишем первое клиентское веб-приложение.............................................. 160
9.3. Упражнение. Работаем с веб-формой................................................................................. 162
9.3.1. Свойства, методы и события веб-формы................................................................ 164
9.4. Упражнение. Реализуем валидацию данных в веб-форме................................................ 164
9.4.1. Вывод сообщений об ошибках в произвольном месте веб-страницы................... 166
9.4.2. Вывод произвольных сообщений об ошибках......................................................... 167
9.5. Самостоятельные упражнения............................................................................................ 168
6 Оглавление

Урок 10. Регулярные выражения.............................................................................171

10.1. Введение в регулярные выражения.................................................................................. 171
10.1.1. Создание регулярных выражений.........................................................................171
10.1.2. Использование регулярных выражений: простые случаи..................................173
10.2. Литералы регулярных выражений.................................................................................... 173
10.2.1. Метасимволы.......................................................................................................... 173
10.2.2. Поднаборы............................................................................................................... 174
10.2.3. Вариант.................................................................................................................... 175
10.2.4. Квантификаторы..................................................................................................... 175
10.2.5. Подквантификатор.................................................................................................. 176
10.2.6. Группы и обратные ссылки.................................................................................... 177
10.2.7. Обычные символы.................................................................................................. 178
10.3. Поиск и обработка фрагментов, совпадающих с регулярными выражениями.............178
10.3.1. Обычный режим поиска......................................................................................... 178
10.3.2. Глобальный поиск.................................................................................................. 179
10.3.3. Многострочный поиск............................................................................................ 180
10.3.4. Замена совпавших фрагментов.............................................................................. 180
10.3.5. Прочие полезные инструменты............................................................................. 181
10.4. Упражнение. Выполняем программную валидацию с помощью
регулярного выражения...................................................................................................... 181
10.5. HTML-валидация с применением регулярных выражений............................................ 182
10.6. Самостоятельные упражнения.......................................................................................... 182

Урок 11. Взаимодействие с веб-обозревателем...................................................... 185

11.1. Работа с окном веб-обозревателя...................................................................................... 185
11.1.1. Еще один способ записи веб-сценариев, манипулирующих элементами
страницы.............................................................................................................................. 187
11.2. Упражнение. Навигация по якорям с подсветкой активной гиперссылки....................188
11.3. Работа с текущим интернет-адресом................................................................................ 190
11.4. Получение сведений о клиентском компьютере.............................................................. 191
11.5. Вывод стандартных диалоговых окон.............................................................................. 192
11.6. Самостоятельное упражнение........................................................................................... 193

ЧАСТЬ III. HTML API И КОМПОНЕНТНОЕ ПРОГРАММИРОВАНИЕ..... 195

Урок 12. Таймеры и фоновые потоки......................................................................197
12.1. Упражнение. Используем периодические таймеры........................................................ 197
12.2. Однократный таймер..........................................................................................................201
12.3. Упражнение. Применяем фоновые потоки......................................................................202
12.4. Самостоятельные упражнения..........................................................................................205

Урок 13. Работа с файлами, хранение данных и перетаскивание..................... 207

13.1. Работа с локальными файлами..........................................................................................207
13.1.1. Чтение сведений о файлах.....................................................................................207
13.1.2. Считывание текстовых файлов. Класс FileReader.............................................. 208
13.1.3. Вывод индикатора процесса при считывании файла......................................... 210
13.1.4. Считывание графических файлов.........................................................................210
13.2. Упражнение. Реализуем предварительный просмотр выбранного
графического файла............................................................................................................210
13.3. Хранение данных на стороне клиента..............................................................................212
Оглавление 7

13.4. Перетаскивание................................................................................................................... 213

13.4.1. Превращение элемента-источника в перетаскиваемый......................................213
13.4.2. Задание перемещаемых данных в источнике.......................................................213
13.4.3. Указание допустимых операций........................................................................... 214
13.4.4. Подготовка элемента-приемника.......................................................................... 215
13.4.5. Завершение перетаскивания.................................................................................. 216
13.5. Упражнение. Практикуемся в реализации перетаскивания............................................216
13.6. Перетаскивание файлов в поле выбора файлов............................................................... 219
13.7. Самостоятельные упражнения.......................................................................................... 219

Урок 14. Программная графика............................................................................... 221

14.1. Холст HTML....................................................................................................................... 221
14.2. Рисование прямоугольников............................................................................................. 222
14.3. Указание основных параметров графики......................................................................... 222
14.3.1. Цвета линий и заливок........................................................................................... 223
14.3.2. Параметры тени...................................................................................................... 223
14.4. Вывод текста....................................................................................................................... 224
14.5. Упражнение. Рисуем диаграмму....................................................................................... 225
14.6. Рисование сложных фигур................................................................................................. 227
14.6.1. Начало и завершение рисования........................................................................... 227
14.6.2. Перемещение пера.................................................................................................. 227
Рисование прямых линий...................................................................................... 228
Замыкание контура................................................................................................ 228
Указание параметров линий.................................................................................. 229
Рисование дуг......................................................................................................... 230
Рисование кривых Безье........................................................................................ 231
Рисование прямоугольников................................................................................. 232
14.7. Градиенты и графические закраски.................................................................................. 233
14.7.1. Линейные градиенты.............................................................................................. 233
14.7.2. Радиальные градиенты........................................................................................... 235
14.7.3. Графическая закраска............................................................................................. 236
14.8. Преобразования.................................................................................................................. 237
14.9. Вывод сторонних изображений......................................................................................... 238
14.10. Управление композицией................................................................................................ 239
14.11. Создание масок................................................................................................................. 240
14.12. Сохранение и восстановление состояния холста...........................................................240
14.13. Упражнение. Рисуем цветок............................................................................................ 241
14.14. Самостоятельные упражнения........................................................................................ 242

Урок 15. Объявление своих классов........................................................................ 245

15.1. Объявление нового класса................................................................................................. 245
15.1.1. Конструктор. Объявление свойств и методов в конструкторе...........................245
15.1.2. Прототип. Объявление свойств и методов в прототипе......................................246
15.2. Упражнение. Объявляем класс слайдера................................................................. 247
15.3. Упражнение. Создаем динамическое свойство...............................................................251
15.3.1. Динамические свойства, доступные только для чтения и только для записи.....252
15.3.2. Объявление обычных свойств методом defineProperty.......................................252
15.4. Упражнение. Реализуем наследование классов...............................................................253
15.4.1. Переопределение методов..................................................................................... 255
15.4.2. Использование метода call для вызова методов базового класса.......................256
8 Оглавление

15.5. Объявление статических свойств и методов....................................................................256

15.6. Упражнение. Расширяем функциональность встроенных классов............................... 257
15.7. Самостоятельные упражнения..........................................................................................258

Урок 16. Компоненты.................................................................................................261

16.1. Понятие компонента...........................................................................................................261
16.2. Упражнение. Создаем компонент.....................................................................................261
16.3. Замыкания...........................................................................................................................265
16.4. Упражнение. Изолируем компонент в замыкании......................................................... 267
16.5. Самостоятельные упражнения..........................................................................................268

ЧАСТЬ IV. ВЗАИМОДЕЙСТВИЕ С СЕРВЕРОМ............................................... 269

Урок 17. Технология AJAX........................................................................................271
17.1. Реализация AJAX................................................................................................................271
17.1.1. Подготовка объекта AJAX....... ............................................................................. 272
17.1.2. Указание интернет-адреса загружаемого файла..................................................272
17.1.3. Получение загруженного файла............................................................................272
17.1.4. Отправка веб-серверу запроса на получение файла........................................... 273
17.2. Упражнение. Пишем сверхдинамический веб-сайт........................................................274
17.3. Синхронная загрузка файлов по технологии AJAX........................................................276
17.4. Формат JSON......................................................................................................................276
17.5. Упражнение. Загрузка и вывод JSON-данных.................................................................277
17.6. Упражнение. Пишем компонент AJAXLoader..................................................................280
17.7. Самостоятельные упражнения..........................................................................................282

Урок 18. Серверные веб-приложения. Платформа РНР..................................... 285

18.1. Серверные веб-приложения. Платформа РНР.................................................................285
18.2. Упражнение. Изучаем основы РНР...................................................................................286
18.3. Упражнение. Пишем простейшую фотогалерею на РНР................................................289
18.4. Упражнение. Передаем данные методом GET.................................................................293
18.5. Упражнение. Передаем данные методом POST...............................................................296
18.6. Самостоятельные упражнения..........................................................................................300

Урок 19. Разработка фронтендов и бэкендов.........................................................301

19.1. Веб-разработка: старый и новый подходы. Фронтенды и бэкенды. Веб-службы.......301
19.2. Упражнение. Новая фотогалерея. Вывод списка миниатюр......................................... 302
19.3. Упражнение. Новая фотогалерея. Показ изображений...................................................305
19.4. Отправка веб-службе данных методом POST..................................................................309
19.4.1. Отправка веб-формы целиком...............................................................................309
19.4.2. Отправка произвольных данных...........................................................................310
19.4.3. Отправка данных в виде строки POST-параметров.............................................310
19.5. Упражнение. Новая фотогалерея. Загрузка изображений в галерею............................311
19.6. Самостоятельные упражнения..........................................................................................316

Урок 20. Серверные сообщения................................................................................317

20.1. Использование серверных сообщений.......................................................................... 317
20.1.1. Что представляет собой серверное сообщение?................................................ 317
20.1.2. Отправка серверных сообщений...........................................................................318
20.1.3. Прием серверных сообщений................................................................................318
Оглавление 9

20.1.4. Поддержание соединения и возобновление приема............................................319

20.1.5. Создание своих событий........................................................................................ 320
20.1.6. Разрыв соединения................................................................................................. 320
20.2. Упражнение. Новая фотогалерея. Более отзывчивый список миниатюр.................. 321

Заключение................................................................................................................... 325
Приложение 1. Приоритет операторов.................................................................... 327
Приложение 2. Пакет хостинга ХАМРР................................................................. 329
П2.1. Установка пакета хостинга ХАМРР................................................................................. 329
П2.2. Панель управления ХАМРР. Запуск и остановка веб-сервера......................................334
П2.2.1. Указание языка при первом запуске.................................................................... 334
П2.2.2. Окно панели управления ХАМРР........................................................................ 334
П2.2.3. Запуск веб-сервера................................................................................................. 335
П2.2.4. Проверка работоспособности веб-сервера.......................................................... 335
П2.2.5. Остановка веб-сервера........................................................................................... 336
П2.3. Использование веб-сервера.............................................................................................. 336
П2.3.1. Тестирование веб-сайта с применением ХАМРР...............................................336
П2.3.2. Просмотр журналов работы веб-сервера и РНР..................................................336
П2.4. Решение проблем............................................................................................................... 337
П2.4.1. Увеличение максимального размера выгружаемых файлов..............................337
П2.4.2. Отключение кеширования файлов веб-обозревателем.......................................338

Приложение 3. Описание электронного архива....................................................341

Предметный указатель............................................................................................... 343
 Введение
Почему JavaScript?
Что вы найдете в этой книге?
Что вам понадобится в процессе чтения?
Типографские соглашения

Здравствуйте, уважаемый читатель!

Если вы держите в руках эту книгу, значит, желаете научиться языку программиро­
вания JavaScript. Это очень правильное желание. А это очень правильная книга!
JavaScript— один из популярнейших в настоящее время языков для написания
программ, а в деле веб-программирования у него вообще нет конкурентов. Знание
JavaScript требуется от каждого, кто намеревается серьезно заняться написанием
сайтов. Любой работодатель, узнавший, что претендент на должность веб-раз­
работчика не владеет этим языком, тут же даст ему от ворот поворот.

Почему JavaScript?
Прежде всего, он — один из трех «китов», на которых зиждется величественный
дворец веб-разработки. Первый «кит»— язык HTML— описывает саму веб­
страницу, ее содержание, второй — CSS — ее оформление, a JavaScript — пове­
дение.
JavaScript может «оживить» страницу, заставляя ее реагировать на действия поль­
зователя. Он может превратить набор обычных картинок в красивую фотогалерею.
Он может загрузить с сервера какие-либо данные и вывести их прямо на странице
в виде абзаца, списка, таблицы или графика. Он даже может превратить страницу
в настоящую программу, обрабатывающую занесенные пользователем данные и
выводящую результаты их обработки.
JavaScript — единственный язык программирования, позволяющий «влезть» внутрь
веб-страницы, исправить или дополнить ее содержание. JavaScript— единствен­
ный язык программирования, непосредственно поддерживаемый веб-обозревате­
лями.
Ранее говорилось, что у этого языка в своей области нет конкурентов. И в ближай­
шем будущем они не появятся.
12 Введение

Что вы найдете в этой книге?

Философия программирования — это часть программирования,
со всех сторон окруженная водой.

♦ Двадцать коротких, емких, наглядных, иллюстрированных уроков, дающих не­

обходимые теоретические знания.
♦ Более сорока практических упражнений, выполняемых под руководством авто­
ра. Выполняя их, вы закрепите полученные знания и приобретете программист­
ский опыт, что безусловно оценит ваш будущий работодатель.
♦ Восемнадцать упражнений, рассчитанньга на самостоятельное выполнение. Что­
бы справиться с ними, необходимо лишь внимательно изучать приведенный
в уроках теоретический материал.
♦ Описание самых востребованных в настоящее время приемов программирова­
ния: объявления своих классов, написания компонентов, программирования
фронтендов и бэкендов, использования фоновых процессов и серверных сооб­
щений.
♦ Вводный курс популярной программной платформы РНР, знание которой очень
пригодится веб-программисту.
♦ Полное отсутствие описаний устаревших и малополезных инструментов, отвле­
ченных рассуждений, философствований на тему программирования и прочей
«воды».
Чтобы по этой книге овладеть JavaScript-программированием, вам хватит
и месяца .

Книгу сопровождает электронный архив (см. приложение 5), содержащий резуль­

таты выполнения всех упражнений, равно как и необходимые исходные файлы.
Архив выложен на FTP-сервер издательства «БХВ-Петербург» по адресу
ftp://ftp.bhv.ru/9785977565899.zip. Ссылка доступна и со страницы книги на сайте
издательства www.bhv.ru.

Что вам понадобится?

Для изучения этой книги вам, уважаемый читатель, нужны следующие программы:
♦ веб-обозреватель, разумеется. Автор тестировал подготовленные им примеры
в Google Chrome и Mozilla Firefox (остальные веб-обозреватели либо аналогич­
ны Chrome, либо малопопулярны);
♦ текстовый редактор — можно использовать Блокнот, но автор рекомендует
какой-либо из чисто «программистских» редакторов: Visual Studio Code (https://
code.visualstudio.com/), Atom (https://atom.io/), Notepad++ (https://notepad-
plus-plus.org/), Sublime Text (https://www.sublimetext.com/), Brackets (http://
brackets.io/) и т. п.;
Введение 13

♦ пакет веб~хостинга ХАМРР (https://www.apachefriends.org/ru/index.html). Ав­

тор применял версию 7.3.5, включающую веб-сервер Apache HTTP Server 2.4.39
и PHP 7.3.5. Описание пакета веб-хостинга ХАМРР и инструкция по его уста­
новке на компьютер приведены в приложении 2.
Еще от вас требуется:
♦ владеть языками HTML и CSS, на которых пишутся сами веб-страницы и
оформление для них;
♦ иметь минимальные навыки веб-верстки;
♦ знать в общих чертах как работает веб-сервер (это понадобится нам в части IV
книги).

Типографские соглашения
В книге будут часто приводиться различные языковые конструкции, применяемые
в JavaScript. Для наглядности при их написании использованы следующие типо­
графские соглашения (в реальном коде они недействительны):
♦ HTML-, CSS-, JavaScript- и PHP-код набран моноширинным шрифтом:
<script type="text/javascript">
const ins = window.prompt(’Величина в дюймах', 0);
const cents = ins * 2.54;
</script>

♦ в угловые скобки о заключаются наименования различных значений, которые

дополнительно выделяются курсивом. В реальный код, разумеется, должны быть
подставлены реальные значения. Например:
return <возвращ аемое значение>

Здесь вместо подстроки возвращ аемое зн ачен ие ДОЛЖНО быть ПОДСТаВЛеНО реаль­
ное возвращаемое значение;
♦ в квадратные скобки [] заключаются необязательные фрагменты кода. Напри­
мер:
toString([<основание>])

Здесь основание может указываться, а может и не указываться;

♦ слишком длинные, не помещающиеся на одной строке книги фрагменты, автор
разрывал на несколько строк и в местах разрывов ставил знаки Ъ. Например:
active = document.querySelector^
('nav a.active');

Приведенный код здесь разбит на две строки, но должен быть набран в одну.
Символ Ъ при этом нужно удалить;
♦ троеточием . . . помечены фрагменты кода, пропущенные ради сокращения
объема текста книги:
14 Введение

function circleLength(d) {
d = d N 2;

}
Здесь весь код между второй и последней строками пропущен.
Обычно такое можно встретить в исправленных впоследствии фрагментах
ко д а— приведены лишь собственно исправленные строки, а оставшиеся неиз­
мененными пропущены. Также троеточие используется, чтобы показать, в какое
место должен быть вставлен вновь написанный код: в начало исходного фраг­
мента, в его конец или в середину, между уже присутствующими в нем стро­
ками.

В ним ание!
Все приведенные здесь типографские соглашения имеют смысл только в примерах
написания языковых конструкций JavaScript.
 ЧАСТЬ I
Начала JavaScript

3 Данные, которыми манипулирует JavaScript.

О Переменные.
3 Операторы.
3 Выражения.
3 Управляющие конструкции.
3 Функции.
3 Объекты и классы.
3 Веб-сценарии: внутренние и внешние.
3 Средства отладки.
3 Исключения и обработка ошибок.
 Урок 1
Типы данных,
операторы и переменные
Консоль веб-обозревателя
Типы данных
Числа
Строки
Логические значения
Операторы
Переменные
Преобразование типов

1.1. Упражнение.
Используем консоль веб-обозревателя
Изучение основ языка JavaScript удобно начать, набирая код в консоли.
Консоль — интерактивная исполняющая среда, встроенная в веб-обозре­
ватель. В консоли можно набрать какое-либо выражение и сразу увидеть
результат его выполнения.
Вызовем консоль у установленного у нас веб-обозревдтеля и выполним в ней не­
сколько выражений.
1. Запустим веб-обозреватель (автор книги использовал Google Chrome).
2. Нажмем клавишу <F12>, чтобы вызвать встроенные в веб-обозреватель отла­
дочные инструменты, в число которых входит и консоль. По умолчанию панель
с отладочными инструментами появляется у нижней стороны окна веб-обо­
зревателя (рис. 1.1).
3. В верхней части панели находятся корешки вкладок, на которых располагаются
различные отладочные инструменты. Переключимся на вкладку Console, щелк­
нув на ней мышью (рис. 1.2).
На этой вкладке и находится консоль веб-обозревателя (рис. 1.3).
В белой области редактирования, занимающей большую часть вкладки, виден
мигающий текстовый курсор. Здесь вводятся выражения JavaScript, которые
нужно выполнить.
18 Часть I. Начала JavaScript

• Для начала сложим два числа, для чего наберем в области редактирования
следующий простой код:
27 + 14

и нажмем клавишу <Еп1ег>.

Рис. 1.1. Панель с отладочными инструментами веб-обозревателя

Рис. 1.2. Корешок вкладки Console на панели с отладочными инструментами веб-обозревател

Git fi] Elements Console Sources Network Performance Memory Application Security Audits : | X

№ O top ▼ | O i Filter Default levels ▼ | 0

► 1 message SU r e g is te r e d neartab?ie=UTF-8:8
>
► 0 1 user mess,,,

О No errors

Д No warnings

► 0 1 info

$ No verbose

Рис. 1.3. Консоль веб-обозревателя

Урок 1. Типы данных, операторы и переменные 19

Ниже набранного кода мы увидим результат сложения чисел 27 и 14 (рис. 1.4).

Символом «больше» >, расположенным в консоли слева, помечается строка,
в которую в настоящий момент будет вводиться код JavaScript.

SW r e g i s t e r e d
>27+14
41

>t

Рис. 1.4. Результат сложения чисел 27 и 14 в консоли веб-обозревателя

Символом «меньше» < помечается строка, в которой выводится результат

исполнения набранного кода после нажатия клавиши <Enter>.
• Мы можем обрабатывать и строки: давайте объединим строки Java и script
в одну:
> 'Java* + 'Scriptf
< "JavaScript"

Здесь символ + обозначает операцию объединения строк.

• Еще мы можем сравнивать значения: проверим, действительно ли число 10
меньше 20:
> 10 < 20
< true

Результатом будет логическое значение true — «истина». Так веб-обозре­

ватель сообщает нам, что записанное сравнение выполняется (оно истинно).
• Напоследок для эксперимента выполним заведомо не выполняющееся, лож­
ное сравнение:
> 15 > 25
< false

Результатом станет логическое значение false — «ложь».

4. Очистим консоль, щелкнув на кнопке Clear console, что находится в окне кон­
соли слева, под набором корешков вкладок (рис. 1.5). Для очистки консоли
можно также нажать комбинацию клавиш <Ctrl>+<L>.

Рис. 1.5. Кнопка очистки консоли Clear console

20 Часть I. Начала JavaScript

1.2. Типы данных и операторы

Любое значение, обрабатываемое JavaScript, относится к определенному типу дан­
ных.
I Тип данных — определяет характер значения и набор выполняемых над ним
I операций.
В разд. 1.1 мы познакомились с тремя типами данных (табл. 1.1).

Таблица 1.1. Три ти п а данных JavaScript

Числовой Строковый Логический

Обычные числа Строки из любых символов Логические значения

14, 27, 10000 ' J a v a ', ' S c r i p t ', t r u e — «истина»

'HTML и CSS' f a l s e — «ложь»

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

Оператор — выполняет элементарное действие над заданными значениями
{операндами): сложение, объединение строк, сравнение и пр. — и произво­
дит выдачу {возврат) результата.
Примеры:
>27 + 14 Оператор сложения + складывает операнды 27 и 14
<41 После чего возвращает результат — сумму 41

> ю < 20 Оператор «меньше» < сравнивает операнды ю и 20

< tru e и возвращает результат — логическое значение t r u e

Некоторые операторы JavaScript не принимают операндов и (или) не возвращают

результат.

1.3. Числа, арифметические операторы

и приоритет операторов
Числа в языке JavaScript записываются по обычным (школьным) правилам. Но
в дробных числах (их еще называют вещественными и числами с плавающей точ­
кой) в качестве десятичного разделителя применяется точка (не запятая!).
Примеры:
Целые числа: Ю, 20, 1234567 Вещественные числа: 1.5, 23.67, 0 .0 5 3

У отрицательных чисел в начале ставится знак «минус»: -. Для записи чисел в экс­
поненциальной форме: <мантисса> х — применяется формат:
<мантисса>е<порядок>
 ,
Урок 1. Типы данных операторы и переменные ________________ 21

Примеры:
Отрицательные числа: Числа в экспоненциальной форме:
-10, -20, - 0 . 3 2 , - 0 . 0 5 3 1е6 (1000000), 1 . З е -5 (0,000013), -1 е З (-1000)
Помимо десятичных, можно записывать восьмеричные и шестнадцатеричные чис­
ла, предварив их, соответственно, нулем или символами 0х.
Примеры:
Восьмеричные числа: Шестнадцатеричные числа:
010 (8), 0123 (83), -045 (-37) 0x10 (16), 0x53 (83), -0x321 (-801)
Для выполнения арифметических действий применяются арифметические опера-
торы.
Бинарные (принимающие два операнда) операторы записываются в формате:
<опвранд 1> <оператор> <операнд 2>

П ояснение
Операторы бывают унарные (принимающие один операнд), бинарные (принимающие
два операнда) и тернарны е (принимающие три операнда). Обо всех их подробно рас­
сказывается по мере их упоминания.

Поддерживаемые JavaScript арифметические операторы приведены в табл. 1.2.

Таблица 1.2. Поддерживаемые JavaScript ариф метические операторы

Оператор Описание Пример Результат

+ (плюс) Сложение >27+14 < 41

- (минус) Вычитание > 40 - 100 < -60

* (звездочка) Умножение > 12 * 32 < 384

/ (слеш) Деление > 3 / 4 < 0 .7 5

%(процент) Остаток от деления > 4 %3 < 1

★★ Возведение в степень > 2 ** 10 < 1024

Очередность выполнения операторов задается их приоритетом : операторы

с большим приоритетом выполняются раньше операторов с меньшим при­
оритетом.
Из рассмотренных ранее операторов наибольший приоритет имеет возведение
в степень: **, операторы умножения: *, деления: / и остатка от деления: %— мень­
ший, а сложения: + и вычитания:-----еще меньший (таблицу с приоритетами раз­
ных операторов можно найти в приложении 1).
♦ В следующем примере сначала будет выполнено деление 82 на 2 , а потом полу­
ченное частное сложится с 37:
> 3 7 + 8 2 / 2
< 78
22 Часть I. Начала JavaScript

♦ Операторы с одинаковым приоритетом выполняются в порядке слева направо,

поэтому в следующем примере сначала будет выполнено сложение ю и 34, а по­
том из суммы вычтется 26:
> 10 + 34 - 26,
< 18

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

скобок. Оператор в круглых скобках будет выполнен раньше, независимо от его
приоритета. Поэтому здесь сначала будет выполнено сложение 37 и 82, а потом
полученная сумма разделится на 2:
> (37 + 82) / 2
< 59.5

К числам также относятся три специальных значения:

♦ NaN (Not a Number, не число) — значение, получаемое при попытке, например,
умножить число на строку (о строках будет рассказано позже):
> 20 * 'JavaScript1
< NaN

♦ infinity— математическая «бесконечность»: оо. Это значение можно получить

делением положительного числа на о:
>10/0
< Infinity

♦ -infinity — математическая «минус бесконечность»: -оо. Может быть получена

делением отрицательного числа на о.

1.4. Строки. Конкатенация строк

Строки заключаются в одинарные или двойные прямые кавычки (автор
I книги предпочитает одинарные).
Примеры Строк: 'Java', "Script", 'Языки HTML и CSS применяются в веб-разработке'
Если строка заключена в одинарные кавычки, в ней не допускаются символы оди­
нарной кавычки. Если строка заключена в двойные кавычки, в ней не допускаются
символы двойной кавычки. В любом случае в строках не допускаются символы
обратного слеша.
Примеры:
Правильно: Неправильно:
"Шеймус О'Брайен'' 'Шеймус О'Брайен'
'Суши-бар "Йокогама"' 'Суши-бар "Йокогама""

Указанные запреты можно обойти, применив строковые литералы (специальные

последовательности символов): \ ', \" — для кавычек и \ \ — для обратного слеша.
Урок 1. Типы данных, операторы и переменные 23

Примеры использования литералов:

'Шеймус О\’Брайен'
"Суши-бар \"Йокогама""

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

Оператор +, будучи примененным к операндам-строкам, выполняет объединение
{конкатенацию) строк в одну.
Объединяем строки 'Java' И 'Script':
> 'Java' + 'Script'
< "JavaScript"

1.5. Условия и операторы сравнения

Для того чтобы сравнить какие-либо значения, применяется условие.
Условие — языковая конструкция, сравнивающая заданные значения. Запи­
I сывается с помощью оператора сравнения.
II Оператор сравнения — сравнивает два операнда и возвращает результат
I в виде логического значения true («истина») или false («ложь»).
Операторы сравнения являются бинарными и записываются в формате:
<операнд 1> <оператор> <операнд 2>
Все поддерживаемые JavaScript операторы сравнения приведены в табл. 1.3.

Таблица 1.3. Поддерживаемые JavaScript операторы сравнения

Оператор Описание Пример Результат

== Равно1 > 1 == 1 . 0 0 0 < true

і= Не равно > 1 != 1 . 0 0 1 < true

< Меньше > 1000 < 100 < fa lse

<= Меньше или равно > 100 <= 1000 < true

> Больше > 10 > 9 < true

>= Больше или равно > 1е 6 >= 1е9 < fa lse

=== Строго равно

! == Строго не равно

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

с преобразованием типов.

1 Два знака «равно». Один знак «равно» — это совсем другой оператор, который будет рассмотрен
позже.
24 Часть I. Начала JavaScript

1.6. Логические операторы

I
Логический оператор — принимает логические операнды и возвращает
|| результат также в виде логического значения.
В JavaScript имеются три логических оператора:
♦ ! {логическое отрицание, или логическое НЕ) — унарный , возвращает faise,
если операнд имеет значение true, и true в противном случае. Записывается этот
оператор в формате: \<операнд> без пробела. Пример:
> ! (10 == 100)
< true

В выражениях с оператором ! операторы сравнения всегда следует брать в круг­

лые скобки. Приоритет оператора ! выше, чем у операторов сравнения, следова­
тельно, он будет выполнен первым, и результат без скобок окажется неверным;
♦ && {логическое умножение , или логическое И ) — возвращает true, если оба
операнда равны true, и taise в противном случае;
♦ | | {логическое сложение, или логическое ИЛИ) — возвращает true, если хотя бы
ОДИН операнд равен true, И false В ПрОТИВНОМ Случае.
Два последних оператора записываются в формате:
<операнд 1> <оператор && или ||> <операнд 2>

Примеры:
> 10 <= 100 && 0 != 1 > 10 <= 100 11 0 != 1
< true < true
h-»

> 10 >= 100 0 != 1 > 100 11 0 != 1

V

&&
II
о

< false < true

I—*

> 10 <= 100 && 0 == 1 > 100 11 0 == 1

A
II
о

< false < true

> 10 >= 100 && 0 = 1 > 10 >= 100 11 0 = 1
< false < false

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

Имя переменной может содержать буквы латиницы, цифры и символы под­

черкивания _, причем оно не должно начинаться с цифры. Пробелы в имени
переменной не допускаются.

Примеры:
Правильные имена: Неправильные имена:
a, b, someValue, ^ p r i v a t e число, some value , 234value
Урок 1. Типы данных, операторы и переменные __________ 25

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

Объявление переменной — указание создать переменную с заданным име­
нем. Должно предшествовать первому использованию переменной.

Сразу при объявлении переменной она получает значение undefined, обозначающее

отсутствие какой-либо значащей величины.
Оператор объявления переменных let объявляет переменные с указанными именами:
let <список имен объявляемых переменных ч е р е з запятую>

В качестве результата оператор let всегда возвращает значение undefined.

Для объявления переменных можно использовать еще два оператора, которые мы
рассмотрим в конце этого раздела.
Объявляем переменную С именем sum (и ПОЛуЧИМ результат undefined):
> let sum
< undefined

Прим ечание
В дальнейшем результат u n d efin ed , возвращаемый оператором l e t , ради компактно­
сти указываться не будет.

Объявляем сразу три переменные:

> let X, у, X

Объявив переменную, мы можем присвоить ей сохраняемое значение.

Присваивание — занесение значения в переменную. Выполняется операто­
ром присваивания = \ имеющим формат:
<переменная> = <значение>
Присваиваем только что объявленной переменной sum значение ю:
> sum = 10
< 10
В качестве результата оператор = возвращает присвоенное переменной значение.
Можно совместить объявление переменной с присваиванием ей значения — так мы
сократим код. Для этого в операторе l e t вместо имени переменной нужно указать
оператор присваивания.
Объявляем переменную а и сразу же присваиваем ей число 1:
> let а = 1

Сохраненное в переменной значение можно использовать в вычислениях, выпол­

нив обращение к этой переменной.1

1 Оператор присваивания обозначается одним знаком «равно» (=), а оператор сравнения «равно» —
двумя (==). Не путайте эти два оператора!
26 Часть I. Начала JavaScript

Обращение к переменной — указание извлечь хранящееся в переменной

значение и использовать его в качестве операнда какого-либо оператора или
иным образом (например, для вывода на экран).
Обращение к переменной выполняется простым указанием имени нужной пере­
менной в качестве операнда.
Присваиваем переменной а произведение значения переменной sum (в текущий мо­
мент: ю) и числа 20:
> а = sum * 20
< 200

В ним ание!
При присваивании переменной нового значения старое значение теряется.

Прибавляем к значению переменной sum (в текущий момент: 1о) число 20 и заносим

получившуюся сумму в ту же переменную:
> sum = sum + 20
< ЗО

Оператор комбинированного присваивания (табл. 1.4) извлекает из указан­

ной переменной значение, выполняет над ним и заданным операндом какое-
либо действие и присваивает результат той же переменной. Формат этого
оператора:
<переменная> <оператор> <операнд>

Таблица 1.4. О ператоры комбинированного присваивания

Оператор комбинированного присваивания Его аналог

а += Ь а = а + Ь

а -= b а = а - b

а *= b а = а * b

а /= b а = а / Ь

а %= Ь а = а % b

Прибавим к переменной sum (сейчас там зо) число 7о:

> sum + = 7 0
< 100

Операторы комбинированного присваивания выполняются быстрее аналогичных

комбинаций арифметического оператора и обычного оператора присваивания.
Урок 1. Типы данных, операторы и переменные ____________ 27

1.7.1. Три оператора объявления переменных

Язык JavaScript поддерживает три оператора объявления переменных: уже знако­
мый нам let, а также const и var. Они имеют один и тот же формат записи, но раз­
ные особенности:
♦ le t — объявляет обычную переменную, которой можно присваивать значения
сколько угодно раз. Повторное объявление переменной этим оператором не до­
пускается — оно вызовет ошибку:
> let X
> let X
< Uncaught SyntaxError: Identifier 'x' has already
been declared at <anonymous>:1:1

Здесь в последних двух строках выведено сообщение об ошибке;

♦ const— объявляет константу — переменную, значение которой можно при­
своить лишь один раз и лишь непосредственно при ее объявлении. Попытка
присвоить константе новое значение вызовет ошибку. Пример:
> const у = 2

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

ее как константу, поскольку константы обрабатываются веб-обозревателем
быстрее;
♦ var — полностью аналогичен оператору let, однако позволяет объявить пере­
менную повторно (в этом случае он ничего не делает). Есть еще один нюанс,
который мы рассмотрим в уроке 2.
Оператор var остался от старых версий JavaScript. В настоящее время его при­
менение не рекомендовано, однако он часто встречается в старом JavaScript-
коде.

1.7.2. Еще об объявлении переменных

Объявлять переменные перед их использованием необязательно. Можно просто
присвоить переменной какое-либо значение— и веб-обозреватель сам неявно
объявит эту переменную:
sum = 10

Однако все же лучше объявлять переменные явно. Во-первых, это хороший стиль
программирования, а во-вторых, при работе в строгом режиме (о котором будет
рассказано в уроке 2) веб-обозреватель будет требовать явного объявления пере­
менных.
28 Часть I. Начала JavaScript

1.8. Арифметические операторы,

применимые лишь к переменным
JavaScript поддерживает три арифметических оператора, которые принимают в ка­
честве операндов только переменные (применение их к обычным числам вызовет
ошибку). Это унарные (принимающие один операнд) операторы, которые записы­
ваются В формате: <оператор><операнл> \
♦ - (минус) — унарный минус , изменяет знак числа и возвращает его в качестве
результата:
> le t п = 100
> -п
< -100
♦ ++ (два плюса)— оператор инкремента — увеличения значения переменной
на 1. Инкрементированное число вновь заносится в ту же переменную и одно­
временно возвращается в качестве результата:
> le t і = 1
> ++І
< 2
> le t j = ++І
>j
< 3

♦ — (два минуса) — оператор декремента — уменьшения значения переменной

на 1. В остальном аналогичен оператору инкремента.
Операторы инкремента и декремента можно ставить и после переменной. В этом
случае они сначала вернут в качестве результата текущее значение переменной,
а уже потом выполнят инкремент или декремент:
> І++
< 3
> і
< 4

1.9. Условный оператор

В разд. 1.5 мы познакомились с условиями, но лишь теоретически. Применить их
на практике можно, например, в условном операторе.
Условный оператор — возвращает результат tr u e , если указанное усл о ви е
истинно, и результат f a l s e — если оно ложно. Формат оператора:
(< усл ови е> ) ? <результат tru e > : <результат f a ls e >

Условный оператор— единственный тернарный (принимающий три операнда)

оператор в JavaScript.
Урок 1. Типы данных, операторы и переменные 29

Если строка В переменной s пуста, заносим В переменную result строку 'Строка

пуста ', В противном Случае — строку ' Строка не пуста':
> let S = ''
> let result
> result = (s == ,f) ? 'Строка пуста' : 'Строка не пуста'
> result
< "Строка пуста"

А теперь попробуем с непустой строкой:

> s = 'Условный оператор'
> result = (s == '') ? 'Строка пуста' : 'Строка не пуста'
> result
< "Строка не пуста"

Вместо параметра ус л о ви е в условном операторе можно указать переменную, хра­

нящую логическую величину.

1.10. Получение типа данных

Оператор получения типа typeof позволяет выяснить, к какому типу отно­
сится значение. Формат оператора:
typeof <значение>

В качестве результата возвращается одна из приведенных далее строк:

♦ ' number' — числовой тип:
> typeof 123
< "number"

♦ ' string' — строковый тип:

> let str = 'Строка'
> typeof str
< "string"

♦ ' boolean' — логический тип:

> typeof (24 > 90)
< "boolean"

♦ 'undefined' — неопределенный тип, поддерживающий всего одно значение:

undefined.

Оно хранится в переменной, которая была объявлена, но еще не получила како­

го-либо «значащего» значения:
> let nnn
> typeof nnn
< "undefined"
зо Часть І. Начала JavaScript

К неопределенному типу относится и любая еще не объявленная переменная,

если к ней обратиться в консоли:
> typeof nnnn
< "undefined"

В ним ание!
При обращении к необъявленной переменной в консоли возвращается значение
undefined. Но если это сделать в веб-сценарии (написанием которых мы займемся на
уроке 2), возникнет ошибка, и выполнение сценария будет прервано.
♦ ' function ' — функциональный тип (будет рассмотрен в уроке 3);
♦ ' ob ject ' — объектный тип (будет рассмотрен в уроке 4).

1.11. Преобразование типов

Ранее мы выполняли арифметические операции над двумя числами и конкатенацию
двух строк. Но что случится при попытке, например, сложить число и строку?
Тогда JavaScript предварительно произведет преобразование типов, чтобы привес­
ти операнды к единому типу.
Преобразование выполняется согласно следующим правилам:
♦ при сложении числа и строки — преобразует число в строку и производит их
конкатенацию:
> 20 + 120'
< " 2020 "

♦ при выполнении любого другого арифметического действия над числом и стро­

кой — пытается преобразовать строку в число. При этом:
• строки, содержащие только цифры и десятичную точку, будут успешно пре­
образованы в числа:
> 20 - '10'
< 10
> 50 * '1.5'
< 75
• все прочие строки будут преобразованы в значение NaN, и результатом вы­
числения также будет NaN:
> 20 - 'abc'
< NaN

♦ при выполнении арифметического действия над числом и логической величи­

ной — значение true преобразуется в 1, a false — во:
> 20 + true
< 21
Урок 1. Типы данных, операторы и переменные 31

♦ при выполнении арифметического действия над числом и значением

undefined — последнее Преобразуется В NaN;

♦ при конкатенации строки И ЧИСЛОВОГО значения NaN, Infinity ИЛИ -Infinity —

последнее преобразуется В строку 'NaN', 'Infinity' ИЛИ '-Infinity' COOTBeTCT-
венно;
♦ при конкатенации строки и логической величины — значение true будет преоб­
разовано В строку ' tru e', a fa lse — В ' f a ls e ':
> 'Значение: ' + false
< "Значение: false"

♦ при конкатенации строки и undefined— последнее преобразуется в строку

'undefined';
♦ при использовании в качестве условия значения, не относящегося к логическому
типу:
• любое ненулевое число преобразуется в true:
> (123) ? 'Ненулевое число' : 'Ноль'
< "Ненулевое число"

• о преобразуется в false;
• Infinity И -Infinity — В true;

• NaN — В false;

• любая непустая строка — в true:

> ('0') ? 'Непустая строка' : 'Пустая строка'
< "Непустая строка"

• пустая строка — в false:

> ('') ? 'Непустая строка' : 'Пустая строка'
< "Пустая строка"

• undefined — В false.
Операторы сравнения (см .разд. 1.5) при сравнивании значений разных типов пред­
варительно преобразуют их к одному типу:
> 2 == 2
< true

> 2 != '2 '

< false

Операторы === (строго равно) и !== (строго не равно) преобразования к единому

типу не выполняют и в случае несовпадения типов операндов всегда возвращают
false и true соответственно:
> 2 === 2
< true
32 Часть I. Начала JavaScript

> 2 === '2'

< false

> 2 !== 2
< false

> 2 !== '2'

< true

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

плюс : +. Полученное в результате преобразования число возвращается в качестве
результата:
> +'1231
< 123

> +'123.456'
< 123.456

Для преобразования строк в числа можно использовать языковые конструкции (это

встроенные функции, которые мы рассмотрим в уроке 3):
♦ parselnt {<строка>) — Преобразует Значение строка В целое ЧИСЛО, Которое ВОЗ­
вращается в качестве результата;
♦ parseFloat (<строка>) — преобразует значение строка В дробное ЧИСЛО, ВОЗВра­
щаемое в качестве результата.
Они корректно преобразуют в число строки, содержащие пробелы в начале и (или)
конце, и те, в которых после цифр находятся буквы:
> parselnt('1001)
< 100

> parseFloat(1123.456')
< 123.456

> parselnt(' 100 ')

< 100

> parselnt ('ЮОсто')

< 100

> parseFloat('123.456abcdef')
< 123.456

1.12. Самостоятельные упражнения

♦ Даны величины размера 17, 19 и 25 дюймов. Переведите их в сантиметры (для
этого достаточно умножить величину в дюймах на 2,54).
♦ Проверьте, делится ли число 123456789 на 3 без остатка (iподсказка: воспользуй­
тесь оператором взятия остатка от деления %и проверьте, равен ли получивший­
ся остаток 0).
Урок 1. Типы данных, операторы и переменные 33

♦ Объявите переменную sum2 и присвойте ей сумму чисел 500, 600 и 700.

♦ Объявите переменную count и присвойте ей число 3.
♦ Разделите значение переменной sum2 на значение переменной count. Получив­
шееся частное присвойте константе average. В результате у вас получится сред­
нее арифметическое чисел 500, 600 и 700.
♦ Выведите полученное среднее арифметическое в консоли в формате:
Среднее арифметическое: <значенив>

♦ Проверьте, были ЛИ ранее объявлены переменные sum, count2 И specialValue.

♦ Вычислите квадратные корни от 2, 3, 4 и 7. Для этого воспользуйтесь следую­
щей языковой конструкцией (подробности о ней — в уроке 4):
Math.sqrt(<число, от которого нужно взять корень> )

Извлеченный корень возвращается в качестве результата.

 Урок 2
Выражения
и управляющие конструкции
Веб-сценарии
Выражения
Условные выражения
Блоки
Выражения выбора
Циклы
Комментарии

2.1. Упражнение. Пишем первый веб-сценарий

Напишем наш первый веб-сценарий, который будет пересчитывать введенную
пользователем величину размера из дюймов в сантиметры и выводить результат на
экран.
Веб-сценарий представляет собой набор инструкций, которые веб-обо­
зреватель должен последовательно выполнить для достижения нужного
результата. Такая инструкция называется выражением .
I Каждое выражение, записываемое в веб-сценарии, обязательно должно за-
I вершаться символом ; (точка с запятой).
Для простоты сделаем наш сценарий внутренним, поместив его непосредственно
в HTML-код небольшой учебной страницы.I
I Внутренний веб-сценарий полностью записывается в HTML-коде веб-стра-
I ницы.
Внутренний сценарий должен помещаться в парном теге <script>. У этого тега ре­
комендуется указать атрибут type со значением text/javascript — так мы сообщим
веб-обозревателю, что сценарий написан на JavaScript.
1. В папке 2\!sources сопровождающего книгу электронного архива (см. приложе­
ние 3) найдем файл 2.1.html и скопируем его в какую-либо папку на локальном
диске.
Этот файл хранит веб-страницу, содержащую лишь заголовок первого уровня
(тег <hl>) с текстом «Пересчет величин».
36 Часть I. Начала JavaScript

2. Откроем копию файла 2.1.html в текстовом редакторе и вставим сразу после тега
<ы> пустой тег <script> (здесь и далее в тексте книги подобные вставки выде­
ляются полужирным шрифтом), в который совсем скоро поместим код сце­
нария:
<Ь1>Пересчет величин</Ь1>
<script type="text/javascript">
</script>

3. Сначала нам нужно вывести на экран стандартное диалоговое окно с полем вво­
да, в которое пользователь будет заносить требуемую величину в дюймах.
Для этого вставим в тег <script> первое выражение сценария, которое выведет
на экран такое окно и присвоит введенную пользователем величину константе
ins:
<script type="text/javascript">
const ins = window.prompt('Величина в дюймах1, 0);
</script>

Для вывода окна М Ы применили языковую конструкцию window.prompt о (под­

робнее о ней рассказано в уроке 11). В круглых скобках мы записали строку
с пояснением, которое будет отображено в окне над полем ввода, и, через запя­
тую, изначальное значение, что будет присутствовать в поле (у нас — о). В ка­
честве результата языковая конструкция вернет введенное в окно значение в ви­
де строки.
Поскольку значение переменной ins у нас после первого присваивания не меня­
ется, мы объявили ее как константу — оператором const (об объявлении пере­
менных разговор шел в разд. 1.7).
4. Добавим второе выражение, которое пересчитает полученную ранее дюймовую
величину в сантиметры, умножив ее на 2,54, и присвоит результат константе
cents:
<script type="text/javascriptм>
const ins = window.prompt('Величина в дюймах', 0);
const cents = ins * 2.54;
</script>

Величину в дюймах, хранящуюся в переменной ins в виде строки, JavaScript сам

преобразует в число перед тем, как выполнить умножение (подробнее о преоб­
разовании типов говорилось в разд. 1.11).
5. Осталось вывести полученный «сантиметровый» результат на веб-страницу. Для
этого добавим в сценарий последнее выражение, которое и выполнит вывод:
<script type="text/javascript">
const ins = window.prompt('Величина в дюймах', 0);
const cents = ins * 2.54;
window.document.write ('<p> ', cents, '</p> ') ;
</script>
Урок 2. Выражения и управляющие конструкции 37

Языковая конструкция window.document.write о (разговор о ней пойдет ъ уро­

ке 7) выведет на страницу значения, что приведены через запятую в круглых
скобках. Вывести можно как обычные величины, так и фрагменты HTML-кода,
формирующие какие-либо новые элементы страницы. Здесь же мы вывели по­
средством этой конструкции открывающий тег <р>, рассчитанную величину
в сантиметрах и закрывающий тег < /р> , в результате чего на странице появится
новый абзац.
Откроем страницу 2.1.html в веб-обозревателе — и на экране сразу же появится диа­
логовое окно для ввода значения (рис. 2.1).

Рис. 2.1. Диалоговое окно для ввода значения

Введем в поле число 4, нажмем кнопку ОК — и на странице под заголовком Пере­

счет величин появится абзац с вычисленной величиной в сантиметрах (рис. 2.2).

Рис. 2.2. Новый абзац с вычисленной величиной в сантиметрах

Попробуем пересчитать в сантиметры другую «дюймовую» величину. Для этого

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

2.2. Упражнение.
Применяем условные выражения
У сценария, написанного в разд. 2.1, есть недостаток— если в диалоговом окне
ввода величины нажать кнопку Отмена, на страницу будет выведено число 0. Дело
в том, что по нажатию кнопки Отмена языковая конструкция window.prompt вернет
значение null. Следующее выражение нашего сценария умножит это значение
на 2,54, в результате чего и получится 0.
Давайте сделаем так, чтобы вместо нуля выводился осмысленный текст — напри­
мер: «Величина не была введена».
Значит, в сценарии нам перед умножением на 2,54 следует проверить, вернула ли
конструкция window.prompt значение null, и, если это так, вывести текст сооб­
щения. В противном случае мы, как и ранее, вычислим на основе введенного числа
«сантиметровую» величину. Выполнить такую проверку нам поможет условное
выражение.
Условное выражение включает в себя условие (аналогичное тому, что при­
меняется в условном операторе из разд. 1.9) и два выражения. Если условие
истинно, выполняется первое выражение, если ложно — второе.
Условное выражение записывается в формате:
if (< усл ови е> )
<выражение tru e>
else
<выражение f a ls e >

Если ус л о ви е ИСТИННО, ВЫПОЛНЯеТСЯ выражение tr u e ,еСЛИ ЛОЖНО — выражение f a l s e .

Перепишем наш сценарий следующим образом (рис. 2.3).

const ins = window.prompt ('Величина в дюймах1. О);

let cents;
if (ins = null)
cents * 'Величина не была введена';
else
____ cents = ins * 2.54;________________
window.document.write('<p>', cents, '</p>');

Рис. 2.3. В сценарий добавлено условное выражение

Условное выражение (на рис. 2.3 оно выделено рамкой) проверяет, равно ли значе­
ние константы ins (в которой сохраняется занесенная пользователем «дюймовая»
величина) значению null. Если это так, в переменную cents заносится текст сооб­
щения, в противном случае — вычисленная величина в сантиметрах.
Поскольку переменной cents значение присваивается не в момент объявления, мы
объявили ее как обычную переменную — оператором let.
Урок 2. Выражения и управляющие конструкции 39

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

Откроем страницу 2.1.html в веб-обозревателе, нажмем в диалоговом окне ввода

значения кнопку Отмена и посмотрим на результат (рис. 2.4).

2.2.1. Сокращенная форма условного выражения

Условное выражение можно записать в сокращенной форме :
if (<условие>)
<выражение true>

Если условие ИСТИННО, ВЫПОЛНЯеТСЯ выражение tru e , еСЛИ Л О Ж Н О ----- НИЧеГО

| не произойдет.
Вот вариант сценария, использующего сокращенную форму условного выражения:
const ins = window.prompt(’Величина в дюймах', 0);
let cents = 'Величина не была введена';
if (ins != null)
cents = ins * 2.54;
window.document.write('<p>', cents, '</p>');

Сценарий получился даже несколько компактнее и теперь занимает 5 строк, а не 7,

как ранее.

2.2.2. Множественное условное выражение

Множественное условное выражение представляет собой объединение произволь­
ного количества обычных условных выражений. Оно записывается в формате:
if (<условие 1>)
<выражение tru e 1>
else if (<условие 2>)
<выражение tru e 2>

else if (<условие п-1>)

<выражение tru e п-1>
else if (<условие п>)
<выражение tru e п>
[else
<выражение fa lse > ]
40 Часть I. Начала JavaScript

Если ус л о ви е 1 ИСТИННО, ВЫПОЛНЯвТСЯ выражение tr u e 2, еСЛИ ИСТИННО

ус л о в и е 2 — выражение tr u e 2 И Т. Д. ЕСЛИ все усл о ви я ЛОЖНЫ, будет ВЫПОЛ­
нено выражение f a l s e в случае, когда оно присутствует в коде. Количество
усл ови й не ограничено.

Вот вариант сценария, который, помимо всего прочего, предупреждает о случай­

ном вводе отрицательной величины:
const ins = window.prompt('Величина в дюймах', 0);
let cents;
if (ins == null)
cents = 'Величина не была введена';
else if (ins < 0)
cents = 'Величина не может быть отрицательной';
else
cents = ins * 2.54;
window.document.write('<p>', cents, '</p>');

2.3. Упражнение. Используем блоки

Посмотрим на сценарий из разд . 2.2. Переменная cents фактически нужна только
в том случае, если выполняется вычисление величины в сантиметрах. Поэтому
и объявлять ее имеет смысл лишь тогда, когда требуется выполнить пересчет, —
в выражении true (так мы сэкономим память). Если же пользователь нажал кнопку
Отмена, мы можем просто вывести текст сообщения посредством конструкции
window.document.write.
Но вычисление величины в сантиметрах и ее вывод — это два выражения. Однако
условное выражение позволяет использовать только единичные выражения: true и
false. Что делать? Применить блок.

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

I единичных выражений.
Блок создается фигурными скобками { и }, в которые помещаются выражения, вхо­
дящие в его состав.
Перепишем сценарий следующим образом:
const ins = window.prompt('Величина в дюймах', 0);
if (ins == null)
window.document.write('<р>Величина не была ' +
'введена</р>');
else {
const cents = ins * 2.54;
window.document.write('<p>', cents, '</p>');
}
Здесь в качестве выражения else мы применили блок, содержащий два выражения.
Урок 2. Выражения и управляющие конструкции 41

2.3.1. Переменные в блоках

В блоках можно объявлять переменные (что, собственно, и было продемонстриро­
вано только что). При этом:
♦ переменные, объявленные операторами let И const, существуют лишь внутри
блока. Как только выполнится последнее выражение блока, эти переменные
удаляются из памяти:
else {
le t cents = ins * 2.54;
window.document.write('<p>', cents, '</p>');
}
let cents2 = cents;
let message = 'Ошибка! Переменная cents уже не существует.';

♦ переменные, объявленные оператором var, остаются существовать и по завер­

шении выполнения блока. В некоторых случаях это может оказаться полезным:
else {
var cents = ins * 2.54;
window.document.write('<p>', cents, '</p>');
}
let cents2 = cents;
let message = 'Переменная cents все еще существует, ' +
'и к ней можно обратиться.';

2.4. Выражение выбора

Выражение выбора последовательно сравнивает заданное значение с набором ука­
занных величин и при совпадении с какой-либо величиной выполняет соответст­
вующий фрагмент кода.
Выражение выбора проще рассмотреть, сравнивая его с множественным условным
выражением, при исполнении которого будет достигнут аналогичный результат.
Формат выражения выбора: Аналогичное условное выражение:
switch{< зн ач ен и е> ) { if (< зн а ч ен и е > === <велмчмна 1>)
case < вел и чи н а 1>: < фрагмент 1>
< фрагмент 1> else if (< з н а ч е н .> ==== < в е л . 2>)
break; < фрагмент 2>
case <велмчмна 2 > :
< фрагмент 2> else if (< з н а ч .> ==== <вел. п -1 > )
break; < фрагмент п -1 >
else if (< з н а ч .> ==== < в е л и ч . л>)
case < вел и чи н а п - 1 > : < фрагмент п>
<фрагмент п -1 > else
break; 4 < фрагмент d e f a u l t >
42 Часть I. Начала JavaScript

case <величина n> :

<фрагмент n>
break;
[default :
<фрагм. d e f a u l t > ]
}

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

однако выполняется оно быстрее аналогичного множественного условного
выражения.
Рассмотрим пример (предполагается, что переменная screenSize уже объявлена и
хранит значение размера экрана в дюймах):
let s;
switch(screenSize) {
case 3:
s = 'Маленький экран';
break;
case 4 :
s = 'Маленький экран';
break;
case 5:
s = 'Экран средних размеров';
break;
case 6 :
s = 'Большой экран';
break;
default;
s = 'Таких экранов в телефонах не бывает';
}
Здесь, если в переменной screenSize записано число 4, будет выполнен второй по
счету фрагмент кода (записанный после строки case 4:), и переменная s в качестве
значения получит строку 'Маленький экран'.
При использовании выражений выбора следует иметь в виду два момента:
♦ при сравнивании заданного значения с величинами JavaScript применяет опера­
тор === (строго равно). Это значит, что преобразование типов при сравнении не
проводится.
В нашем случае, если в переменной screenSize записана строка '4', она не сов­
падет ни с одной из четырех величин, присутствующих в этом выражении выбо­
ра. В результате будет выполнен фрагмент default, и в переменной s окажется
Строка 'Таких экранов в телефонах не бывает';
♦ в конце каждого фрагмента (за исключением самого последнего) ставится опера­
тор прерывания break. Он немедленно прерывает выполнение выражения вы­
бора.
Урок 2. Выражения и управляющие конструкции 43

Если эти операторы опустить, после выполнения фрагмента, соответствующего

совпавшей величине , станут ВЫПОЛНЯТЬСЯ последующие Фрагменты, пока не будет
достигнут конец выражения выбора. Понятно, что результат исполнения кода
будет не тем, на который мы рассчитывали.
Однако эту особенность выражения выбора можно использовать на практике,
чтобы сократить код.
Вот как это можно сделать на приведенном ранее примере (исправленный код
выделен полужирным шрифтом):
let s;
switch(screenSize) {
case 3:
case 4:
s = 'Маленький экран';
break;
case 5:
s = 1Экран средних размеров';
break;
case 6:
s = 'Большой экран';
break;
default:
s = 1Таких экранов в телефонах не бывает';
} f
При совпадении значения переменной screenSize с величинами з и 4 будет вы­
полнен один и тот же фрагмент кода — присваивающий переменной s строку
'Маленький экран1.

2.5. Упражнение. Используем цикл со счетчиком

Напишем веб-сценарий, который выведет на экран таблицу с числами от 1 до 10 и
квадратными корнями из них. Чтобы не писать 10 однотипных выражений, исполь­
зуем цикл со счетчиком.
f Цикл — фрагмент кода, выполняющийся многократно.

f Условный цикл — выполняется, пока истинно указанное условие.

|| Цикл со счетчиком — выполняется заданное количество раз.

1Счетчик цикла — переменная, хранящая количество уже прошедших вы­

Iполнений (проходов, или итераций) цикла.
Цикл со счетчиком записывается в формате:
for ([<установка>]; [< услови е> ] ; [<приращение>] )
<тело цикла>
44 Часть I. Начала JavaScript

Здесь:
♦ установка — выражение, присваивающее счетчику начальное значение;
♦ у с л о в и е — пока возвращает в качестве результата true, цикл выполняется, но как
только вернет false, исполнение цикла завершается. Практически всегда усл о ви е
проверяет, не превышает ли текущее значение счетчика величину необходимого
количества проходов цикла;
♦ приращение — выражение, изменяющее значение счетчика;
♦ тело ц и к л а —
единичное выражение или блок, который и будет выполняться
заданное количество раз. Собственно, т ело — это код, для которого пишется
цикл.
* * *
1. В папке 2\!sources сопровождающего книгу электронного архива (ш.. приложе­
ние 3) найдем файл 2.5.html и скопируем его в какую-либо папку на локальном
диске.
Этот файл хранит веб-страницу, содержащую заголовок первого уровня с тек­
стом «Пересчет величин» и парный тег <tabie>, создающий «пустую» таблицу.
2. Откроем копию файла 2.5.html в текстовом редакторе и вставим между тегами
<tabie> и </tabie> код, объявляющий переменную-счетчик i и создающий сам
цикл со счетчиком:
<script type="text/javascript">
let i;
for (i = 1; i <= 10; ++i) {
}
</script>

В нашем цикле:
• установка (i = l) — присваивает счетчику значение l (первое число, квадрат­
ный корень которого надо вычислить);
• ус л о в и е (i <= ю ) — проверяет, не превышает ли значение счетчика ю (коли­
чество проходов цикла и одновременно последнее число, чей квадратный ко­
рень нужно вычислить);
• приращение (++i) — инкрементирует (увеличивает на 1) значение счетчика.
3. Напишем тело цикла — выражения, вычисляющие квадратные корни (выделены
полужирным шрифтом):
for (i = 1; i <= 10; ++i) {
window.document.write ('< t r X t d > ', i, '</td>');
window.document.write('<td>' , Math.sqrt(i) , '</tdX/tr>') ;
}
На каждом проходе цикла мы создаем строку таблицы с двумя ячейками: в ле­
вой выводится изначальное число, а в правой— квадратный корень из него.
Для вычисления квадратного корня от числа мы применили конструкцию
Math, sqrt (<число>) , упомянутую Вразд. 1.12.
Урок 2. Выражения и управляющие конструкции 45

Рис. 2.5. Работа цикла, вычисляющего квадратные корни чисел от 1 до 10

Откроем страницу 2.5.html в веб-обозревателе и проверим, работает ли наш цикл

(рис. 2.5).
♦ Приращение совершенно не обязано именно инкрементировать счетчик. Оно
может его декрементировать — и наш цикл выведет квадратные корни чисел от
10 до 1:
for (і = 10; і >= 1; — і) {

}
Оно может увеличивать его на 2, что может понадобиться для вывода квадрат­
ных корней от четных чисел:
for (і = 2; і <= 10; і += 2) { . . . }
♦ И установка , и условие , и приращение не являются обязательными для указания:
• можно опустить уст ановку — тогда начальное значение счетчику следует
присвоить перед исполнением цикла:
let і = 1;
for (; і <= 10; ++і) {

}
• можно опустить у с л о в и е — но тогда придется производить необходимую
проверку в начале тела цикла и прерывать выполнение цикла оператором
break, знакомым нам по разд. 2.4 :
for (i = 1; ; ++i) {
if (i > 10)
break;

}
46 Часть I. Начала JavaScript

• можно не указывать приращение — тогда его придется выполнять в конце тела

циклаI
for (i = 1; i <= 10;) {

i++;
}
В последних двух случаях цикл со счетчиком становится похожим на циклы двух
других разновидностей, которые мы скоро рассмотрим.

2.5.1. Объявление счетчика непосредственно в цикле

Объявление переменной-счетчика МОЖНО ВЫПОЛНИТЬ непосредственно В установке
цикла. В этом случае счетчик будет существовать только в теле цикла :
for (let i = 1; i <= 10; ++i) {

// Здесь, в теле цикла, переменная-счетчик i существует

}
/ / А здесь, за пределами цикла, — уже нет

2.5.2. В приращении можно записать

несколько выражений
В приращении цикла можно выполнить сразу несколько действий, записав необхо­
димые выражения через запятую. В следующем примере одновременно выполняет­
ся инкремент значения переменной i и увеличение на 2 значения переменной j :
for (let i = 0, j = 0; i <= 10; ++i, j += 2) {

// Используем значения переменных i и j в вычислениях

}

2.6. Циклы с предусловием и постусловием

I Цикл с предусловием выполняется, пока заданное условие остается истин-
1 ным. Условие проверяется перед каждым проходом цикла.
Формат цикла с предусловием:
while (< усл ови е>)
<тело цикла>

Пример:
let i = 1;
while (i <= 10) {
window.document.write('<tr><td>’, i, '</td>');
window.document.write(’<td>', Math, sqrt (i) , ’</tdx/tr> ’);
i++;
}
Урок 2. Выражения и управляющие конструкции 47

Цикл с постусловием аналогичен циклу с предусловием, но условие прове­

ряется после каждого прохода цикла. Такой цикл выполнится хотя бы один
раз, даже если условие изначально ложно.
Формат цикла с постусловием:
do
<тело цикла>
while (< услови е> )

Пример:
let i = 1;
do {
window.document.write(1<tr><td>f, i, '</td>1);
window, document .write ('<td>', Math, sqrt (i), '</tdx/tr>') ;
i++;
} while (i <= 10)

2.7. Операторы break и continue

Оператор прерывания break прерывает выполнение всего цикла (а также
выражения выбора— см .разд. 2.6). Он не принимает аргументов и не воз­
вращает результата.
Этот цикл выведет на экран квадратные корни чисел от о до 5:
let i;
for (i = 1; i <= 10; ++i) {
if (i > 5)
break;
window, document .write ('<trxtd>', i, ,</td>'); •
window, document .write (’<td>?, Math, sqrt (i) , '</tdx/tr>') ;
}
Оператор прерывания прохода continue прерывает выполнение текущего
прохода цикла и начинает выполнение следующего. Не принимает аргумен­
тов и не возвращает результата.
Этот цикл выведет на экран только квадратные корни, являющиеся дробными чис­
лами:
let i, sq;
for (i = 1; i <= 10; ++i) {
sq = Math.sqrt(i);
if (sq == Math.floor(sq))
continue;
window.document.write (*<trxtd>f, i, f</td>*);
window, document .write (f<td>’, Math, sqrt (i), '</tdx/tr> *) ;
}
48 Часть I. Начала JavaScript

Языковая конструкция Math, floor {<число>) ОКруГЛЯеТ Заданное число до ближайше­

го меньшего целого и возвращает результат. Целые же числа она «пропускает»
через себя без изменения, и этим можно пользоваться, чтобы узнать, является ли
число целым.

2.8. Комментарии
Комментарий — фрагмент программного кода, не обрабатываемый веб­
обозревателем. Служит для размещения в коде всевозможных заметок, по­
яснений, напоминаний и др.
JavaScript поддерживает два вида комментариев:
♦ однострочный — начинается с последовательности символов / / (два слеша):
// Проверяем, хранит ли переменная sq целое число
if (sq == Math.floor(sq))

♦ многострочный — начинается с последовательности символов /* и заканчивает­

ся последовательностью */:
/*
Объявляем переменные sum, count
и константу convert
V
let sum, count;
const convert = 2.54;

2.9. Строгий режим

Работая в строгом режиме , веб-обозреватель требует, чтобы все исполь­
зуемые в сценарии переменные были предварительно объявлены. Попытка
присвоить значение необъявленной переменной в этом случае вызовет
ошибку.
Чтобы переключить веб-обозреватель в строгий режим, достаточно самым первым
выражением в сценарии поставить строку 'use strict':
'use strict';
/*
Строгий режим включен!
Не забываем объявлять все переменные!
*/
let sum, count;
Урок 2. Выражения и управляющие конструкции 49

2.10. Как набирать JavaScript-код?

Каждое выражение JavaScript обычно записывается на отдельной строке:
const ins = window.prompt('Величина в дюймах', 0);
const cents = ins * 2.54;
window.document.write('<p>', cents, '</p>');

Короткие выражения можно записать в одну строку:

let sum, count; const convert = 2.54;

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

словами и прочими языковыми конструкциями обычно ставятся необязательные
пробелы — так код лучше читается:
const cents = ins * 2.54;

Но их можно не ставить — ради компактности:

const cents=ins*2.54;

Так часто удается значительно уменьшить объем кода.

Вложенность выражений в блоки и другие более сложные выражения отмечается
отступами слева (обычно в 4 пробела):
if (ins != null)
cents = ins * 2.54;

for (i = 1; i <= 10; ++i) {

window.document.write('<tr><td>1, i, '</td>');
window.document.write( . . . );
}
Слишком длинные выражения можно переносить по строкам, разрывая строки
в промежутках между языковыми конструкциями. Строки, на которых находятся
оставшиеся части выражения, часто выделяются увеличенными отступами слева:
window, document .write ('<td><strongXem>', Math.sqrt (i) ,
'</emX/strongx/tdx/tr>');

2.11. Самостоятельные упражнения

♦ Доработайте сценарий, переводящий величины из дюймов в сантиметры, таким
образом, чтобы он выводил результат в двух абзацах: в первом— величину
в дюймах, а во втором — в сантиметрах.
♦ Дополните выводимую величину в дюймах обозначением единицы измерения:
«дюйм», «дюйма» или «дюймов». Для округления числа используйте языковую
конструкцию Math, floor {<число>) , а для выбора нужного обозначения единицы
измерения — выражение выбора. Заодно дополните вывод в сантиметрах обо­
значением единицы измерения — «см.».
У вас должно получиться так (рис. 2.6).
50 Часть I. Начала JavaScript

Рис. 2.6. Ожидаемый результат доработки сценария

♦ Напишите страницу 2.9.1.html с веб-сценарием, который выведет квадратные

корни от чисел 10, 20 . . . 200. Используйте для этого цикл со счетчиком.
♦ Напишите страницу 2.9 2.html со сценарием, который будет запрашивать в цикле
числа, суммировать их, а при вводе числа о — выводить на экран среднее ариф­
метическое введенных чисел.
 Урок З
Функции и массивы
Функции, их объявление и вызов
Локальные переменные и вложенные функции
Функции с необязательными параметрами
Функции с произвольным количеством параметров
Рекурсия
Анонимные функции
Функции-стрелки
Внешние веб-сценарии
Массивы

3.1. Упражнение. Используем функции

Напишем веб-сценарий, который выведет на экран таблицу со значениями длин
окружностей диаметром 2, 5, 10 и 20 м. Поскольку нам придется производить одни
и те же операции с разными значениями в разных местах кода, для их выполнения
мы используем функцию.
Функция — фрагмент программного кода, к которому можно обратиться из
другого места сценария. Может принимать произвольное количество пара­
метров и возвращать результат их обработки.
I Параметр — значение, переданное функции для выполнения вычислений.
Функция должна иметь уникальное имя, по которому выполняется обращение
к ней. Именование функций выполняется по тем же правилам, что и именование
переменных (см. разд . 7.7).
Дадим нашей функции ИМЯ circleLength.
1. Взяв за образец веб-страницу 2.5.html из папки 2\!sources сопровождающего книгу
электронного архива (см. приложение 3), напишем страницу 3.1.html с заголов­
ком первого уровня, «пустым» тегом <tabie> и находящимся в нем «пустым»
тегом <script>, в который поместим наш сценарий.
Перед первым использованием функции необходимо выполнить ее объявление.
'Объявление функции — ее описание, включая имена и состав принимаемых
I параметров.
52 Часть I. Начала JavaScript

Объявление функции записывается в формате:

function <имя функцииУ([< список имен параметров ч е р е з запятуюУ])
<тело функции в ви де блокаУ

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

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

Объявление функции обязательно должно располагаться перед первым об­

ращением к ней (ее вызовом).
2. В теге <script> напишем код объявления функции circieLength, принимающей
один параметр — диаметр окружности с именем d:
function circieLength(d) {
let 1;
1 = d * Math.PI;
return 1;
}
В теле функции мы объявили переменную 1, присвоили ей результат умножения
диаметра d на число л и указали вернуть его из функции в качестве результа­
та — длины окружности.
Оператор возврата результата return выполняет возврат указанного зна­
чения в качестве результата выполнения функции. Он записывается в фор­
мате:
return <возвращ аемое значениеУ

Если оператор return в теле функции отсутствует, функция не будет возвращать

результата.
Для получения значения числа к мы применили языковую конструкцию Math. PI,
рассказ о которой пойдет в уроке 4 .
3. Добавим код, вычисляющий длину окружности диаметром 2 м и выводящий ее
на экран:
window.document.write('<tr><td>2</td>');
window, document .write ('<td>', circieLength (2) , '</tdx/tr>f);

Здесь мы выполнили вызов функции circieLength, передав ей в качестве значе­

ния единственного параметра число 2 (код вызова выделен полужирным шриф­
том).
Вызов функции — указание выполнить объявленную ранее функцию, воз­
можно, с передачей ей параметров и сохранением возвращенного резуль­
тата.
Урок 3. Функции и массивы 53

Вызов функции записывается в формате:

<имя функции>( [<список значений параметров ч е р е з запятую>\)

Оператор вызова функции ( ) (пара круглых скобок) ставится после имени

функции, а внутри него через запятую приводятся значения передаваемых
функции параметров. Если функция не принимает параметров, в скобках не
записывается ничего.
4. Допишем код, вычисляющий и выводящий длины окружностей диаметром 5, 10
и 20 м:
window.document.write('<trxtd>5</td>f);
window, document .write (*<td>f, circleLength (5) , 1</tdx/tr>* );
window, document .write (,<trxtd>10</td>f);
window, document .write (f<td>T, circleLength (10), '</tdx/tr> ');
window, document .write (?<trxtd>20</td>* );
window, document .write (f<td>', circleLength (20) , '</tdx/tr>');

Открыв страницу 3.1.html в веб-обозревателе, мы увидим таблицу со значениями

длин окружностей разных диаметров (рис. 3.1).

Рис. 3.1. Результат вычисления длин окружностей разных диаметров

Приведем еще несколько примеров функций:

♦ функция, принимающая три параметра:
function computeSomeValue(a, b, с) {

let result = computeSomeValue(1, 2, 3);

♦ функция, не принимающая параметров и не возвращающая результата:

function doSomething() {

}
doSomething();
54 Часть I. Начала JavaScript

♦ вычисляя возвращаемый результат непосредственно в операторе return, мы мо­

жем заметно сократить код:
function circleLength(d) { return d * Math.PI; }

3.2. Локальные переменные

и вложенные функции
В примере из разд. 3.1 было показано, что в теле функции можно объявлять пере­
менные.
Локальная переменная — переменная, объявленная в теле функции. Дос­
тупна только внутри тела функции и после ее выполнения уничтожается.
Это касается переменных, объявленных любым оператором: let, const или
var (подробнее об объявлении переменных рассказывалось в разд. 1. 7).

В теле функции можно обращаться к глобальным переменным — объявленным

в обычном коде.
Попытка обратиться К глобальной переменной globalVar В теле функции someFunc
увенчается успехом:
let globalVar = 123;
function someFunc( . . . ) {

let localVar = globalVar;

}
Если существуют и глобальная, и локальная переменные с одинаковыми
именами, попытка обратиться по этому имени в теле функции вызовет об­
ращение к локальной переменной.
Так, если мы обратимся по имени somevar к переменной, объявленной в теле функ­
ции someFunc, ТО ПОЛуЧИМ Значение ЛОКаЛЬНОЙ переменной someVar:
let someVar = 123;
function someFunc( . . . ) {
let someVar = 321;

let otherVar = someVar; // 321

}
Вложенная функция — функция, объявленная в теле другой функции. Дос­
тупна только в теле функции, в которой объявлена. Имеет доступ к локаль­
ным переменным, объявленным во «внешней» функции.
Урок 3. Функции и массивы ___________________________________________ 55

Пример:
// Объявление "внешней" функции
function outerFunc(a, b, с) {
let у = 0;
// Объявление вложенной функции
function innerFunc(d, е) {

// В о вложенной функции доступны локальные переменные

/ /из "внешней" функции
let temp = у;

// Вызов вложенной функции

innerFunc(а, 6);

3.3. Функции с необязательными параметрами

Необязательный параметр функции при вызове функции можно не указы­
вать — в этом случае он получит значение по умолчанию, заданное в объ­
явлении функции.
Чтобы сделать параметр функции необязательным, достаточно в объявлении функ­
ции присвоить ему нужное значение по умолчанию. Это выполняется обычным
оператором присваивания =.
Необязательные параметры обязательно должны располагаться в самом конце
списка принимаемых функцией параметров. В противном случае мы получим
ошибку.
Рассмотрим вариант функции circieLength с необязательным параметром, имею­
щим значение по умолчанию 2:
function circieLength(d = 2) {
let 1;
1 = d * Math.PI;
return 1;
}
Если вызвать эту функцию без параметров, параметр по умолчанию получит значе­
ние 2, и функция успешно вернет результат:
circieLength() // 6.283185307179586

Необязательных параметров может быть сколько угодно:

function someFunc(a, b, с, d = 1, е = 'Пример') {

}
56 Часть I. Начала JavaScript

3.3.1. Функции с необязательными параметрами

в «старом» стиле
Объявление в функциях необязательных параметров оператором = стало возмож­
ным только в последней версии JavaScript. В предыдущих версиях оно не поддер­
живалось, и для этого применялся другой подход. Рассмотрим его — на тот случай,
если нам придется переписывать старый код.
У JavaScript есть особенность: если при вызове функции указать меньшее количе­
ство параметров, чем присутствует в ее объявлении, то не указанным в вызове па­
раметрам будет присвоено значение undefined. Тогда в теле функции можно вы­
полнить проверку, хранит ли параметр значение undefined, и, если так, присвоить
ему нужное значение по умолчанию. Для этого можно применить условный опера­
тор (см .разд. 1.9).
Для практики перепишем функцию circieLength под старые версии JavaScript:
function circieLength(d) {
d = (d === undefined) ? 2 : d;
let 1;
1 = d * Math.PI;
return 1;
}
Однако чаще для проверки такого рода использовали оператор логического
ИЛИ | | . У него тоже есть любопытная особенность. Если оба его операнда не
являются логическими величинами, оператор преобразует первый операнд к логи­
ческому типу. Если в результате получится true, оператор | | вернет изначальное
значение первого операнда, если faise — изначальное значение второго операнда.
Исправим функцию, применив оператор логического ИЛИ:
function circieLength(d) {
d = d || 2;

3.4. Функции
с произвольным количеством параметров
JavaScript позволяет достаточно просто объявить функцию, принимающую произ­
вольное количество параметров. Для этого нужно:
♦ объявить функцию, не принимающую параметров;
♦ в теле функции получить количество принятых параметров, обратившись к язы­
ковой конструкции arguments.length;
♦ получить значения принятых параметров посредством языковой конструкции:
arguments [<порядковый номер параметра>].
Только нужно иметь в виду, что нумерация параметров начинается с о, а не с 1.
Урок 3. Функции и массивы 57

Более подробно об этих языковых конструкциях мы поговорим в уроке 4.

Вот функция, принимающая произвольное количество параметров и формирующая
на их основе маркированный список:
function listValuesO {
let 1 = arguments.length, i;
window.document.write(*<ul>');
for (i = 0; i < 1; i++)
window.document.write('<li>', arguments[i], '</li>');
window.document.write('</ul>');
}
Вызовем ее со следующими параметрами:
listValues('HTML', 'CSS', 'JavaScript');

И получим такой результат (рис. 3.2).

• HTML
• CSS
• JavaScript
Рис. 3.2. Маркированный список на основе вызова функции
с произвольным количеством параметров

3.5. Упражнение. Используем рекурсию

Напишем веб-сценарий, запрашивающий у пользователя число, вычисляющий его
факториал и выводящий полученный результат на страницу. Для этого мы исполь­
зуем рекурсивную функцию, которая вызывает саму себя.
I Рекурсия — вызов функцией самой себя.
1. Пересохраним страницу 2\ех2.1\2.1.html под именем 3.5.html, откроем ее в тексто­
вом редакторе, исправим текст названия (которое записывается в теге <titie>)
и заголовка первого уровня на «Факториал» и удалим из тега <script> весь
JavaScript-код.
2. Впишем в тег <script> код сценария, вычисляющего факториал:
function factorial(val) {
if (val == 1)
return 1;
else
return val * factorial(val - 1);
}
const a = window.prompt('Введите число', 1) ;
window.document.write('<p>', factorial(a), '</p>');

Вычисление факториала выполняет функция factorial. Если в качестве пара­

метра она получит 1, то вернет значение факториала от единицы, также равное 1.
58 Часть I. Начала JavaScript

В противном случае она умножит полученное число на факториал числа, мень­

шего на единицу, который получит, вызвав себя. Это и есть рекурсия в нашем
случае.
Откроем страницу 3.5.html в веб-обозревателе, введем число 5 в открывшееся окно
задания значения и посмотрим, правильно ли вычислен факториал этого числа
(рис. 3.3).

Рис. 3.3. Вычисление факториала числа 5

Бесконечная рекурсия — случай, когда функция вызывает саму себя беско­

нечно.
При каждом вызове функции из тела другой функции веб-обозреватель заносит
сведения об этом вызове в особую область памяти, называемую стеком вызовов.
Эта область имеет ограниченный объем — несколько тысяч позиций, и по ее ис­
черпанию выполнение сценария будет прервано с выдачей сообщения об ошибке.
I Бесконечная рекурсия — это плохо!
В написанном нами сценарии череда последовательных вызовов функцией
factorial самой себя прервется, как только при очередном вызове она получит
в качестве параметра число 1.

3.6. Анонимные функции и функции-стрелки

Анонимная функция — функция, не имеющая имени. Объявляется так же,
как обычная (именованная), но без указания имени (формат объявления
функции был приведен в разд. 3.1).
Объявляемая анонимная функция сразу же должна быть присвоена какой-либо
переменной — в противном случае она будет потеряна.
Реализуем функцию circleLength как аНОНИМНуЮ И ПРИСВОИМ ее переменной
anonFuncI
const anonFunc = function (d) {
let 1;
1 = d * Math.PI;
return 1;
}
Урок 3. Функции и массивы 59

Вызов анонимной функции выполняется указанием имени переменной,

( в которой она хранится, и оператора вызова функции ().

Вызываем анонимную функцию, обратившись К переменной anonFunc, в которой

она хранится:
let cl = anonFunc(5);

I Анонимные функции можно передавать другим функциям в качестве пара-

1 метров.
Объявляем функцию computesomevalue, которая принимает анонимную функцию
в качестве параметра:
function computeSomeValue(fune) {

let 1 = func(10);
}
и вызываем, передав ей функцию из переменной anonFunc в качестве параметра:
let resuit = computeSomeValue(anonFunc);

Функция-стрелка — разновидность анонимных функций, появившаяся

в JavaScript версии ES6. Объявляется с применением последовательности
символов =>, напоминающей стрелку, отчего и получила такое название.
Функция-стрелка может быть объявлена в двух форматах:
♦ полном:
([<список параметров ч е р е з запятую>]) => <тело функции в ви д е блока>

Пример:
const anonFunc2 = (d) => {
let 1;
1 = d * Math.PI;
return 1;
}
♦ сокращенном:
([< список параметров ч е р е з запятую> ]) => <единичное выражение>

Значение, вычисленное вьражением, будет возвращено в качестве результата.

Пример:
const anonFunc3 = (d) => d * Math.PI;

В сокращенном формате можно записать только совсем простую функцию.

Функции-стрелки полностью аналогичны обычным анонимным функциям, но от­
нимают меньше системных ресурсов. Однако они имеют один недостаток, о кото­
ром мы узнаем в уроке 15.
60 Часть I. Начала JavaScript

3.7. Функциональный тип данных

Любая функция— неважно: именованная, анонимная или функция-стрелка— от­
носится к функциональному типу данных. Оператор получения типа typeof
(см. разд. 1.10 ) при вызове с операндом-функцией возвращает строку •function':
let t = typeof circleLength // 'function'
t = typeof anonFunc // 1 function'
t = typeof anonFunc2 // 'function'
t = typeof anonFunc3 // 'f u n c t i o n '

3.8. Упражнение.
Создаем внешний веб-сценарий
В разд. 3.1 мы написали удачную функцию circleLength и теперь хотим использо­
вать ее при разработке других сайтов, для чего вынесем объявление этой функции
во внешний веб-сценарий.

I Внешний веб-сценарий — веб-сценарий, сохраненный в отдельном файле.

Файл с внешним сценарием {файл веб-сценария) представляет собой обычный тек­

стовый файл. Он должен хранить только программный код JavaScript и иметь рас­
ширение js.
Для того чтобы веб-обозреватель смог загрузить и выполнить внешний сценарий,
необходимо привязать его к веб-странице. Такая привязка выполняется все тем же
тегом <script>, не имеющим содержимого, в атрибуте src которого записывается
ссылка на файл сценария.I

Библиотека — внешний веб-сценарий, предназначенный для использования

Iна разных веб-страницах, в том числе другими разработчиками.

Сохраним внешний сценарий с объявлением функции в файле 3.8.js.
1. Откроем страницу 3.1.html, найдем в ней фрагмент JavaScript-кода, объявляющий
функцию circleLength:
function circleLength(d) {

}
выделим его и вырежем в буфер обмена.
2. Создадим в текстовом редакторе новый файл и вставим в него фрагмент из бу­
фера обмена.
3. Сохраним этот файл в той же папке, где находится файл страницы 3.1.html, на­
значив ему имя 3.8.js и задав кодировку UTF-8.
Урок 3. Функции и массивы 61

4. Вернемся к странице и добавим в секцию заголовка (тег <head>) код, привязы­

вающий файл сценария 3.8.js:
<head>

<script type="text/javascript" src="3.8.js"x/script>

</head>

Проверим страницу в работе, открыв ее в веб-обозревателе. Если мы не допустили

ошибок, то увидим таблицу со значениями длин окружностей разных диаметров.

3.9. Встроенные функции JavaScript

В JavaScript присутствует ряд встроенных (реализованных непосредственно в веб­
обозревателе) функций. Вот они:
♦ parseint (<строка> ) — преобразует строку в целое число и возвращает его в ка­
честве результата;
♦ parseFioat {<строка>) — преобразует строку в дробное число и возвращает его
в качестве результата.
Эти функции мы уже рассматривали в разд. 1.11;
♦ isFinite {<число>) --- возвращает true, если ЧИСЛО ЯВЛЯеТСЯ конечным, И false,
если ЭТО значение Infinity, -Inf inity ИЛИ NaN:
> isFinite(10)
< true
> isFinite(10 / 0)
< false

♦ isNaN (<число>) — возвращает true, еСЛИ В качестве числа передано значение NaN,
и false в противном случае;
♦ eval {<строка с вьражением>) — ВЫЧИСЛЯет выражение, переданное В ВИДе строки,
и возвращает результат:
> eval('(10 +20) /2')
< 15

3.10. Массивы. Объектный тип данных

М ассив— набор пронумерованных значений, хранящихся в одной пере­
I менной.

Элемент м ассива— отдельное значение, хранящееся в массиве. Может

I принадлежать любому типу, поддерживаемому JavaScript.

II Индекс — порядковый номер элемента массива. Нумерация элементов мас-

|| сива начинается с о.

| Размер массива — количество элементов, хранящихся в массиве.

62 Часть I. Начала JavaScript

Создать массив можно, указав все входящие в него элементы через запятую и взяв
их в квадратные скобки. Созданный массив присваивается какой-либо переменной:
♦ создаем массив lengths и помещаем в него числа 2, 5, 10 и 20:
> let lengths
> lengths = [2, 5, 10, 20]
< (4) [2, 5, 10, 20]

В качестве результата здесь возвращается значение вида:

(<разм ер массива>) [<элементы массива ч е р е з запятую>]

♦ создаем массив languages и помещаем в него названия языков, применяемых

в веб-разработке:
> let languages
> languages = [’HTML', 'CSS', ’JavaScript’]
< (3) ["HTML", "CSS", "JavaScript"]

♦ можно создать и пустой массив, указав пустые квадратные скобки:

> let emptyArray = []

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

доступа к элементу массива [ ] (пара квадратных скобок), который записывается
в формате:
<перем енная, в которой хранится массив>[<индекс>]

Можно как получать текущее значение из элемента массива, так и заносить в него
новое значение:
♦ извлекаем второй (с индексом 1 — не забываем, что нумерация элементов начи­
нается с о) элемент массива lengths:
> lengths[1]
<5
♦ меняем значение третьего (индекс 2) элемента того же массива на 15:
> lengths[2] = 15
> lengths
< (4) [2, 5, 15, 20]

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

♦ добавляем еще один элемент в массив languages — четвертый по счету:
> languages[3] = 'PHP'
> languages
< (4) ["HTML", "CSS", "JavaScript", "PHP"]

♦ создаем в том же массиве новый элемент, дав ему индекс 7:

> languages[7] = 'Python'
> languages
< (8) ["HTML", "CSS", "JavaScript", "PHP", empty * 3, "Python"]
Урок 3. Функции и массивы 63

Помимо элемента с индексом 7, будут созданы элементы с индексами 4, 5 и б,

чтобы заполнить образовавшуюся «прореху». Они получат значение undefined,
о чем сообщает строка empty * з, выведенная в консоли. Давайте убедимся
в этом:
> languages[4]
< undefined

Вложенный массив — массив, хранящийся в элементе другого массива

{внешнего).

Создаем в пустом массиве emptyArray два элемента с вложенными массивами:

> emptyArray[0] = [1, 2, 3]
> emptyArray[1] = [4, 5, 6]

Для получения доступа к элементу вложенного массива оператор доступа к элемен­

ту [] следует записать дважды: первый оператор выполнит доступ к элементу
внешнего массива, а второй — к элементу хранящегося в нем вложенного массива.
Извлекаем значение третьего элемента вложенного массива, хранящегося во вто­
ром элементе массива emptyArray:
> emptyArray[1][2]
<6
Поскольку элементы массива имеют последовательно увеличивающиеся номера-
индексы, массивы удобно обрабатывать в циклах. Для примера переберем элемен­
ты массива lengths и выведем их через пробел:
let i;
for (i = 0; i < 4; i++)
window.document.write(lengths[i], ' ');

Массивы относятся к объектному типу. Оператор получения типа typeof

(см. разд. 1.10) при вызове с операндом-массивом возвращает строку ’object1:
> typeof languages
< "object"

3.11. Самостоятельные упражнения

♦ Напишите страницу 3.11.1 .html с веб-сценарием, выводящим значения площадей
кругов диаметром 10, 20 и 35 м. Для этого в коде сценария объявите функцию
circieSquare, принимающую в качестве единственного параметра диаметр
окружности и возвращающую вычисленную на его основе площадь круга (для ее
вычисления используйте формулу яг2, где г — радиус окружности).
♦ Напишите страницу 3.11.2.html со сценарием, содержащим объявление функции
average, которая принимает произвольное количество параметров и вычисляет
их среднее арифметическое (при этом параметры, не относящиеся к числовому
64 Часть I. Начала JavaScript

типу, пусть игнорируются). Проверьте функцию на следующих двух наборах

параметров:
average(10, 20, 30, 40, 50, 60, 70, 80, 90, 100)
average (10, '2 0 ' , 30, М О 1, 50, f60\ 70, 180 •, 90, '100')

♦ Напишите страницу 3.11.3.html со сценарием, являющимся модификацией сцена­

рия из страницы 3.11.2.html. Исправьте в нем функцию average таким образом,
чтобы она в качестве параметров могла принимать массивы с числами. Число­
вые элементы полученных массивов должны использоваться в вычислении
среднего значения, нечисловые — игнорироваться. Чтобы получить размер мас­
сива, воспользуйтесь конструкцией вида б е р е м е н н а я , в которой хранится
массив>. length. Модифицированной функции дайте имя average2. Проверьте
функцию на следующих наборах параметров:
average2([10, 20], 30, [40, 50], 60, [70, 80, 90, 100])
average2('[10, 20] \ 30, [40, '50'], 60, ['70, 80\ 90, 100])
 Урок 4
Классы и объекты
Объекты. Свойства и методы
Классы
Коллекции
Класс Object. Объектная нотация
Объектный тип данных
Значащие и ссылочные типы
Добавленные свойства

4.1. Объекты. Свойства и методы

В JavaScript любое значение: число, строка, логическая величина, функция или
массив — является объектом (исключение представляет лишь значение undef ined).
Объект — сложная сущность, представляющая набор переменных, которые
хранят различные характеристики этой сущности, и функций, которые вы­
полняют над ней какие-либо действия.
Объявим переменную СО строкой ' JavaScript ’:
> let str = 'JavaScript'

Эта строка представляет собой объект, поддерживающий ряд свойств и методов,

которыми мы можем воспользоваться.
I Свойство — переменная, входящая в состав объекта и хранящая одну из его
I характеристик.
Для обращения к свойству применяется формат, аналогичный формату обращения
к переменной (см. разд. 1.7):
<переменная с объектом>. <имя свойства>

Пользуясь им, мы можем как получать текущее значение свойства, так и присваи­
вать ему новое значение.
Точка, разделяющая переменную с объектом и имя свойст ва , — это оператор
( доступа к элементу объекта.
Например, свойство length объекта строки хранит ее длину, выраженную в сим­
волах:
66 Часть I. Начала JavaScript

> str.length
< 10

.Метод — функция, входящая в состав объекта и выполняющая определен­

Iное действие над ним.
Для вызова метода применяется формат, аналогичный формату вызова функции
(см. разд. 3.1):
<переменная с объектом> .<имя метода> ([<параметры метода ч е р е з запятую>])

Так, метод toLocaieUpperCase строки возвращает копию объекта строки, у которого

он был вызван {текущего) объекта, с символами, приведенными к верхнему реги­
стру:
> str.toLocaleUpperCase()
< "JAVASCRIPT"

А метод indexOf возвращает позицию указанного символа в текущей строке.

Давайте выясним, на какой позиции находится буква ’s ' :
> str.indexOf('S 1)
<4 // Символ №5 (нумерация символов начинается с 0)

Практически вся функциональность по обработке данных в JavaScript реализована

в виде свойств и методов объектов.

4.1.1. Доступ к свойствам объекта

посредством оператора [] (квадратные скобки)
Обращаться к свойствам объекта можно не только посредством оператора-точки,
но и с помощью оператора доступа к элементу массива [] (см. разд. 3.10), записав
между квадратными скобками строку с именем нужного свойства:
> let s = ’JavaScript*
> // Обращаемся к свойству length строки s
> s[’length’]
< 10
Имя свойства также может храниться в какой-либо переменной и даже формиро­
ваться по ходу выполнения сценария.

4.2. Классы
Класс — образец для создания объектов определенного вида. Он задает на­
бор свойств и методов, которые будут поддерживаться всеми объектами,
относящимися к этому виду.
Класс должен иметь уникальное имя, которое обязано удовлетворять тем же требо­
ваниям, что и имя переменной (см.разд. 1.7).
Список базовых классов, встроенных в JavaScript и реализующих значения различ­
ных видов, приведен в табл. 4.1.
Урок 4. Классы и объекты 67

Таблица 4.1. Список базовых классов, встроенных в JavaScript

Имя класса Вид значений Имя класса Вид значений

Number Число S tr in g Строка
Boolean Логическая величина F u n ction Функция
Array Массив Date Временная отметка

Например, строка 'JavaScript' — это объект, созданный на основе класса String,

ИЛИ объект класса String.

Помимо этого, поддерживаются весьма специфические классы: Math, служащий для

выполнения математических операций, и Arguments, чем-то похожий на массив.
Все эти классы, за исключением Boolean и Function, не поддерживающих никаких
полезных свойств и методов, будут рассмотрены далее в этом уроке.

4.3. Класс N um ber

Класс Number представляет числа (значения числового типа).
Он поддерживает следующие полезные нам методы:
♦ — СТаТИЧеСКИЙ, ВОЗВращаеТ true, если заданное
is Integer [< ч и с л о > ) ЧИСЛО целое,
и false в противном случае.

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

а у самого класса. Выполняет манипуляции лишь над переданными ему па­
раметрами.
Примеры:
> Number.islnteger(123)
< true
> Number.islnteger(1.23)
< false

♦ toString ( [<основание> ] ) ---Преобразует Текущее ЧИСЛО В Строку, КОТОруЮ И ВОЗ­

вращает в качестве результата. Если задано основание , результат возвращается
В системе счисления, соответствующей этому основанию. Если основание не за­
дано, число возвращается в десятичной системе:
> let а = 123
> a.toString()
< "123"
> a.toString(8)
< "173"
> a.toString(16)
< "7Ь"
68 Часть I. Начала JavaScript

♦ toExponential ( [<количество цифр п осле точки>]) — преобразует текущее ЧИСЛО

в экспоненциальный вид и возвращает в виде строки. Если количество цифр
п о сле десятичной точки не указано, веб-обозреватель выведет столько цифр,
сколько нужно для представления этого числа:
> а = 123456.789123
> a.toExponential()
< "1.23456789123е+5"
> a.toExponential(3)
< ”1.235е+5"

♦ toFixed([<количество цифр п осле десятичной Округляет текущее

точки>]) —
ЧИСЛО ДО Заданного количества цифр п осле десятичной точки (ЄСЛИ НЄ указано,
округляет нацело) и возвращает в виде строки:
> a.toFixed()
< "123457й
> a.toFixed(2)
< "123456.79"

♦ toPrecision ( [<длина числа в цифрах>])

— урезает текущее ЧИСЛО ДО заданной
длины и возвращает в виде строки. Если длина не указана, возвращает строку
с неурезанным числом:
< a.toPrecision(7)
> "123456.8"
< a.toPrecision()
> "123456.789123"

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

классом:
♦ MIN VALUE — возвращает наименьшее число, которое способен обработать
JavaScript;
♦ MAX VALUE — возвращает наибольшее число, которое способен обработать
JavaScript.

Статическое свойство — принадлежит не объекту, а классу. Хранит зна­

чение, которое характеризуют сам класс.

Примеры:
> Number.MIN_VALUE
< 5е-324
> Number.MAX_VALUE
< 1.7976931348623157e+308
Урок 4. Классы и объекты 69

4.4. Класс String

Класс string представляет значения строкового типа, относящегося к значащим
типам.
Свойство length этого класса возвращает длину строки в символах:
> 'JavaScript'.length
< 10
Класс string поддерживает весьма много методов:
♦ toLocaleLowerCase () --- ВОЗВращавТ КОПИЮТекущей СТрОКИ, В КОТОрОЙ ВСв СИМВО­
ЛЫ приведены к нижнему регистру с учетом языковых настроек системы:
> 'JavaScript'.toLocaleLowerCase ()
< "javascript"

♦ toLowerCase () — TO же самое, ЧТО И toLocaleLowerCase, НО Не учитывает ЯЗЫКО­

вые настройки. Пригоден только для преобразования строк, набранных латини­
цей;
♦ toLocaieUpperCase () — возвращает копию текущей строки, в которой все симво­
лы приведены к верхнему регистру с учетом языковых настроек системы:
> ’JavaScript'.toLocaieUpperCase()
< "JAVASCRIPT"

♦ toUpperCase () — TO же самое, ЧТО И toLocaieUpperCase, НО Не учитывает ЯЗЫКО­

вые настройки. Пригоден только для преобразования строк, набранных латини­
цей;
♦ trim() — возвращает копию текущей строки, у которой пробелы в начале и кон­
це удалены:
> ’ HTML и CSS '.trim()
< "HTML и CSS"

♦ includes {<подстрока>) — возвращает true, если текущая строка содержит ука­

занную подстроку,, и false в противном случае:
> 'HTML и CSS'.includes('CSS')
< true
> 'HTML и CSS'.includes('Python')
< false

♦ startswith (<подстрока>) — возвращает true, если текущая строка начинается

с указанной подстроки, и false в противном случае:
> 'HTML и CSS'. s t a r t s W i t h ('РНР')
< false

♦ e n d s w i t h (<подстрока>) — возвращает true, если текущая строка оканчивается

указанной подстрокой, и false в противном случае:
70 Часть I. Начала JavaScript

> 'HTML и CSS'.endsWith('CSS')

< true

♦ indexOf (<подстрока> [, <начальная позиция дл я поиска> ]) — возвращает номер

позиции, на которой в текущей строке находится заданная подстрока. Поиск на­
чинается с указанной начальной позиции , а если она не задана, — с начала строки
(с символа с номером о). Если подстрока не найдена, возвращается -1:
> 'JavaScript'.indexOf('а ')
<1
> 'JavaScriptindexOf('а', 2)
<3
> 'JavaScript'.indexOf(1z ')
< -1
♦ lastIndexOf {<подстрока> [, <начальная позиция дл я поиска> ]) — ТО же самое,
что indexOf, но поиск начинается с конца строки:
> 'JavaScript'.lastlndexOf('а')
<3
♦ charAt {<номер символа>) — возвращает символ текущей строки, имеющий ука­
занный номер. Нумерация символов начинается с о:
> 'HTML и CSS'.charAt(2)
< "М"

Вместо этого метода можно использовать оператор доступа к элементу масси­

ва [ ], описанный в разд. 3.10:
> 'HTML и CSS'[2]
< "М"

♦ substr (<номер п е р в о го символа фрагмента>[, <количество символов во фрагмен­

те>] ) — возвращает фрагмент текущей строки. Если количество символов не ука­
зано, возвращаемый фрагмент будет содержать остаток строки. Если номер
п е р в о го символа отрицательный, он будет отсчитан от конца строки. Нумерация
символов начинается с о:
> 'JavaScript'.substr(4)
< "Script"
> 'JavaScript'.substr(4, 3)
< "Scr"
> 'JavaScript'.substr(-4)
< "ript"
> 'JavaScript'.substr(-4,3)
< "rip"

♦ substring {<номер п е р в о го символа фрагментa> [, <номер п о сл ед н его символа

фрагмента>] ) — возвращает фрагмент текущей строки. Если номер п оследн его
Урок 4. Классы и объекты 71

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

Нумерация символов начинается с о:
> ’JavaScript'.substring(4)
< "Script"
> 'JavaScriptf.substring(4, 7)
< "Scr"

♦ replace (<заменяемая подстрока>, <заменяющая подстрока>) — заменяет В теку­

щей строке первое вхождение заменяемой подстроки На заменяющую И ВОЗВращаеТ
результат:
> 'HTML и Python'.replace('Python', 'CSS')
< "HTML и CSS"

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

регулярное выражение (их применение будет описано в уроке 10);
♦ split [<разделитель> [, <предельный р азм ер м асси ва> ]) — разбивает текущую
строку на подстроки ПО заданному символу-разделителю, формирует из подстрок
массив и возвращает его в качестве результата. Можно указать предельный р а з ­
мер массива — тогда избыточные подстроки в него не попадут:
> 'HTML, CSS, JavaScript'.split (', ')
< (3) ["HTML", "CSS", "JavaScript"]
> 'HTML,CSS,JavaScript'.split(',', 2)
< (2) ["HTML", "CSS"]

♦ charCodeAt {<номер символа>)— возвращает числовой Unicode-код символа

с указанным номером. Нумерация символов начинается с о:
> 'HTML и CSS'.charCodeAt(5)
< 1080 // Код буквы «и»

♦ fromCharCode {<код 1>, <код 2> . . . <код п>) — статический, ВОЗВращаеТ Стро­
ку, составленную из символов с заданными Unicode-кодами:
> String.fromCharCode(0x42f, 0x437, 0x44b, 0x43a, 0x20,
0x43, 0x53, 0x53)
< "Язык CSS"

4.5. Класс A rray

Класс Array служит для представления массивов.
Свойство length этого класса возвращает размер массива, т. е. количество элемен­
тов в нем:
> let arrl = [1, 2, 3, 4]
> arrl.length
< 4
72 Часть I. Начала JavaScript

Методов класс Array поддерживает много:

♦ isArray (<объект>) — статический, возвращает true, если объект является масси­
вом, и false в противном случае:
> Array.isArray(arrl)
< true
> Array.isArray(1234)
< false

♦ push (<значение 1>, <значение 2> . . . <значение ri>) — добавляет В конец мас­
сива указанные значения и возвращает новый размер массива:
> let arr2 = [10, 11]
> arr2.push(12, 13)
< 4
> arr2
< (4) [10, 11, 12, 13]

♦ unshift {<значение 1>, <значение 2> . . . <значение п>) — добавляет В начало

массива указанные значения и возвращает новый размер массива:
> arr2.unshift(8, 9)
< 4
> arr2
< (6) [8, 9, 10, 11, 12, 13]

♦ pop о — удаляет последний элемент массива и возвращает его в качестве

результата:
> агг2.рор()
< 13
> агг4
< (5) [8, 9, 10, 11, 12]

♦ shift () — удаляет первый элемент массива и возвращает его в качестве резуль­

тата:
> arr4.shift()
<8
> arr4
< (4) [9, 10, 11, 12]

♦ splice {<индекс п е р в о го удаляем ого элемента>[, <количество удаляемых элем ен-

тов>[, О лемент 1>, О лемент 2> . . . <элемент п>] ] ) — удаляет ИЗ Текущего
массива заданное количество элементов и вставляет на их место заданные
элементы. ЕСЛИ и н декс п е р в о го удаляем ого элемента Отрицательный, ОН ОТСЧИТЫ­
вается с конца массива. Если количество удаляемых элементов не указано, будет
удален только элемент с заданным индексом, если оно равно о — никакие эле­
менты удалены не будут. В качестве результата возвращается массив с удален­
ными элементами:
Урок 4. Классы и объекты 73

> le t аггЗ = ['HTML', ’C++', ’Python']

> аггЗ.s p lic e (1, 1, 'CSS')
< ["C++"]
> аггЗ
< (3) ["HTML", "CSS", "Python"]
> аггЗ.s p lic e (2, 0, ’JavaScript’, 'PHP')
< []
> аггЗ
< (5) ["HTML", "CSS", "JavaScript", "PHP", "Python"]
♦ includes (Оначение> [, <начальный индекс>]) — возвращает true, если массив
содержит элемент с заданным значением, и fa lse в противном случае. Поиск
ведется, начиная с элемента с указанным начальным индексом, если же таковой не
указан — с самого первого элемента массива:
> le t arr4 = [1, 1, 2, 3, 3, 3, 4]
> arr4. in clu d es(1)
< true
> arr4. in clu d es(1, 3)
< fa lse
Метод includes для сравнения указанного значения с элементами текущего мас­
сива использует оператор === (строго равно). Следовательно, типы значения и
элементов массива должны совпадать, в противном случае поиск не увенчается
успехом:
> arr4.includes('3')
< false

♦ indexOf (<значение> [ , <начальный и н д е к о ] ) — возвращает индекс элемента те­

кущего массива, хранящего заданное значение. Поиск начинается с элемента
С указанным начальным индексом. ЕСЛИ начальный и н декс Отрицательный, ОН ОТ­
считывается от конца массива. Если же он не указан, поиск начинается с первого
элемента. Если подходящий элемент не найден, возвращается -l:
> arr4.indexOf(3)
<3
> arr4.indexOf(3, 4)
< 4
> arr4.indexOf(3, -2)
< 5

Этот метод для сравнения указанного значения с элементами текущего массива

также использует оператор === (строго равно);
♦ lastIndexOf {<значение> [, <начальный и н д е к су]) — ТО же самое, ЧТО И indexOf,
только поиск начинается с конца массива:
> arr4.lastlndexOf(3)
< 5
74 Часть I. Начала JavaScript

♦ every {<функция проверки>[, <значение t h i s > ] ) — возвращает true, если все эле­
менты текущего массива проходят проверку. Если хоть один элемент массива не
проходит проверку, возвращается false.
Проверку осуществляет указанная функция, принимающая три параметра: оче­
редной элемент массива, индекс этого элемента и сам массив (два последних
параметра необязательны). Функция должна возвращать логическое значение:
true (если элемент прошел проверку) или false (в противном случае):
> // Проверяем, все ли элементы массива arrl больше О
> arrl.every((el, ind, ar) => el > 0)
< true
> // Проверяем, все ли элементы массива arrl больше 2
> arrl.every((el) => el > 2)
< false

Вторым параметром МОЖНО передать значение , которое будет доступно в теле

функции проверки через локальную переменную this;

♦ some (<функция проверки> [ , <значение t hi s>] ) — ТО же Самое, ЧТО И every, ТОЛЬКО

возвращает true, если проверку проходит хотя бы один элемент текущего мас­
сива:
> arrl.some ((el, ind, ar) => el > 2)
< true

♦ find (<функция проверки>[, <значение t hl s>] ) — ВОЗВращаеТ Первый Элемент

текущего массива, который прошел проверку. Если ни один элемент не прошел
проверку, возвращается undefined. Параметры этого метода те же, что и у мето­
да every:
> arrl.find((el) => el > 3)
< 4
> arrl.find((el) => el > 5)
< undefined

♦ findlndex (<функция проверки>[, <значение thi s>] ) — TO ж е С а м о е , ЧТО И find, НО

в озв р а щ а ет и н д ек с п ер в о го п р о ш е д ш ег о п р о в ер к у эл ем ен та ;

♦ filter {<функция проверки>[, <значение t hi s >] ) — возвращает массив, состав­

ленный из элементов текущего массива, которые прошли проверку. Параметры
этого метода те же, что и у метода every:
> arrl.filter((el) => el > 2)
< (2) [3, 4]

♦ forEach (<функция>[, — просто вызывает указанную функцию

<значение t hi s >] )
для каждого элемента текущего массива. Результата не возвращает. Функция
должна принимать те же параметры, что и аналогичная функция у метода every,
но не должна возвращать результат:
Урок 4. Классы и объекты 75

// Выводим на экран все элементы массива arrl

arrl.forEach((el) => {
window.document.write('<p>f, el, '</p>');
}) ;
♦ map (<функция> [, <значение th is > ] ) — ВЫЗЫВаеТ указанную функцию ДЛЯ КЯЖДОГО
элемента текущего массива, помещает возвращенные ей результаты в новый
массив и возвращает его. Функция должна принимать те же параметры, что и ана­
логичная функция у метода every, и возвращать результат действий с очередным
элементом массива:
> // Создаем массив квадратов чисел из массива arrl
> arrl.map((el) => el ** 2)
< (4) [1, 4, 9, 16]

♦ reduce [<функция> [ , <начальное зн ачен ие> ]) — вызывает указанную функцию ДЛЯ

каждого элемента текущего массива. Функция должна принимать следующие
параметры:
• результат, возвращенный предыдущим вызовом этой функции. Если это пер­
вый вызов (обрабатывается первый элемент массива), хранит заданное
начальное зн ачен ие , если же оно не указано— значение первого элемента
массива;
• значение очередного элемента текущего массива;
• индекс очередного элемента текущего массива (необязательный);
• ссылка на текущий массив (необязательный).
Функция должна возвращать какой-либо результат, который будет передан ей при
следующем вызове.
В качестве результата метод reduce возвращает значение, возвращенное послед­
ним ВЫЗОВОМ функции.
Элементы текущего массива перебираются в направлении от начала к концу.
Примеры:
> // Подсчитываем сумму элементов массива
> arrl.reduce((sum, el) => sum + el)
< 10

> // Создаем строку из пронумерованных элементов

> // массива, перечисленных через запятую
> аггЗ.reduce((str, el, i) => str + ++i + f: 1 + el + ', ', '’)
< "1: HTML, 2: CSS, 3: JavaScript, 4: PHP, 5: Python, "

♦ reduceRight (<функция>[, <начальное зн ачен ие> ] ) — TO же самое, ЧТО И reduce, НО

элементы текущего массива перебираются от конца к началу:
> аггЗ.reduceRight((str, el, i) => str + ++i + f: ' + el + ', ', ,f)
< "5: Python, 4: PHP, 3: JavaScript, 2: CSS, 1: HTML, "
76 Часть I. Начала JavaScript

♦ fill {<значение> [ , <начальный индекс>[, <конечный индексу ]]) — заполняет

элементы текущего массива между начальным и конечным индексом заданным
значением, при ЭТОМ элемент С конечным индексом Не ЗаПОЛНЯвТСЯ. ЕСЛИ конечный
индекс не указан, заполнение ведется до конца массива. Если начальный индекс
не указан, заполнение ведется начиная с первого элемента массива. Результата
метод не возвращает:
> [10, 11, 12, 13, 14].fill (0)
< (5) [0, 0, 0, 0, 0]
> [10, 11, 12, 13, 14] .fill (0, 2)
< (5) [10, 11, 0, 0, 0]
> [10, 11, 12, 13, 14] .fill (0, 2, 4)
< (5) [10, 11, 0, 0, 14]

♦ join ( [<разделитель>] ) — объединяет все элементы текущего массива в строку,

разделяя из заданным символом-разделителем, и возвращает эту строку в качест­
ве результата. Если разделитель не задан, используется запятая:
> arr2.join()
< ’’HTML, CSS, JavaScript”
> arr2.join(’, ')
< ’’HTML, CSS, JavaScript"

♦ concat {<массив i> , <массив 2> . . . <массив n > ) — создает новый массив, со­
держащий все элементы ИЗ текущего И всех переданных ему м ассивов , и возвра­
щает его в качестве результата:
> arrl.concat([5, 6], [10, 11, 12])
< (9) [1, 2, 3, 4, 5, 6, 10, 11, 12]

♦ slice ( [<начальный и ндексу [, Кконечный и н д е к с у ]]) — формирует ИЗ элементов

текущего массива, расположенных между начальным И конечным индексом, НОВЫЙ
массив и возвращает его. Если конечным и ндекс не указан, в новый массив поме­
щаются все оставшиеся элементы. Если и начальный и н декс не указан, создается
копия текущего массива:
> arrl.slice(1, 3)
< (2) [2, 3]
> arrl.slice(1)
< (3) [2, 3, 4]
> arrl.slice()
< (4) [1, 2, 3, 4]

4.5.1. Сортировка массивов

Для сортировки массива применяется метод sort класса Array:
sort([<функция сравненияУ ])

В качестве результата метод возвращает текущий массив, уже отсортированный.

Урок 4. Классы и объекты______________________________________________________________ 77

Если функция сравнения не указана, метод sort сортирует числа по возрастанию:

> let arrl = [32, 7, 90, -4, 15, 900, 64]
> arrl.sort()
< (7) [-4, 15, 32, 64, 7, 90, 900]

Строки сортируются по возрастанию сумм кодов содержащихся в них символов —

в результате выполняется сортировка в алфавитном порядке:
> let arr2 = [’HTML1, ’Ruby', ’CSS', ’PHP', 'Python', 'C++']
> arr2.sort()
< (6) ["C++", "CSS", "HTML", "PHP", "Python", "Ruby"]

Если нужно отсортировать массив в другом порядке, в вызове метода sort следует
задать функцию сравнения. Она должна принимать два параметра: два сравниваемых
элемента массива — и возвращать:
♦ любое отрицательное число — если первый элемент меньше второго;
♦ 0 — если элементы равны;
♦ любое положительное число — если первый элемент больше второго.
Вот пример сортировки массива с числами по убыванию:
> arr.sort((ell, е12) => е12 - ell)
< (7) [900, 90, 64, 32, 15, 7, -4]

Теперь разберемся со строками. Выяснить, какая из них «меньше», а какая «боль­

ше», мы можем посредством обычных операторов сравнения наподобие < и > (под­
робнее об этом рассказано в разд. 1.5):
> 'CSS' < 'РНР'
< true
> 'Python' > 'Ruby'
< false

Но В функции сравнения ДЛЯ ЭТОЙ Цели удобнее Применять МеТОД localeCompare КЛДС-
са string. Вот формат его вызова:
localeCompare(Сравниваемая строка>)

Метод возвращает:
♦ -1 — еСЛИ Текущая Строка «Меньше» сравниваемой;
♦ о — если обе строки равны;
♦ 1 — если текущая строка «больше» сравниваемой.
Вот пример сортировки массива со строками в порядке, обратном алфавитному:
> arr2.sort((ell, е12) => е12.localeCompare(ell))
< (6) ["Ruby", "Python", "PHP", "HTML", "CSS", "C++"]

Метод reverse класса Array меняет порядок следования элементов массива на про­
тивоположный. Метод не принимает параметров и возвращает ссылку на текущий
массив:
78 Часть I. Начала JavaScript

> arr2.reverse()
< (6) г C++", "CSS", "HTML", "PHP", "Python", "Ruby"]

4.6. Класс Date

Класс Date служит для представления временных отметок (даты и времени насту­
пления каких-либо событий).
Создать объект этого класса можно только с помощью оператора new.
Оператор создания объекта new создает объект класса с указанным именем
и возвращает его в качестве результата. Он записывается в формате:
new <имя класса> { [<параметры объекта через запятую>])

Параметры объекта, если они указаны, будут занесены в его свойства непосредст­
венно при создании.
Выражение, создающее объект временной отметки, можно записать в трех фор­
матах:
♦ new Date () — созданная временная отметка будет хранить текущие дату и время:
> let datel = new Date ();

♦ new Date {<год>, <номер месяца, начиная с 0>, <число>[, <часы>, <минуты>,
<секунды>[, <миллисекунды>] ] ) — временная отметка будет хранить указанные
дату и время:
> // 1 января 2019 года, 11:45:09.400
> let date2 = new Date(2019, 0, 1, 11, 45, 9, 400);

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

будет установлено равным о (впрочем, их указывают крайне редко):
> // 1 января 2019 года, 11:45
> let date3 = new Date(2019, 0, 1, 11, 45, 0);

Если также не указать часы, минуты и секунды, временная отметка будет хранить
полночь указанной даты:
> //28 февраля 2019 года, полночь
> let date4 = new Date(2019, 1, 28);

♦ new Date (<строка с датой и временем>] ] ) — строка с датой и временем указыва­

ется в формате:
<год>-<№ месяца>-<число>[ <часы>:<минуты>:<секунды>]
Месяцы в этом случае нумеруются, начиная с 1 :
> // 12 марта 2019 года, 12:05:40
> let date5 = new Date('2019-03-12 12:05:40');
> // 12 марта 2019 года, полночь
> let date6 = new Date('2019-03-121);
Урок 4. Классы и объекты 79

Методы класса Date, предназначенные для получения или изменения одной из со­
ставляющих временной отметки: года, месяца, часов и др. приведены в табл. 4.2.

Таблица 4.2. М етоды класса D ate

Составляющая Получение Изменение

Год g e tF u llY e a r () s e t F u llY e a r (<год>)

№ месяца getM on th () setMonth(<№ месяца>*)

Число g e t D a t e () s e t D a t e (<число>)

Часы g e tH o u r s () s e tH o u r s (<часы>)

Минуты g e tM in u te s () s e tM in u te s (<минуты>)

Секунды g e tS e c o n d s () s e t S e c o n d s (<секунды>)

Миллисекунды g e t M i ll i s e c o n d s () s e t M i l l i s e c o n d s (<мсек>)

* Нумерация месяцев начинается с нуля: 0 — январь, 1 — февраль и т. д.

Примеры:
> // Какой сейчас год?
> datel.getFullYear()
< 2019
> // А месяц?
> с!а1е1. getMonth ()
<2 // Третий по счету месяц — март
> // Меняем месяц на июль, а число — на 24-е
> date2.setMonth(6)
> clate2.setDate (24)

Еще несколько полезных методов:

♦ getDay () — возвращает порядковый номер дня недели от о до б: о — воскре­
сенье, 1 — понедельник ит. д.;
♦ ^ъоса1ез^1пд () — преобразует текущую временную отметку в строку согласно
языковым параметрам системы:
> с ^ е 1 . ^ Ь о с а 1 еЗ ^ :1 п д ()
< "19.03.2019, 11:14:45"

♦ toLocaleDateString () — преобразует дату из текущей временной отметки в

строку согласно языковым параметрам системы:
> datel.toLocaleDateString()
< "19.03.2019"

♦ ^ьоса1еТ1те8^:1пд() — преобразует время из текущей временной отметки

в строку согласно языковым параметрам системы:
80 Часть І. Начала JavaScript

> datel.toLocaleTimeString()
< "11:14:45"

4.7. Класс Math

Класс Math содержит только статические свойства, хранящие математические кон­
станты, и статические методы, реализующие действия математики и тригоно­
метрии.
Статические свойства класса Math:
♦ pi — число к:
> Math.PI
< 3.141592653589793

♦ е — число е (основание натурального логарифма);

♦ SQRT2 — квадратный корень от 2;

♦ sqrti_2 — квадратный корень от 0,5;

♦ LN2 — In 2 (натуральный логарифм от 2);

♦ lnio — In 10 (натуральный логарифм от 10);

♦ LOG2E — lb е (двоичный логарифм от числа е);
♦ LOG2E — lg е (десятичный логарифм от числа е).

Методы класса Math и возвращаемые ими результаты:

♦ sqrt (<число>) — квадратный корень ОТ числа:
> Math.sqrt(20)
< 4.47213595499958

♦ cbrt (<число> ) кубический корень ОТ числа;

♦ min {<произвольное количество чисел>) — наименьшее чиаяо ИЗ указанных:
> Math.min(2, 56, 900, 425, -87)
< -87

♦ тах {<произвольное количество чисел>) — Наибольшее число ИЗ указанных;

♦ abs (<число> ) — модуль (абсолютная величина) числа;
♦ round {<число>) — число , округленное до ближайшего целого;

♦ floor (<число> ) — число , округленное до ближайшего меньшего целого;

♦ ceil (<число> ) — число , округленное до ближайшего большего целого;
♦ trunc (<число> ) — целая часть числа;
♦ sin (< уго л > ) — синус у г л а , заданного в радианах.
Урок 4. Классы и объекты 81

П ояснение
Пересчитать угол из градусов в радианы можно по формуле: аф * тт /1 8 0 .
Вот пример вычисления синуса угла 45°:
> l e t a n g le = 45 * M ath.PI / 180
> a n g le
< 0.7853981633974483
> M a th .s in (a n g le )
< 0.7071067811865475

♦ cos (< уго л > ) — косинус у г л а , заданного в радианах;

♦ tan (<угол>) — тангенс у г л а , заданного в радианах.
♦ asin (<число>) — арксинус В радианах ОТ числа ;
♦ acos (<число> ) * — арккосинус в радианах от числа ;
♦ atan (<число>) — арктангенс В радианах ОТ числа.

П ояснение
Пересчитать угол из радианов в градусы можно по формуле: арад х 180 / тт.
Вот пример вычисления арктангенса от числа 1 и получения результата в градусах:
> l e t a t = M a th .a ta n (l)
> a t * 180 / M ath.PI
< 45

♦ sinh {<число>) — ГИПЄрб0ЛИЧЄСКИЙ СИНуС ОТ числа;

♦ cosh {<число>) — ГИПЄрб0ЛИЧЄСКИЙ КОСИНуС ОТ числа;

♦ tanh (<число>) — ГИПЄрб0ЛИЧЄСКИЙ Тангенс ОТ числа;

♦ asinh (<число>) — ГИПЄрбоЛИЧЄСКИЙ арксинус ОТ числа;
♦ acosh (<число>) — ГИПЄрбоЛИЧЄСКИЙ арККОСИНуС ОТ числа;
♦ atanh {<число>) — ГИПЄрбоЛИЧЄСКИЙ арктангенс ОТ числа;
♦ atan2 (<у>, <х>) — угол в радианах между осью абсцисс и точкой с координата­
ми [х, у], отсчитанный против часовой стрелки;
♦ random () — псевдослучайное дробное число от 0 до 1:
> Math.random()
< 0.2220291778805139
> Math.random()
< 0.5721614375670632
> Math.random()
< 0.19212452555545023

♦ log (<число> ) — натуральный логарифм числа;

♦ exp (<число>) — значение є41"0770;
♦ pow (<а>, <ь>) — значение аь. Метод остался от старых версий JavaScript и может
встретиться в старом коде.
82 Часть I. Начала JavaScript

4.8. Класс Argum ents. Коллекции

Класс Arguments представляет список значений параметров, полученных функцией
при вызове.
Объект этого класса создается самим веб-обозревателем при исполнении тела
функции и присваивается локальной переменной arguments (из разд. 3.2 мы знаем,
что локальные переменные существуют только внутри тела функции).
Класс Arguments поддерживает свойство length, возвращающее количество пара­
метров, полученных функцией.
Для получения собственно значений параметров применяется оператор доступа
к элементу [ ], знакомый нам по разд. 3.10.
Вот пример функции, использующей объект класса Arguments для доступа к пере­
данным ей параметрам:
function manyParameters() {
let 1 = arguments.length, i, el;
for (i = 0 ; i < 1; i++)
el = arguments[i];

}
Как видим, объект этого класса чем-то похож на обычный массив.
Коллекция — объект, имеющий функциональность массива.
Все классы коллекций поддерживают оператор [ ] и свойство length.

4.9. Класс Object. Служебные объекты.

Объектная нотация
Класс Object — самый простой из всех поддерживаемых JavaScript классов и одно­
временно наиболее фундаментальный. Все остальные классы: string, Date, Array
и др. — являются его наследниками.
Объекты класса Object активно применяются для хранения набора каких-либо зна­
чений, представляющих определенную сущность. Такие объекты носят название
служебных.

Создать служебный объект класса Object проще всего, применив объектную

нотацию, которая записывается в формате:

{
<имя свойства 1> : <значение свойства 1>,
<имя свойства 2 > : <значение свойства 2>,

<имя свойства п - 1 > : О н а ч е н и е свойства п-1>,

<имя свойства п> : <значение свойства п>
}
Урок 4. Классы и объекты 83

Пары <имя свойст ва>: О н а ч е н и е свойства> отделяются Друг ОТ Друга запя­

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

Пример:
♦ создаем служебный объект, хранящий сведения о каком-либо человеке:
let person = {
namel: 'Иван',
name2: 'Иванов
аде: 48
};

♦ обращаемся к свойству паше2 этого объекта:

let n = person.паше2;

♦ и передаем объект функции в качестве параметра:

let resuit = computePerson(person);

Служебные объекты применяются в веб-разработке весьма активно, т. к. могут хра­

нить любой набор значений, а создать их очень просто.
Object— наиболее фундаментальный из всех классов JavaScript. Все остальные
классы являются его наследниками.
Наследование — создание одного класса на основе другого. Унаследован­
ный класс {производный, или подкласс), помимо свойств и методов, опреде­
ленных в нем самом, получает все свойства и методы класса, от которого он
наследован {базового, или суперкласса).

4.10. Объектный тип. Значение null

Все объекты, не являющиеся строкой, числом, логическим значением или
функцией, относятся к объектному типу. Оператор typeof возвращает для
таких типов строку ' object1.
Пример:
> datel = new Date()
> typeof datel
< "object"
> typeof [1, 2, 3]
< "object"

I Значение null, также принадлежащее к объектному типу, обозначает нуле-

I вую ссылку, не указывающую ни на один объект.
Объекты могут использоваться в качестве условий в условных операторах и выра­
жениях, а также в арифметических выражениях.
84 Часть I. Начала JavaScript

Любой объект преобразуется в логическое значение true и числовое значение NaN,

в зависимости от типа выражения, в котором он поставлен.
Нулевая ссылка null преобразуется в false и о.
Примеры:
> (datel) ? 'Объект существует' : 'Объект не существует'
< "Объект существует"
> (null) ? 'Объект существует' : 'Объект не существует'
< "Объект не существует"
> 12 * null
<О

4.11. Хранение объектов в переменных.

Значащие и ссылочные типы
Объект может храниться в переменной по-разному, в зависимости от того, к какой
разновидности принадлежит его тип: значащей или ссылочной.
Объекты значащих типов хранятся непосредственно в переменных. При
присваивании такого объекта другой переменной в последнюю помещается
его полная копия.
К значащим типам относятся числа, строки и логические значения.
Пример:
> let а = 1, Ь;
> b = а
> // Значение из переменной а копируется в переменную b .
> // Теперь в переменных а и b хранятся разные объекты.
> // Для проверки присвоим переменной а другое значение.
> а = 2
> // Значение в переменной а изменилось...
> а
<2
> // ... при этом в переменной b осталось старое значение
> b
< 1

Объекты ссылочных типов хранятся в отдельной области памяти, а в пере­

менные записываются ссылки на них. При присваивании такого объекта
ссылка из правой переменной копируется в левую, в результате чего обе
переменные станут указывать на один и тот же объект.
К ссылочным относятся функциональный и объектный типы.
Пример:
> datel = new Date()
> date2 = datel
Урок 4. Классы и объекты 85

> // Переменные datel и date2 должны хранить ссылку на один и тот же

> // объект временной отметки. Проверим это.
> // Выясним месяц посредством обращения к обеим переменным.
> datel.getMonthO
< 2 // Март
> date2.getMonth()
<2
> // Теперь изменим месяц на 1 (февраль), обратившись к переменной datel
> datel.setMonth(1)
> // и выясним месяц, обратившись к переменной date2
> date2.getMonth()
< 1
> // Мы получили то же число 1 (февраль).
> // Следовательно, переменные datel и date2 действительно
> // ссылаются на один и тот же объект.

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

ная хранит, а какая-либо функция возвращает объект, а не ссылку на него.

4.12. Добавленные свойства

В дополнение к свойствам, полученным от класса, мы можем создавать в объектах
новые свойства.
Добавленное свойство — произвольное свойство, созданное в объекте и
расширяющее набор свойств, полученных от класса. Создается простым
присваиванием значения.
Добавленные свойства могут быть созданы только у объектов ссылочных
типов (функционального и объектного).
Для примера добавим свойство description созданному ранее объекту datel, пред­
ставляющему текущую временную отметку:
> datel.description = 'Текущая дата'

После чего сможем обратиться к этому свойству в другом месте кода:

> datel.description
< "Текущая дата"

Свойство description присутствует только в объекте datel. Давайте убедимся

в этом на примере другого объекта временной отметки:
> date2 = new Date(2019, 1, 27, 12, 0, 0)
> date2.description
< undefined // У объекта date2 такого свойства нет

Оператор удаления свойства delete удаляет из объекта указанное добав­

ленное свойство:
delete <переменная с объектом> .<удаляем ое свойстве)>
86 Часть I. Начала JavaScript

Удаляем добавленное свойство description объекта datei:

> delete datei.description

Добавленные свойства мы можем создавать у любых объектов, в том числе слу­

жебных (класса object):
// Добавляем в ранее созданный объект person свойство workplaces,
// хранящее массив с названиями мест работы
person.workplaces = [
'Шараш-Монтаж',
'Монтаж-Шараш',
'Министерство свободного времени'
];

4.13. Дополнительные средства

для работы с объектами
Оператор проверки существования свойства in возвращает true, если
свойство с указанным именем существует в объекте^ и false в противном
случае. Он записывается в формате:
<имя свойства> in <переменная с обгьектом>

имя свойства здесь указывается в виде строки.

Проверяем, существует ли свойство namei в объекте person, созданном в разд. 4.9:

> 'namei' in person
< true

Проверяем, существует ЛИ В ТОМ же объекте СВОЙСТВО address:

> 'address' in person

< false

Оператор принадлежности классу instanceof возвращает true, если задан­

ный объект принадлежит указанному к л а с с у , и false в противном случае. Он
записывается в формате:
<переменная с объектом> instanceof <класс>

Проверяем, принадлежит ли объект person классу object:

> person instanceof Object
< true

Проверяем, принадлежит ли число person классу window:

> person instanceof Window
< false
Урок 4. Классы и объекты 87

Цикл по свойствам последовательно перебирает все свойства, что присутст­

вуют в объекте. Вот формат его записи:
for (<переменная> in <объект>)
<тело цикла>

На каждом проходе цикла имя очередного свойства, представленное в виде строки,

присваивается указанной переменной , которая доступна только в теле цикла.
Перебираем все свойства объекта person и выводим их на экран в формате <имя> :
<значением.
for (pr in person)
window.document.write(’<p>', pr, f: ’, person[pr], ’</p>');

4.14. Самостоятельные упражнения

♦ Возьмите страницу 2.1.html с веб-сценарием, преобразующим величины из дюй­
мов в сантиметры. Доработайте его таким образом, чтобы в случае, если пользо­
ватель введет в дробном числе запятую вместо десятичной точки, он корректно
преобразовывал бы такое число. Файл исходной страницы 2.1.html вы найдете
в папке 4\!sources сопровождающего книгу электронного архива (см. приложе­
ние 3).
Подсказка : вспомните, что строка является объектом класса string, и исполь­
зуйте метод, заменяющий одну подстроку на другую.
♦ Напишите страницу 4.14.1.html со сценарием, который получит от пользователя
список чисел (посредством диалогового окна ввода значения, выводимого кон­
струкцией window.prompt), разделенных запятыми, и выведет на страницу их
среднее арифметическое. При этом не используйте в сценарии циклы.
Подсказка: превратите объект полученной от пользователя строки в массив, со­
держащий отдельные числа, и подумайте, какой метод массива (класса Array)
подойдет в этом случае.
♦ Напишите страницу 4.14.2.html со сценарием, который выведет текущую дату
в формате:
Сегодня <число> <название месяца> <год> г.

Подсказка: создайте объект временной отметки и используйте методы класса

Date.
♦ Напишите страницу 4.14.3.html со сценарием, который выведет в виде таблицы
синусы, косинусы и тангенсы углов 0°, 15°, 30°, 45°, 60°, 75° и 90°.
♦ Напишите страницу 4.14.4.html со сценарием, который получит от пользователя
список чисел, разделенных запятыми, и выведет их отсортированными по воз­
растанию, причем сначала выведет все четные числа, а потом — все нечетные.
Подсказка: превратите полученную от пользователя строку в массив, содержа­
щий отдельные числа, и отсортируйте его.
 Урок 5
Средства отладки
Отладчик веб-обозревателя
Трассировка
Инспектор DOM
Исключения и их обработка

5.1. Вывод сообщений в консоли

В случае ошибки веб-обозреватель немедленно останавливает выполнение сцена­
рия и показывает в консоли соответствующее сообщение. Оно выводится красными
символами на бледно-красном фоне и включает текстовое описание ошибки, имя
файла и номер строки исходного кода, при исполнении которой произошла ошибка
(рис. 5.1).

О ►UncaygHt R é fé ré псе E r r o r ; c i r c I e L e n g t i s n o t d e f i n e d
a t 3 . 1 . h t » I : 1 3 ______________________________________________________________

Рис. 5.1. Пример сообщения об ошибке

Как можно видеть, здесь зафиксирована попытка вызвать необъявленную функцию

circIeLengt в строке 13 файла 3.1.html.
Вообще, при разработке сценариев рекомендуется держать консоль открытой (как
ее открыть, описывалось в разд. 7.7), чтобы сразу видеть все сообщения о возни­
кающих ошибках.

5.1.1. Вывод в консоли произвольных сообщений

Мы можем вывести в консоли произвольное сообщение— например, величину,
вычисляемую сценарием (чтобы посмотреть, правильно ли она вычисляется). Со­
общение будет показано с указанием имени файла и номера строки кода, в которой
был выполнен его вывод.
Для вывода сообщения В КОНСОЛИ применяется метод log объекта класса Console,
представляющего консоль:
window, console.log (<выводимое сообщение>)

Выводимое сообщение может быть строкой, числом или логической величиной.

90 Часть I. Начала JavaScript

Объект консоли хранится в свойстве console объекта класса window, находящегося

в переменной window и представляющего текущее окно веб-обозревателя. Этот
объект и эта переменная создаются самим веб-обозревателем.
Пример:
window.console.log(circleLength(2));

Более подробно класс window, его свойства и методы мы рассмотрим в уроке 11.

5.2. Упражнение.
Работаем с отладчиком веб-обозревателя
Возьмем страницу 3.1 .html, написанную в разд. 3.8, выполним код содержащегося
в ней сценария пошагово — выражение за выражением, и посмотрим, что при этом
происходит. Для этого нам понадобится отладчик веб-обозревателя.
Отладчик — позволяет приостанавливать исполнение сценария в указан­
ных точках останова, трассировать его и просматривать значения, храня­
щиеся в переменных.
Отладчик, как и знакомая нам консоль, входит в состав отладочных инструментов
веб-обозревателя.
Точка останова — выражение, на котором отладчику следует приостано­
вить выполнение сценария и ждать указаний программиста (обычно на вы­
полнение трассировки).
Трассировка — пошаговое, выражение за выражением, исполнение кода
сценария.
1. В папке 5\!sources сопровождающего книгу электронного архива (см. приложе­
ние 3) найдем страницу 3.1.html и файл сценария 3.8.js, после чего откроем стра­
ницу в веб-обозревателе.
2. Находясь в веб-обозревателе, нажмем клавишу <F12>, чтобы вывести панель
с отладочными инструментами.
3. Переключимся на вкладку Sources, где и располагается отладчик (рис. 5.2).

Рис. 5.2. Корешок вкладки Sources

Интерфейс отладчика включает полосу кнопок отладки и три панели, выводя­

щие разные данные (рис. 5.3):
• панель файлов — показывает список всех файлов, хранящих код открытой
страницы (в нашем случае файлы самой страницы и веб-сценария);
Урок 5. Средства отладки 91

Р и с . 5.3. П а н е л и о тл а д чи к а и п о л о с а кнопок отлад ки

• панель исходного кода — показывает содержимое файла, выбранного в пане­

ли файлов;
• панель служебных данных — выводит всевозможную служебную информа­
цию.
Мы можем менять размеры этих панелей относительно друг друга, перетаскивая
мышью разделяющие их верти­
кальные линии. В кладки откр ы ты х Кнопка закр ы ти я
в о тл а д ч и ке ф а й л о в ф айла
Если панель исходного кода по­
казывает не содержимое выбран­
ного файла, а пустой серый фон, [0 3.1-html 3Ajs
нужно в панели файлов выбрать
X function circl«L«ngth{<j)
любой другой пункт (файл или 2 le t 1;
папку — это неважно), после че­ 3 1 - d * M e th .P l;
го вновь переключиться на файл, 4 return 1;
выбранный ранее. 5 >
6
4. Как можно видеть на рис. 5.3, па­
Р и с . 5.4. В кладки о ткр ы ты х в о тл ад чи ке ф а й л о в
нель исходного кода выводит
HTML-код страницы 3.1.html, ко­
торая выбрана в панели файлов. Также в панели файлов мы видим файл сцена­
рия 3.8.js. Давайте выведем и его.
Для этого щелкнем на файле 3.8.js в панели файлов— хранящийся в нем
JavaScript-код появится на отдельной вкладке панели исходного кода (рис. 5.4).
92 Часть I. Начала JavaScript

5. Поскольку нам надо работать со сценарием, содержащемся в файле 3.1.html, пе­

реключимся вновь на этот файл, щелкнув на соответствующей вкладке.
Пусть мы хотим начать трассировку сценария с самого первого его выраже­
ния — вот этого, выделенного рамкой на рис. 5.5.

1 1 ____________ <script type-"text/javascripti'>_______________

Г 12r .. ... ........ *); |
13 W i^ow.docu«ent.wrlte(t<td>^ circleLengthf
Рис. 5.5. Первое выражение сценария

Следовательно, именно на нем нужно поставить точку останова.

Точка останова ставится щелчком мышью на расположенной слева белой
полосе с номерами строк кода напротив нужного выражения и обозначается
синей стрелкой, направленной вправо.
6. Щелкнем мышью на белой полосе напротив первого выражения— и там по­
явится точка останова (рис. 5.6).

<script type="text/javascript">
^window, document,^write( 4tr><td>2</td>‘);
window,document-write("<td>*, circlelength(
Рис. 5.6. На первом выражении сценария поставлена точка останова

Одновременно в области Breakpoints панели служебных данных появится фла­

жок, представляющий эту точку останова. Напротив флажка будет показано имя
файла, номер строки кода, на которой стоит эта точка, и, ниже, фрагмент этого
кода (рис. 5.7).

▼ Breakpoints

в 3.1.html: 12
window. doc ument. w rit«

Рис. 5.7. Область Breakpoints панели служебных данных

с флажком, представляющим точку останова

Сбросив флажок точки останова в области Breakpoints, можно временно

деактивировать эту точку, не удаляя ее.
7. Выполним наш веб-сценарий повторно, перезагрузив страницу.
Выполнение сценария приостановится на точке останова. Строка с этим вы­
ражением в панели исходного кода будет выделена синей рамкой с голубым
фоном (рис. 5.8).

и! <script type="text/javascriptа>______

■Sf ИИіШІоІ -document ,g>write( *<trxtd>2</td> *);

window.document ,write( '<Ы >*, circleLength(
Рис. 5.8. Выполнение сценария приостановлено на точке останова
Урок 5. Средства отладки______ 93

8. Выполним шаг с заходом.

Шаг с заходом — выполнение одного выражения в процессе трассировки
кода, при котором код функции, чей вызов присутствует в этом выражении,
также будет трассироваться.
Выполняется шаг с заходом нажатием кнопки Step into next function call
(рис. 5.9), которая находится на полосе кнопок отладки (см. рис. 5.3), или кла­
виши <F 11>.

Кнопка Кнопка
Resume script execution Step into next function call

Л if 1 rA

Кнопка \ Кнопка
Step over next function call Step out of current function

Рис. 5.9. Кнопки полосы кнопок отладки

Выделенное выражение будет исполнено, и выделение переместится на сле­

дующее (рис. 5.10). В нем находится вызов функции с1гс1еЬепд^. Если мы
снова выполним шаг с заходом, веб-обозреватель станет трассировать код этой
функции.

И <5 crj.pl: 1уре-1Чех1/эауа5сг1р1">

Ш УШ ___________ ^^window>docцп*eлt.^wгite(*<tr><td>2</tcl>,);
131 | *1лс1оц.аосцп»еп^иг^е( *<~ёс1>т, с1гс!е1еп§1:Ь(
1 4 _________ . Ч А а х П г Х ) ; _____________________________

Рис. 5.10. Был выполнен шаг с заходом

9. Проверим, так ли это, снова выполнив шаг с заходом. Отладчик переключит­

ся на вкладку с файлом З.в^э, в котором хранится объявление функции
с1гс1еЬепдЫт, и выделит первое выражение ее тела (рис. 5.11).

1 fu n c tio n c ir c le L e n g th ( d ) {
2 1 l e t 1; '___________ _
3 1 = d * M a th .P I;
4 re tu rn 1 ;
5

Рис. 5.11. Шаг с заходом на первое выражение тела функции с 1 г с !е Ь е п д ^

10. Выполним шаг с заходом еще два раза, чтобы выделение переместилось на по­
следнее выражение тела функции: return 1;.
Веб-обозреватель покажет нам текущие значения параметра d и локальной
переменной, объявленной в этой функции. Так мы сразу поймем, правильно ли
выполняются вычисления (рис. 5.12).
94 Часть I. Начала JavaScript

1 fu n c tio n c ir c le L e n g th ( d ) { û - 2
2 le t 1; 1 = 6 .2 8 3 1 8 5 3 8 7 1 7 9 5 8 6
з] 1 = d * M a th .P I ; d =
4 re tu rn 1;
5 }
6

Рис. 5.12. Текущие значения параметра с!и локальной переменной,

объявленной в функции с 1 г с !е Ь е п д ^

Текущие значения переменных выводятся непосредственно в исходном

I коде на оранжевом фоне.
Посмотреть значение какой-либо переменной также можно, наведя курсор мы­
ши на имя этой переменной, — значение будет выведено в небольшом окошке,
которое можно закрыть уводом курсора с имени переменной или нажатием
клавиши <Езс> (рис. 5.13). Таким же образом можно просматривать и значения
свойств объектов.

Рис. 5.13. Просмотр значения переменной наведением курсора мыши

Как можно видеть, функция вычисляет длину окружности правильно, и трасси­

ровать ее далее смысла нет.
11. Выполним выход из функции.
Выход из функции — выполнение оставшегося кода функции в обычном
режиме и его приостановка на выражении, в котором был выполнен ее вы­
зов.
Выход из функции производится нажатием кнопки Step out of current function
на полосе кнопок отладки (см. рис. 5.9) или комбинации клавиш <Shift>+
<F11>.
Выделение останется на втором по счету выражении, в котором вызывалась
функция circleLength.
12. Поскольку нам более не нужно производить трассировку функции, в дальней­
шем мы будем трассировать код, выполняя шаги с обходом.
Шаг с обходом — выполнение одного выражения в процессе трассировки
кода, при котором код вызываемых функций не трассируется, а исполняется
в обычном режиме.
Выполнение шага с обходом производится нажатием кнопки Step over next
function call на полосе кнопок отладки (см. рис. 5.9) или клавиши <F10>.
Урок 5. Средства отладки 95

Итак, выполним шаг с обходом трижды, пока выделение не остановится на

пятом по счету выражении сценария из страницы 3.1.html.
Судя по всему, в остальном коде ошибок не будет, и исполнять его пошагово
смысла нет.
13. Возобновим работу сценария.
I Возобновление— отмена трассировки и выполнение остального кода
I в обычном режиме.
Возобновление работы сценария производится нажатием кнопки Resume script
execution на полосе кнопок отладки (см. рис. 5.9) или нажатием клавиши <F8>.

5.2.1. Удаление точек останова

Веб-обозреватель сохраняет все точки останова, поставленные в коде. При сле­
дующем открытии этой же страницы все точки останова будут восстановлены.
Удалить точку останова можно повторным щелчком на представляющей ее синей
стрелке, расположенной на левой полосе с номерами строк.
Также можно щелкнуть правой кнопкой мыши на флажке, представляющем нуж­
ную точку останова в области Breakpoints панели служебных данных, и выбрать
в появившемся контекстном меню пункт:
♦ Remove breakpoint — удаление этой точки останова;
♦ Remove all breakpoints — удаление всех точек останова;
♦ Remove other breakpoints — удаление всех точек останова, кроме этой.
В качестве практического упражнения удалите точку останова, поставленную при
выполнении этого упражнения.
Также точку останова можно временно деактивировать и активировать вновь, сбра­
сывая и устанавливая представляющий ее флажок в области Breakpoints панели
служебных данных.

5.3. Инспектор DOM

Многие веб-сценарии изменяют содержание страницы, добавляя, изменяя и удаляя
ее элементы. Посмотреть на текущее содержание страницы можно с помощью ин­
спектора DOM.
Инспектор D O M — отладочный инструмент, показывающий в иерархи­
ческом виде составляющие страницу HTML-теги. Для его вызова нужно
выбрать вкладку Elements панели отладочных инструментов (см. рис. 5.2).
Вот так выглядит инспектор DOM при открытии страницы 3.1.html (рис. 5.14).
HTML-код страницы показывается в виде иерархического «дерева». Мы можем
разворачивать отдельные его «ветви», чтобы посмотреть содержимое соответст­
вующих тегов.
96 Часть I. Начала JavaScript

<idoctype ntml> ж
< h tm l>
► <head>~</head>
▼ < bo dy>
<Л1>Длина о к р у ж н о е т и < /h i >
▼ < ta b le > == $0
► <script type=,ftext/javascriptrt>_</script>
▼ < tb o d y >
▼ <tr>
<td>2</td>
< td > 6 .2 8 3 1 8 5 3 0 7 1 7 9 5 8 6 < /td >
</tr>

► <tr>«</tr>
► <tr>-</tr>
< /tb o d y >
< / t a b le > T

h tm l body ta b le s c rip t

Рис. 5.14. Инспектор DOM при открытии страницы 3.1.html

При наведении курсора мыши на какой-либо тег созданный им элемент выделяется

голубым фоном, а на небольшой панели выводится имя создавшего его тега и гео­
метрические размеры в пикселах.
Например, при наведении курсора мыши на тег <ааЫе> созданная им таблица с ве­
личинами длин окружностей будет выделена (рис. 5.15).

Рис. 5.15. Панель с выделенной таблицей, созданной тегом <table>

5.4. Исключения и их обработка

Обычно при возникновении ошибки выполнение веб-сценария останавливается,
в результате чего может произойти потеря данных или даже искажение страницы.
Избежать аварийной остановки сценария в этом случае можно, обрабатывая ис­
ключения.I
Исключение — объект, генерируемый веб-обозревателем в случае возник­

I новения ошибки и хранящий сведения о ней.

Урок 5. Средства отладки 97

Объект исключения принадлежит одному ИЗ классов, производных ОТ класса Error

(о наследовании классов говорилось в разд. 4.9). Каждый из классов исключений
представляет отдельный вид ошибок.
Обработка исключения — выполнение, в случае возникновения исключе­
ния, его обработчика — фрагмента кода, производящего какие-либо дейст­
вия с целью устранить последствия ошибки (например, выводящего сооб­
щение).
При наличии обработчика исключения исполнение сценария в случае ошибки не
останавливается.
Обработчик исключения записывается в следующем формате:
try
<блок t гу>
catch{<переменная для хранения исключения>)
<блок catch>
[finally
<блок f i n a l 1у>]

Если в блоке t r y возникнет исключение, будет выполнен блок catch — обработчик

исключений, а потом — блок f i n a l l y (если он указан). Если в блоке t r y исключе­
ния не возникнет, ВЫПОЛНИТСЯ ТОЛЬКО блок f i n a l l y (опять же, если он указан).
В блоке f i n a l l y записывается код, который должен выполниться независимо от
того, возникла ли ошибка или нет.
Переменной, указанной в скобках после слова catch, будет присвоен объект исклю­
чения. Эта переменная будет доступна только в блоке catch и может быть исполь­
зована для получения сведений об ошибке.
Все классы исключений поддерживают два свойства:
♦ паше — хранит имя класса исключения в виде строки. Вот все поддерживаемые
JavaScript классы исключений:
• syntaxError — в строке с выражением, переданной встроенной функции eval
(см.разд. 3.9), присутствует ошибка:
eval('1 # l f);
// Здесь возникнет исключение SyntaxError,
// поскольку оператор # в JavaScript отсутствует

• ReferenceError — обращение к несуществующей переменной, функции,

свойству, методу или классу. Возникает только в веб-сценариях;
• TypeError — неподходящий тип значения:
let n = 1;
let s = n.toUpperCase ();
// Здесь возникнет исключение TypeError,
// поскольку метод toUpperCase не поддерживается числами
98 Часть I. Начала JavaScript

• RangeError — для параметра функции или метода указано недопустимое зна­

чение:
let n = 1;
let s = n.toPrecision(500);
// Здесь возникнет исключение RangeError,
// поскольку в качестве параметра метода toPrecision задано
// слишком большое значение

• URiError— ошибка декодирования GET- или POST-параметра (о GET-,

POST-параметрах и передаче данных разговор пойдет на уроке 19);
• EvalError — ТО же, ЧТО И SyntaxError. Поддерживалось более Старыми вер­
сиями JavaScript и может встретиться в старом коде;
♦ message — описание возникшей ошибки в виде строки.
Вот пример кода, обрабатывающий ситуацию, когда функция someFunc, используе­
мая в вычислениях, не объявлена:
let п;
window.document.write('<р>1);
try {
n = someFunc(123);
window.document.write(n);
}
catch(exception) {
if (exception.name == 'ReferenceErrorT)
window.document.write('Функция someFunc не объявлена. ',
'Привяжите к странице файл somefunc.js с ее
'объявлением. ');
else
window.document.write('Возникла ошибка ', exception.name,
': ', exception.message);
}
finally {
window.document.write('</p>');
}
Теперь, если мы забудем привязать к странице файл с объявлением функции
someFunc, на экране появится предупреждающее сообщение, и сценарий не будет
остановлен, а продолжит работать.

5.4.1. Генерирование исключений

Мы можем сгенерировать исключение искусственно, чтобы сообщить другому
фрагменту сценария о возникшей нештатной ситуации.
Оператор генерирования исключения throw принимает в качестве параметра
объект исключения. Формат этого оператора:
throw <объект исключения>
Урок 5. Средства отладки 99

Для создания объекта исключения следует использовать оператор new (см.разд. 4.6).
Объект создается на основе наиболее подходящего класса из упомянутых ранее.
Сгенерированное исключение может быть обработано посредством обычного обра­
ботчика.
Вот вариант функции circieLength, проверяющей, является ли переданный ей
параметр числом, и, если это не так, генерирующей исключение класса TypeError:
function circieLength(d) {
let 1;
if (typeof d != 'number’) {
const ex = new TypeError();
ex.message = 'Допустимы только числа';
throw ex;
}
1 = d * Math.PI;
return 1;
}
Генерируемое этой функцией исключение мы можем обработать следующим обра­
зом:
window.document.write('<tr><td>yte</td>');
window.document.write('<td>');
try {
// Пытаемся вызвать функцию circieLength, передав ей строку 'yte',
/ / и вывести возвращенный ей результат на экран
window.document.write(circieLength('yte'));
}
catch(ex) {
// Если функция сгенерировала исключение, выводим сообщение об ошибке
window.document.write(ex.message);
}
finally {
/ / В любом случае выводим закрывающие теги
window, document .write ('</tdx/tr>' );
}
Генерирование исключений часто применяется при проверке, правильные ли пара­
метры были переданы функции, присутствует ли на странице нужный элемент
и т. п.

5.5. Самостоятельные упражнения

♦ Найдите в папке 5\!sources сопровождающего книгу электронного архива
(см. приложение 5) страницу 4.14.1.html и перепишите содержащийся в ней сце­
нарий таким образом, чтобы он в случае нажатия кнопки Отмена выводил
на экран соответствующее сообщение. Используйте для этого обработчик ис­
ключений.
100 Часть I. Начала JavaScript

♦ Перепишите сценарий из страницы 3.11.2.html, находящейся в той же папке архи­

ва, таким образом, чтобы функция average, вычисляющая среднее арифметиче­
ское, генерировала исключение класса туреЕггог, если ей не был передан ни
один числовой параметр. В коде, вызывающем эту функцию, реализуйте обра­
ботку исключения С ВЫВОДОМ сообщения, извлеченного ИЗ свойства message
объекта исключения. Проверьте исправленную функцию на следующих наборах
параметров:
average(10, 20, 30, 40, 50, 60, 70, 80, 90, 100);
average ('10', '20f, '30', MO', '50', '60', '70\ ’80', *90’, '100')
average()
 ЧАСТЬ II
Управление
веб-страницей
и веб-обозревателем

О События.
Э DOM и ВОМ.
3 Графика и мультимедиа.
О Веб-формы и элементы управления.
О Регулярные выражения.
 Урок 6
События и их обработка
События. Обработчики событий
Понятие DOM
Получение сведений о событии
Фазы события
Обработчик по умолчанию и его отмена

6.1. Упражнение. Обрабатываем события

Напишем простой слайдер — элемент, выводящий на экран три разных изображе­
ния при щелчках на расположенных ниже трех кнопках.
1. В папке 6\!sources сопровождающего книгу электронного архива (см. приложе­
ние 3) найдем страницу 6.1 .html, содержащую заготовку слайдера, и папку images
с изображениями 1Jpg, 2.jpg и 3.jpg, которые будут выводиться с его помощью.
Скопируем их в какую-либо папку на локальном диске.
Страница 6.1 .html с заготовкой для слайдера выглядит так, как показано на
рис. 6.1. В ее нижней части находятся три кнопки с порядковыми номерами, вы­
водящие на экран изображения. Изначально слайдер показывает изображение из

Рис. 6.1. Исходное состояние страницы 6.1 .html

104 Часть II. Управление веб-страницей и веб-обозревателем

файла 1.jpg, а кнопка 1, соответствующая выведенному изображению (активная),

выделена инверсной цветовой гаммой.
2. Откроем файл 6.1.html в текстовом редакторе. Вот HTML-код, создающий сам
слайдер:
<section>
<img id="output" src="images/1.jpg">
</section>
<nav>
<div id="l" class=,,active">l</div>
<div id=,f2">2</div>
<div id="3">3</div>
</nav>

Ter <section> создает панель, в которой будет показываться очередное изобра­

жение. Для его вывода применяется тег <img> с якорем output.
Я корь — уникальная пометка, которая задается у тега в атрибуте id. По
этой пометке в веб-сценарии мы сможем получить объект, представляющий
этот тег, для манипулирования им.
Изначально выводится первое изображение — из файла 1.jpg.
Тег <nav> создает набор кнопок. Чаще всего кнопки слайдера формируются бло­
ками (тегами <div>) или гиперссылками — их проще оформить с применением
стилей. У всех кнопок также заданы якоря: 1, 2 и з. Первая, активная, кнопка
помечена стилевым классом active.
В коде страницы присутствует внутренняя таблица стилей, оформляющая все
эти элементы нужным образом.
В сценарии, который мы напишем, придется взаимодействовать с объектами,
представляющими «кнопки» 1, 2 и з (возьмем название «кнопки» в кавычки, по­
скольку это не настоящие кнопки, создаваемые тегом <input>), а также элемент
output. Все эти объекты входят в состав DOM.

I DOM (Document Object Model, объектная модель документа) — структура

I взаимосвязанных объектов, представляющих элементы страницы.
Чтобы сценарий, манипулирующий элементами страницы, смог получить дос­
туп к представляющим их объектам, эти объекты к моменту выполнения сцена­
рия уже должны быть сформированы в памяти. Для этого сценарий помещают
после HTML-кода, создающего объекты, лучше всего— после закрывающего
тега <html>.
3. После закрывающего тега <htmi> запишем тег <script>, в который заключим код
сценария (напомним, что добавления и правки в уже написанном коде здесь и
далее выделены полужирным шрифтом):
<html>

</html>
Урок 6. События и их обработка 105

<script type="text/javascriptM>
</script>

Теперь нам нужно получить объекты DOM, представляющие тег <img>, в кото­
ром будут выводиться изображения, и блоки-«кнопки». Поскольку у тега <img>
указан якорь output, мы можем найти соответствующий объект по этому якорю.
4. Вставим в тег <script> первое выражение сценария, которое присвоит константе
output объект, представляющий элемент output:
const output = window.document.getElementByld(foutput');

Для получения элемента страницы ПО его якорю применен метод getElementByld

класса HTMLDocument. Объект класса HTMLDocument, представляющий текущую
страницу, хранится в свойстве document объекта window, который представляет
текущее окно веб-обозревателя.

Прим ечание
Подробно объекты и классы DOM, их свойства и методы мы рассмотрим в уроке 7.

5. Чтобы получить коллекцию объектов, представляющих «кнопки», мы выполним

поиск по их CSS-селектору nav div (блоки <div>, вложенные в панель навигации
<nav>).

С этой целью добавим выражение, присваивающее константе b u tto n s коллек­

цию «кнопок»:
const buttons = window.document.querySelectorAll(’nav div');

Метод querySeiectorAii возвращает коллекцию элементов, соответствующих

указанному CSS-селектору.
6. Нам также понадобится переменная для хранения объекта активной «кнопки».
Объявим эту переменную, назвав ее current, и присвоим ей первую, активную,
«кнопку»:
let current = buttons[0];

7. Нам нужно, чтобы при щелчках на «кнопках» 1, 2 и з в элемент output выводи­

лось соответствующее изображение. Для этого надо написать обработчик собы­
тия click и привязать его к «кнопкам».
Событие — сигнал от веб-обозревателя о том, что в элементе страницы
что-то произошло. Каждое событие, могущее возникнуть в элементе, имеет
уникальное имя (например, событие щелчка мышью имеет имя click).

Обработчик события — функция, выполняемая при возникновении опре­

деленного события в определенном элементе страницы. Может принимать
один параметр — объект, хранящий сведения о возникшем событии.
Итак, объявим функцию showlmage — обработчик события click:
function showlmage() {
current = this;
106 Часть II. Управление веб-страницей и веб-обозревателем

output.src = 'images/' + this.id + ’-jpg';

buttons.forEach((el) => {
if (el == this)
el.className = 'active';
else
el.className = '';
}) ;
}

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

ски, хранит объект элемента страницы, к которому привязан обработчик. В на­
шем случае таким элементом будет «кнопка», на которой щелкнули мышью.
Свойство id элемента страницы хранит его якорь. Мы формируем на его основе
ссылку на графический файл и присваиваем ее свойству src Элемента output,
чтобы вывести этот файл на экран.
Далее помечаем «кнопку», на которой был выполнен щелчок, как активную,
привязав к ней стилевой класс active, и убираем этот стилевой класс у всех ос­
тальных «КНОПОК». Коллекция, возвращенная методом querySelectorAll, под­
держивает метод forEach, знакомый нам по массивам (см.разд. 4.5). Функция,
указанная в вызове этого метода, проверяет, является ли очередная «кнопка» из
коллекции той, на которой был выполнен щелчок, и, если это так, присваивает
свойству className, хранящему привязанные к элементу стилевые классы, стро­
ку ' active', а в противном случае — пустую строку.
8. Осталось привязать только что написанный обработчик к событию click, возни­
кающему во всех «кнопках» из коллекции buttons.

Привязка обработчика события выполняется вызовом у нужного элемента

страницы метода addEventListener. Его формат:
addEventListeneг(<имя события>, <обработчик>)

указывается
Имя события В виде строки, а обработчик — в виде ссылки на
нужную функцию.

Напишем выражение, которое выполнит привязку обработчика:

buttons.forEach(
(el) => {
el.addEventListener('click', showlmage);
}
);
Откроем страницу 6-1.html в веб-обозревателе и щелкнем на кнопке 3. На странице
появится третья картинка — взятая из файла 3.jpg (рис. 6.2).
Урок 6. События и их обработка 107

Рис. 6.2. Вид слайдера после щелчка на кнопке 3

6.1.1. Еще немного об обработчиках событий

♦ В качестве обработчика события, помимо именованной, могут быть использова­
ны анонимная функция или функция-стрелка:
el.addEventListener(fclick*, function() {

});

el.addEventListener(1click', () => {

}) ;
♦ В функциях-стрелках переменная this, хранящая элемент, к которому привязан
обработчик, не создается, и обращение к ней вызовет ошибку:
el.addEventListener('click*, () => {
current = this; // Ошибка!

});
♦ К одному и тому же событию одного и того же элемента можно привязать
сколько угодно обработчиков. Они будут выполнены в том порядке, в котором
привязаны:
el.addEventListener('click’, listenerl);
el.addEventListener('click', listener2);
el.addEventListener('click *, listener3);
108 Часть II. Управление веб-страницей и веб-обозревателем

6.1.2. Удаление привязки обработчика к событию

Удалить привязанный ранее обработчик события можно вызовом у нужного эле­
мента страницы метода removeEventListener:
removeEventListener{ < и м я собы т ия> , < обработ чик> )

Пример:
el.removeEventListener(’click*, listener2);

6.1.3. Альтернативный способ привязки обработчиков

к событиям
С помощью этого способа обработчик можно привязать:
♦ в HTML-коде — использованием атрибута тега с именем вида on<имя события>,
в качестве значения которого указывается непосредственно код обработчика
(например, вызов функции):
<div id=,,l" onclick="showImage () ;">l</div>

Сценарий, объявляющий функцию-обработчик, может располагаться после тега,

к которому привязан этот обработчик (поскольку он в любом случае будет вы­
полняться после загрузки всего кода страницы):
<div id="l" onclick=f,showImage () ;">l</div>

<script type="text/javascript">
function showlmage() {

}
</script>

В этом случае функция-обработчик, привязанная в HTML-коде, не получит в ка­

честве параметра объект события (с которым мы познакомимся в разд. 6^3)
и, соответственно, не сможет узнать сведения о событии;
♦ в коде сценария — с применением свойства, которое имеет такое же имя, как и
упомянутый ранее атрибут тега, и которому присваивается сама функция-
обработчик:
const divl = window.document.getElementByld(*1 *);
divl.onclick = showlmage;

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

К секции тела страницы (тегу <body>), Т. К. Привязка методом addEventListener В е е
случае не срабатывает.
♦ Вот так это можно выполнить в HTML-коде:
<body onkeydown="processKeyDown();">
Урок 6. События и их обработка___________________ 109

♦ А так — в коде сценарии, чисто программно:

const body = window.document.body;
body.onkeydown = processKeyDown;

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

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

6.2. События,
поддерживаемые элементами страницы
Элементы страницы поддерживают весьма много событий. В табл. 6.1 приведены
только основные.

Таблица 6.1. Основные собы тия, поддерживаемые элементами страницы

Имя события Когда возникает?

События мыши
c lic k Щелчок мышью
d b lc lic k Двойной щелчок мышью
contextm enu Щелчок правой кнопкой мыши перед выводом контекстного меню
mousedown Нажатие кнопки мыши
mouseup Отпускание кнопки мыши
m ouseenter
Наведение курсора мыши на элемент страницы*
mouseover

mousemove Перемещение курсора мыши на элементе страницы

m ouseleave
Увод курсора мыши с элемента страницы*
mouseout

wheel Прокрутка колесика мыши

События клавиатуры
Возникают только в элементах, способных принимать клавиатурный ввод (в гиперссылках
и элементах управления), а также в секции тела страницы (теге < з ^ у > )

keydown Нажатие любой клавиши

k eyp ress Нажатие алфавитно-цифровой клавиши
keyup Отпускание нажатой ранее клавиши

Событие буфера обмена

сору Копирование выделенного текста

События CSS-анимации
t r a n s itio n e n d Конец воспроизведения анимации с двумя состояниями (создаваемой
атрибутами стиля семейства t r a n s i t i o n )
110 Часть II. Управление веб-страницей и веб-обозревателем

Таблица 6.1 (окончание)

Имя события Когда возникает?

animationstart Начало воспроизведения анимации с несколькими состояниями

(создаваемой атрибутами стиля семейства animation)
animationiteration Завершено очередное повторение анимации с несколькими состоя­
ниями (если она воспроизводится только один раз, не возникает)
animationend Конец воспроизведения анимации с несколькими состояниями

Прочие собы тия

scroll Прокрутка содержимого элемента страницы (если это элемент
с прокруткой)

События тела страницы

Возникают только в секции тела страницы (теге <ЬоЬу>). Обработчики к этим событиям следует
привязывать только с помощью альтернативного способа (см. разд. 6.1.3)

load После загрузки страницы

pageshow После загрузки страницы и события load
resize При изменении размеров страницы (что происходит при изменении
размеров окна веб-обозревателя, в котором она открыта)
beforeunload Перед уходом с текущей страницы (что может быть вызвано
переходом на другую страницу или закрытием текущей вкладки)
pagehide Перед У Х О Д О М С Текущей СТраНИЦЫ, ПОСЛе СОбыТИЯ beforeunload
beforeprint Перед открытием стандартного диалогового окна печати страницы
afterprint После закрытия стандартного диалогового окна печати страницы
нажатием кнопки ОК или Отмена
hashchange При переходе на другой якорь

* Эти два события возникают при одинаковых условиях, но отличаются по количеству фаз их «прохож­
дения» (подробно о фазах событий рассказано в разд. 6.4).

Чаще всего обрабатываются события мыши и клавиатуры. Остальные события,

в особенности события тела страницы, обрабатываются много реже и в специаль­
ных случаях.

6.2.1. Особенности события b efo reu n lo ad

Если обработчик события beforeunload возвращает строку, то при уходе с текущей
страницы появится стандартное окно-предупреждение с кнопками Закрыть и
Отмена. Уход со страницы будет выполнен только при нажатии кнопки Закрыть:
<body onbeforeunload="return 'Покинуть эту страницу?'">

<р><а href="https://www.w3.org/">Ha сайт W3C</a></p>

</body>
Урок 6. События и их обработка 111

6.3. Упражнение.
Получаем сведения о событии
Сделаем так, чтобы при наведении курсора мыши на одну из «кнопок» слайдера,
рассмотренного в разд. 6.1, на экране рядом с курсором появлялась миниатюра со­
ответствующего изображения.
Реализовать ЭТО М О Ж Н О В обработчиках событий mouseover И mouseout: первый обра­
ботчик выведет миниатюру на экран, второй скроет ее. А получить координаты
курсора мыши можно из объекта события, который передается любой функции-
обработчику с единственным параметром (об этом говорилось в разд. 6.1).
1. Итак, продолжим работу над текстом страницы 6.1 .html и добавим после панели
навигации (<nav>) HTML-код, создающий блок, в котором будет выводиться
миниатюра:
<nav>

</nav>
<div ic^"preview"X/div>

Чтобы позже получить объект, представляющий этот блок, пометим его якорем
preview.
2. Добавим во внутреннюю таблицу стилей слайдера стили, задающие оформление
для этого блока:
#preview {
position: absolute;
width: 120px;
height: 80px;
background: left/contain no-repeat;
display: none;
}
#preview.active {
display: block;
}
Миниатюру в этом блоке мы будем выводить в виде графического фона — так
проще.
3. В начало кода сценария добавим выражение, которое получит объект, представ­
ляющий блок preview:
const preview = window.document.getElementByld('preview');

4. Там же объявим функцию getimageURL, которая примет в качестве параметра имя

графического файла и вернет полную ссылку на него:
function getimageURL(fileName) {
return 'images/' + fileName + '.jpg'
}
112 Часть II. Управление веб-страницей и веб-обозревателем

5. Исправим код обработчика события s howimage так, чтобы для формирования

С С Ы Л К И на файл О Н использовал функцию getlmageURL:

fun c t i o n s h o w i m a g e () {
cur r e n t = this;
output, src = getlmageURL (this .id) ;

}
6. Объявим функцию s h o w P r e v i e w — обработчик события m o u s e o v e r «кнопок», ко­
торая выведет на экран блок p r e v i e w с миниатюрой графического изображения,
соответствующего «кнопке», на которую был наведен курсор мыши:
f u n c t i o n showPreview(evt) {
preview.style.left = evt.pageX + 'px';
preview.style.top = evt.pageY + 'px';
preview.style.backgroundlmage = 'url(' +
g e t l m a g e U RL(this.id) + ')';
preview.className = 'active*;
}
Параметр evt будет хранить объект класса MouseEvent, представляющий событие
(более обстоятельный разговор О нем пойдет чуть позже). Свойства р а деХ и
p a g e Y этого класса хранят горизонтальную и вертикальную координаты курсора
мыши относительно левого верхнего угла страницы в пикселах. Добавив к этим
величинам обозначение единицы измерения — рх (пикселы в языке CSS), — мы
получим готовые координаты блока preview. Далее мы выводим соответствую­
щее «кнопке» изображение в качестве графического фона этого блока, после
чего привязываем к нему стилевой класс active, чтобы вывести его на экран.
7. Объявим функцию h i d e P r e v i e w ---обработчик события m o u s e o u t «КНОПОК», КОТО­
рая скроет блок preview:
fu n c t i o n h i d e P r e v i e w () {
preview.className =
}
8. Наконец, дополним код, привязывающий обработчики к событиям, двумя выра­
жениями, которые выполнят привязку написанных ранее обработчиков событий
m o u s e o v e r И mouseout:

b u t t o n s .f o r E a c h (
(el) => {
e l .a d d E v e n t L i s t e n e r ('c l i c k ', s h o w i m a g e );
el.addEventListener ('mouseover ', showPreview) ;
el .addEventLis tener ('mouseout ', hidePreview) ;
}
);
Откроем страницу 6.1.html в веб-обозревателе, наведем курсор мыши на кнопку 3
и полюбуемся миниатюрой, появившейся под курсором мыши (рис. 6.3).
Урок 6. События и их обработка 113

Рис. 6.3. При наведении курсора мыши на кнопку 3 появилась миниатюра рисунка

6.3.1. Классы событий и их свойства

Различные события представляются объектами разных классов. В табл. 6.2 приве­
дены основные классы событий и их свойства.
Прим ечание
Все свойства классов событий доступны только для чтения значений. Попытка при­
своить такому свойству новое значение вызовет ошибку.

Таблица 6.2. Основные классы собы тий и их свойства

Свойство Хранимое значение

Класс Event
Представляет все события, кроме приведенных далее. Также является базовым
для всех остальных классов событий

cu rren tT arget* Элемент страницы, к которому привязан текущий обработчик

(то же, что и переменная t h i s )
ta r g e t* Элемент страницы, в котором изначально возникло событие (источник
события)
typ e Имя возникшего события в виде строки (например, ' c l i c k ' или
'm ouseover'). Полезно, если один и тот же обработчик применяется для
обработки разных событий.

Класс MouseEvent
Производный от класса Event. Представляет все события мыши, кроме w heel

pageX Горизонтальная координата курсора мыши относительно левого верхнего

угла самой страницы в пикселах
114 Часть II. Управление веб-страницей и веб-обозревателем

Таблица 6.2 (продолжение)

Свойство Хранимое значение

pageY Вертикальная координата курсора мыши относительно левого верхнего
угла самой страницы в пикселах
offsetX Горизонтальная координата курсора мыши относительно левого верхнего
угла элемента-источника в пикселах
offsetY Вертикальная координата курсора мыши относительно левого верхнего
угла элемента-источника в пикселах
clientX Горизонтальная координата курсора мыши относительно левого верхнего
угла внутренней области окна в пикселах
clientY Вертикальная координата курсора мыши относительно левого верхнего
угла внутренней области окна в пикселах
screenX Горизонтальная координата курсора мыши относительно левого верхнего
угла экрана в пикселах
screenY Вертикальная координата курсора мыши относительно левого верхнего
угла экрана в пикселах
button Числовое обозначение нажатой кнопки мыши: о— левая, і — средняя или
колесико, 2 — правая
which Числовое обозначение нажатой кнопки мыши: о — ни одна кнопка не была
нажата, і — левая, 2 — средняя или колесико, з — правая
ctrlKey true, если в текущий момент нажата клавиша <Ctrl>, и false в противном
случае
shiftKey true, если в текущий момент нажата клавиша <Shift>, и false в противном
случае
altKey true, если в текущий момент нажата клавиша <Alt>, и false в противном
случае
relatedRatget В случае события mouseover или mouseenter — элемент страницы,
С которого был уведен курсор М Ы Ш И . В случае события mouseout или
mouseleave — элемент, на который был наведен курсор

Класс WheelEvent
Производный ОТ класса Event. Представляет событие wheel

deltaY Расстояние прокрутки по вертикали: положительное, если выполнялась

прокрутка вниз, и отрицательное в случае прокрутки вверх
deltaX Расстояние прокрутки по горизонтали: положительное, если выполнялась
прокрутка вправо, и отрицательное в случае прокрутки влево. Если мышь
не поддерживает прокрутку по горизонтали, всегда хранит о
deltaMode Обозначение единицы измерения для расстояния прокрутки: о— пикселы,
1 — строки, 2 — страницы

Класс KeyboardEvent
Производный от класса Event. Представляет события клавиатуры

charCode В случае события keypress — код введенного символа**. В случае

событий keydown И keyup — ВСвГДЭ 0
Урок 6. События и их обработка 115

Таблица 6.2 (окончание)

С войство Хранимое значение

which В случае события keypress — то же, что и charcode. В случае событий

keydown и keyup — Unicode-код нажатой клавиши***
key Наименование нажатой клавиши в виде строки (например:
'а', 'В', 'Enter')
ctrlKey true, если в текущий момент нажата клавиша <Ctrl>, и false в противном
случае

shiftKey true, если в текущий момент нажата клавиша <Shift>, и false в противном
случае

altKey true, если в текущий момент нажата клавиша <Alt>, и false в противном
случае

K/iaCC ClipboardEvent
Производный от класса Event. Представляет события буфера обмена

Класс TransitionEvent
Производный ОТ класса Event. Представляет событие transitionend

propertyName Имя анимируемого атрибута стиля в виде строки

elapsedTime Продолжительность анимации в виде числа в секундах

Класс AnimationEvent
Производный ОТ класса Event. Представляет события animationstart, animationiteration
И animationend

animationName Имя набора состояний анимации в виде строки

elapsedTime Продолжительность анимации в виде числа в секундах

Класс PageTransitionEvent
Производный ОТ класса Event. Представляет события pageshow И pagehide

persisted true — если страница была сохранена в кэше, и false в противном случае

Класс HashChangaEvent
Производный ОТ класса Event. Представляет событие hashchange

oldURL Интернет-адрес, с которого был выполнен переход

newURL Интернет-адрес, на который был выполнен переход

* Свойства currentTarget и target хранят одинаковые значения только на фазе источника (подробно
о фазах событий рассказано в разд. 6.4).
** Таблицу Unicode-кодов символов можно найти на странице:
https://www.w3schools.com/charsets/ref_html_ytf8.asp.
*** Коды клавиш клавиатуры приведены на странице: http://umi-cms.spb.su/ref/javascript/251/.
116 Часть II. Управление веб-страницей и веб-обозревателем

6.4. Упражнение. Изучаем фазы событий

Сценарий в коде страницы 6.1.html неоптимален: мы привязали обработчики собы­
тий к каждой «кнопке» слайдера, что привело к избыточной трате системных
ресурсов. Оптимальнее привязать их к панели навигации, в которой находятся
«кнопки», и обрабатывать возникающие в «кнопках» события на фазе всплытия.
Каждое событие при возникновении последовательно проходит три фазы :
♦ погружения — событие сначала возникает в самом внешнем элементе (теге
< h tm i> ), далее — в секции тела страницы (<body>), потом — наиболее «внешнем»
родителе элемента-источника и т. д., пока не возникнет в непосредственном
родителе источника;
♦ источника — событие возникает непосредственно в источнике;
♦ всплытия — событие возникает в непосредственном родителе источника,
далее — родителе родителя и т. д., пока не возникнет В теге <htm l>.
Этот процесс носит название «прохождения» событий (event propagation).
Если щелкнуть мышью на одной из «кнопок» слайдера на странице 6.1.html, собы­
тие click пройдет по следующему пути:

№№ Элемент страницы Фаза

1 <html>

2 <body> Погружения

3 <nav>

4 <div> Источника

5 <nav>

6 <body> Всплытия

7 <html>

Событие можно обрабатывать в любом из родителей элемента-источника— на

фазе всплытия или погружения. Дня привязки обработчика в этом случае использу­
ется расширенный формат метода addEventListener:
addEventListeneг {<имя события>, <обработчик>*Ъ
[, <фаза, на которой вы полняет ся обработ ка>])

Если третьим параметром передать значение false или вообще не указывать его,
обработка будет выполнена на фазе всплытия. Если же передать значение true,
обработчик сработает на фазе погружения.
Фазы погружения и источника проходят все события.
Фазу всплытия проходят лишь всплывающие события:
♦ за исключением mouseenter И mouseleave;
МЫШИ,
♦ клавиатуры;
Урок 6. События и их обработка 117

♦ буфера обмена;
♦ анимации.
Остальные события — невсплывающие — не проходят фазу всплытия.
Метод removeEventListener также поддерживает расширенный формат вызова —
с указанием фазы:
removeEventListener{<имя события>, <обработчик>^>
[, <фаза, на которой выполняется обработка>])

1. Продолжим доработку кода страницы 6.1.html и зададим у панели навигации

(<nav>) ЯКОрь buttonset!
<nav id=MbuttonsetM>

</nav>

2. Вставим в начало сценария выражение, присваивающее панель навигации пере­

менной buttonset:
const buttonset = window.document.getElementById(’buttonset');

3. Исправим функцию show image следующим образом:

function showlmage(evt) {
if (evt.target != this) (
current = evt.target;
output.src = getlmageURL (evt.target.id) ;
buttons.forEach((el) => {

});
)
}
Нам нужно выводить картинку только в том случае, когда пользователь щелкнул
на «кнопке». Проверить факт щелчка именно на «кнопке» просто: нужно лишь
сравнить значения свойства target объекта-события (оно, как мы помним, со­
держит источник события) и переменной this (элемент, к которому привязан
обработчик) — это должны быть разные объекты (если же они равны, то пользо­
ватель щелкнул на самой панели навигации, и мы ничего не делаем).
И не забываем, что раз обработчик привязан не к «кнопке», для получения дос­
тупа к «кнопке» нужно использовать свойство target объекта-события, а не
переменную this.
4. Исправим КОД ф у н к ц и й showPreview И hidePreview:
function showPreview(evt) {
if (evt.target != this) {

preview.style.backgroundlmage = 'url(' +
getlmageURL(evt.target.id) + 1)';
118 Часть II. Управление веб-страницей и веб-обозревателем

preview.className = 'active*;
}
}
function hidePreview(evt) {
if (evt.target != this)
preview.className = '';
}
Проверим переделанную страницу в действии и убедимся, что все работает.
Обработка событий на фазе погружения применяется относительно редко.
Обычно в таких обработчиках реализуются всевозможные предварительные
проверки и, если таковые не выполняются, дальнейшее «прохождение»
события прерывается.

6.4.1. Свойства и методы класса Event,

имеющие отношение к «прохождению» событий
Класс Event поддерживает два свойства, позволяющие выяснить детали «прохож­
дения» события:
♦ eventPhase — возвращает числовое обозначение текущей фазы: 1 — погружения,
2 — источника, з — всплытия;

♦ bubbles — возвращает true, если событие всплывающее, и false — если оно не­
всплывающее.
Не принимающий параметров метод stopPropagation прерывает дальнейшее «про­
хождение» события:
function listener(evt) {

evt.stopPropagation();
}

6.5. Упражнение.
Отменяем обработку событий по умолчанию
Блок (тег <div>)— не лучший выбор для создания «кнопок» слайдера. Удобнее
делать их на основе гиперссылок: тег <а> поддерживает атрибут href, в котором
можно записать полную ссылку на нужный файл. Давайте заменим в нашем слай­
дере блоки на гиперссылки.
1. Снова обратимся к коду страницы 6.1 .html и исправим теги <div> на <а>, а также
запишем ссылки на файлы в атрибутах href этих тегов:
<а href="images/1.jpg" class="active">l</a>
<a href="images/2.jpg">2</a>
<a href="images/3.jpg">3</a>
Урок 6. События и их обработка 119

2. Исправим селекторы в стилях, оформляющих «кнопки», и доделаем первый

стиль:
nav а {

display: block;
text-decoration: none;
}
nav a.active {

}
3. Внесем правки в код сценария:

const buttons = window.document.querySelectorAll('nav a 1);

function showlmage(evt) {
if (evt.target != this) {

output.src = evt.target.href;

}
}
function showPreview(evt) {
if (evt.target != this) {

preview.style.backgroundlmage = 'url(' +
evt. target, href + ')';

}
}
Свойство href соответствует одноименному атрибуту тега <а>.

4. Функция getimageURL нам теперь не нужна, так что удалим ее:

function getlmagoURL(filoNamo) {

4
Откроем исправленную страницу 6.1.Мт1 в веб-обозревателе и щелкнем на кноп­
ке 3. Увы — изображение 3.jpg будет открыто, но не в панели слайдера, а непо­
средственно в веб-обозревателе, заменив собой всю страницу (рис. 6.4).
Проблема в том, что при щелчке на гиперссылке выполнился обработчик по
умолчанию, исполнивший переход по этой гиперссылке.
Обработчик события по умолчанию — реализован в самом веб-обо­
зревателе и срабатывает после всех обработчиков, написанных программи­
стом.
120 Часть II. Управление веб-страницей и веб-обозревателем

Рис. 6.4. Изображение 3.jpg открыто не в панели слайдера,

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

Обработчик по умолчанию у разных событий выполняет разные действия:

• click — зависит от элемента страницы (у гиперссылок— переход на целе­
вую страницу, у кнопок — нажатие);
• contextmenu--ВЫВОД КОНТеКСТНОГО Меню;

• события клавиатуры — обработка нажатой клавиши;

• сору — копирование текста в буфер обмена.
У остальных событий обработчики по умолчанию отсутствуют.
Отменить обработчик по умолчанию можно, вызвав у объекта события не при­
нимающий параметров метод prevent De fault, который поддерживается классом
Event. Вызов метода выполняется в теле обработчика события.
5. Отменим для нашей страницы 6.1 .html обработчик события по умолчанию, вста­
вив В конец тела функции showlmage ВЫЗОВ метода preventDefault:
function showlmage(evt) {
if (evt.target != this) {

evt.preventDefault();
}
}
Вот теперь наш слайдер будет работать, как положено.
Урок 6. События и их обработка 121

6.5.1. Свойства класса Event,

касающиеся обработки события по умолчанию
Класс Event поддерживает два свойства, позволяющие получить сведения об обра­
ботчике события по умолчанию:
♦ cancellable— возвращает true, если обработку события по умолчанию можно
отменить, и false в противном случае;
♦ defaultPrevented— возвращает true, если обработчик по умолчанию этого со­
бытия был отменен ранее, И false в противном случае.

6.6. Самостоятельные упражнения

♦ В сценарии на странице 6.1.html сделайте так, чтобы при щелчке правой кнопкой
мыши на элементе output не выводилось контекстное меню (чтобы предотвра­
тить сохранение изображений на локальном диске).
Подсказка: привяжите к событию contextmenu обработчик, в котором отменяйте
обработку события по умолчанию.
♦ Там же сделайте так, чтобы при наведении курсора мыши на активную «кнопку»
миниатюра не выводилась (все равно она не нужна).
Подсказка : обрабатывайте событие mouseover в панели навигации на фазе по­
гружения и в теле обработчика прерывайте дальнейшее «прохождение» собы­
тия.
♦ Там же реализуйте переход от одного изображения к другому нажатием клавиш
<стрелка влево> и <стрелка вправо>.
Подсказка : обрабатывайте событие keydown в секции тела страницы (в теге
<body>).
♦ Возьмите из папки 6\!sources сопровождающего книгу электронного архива
(см. приложение 3) страницу 6.6.html с полем ввода. Напишите сценарий, кото­
рый позволит вводить в это поле только цифры 0-9.
 Урок 7
Управление
элементами веб-страниц
Доступ к веб-странице и ее элементам
Управление элементами веб-страниц
Управление стилями
Создание новых элементов
Получение сведений о веб-странице

7.1. Получение доступа к элементам страницы

Прежде чем выполнять какие-либо действия над элементом страницы, следует
получить представляющий его объект. Этот объект создается веб-обозревателем
в процессе загрузки страницы и входит в набор объектов DOM (объектной модели
документа).
Получить доступ к объектам элементов страницы можно только через объект,
представляющий саму страницу.
При исполнении сценария веб-обозреватель создает переменную window, в которой
сохраняет объект класса window, представляющий текущее окно. Свойство document
объекта окна хранит объект класса HTMLDocument, представляющий текущую веб­
страницу, — он-то нам и нужен.

7.1.1. Доступ к элементам определенного типа

Класс HTMLDocument поддерживает ряд свойств, посредством которых можно полу­
чить доступ к некоторым (не всем!) элементам страницы:
♦ body — объект класса HTMLBodyElement, представляющий секцию тела страницы
(тег <body>):
const body = window.document.body;
body.onkeydown = processKeyDown;

♦ head — объект класса HTMLHeadEiement, представляющий секцию заголовка стра­

ницы (тег <head>);
♦ images — коллекция всех графических изображений (тегов <img>), что есть на
странице:
let imageCount = window.document.images.length;
124 Часть II. Управление веб-страницей и веб-обозревателем

♦ links — коллекция всех гиперссылок (тегов <а>) и областей в картах-

изображениях (тегов <агеа>);
♦ forms — коллекция Всех Веб-форм (теГОВ <fom>);
♦ scripts — коллекция всех веб-сценариев, привязанных к странице;
♦ activeEiement — элемент страницы, имеющий фокус клавиатурного ввода (кла­
виатурный ввод могут принимать лишь гиперссылки, элементы управления
и секция тела страницы — тег <body>).

7.1.2. Доступ к любому элементу страницы

Следующие методы класса HTMLDocument позволят получить доступ к любому эле­
менту страницы:
♦ getElementByld {<якорь>) — возвращает элемент С указанным якорем (задается
в атрибуте тега id) или null,если такого элемента нет:
<img id="output" sгс=мimages/1.jpg">

const output = window.document.getElementByld('outputf);

♦ getElementsByName {<наименованме>)— возвращает коллекцию элементов С ука­

занным наименованием (задается в атрибуте тега name). Если таковых элементов
нет, возвращает пустую коллекцию:
<input type="text" name="namelM>

const namel = window.document.getElementsByName(’namel')[0];

Возвращаемый методом объект коллекции ОТНОСИТСЯ К классу NodeList. Этот

класс поддерживает метод forEach (см.р а з д . 4.5);

♦ getElementsByTagName (<имя тега>) — возвращает КОЛЛекЦИЮ Элементов, СОЗДЛН-

ных тегом с указанным именем (ставится без символов < и >). Если таковых эле­
ментов нет, возвращает пустую коллекцию:
<ul>
<li>HTML;</li>
<li>CSS;</li>
<li>JavaScript.</li>
</ul>

// Получаем второй по счету пункт списка

const li2 = window.document.getElementsByTagName(?li')[1];

Коллекция, возвращаемая ЭТИМ методом, ОТНОСИТСЯ К классу HTMLCollection,

который не поддерживает метод forEach;
♦ getElementsByClassName {<имя ст илевого класса>) — возвращает коллекцию эле­
ментов (в виде объекта класса HTMLCollection), К КОТОРЫМ был привязан СТИЛе­
Урок 7. Управление элементами веб-страниц 125

вой класс с указанным именем (ставится без начальной точки). Если таковых
элементов нет, возвращает пустую коллекцию:
<div class="button">l</div>
<div class="button">2</div>
<div class="button">3</div>

const buttons = window.document.getElementsByClassName('button');

Можно указать несколько имен стилевых классов, разделив их пробелами, —

тогда в полученной коллекции окажутся элементы, к которым были привязаны
все эти стилевые классы:
<div class="button active">l</div>
<div class="button">2</div>
<div class="button">3</div>

let activeButton = window.document. Ъ

getElementsByClassName(’button active')[0] ;

♦ querySeiector {<css-ceMeKTop>) — возвращает первый имеющийся на странице

элемент, соответствующий заданному CSS-селект ору, ИЛИ null, если подходяще­
го элемента нет:
<nav>
<div id="l" class="active">l</div>
<div id="2">2</div>
<div id="3">3</div>
</nav>

// Получаем последнюю "кнопку" слайдера

const lastButton = window.document.
querySeiector('nav div:last-child');

♦ querySeiectorAii {<css-ceneKTop>) — возвращает коллекцию элементов (объект

класса NodeList), СООТВеТСТВуЮ ЩИХ указанному CSS-селект ору. Если таковых
элементов нет, возвращает пустую коллекцию:
const buttons = window.document.querySeiectorAii('nav div');

Можно указать несколько CSS-селекторов, разделив их запятыми, — тогда

в коллекции окажутся элементы, соответствующие всем заданным селекторам:
// Получаем коллекцию из панели навигации и вложенных в нее "кнопок"
const navAndButtons =
window.document.querySeiectorAii('nav, nav div');

Объект, представляющий элемент страницы, относится к классу, который пред­

ставляет HTML-тег, создающий этот элемент. Так, абзацы (теги <р>) представляют­
ся объектами класса HTMLParagraphElement, заголовки (теги <hl> . . . <h6>) — объек­
тами класса HTMLHeadingElement, а блоки (теги <div>) — объектами класса
HTMLDivElement. Все КЛаССЫ-ТвГИ ЯВЛЯЮТСЯ производными ОТ класса HTMLElement.
126 Часть II. Управление веб-страницей и веб-обозревателем

Класс HTMLEiement поддерживает все упомянутые ранее методы, за исключением

getElementByld И getElementsByName. Так ЧТО МЫ МОЖвМ искать нужные элементы
внутри какого-либо элемента:
<nav>
<div id="l" class="active">l</div>
<div id="2">2</div>
<div id="3">3</div>
</nav>

// Получаем панель навигации

const nav = window.document.getElementsByTagName(1nav?) [0];
// И ищем в ней активную "кнопку"
activeButton = nav.querySelector(fdiv.active*);

7.1.3. Доступ к родителю, соседям и потомкам

Класс HTMLEiement поддерживает свойства, позволяющие добраться до родителя,
соседей и потомков текущего элемента:
♦ pa гentE lenient — родитель текущего элемента ИЛИ null, если текущий элемент
не имеет родителя:
// Получаем родитель панели навигации
const body = nav.parentElement; // Тег <body>

♦ children— коллекция потомков текущего элемента в виде объекта класса

HTMLCollection:
// Получаем коллекцию "кнопок" слайдера
const buttons = nav.children;

♦ chiidEiementcount — количество потомков текущего элемента;

♦ firstElementChild— первый потомок текущего элемента или null, если теку­

щий элемент не имеет потомков:
// Получаем первую "кнопку" слайдера
const firstButton = nav.firstElementChild;

♦ lastEiementchiid— последний потомок текущего элемента или null, если теку­

щий элемент не имеет потомков;
♦ nextEiementsibling — следующий сосед текущего элемента или null, если тако­
вого нет;
♦ previousElementSibling— предыдущий СОСвД Текущего Элемента ИЛИ null, еСЛИ
такового нет.
Также поддерживается метод contains (<алеменг>), который возвращает true, если
указанный элемент является потомком текущего элемента, и false в противном
случае:
Урок 7. Управление элементами веб-страниц 127

// Проверяем, является ли активная "кнопка" потомком панели навигации

let result = nav.contains(activeButton); // true

7.1.4. Контекст исполнения веб-сценариев

Код сценария выполняется веб-обозревателем «внутри» (как говорят программи­
сты, в контексте исполнения) объекта класса window, представляющего текущее
ОКНО И хранящегося В переменной window. При этом:

♦ при обращении к переменной по ее имени сначала выполняется поиск свойства

объекта window с указанным именем. Если свойство найдено, выполняется обра­
щение к нему, в противном случае ищется одноименная переменная;
♦ при вызове функции сначала ищется метод окна с таким же именем, и лишь
в случае его отсутствия — одноименная функция.
Следовательно, на практике мы можем опустить обращение к переменной window.
Так, если ранее мы писали:
const body = window.document.body;
const output = window.document.getElementByld('outputf);
const buttons = window.document.querySelectorAll('nav a');

то сейчас можем записать так (несколько сократив код):

const body = document.body;
const output = document.getElementByld('output');
const buttons = document.querySelectorAll('nav a');

В дальнейшем мы будем использовать именно такую запись.

7.2. Управление элементами веб-страницы

Для работы с элементами страниц класс нтмъЕ1ете^ предоставляет ряд свойств,
которые можно разделить на три группы: соответствующие атрибутам тега, храня­
щие местоположение и размеры элемента и прочие.
Для представления атрибутов тега служат следующие свойства (табл. 7.1).

Таблица 7.1. С войства класса htmlelernen t,

служащие для представления а тр и б у то в т е га

Атрибут тега Соответствующее свойство

class с1аззЫаше
rowspan rowSpan
colspan со1Брап

Остальные Имя свойства совпадает с именем атрибута тега

128 Часть II. Управление веб-страницей и веб-обозревателем

Все эти свойства непосредственно хранят значение соответствующего атрибута

тега. Примеры:
// Привязываем к панели навигации стилевой класс navigation-panel,
// присвоив строку с его именем свойству className,
// которое соответствует атрибуту тега class
nav.className = 'navigation-panel1;
// Создаем там же встроенный стиль, используя свойство style,
// что соответствует одноименному атрибуту стиля.
man.style = 'background-color: yellow;';

// Извлекаем из свойства id якорь и формируем на его основе ссылку

// на графический файл
let url = 'images/' + activeButton.id + '-jpg';
// Заносим полученную ссылку в свойство src элемента output,
// чтобы вывести изображение из файла на экран
output.src = url;

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

Такое свойство хранит значение true, если соответствующий атрибут присутствует
в теге, и false — в противном случае:
<input type="text" id="txtDesc">

const txtDesc = document.getElementByld('txtDesc');

// Делаем поле ввода недоступным, присвоив значение true
// свойству disabled, которое соответствует одноименному
// атрибуту тега без значения
txtDesc.disabled = true;

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

селах, и все — за двумя исключениями — доступны только для чтения:
♦ clientwidth — видимая ширина текущего элемента, включая величины внутрен­
них просветов слева и справа, но без учета рамки, ширины вертикальной полосы
прокрутки и внешних просветов;
♦ clientHeight— видимая высота текущего элемента, включая величины внут­
ренних просветов сверху и снизу, но без учета рамки, высоты горизонтальной
полосы прокрутки и внешних просветов;
♦ offsetLeft— горизонтальная координата левого верхнего угла текущего эле­
мента относительно левого верхнего угла элемента ИЗ свойства of fsetParent;
♦ of fsetTop — вертикальная координата левого верхнего угла текущего элемента
относительно левого верхнего угла элемента ИЗ свойства of fsetParent;
♦ of fsetParent — элемент, относительно которого вычисляются значения свойств
offsetLeft и off setTop,— ближайший позиционируемый родитель или, если
такового нет, секция тела страницы; .
♦ offsetwidth— ТОже самое, Ч Т О И clientwidth, Н О С учетом Т О Л Щ И Н Ы Левой И
правой сторон рамки и ширины вертикальной полосы прокрутки;
Урок 7. Управление элементами веб-страниц 129

♦ offsetHeight — ТО же Самое, ЧТО И clientHeight, НО С учетом ТОЛЩИНЫ верхней

и нижней сторон рамки и высоты горизонтальной полосы прокрутки;
♦ scroiiwidth— ширина содержимого текущего элемента, включая величины
внутренних просветов слева и справа, но без учета рамки, ширины вертикальной
полосы прокрутки и внешних просветов;
♦ scroiiHeight— высота содержимого текущего элемента, включая величины
внутренних просветов сверху и снизу, но без учета рамки, ширины вертикаль­
ной полосы прокрутки и внешних просветов;
♦ scroiiLeft— величина, на которую содержимое элемента прокручено по гори­
зонтали. Доступно для чтения и записи;
♦ scroiiTop— величина, на которую содержимое элемента прокручено по верти­
кали. Доступно для чтения и записи.
Понять назначение свойств «семейств» offset и scroll поможет рис. 7.1, изобра­
жающий элемент с прокруткой.

Рис. 7.1. Назначение свойств «семейств» offset и scroll

Прочие свойства немногочисленны:

♦ textcontent — текстовое содержимое текущего элемента:
// Задаем для активной "кнопки" новый текст
ас1^еВи!1оп. textContent = 'Картинка №1';

♦ тпегтех! — то же самое, ЧТО И t e x t C o n t e n t ;

♦ 1адЫаше — строка с именем тега, с помощью которого создан текущий элемент,
приведенным к верхнему регистру . Доступно только для чтения.
130 Часть II. Управление веб-страницей и веб-обозревателем

Класс HTMLEiement поддерживает также следующие методы:

♦ getBoundingClientRect () -- ВОЗВращаеТ объект Класса DOMRect с координатами и
размерами текущего элемента, представленными в пикселах. Класс DOMRect под­
держивает свойства:
• left— горизонтальная координата левого верхнего угла элемента относи­
тельно левого верхнего угла видимой части его родителя;
• top — вертикальная координата левого верхнего угла элемента относительно
левого верхнего угла видимой части его родителя;
• right — горизонтальная координата правого нижнего угла элемента относи­
тельно правого нижнего угла видимой части его родителя;
• bottom— вертикальная координата правого нижнего угла элемента относи­
тельно правого нижнего угла видимой части его родителя;
• х— то же самое, что и left;
• у — то же самое, что и top;
• width — ширина элемента с учетом внутренних просветов и рамки;
• height — высота элемента с учетом внутренних просветов и рамки.
Этот метод удобно использовать в элементе с прокруткой для выяснения, видим
ли какой-либо из его потомков на экране. В разд. 7.4 мы рассмотрим пример его
использования;
♦ scroiiintoview ( [ < в ы р а в н и в а н и е > ] ) — прокручивает содержимое родителя теку­
щего элемента таким образом, чтобы текущий элемент стал видимым на экране.
Если в качестве в ы р а в н и в а н и я указать true или вообще не задавать его, текущий
элемент будет выровнен по верхней границе родителя, если указать false — по
нижней;
♦ isEquaINode{< сравниваем ы й элем ент у) — возвращает true, если текущий И с р а в ­
элементы полностью одинаковы (т. е. созданы одним и тем же тегом,
ниваем ы й

имеют одинаковый набор атрибутов и одинаковое содержимое), и false в про­

тивном случае;
♦ isSameNode { < сравниваем ая ВОЗВращаеТ true, если
ссы лкаУ )— сравниваем ая ссы лка

указывает на текущий элемент, и false в противном случае:

<nav id="buttons">
<div id="l" class="active">K/div>
<div id=M2">2</div>
<div id="3">3</div>
</nav>

const lastBtnl = document., querySelector ('nav div:last-child*);

* const lastBtn2 = document.getElementByld(’buttons').lastElementChild;
let result = lastBtnl.isSameNode(lastBtn2); // true
Урок 7. Управление элементами веб-страниц 131

7.3. Упражнение.
Делаем стильную полосу прокрутки
Элементы с прокруткой встречаются весьма часто. Чтобы оживить их, применяют­
ся стильные полосы прокрутки, реализуемые программно. Давайте и мы сделаем
такой элемент и заодно закрепим на практике материал из разд. 7Л и 7.2.
1. В папке 7\!sources сопровождающего книгу электронного архива (см. приложе­
ние 3) найдем страницу 7.1 .html и скопируем ее куда-либо на локальный диск.
Эта страница содержит элемент с прокруткой и расположенную правее заготов­
ку для полосы прокрутки в виде вертикальной линии с овальным серым захва­
том (рис. 7.2).

Рис. 7.2. Элемент с заготовкой для полосы прокрутки

2. Откроём страницу 7.1 .html в текстовом редакторе.

Оформление элементов задается внутренней таблицей стилей, имеющейся в ко­
де страницы. Вот код, создающий элемент с прокруткой и полосу прокрутки:
<div id="container">
<h2>Visual Studio Code</h2>

</div>
<div id="scrollbar">
<div></div>
</div>
132 Часть II. Управление веб-страницей и веб-обозревателем

Блок с якорем container создает элемент с прокруткой, а следующий за ним

блок с якорем scrollbar— полосу прокрутки. Захват (движок), расположенный
в полосе прокрутки, также создан блоком.
3. Запишем в конце кода страницы тег <script> и вставим в него первые выраже­
ния сценария, которые извлекут объекты, представляющие элемент с прокрут­
кой, полосу прокрутки и ее захват:
<script type="text/javascript">
const container = document.getElementByld('container1);
const scrollbar = document.getElementByld(1scrollbar');
const handle = scrollbar.firstElementChild;
</script>

Объект-захват М Ы можем извлечь, обратившись К свойству firstElementChild

полосы прокрутки, поскольку он является ее первым (и единственным) потом­
ком.
4. Чтобы вычислить величину, на которую нужно сместить захват и содержимое
элемента container, нам понадобится хранить предыдущее положение курсора
мыши. Объявим переменную, где она будет храниться:
let lastPos = 0;

5. Привяжем К захвату handle обработчик события mousemove, который запустит

процесс перетаскивания захвата:
handle.addEventListeneг ('mousedown', function(evt) {
lastPos = evt.clientY;
this.addEventListener('mousemove', mMove);
this.addEventListener('mouseup', mUp);
}) ;
В теле этого обработчика мы сохраняем текущую вертикальную координату
курсора мыши, вычисленную относительно страницы, и привязываем к захвату
обработчики событий mousemove И mouseup.
Обработчик события mousemove станет самым сложным. Он будет вычислять
смещение курсора мыши относительно ее предыдущего положения и на его
основе определять положение захвата и величину, на которую следует прокру­
тить содержимое элемента container.
6. Вставим перед предыдущим выражением код, объявляющий обработчик этого
события:
function mMove(evt) {
let d = evt.clientY - lastPos;
let у = this.offsetTop + d, cy;
if (у > 0 && у < 262) {
this.style = 'top: ' + у + 'px;';
cy = (container.scrollHeight - container.clientHeight) * у / 262;
container.scrollTop = cy;
Урок 7. Управление элементами веб-страниц 133

lastPos = evt.clientY;
}
}
Здесь мы сначала вычисляем смещение курсора мыши (первое выражение тела)
и на его основе получаем величину смещения захвата (второе выражение).
Далее проверяем, не выходит ли полученное смещение захвата за пределы поло­
сы прокрутки. Для этого достаточно выяснить, укладывается ли она в диапазон
0...262, где последнее число— это высота полосы прокрутки (300 пикселов) за
вычетом высоты захвата (38 пикселов, обе величины записаны в стилях).
Если смещение укладывается в указанный диапазон, создаем встроенный стиль,
указывающий вертикальную координату захвата, и присваиваем его свойству
style. Потом вычисляем величину, на которую нужно прокрутить содержимое
элемента container, и присваиваем ее свойству scroiiTop. Напоследок не забу­
дем сохранить текущее положение мыши по вертикали.
7. Впишем под предыдущим выражением объявление обработчика события
mouseup, который прервет операцию перетаскивания:
function mUp(evt) {
this.removeEventListener('mousemove', mMove);
this.removeEventListener('mouseup', mUp);
}
Он просто убирает привязку обработчиков событий mousemove И mouseup.
Откроем страницу 7.1 .html в веб-обозревателе и протащим захват полосы прокрутки
вниз (рис. 7.3).

Рис. 7.3. Захват полосы прокрутки протащен вниз

134 Ч аст ь II. У п р ав л е н и е в е б -с т р а н и ц е й и в е б -о б о зр е в а т е л е м

7.4. Упражнение. Управляем стилями

Сделаем еще один элемент с прокруткой, в котором навигация на нужный фраг­
мент содержимого выполняется щелчком на гиперссылке в панели навигации,
а сама гиперссылка при этом визуально выделяется.
1. В папке 7\!$оигсез сопровождающего книгу электронного архива (см. приложе­
ние 5) отыщем страницу 7 2.html и скопируем ее в какое-либо место локального
диска.
Эта страница содержит элемент с прокруткой и панель навигации с гиперссыл­
ками (рис. 7.4). Для оформления элементов здесь также применяется внутренняя
таблица стилей.

Рис. 7.4. Элемент с прокруткой и панель навигации с гиперссылками

2. Откроем код страницы 7.2.html в текстовом редакторе:

<nav>
<а href="#vsc" class="jslink active">Visual Studio Code</a>
<a href="#atom" class=f'jslink">Atom</a>
<a href="#notepadpp" class="jslink">Notepad++</a>
</nav>
<section>
<h2 id="vsc ">Visual Studio Code</h2>

<h2 id=,,atom">Atom</h2>
Урок 7. У п р ав лени е э л е м е н т а м и в е б -ст р а н и ц 135

<h2 id="notepadpp">Notepad++</h2 >

</section>

Панель навигации формируется тегом <nav>. В ней находятся гиперссылки

с привязанным стилевым классом jslink, которые ссылаются на якоря. Первая,
активная, гиперссылка помечена стилевым классом active.
Сам элемент с прокруткой создан тегом <section>. Заголовки фрагментов, на ко­
торые должна выполняться навигация при щелчках на гиперссылках, помечены
соответствующими якорями.
Навигация на странице уже работает: если щелкнуть на любой гиперссылке, со­
держимое элемента будет прокручено таким образом, чтобы соответствующий
заголовок появился на экране. Все это реализуется веб-обозревателем.
От нас требуется сделать так, чтобы гиперссылка, на которой был выполнен
щелчок, выделялась стилевым классом active.
3. В конце кода страницы добавим тег <script> с выражениями, получающими
коллекцию гиперссылок, тег <section> и коллекцию заголовков второго уровня
(<h2>), у которых заданы якоря:
const links = document.querySelectorAll('.jslink');
const container = document.getElementsByTagName ('section1) [0];
const anchors = document.querySelectorAll('h2[id]');

4. Объявим функцию-обработчик события click гиперссылок и сразу же выполним

ее привязку:
function navigate() {
let е = document.querySelector('nav .active');
if (e)
e .classList.remove('active');
this.classList.add('active');
}
links.forEach(
(el) => { el.addEventListener('click', navigate) }
)';
В теле функции ищем гиперссылку, ранее помеченную как активная, и убираем
у нее стилевой класс active, после чего привязываем его к гиперссылке, на
которой был выполнен щелчок.
Свойство classList элемента страницы хранит объект-коллекцию всех при­
вязанных к элементу стилевых классов. Метод add привязывает к элементу
заданный стилевой класс, а метод remove удаляет стилевой класс из числа при­
вязанных.
5. Привяжем обработчик к событию scroll тега <section>, который сделает актив­
ной гиперссылку, соответствующую заголовку второго уровня, который в теку­
щий момент видим на экране:
136 Ч аст ь II. У пр ав л е ни е в е б -с т р а н и ц е й и в еб -о б о зр е в а т ел ем

container.addEventListener('scroll', (evt) => {

let i, anchor, y, a;
for (i = 0; i < anchors.length; ++i) {
anchor = anchors[i];
у = anchor.getBoundingClientRect().top;
if (у > 0 && у < container.clientHeight) {
links.forEach((1) => {
if (1.href.endsWith(anchor.id))
1.classList.add('active');
else
1.classList.remove('active');
lb -
break;
}
}
}) ;
Мы просто перебираем все заголовки второго уровня, пока не найдем тот, чья
вертикальная координата находится в диапазоне от о до высоты видимой части
тега <section>. Далее перебираем гиперссылки, пока не найдем ссылающуюся на
этот заголовок, и привязываем к ней стилевой класс active, а у всех остальных
гиперссылок убираем его.
Откроем страницу 7.2.html в веб-обозревателе и проверим ее в работе.

7.4.1. Средства для управления стилевыми классами

Для указания стилевых классов у элемента М О Ж Н О использовать СВОЙСТВО className,
соответствующее атрибуту тега class. Однако если к элементу уже привязаны ка­
кие-то стилевые классы, и нужно привязать еще один или, наоборот, убрать при­
вязку какого-либо стилевого класса, пользоваться этим свойством неудобно.
Класс HTMLElement ПОДДерЖИВаеТ доступное ТОЛЬКО ДЛЯ чтения СВОЙСТВО classList.
Оно хранит объект класса DOMTokenList — коллекцию привязанных к элементу сти­
левых классов.
Класс DOMTokenList поддерживает методы:
♦ add {<имена стилевых классов>) — привязывает К текущему элементу СТИЛевые
классы с указанными в вызове именами. Если какой-либо из стилевых классов
уже привязан, его привязка не выполняется:
1.classList.add('jslink', 'special', 'active');

♦ remove {<имена стилевых классов>) — убирает привязку к текущему элементу

стилевых классов с заданными именами:
1.classList.remove('active');

♦ toggle {<имя ст илевого класса>) — еСЛИ СТИЛевОЙ Класс С указанным именем не

привязан к текущему элементу, выполняет его привязку, в противном случае —
удаляет его;
Урок 7. У пр ав лени е э л е м е н т а м и в е б -с т р а н и ц 137

♦ contains (<имя ст илевого класса> ) — возвращает true, если стилевой класс

с указанным именем привязан к текущему элементу, и false в противном случае:
if (1.classList.contains(’special'))

7.4.2. Средства для управления встроенными стилями

Класс HTMLEiement поддерживает свойство style, соответствующее одноименному
атрибуту стиля. Этому свойству можно присвоить CSS-код, создающий встроен­
ный стиль:
el.style = 'color: black; background-color: white;';

Ho style— необычное свойство. Если извлечь его значение, будет получена не

строка С C S S -КОДОМ встроенного СТИЛЯ, а объект класса CSSStyleDeclaration, пред­
ставляющий этот стиль.
Класс CSSStyleDeclaration поддерживает ряд свойств, представляющих различные
атрибуты стиля. Их имена формируются по следующим правилам:
♦ если имя атрибута стиля состоит из одного слова — свойства имеет то же имя;
♦ если имя атрибута стиля состоит из нескольких слов, разделенных дефисами, —
имя свойства совпадает с именем атрибута стиля, в котором дефисы удалены,
а следующие за ними буквы приведены к верхнему регистру.
Примеры именования свойств класса приведены в табл. 7.2.

Таблица 7.2. Примеры именования свойств класса C S S S ty le D e c la r a tio n

Имя атрибута стиля Имя свойства

c o lo r c o lo r

b ack grou n d -color backgroundC olor

b o r d e r -b o tto m -s ty le b o rd erB o tto m S ty le

А зот примеры их использования:

el.style.color y 'black';
el.style.bäckgroundColor = 'white';

7.5. Изменение содержимого элементов

Для изменения содержимого элементов страниц класс HTMLEiement предлагает три
свойства, доступных для чтения и записи:
♦ innerHTML — хранит HTML-код содержимого текущего элемента:
<р id="parl">JavaScript</p>

const pari = document.getElementByld('pari');

138 Ч аст ь II. У пр ав л е ни е в е б -с т р а н и ц е й и в еб -о б о зр е в а т ел ем

pari.innerHTML = 'Язык программирования <еш>' + pari.innerHTML + '</em>';

/*
Результат:
Язык программирования J a v a S c r ip t
*/
♦ textcontent и innerText — хранят текстовое содержимое элемента:
<р id="par2">JavaScript</p>

const par2 = document.getElementByld('par2');

par2.textContent = 'Язык программирования ' + par2.innerText;
/*
Результат:
Язык программирования JavaScript
*/

Если присвоить этим свойствам HTML-код, все содержащиеся в нем теги будут
выведены как есть:
par2.textcontent = 'Язык программирования <em>' + par2.innerText + '</еш>';
/*
Результат:
Язык программирования <em>JavaScript</em>
V
Класс h t m l e lement поддерживает два полезных метода:
♦ insertAdjacentHTML {<местоположение>, <НТМЬ-код>)— вставляет указанный HTML-код
ПОзаданному относительно текущего элемента местоположению. В качестве
местоположения указывается одна из строк:

• 'afterbegin' — после открывающего тега текущего элемента (в начало его

содержимого);
• 'beforeend' — перед закрывающим тегом текущего элемента (в конец содер­
жимого);
• 'beforebegin' — перед открывающим тегом текущего элемента;
• 'afterend' — после закрывающего тега текущего элемента.
Пример:
<р>язык программирования<р>

const pl = document.getElementsByTagName('р')[0];
const sl = '<strong>JavaScript</strong> - ';
pl.insertAdj acentHTML('afterbegin', sl);
const s2 = '<р>Применяется в веб-разработке</р>';
pl.insertAdj acentHTML('afterend', s2);
Урок 7. Управление элементами веб-страниц 139

/*
Результат:
JavaScript - язык программирования
Применяется в веб-разработке
V
♦ insertAdjacentText {<мвстоположенив>, <текст>) — ТО же самое, ЧТО И
insertAdjacentHTML, ТОЛЬКО вставляет обы ЧН Ы Й текст.

7.5.1. Методы w rite и w riteln

Добавить новое содержимое в элементы страницы и даже создать новые элементы
МОЖНО С ПОМОЩЬЮ следующих методов класса HTMLDocument:

♦ write (^.выводимые значения>) — ЗНаКОМЫЙ Нам МвТОД, ВЫВОДИТ указанные зн а ч е ­

ния В ТОМ месте страницы, В котором находится его ВЫЗОВ. Значения ВЫВОДЯТСЯ
вплотную друг к другу, без пробелов между ними:
// Создаем в этом месте новый абзац
document.write('<р>', 'HTML и CSS', '</р>');

♦ writeln {<выводимые значения>) — ТО Же Самое, ЧТО И write, НО ПОСЛе Всех Значе­

ний выводит разрыв строк (последовательность символов \г\п). Разрыв строк
отображается веб-обозревателем в виде обычного пробела.
Применение методов write и writeln — самый простой (но, к сожалению, самый
медленный) способ вывести данные на экран. Он часто используется в простых
сценариях и при обучении программированию.
Если методы write и writeln используются в обработчике события, выве­
денные ими данные полностью заменят исходное содержание страницы.
Поэтому в обработчиках событий применять их нельзя.

7.6. Упражнение. Создаем новые элементы

веб-страниц путем конструирования
Возьмем упражнение, выполненное в разд. 3.8 (вычисление длин окружностей
диаметром 2, 5, 10 и 20 м), и перепишем его так, чтобы не использовать для вывода
результатов «медленные» методы write И writeln. Мы применим другой, более
производительный подход— конструирование элементов путем создания пред­
ставляющих их объектов DOM и помещения их на страницу.
Элементы, созданные путем конструирования, обрабатываются и выводятся на
экран быстрее элементов, созданных обращением к свойству и методам, описан­
ным в разд . 7.5, поскольку веб-обозревателю не приходится разбирать HTML-код.
1. В папке 7\!sources сопровождающего книгу электронного архива (см. приложе­
ние 3) найдем исходные файлы: страницу 3.1.html и файл сценария 3.8.js. Скопи­
руем их в какое-либо место на локальном диске.
140 Часть II. Управление веб-страницей и веб-обозревателем

2. Откроем страницу 3.1.html в текстовом редакторе и удалим из секции тела стра­

ницы тег <tabie> — в нем находится сценарий, выполняющий вычисления и вы­
вод таблицы с результатами (удаленные фрагменты кода показаны здесь зачерк­
нутыми):
<body>
<1і1>Длина окружности</Ы>
-------<tablo> *3456789

----</tablo>
</body>

3. Добавим в конце HTML-кода тег < sc rip t> со сценарием, создающим массив
с диаметрами окружностей, у которых нужно вычислить длины, и переменную,
которую мы используем в качестве счетчика цикла:
<script type="text/javascript">
const ds = [2, 5, 10, 20];
let i;
</script>

4. Добавим выражение, которое создаст объект, представляющий тег <tabie>:

const table = document.createElement(?table');

Для создания объекта-тега применен метод createElement.

5. Добавим два выражения, создающие аналогичным образом объект-строку и объ­
ект-ячейку шапки:
let row = document.createElement('tr');
let cell = document.createElement(1th1);

6. Добавим выражение, которое создаст содержимое ячейки — текст «Диаметр»:

let text = document.createTextNode(’Диаметр');

Для создания текстового содержимого М Ы применили здесь метод createTextNode.

7. Запишем выражение, которое добавит готовое текстовое содержимое в ячейку:
cell.appendChiId(text);

Метод appendChi id добавит указанный в его параметре элемент в тот, у которого

был вызван.
8. Добавим готовую ячейку в строку:
row.appendChiid(cell);

9. Создадим вторую ячейку строки и добавим готовую строку в таблицу:

cell = document.createElement('th');
text = document.createTextNode('Длина окружности');
се11.appendChiId(text);
row.appendChiId(cell);
table.appendChiId(row);
Урок 7. Управление элементами веб-страниц 141

10. В цикле переберем массив с величинами диаметров и в его теле создадим

остальные строки таблицы:
for (i = 0; i < ds.length; ++i) {
row = document.createElement(’tr');
cell = document.createElement(’td’);
cell.textContent = ds[i];
row.appendChild(cell) ;
cell = document.createElement('td');
cell.textContent = circleLength(ds[i]);
row.appendChild(cell) ;
table.appendChild(row);
}
Здесь для создания текстового содержимого ячеек мы использовали свойство
textContent, а не метод createTextNode. Обращение к свойству выполняется
несколько медленнее, чем вызов метода, но позволяет немного сократить код.
11. И наконец, добавим таблицу в тело страницы, чтобы вывести ее на экран:
document.body.appendChild(table);

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

и останется лишь в памяти компьютера.
Откроем переделанную страницу 3.1.html в веб-обозревателе и посмотрим на табли­
цу с результатами (рис. 7.5).

Длина окружности
Д и ам етр Д ли на окруж ности
2 6.283185307179586
5 15.707963267948966
10 31.41592653589793
20 62.83185307179586

Рис. 7.5. Сконструированная нами таблица в окне веб-обозревателя

7.6.1. Методы,
конструирующие элементы веб-страниц
Для создания элементов страниц применяются два метода класса HTMLDocument,
представляющего саму страницу:
♦ createElement (<имя твга>) — создает объект, представляющий тег с указанным
именем, и возвращает его в качестве результата, имя тега записывается в виде
строки без символов < и >;
♦ createTextNode (<текст>) — СОЗДаеТ объект класса Text, ПреДСТаВЛЯЮЩИЙ ТеКСТО­
вое содерж им ое элемента, на основе указанного текста и возвращает его в каче­
стве результата.
142 Часть II. Управление веб-страницей и веб-обозревателем

Вывод сконструированного элемента выполняется добавлением его в другой эле­

мент В Качестве ПОТОМКа. ЭТО ВЫПОЛНЯЮТ Следующие МеТОДЫ Класса HTMLElement:
♦ appendChiId {<элемент>) -- Добавляет указанный элемент — тег или текстовое
содержимое — в конец текущего, после чего возвращает добавленный элемент
в качестве результата;
♦ insertBefore (<вставляемый элемент>, <элемент, п ер ед которым его следует
поместить^ — вставляет указанный в первом параметре элемент перед элемен­
том, заданном во втором параметре. Если вторым параметром передать null, д о ­
бавляемый элемент будет помещен в конце текущего элемента (как при вызове
метода appendChi id). Вставленный элемент возвращается как результат:
<р>Первый абзац</р>
<р>Второй абзац</р>

const ps = document.getElementsByTagName('р');
const рагЗ = document.createElement(’p');
par3.textContent = 'Третий абзац';
document.body.insertBefore(рагЗ, ps[l]);
/*
Результат:
Первый абзац
Третий абзац
Второй абзац
*/
♦ insertAdjacentElement (<местоположение>, <вставляемый элемент>) — вставляет
указанный элемент ПО указанному относительно текущего элемента местоположе­
нию. В качестве местоположения задается одна из строк:

• 'afterbegin' — после открывающего тега текущего элемента (в результате

вставляемый элемент станет его Первым ПОТОМКОМ);

• 'beforeend' -- перед закрывающим тегом текущего элемента (вставляемый

элемент станет его последним потомком);

• 'beforebegin' — перед Открывающим тегом текущего элемента (вставляемый

элемент станет его предыдущим соседом);

• 'afterend' -- после Закрывающего тега текущего элемента (вставляемый э л е ­

мент станет его следующим соседом).
Пример:
<р> - язык программирования<р>

const р2 = document.getElernentsByTagName('p')[0];
const strong = document.createElement('strong');
strong.textContent = 'JavaScript';
p2.insertAdjacentElement('afterbegin', strong);
Урок 7. Управление элементами веб-страниц 143

const par4 = document.createElement(’р');

par4.textContent = Применяется в веб-разработке’;
р2.insertAdj acentElement('afterend1, par4);
/*
Результат:
JavaScript - язык программирования
Применяется в веб-разработке
*/
Еще два метода пригодятся, если нужно заменить один элемент другим или вообще
удалить его:
♦ replaceChild{<заменяющий элементу, <заменяемый элементу) — заменяет ОДИН
элемент другим и возвращает в качестве результата Вызы­
з а м е н я е м ы й элемент.
вается у родителя з а м е н я е м о г о э л е м е н т а I
<p>HTML</p>
<р>Язык программирования</р>

const рЗ = document.getElementsByTagName(’р ’)[0];

const hi = document.createElement(’hi');
hi.textContent = ’Python’;
document.body.replaceChild(hi, p3);
/*
Результат:

P ython
Язык программирования
*/
♦ remove Chi Id (<удаляемый элементу) — удаляет указанный э л е м е н т И ВОЗВращаеТ
его в качестве результата. Вызывается у родителя у д а л я е м о г о э л е м е н т а :
<ul>
<li>JavaScript</li>
<li>PHP</li>
' <li>Delphi</li>
</ul .
... A
const ul = document.getElementsByTagName(’ul’)[0];
document.body.removeChild(ul.lastElementChild);
/*
Результат:
JavaScript
PHP
V
144 Часть II. Управление веб-страницей и веб-обозревателем

7.7. Получение сведений о веб-странице

Класс HTMLDocument, представляющий страницу, поддерживает ряд свойств, храня­
щих сведения о самой странице:
♦ title — название текущей страницы, заданное в теге <titie>. Это единственное
из упомянутых здесь свойств, доступно для записи (все остальные свойства дос­
тупны только для чтения):
// Указываем для страницы новое название
document.title = 'Практикум JavaScriptf;

♦ url — полный интернет-адрес страницы в виде строки;

♦ domain — адрес хоста, извлеченный из полного интернет-адреса, в виде строки;
♦ referrer— интернет-адрес страницы, с которой был выполнен переход на
текущую страницу, в виде строки. Если текущая страница была открыта не в ре­
зультате перехода (а, например, набором интернет-адреса вручную или через
вкладки веб-обозревателя), хранит пустую строку;
♦ — кодировка, заданная для страницы, в виде строки;
characterset
♦ lastModified— дата и время последнего изменения страницы в виде строки
формата:
<месяц>/< число> /<год> <часы>: <минуты>:< секунды>.

7.8. Самостоятельные упражнения

♦ Напишите страницу 7.8.1.html со сценарием, который выводит на экран обозна­
чения нажатых клавиш и их коды в десятичной и шестнадцатеричной системах
счисления.
Подсказка : обрабатывайте событие keydown в секции тела страницы, а для выво­
да числа в шестнадцатеричной системе используйте метод tostring класса
Number.
♦ Напишите страницу 7.8.2.html со свободно позиционируемым элементом, кото­
рый можно перемещать мышью. Эта страница может выглядеть, как показано на
рис. 7.6 (перемещаемый элемент закрашен серым фоном).
♦ В папке 7\!sources сопровождающего книгу электронного архива (см. приложе­
ние J) найдите файл сценария 7.8.js. Он содержит код, создающий служебный
объект класса object со сведениями о текстовом редакторе Atom (приведен с со­
кращениями):
const atom = {
name: 1Atom1,
desc: ’Текстовый редактор для программистов.1,
pros: [
'поддержка практически всех языков . . .1,

],
Урок 7. Управление элементами веб-страниц 145

contras: [
*некоторые полезные инструменты . . .',

site: 'https://atom,io/*
};
Напишите страницу 7.8.3.html со сценарием, формирующим на основе этого объ­
екта описание текстового редактора (рис. 7.7).
Подсказка: сконструируйте все необходимые элементы.

Рис. 7.6. Страница со свободно позиционируемым элементом, который можно перемещать мышью

Atom
Текстовый редактор для программистов.

Достоинства:

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

про граммировании;
• удобные клавиатурные комбинации,
■' огромное количество расширений;
• удобные средства для установки расш ирений н управления имя;
• ш ирокие возможности настройки (вклю чая темы оформления).

Недостатки:

• некоторые полезные инструменты изначально отсутствуют

(исправляется расширениями);
• очень больш ой объем;
• низкое быстродействие на больших файдах.

О Ф н Ц И а л ^тть тч СДЙТ

Рис. 7.7. Веб-страница с описанием текстового редактора

 Урок 8
Графика и мультимедиа
Получение сведений о графических изображениях
Управление аудио- и видеороликами
Программный видеопроигрыватель

8.1. Получение сведений

о графических изображениях
Мы можем получить некоторые сведения о графическом изображении, выведенном
в теге <img>,— в частности, его изначальные размеры (разрешение). Для этого
применяются специфические свойства класса HTMLImageElement, ПРОИЗВОДНОГО ОТ
класса HTMLEiement и представляющего этот тег. Все эти свойства доступны только
для чтения:
♦ naturaiwidth — изначальная ширина изображения в виде числа в пикселах;
♦ naturaiHeight — изначальная высота изображения в виде числа в пикселах;
♦ complete — true, если загрузка файла с изображением завершена, и false в про­
тивном случае.
Также поддерживаются два дополнительных события, возникающие:
♦ load — по окончании загрузки файла с изображением:
<img sгс="image.png" id="imgl">

. const imgl = document.getElementByld('imgl*);

imgl.addEventListener(*load', () => {
Ц Получаем изначальные размеры изображения
let w = imgl.naturaiwidth;
let h = imgl.naturaiHeight;
}) ;
♦ error — при невозможности загрузить файл с изображением (например, файл по
указанной в теге <img> ссылке не существует).
Оба события невсплывающие (см .разд. 6.4), не имеют обработчика по умолчанию
(СМ. разд. 6.5) И ПреДСТавЛЯЮТСЯ объектом Класса Event.
148 Часть II. Управление веб-страницей и веб-обозревателем

8.2. Управление
мультимедийными элементами
Мы можем получать сведения об аудио- и видеороликах, выведенных в тегах
<audio> и <video>, — в частности, продолжительность и разрешение (у видеороли­
ков). Мы также можем управлять их воспроизведением: запускать, приостанавли­
вать, изменять текущую позицию, настраивать уровень громкости, приглушать
и вновь восстанавливать звук и др.
Для этого применяются специфические свойства, методы и события классов
HTMLAudioElernent И HTMLVideoElement, ПРОИЗВОДНЫХ ОТ класса HTMLElement И пред­
ставляющих теги <audio> и <video>. Рассмотрим их подробно.

8.2.1. Свойства
Классы HTMLAudioElement И HTMLVideoElement ПОДДерживаЮТ Следующие СВОЙСТВа:
♦ currentTime — текущая позиция воспроизведения ролика в виде числа в се­
кундах:
// Устанавливаем позицию воспроизведения видеоролика на 10 секунд
videol.currentTime = 10;

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

от о .о (звук
вообще не слышен) до 1. о (максимальная громкость);
♦ muted— true, если звуковое сопровождение при текущем воспроизведении ро­
лика приглушено, false в противном случае;
♦ piaybackRate — относительная скорость текущего воспроизведения ролика. Ука­
зывается в виде числа с плавающей точкой: число меньше 1 задает замедленное
воспроизведение, больше 1 — ускоренное, отрицательное число — воспроизве­
дение в обратном направлении. Значение по умолчанию — 1. о (воспроизведе­
ние с обычной скоростью):
// Замедленное вдвое воспроизведение
videol.piaybackRate = 0.5;
// Ускоренное втрое воспроизведение
videol.piaybackRate = 3.0;
// Воспроизведение в обратном направлении с нормальной скоростью
videol.piaybackRate = -1.0;

♦ duration — продолжительность ролика в виде числа в секундах (только для чте­

ния);
♦ videowidth — ширина видеоролика в пикселах (только для чтения и только у ви­
деороликов);
♦ videoHeight — высота видеоролика в пикселах (только для чтения и только
у видеороликов);
Урок 8. Графика и мультимедиа 149

♦ paused — true, если воспроизведение ролика приостановлено, false в противном

случае (только для чтения);
♦ seeking— true, если пользователь перемещает регулятор текущей позиции
ролика, false в противном случае (только для чтения);
♦ ended— true, если воспроизведение ролика закончилось, false в противном
случае (только для чтения);
♦ defauitMuted — то же, что и muted, но задает состояние звука по умолчанию, ко­
торое будет использовано при последующих воспроизведениях ролика;
♦ defaultPlaybackRate — ТО же, ЧТО И playbackRate, НО задает скорость ВОСЩЮИЗ-
ведения по умолчанию, которая будет использована при последующих воспро­
изведениях ролика;
♦ currentsrc — интернет-адрес воспроизводимого в текущий момент файла. Мо­
жет отличаться от заданного в атрибуте тега src или в свойстве src, если веб­
сервер, с которого запрашивается файл, выполнил перенаправление. Доступно
только для чтения;
♦ networkstate — статус сетевой активности в виде числа:
• о — файл еще не загружался;
• 1 — файл загружен;
• 2 — файл загружается;
• з — файл не найден.
Доступно только для чтения;
Ф readystate — статус самого ролика в виде числа:
• о — сведения о ролике недоступны;
• 1 — загружены только метаданные ролика (в частности, его разрешение и
продолжительность);
• 2 — загружен текущий кадр ролика;
• з — загружены текущий и следующий кадры ролика;
• 4 — загружено достаточно данных для бесперебойного воспроизведения
ролика.
Доступно только для чтения.
Помимо этого, поддерживаются свойства, соответствующие атрибутам тегов. Так
свойство src, соответствующее атрибуту тега src, хранит ссылку на воспроизводи­
мый файл.

8.2.2. Методы
Классам HTMLAudioElement И HTMLVideoElement свойственны Следующие методы:
♦ load о — перезагружает текущий ролик. Обычно применяется, чтобы остано­
вить ролик и перемотать его в начало;
150 Часть II. Управление веб-страницей и веб-обозревателем

♦ pause () — приостанавливает ролик;

♦ play () — запускает или возобновляет воспроизведение ролика.

8.2.3. События
Все события, поддерживаемые мультимедийными элементами, невсплывающие, не
имеют обработчика по умолчанию и представляются классом Event:
♦ loadstart — начата загрузка файла с роликом;
♦ durationchange — загружена часть метаданных, в которой записана продолжи­
тельность ролика;
♦ loadedmetadata — загружена остальная часть метаданных, в которой записано,
в частности, разрешение ролика (если это видео);
♦ loadeddata — загружено достаточно данных, чтобы, по крайней мере, вывести
первый кадр ролика, однако его воспроизведение будет вестись с паузами на
подгрузку;
♦ progress — периодически возникает при загрузке файла;
♦ canpiay— загружено достаточно данных, чтобы, по крайней мере, начать вос­
произведение ролика, однако в дальнейшем возможны паузы на подгрузку;
♦ canplaythrough — загружено достаточно данных, чтобы начать воспроизведение
ролика без пауз на подгрузку;
♦ play — воспроизведение ролика запущено или возобновлено нажатием кнопки
пуска или вызовом метода play;
♦ playing — после события play, когда ролик реально начинает воспроизводиться.
Между этими событиями возможна задержка, пока веб-обозреватель подгружает
данные из файла;
♦ timeupdate — позиция воспроизведения ролика изменилась;
♦ volumechange — Либо ИЗМеНИЛСЯ уровень ГрОМКОСТИ, Либо Звук был Приглушен,
либо, наоборот, восстановлен;
♦ waiting — в воспроизведении ролика возникла пауза, необходимая для подгрузки;
♦ pause — воспроизведение ролика приостановлено;
♦ seeking — пользователь начал перемещать регулятор позиции воспроизведения;
♦ seeked — пользователь закончил перемещать регулятор позиции воспроизведе­
ния;
♦ ratechange — скорость воспроизведения ролика изменилась;
♦ ended — воспроизведение ролика закончено;
♦ suspend — загрузка мультимедийного файла либо полностью завершилась, либо
приостановлена по какой-то причине (например, сервер перегружен);
Урок 8. Графика и мультимедиа 151

♦ stalled— файл по какой-то причине не загружается (например, отсутствует на

сервере);
♦ abort — прерывание загрузки файла вследствие сетевой неполадки.

8.3. Упражнение.
Реализуем свой видеопроигрыватель
Создадим средствами HTML, CSS и JavaScript стильный видеопроигрыватель,
в котором все элементы управления воспроизведением изначально скрыты (рис. 8.1, а)
и появляются поверх видео при наведении на него курсора мыши (рис. 8.1, б).12

Рис. 8.1. Стильный видеопроигрыватель: а — все элементы управления воспроизведением скрыты,

б — элементы управления появляются поверх видео при наведении на него курсора мыши

1. В папке 8\!sources сопровождающего книгу электронного архива (см. приложе­

ние 3) найдем страницу 8.1.html, а также папки: images (в которой хранятся изо­
бражения для кнопок) и media (с видеофайлом, который будет воспроизводиться
в проигрывателе). Скопируем их в какое-либо место на локальном диске.
2. Откроем страницу 8.1.html в текстовом редакторе и найдем в ней код, создающий
проигрыватель:
<div id="player">
<video src= "media/video .mp4"x/video>
<div class="interface">
<div class="play"x/div>
<div class="stop"x/div>
<div class="position"xdivx/divx/div>
<div class=,,mute"x/div>
<div class="volume"xdivx/divx/div>
</div>
</div>
152 Часть II. Управление веб-страницей и веб-обозревателем

Он создается блоком с якорем player, в который вложены тег <video> и блок со

стилевым классом interface, в котором и находятся все элементы управления
воспроизведением. Они также создаются блоками, поскольку блоки проще
оформить. В число элементов входят кнопка пуска и паузы (стилевой класс
play), кнопка остановки (stop), регулятор позиции воспроизведения (position),
кнопка приглушения звука (mute) и регулятор громкости (volume).
Блок со стилевым классом interface изначально скрыт и выводится при наведе­
нии на блок player курсора мыши. Его можно вывести принудительно, привязав
К блоку player стилевой КЛаСС active.
В регуляторах указатели текущего положения создаются вложенными в них
пустыми блоками. Задавая для такого блока ширину или высоту, мы можем ука­
зать текущее положение регулятора.
Изображения в кнопках выводятся в виде графического фона — так их проще
позиционировать.
3. Добавим в конце HTML-кода тег <script> с выражениями, получающими доступ
к нужным элементам страницы:
<script type="text/javascript">
const player = document.getElementByld('player');
const video = player.firstElementChild;
const play = player.querySelector(1.play');
const stop = player.querySelector('.stop');
const position = player.querySelector('.position');
const posH = position.firstElementChild;
video.volume = 0.5;
</script>

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

же задаем для тега <video> половинную громкость.
4. После загрузки достаточного для вывода первого кадра объема данных регуля­
тор position следует установить в начало, а в кнопке play вывести изображение
«пуск» из файла images\play.png. Также нужно вывести на экран блок с элемента­
ми управления, чтобы посетитель сайта сразу смог запустить видео.
Напишем обработчик события canplay тега <video>, который выполнит все это:
video.addEventListener('canplay', () => {
posH.style.width = ’0%’;
play.style.backgroundlmage = 'url(images/play.png)';
player.classList.add(’active’);5

5. Если ролик в текущий момент воспроизводится, в кнопке play следует вывести

изображение «пауза» (файл images\pause.png), а если поставлен на паузу — изо­
бражение «пуск». При этом нужно также, соответственно, скрывать и выводить
блок с элементами управления.
Напишем обработчики событий playing И pause тега <video>, выполняющие эти
действия:
Урок 8. Графика и мультимедиа 153

video.addEventListener('playing', () => {
play.style.backgroundlmage = 'url(images/pause.png)';
player.classList.remove('active1);
});
video.addEventListener(’pause', () => {
play.style.backgroundlmage = 'url(images/play.png)';
player.classList.add('active');
});
6. В процессе воспроизведения ролика нужно обновлять текущую позицию в ре­
гуляторе position.
Объявим обработчик события timeupdate Тега <video> — он и сделает все, что
нужно:
video.addEventListener('timeupdate', () => {
posH.style.width = video.currentTime / video.duration * 100 + '%';
}) ;
Вычислить ширину указателя (пустого блока, находящегося в блоке-регуля­
торе) просто: мы делим текущую позицию воспроизведения на продолжитель­
ность ролика, умножаем полученное частное на 100— и получаем ширину
в процентах.
7. По окончании ролика следует привести проигрыватель в исходное положение.
Проще всего сделать это, выполнив перезагрузку ролика — в обработчике со­
бытия ended проигрывателя:
video.addEventListener('ended', () => {
video.load();
});
8. Напишем обработчик события click кнопки play, который запустит воспроиз­
ведение ролика или, если он уже проигрывается, приостановит его:
play.addEventListener('click', () => {
if (video.paused) {
video.play();
} else {
video.pause();

9. Обработчик события click кнопки stop приведет проигрыватель в исходное по­

ложение:
stop.addEventListener('click', () => {
video.load();
}),;
10. Осталось сделать так, чтобы при щелчках на регуляторе position соответствен­
но изменялась текущая позиция воспроизведения ролика.
154 Часть II. Управление веб-страницей и веб-обозревателем

Этого можно достичь, обрабатывая событие click регулятора position:

position.addEventListener(’click', (evt) => {
video.currentTime = evt.offsetX /
position.clientWidth * video.durâtion;
}) ;

Текущую позицию воспроизведения мы здесь вычисляем, разделив горизон­

тальную координату точки регулятора, на которой был выполнен щелчок, на его
ширину и умножив полученное частное на продолжительность ролика.
Откроем страницу 8.1.html в веб-обозревателе, запустим ролик на воспроизведение,
поставим на паузу и запустим вновь. Попробуем переместить регулятор позиции
воспроизведения и посмотрим, что получится.

8.4. Самостоятельные упражнения

♦ В видеопроигрыватель на странице 8.1.html добавьте настройку уровня громко­
сти регулятором volume.
♦ Там же реализуйте приглушение звука кнопкой mute. При этом, если звук при­
глушен, выведите на кнопке изображение из файла images\unmute.png, а если не
приглушен — изображение из файла imagesVnute.png.
 Урок 9
Веб-формы
и элементы управления
Взаимодействие с элементами управления
Взаимодействие с веб-формами
Программная валидация

9.1. Взаимодействие
с элементами управления
Мы можем программно получать значения, занесенные в элементы управления,
временно делать их недоступными, реагировать на изменение значения в поле вво­
да, установку или сброс флажка и др. Все это выполняется посредством специфи­
ческих свойств (табл. 9.1), методов (табл. 9.2) и событий (табл. 9.3), поддерживае­
мых классами, представляющими элементы управления (помимо полученных
в «наследство» от суперкласса нтмьЕ1етеп1:). Классы событий и их свойства пред­
ставлены в табл. 9.4.

Таблица 9.1. С войства, поддерживаемые классами,

представляющ ими элем енты управления

/П оддерживаю щ ие его
Свойство Описание
элементы управления

form Объект формы, в которой находится текущий

Все
элемент управления
value Занесенное значение в виде строки
defaultValue Изначальное значение, заданное в атрибуте
і
тега value
selectionStart Номер первого символа выделенного фрагмен­
та значения, если ничего не выделено — номер
символа под текстовым курсором Поля ввода, выбора
и область редактиро­
selectionEnd Номер последнего символа выделенного фраг­ вания
мента значения, если ничего не выделено —
номер символа под текстовым курсором
autocomplete Если ' on' — выводится список ранее введен­
ных значений для быстрого выбора (поведение
по умолчанию). Если 'off' — такой список
не выводится
156 Часть II. Управление веб-страницей и веб-обозревателем

Таблица 9.1 (окончание)

Поддерживающие его
С войство Описание
элементы управления

checked Если true — флажок или переключатель

установлен, если false — сброшен Флажок и переключа­
тель
defaultChecked Соответствует атрибуту тега checked

files Объект-коллекция выбранных файлов (будет

Поле выбора файлов
рассмотрен на уроке 13)

options Объект-коллекция пунктов, имеющихся в списке

length Количество пунктов в списке

selectedlndex Номер выбранного пункта (нумерация начина­ Список

ется с нуля). Если ни один пункт не выбран,
хранит значение -1. Если список позволяет
выбирать несколько пунктов одновременно,
хранит номер первого выбранного пункта
selected Если true — текущий пункт выбран, если
false — не выбран
defaultSelected Соответствует атрибуту тега selected Пункт списка
index Порядковый номер текущего пункта
text Текст текущего пункта

Таблица 9.2. М етоды , поддерживаемые классами,

представляющ ими элем енты управления

Поддерживающие его
Метод Описание
элементы управления

Устанавливает фокус ввода на текущий

focus()
элемент Все
blur() Удаляет фокус ввода с текущего элемента

select () Выделяет весь текст в области редактирования Область редактирова­

ния
stepUp ([<c£>] ) Увеличивает занесенное число на величину с/.
Если параметр не указан, выполняет инкремент Поле ввода числа
stepDown ([<cf>] ) Уменьшает занесенное число на величину сі и регулятор
Если параметр не указан, выполняет декремент

add(<it>[, <p>]) Добавляет новый пункт і ь в позицию р. Если

позиция не указана, добавляет элемент в конец
списка Список

remove (<p>) Удаляет пункт под номером р

Урок 9. Веб-формы и элементы управления 157

Таблица 9.3. С обы тия, поддерживаемые классами,

представляющ ими элем енты управления

Имя события Когда возникает?

События, имеющие отношение к занесенному значению

Всплывающие. Обработчик по умолчанию отсутствует

change Во флажках, переключателях и списках — при изменении состояния (установ­

ке, сбросе, выборе пункта списка). В полях ввода и областях редактирова­
ния — при потере фокуса, если занесенное значение было изменено
input В полях ввода и областях редактирования — сразу при изменении занесенно­
го значения. Во флажках, переключателях и списках не возникает
invalid Занесенное в поле ввода или область редактирования значение некорректно.
Возникает перед отправкой данных, выполняемой формой, в результате чего
отправка отменяется
select В полях ввода и областях редактирования — при выделении фрагмента
значения

События фокуса ввода

Обработчик по умолчанию отсутствует

focus Получение текущим элементом фокуса ввода (невсплывающее)

focusin Получение текущим элементом фокуса ввода (всплывающее)
blur Потеря текущим элементом фокуса ввода (невсплывающее)
focusout Потеря текущим элементом фокуса ввода (всплывающее)

События буфера обмена

Всплывающие

cut Вырезание выделенного текста (обработчик по умолчанию выполняет

вырезание текста)
paste Вставка текста из буфера обмена (обработчик по умолчанию выполняет
вставку текста)

Таблица 9.4. Классы собы тий и их свойства

Свойство ' Хранимое значение

Класс F o cu sE ve n t
Производный от класса Event. Представляет события фокуса ввода

relatedTarget В случае события focus или focusin — элемент управления, потерявший

фокус ввода. В случае события blur или focusout — элемент, получивший
фокус.

Остальные события представляются классом Event

158 Часть II. Управление веб-страницей и веб-обозревателем

9.1.1. Получение и обработка

введенного в элемент значения
Получение и обработка введенного в элемент значения осуществляются в следую­
щем порядке:
♦ обычные поля ввода, поля ввода пароля, интернет-адреса, адреса электронной
почты, области редактирования — непосредственно из свойства value:
<input type=Mtext" id="val">

const val = document.getElementByld('val’);

let value = val.value;

♦ поля ввода числа и регуляторы — полученное из свойства value значение, пред­

ставляющее собой строку, следует преобразовать в числовой тип:
<input type="number" id="num,,>

const num = document.getElementByld('num');

// Преобразуем значение в числовой тип
let number = parselnt(num.value);
// Также можно положиться на веб-обозреватель — он сам выполняет
// преобразование в ряде случаев (подробности — в р а з д . 1. 11)
let а = num.value / 100;

♦ поля ввода даты — дата в свойстве value хранится в виде строки формата < год> -
<номер месяца>-<чмсло>\
cinput type="date" id="dat">

const dat = document.getElementByld('dat');

// Создаем на основе введенной даты объект класса Date
let d = new Date(dat.value);

♦ поля ввода времени — время в свойстве value хранится в виде строки формата
<часы> : <минуты> :<секунды>\
♦ поля выбора цвета— цвет в свойстве value хранится в виде строки формата
#<r x g ><b >;

♦ флажки И переключатели — через СВОЙСТВО checked:

<input type="checkbox" id="chk">

const chk = document.getElementByld('chk');

if (chk.checked)
// Флажок установлен
else
// Флажок сброшен

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

пункта можно получить из свойства seiectedindex:
Урок 9. Веб-формы и элементы управления 159

<select size="5" id="sel">

<орtіon value="html">HTML</optіon>
<opt ion value="es s">CS S</opt іon>
<option value="js">JavaScript</option>
<opt іon value="php">PHP</opt іon>
<opt ion value="python"> Python</opt іon>
</select>

const sel = document.getElementByld(1sel?);

let selected = sel.selectedlndex;

♦ список с возможностью выбора нескольких пунктов— следует перебрать все

пункты списка, коллекция которых доступна из свойства options, и выяснить,
какие из них выбраны, проверкой свойства selected:
<select size="5" id="Msel" multiple>
<opt іon value="html">HTML</optіon>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
coption value="php">PHP</option>
<opt ion value="python">Python</opt іon>
</select>

const msel = document.getElementByld('mself);

let selected = [];
// Помещаем значения (задается в атрибуте value тега <option>)
// выбранных пунктов в массив selected
for (let і = 0; і < sel.length; ++і)
if (sel.options[і].selected)
selected.push(sel.options[і].value);

9.1.2. Программное создание и удаление

пунктов списка
Программное создание и удаление пунктов списка осуществляются в следующем
порядке:
<select siz?e="5" id="psel">
</select>

const psel = document.getElementByld('psel');

// Создаем пункты в списке psel
let languageValues = [’html1, 'css', 'js', 'php', 'python'];
let languageTexts = ['HTML', 'CSS', 'JavaScript', 'PHP', 'Python'];
let i, opt;
for (і = 0; і < languageValues.length; ++i) {
opt = document.createElement('option');
opt.value = languageValues[i];
160 Часть II. Управление веб-страницей и веб-обозревателем

opt.textContent = languageTexts[i];
psel.add(opt);
}

// Удаляем пункт JavaScript

psel.remove(2);

9.2. Упражнение.
Пишем первое клиентское веб-приложение
Напишем клиентское веб-приложение, генерирующее CSS-код для создания у эле­
мента страницы рамки на основе введенных пользователем данных.
Клиентское веб-приложение — программа, реализованная в виде веб-стра­
ницы с веб-сценарием и не требующая для работы других программ
(в частности, серверных веб-приложений, работающих на стороне веб­
сервера).
1. В папке 9\!sources сопровождающего книгу электронного архива (см. приложе­
ние 3) найдем страницу 9.1.html, скопируем ее в какое-либо место на локальном
диске и откроем в текстовом редакторе.
Эта страница содержит набор элементов управления, в которых пользователь
будет заносить необходимые сведения (рис. 9.1).

Рис. 9.1. Веб-страница с набором элементов управления

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

программно, и заданных у них якорей:
• поле ввода Толщина — width;
• список Стиль — style;

• поле выбора цвета Цвет — color;

Урок 9. Веб-формы и элементы управления 161

• флажок Скругленные углы — rounded;

• поле ввода Радиус скругления — radius;

• кнопка Сгенерировать КОД — generate;

• текст фиксированного форматирования (тег <рге>), в котором будет вы­

водиться готовый CSS-код (он находится ниже кнопки, изначально пуст и
поэтому не виден на экране) — output.
Если значения, заносимые в элементы управления, не предназначены для
пересылки на сервер, а будут полностью обрабатываться в веб-сценарии,
элементы управления можно не заключать в веб-форму (в тег <form>).
2. После HTML-кода впишем тег <script> с выражениями, которые получат доступ
к приведенным ранее элементам страницы:
<script type="text/javascriptM>
const width = document.getElementByld(’width');
const style = document.getElementByld('style');
const color = document.getElementByld('color');
const rounded = document.getElementByld('rounded');
const radius = document.getElementByld(1radius');
const generate = document.getElementByld('generate');
const output = document.getElementById('output');
</script>

3. Поле ввода Радиус скругления должно быть доступно для ввода только тогда,
когда установлен флажок Скругленные углы. Поэтому напишем обработчик
события change флажка Радиус скругления, который будет делать поле ввода
Скругленные углы доступным или недоступным, в зависимости от состояния
флажка:
rounded.addEventListener('change', () => {
radius.disabled = !rounded.checked;
});
4. Напишем код, который при нажатии кнопки Сгенерировать код сгенерирует
и выведет на экран CSS-код для задания рамки:
generate^addEventListener('click', () => {
let s = 'border: ' + width.value + ' ' +
style.options[style.selectedlndex].value + ' ' + color.value +
';\r\n';
if (rounded.checked)
s += 'border-radius: ' + radius.value +
output.textContent = s;
});
В случае задания скругленных углов сгенерированный CSS-код будет состоять
из двух атрибутов стиля: border и border-radius, — выведенных в две строки.
Мы добились этого, поместив после символа ; первой строки последователь­
162 Часть II. Управление веб-страницей и веб-обозревателем

ность литералов \г\п, создающих разрыв строки. Текст фиксированного форма­

тирования (тег <рге>) выведет этот разрыв как есть.
Откроем страницу 9.1 .html в веб-обозревателе и проверим наше первое клиентское
веб-приложение в действии (рис. 9.2).

Рис. 9.2. CSS-код для задания рамки сгенерирован

9.3. Упражнение. Работаем с веб-формой

Код написанного в разд. 9.2 приложения можно сделать компактнее, если заклю­
чить все элементы управления в веб-форму и получать введенные значения через
нее. Давайте так и сделаем.
1. В папке 9\!sources сопровождающего книгу электронного архива (см. приложе­
ние 3) найдем страницу 9.1.html, скопируем ее в какое-либо место на локальном
диске, переименуем в 9.2.html и откроем в текстовом редакторе.
2. Найдем тег <tabie>, формирующий таблицу, в которой находятся все элементы
управления, и заключим его в веб-форму (в тег <fom>):
<form>
<table>
<tг><td>Tc^mnHa< /td>
<tdxinput type="text" id="width" size="6" maxlength="6"
value="thin"x/td></tr>

<^аЬ1е>
</:£огт>

3. Исправим НТМЬ-код, создающий кнопку Сгенерировать код (исправленный

код выделен полужирным шрифтом, удаленный — зачеркиванием):
<input type=”buttonsubnii t ” id^'gonoratG" value="CreHepnpoBaTb код">
Урок 9. Веб-формы и элементы управления 163

Мы изменили разновидность этой кнопки с обычной (button) на кнопку отправ­

ки данных (submit) и убрали якорь, который нам теперь не понадобится.
4. Добавим после закрывающего тега <htmi> сценарий, который получит доступ
К форме И элементу output:
<script type="text/javascript">
const form = document.forms[0];
const output = document.getElementByld('output*);
</script>

Чтобы получить доступ к форме, мы воспользовались коллекцией forms объекта-

страницы (см. разд. 7.1) — так проще.
5. Напишем код, делающий поле ввода Радиус скругления доступным или недос­
тупным в зависимости от состояния флажка Скругленные углы:
form.elements[3].addEventListener('change', () => {
form.elements[4].disabled = !form.elements[3].checked;
}) ;
Свойство elements формы хранит коллекцию имеющихся в ней элементов
управления. Мы использовали это свойство, чтобы получить доступ к флажку
и полю ввода.
6. Код, генерирующий CSS-стиль, мы можем оформить как обработчик события
submit формы. Это событие возникает перед отправкой данных, которая произ­
водится нажатием кнопки отправки данных (вот поэтому мы и изменили разно­
видность кнопки Сгенерировать код на шаге 3).
Напишем этот код:
form.addEventListener('submit', (evt) => {
let s = 'border: ' + form.elements[0].value + ' ' +
form.elements[1].options^
[form.elements[1].selectedlndex].value + 1 ' +
form.elements[2].value + ';\r\n';
- if (form.elements[3].checked)
s += 'border-radius: ' + form.elements[4].value +
outpgt.textContent = s;
evt.preventDefault() ;
}) ;
Доступ К элементам управления выполняем также через коллекцию elements
формы. И не забываем отменить обработчик события submit по умолчанию —
иначе форма выполнит отправку данных, что приведет к перезагрузке страницы
в ее изначальном виде.
Откроем страницу 9.2.html в веб-обозревателе и проверим ее в работе.
164 Часть II. Управление веб-страницей и веб-обозревателем

9.3.1. Свойства, методы и события веб-формы

Веб-форма представляется классом нтмьгоппЕ1етеп^ Помимо свойств, соответст­
вующих атрибутам тегов, и свойств, методов и событий, унаследованных от супер­
класса нтмьЕ1етеп1:, он поддерживает еще несколько свойств (табл. 9.5), методов
(табл. 9.6) и событий (табл. 9.7).

Таблица 9.5. Д ополнительные свойства класса HTMLFormElement

Свойство Описание
elements Коллекция всех элементов управления, имеющихся в форме
length Количество элементов управления в форме
autocomplete Если • on ' — у всех полей ввода в форме выводится список ранее вве­
денных значений для быстрого выбора (поведение по умолчанию). Если
'of f ' — такой список не выводится

Таблица 9.6. Д ополнительные м етоды класса HTMLFormElement

Метод Описание
submit() Выполняет отправку данных, как если была нажата кнопка отправки
данных
reset () (Выполняет сброс формы, как если бы была нажата кнопка сброса

Таблица 9.7. Д ополнительные собы тия класса HTMLFormElement

Событие Когда возникает?

Всплывающие

submit Перед отправкой данных (обработчик по умолчанию производит

отправку данных)
reset Перед сбросом формы (обработчик по умолчанию сбрасывает форму)

9.4. Упражнение.
Реализуем валидацию данных в веб-форме
В приложении из разд. 9.3 не помешает обезопаситься на тот случай, если пользо­
ватель забудет ввести толщину рамки, радиус скруглення или же не укажет в них
единицу измерения. Давайте сделаем это и пока ради простоты будем принимать
лишь величины, заданные в пикселах.
1. В теги <input> страницы 9.2.html, создающие поля ввода Толщина и Радиус
скруглення, добавим атрибут без значения required, чтобы сделать эти поля
Урок 9. Веб-формы и элементы управления 165

обязательными к заполнению (добавленный код выделен полужирным шриф­

том):
<input type=Mtext" id="width" . . . required>

cinput type="text" id="radius" . . . required>

Это самая простая разновидность валидации, реализуемая средствами HTML.

Откроем исправленную страницу 9.2.html в веб-обозревателе, удалим значение из
поля ввода Толщина и нажмем кнопку Сгенерировать код. Под полем ввода
появится сообщение, требующее его заполнить (рис. 9.3).

Рис. 9.3. Сообщение, требующее заполнить поле

Такое же сообщение мы получим, если установим флажок Скругленные углы,

чтобы сделать доступным поле ввода Радиус скругления, и нажмем кнопку
Сгенерировать код, — HTML-валидация работает.
2. Приступим к созданию валидации, требующей указания единицы измерения и
реализуемой программно средствами JavaScript.

Программную валидацию следует производить в обработчике события input

|| или change элемента управления.
Нам нужно проверить, заканчивается ли введенное значение толщины или
радиуса скругления символами рх (обозначение пикселов в стандарте CSS). Если
это не так, следует пометить соответствующее поле ввода, как содержащее не­
корректное значение, задав для него текст сообщения об ошибке ввода.
Для указания сообщения об ошибочном вводе достаточно вызвать у поля
ввода метод setcustomvaiidity в следующем формате:
setCustomValidity(<строка с с о о б щ е н и е м об ош и б к е >).

Если методу при вызове передать непустую строку, элемент управления счи­
тается содержащим некорректное значение. Чтобы пометить элемент управ­
ления как содержащий корректное значение, следует передать методу
setCustomValidity Пустую Строку.
Итак, напишем функцию checkvaiue, которая выполнит необходимую проверку,
и привяжем ее к полям ввода Толщина и Радиус скругления в качестве обра­
ботчика события change:
function checkValueO {
if (this.value)
166 Ч аст ь II. У пр ав л е ни е в е б -с т р а н и ц е й и в еб -о б о зр е в а т ел ем

if ( t h i s . v a l u e . e n d s W i t h (’p x ' ))
t h i s .s e t C u s t o m V a l i d i t y ('');
else
t h i s .s e t C u s t o m V a l i d i t y ^
(’У к а ж и т е еди н и ц у и з м е р е н и я px ( п икселы)’);
}
f o r m . e l e m e n t s [0].a d d E v e n t L i s t e n e r (’c h a n g e ’, c h e c k V a l u e );
f o r m . e l e m e n t s [4].a d d E v e n t L i s t e n e r ('c h a n g e ’, c h e c k V a l u e );

В теле функции c h e c kValue предварительно проверяем, занесено ли вообще зна­

чение в поле ввода. Если этого не сделать, метод end s W i t h не найдет в пустой
строке символов рх, и пользователь увидит сообщение, требующее указать еди­
ницу измерения, вместо стандартного Заполните это поле, что обескуражит его.
Обновим исправленную страницу, занесем в поле ввода Толщина значение без
единицы измерения и нажмем кнопку Сгенерировать код. Под полем ввода по­
явится сообщение, предлагающее дописать единицу измерения (рис. 9.4).

Рис. 9.4. Сообщение, предлагающее дописать единицу измерения

Для проверки допишем обозначение пикселов, вновь нажмем кнопку Сгенериро­

вать код и посмотрим на появившийся ниже CSS-код стиля.

9.4.1. Вывод сообщений об ошибках

в произвольном месте веб-страницы
По умолчанию веб-обозреватель выводит сообщения об ошибках ввода во всплы­
вающих окошках под элементами управления. Но мы можем вывести их иным
образом — например, в каком-либо элементе страницы.
Класс представляющий поле ввода, поддерживает метод
HTMLinputEiement,
checkvaiidity.Он не принимает параметров и возвращает true, если в поле введено
корректное значение, И false в противном случае.
Тот же класс поддерживает СВОЙСТВО validationMessage, Хранящее Строку СТеКСТОМ
сообщения об ошибке и доступное только для чтения.
Вот пример вывода сообщения об ошибке в элементе страницы error:
<in p u t type=" t e x t " id="width" . . . required>
<div i d = " w i d t h E r r o r " x / d i v >

const w i d t h = d o c u m e n t . g e t E l e m e n t B y I d ( ’w i d t h ’);
const w i d t h E r r o r = d o c u m e n t . g e t E l e m e n t B y l d (’w i d t h E r r o r ’);
Урок 9. В е б -ф о р м ы и э л ем е н т ы уп р а в л е н и я 167

w i d t h .a d d E v e n t L i s t e n e r ('c h a n g e ', () => {

if ( w i d t h . c h e c k V a l i d i t y ())
w i d t h E r r o r .t e xtContent = 'OK!';
else
w i d t h E r r o r .te xtContent = width.validat i o n M e s s a g e ;

Если требуется выполнить валидацию средствами JavaScript, выполняющий ее код

следует поместить перед В Ы З О В О М метода checkValidity:
w i d t h .a d d E v e n t L i s t e n e r (' c h a n g e ', () => {
if (width.value)
if ( w i d t h . v a l u e . e n d s W i t h ('px'))
w i d t h . s e t C u s t o m V a l i d i t y ('');
else
width.setCustomValidity^
(’У к а ж и т е е д иницу и з м е р е н и я px (пикселы)');
if ( w i d t h . c h e c k V a l i d i t y ())
w i d t h E r r o r .t e xtContent = 'OK!';
else
w i d t h E r r o r .t e xtContent = width.validat i o n M e s s a g e ;

Класс HTMLinputEiement также поддерживает доступное только для чтения свойство

wilivaiidate. Оно хранит true, если в поле ввода будет выполняться валидация,
и false — если не будет (это случается, если поле недоступно для ввода).

9.4.2. Вывод произвольных сообщений об ошибках

Класс поддерживает свойство validity, хранящее объект класса
HTMLinputEiement
Vaiiditystate. Он содержит сведения о том, какого рода ошибка была допущена
при вводе значения.
Класс vaiiditystate поддерживает следующие свойства, доступные только для
чтения:
♦ valid— true, если введенное значение полностью корректно, false в противном
случае;
i
♦ valueMissing— true, если обязательное к заполнению поле ввода не заполнено,
false в противном случае;
♦ typeMismatch— если введено значение неподходящего типа (например,
true,
строка, не являющаяся интернет-адресом,— в поле ввода интернет-адреса),
false в противном случае;
♦ tooLong — true, если длина введенного значения превышает заданную в атрибу­
те тега maxiength, false в противном случае;
♦ rangeünderfiow— true, если число, занесенное в поле ввода числа, меньше ука­
занного в атрибуте тега min, false в противном случае;
168 Ч аст ь II. У пр ав л е ни е в е б -с т р а н и ц е й и в еб -о б о зр е ва т ел ем

♦ rangeOverflow— true, если число, занесенное в поле ввода числа, больше ука­
занного в атрибуте тега max, false в противном случае;
♦ stepMismatch— true, если число, занесенное в поле ввода числа, не попадает
в интервал между значениями, заданный атрибутом тега step, false в противном
случае;
♦ patternMismatch — true, если введенное значение не совпадает с шаблоном, за­
данным в атрибуте тега p a t t e r n (о нем разговор пойдет на уроке 10), false в про­
тивном случае;
♦ c u s t o m E r r o r -- true, еСЛИ меТОД s e t C u s t o m V a l i d i t y б ы л ВЫЗВан С н е п у с т о й СТрО­
к о й , false в противном случае.

Вот пример вывода произвольного сообщения об ошибке ввода:

<i n p u t t y p e = " t e x t " id="width" . . . required>
<div id="widthErrorMx/div>

const width = document.getElementByld('width');

const widthError = document.getElementByld('widthError');
w i d t h . a d d E v e n t L i s t e n e r ('c h a n g e ', () => {
if (width.validity.valid)
w i d t h E r r o r .t e xtContent = 'OK!';
e lse if ( w i d t h . v a l i d i t y .valueMissing)
w i d t h E r r o r .t e xtContent = 'Задайте т о л щину рамки';
else
w i d t h E r r o r .t e x t C ontent = w i d t h . v a lidationMessage;
});

9.5. Самостоятельные упражнения

♦ Доработайте веб-приложение 9.2.html так, чтобы при незаполнении поля Толщи­
на или Радиус скругления выводилось сообщение «Задайте толщину» и «За­
дайте радиус скругления» соответственно.
Подсказка : выполните необходимую проверку в функции checkvaiue и исполь­
зуйте тот факт, что у упомянутых ранее полей ввода заданы разные якоря.
♦ Если в раскрывающемся списке Стиль того же веб-приложения выбран пункт
Двойная или любой из следующих за ним пунктов, пусть оно проверяет, чтобы
толщина рамки была не менее 5 пикселов. Если же условие не выполнено,
должно выводиться сообщение «Для этого стиля рамки укажите толщину не
менее 5 пикселов».
♦ В папке 9\!sources сопровождающего книгу электронного архива (см. приложе­
ние 3) найдите страницу 9.5.1.html. На ее основе напишите веб-приложение
(рис. 9.5), генерирующее CSS-код для формирования просветов на основе вве­
денных пользователем данных (внутренние просветы создаются атрибутом сти­
ля padding, внешние — margin). Реализуйте в приложении валидацию — провер-
Урок 9. Веб-формы и элементы управления 169

Р и с . 9.5. В е б -п р и л о ж е н и е , ге н е р и р у ю щ е е C S S -код д л я ф о р м и р о в а н и я п р о св е то в

ку на ввод всех четырех значений просветов и на указание в них единицы изме­

рения рх.
♦ В папке 9\!sources сопровождающего книгу электронного архива (см. приложе­
ние 3) найдите страницу 9.5.2.html. На ее основе напишите приложение-
экзаменатор (рис. 9.6), предлагающее пользователю выбрать в списке все интер­
претируемые языки программирования и нажать кнопку Готово!. В случае вер­
ного выбора внизу должна выводиться зеленая надпись «Правильно!», в случае
неверного выбора — красная надпись «Неправильно!».
Подсказка: для вывода надписи нужным цветом воспользуйтесь стилевыми
классами right и wrong, уже имеющимися во внутренней таблице стилей этой
страницы.

Р и с . 9.6. П р и л о ж е н и е -э к з а м е н а то р
 Урок 10
Регулярные выражения
Регулярные выражения JavaScript
Литералы и модификаторы регулярных выражений
Поиск и обработка текста посредством регулярных выражений
Программная валидация с помощью регулярных выражений
HTML-валидация

10.1. Введение в регулярные выражения

Многие, если не большинство веб-сценариев занимаются обработкой строк. В том
числе ищут в них фрагменты, совпадающие с определенными шаблонами, или про­
веряют совпадение с шаблонами отдельных строк (выполняют валидацию). Такие
шаблоны оформляются в виде регулярных выражений.
Регулярное выражение — шаблон, применяемый для поиска совпадающих
с ним фрагментов текста и проверки на совпадение с ним заданных вели­
чин. Может включать в себя как обычные символы (которые обрабатывают­
ся как есть), так и литералы. Регулярное выражение представляет собой
объект специализированного класса RegExp.
Литерал регулярного выражения — символ или последовательность симво­
лов, имеющих особое значение. Литерал может обозначать символ опреде­
ленной категории (например, любую букву, любую цифру, пробельный
символ, букву из заданного набора и пр.), указывать количество повторений
символа и др. Существует несколько разновидностей литералов.

10.1.1. Создание регулярных выражений

Создать регулярное выражение можно двумя способами:
♦ записав его между символами / (прямой слеш) в формате:
/< с о б с твенно ш а б л о н >/ [< м о д ифика торы> ].

Модификатор — обозначение специфического режима обработки регуляр­

ного выражения, присутствие которого активирует этот режим. Имеет вид
буквы латиницы.
Созданное регулярное выражение присваивается какой-либо переменной:
let rex = /CSS/;
172 Часть II. Управление веб-страницей и веб-обозревателем

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

совпадет с любой последовательностью символов css. Поиск совпадающих
фрагментов ведется с учетом регистра символов:
// Здесь и далее фрагменты строк, совпадающие с регулярным выражением,
// выделены рамками
// Результат поиска: |CSS| |CSS|3 S|CSS| css HTML

Вот еще одно регулярное выражение

rex = /CSS\d/;

Литерал \d, присутствующий в нем, совпадает с любой цифрой от 0 до 9. Следо­

вательно, весь шаблон совпадет с любой строкой вида: сss< w $ p a > .
// Результат: CSS |CSS3| SCSS css HTML

Модификатор i включает поиск без учета регистра символов:

rex = /CSS/i;
// Результат: |CSS| |CSS|3 S|CSS| [css| HTML

♦ создав объект класса RegExp посредством оператора new:

new RegExp (<шаблон> [, <модификаторы>]).

шаблонуказывается в виде обычной строки без символов /. модификаторы также

записываются в виде строки:
rex = new RegExp(1CSS\d?, 'i ');

Этот способ имеет СМЫСЛ применять Л И Ш Ь тогда, когда шаблон И (или) модифика­
торы создаются программно.
Для тестирования шаблонов регулярных выражений можно использовать интернет­
службу «Regular expression» (рис. 10.1), доступную по адресу https://regexl01.com/.

Рис. 10.1. Интернет-служба «Regular expression»

Урок 10. Регулярные выражения 173

В поле ввода Regular expression заносится шаблон регулярного выражения, а в об­

ласть редактирования Test string— обрабатываемая строка. Совпадающие фраг­
менты, найденные в обрабатываемой строке, подсвечиваются. Щелкнув на изобра­
жении флажка в правой части поля ввода Regular expression, можно вызвать меню
для указания модификаторов.

10.1.2. Использование регулярных выражений:

простые случаи
Проверить совпадение какой-либо строки с регулярным выражением или выпол­
нить в строке поиск совпадающего фрагмента можно посредством двух методов:
♦ метод test {<строка>) класса RegExp возвращает true, если указанная строка сов­
падает с текущим регулярным выражением, и false в противном случае:
let rex = /CSS/;
let result = rex.test('CSS3f); // true
result = rex.test(’HTML5’); // false

♦ МеТОД search { р е г у л я р н о е выраженмв>) класса String ищет В Текущей СТрОКе Пер­

вый фрагмент, совпадающий с заданным регулярны м выражением. Если совпа­
дающий фрагмент найден, возвращается номер его первого символа (нумерация
символов начинается с нуля), в противном случае: -1:
result = ’Язык CSS'.search(rex); // 5
result = 'Язык HTML'.search(rex); V/ -1

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

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

10.2. Литералы регулярных выражений

10.2.1. Метасимволы
Метасимвол — литерал, обозначающий любой символ из какой-либо груп­
I пы или символ с указанным кодом.

В табл. 10.\ приведен список поддерживаемых метасимволов.

Таблица 10.1. Список поддерживаемых метасимволов

Литерал Описание Пример Результат

. (точка) Любой символ, кроме возврата каретки (\г)

/./
и перевода строки (\п)

\w Алфавитно-цифровой символ (буква, цифра

/\w/ !
или подчеркивание)

\w Не алфавитно-цифровой символ /\w / BasicQ]

174 Часть II. Управление веб-страницей и веб-обозревателем

Таблица 10.1 (окончание)

Литерал Описание Пример Результат

\d Цифра /\d/ |рх

\D Не цифра /\D/ 5@0О2О§

\s Пробельный символ (пробел, табуляция, воз­
/\s/ 5рх[]20%
врат каретки или перевод строки)

\S Не пробельный символ /\S/ ИШ

\b Начало или конец слова /\ьз/ Щрх [|% W3C

\B Не начало и не конец слова /\вз/ Зрх 3% ЦЦс

\и<код> Символ с указанным 11пюос1е-кодом /\u043c/ Код символа

Примеры:
// Ищем отдельное слово вида ’CSS<LfH<£p<3>'
гех = /\bCSS\d\b/;
result = rex.test('Язык CSS3'); // true
result = rex.test(’Язык CSS’); // false
result = 'Пакет SCSS’.search(rex); // -1
// Ищем обозначение цвета в формате RGB без учета регистра символов
rex = /#\w\w\w\w\w\w/i;
result = rex.test('color: #cb458a;'); // true

10.2.2. Поднаборы
| Поднабор — литерал, обозначающий любой символ из заданного набора.
В табл. 10.2 приведен список поддерживаемых поднаборов.

Таблица 10.2. Список поддерживаемых поднаборов

Литерал Описание Пример Результат

[<СИМВОЛЫ>] Любой ИЗ СИМВОЛОВ, приведенных в скобках / [aeiuy]/ B g s0 c

[л<СИМВОЛЫ>] Любой ИЗ СИМВОЛОВ, не приведенных в скобках / [ Aa e i u y ] / |a g i @

[<с1>-<с2>] Любой из символов из диапазона от с1 до с2 /[a-і]/ E@@l@

[ А<с1>-<с2>] Любой из символов не из диапазона от с1 до с2 / [ Aa - i ] / gie@ d

Примеры:
rex = /[RST] [i-m] [Aa-w]/;
result = rex.test(’Sky'); // true
result = rex.test('Tin'); // false
Урок 10. Регулярные выражения______________________________________________________ 1 7 5

10.2.3. Вариант
Вариант — литерал, обозначающий любой фрагмент из перечисленных.
Он записывается в формате:
<фрагмент 1>\<фрагмент 2> | . . . \<фрагмент п-1>\<фрагмент л>.

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

вертикальными линиями, началом и концом регулярного выражения.
Примеры:
// Ищем строки 'jpg', ’jpeg' или ’jpe' без учета регистра
rex = /jpg Ijpeg Ijpe/i;
result = 'logo.jpg'.search(rex); // 5
result = 'background.jpeg'.search(rex); // 11
// Ищем либо 'HTML<цифра>', либо 'JavaScript'
rex = /HTML\dI JavaScript/;
result = 'Язык HTML5'.search(rex); // 5
result = 'Учите JavaScript!'.search(rex); // 6
result = 'Язык HTML'.search(rex); // -1

10.2.4. Квантификаторы
IКвантификатор — литерал, указывающий количество повторений или
Иместоположение символа.
Вот все поддерживаемые квантификаторы:
♦ <сим волу * — символ может присутствовать в произвольном количестве экземп­
ляров:
rex = /\bCS+S\b/i; // Результат: CS |сЦ [CSSS| |CSSSSSSSS|

♦ <с и м в о л у * символ может присутствовать в произвольном количестве экземп­

—

ляров или вообще отсутствовать:

rex = /\bCS*S\b/i; // Результат: [с§ |с|| |CSSS| |CSSSSSSSS|

♦ < символ > і — символ может присутствовать в одном экземпляре или отсутство­
вать: і

rex = /\bCS?S\b/i; // Результат: |cs] |сЦ CSSS CSSSSSSSS

♦ <с и м в о л у {<л>} — символ должен присутствовать в количестве л экземпляров:

rex = /\bCS{2}S\b/i;
// Результат: CS CSS |CSSS] CSSSSSSSS

♦ <с и м в о л у {<л>, } — символ должен присутствовать в количестве не менее л экзем­

пляров:
rex = /\bCS{2,}S\b/i;
// Результат: CS CSS |CSSS| |CSSSSSSSS|
176 Часть II. Управление веб-страницей и веб-обозревателем

♦ <символ>{<п1>,<п2>}— символ должен присутствовать в количестве ОТ n i до

п2 экземпляров:
rex = AbCS {1,2} S\b/i;
// Результат: CS |c|s| |CSSS| CSSSSSSSS

♦ л<символ> — символ должен находиться в начале текста:

гех = А [0-9] + ../; // Результат: |20pt] ЗОрх 4% 200mm

Если в регулярном выражении указан модификатор m (будет рассмотрен далее),

этот квантификатор также обозначает начало отдельной строки текста;
♦ <символ>$ — символ должен находиться в конце текста:
гех = /[0-9]+..$/; // Результат: 20pt ЗОрх 4% |200mm|

Если в регулярном выражении указан модификатор m (будет рассмотрен далее),

этот квантификатор также обозначает конец отдельной строки текста;
♦ <символ 1>{?=<символ 2>) — за символом 1 должен следовать символ 2, причем
последний не включается в состав фрагмента, совпадающего с регулярным вы­
ражением:
// Ищем последовательность цифр, запятых и точек, за которой следует
// произвольное количество пробелов и строка 'руб',
// т. е. цену в рублях.
// Чтобы поместить в регулярное выражение символ точки, мы предварим
// его обратным слешем. Если этого не сделать, веб-обозреватель
// посчитает точку за литерал ., совпадающий с любым символом,
гех = / [\d,\.]+(?=\s*py6)/;
// Результат: 12 [Î2] руб |34,67|руб |89.8| руб 89.8

♦ <символ 1> (? !<символ 2 » --За символом 1 Нв ДОЛЖеН Следовать символ 2, Причем

последний не включается в состав фрагмента, совпадающего с регулярным вы­
ражением:
// Ищем произвольное количество цифр, за которыми не следует
// комбинация из произвольного количества цифр и символов 'рх',
// т. е. величины, указанные не в пикселах
rex = /\d+ (? !\d*px)/; // Результат: |2Ô|pt ЗОрх Щ% [200|mm

10.2.5. Под квантификатор

По умолчанию квантификаторы + и * работают так, чтобы совпавшей с регулярным
выражением оказалась строка максимальной длины {«жадный» режим поиска).
В качестве примера рассмотрим регулярное выражение, которое совпадает с после­
довательностью любых символов, взятых в апострофы:
гех = /?.*'/;
// Результат: c++ l'html1 4c s s ' *javascriptт| python
Урок 10. Регулярные выражения 177

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

длинный фрагмент— расположенный между первым и последним апострофами.
Чтобы оно «захватывало», напротив, наиболее короткий фрагмент, его следует
переключить в «щедрый» режим поиска .
I Подквантификатор — литерал, указываемый после квантификатора и из-
ll меняющий режим его работы.
Подквантификатор ?, указанный после квантификатора + и *, переключает его
в «щедрый» режим:
гех = /’.*?'/;
// Результат: c++ |fhtml'[ |*css'| |'javascript'| python

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

го знака считается квантификатором ?, описанным ранее.

10.2.6. Группы и обратные ссылки

! Группа — часть регулярного выражения, взятая в круглые скобки. Группа
|| может быть любой длины, но всегда ведет себя как один символ.
Примеры:
// Регулярное выражение, совпадающее со строками 'jpg’, ’jpeg' и 'jpe'.
// Группа не использовалась,
rex = /jpgljpeg|jpe/;
// To же самое регулярное выражение, но записанное с применением группы.
// Получилось короче,
гех = /jp(g Ieg|e)/;
// Регулярное выражение, совпадающее с последовательностью цифр,
// после которой может присутствовать строка 'руб'
rex = /\d+(руб)?/;

Фрагмент, совпавший с группой, запоминается веб-обозревателем:

// Фрагмент, совпавший с группой и запомненный веб-обозревателем,
// здесь и далее выделен черной заливкой
rex = /(\d+)px/; // Результат: |Щрх] 4Opt

Обратная ссылка — литерал регулярного выражения, ссылающийся на

фрагмент, который совпадает с определенной группой.
Обратная ссылка записывается в формате:
\<порядковый номер труппы>.
Группы в регулярном выражении нумеруются в порядке слева направо, на­
чиная с 1.
Далее приведен пример регулярного выражения, совпадающего с любым парным
тегом. Внутри него созданы две группы: первая— для имени тега, вторая— для
его содержимого. В записи закрывающего тега применяется обратная ссылка, хра­
178 Часть II. Управление веб-страницей и веб-обозревателем

нящая имя тега из первой группы. Чтобы поместить в регулярное выражение сим­
вол прямого слеша, мы предварили его обратным слешем:
rex = /<(\w+)>(.*?)<\/\l>/; // Результат: |</strong>|

10.2.7. Обычные символы

Все прочие символы в шаблонах регулярных выражений обозначают сами себя.
Если требуется вставить в шаблон символ, совпадающий с каким-либо литералом,
его следует предварить знаком обратного слеша (\):
// Точка в шаблоне регулярного выражения — это литерал,
// обозначающий любой символ
const гех2 = /bhv.ru/;
// Результат: |bhv:ru| [bhv.ru| [bh
/ / Чтобы вставить в шаблон символ точки, его нужно предварить обратным слешем
const гехЗ = /bhv\.ru/;
// Результат: bhv:ru [bhv.ru| bhv ru
// Чтобы вставить в регулярное выражение прямой слеш, обратный слеш
// или звездочку, обозначающих различные литералы,
// их также предваряют обратным слешем: \/, \\, \*

10.3. Поиск и обработка фрагментов,

совпадающих с регулярными выражениями
10.3.1. Обычный режим поиска
В обычном режиме , используемом по умолчанию, поиск останавливается
после нахождения первого фрагмента, совпадающего с заданным регуляр­
ным выражением.
Метод ехес {<строка>) класса RegExp ищет в строке фрагмент, совпадающий с теку­
щим регулярным выражением, и возвращает результат поиска в виде массива. Пер­
вый (с индексом о) элемент этого массива хранит найденный фрагмент. Помимо
этого, в объекте массива есть добавленные свойства:
♦ index — номер первого символа совпавшего фрагмента в исходной строке;
♦ input — сама исходная строка.
Если поиск завершился неудачей, метод возвращает null.
Пример:
rex = /\d+px/;
result = rex.exec( '5рх 4pt 10рх');
le t si = re s u lt[0]; / / ' 5px'
le t ind = re s u lt. index; // 0
le t s = re s u lt. input; / / '5px 4pt 10px'
Урок 10. Регулярные выражения 17 9

Класс RegExp поддерживает СВОЙСТВО lastlndex, хранящее номер символа строки,

с которого начнется поиск, и доступное для чтения и записи.
Вот пример использования этого свойства:
rex.lastlndex = 5;
result = rex.exec (15рх 4pt Юрх');
si = result [0] ; // 'Юрх'
ind = result.index; // 8

Если в шаблоне регулярного выражения присутствуют группы, фрагменты, совпа­

дающие с ними, будут храниться в последующих (с индексами больше о) элементах
массива, возвращенного методом:
гех = /<(\w+)>(.*?)<\/\1>/;
result = rex.exec('HTML <strong>CSS</strong> JavaScript’);
si = result[0]; // '<strong>CSS</strong>'
let s2 = result[1]; // 'strong'
let s3 = result[2]; // 'CSS'

Метод match ^ р е г у л я р н о е выраженив>) класса String ищет В текущей Строке фраг­

мент, совпадающий с регулярны м выражением, и возвращает результат поиска в виде
массива, аналогичного выдаваемому методом ехес класса RegExp (см. ранее):
rex = /\d+px/;
result = '5рх 4pt Ю р х ' .match (rex) ;
si = result[0]; // '5px'
ind = result.index; // 0
s = result.input; // '5px 4pt 10px'

Если поиск завершился неудачей, метод также возвращает null.

10.3.2. Глобальный поиск

При глобальном поиске методы ехес класса класса
|
RegExp И match String
ищут в строке все совпадающие фрагменты.
Глобальный поиск устанавливается указанием в регулярном выражении модифика­
тора д.
В случае глобального поиска:
♦ метод ехес класса RegExp— находит первый совпавший фрагмент, завершает
работу с возвратом результата и заносит в свойство lastlndex регулярного вы­
ражения номер символа, располагающегося сразу за найденным фрагментом.
При следующем вызове этого метода будет выполнен поиск, начиная с этого
места, в результате чего будет найден следующий фрагмент, и т. д.:
rex = /\d+px/g;
result = rex.ехес ('5рх 4pt Юрх');
si = result[0]; // '5рх'
ind = result.index; // 0
let li = rex.lastlndex; // 3
180 Часть II. Управление веб-страницей и веб-обозревателем

result = rex.exec('5рх 4pt Юрх');

si = result[0]; // 'Юрх'
ind = result.index; // 8
li = rex.lastlndex; // 12
result = rex.exec('5px 4pt Юрх');
// Здесь метод exec вернет значение null — поиск закончен

♦ метод match класса string — возвращает обычный массив со всеми найденными

совпадениями (фрагменты, совпадающие с группами, в него не включаются):
result = '5рх 4pt Ю р х '.match (rex) ;
si = result[0]; // f5px'
s2 = result[1]; // '10pxf

10.3.3. Многострочный поиск

При многострочном поиске квантификаторы А и $ обозначают не только
начало и конец текста, но и начало и конец каждой отдельной строки в тек­
сте.
Отдельные строки в строковом значении разделяются комбинацией символов \г\п
(реже — отдельными символами \г или \п):
let s = ’Первая строка\г\пВторая строка\г\пТретья строка';

Пример:
гех = /А [0-9] + ../; // Результат: [20pt| 30px\r\n200mm 5cm
гех = /А [0-9]+../т; // Результат: |20pt| 30px\r\n|200mm| 5cm
гех = /[0-9]+..$/; // Результат: 20pt 30px\r\n200mm |5cm|
гех = /[0-9]+..$/т; // Результат: 20pt [30px|\r\n2Q0mm |5crn|

10.3.4. Замена совпавших фрагментов

Метод replace класса string, знакомый нам по разд. 4.4, может выполнять замену
фрагментов, совпавших С указанным регулярны м выражением-.
replace{< регуля рн ое выражениеУ, <заменяющая подстрока>)

Пример:
rex = /CSS\d/;
result = 'HTML CSS5 JavaScript'.replace(rex, 'CSS');
// 'HTML CSS JavaScript'

Применив регулярное выражение с модификатором g, можно заменить все совпав­

шие фрагменты, а не только первый встреченный:
result = '5рх 4pt Ю р х ' .replace(/px/g, 'mm');
// '5mm 4pt 10mm'

В заменяющей подстроке можно использовать следующие специализированные

литералы, работающие только здесь:
Урок 10. Регулярные выражения 181

♦ $&— обозначает весь совпавший фрагмент;

♦ $<дп> — фрагмент из группы с номером дп (обратная ссылка);
♦ $ ' — часть строки до совпавшего фрагмента;
♦ $1— часть строки после совпавшего фрагмента;
♦ $$ — символ доллара ($).
Примеры:
resuit = ’HTML, CSS, JavaScript’.^
replace(/\b\w+\b/g, ’<em>$&</em> ’);
// ’<em>HTML</em>, <em>CSS</em>, <em>JavaScript</em>’
resuit = ’5px 4pt 20%’.replace(/(\d+)(px|pt)/g, ’$lmm’);
// ’5rnm 4inm 20% ’

10.3.5. Прочие полезные инструменты

Метод spiit класса string, описанный в разд. 4.4, может разбить строку, руко­
водствуясь указанным в качестве символа-разделителя регулярны м выражением
spiit (< регуля рн ое выражение>[, <предельный р азм ер м ассива>])

Пример:
resuit = ’HTML, CSS; JavaScript ’.spiit (/, |;/) ;
// [’HTML’, ’CSS’, ’JavaScript’]

Класс RegExp поддерживает еще несколько СВОЙСТВ (помимо lastlndex), которые

могут оказаться полезными и которые доступны только для чтения:
♦ source — шаблон регулярного выражения без символов слеша и модификаторов,
представленный в виде строки;
♦ global — true, если установлен модификатор g, faise в противном случае;
♦ ignoreCase — true, если установлен модификатор i, faise в противном случае;
♦ multiline — true, если установлен модификатор ш, false в противном случае.

10.4. Упражнение.
Выполняем программную валидацию
с помощью регулярного выражения
Веб-приложение, написанное в разд. 9.4, позволяет задать в качестве единицы из­
мерения только пикселы. Доработаем его, чтобы можно было указывать также
пункты и проценты. И используем для этого регулярное выражение.
1. Найдем в папке 10\!sources сопровождающего книгу электронного архива
(см. приложение 3) страницу 9.2.html, скопируем ее куда-либо на локальный диск
и откроем копию в текстовом редакторе.
182 Часть II. Управление веб-страницей и веб-обозревателем

2. В начало кода сценария добавим строку, создающую регулярное выражение

и присваивающее ее переменной гех:
const rex = /А [0-9]+(рх|pt|%)$/i;

Это регулярное выражение будет совпадать с любыми значениями формата:

<послвдовательность цифр от 0 до 9>px|pt|%

Модификатор i включает поиск без учета регистра символов.

3. Исправим код функции checkvaiue следующим образом (исправления выделены
полужирным шрифтом):
function checkValue() {
if (this.value)
if (rex.test(this.value))
this.setCustomValidity('');
else
this.setCustomValidity(’Введите корректное значение');
}
Откроем страницу 9.2.html в веб-обозревателе и проверим, как она работает.

10.5. HTML-валидация
с применением регулярных выражений
Чтобы выполнить валидацию введенного в поле значения на совпадение с регуляр­
ным выражением, необязательно писать веб-сценарий. Достаточно указать нужное
регулярное выражение в атрибуте pattern тега <input>. Регулярное выражение
должно быть записано без символов слеша и без модификаторов. Пример:
<input type="text" id=nwidth" pattern="[0-9]+(px|pt|%)">

Атрибут тега pattern поддерживается в обычном поле ввода, полях ввода пароля,
интернет-адреса и адреса электронной почты.
Недостатки этого способа валидации: необходимость записи регулярного выраже­
ния в каждое поле ввода, в котором нужно выполнить проверку значения, и невоз­
можность указания модификаторов (вследствие чего, например, нельзя выполнить
сравнение без учета регистра символов).

10.6. Самостоятельные упражнения

♦ В сценарий страницы 9.2.html, выполняющий валидацию (см. разд. 10.4), добавь­
те поддержку остальных единиц измерения CSS: миллиметров (mm), сантиметров
(cm), дюймов (in), пик (pc), em, vw и vh, а также предопределенных значений
толщины: thin, medium и thick. Заодно переименуйте функцию checkvaiue
В checkWidth.
Урок 10. Регулярные выражения 183

♦ Там же объявите функцию checkRadius, проверяющую на корректность величи­

ну радиуса скругления. Она будет полностью аналогична функции checkwidth, за
исключением под держки предопределенных значений: thin, medium И thick.
♦ Вынесите функции checkwidth И checkRadius В файл веб-СЦенария checkers, СОЗ­
дав тем самым библиотеку, пригодную для использования при разработке
других решений. Добавьте В эту библиотеку функции prepareCheckWidth
И prepareCheckRadius, КОТОрые ВЫПОЛНЯТ Привязку фуНКЦИЙ checkwidth И
checkRadius к событию change элемента страницы, переданного в единственном
параметре. Проверьте библиотеку, используя страницу 9 2.html.
 Урок 11
Взаимодействие
с веб-обозревателем
Работа с окном веб-обозревателя
Понятие ВОМ
Получение текущего интернет-адреса
Получение сведений о локальном компьютере
Вывод стандартных диалоговых окон

11.1. Работа с окном веб-обозревателя

Мы можем выяснить местоположение и размеры окна веб-обозревателя, величину,
на которую была прокручена открытая в нем страница, принудительно прокрутить
страницу, отреагировать на завершение загрузки страницы, ее прокрутку, измене­
ние размеров окна и т. п.
Все это выполняется посредством свойств (табл. 11.1), методов (табл. 11.2) и собы­
тий (табл. 11.3) класса window, который представляет окно веб-обозревателя. Объект
этого класса, представляющий текущее окно, хранится в переменной window, кото­
рая создается самим веб-обозревателем и доступна в любом веб-сценарии.
Класс window, равно как и все прочие классы ВОМ, что мы здесь рассмотрим, не
является ПОТОМКОМ класса HTMLElement.
ВОМ (Browser Object Model, объектная модель веб-обозревателя) — набор
объектов, представляющих окно веб-обозревателя, текущий интернет-адрес
и сведения о клиентском компьютере.

Таблица 11.1. С войства класса window

С войство Описание

innerWidth Ширина внутренней области окна

innerHeight Высота внутренней области окна
outerWidth Ширина всего окна
outerHeight Высота всего окна
screenLeft Горизонтальная координата левого верхнего угла окна относительно
левого верхнего угла экрана
186 Часть II. Управление веб-страницей и веб-обозревателем

Таблица 11.1 (окончание)

С войство Описание

screenTop Вертикальная координата левого верхнего угла окна относительно левого

верхнего угла экрана
screenX То же самое, ЧТО И screenLeft
screenY То же самое, ЧТО И screenTop
pageXOffset Величина, на которую открытая в окне страница была прокручена
по горизонтали
pageYOffset Величина, на которую открытая в окне страница была прокручена
по. вертикали
scrollX То же самое, ЧТО И pageXOffset
scrollY То же самое, ЧТО И pageYOffset

Свойства класса window, приведенные в табл. 11.1, хранят числовые величины,

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

Таблица 11.2. М етоды класса window

Метод Описание

blur() Деактивирует текущее окно

focus() Активирует текущее окно
print() Открывает стандартное диалоговое окно печати
scrollBy(<dx>, <dy>) Прокручивает открытую в текущем окне страницу на dx пикселов
по горизонтали и dy пикселов по вертикали. Положительные значе­
ния вызывают прокрутку вправо и вниз, отрицательные — влево
и вверх. Примеры:
// Прокручиваем страницу на 200 пикселов вправо
window.scrollBy(200, 0);
// Прокручиваем страницу на 300 пикселов вверх
window.scrollBy(0f -300);
scrollTo(<x>, <y>) Прокручивает открытую в текущем окне страницу в позицию
с указанными в пикселах координатами х и у.
// Прокручиваем страницу в позицию [0, 500]
window.scrollTo(0, 500);

Таблица 11.3. С обы тия класса window

Событие Когда возникает?

load После загрузки страницы

pageshow После загрузки страницы и события load
Урок 11. Взаимодействие с веб-обозревателем 187

Таблица 11.3 (окончание)

Событие Когда возникает?

scroll При прокрутке содержимого страницы

resize При изменении размеров окна
focus 4 При активизации окна
blur При деактивизации окна
beforeunload Перед уходом с текущей страницы
pagehide Перед уходом С текущей страницы, после события Ье^геип1оаЬ
beforeprint Перед открытием стандартного диалогового окна печати
afterprint После закрытия стандартного диалогового окна печати страницы
нажатием кнопки ОК или Отмена
hashchange При переходе на другой якорь

Помимо этого, в окне можно обрабатывать любые всплывающие события, возни­

кающие в элементах страницы. Вот пример обработки в окне события click:
window.addEventListener('click', () => {
// Обрабатываем событие click
});

11.1.1. Еще один способ записи веб-сценариев,

манипулирующих элементами страницы
Чтобы веб-сценарий, манипулирующий элементами страницы, смог работать,
к моменту его исполнения в памяти уже должны присутствовать объекты, пред­
ставляющие эти элементы. Поэтому такие сценарии часто помещают в конец
HTML-кода страницы:
<html>

</html>
<script type=”text/javascript">
// Здесь помещается код сценария
</script>

Однако подобный сценарий можно оформить и как обработчик события load окна.
Это событие возникает, как только страница загружена и обработана, следователь­
но, его обработчик исполняется, когда в памяти уже сформированы все объекты,
представляющие элементы страницы. Такой сценарий можно поместить куда угод­
но — например, в секцию заголовка страницы:
<html>
<head>
188 Часть II. Управление веб-страницей и веб-обозревателем

<script type="text/javascript">
window.addEventListener('load', () => {
// Здесь помещается код сценария
}) ;
</script>
</head>
<body>

</body>
</html>

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

ОСНОВНОЙ И используемые В нем библиотеки. Тогда все необходимые теги <script>
помещаются в одном месте HTML-кода (обычно в секции заголовка), что упрощает
сопровождение:
<head>

<!— Библиотеки — >

<script type=,ftext /javascript” src="scripts/libraryl.js"x/script>
<script type="text/javascript" src="scripts/library2.js"x/script>

<!— Основной сценарий — >

<script type="text/javascript">
window.addEventListener(1load’, 0 => {

});
</script>
</head>

11.2. Упражнение. Навигация по якорям

с подсветкой активной гиперссылки
В разд. 7.4 мы создали страницу, включающую элемент с прокруткой и панель
навигации. При щелчках на гиперссылках содержимое элемента прокручивалось
таким образом, чтобы соответствующий раздел становился видимым. Давайте сде­
лаем аналогичную страницу, в которой прокручиваться будет все ее содержимое,
а ДЛЯ подсветки активной гиперссылки станем обрабатывать событие hashchange
окна.
1. В папке 11\!sources сопровождающего книгу электронного архива (см. приложе­
ние 3) найдем страницу 11.2.html (рис. 11.1) и скопируем ее в какое-либо место на
жестком диске. Эта страница аналогична той, что мы создали в разд. 7.4.
2. Откроем страницу 11.2.html в текстовом редакторе и допишем в конце ее HTML-
кода сценарий С объявлением функции hightlightActiveLink, КОТОраЯ ПОЛуЧИТ
с единственным параметром якорь и подсветит гиперссылку, в которой он
записан:
Урок 11. Взаимодействие с веб-обозревателем 189

Рис. 11.1. Веб-страница, включающая элемент с прокруткой и панель навигации

<script type="text/javascript">
function highlightActiveLink(hash) {
active = document.querySelector('nav a.active');
if (active)
active.classList.remove('active');
active = document.querySelector('nav a[href$=' + hash + ']');
active.classList.add('active');
}
</script>

Сначала ищем активную в текущий момент гиперссылку и, если она есть, уби­
раем у нее стилевой класс active, чтобы снять подсветку. Потом ищем гипер­
ссылку с полученным в параметре якорем и привязываем к ней стилевой класс
active, тем самым подсвечивая.

3. Добавим обработчик события hashchange окна, который извлечет из интернет­

адреса якорь, на который был выполнен переход, и передаст его функции
hightlightActiveLink:
window.addEventListener('hashchange', (evt) => {
const hashlndex = evt.newURL.indexOf('#');
let hash;
if (hashlndex >= -1)
hash = evt.newURL.substr(hashlndex + 1);
190 Часть II. Управление веб-страницей и веб-обозревателем

else
hash = 'vsc';
highlightActiveLink(hash);
}) ;
В полученном из свойства newURL объекта события интернет-адресе ищем сим­
вол решетки (#), с которого начинается якорь. Если таковой есть, вырезаем из
интернет-адреса имя якоря без символа решетки. Если же решетки в интернет­
адресе нет, берем в качестве якоря активной гиперссылки vsc — это якорь самой
первой гиперссылки в панели навигации. После чего вызываем функцию
hightlightActiveLink, передав ей полученный ЯКОрь.

Откроем страницу 11.2.html в веб-обозревателе, пощелкаем по гиперссылкам и убе­

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

11.3. Работа с текущим интернет-адресом

Есть возможность получить интернет-адрес текущей страницы, равно как и его со­
ставные части (адрес хоста, путь к файлу и пр.), программно перейти по другому
интернет-адресу и перезагрузить страницу. Это выполняет класс Location, который
представляет текущий интернет-адрес, и объект которого хранится в свойстве
location объекта окна.

Свойства класса Location (все, за исключением одного) доступны для чтения и

записи:
♦ href — полный интернет-адрес в виде строки:
let href = window.location.href;
// 'http://www.dm.ru:8000/pages/page.html?par=12#anch'

// Выполняем программный переход по другому интернет-адресу

location.href = 'https://www.google.ru/';

♦ origin — строка вида о б о з н а ч е н и е п рот околахадрес хоста> [:<номер ТСР-порта>],

причем номер тср-порта присутствует только в том случае, если он указан в ин­
тернет-адресе:
let org = location.origin; // 'http://www.dm.ru:8000'

Это свойство доступно только для чтения;

♦ host — сочетание вида < адрес хоста> [ :<номер ТСР-порта>], причем номер ТСР-порта
присутствует только в том случае, если он указан в интернет-адресе:
let host = location.host; // 'www.dm.ru:8000'

♦ protocol — обозначение протокола с завершающим символом двоеточия, но без

двойного слеша:
let protocol = location.protocol; // 'http:'
Урок 11. Взаимодействие с веб-обозревателем _____________ 191

♦ hostname — адрес хоста:

let hn = location.hostname; // 'www.dm.ru*

♦ port — номер TCP-порта в виде строки. Если порт в интернет-адресе не указан,

хранит пустую строку:
let port = location.port; // '8000'

♦ pathname— путь к файлу с начальным символом слеша. Если путь не указан,

хранит строку со слешем ( ' / ' ):
let path = location.pathname; // '/pages/page.html'

♦ search— строка c GET-параметрами, включающая начальный вопросительный

знак. Если таковые в интернет-адресе отсутствуют, хранит пустую строку:
let search = location.search; // '?par=12'

♦ hash — имя якоря с начальным символом решетки. Если якоря нет, хранит пус­
тую строку:
let hash = location.hash; // '#anch'

// Если присвоить этому свойству другой якорь (уже без начального

// символа решетки!), будет выполнен переход по этому якорю
location.hash = 'anch2';

Также поддерживаются следующие три метода:

♦ assign {<интернет-адрес>) — выполняет переход на страницу, находящуюся по
указанному интернет-адресу,:
location.assign('https://www.google.ru/');

♦ replace {<интернет-адрес>) — ТО же Самое, ЧТО И assign, ТОЛЬКО текущий ИНТер­

нет-адрес не сохраняется в истории веб-обозревателя;
♦ reload ( [<с в е б - с е р в е р а ?>] ) — перезагружает текущую страницу. Если передать
с параметром значение false или вообще опустить параметр, страница, по воз­
можности, будет загружена из кеша веб-обозревателя. Если же задать true,
страница будет загружена с веб-сервера, даже если она имеется в кеше:
location.reload(true);

11.4. Получение сведений

о клиентском компьютере
Узнать сведения об экранной подсистеме клиентского компьютера позволит объект
класса screen, хранящийся в свойстве screen объекта окна. Его свойства приведены
в табл. 11.4 — все они хранят числовые величины и доступны только для чтения.
192 Часть II. Управление веб-страницей и веб-обозревателем

Таблица 11.4. Свойства объекта класса Screen

С войство Описание

a v a ilW id th Ширина свободной области экрана (без учета панели задач) в пикселах

a v a ilH e ig h t Высота свободной области экрана (без учета панели задач) в пикселах

w id th Ширина всего экрана в пикселах

h e ig h t Высота всего экрана в пикселах

co lo rD ep th Глубина цвета в битах на пиксел

Пример:
<img id="logo">

const logo = document.getElementByld('logo');

if (screen.availWidth > 1920)
logo.src = '/images/logo_hi_res.png’;
else
logo.src = '/images/logo.png’;

11.5. Вывод стандартных диалоговых окон

Для вывода стандартных диалоговых окон сообщения, предупреждения и запроса
на ввод значения применяются три следующих метода класса window:
♦ alert {<текст сообщениям — ВЫВОДИТ ОКНО-СООбщеНИе С у к а з а н н ы м текстом И
кнопкой ОК (рис. 11.2):
window.alert(’Введите неотрицательное число’);

Подтвердите действие
Введите неотрицательное число

ОК

Рис. 11.2. Окно-сообщение с текстом и кнопкой ОК

♦ confirm (<текст сообщениям — ВЫВОДИТ ОКНО-ПредупреЖДеНИе С указанным текстом

и кнопками ОК и Отмена (рис. 11.3). Возвращает true, если пользователь нажал
кнопку OK, false — если нажал кнопку Отмена:
window.confi rm(?Выполнить операцию?1);

♦ prompt (<текст сообщения>[, <изначальное значением ) — ВЫВОДИТ ОКНО С запро­

сом на ввод значения, содержащее указанный текст, поле ввода, куда заносится
Урок 11. Взаимодействие с веб-обозревателем 193

требуемое значение, и кнопки ОК и Отмена (рис. 11.4). Если было задано

изначальное значение , оно будет подставлено в поле ввода. Возвращает введен­
ное значение в виде строки, если пользователь нажал кнопку ОК, и null — если
была нажата кнопка Отмена:
window.prompt('Введите свое имя', ’Вася Пупкин');

Подтвердите действие
Выполнить операцию?

Рис. 11.3. Окно-предупреэдение с текстом и кнопками ОК и Отмена

Рис. 11.4. Окно с запросом на ввод значения, содержащее текст, поле ввода и кнопки ОК и Отмена

Метод prompt в настоящее время применяется только при обучении программи­

рованию (мы сами применяли его для этой цели в предыдущих уроках), экспе­
риментах и разработке прототипов. Использование его в рабочих веб-сайтах
считается плохим стилем веб-разработки.

11.6. Самостоятельное упражнение

Непосредственно при открытии страницы 11.2.html, написанной в разд. 11.2, актив­
ная гиперссылка не подсвечивается. Исправьте этот недочет.
Подсказка: реализуйте подсветку гиперссылки в обработчике события load окна,
а значение якоря получайте из свойства hash объекта location.
 ЧАСТЬ III
НТМ1. АР1
и компонентное
программирование

9 Таймеры и фоновые потоки.

9 Работа с внешними данными.
9 Перетаскивание.
9 Холст и программная графика.
9 Объявление своих классов.
9 Компоненты.
 Урок 12
Таймеры и фоновые потоки
Таймеры: периодические и однократные
Понятие HTML API
Фоновые потоки

12.1. Упражнение.
Используем периодические таймеры
Напишем клиентское веб-приложение, вычисляющее простые числа в указанном
пользователем диапазоне.
1. В папке 12\!sources сопровождающего книгу электронного архива (см. приложе­
ние 3) найдем страницу 12.1.1.html и скопируем ее куда-либо на локальный диск.
Эта страница содержит заготовку для создания приложения (рис. 12.1).

Рис. 12.1. Заготовка для создания клиентского приложения

2. Откроем страницу 12.1.1.html в текстовом редакторе и найдем код, создающий

приведенную на рисунке веб-форму:
<form>
<р>От: <input type="number" min="0" value=,,l">
до: cinput type="number” min=”0" value=,,100"x/p>
<p><input type="submit" value="Вычислить”x / p >
<p><select size=,,10"x/selectx/p>
</form>
198 Часть III. HTML API и компонентное программирование

В поля ввода чисел От: и до: заносятся начальное и конечное числа диапазона,
в котором нужно найти простые числа, кнопка отправки данных Вычислить за­
пускает вычисления, а нижний список, изначально пустой, служит для вывода
найденных простых чисел.
3. В конце HTML-кода добавим тег <script> с первыми выражениями сценария:
<script type="text/javascript">
const form = document.forms [0 ];
form.addEventListener(Submit’, (evt) => {
const min = parselnt(form.elements[0].value);
const max = parselnt(form.elements[1].value);
let flag, sqr, el;
form.elements[3].innerHTML = f';
form.elements[2].disabled = true;
}) ;
</script>

Все вычисления будут выполняться в обработчике события submit формы. В нем

мы извлекаем заданные пользователем начальное и конечное числа диапазона,
приводим их к числовому типу, очищаем нижний список и делаем недоступной
кнопку Вычислить, дав пользователю понять, что в текущий момент идет поиск
простых чисел.
4. Добавим в тело обработчика код, ищущий простые числа (добавленный код
здесь и далее выделен полужирным шрифтом):
form.addEventListener('submit’, (evt) => {

form.elements[2].disabled = true;
for (let i = min; i <= max; ++i) {
if (i % 2 != 0) {
flag = true;
sqr = Math.floor (Math, sqrt(i) ) ;
for (let j = 3; j <= sqr; j += 2)
if (i % j = 0) {
flag = false;
break;
}
if (flag) {
el = document.createElement ('option ') ;
el.textContent = in­
form .elements[3].add(el);
}
)
)
}) ;
Принцип несложен: простым считается число, не делящееся нацело на 2 и все
числа от трех до значения квадратного корня из этого числа, округленного до
ближайшего меньшего целого. Такое число добавляется в нижний список.
Урок 12. Таймеры и фоновые потоки 199

5. Добавим в тело обработчика выражения, делающие кнопку Вычислить доступ­

ной и отменяющие обработчик события по умолчанию:
form.addEventListener(’submit', (evt) => {

for (let i = min; i <= max; ++i) {

form.elements[2] .disabled = false;

evt.proven tDefault () ;
}) ;
Откроем страницу 12.1.1.html в веб-обозревателе, оставим в полях От: и до: присут­
ствующие там значения по умолчанию (о и ю о соответственно) и нажмем кнопку
Вычислить — в нижнем списке появятся все простые числа, найденные в указан­
ном диапазоне (рис. 12.2).

Рис. 12.2. В нижнем списке появились все простые числа, найденные в заданном диапазоне

Проблема здесь в том, что пока идут вычисления, приложение перестает отвечать
на действия пользователя (как бы «подвисает»)— поскольку веб-обозреватель,
полностью занятый выполнением кода, не успевает отреагировать на действия
пользователя вовремя. Невозможно даже прокрутить список, чтобы увидеть най­
денные простые числа.
Можно разбить процесс вычислений на отдельные короткие этапы, выполняемые
через одинаковые промежутки времени. Тогда веб-обозреватель сможет отреагиро­
вать на действия пользователя в промежутке между выполнением отдельных эта­
пов. Реализовать такой подход проще всего посредством периодических таймеров.
Периодический таймер — программный механизм HTML API, многократно
срабатывающий по истечении указанного промежутка времени и выпол­
няющий при срабатывании заданную функцию.
200 Часть III. HTML API и компонентное программирование

HTML API (HTML Application Programming Interface, интерфейс програм­

мирования приложений HTML) — набор программных интерфейсов, не от­
носящихся к DOM и ВОМ. В их число входят средства для работы с тайме­
рами и фоновыми потоками, рассматриваемые в этом уроке.
Создадим периодический таймер, который будет срабатывать каждые 0,1 с и вызы­
вать функцию, обрабатывающую за один вызов 1000 чисел.
Периодический таймер создается методом setinterval класса window:
sеtIntеrva1(< функция>, <промежуток времени>%
[, <параметры, передаваем ые функции>])

Функция, вызываемая при срабатывании таймера, может быть именованной, ано­

нимной или функцией-стрелкой, промежуток времени указывается в миллисекундах.
Последующими параметрами могут быть переданы значения, которые получит в ка­
честве параметров функция.
Метод возвращает целочисленный идентификатор таймера, который в дальнейшем
может быть использован для удаления этого таймера.
Ранее созданный периодический таймер удаляется методом ciearintervai класса
Window!
ciearintervai(<идентификатор таймера>)

После удаления таймер перестанет срабатывать, и указанная в нем функция пере­

станет вызываться.
Итак, продолжим работу над нашим клиентским приложением.
1. Пересохраним страницу 12.1.1.html под именем 12.1.2.html, откроем ее в текстовом
редакторе и удалим все содержимое тега <script>.
2. Запишем в тег <script> первые выражения нового сценария:
const form = document.forms [0] ;
let min, max, i, int;

Мы объявили переменные min и max для хранения начального и конечного чисел

диапазона, i — для хранения текущего обрабатываемого числа, int — под иден­
тификатор таймера.
3. Объявим функцию computesimpieValues, которая будет обрабатывать очередные
1000 чисел из заданного диапазона:
function computeSimpleValues() {
let flag, sqr, el;
for (let k = 0; i <= max && k <= 1000; ++i, ++k) {
if (i % 2 != 0) {
flag = true;
sqr = Math.floor(Math.sqrt(i));
for (let j = 3 ; j <= sqr; j += 2)
if (i % j == 0) {
flag = false;
Урок 12. Таймеры и фоновые потоки 201

break;
}
if (flag) {
el = document.createElement('option1);
el.textContent = i;
form.elements[3].add(el);
}
}
}
if (i >= max) {
window.clearlnterval(int);
form.elements[2].disabled = false;
}
}
Код этой функции похож на код обработчика события submit из предыдущего
варианта сценария, но с двумя различиями. Во-первых, цикл, в котором произ­
водится поиск простых чисел, будет выполняться, пока текущее число из пере­
менной i не выходит за верхнюю границу (max), и количество обработанных чи­
сел не превышает 1000. Во-вторых, по окончании обработки всех чисел из диа­
пазона (если значение переменной i, которая в тот момент будет хранить
последнее из обработанных чисел, выходит за верхнюю границу диапазона max)
мы удаляем таймер вызовом метода clearlnterval и делаем доступной кнопку
Вычислить, тем самым приведя приложение в изначальное состояние.
4. Наконец, напишем обработчик события submit, запускающий процесс вычис­
ления:
form. addEventListener(*submit', (evt) => {
min = parseint(form.elements[0].value);
max = parselnt(form.elements[1].value);
i = min;
form.elements[3].innerHTML = 1';
form.elements[2].disabled = true;
int = window.setlnterval(computeSimpleValues, 100);
evt.preventDefault() ;
}) ;

He забываем занести начальную границу диапазона в переменную i.

Откроем страницу 12.1.2.html в веб-обозревателе и проверим, работает ли она.

12.2. Однократный таймер

I Однократный таймер — т а й м е р , с р а б а т ы в а ю щ и й о д н о к р а т н о и а в т о м а т и -
I ч еск и удал яю щ и й ся п осл е этого.
Однократный таймер создается ВЫЗОВОМ метода setTimeout класса Window, пол­
ностью аналогичного методу setlnterval (см.разд. 12.1):
202 Часть III. HTML API и компонентное программирование

setTimeout {<функция>, <промежуток времениУ^

[, <параметры, передаваемые функцииУ] )

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

clearTimeout класса Window!
clearTimeout(<идентификатор таймераУ)

12.3. Упражнение. Применяем фоновые потоки

Несмотря на все ухищрения, приложение, написанное в разд. 12.1, все равно вре­
менами «притормаживает». Перепишем его, вынеся процесс вычисления в фоновый
поток, что повысит отзывчивость приложения.
Поток — единица исполнения программного кода, выделяемая операцион­
ной системой. Пока поток занят выполнением одного сценария, другой сце­
нарий он исполнить не сможет.
Основной поток — поток, в котором выполняется код обычных веб-сце-
I нариев.
Фоновый поток — поток, работающий параллельно с основным. Часто
применяется для выполнения длительных вычислений, что позволяет сде­
лать приложение отзывчивее для пользователей.
Чтобы запустить программный код в фоновом потоке, необходимо:
♦ вынести этот код в отдельный файл сценария;
♦ в основном коде создать объект класса worker, применив оператор new:
new Worker (<ссылка на файл сценария с кодом , Ъ
выносимым в отдельный ПОТОКУ)

Объект фонового потока необходимо сохранить в какой-либо переменной.

Фрагменты кода, выполняемые в разных потоках, совершенно изолированы
друг от друга. Ни один поток не имеет доступ к переменным и функциям,
объявленным в других потоках.
1. В папке 12\!sources сопровождающего книгу электронного архива (см. приложе­
ние 3) найдем файл 12.1.1.html и пересохраним его где-либо на локальном диске
под именем 12.3.html.
2. Откроем файл 12.3.html в текстовом редакторе и добавим в конце HTML-кода тег
<script> с первыми выражениями основного сценария:
<script type="text/javascript">
const form = document.forms[0];
let worker;
</script>

В переменной worker мы позднее сохраним объект фонового потока.

Урок 12. Таймеры и фоновые потоки 203

3. Начнем писать код обработчика события submit формы:

form.addEventListener('submit', (evt) => {
form.elements[3].innerHTML = 1';
form.elements[2].disabled = true;
});
4. Теперь нужно создать фоновый поток. Условимся, что выполняющийся в нем
код мы сохраним в файле 12.3.js.
В обработчик события submit добавим выражение, создающее поток:
form.addEventListener('submit', (evt) => {

form.elements[2].disabled = true;
worker = new Worker('12.3.js');
});
5. Поскольку все потоки независимы друг от друга, сценарий из фонового потока
не сможет получить доступ к списку, чтобы добавить в него найденное простое
число. Для пересылки чисел из фонового потока в основной мы применим меж­
поточные сообщения.
Межпоточное сообщение — сигнал, пересылаемый из одного потока дру­
гому и содержащий в себе одно произвольное значение. Применяется для
обмена данными между потоками и пересылки управляющих команд.
Чтобы получить в основном потоке сообщение, отправленное фоновым пото­
ком, достаточно обработать событие message, возникающее в объекте фонового
потока.
Для ЭТОГО добавим выражение, привязывающее К событию message потока worker
функцию-обработчик processResuit (будет написана позже):
form.addEventListener(1submit1, (evt) => {

worker = new Worker('12.3.js 1);

worker.addEventListener <'message1, processResult) ;
}) ;
6. Код из фонового потока требует вводные данные: начальное и конечное значе­
ния диапазона. Создадим служебный объект класса o b j e c t со свойствами min
И max, сохраним в них эти данные и перешлем объект фоновому потоку в меж­
поточном сообщении.
Пересылка межпоточного сообщения от основного потока фоновому вы­
полняется вызовом у объекта фонового потока метода postMessage в формате:
postMessage {< зн ачен ие, пересылаемое в сообщении>).

Добавим код, пересылающий вводные данные в фоновый поток:

form.addEventListener('submit*, (evt) => {
204 Часть III. HTML API и компонентное программирование

worker.addEventListener('message*, processResult);
const data = {};
data.min = parselnt(form.elements[0] .value) ;
data.max = parselnt(form.elements[1] .value) ;
worker.postMessage (data) ;
evt.proventDefault();
}) ;
7. Нам также нужно реагировать на сообщения от фонового потока и на хранящие­
ся в них значения. Условимся, что строка 'stop1 станет командой на завершение
фонового потока, а любое другое значение будет выведено в списке найденных
простых чисел.
Для завершения фонового потока у его объекта следует вызвать не прини­
| мающий параметров метод terminate.
Перед обработчиком события submit запишем код объявления функции
processResult, которая выполнит все это:
function processResult(evt) {
if (evt.data == 'stop') {
form.elements[2].disabled = false;
worker.terminate();
} else {
const el = document.createElement('option');
el.textContent = evt.data;
form.elements[3].add(el);
}
}
8. Для получения сообщений от основного потока в фоновом потоке обработчик
события message следует привязать к объекту фонового потока, а для отправки
сообщения ИЗ фонового потока основному — вызвать метод postMessage также
у объекта фонового потока. Упомянутый ранее объект можно получить из пере­
менной this, автоматически создаваемой в фоновом потоке.
Создадим в той же папке файл 12.3.js, в котором сохраним код фонового потока:
this.addEventListener('message', (evt) => {
let flag, sqr;
for (let i = evt.data.min; i <= evt.data.max; ++i)
{
if (i % 2 != 0) {
flag = true;
sqr = Math.floor(Math.sqrt(i));
for (let j = 3 ; j <= sqr; j += 2)
if (i % j == 0) {
flag = false;
break;
}
Урок 12. Таймеры и фоновые потоки 205

if (flag)
this.postMessage(i);
}
}
this.postMessage('stop');
}) ;
Как только очередное простое число найдено, отправляем его в сообщении
основному потоку для вывода в списке. По завершении вычислений не забываем
отправить сообщение со строкой 'stop* — командой на завершение фонового
потока.

В ним ание!
В веб-обозревателе Google Chrome фоновые потоки могут запускаться лишь на стра­
ницах, загруженных с веб-сервера. Попытка запустить фоновый поток на странице, за­
груженной с локального диска, вызовет ошибку.

Откроем в любом веб-обозревателе, за исключением Chrome, страницу 12.3.html

(автор тестировал ее в Mozilla Firefox) и проверим ее в работе.

12.4. Самостоятельные упражнения

♦ На страницу 12.1.2.html добавьте кнопку Стоп, при нажатии на которую вычис­
ления будут прерываться. Сделайте так, чтобы в случае, если вычисления еще не
запущены, эта кнопка была бы недоступна.
♦ Сделайте аналогичную кнопку на странице 12.3.html.
 Урок 13
Работа с файлами,
хранение данных и перетаскивание
Получение сведений о выбранных файлах
Чтение и вывод файлов
Хранение данных в локальном хранилище
Перетаскивание

13.1. Работа с локальными файлами

Веб-обозреватель позволяет работать только с теми локальными файлами,
которые были выбраны пользователем. Считывать произвольные файлы
с локального диска он не может.
Выбор файлов для обработки в веб-сценарии или отправки серверу выполняется
в поле выбора файлов. Оно формируется одинарным тегом <input>, в котором
записывается атрибут type со значением file:
<input type="file" id="file" multiple>

Класс такого поля поддерживает свойство files. Оно хранит объект класса
FiieList, который является коллекцией выбранных в поле файлов (если в теге
<input> отсутствует атрибут без значения multiple, коллекция будет содержать
лишь один файл). Каждый из элементов коллекции — это объект класса File, пред­
ставляющий отдельный выбранный файл.

13.1.1. Чтение сведений о файлах

В свойствах класса File (табл. 13.1) хранятся имя, тип, размер и дата последнего
изменения файла.
Таблица 13.1. С войства класса F i le

Свойство Описание

паше Имя файла без пути к нему

type МІМЕ-тип
size Размер в байтах в виде числа
lastModifiedDate Временная отметка последнего изменения файла в виде объекта класса
Date
208 Часть III. HTML API и компонентное программирование

Вот пример считывания сведений о выбранных файлах:

<p><input type="file" id="file" multiple></p>
<div id=" output "x/div>

const file = document.getElementByld(1file*);

const output = document.getElementByld('output1);
file.addEventListener('change', 0 => {
let s = ", f;
for (let i = 0; i < file.files.length; ++i) {
f = file.files[i];
s += '<h2>' + f.name + '</h2>';
s += '<р>Размер: ' + f.size + ' байтов</р>';
s += '<р>Тип: ' + f.type + '</p>';
s += '<р>Последнее изменение: ' +
f.lastModifiedDate.toLocaleString() + '</p>';
}
output.innerHTML = s;
});

13.1.2. Считывание текстовых файлов.

Класс F ile R ea d er
Класс FileReader позволяет прочитать содержимое текстового файла, выбранного
пользователем. Для этого необходимо:
♦ воспользовавшись оператором new, создать объект класса FileReader без указа­
ния параметров создаваемого объекта;
♦ привязать к созданному ранее объекту обработчик события load, который вы­
полнится после загрузки файла и прочитает его содержимое;
♦ в теле обработчика извлечь прочитанное содержимое текстового файла из свой­
ства result текущего объекта класса FileReader;
♦ вне обработчика запустить операцию считывания файла, вызвав у объекта клас­
са FileReader метод readAsText:
readAsText(<считываемый файл> [, < кодировка>])

Считываемый файл указывается В виде объекта класса File. Кодировка задается

в виде строки. Если она не указана, используется UTF-8.
Вот пример считывания выбранного пользователем текстового файла и вывода его
содержимого на экран:
<pxinput type="file" id="file" accept=".txt"x/p>
<div id="output "x/div>

const file = document.getElementByld('file');

const output = document.getElementByld('output');
const fr = new FileReader();
Урок 13. Работа с файлами , хранение данных и перетаскивание 209

fr.addEventListener('load', (evt) => {

output.textContent = evt.target.result;
});
file.addEventListener(’change', () => {
fr.readAsText(file.files[0 ]);
// Чтобы считать файл в кодировке Windows-1251,
// следует использовать выражение:
// fг.readAsText(file.files[0], ?windows-1251');
});
Класс FileReader поддерживает ряд событий (табл. 13.2). Все события, за исключе­
нием progress, Представляются КЛаССОМ Event. Свойства события progress пред­
ставлены в табл. 13.3.

Таблица 13.2. С обы тия класса F ile R e a d e r

Имя события Когда возникает?

loadstart Запуск считывания содержимого файла

progress Периодически при считывании очередного фрагмента содержимого
loadend Завершение считывания, неважно, успешном или нет
load Успешное завершение считывания
error Возникновение ошибки в процессе считывания
abort Принудительное прерывание считывания

Таблица 13.3. С войства собы тия p r o g r e s s

Свойство Хранимое значение

Класс P ro g re s s E v e n t
Представляет событие progress

lengthComputable true, если возможно вычислить размер выбранного файла, и false

в противном случае
loaded Размер загруженной части файла в байтах
total Размер всего файла в байтах

Имеются также еще три свойства, доступные только для чтения:

♦ result— содержимое прочитанного файла. Действительно только в случае
успешного считывания;
♦ readyState--СОСТОЯНИе объекта В ВИДе ОДНОГО ИЗ ЧИСвЛ!

• о — считывание еще не запущено;

• 1 — считывание идет;
• 2— содержимое файла полностью загружено;
210 Часть III. HTML API и компонентное программирование

♦ error — объект исключения, сгенерированного в случае возникновения ошибки

при считывании файла.

13.1.3. Вывод индикатора процесса

при считывании файла
Для вывода индикатора, показывающего процесс считывания файла, используется
объект события progress, ОТНОСЯЩИЙСЯ К классу ProgressEvent:
<р>Загружено <span id="prg"x/span></p>

const prg = document.getElementById('prg');

const fr = new FileReader();

fr.addEventListener('progress', (evt) => {

if (evt.lengthComputable)
prg.textContent = evt.loaded / evt.total * 100 + '%';

13.1.4. Считывание графических файлов

Для считывания графических файлов с целью вывода применяется тот же подход
и тот же класс FileReader. Есть лишь два различия:
♦ загрузка запускается вызовом метода readAsDataURL:
readAsDataURL{<загружаемый файл>)

♦ в свойстве result объекта, выполняющего загрузку файла, окажется Data URL

с содержимым этого файла.
Data URL — интернет-адрес, представляющий собой закодированное со­
держимое какого-либо файла. Может быть использован так же, как и обыч­
ный интернет-адрес (в атрибуте src тега <img> и др.).

13.2. Упражнение.
Реализуем предварительный просмотр
выбранного графического файла
Часто в веб-формах для выгрузки графического файла на сервер делают панель
предварительного просмотра. Давайте и мы сделаем нечто подобное.
1. В папке 15\!sources сопровождающего книгу электронного архива (см. приложе­
ние 3) найдем страницу 13.2.html и скопируем ее куда-либо на локальный диск.
Эта страница содержит поле выбора файла file, расположенный под ней блок
preview, в котором будет выводиться выбранное изображение, и оформляющую
все это внутреннюю таблицу стилей.
Урок 13. Работа с файлами, хранение данных и перетаскивание 211

2. Откроем копию страницы 13.2.html в текстовом редакторе и вставим под HTML-

кодом тег < s c r i p t > с первыми выражениями сценария, которые получат доступ
к полю выбора файла, блоку и создадут объект класса FileReader:
<script t y p e = Mt e x t / j a v a s c r i p t " >
const file = d o c u m e n t .g e t E l e m e n t B y I d (’f i l e ');
const p r e v i e w = d o c u m e n t .g e t E l e m e n t B y l d (' pre v i e w ' );
const fr = n e w F i l e R e a d e r ();
</script>

3. Добавим обработчик события load только что созданного объекта, который вы­
ведет загруженный файл в блоке preview:
fr.addEventListener(’load', (evt) => {
preview.style.backgroundlmage = 'url(f + evt.target.result + *) f;
}) ;
Мы выведем загруженное изображение в виде графического фона, поскольку
такой фон проще разместить по центру блока.
4. Добавим обработчик события change поля выбора файла file, который запустит
загрузку выбранного файла:
file.addEventListener('change1, () => {
fr.readAsDataURL(file.files [0] );
}) ;
Откроем страницу 13.2.html в веб-обозревателе, выберем в поле какой-либо графи­
ческий файл и посмотрим на его содержимое, выведенное в блоке (рис. 13.1).

Рис. 13.1. Вывод на экран изображения из выбранного графического файла

212 Часть III. HTML API и компонентное программирование

13.3. Хранение данных на стороне клиента

В хранилище веб-обозревателя можно временно сохранить любые данные (напри­
мер, сведения, занесенные пользователем в форму).
I Хранилище — область памяти, предназначенная для временного сохранения
|| произвольных данных на стороне клиента.
Для всех веб-страниц, загруженных с одного хоста, выделяется отдельное незави­
симое хранилище с неограниченным объемом.
Доступ к хранилищу можно получить через два свойства класса window:
♦ сессионное хранилище, хранит данные, пока открыто текущее
sessionstorage —
окно веб-обозревателя, а при его закрытии очищается. Подходит для временного
сохранения данных на случай внезапной перезагрузки страницы и для передачи
данных между страницами;
♦ — постоянное хранилище, хранит данные сколь угодно долго (пока
locaistorage
те не будут явно удалены). Применяется для записи пользовательских настроек,
сведений, предназначенных для позднейшей отправки на сервер, и т. п.
Оба хранилища представляются объектами класса storage и, соответственно, име­
ют сходную функциональность.
Работа с хранилищами выполняется вызовами четырех методов класса storage:
♦ setltem (Симя значенияУ, <само значение>) — записывает В хранилище значение
под указанным именем. Если значение с таким именем уже имеется в хранилище,
обновляет его;
♦ get item (<имя значения>) — возвращает сохраненное ранее значение с указанным
именем или null, если его в хранилище нет;
♦ removeitem(<имя значения>) — удаляет из хранилища значение с указанным
именем',

♦ clear () — очищает хранилище.

| Все значения в хранилище хранятся в виде строк.
Пример:
// Считываем из хранилища значение с именем зоп^а1ие
let someValue = 1оса13^гаде.getItem ('someValue *) ;
if (someValue)
// Если оно существует, преобразуем его в ч и с л о в о й т и п
someValue = р а г э е ! ^ (зо п ^ а 1 и е ) ;
else
// Е с л и такого значения в хранилище нет, задаем ему
// величину по умолчанию
з о 1 г^ а 1 и е = 10 ;
Урок 13. Работа с файлами, хранение данных и перетаскивание 213

// Сохраняем значение someValue

localStorage.setltem(’someValue', someValue);

13.4. Перетаскивание
Перетаскивание (иначе drag’n'drop) — технология, позволяющая перено­
сить данные из одного элемента страницы {источника) в другой {приемник)
простым перетаскиванием мышью.
Реализация перетаскивания на странице включает несколько этапов, которые мы
рассмотрим в порядке их выполнения.

13.4.1. Превращение элемента-источника

в перетаскиваемый
Можно перетаскивать элемент страницы мышью или нет, зависит от значения
атрибута draggable, поддерживаемого всеми тегами:
♦ "auto" — можно перетаскивать только изображения (<img>) и гиперссылки (<а>).
Это поведение по умолчанию;
♦ "true" — перетаскивать можно;
♦ "false" — перетаскивать нельзя.
Пример:
<р draggable="true">TauiHTe меня семеро!</р>

13.4.2. Задание перемещаемых данных в источнике

Целью перетаскивания является перенос данных из источника в приемник. Перено­
симые данные задаются в источнике в обработчике любого из следующих событий:
♦ dragstart — возникает, когда пользователь начинает операцию перетаскивания;
♦ drag — возникает, когда операция перетаскивания реально начинается.
Эти события всплывающие, имеют обработчик по умолчанию, запускающий опе­
рацию перетаскивания (если обработчик отменить, она не начнется).
Оба события представляются классом DragEvent. Он поддерживает свойство
dataTransfer С объектом класса DataTransfer, Хранящим переносимые данные.
Один такой объект может содержать целый набор переносимых значений, относя­
щихся к разным типам (например, строку обычного текста, фрагмент HTML-кода и
интернет-адрес).
Для занесения нового значения в набор переносимых данных применяется метод
setData класса DataTransfer:
sеtDatа (<т и п значения>, < само значениё> )

Оба параметра указываются в виде строк, тип значения можно задать произволь­
ный, но обычно используют MIME-тип.
214 Часть III. HTML API и компонентное программирование

Метод clearData того же класса удаляет из набора ненужное значение:

clearData( [<тип значвния> ] )

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

Пример:
<р id="dragsource" draggable="true">TaiiiHTe меня семеро !</р>

const dragsource = document.getElementByld('dragsource');

dragsource.addEventListener('dragstart*, (evt) => {
evt.dataTransfer.setData('text/plain',
'Важные данные. Тащите аккуратнее.');
evt.dataTransfer.setData('text/html',
’Важные данные. <еш>Тащите аккуратнее.</em>');
});

13.4.3. Указание допустимых операций

В процессе перетаскивания пользователь может выбрать одну из трех операций:
♦ перемещение данных — при простом перетаскивании;
♦ копирование данных — при удержании клавиши <Ctrl>;
♦ создание ссылки на данные — при удержании клавиши <Alt> (реализуется край­
не редко).
Разработчик сценария может ограничить набор допустимых операций, задав его
в свойстве ef feeta h owed класса DataTransfer, поддерживающем значения:
♦ ' all ' — допустимы все три операции;
♦ undefined — то же, что и ' all ' (значение по умолчанию);
♦ 'move' — допускается только перенос данных;
♦ ' сору' — только копирование;
♦ ' link' — только создание ссылки;
♦ ' copyMove' — перенос и копирование;
♦ ' UnkMove 1— перенос и создание ссылки;
♦ ' copyLink' — копирование и создание ссылки;
♦ ' попе ' — не допускается ни одна операция.
Эти свойства указываются там же, где выполняется занесение данных, — в обра­
ботчике события dragstart ИЛИ drag источника:
dragsource.addEventListener('dragstart', (evt) => {

" // Разрешаем только перенос и копирование данных

evt.dataTransfer.effectAllowed = 'copyMove';
});
Урок 13. Работа с файлами , хранение данных и перетаскивание _______________________ 215

13.4.4. Подготовка элемента-приемника

Чтобы превратить элемент страницы в приемник для перетаскивания, достаточно:
♦ привязать обработчик к событию dragover, периодически возникающему в при­
емнике при перемещении курсора мыши над ним;
♦ в обработчике отменить обработку события по умолчанию (которая блокирует
перетаскивание) вызовом метода preventDefauit у объекта события.
Тогда при наведении на приемник курсор мыши изменит форму, обозначая вы­
бранную пользователем операцию: перемещение, копирование или создание ссылки.
Пример:
<div id=,,dragdest,,>Baлитe все ciofla!</div>

const dragdest = document.getElementByld('dragdest’);

dragdest.addEventListener('dragover1, (evt) => {
evt.preventDefauit();
}) ;
Если в процессе перетаскивания всегда выполняется какая-либо одна операция из
упомянутых, можно указать ее принудительно. Для этого применяется свойство
dropEffect класса DataTransfer, поддерживающее значения:

♦ ’move' — перемещение данных;

♦ ' сору1 — копирование;
♦ ' link' — создание ссылки;
♦ ' попе ’ — любые операции запрещены.
Пример:
dragdest.addEventListener('dragover', (evt) => {
// Всегда будет выполняться перенос данных
evt.dataTransfer.dropEffect = 'move';
evt.preventDefauit();
}) ;
В приемнике также возникают следующие события:
♦ dragenter — возникает при наведении курсора мыши на элемент (обработчик по
умолчанию, как и у события dragover, не дает завершить перетаскивание);
♦ dragleave— возникает при уводе курсора мыши с элемента (обработчик по
умолчанию отсутствует).
В обработчиках этих событий можно, например, визуально выделять элемент­
приемник с целью показать, что в него можно «положить» переносимые данные.
Все три рассмотренных здесь события: dragover, dragenter И dragleave — ВСПЛЫ­
вающие.
216 Часть III. HTML API и компонентное программирование

13.4.5. Завершение перетаскивания

Когда пользователь отпускает кнопку мыши над приемником, в последнем возни­
кает событие drop. Код, завершающий операцию переноса данных, записывается
в обработчике этого события.
Набор переносимых значений находится в объекте класса DataTransfer, хранящем­
ся В свойстве dataTransfer объекта События. Извлечь ИХ ПОМОЖвТ метод getData
класса DataTransfer!
getData(<тип и звл екаем ого значения>)

Он возвращает хранящееся в текущем наборе значение, относящееся к указанному

типу,, в виде строки. Если в наборе отсутствует значение такого типа, возвращается
пустая строка.
Событие drop всплывающее, имеет обработчик по умолчанию, который обрабаты­
вает операцию перетаскивания самостоятельно.

В ним ание!
Практически всегда обработчик события drop по умолчанию принимает переносимые
данные за интернет-адрес и пытается выполнить переход по нему. Поэтому обработку
события drop по умолчанию следует отменять.

Пример:
dragdest.addEventListener('drop', (evt) => {
let s = evt.dataTransfer.getData('text/plain');
if (evt.dataTransfer.dropEffeet == 'move')
// Выполняем перенос данных
else
// Копируем данные
evt.preventDefault();
}) ;
По завершении перетаскивания в элементе-источнике возникает событие dragend.
Оно всплывающее, не имеет обработчика по умолчанию и может применяться для
выдачи каком-либо оповещений о завершении переноса данных.

13.5. Упражнение.
Практикуемся в реализации перетаскивания
Напишем веб-приложение «Экзаменатор», предлагающее перенести из левого пе­
речня в правый все языки для разработки веб-страниц (но не серверных веб­
приложений!). Для этого мы применим знания, полученные в разд. 13.4.
1. В папке 13\!sources сопровождающего книгу электронного архива (см. приложе­
ние 3) найдем файл 13.5.html и скопируем его куда-либо на локальный диск. Этот
файл хранит страницу с заготовкой для написания веб-приложения (рис. 13.2).
Урок 13. Работа с файлами , хранение данных и перетаскивание 217

Экзаменатор
Перенесите и з левого списка в правый все языки, применяемые для
разработки веб-страниц.

Python
Assembler
HTML
XAML
TypeScript
CSS
Java
C++
JavaScript

| Готово!

Рис. 13.2. Заготовка для написания веб-приложения

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

также блоками. Левый перечень имеет якорь all, правый — selected, кнопка
Готово — done, а блок для вывода результатов — output.
2. Откроем копию страницы 13.5.html в текстовом редакторе и поместим под
HTML-кодом тег <script> с первыми выражениями сценария, которые получат
доступ к нужным элементам страницы:
<script type="text/javascript">
const all = document.getElementByld('all');
const selected = document.getElementByld(’selected');
</script>

3. Перенос данных инициируем В обработчике события dragstart, который привя­

жем к отдельным позициям перечня all. В обработчике занесем в набор пере­
носимых данных якорь перетаскиваемого элемента (который сформируем про­
граммно чуть позже) и разрешим только операцию перемещения.
Напишем обработчик события dragstart:
function dragstart(evt) {
evt.dataTransfer.setData('text/id', this.id);
evt.dataTransfer.effectAllowed = 'move';
}
В вызове метода setData можно использовать существующий MIME-тип дан­
ных, а можно придумать свой, точнее описывающий передаваемые данные. Мы
так и поступили, придумав тип text/id, обозначающий якорь.
4. Добавим код, привязывающий обработчик события к позициям перечня all
и выполняющий другие необходимые действия:
218 Часть III. HTML API и компонентное программирование

for (let i = 0; i < all.children.length; ++i) {

all.children[i].addEventListener('dragstart’, dragStart);
all.children[i].draggable = 'true';
all.children[i].id = ’all’ + i;
}
В число этих действий входит разрешение перетаскивания позиций и указание
у НИХ якорей вида all<порядковы й ном еру.
5. Добавим код обработчика события dragover перечня selected, в котором разре­
шим перемещение данных:
function dragOver(evt) {
evt.dataTransfer.dropEffeet = 'move';
evt.preventDefault();
}
selected.addEventListener('dragover', dragOver);

6. Напишем обработчик события drop того же перечня, который извлечет передан­

ный ему якорь, найдет по нему перемещаемую позицию перечня и выполнит ее
перемещение В перечень selected:
function drop(evt) {
const s = evt.dataTransfer.getData('text/id');
if (s) {
const el = all.querySelector('#' + s);
selected.appendChiId(el);
evt.preventDefault();
}
}
selected.addEventListener('drop', drop);

Экзаменатор
П еренесите нз левого списка в правый все языки, применяемые для
разработки веб-страниц.

Python HTML
Assembler JavaScript
XAML CSS
Java Typescript
C++

і Готово! I
Рис. 13.3. Несколько позиций перетащены из левого перечня в правый
Урок 13. Работа с файлами, хранение данных и перетаскивание 219

Не забываем отменить обработчик события drop по умолчанию, иначе веб­

обозреватель отправит нас неизвестно куда.
Откроем страницу 13.5.html в веб-обозревателе и перетащим несколько позиций из
левого перечня в правый (рис. 13.3).

13.6. Перетаскивание файлов

в поле выбора файлов
Чтобы реализовать перетаскивание файлов из Проводника в поле выбора файлов,
следует:
1. В обработчике события dragover поля выбора файлов разрешить перетаскива­
ние, отменив обработку по умолчанию.
2. В обработчике события drop поля выбора файлов извлечь коллекцию получен­
ных файлов из свойства files объекта набора данных. Эта коллекция представ­
ляет собой объект класса FiieList, знакомый нам по разд. 13.1.
Пример:
<pxinput type="file" id=Mfile" multiple></p>

const file = document.getElementByld (' file1);

file.addEventListener(’dragover', (evt) => {
evt.preventDefault();
});
file.addEventListener(’dropf, (evt) => {
for (let i = 0; i < evt.dataTransfer.files.length; ++i) {
// Перебираем и обрабатываем полученные файлы
}
evt.preventDefault();
}) ;

13.7. Самостоятельные упражнения

♦ Напишите веб-приложение 137.html— просмотровщик выбранных пользовате­
лем файлов. Заготовку для него вы найдете в папке 13\!sources сопровождающего
книгу электронного архива (см. приложение 3).
Подсказки: ДЛЯ каждого файла создайте отдельный объект класса FileReader, по
окончании загрузки файла создайте для него отдельный блок (<div>), выведите
в нем изображение из файла в виде графического фона и добавьте блок в эле­
мент С якорем preview.
У вас должно получиться так, как показано на рис. 13.4.
♦ Реализуйте в приложении 137.html перетаскивание файлов из Проводника в поле
выбора файлов.
220 Часть III. HTML API и компонентное программирование

Рис. 13.4. Просмотровщик выбранных пользователем файлов

♦ В приложении-экзаменаторе 13.5.html реализуйте перетаскивание позиций в об­

ратном направлении — из правого списка в левый.
♦ Там же сделайте проверку правильности ответа по нажатию кнопки Готово!.
В случае верного ответа в элементе output должна выводиться зеленая надпись
«Правильно!», в случае неверного ответа — красная надпись «Неправильно!».
Подсказка : для вывода надписи нужным цветом воспользуйтесь стилевыми
классами right и wrong, уже имеющимися во внутренней таблице стилей.
 Урок 14
Программная графика
Холст HTML
Рисование фигур
Вывод текста
Градиентные и графические заливки
Преобразования
Композиция

14.1. Холст HTML

В состав HTML API входят инструменты для программного рисования на страни­
цах произвольной графики.
I Холст — встроенный элемент страницы, предназначенный для программ-
ll ного вывода графики.
Холст создается парным тегом <canvas> без содержимого. Поддерживаются два
необязательных атрибута:
♦ width — ширина холста в пикселах (по умолчанию — 300);
♦ height — высота холста в пикселах (по умолчанию — 150).
Пример:
<canvas id="draw" width="640" height="480"></canvas>

Холст представляется классом HTMLCanvasElement. Он поддерживает свойства width

И height, соответствующие ОДНОИМвННЫМ атрибутам тега <canvas>.

ИГрафический контекст — объект, представляющий «поверхность» холста

I и, собственно, рисующий графику.
Для получения графического контекста следует вызвать у объекта холста метод
getcontext, передав ему в качестве параметра строку '2d*. Метод вернет в качестве
результата объект класса canvasRenderingContext2D, представляющий графический
контекст:
const draw = document.getElementById(1draw');
const ctx = draw.getContext('2d1);

Рисование выполняется ВЫЗОВОМ методов класса CanvasRenderingContext2D, КОТОрые

будут рассматриваться далее.
222 Часть III. Н ТМ І АРІ и компонентное программирование

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

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

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

Прямоугольники нарисовать проще всего — достаточно вызвать один из трех
методов:
♦ з^океЯес^ (<х>, <у> , <ширина>, <высота>) — рисует прямоугольник С левым
верхним углом в точке с координатами [х, у] и с указанными шириной и высотой.
Рисуемый прямоугольник представляет собой один контур без заливки;
♦ Гл-ПИес* (<х>, <у>, <ширина>, <высота>) — ТО ж е Самое, ЧТО И э1:гокеКес1:, НО ВЫ­
В О Д И М Ы Й п р я м о у г о л ь н и к с о д е р ж и т только заливку без контура.
Пример (рис. 14.1, а):
с^х1. э1:гокеКес1 (10, 10, 170, 120);
сЬ х 1 .1П11Кес^ (20, 20, 50, 50);
с ^ х 1 .1Ш Я е с ^ (120, 70, 50, 50);

♦ с1еагЯес^ (<х>, <у>, <ширина>, <высота>) — О Ч И Щ а е т п р я м о у г о л ь н у ю область

с л е в ы м в е р х н и м у г л о м в точке с к о о р д и н а т а м и [х, у] и с у к а з а н н ы м и шириной
И высотой.
Пример (рис. 14.1, б):
^ х 2 . т 1 К е ^ (10, 10, 170, 120);
с^х 2 .с1еагИес^ (20, 20, 110, 50);

Рис. 14.1. а — выводимые прямоугольники содержат только заливку без контура;

б — прямоугольная область залита черным цветом методом ^ і ія е с і: ,
и в ней очищена прямоугольная область методом с іе а ги е с т

14.3. Указание
основных параметров графики
Основные параметры графики, включающие цвета линий, заливок и настройки
тени, действуют на любую графику, рисуемую на холсте.
Урок 14. Программная графика 223

14.3.1. Цвета линий и заливок

Для указания цвета рисуемой графики применяются свойства:
♦ strokestyle — цвет линий контура;
♦ fiiistyle —цвет заливок.
Значение цвета может быть указано в любом формате, поддерживаемым CSS. По
умолчанию и контуры, и заливки выводятся черным цветом.
Пример (рис. 14.2):
ctx3.fillRect(10, 10, 170, 120);
ctx3.strokeStyle = '#ffffff';
ctx3.strokeRect(20, 20, 150, 100);
ctx3.strokeRect(40, 40, 110, 60);
ctx3.fillStyle = 'lightgrey';
ctx3.fillRect(60, 60, 70, 20);

Рис. 14.2. Контуры и заливки выведены цветами

в соответствии с приведенным примером кода

14.3.2. Параметры тени

Параметры тени, которая автоматически создается у рисуемых фигур, указываются
посредством четырех свойств:
♦ shadowBlur— величина размытия в виде положительного числа с плавающей
точкой или о (по умолчанию — о);
♦ shadowCoior— цвет тени в любом формате, поддерживаемым CSS (по умолча­
нию — полностью прозрачный черный);
♦ shadowOf fsetx — горизонтальное смещение тени в виде числа с плавающей точ­
кой. Положительные значения вызывают смещение вправо, отрицательные —
влево. Значение по умолчанию — о;
♦ shadowOf fsetY — вертикальное смещение тени, задаваемое числом с плавающей
точкой. Положительные значения вызывают смещение вниз, отрицательные —
вверх. Значение по умолчанию — о.
Для вывода тени следует задать ненулевое значение, по крайней мере, у одного из
СВОЙСТВ: shadowBlur, shadowOffsetX ИЛИ shadowOffsetY.

Пример (рис. 14.3):

ctx2.strokeRect(10, 20, ЗО, 100);
ctx2.shadowCoior = 'black';
ctx2.shadowBlur = 5;
ctx2.strokeRect(65, 20, 30, 100);
ctx2.shadowOffsetx = 15;
ctx2.shadowOffsetY = -10;
ctx2.strokeRect(120, 20, 30, 100);
Рис. 14.3. Варианты задания теней
в соответствии с приведенным примером кода
224 Часть III. HTML API и компонентное программирование

14.4. Вывод текста

Для вывода текста класс графического контекста предлагает такие методы:
♦ strokeText (<текст>г <х>, < у> [, <максимальная ширина>] ) — ВЫВОДИТ указанный
текст на экран. Левый конец базовой линии текста располагается в точке с коор­
динатами [х, у]. Если указана максимальная ширина, а ширина ВЫВОДИМОГО текста
превышает ее, текст будет либо уменьшен в размерах (в случае незначительного
превышения), либо выведен меньшим кеглем. Выведенный текст представляет
собой один контур без заливки;
♦ fillText (<текст>, <х>, < у> [, <максимальная ширина>]) — ТО же самое, ЧТО И
strokeText, но выведенный текст содержит одну заливку без контура;
♦ measureText (<тексг>) -- ВОЗВращает объект класса TextMetrics, содержащий эк­
ранные размеры указанного текста. Класс TextMetrics поддерживает только
свойство width, в котором записана ширина текста в пикселах.
Параметры выводимого текста задаются в следующих свойствах графического кон­
текста:
♦ font— основные параметры текста (включая его гарнитуру, кегль, насыщен­
ность и начертание) в формате, поддерживаемом атрибутом стиля CSS font (по
умолчанию: 1Ю р х sans-serif’,т. е. шрифт без засечек кеглем 10 пикселов);
♦ textAiign— г о р и зо н т а л ь н о е в ы р а в н и в а н и е т ек ст а о т н о с и т е л ь н о т о ч к и , у к азан ­
н о й В в ы зов е м е т о д а strokeText ИЛИ fillText, В в и д е ОДНОЙ ИЗ С т р о к :

• left — по левому краю,

• center — по центру;
• right — по правому краю;
• start — по левому краю для языков с направлением письма слева направо,
по правому краю для языков с обратным направлением письма (значение по
умолчанию);
• end — по правому краю для языков с направлением письма слева направо, по
левому краю для языков с обратным направлением письма;
♦ textBaseiine — вертикальное выравнивание текста относительно базовой линии
в виде одной из строк (рис. 14.4):
• alphabetic — текст располагается на базовой линии (значение по умолчанию);
• top — под базовой линией;

Рис. 14.4. Варианты вертикального выравнивания текста относительно базовой линии

Урок 14. Программная графика 225

• middle — середина текста совпадает с базовой линией;

• bottom — над базовой линией.

14.5. Упражнение. Рисуем диаграмму

Нарисуем на странице столбчатую диаграмму популярности различных языков
программирования.
1. В папке 14\!sources сопровождающего книгу электронного архива (см. приложе­
ние 3) найдем файлы 14.5.html (с заготовкой страницы) и 14.5.js (с исходными
данными для построения диаграммы). Скопируем их куда-либо на локальный
диск.
2. Откроем копию файла 14.5.js в текстовом редакторе и посмотрим на его содер­
жимое:
languages = [
['JavaScript', 70],
['Java', 45],
[fPython1, 39],
t'C#», 34],
[»PHP», 31],
['C++', 25]
];
Исходные данные собраны В массив languages. Каждый его элемент содержит
сведения об одном языке и также является массивом из двух элементов: назва­
ния языка и уровня его популярности в процентах.
3. Откроем копию страницы 14-5.html в текстовом редакторе и найдем код, создаю­
щий холст:
<canvas id="draw" width="500" height="200"></canvas>

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

поместилась в нем.
4. В секцию заголовка страницы 14.5.html вставим тег <script> (выделен полужир­
ным шрифтом), привязывающий файл веб-сценария 14.5.js:
<head>

<script type="text/javascript" src="14.5.js"X/script>

</head>

5. После HTML-кода поместим тег < sc rip t> с выражениями, получающими доступ
к холсту и к его графическому контексту:
<script type="text/javascript">
const draw = document.getElementByld('draw1);
const ctx = draw.getContext(12d');
</script>
226 Часть III. HTML API и компонентное программирование

6. Чтобы вычислить ширину диаграммы, нужно знать ширину отдельного столб­

ца. Она будет равна ширине самого длинного названия языка программирова­
ния. Условимся, что для вывода названий применим шрифт sans-serif кеглем
20 пикселов.
Добавим в сценарий код, указывающий параметры шрифта и вычисляющий
ширину столбцов:
ctx.font = f20px sans-serif';
let iwidth = 0, a;
for (let i = 0; i < languages.length; ++i) {
a = ctx.measureText(languages[i][0]).width;
if (a > iwidth)
iwidth = a;
}
После выполнения этого кода искомая ширина столбцов окажется в перемен­
ной iwidth.
7. Ширина диаграммы равна сумме совокупной ширины столбцов и совокупной
ширине просветов между ними. Положим каждый такой просвет равным
5 пикселов.
Добавим выражение, устанавливающее ширину холста равной ширине диаграммы:
draw.width = iwidth * languages.length + 5 * (languages.length - 1);

I После изменения размеров холста все настройки графики будут сброшены,

I а уже нарисованные фигуры — удалены.

8. Добавим выражения, вновь задающие параметры шрифта:

ctx.font = '20рх sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';

9. Добавим выражение, вычисляющее высоту самого высокого столбца:

const iheight = draw.height - 25;

Она равна высоте холста за вычетом 25 пикселов — под вывод названия языка.
10. И напишем код, выводящий диаграмму:
let xi, yi;
for (let i = 0; i < languages.length; ++i) {
a = iheight * languages[i][1] / 100;
xi = i * (iwidth + 5) ;
yi = draw.height - a;
ctx.fillRect(xi, yi, iwidth, a);
ctx.fillText(languages[i][0], xi + iwidth / 2, yi, iwidth);
}
Урок 14. Программная графика 227

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

выведена, устанавливаем в середину столбца— поскольку ранее указали для
выводимого текста выравнивание по центру.
Откроем страницу 14.5.html в веб-обозревателе и посмотрим на нарисованную диа­
грамму (рис. 14.5).

Рис. 14.5. Столбчатая диаграмма популярности различных языков программирования построена

14.6. Рисование сложных фигур

Для рисования более сложных, нежели прямоугольники, фигур графический кон­
текст холста предлагает ряд следующих инструментов.

14.6.1. Начало и завершение рисования

Код, рисующий сложную фигуру, должен быть заключен в вызов двух методов,
первый из которых запустит процесс рисования, а второй завершит его и, собст­
венно, выведет фигуру на экран. Вот эти методы:
♦ beginPath ()
— запуск рисования;
♦ stroke о — завершение рисования с выводом только контуров нарисованных
фигур:
ctx.beginPath();
// Рисуем контуры без заливки
ctx.stroke();

♦ fill () — завершение рисования с выводом только заливок нарисованных фигур:

ctx.beginPath();
// Рисуем фигуры из одних заливок без контуров
ctx.fill();

14.6.2. Перемещение пера

Перо — воображаемый инструмент, рисующий сложные фигуры. Рисование
фигуры начнется в точке, где в текущий момент находится перо, а по за­
вершении перо окажется в конечной точке фигуры.
Перемещение пера в точку с координатами [х, у] выполняет метод moveTo:
moveTo(<x>, <у>)

Изначально перо установлено в точку [о, о] — в левый верхний угол холста.

228 Часть III. HTML API и компонентное программирование

Рисование прямых линий

Прямую линию из точки, где находится перо, в точку с координатами [х, у] прово­
дит метод Ппето:
ИпеТо(<х>, <у>)

После рисования перо остается в точке [х, у].

Пример (рис. 14.6, а): Пример (рис. 14.6, б):

ctxl.beginPath(); ctx2.beginPath();
ctxl.strokeStyle = 'blue'; ctx2.fillStyle = ’blue';
ctxl.moveTo(50, 0); ctx2.moveTo(50, 0);
ctxl.lineTo(100, 100); ctx2.lineTo(100, 100);
ctxl.lineTo(0, 100); ctx2.lineTo(0, 100);
ctxl.lineTo(50, 0); ctx2.lineTo(50, 0);
ctxl.stroke() ; ctx2.fill();

Рис. 14.6. Рисование прямых линий: а — с выводом только контура нарисованной фигуры;
6 — с выводом только заливки нарисованной фигуры

Замыкание контура
Чтобы замкнуть рисуемый контур, проведя прямую линию от текущего местопо­
ложения пера до точки, в которой началось рисование, следует вызвать не прини­
мающий параметров метод ciosePath.
Пример (см. рис. 14.6, а):
ctx3.beginPath();
ctx3.strokeStyle = 'blue';
ctx3.moveTo(50, 0);
ctx3.lineTo(100, 100);
ctx3.lineTo(0, 100);
ctx3.ciosePath();
ctx3.stroke() ;

При рисовании фигур из заливок методом fill контур будет замкнут автоматиче­
ски (см. рис. 14.6, б).
Урок 14. Программная графика 229

Указание параметров линий

Мы можем указать у линий сложных фигур различные параметры: толщину, форму
концов и пр.
Эти параметры могут быть заданы в любом месте кода, расположенного
между вызовами методов Ьедл-пРась и э^ о к е Ш п . Они будут действовать
на все линии рисуемой фигуры.
Для указания параметров применяются следующие свойства:
♦ linewidth — толщина линий в пикселах (значение по умолчанию — l):
ctxl.beginPath ();
ctxl.moveTo(0, 50);
ctxl.lineTo(80, 50);
ctxl.lineWidth = 5;
ctxl.stroke();

♦ lineCap — форма концов линий в виде строки:

• butt — плоский (по умолчанию);
• round — скругленный;
• square — квадратный.
Пример:
ctx2.beginPath();
ctx2.moveTo(0, 50);
ctx2.lineTo(80, 50);
ctx2.linewidth = 30;
ctx2.lineCap = fround';
ctx2.stroke();

♦ line Join — форма соединений линий в виде строки:

miter — заостренная (по умолчанию);

• round — скругленная;

• bevel — срезанная.
Помимо этого, можно указать стиль линий — будут ли они штриховыми или пунк­
тирными. Для этого применяется метод setLineDash графического контекста:
setLineDash {<массив с параметрами стиля линий>)

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

которые поочередно указывают длину то очередного штриха, то очередного сво­
бодного пространства между двумя штрихами.
230 Часть III. HTML API и компонентное программирование

Примеры:
ctx3.beginPath();
ctx3.setLineDash([б, 3]);
ctx3.moveTo(О, 50); ■■■■■■■■■■■
ctx3.lineTo(100, 50);
ctx3.stroke(); __________

ctx4.beginPath();
ctx4.setLineDash([10, 3, 5, 3]);
ctx4 .moveTo (0, 50); ■ ■■■■■■■■■
ctx4.lineTo(100, 50);
ctx4.stroke(); __________

Чтобы ВНОВЬ Проводить сплошные ЛИНИИ, следует вызвать метод setLineDash, пере­
дав ему пустой массив.
Не принимающий параметров метод getLineDash возвращает заданный ранее мас­
сив с параметрами стиля линий.

Рисование дуг
Для рисования дуг (частей окружностей) используются два метода:
♦ arc-- р и с у е т д у г у С ЦвНТрОМ В ТОЧКв С КООрДИНатаМИ [х, у], у к а з а н н ы м и р а д и у­
сом,
,начальным И конечным углам и:
агс(<х>, <у>, <радиус>, <начальный у го л > , <конечный у г о л > [,
<против часовой ст релки?>])

Оба у гл а задаются в радианах и отсчитываются от горизонтальной оси. Если по­

следним параметром передать значение true, дуга будет рисоваться против ча­
совой стрелки, если задать false или вообще не указывать последний пара­
метр — по часовой стрелке.
Примеры:
ctxl.beginPath();
ctxl.arc(50, 50, 45, 0, Math.PI / 2);
ctxl.stroke(); J
ctx2.beginPath();
ctx2.arc(50, 50, 45, 0, Math.PI / 2, true);
ctx2.stroke();
ctx3.beginPath();
ctx3.arc(50, 50, 45, 0, Math.PI * 2);
ctx3.stroke();

♦ arcTo — рисует дугу с указанным ради усом между двумя касательными. Первая
касательная проводится между точкой, в которой находится перо, и точкой с ко­
ординатами [xi, yi], вторая — между точками с координатами [xi, y i ] и [х2, у2]
(рис. 14.7).
Урок 14. Программная графика 231

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

Формат:
arcTo(<xl>, <у1>, <х2>, <у2>, < ради ус> )

Пример:
ctx4.beginPath();
ctx4.moveTo(5, 95);
ctx4.lineTo(5, 50);
ctx4.arcTo(5, 5, 50, 5, 45);
ctx4.arcTo(95, 5, 95, 50, 45);
ctx4.lineTo(95, 95);
ctx4.stroke() ;

Рисование кривых Безье

Кривая Безье — кривая, описываемая начальной, конечной и одной {квад­
ратическая кривая Безье) или двумя ключевыми {кубическая кривая Безье)
точками.
Для рисования кривых Безье используются два метода:
♦ quadraticCurveTo — рисует квадратичную кривую Безье от точки, в которой на­
ходится перо, до точки [х, у]. Ключевая точка находится по координатам [сх, су]
(рис. 14.8).

Рис. 14.8. Рисование квадратичной кривой Безье

232 Часть III. HTML API и компонентное программирование

Формат:
quadraticCurveTo{<сх>, <су>, <х>, <у>)

Пример:
ctxl.beginPath();
ctxl.moveTo(50, 5)
ctxl.quadraticCurveTo(5, 5, 50, 95);
ctxl.quadraticCurveTo(95, 95, 50, 5);
ctxl.fill ();

♦ bezierCurveTo — рисует кубическую кривую Безье от точки, в которой находит­

ся перо, до точки [х, у]. Ключевые точки находятся по координатам [схі, су і]
И [сх2, су2 ] (рис. 14.9).

Точка

Формат:
bezierCurveTo(<cxl>, <cyl>, <cx2>, < cy2 >, <x>, <y>)

Пример:
ctx2.beginPath();
ctx2.moveTo(50, 30)
ctx2.bezierCurveTo(5, 5, 5, 80, 50, 80);
ctx2.moveTo(50, 30)
ctx2.bezierCurveTo(95, 5, 95, 80, 50, 80);
ctx2.fill();

Рисование прямоугольников
Чтобы нарисовать в составе сложной фигуры прямоугольник, нужно вызвать метод
rect:
rect(<x>, <у>, <ширина>, <высота>)

Левый верхний угол прямоугольника будет находиться в точке [х, у]. По окончании
рисования перо останется в той же точке.
Урок 14. Программная графика 233

Пример:
ctxl.beginPath();
ctxl.rect(30, 40, 60, 40);
ctxl.lineTo(30, 5);
ctxl.stroke();

14.7. Градиенты и графические закраски

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

14.7.1. Линейные градиенты

I Градиент — вид закраски, в котором один цвет постепенно переходит
|| в другой, потом в третий и т. д.
Линейный градиент — градиент, в котором переходящие друг в друга цвета
I располагаются на прямой линии (рис. 14.10).
|| Ключевая точка — точка градиента, в которой присутствует «чистый» цвет.

Начало градиента Конец градиента

Рис. 4.10. Линейный градиент

Для создания самого линейного градиента применяется метод createLinearGradient

графического контекста:
createLinearGradient(<х1>, <у!>, <х2>, <у2>)

Начало градиента будет находиться в точке [х1, у1], конец— в точке [х2, у2]. Эти
координаты указываются относительно холста.
Метод возвращает объект класса сапчаэОгасИепь, представляющий созданный гра­
диент.
Для добавления к градиенту ключевой точки у полученного объекта градиента
нужно вызвать метод addColorStop:
addCo1огБtо р (<относительное расст ояние>, <цвет>) *
234 Часть III. HTML API и компонентное программирование

Относительное расстояние указывается в виде числа с плавающей точкой от о.о (на­

чало градиента) до 1.0 (его конец), цвет — в любом формате, поддерживаемом
CSS.
Полученный градиент присваивается свойствам графического контекста:
♦ strokeStyle — для закраски контуров;
♦ fiiistyle — для закраски заливок.
Примеры:
const grdl = ctxl.createLinearGradient(0, 0, 100, 0);
grdl.addColorStop(0, 'white');
grdl.addColorStop(0.5, 'black1);
grdl.addColorStop(1, 'lightgrey');
ctxl.beginPath();
ctxl.rect(0, 0, 100, 100);
ctxl.fillStyle = grdl;
ctxl.fill();

const grd2 = ctx2.createLinearGradient(0, 0, 0, 100);

grd2.addColorStop(0, 'white');
grd2.addColorStop(0.5, 'black');
grd2.addColorStop(1, 'lightgrey');
ctx2.beginPath();
ctx2.rect(0, 0, 100, 100);
ctx2.fillStyle = grd2;
ctx2.fill();

const grd3 = ctx3.createLinearGradient(0, 0, 100, 100);

grd3.addColorStop(0, 'white');
grd3.addColorStop(0.5, 'black');
grd3.addColorStop(1, 'lightgrey');
ctx3.beginPath();
ctx3.rect(0, 0, 100, 100);
ctx3.fillStyle = grd3;
ctx3.fill();

Сразу после своего создания градиент фиксируется на холсте, а отдельные части

градиента проявляются на рисуемых с его применением фигурах. Это также отно­
сится к радиальному градиенту и графической закраске, рассматриваемым далее.
Пример:
const grd4 = ctx4.createLinearGradient(0, 0, 100, 0);
grd4.addColorStop(0, 'white');
grd4.addColorStop(0.5, 'black');
grd4.addColorStop(1, 'lightgrey');
ctx4.beginPath(); JT
Урок 14. Программная графика 235

ctx4.rect(0, 0, 30, 100);

ctx4.rect(33, О, 30, 100);
ctx4.rect(67, О, ЗО, 100);
ctx4.fillStyle = grd4;
ctx4.fill();

14.7.2. Радиальные градиенты

Радиальный градиент — градиент, в котором переходящие друг в друга
цвета располагаются на концентрических окружностях (рис. 14.11). Начало
такого градиента находится на начальной окружности, конец — на конеч­
ной.

Начальная
окружность

Конечная^
окружность

Рис. 14.11. Радиальный градиент

Для создания радиального градиента применяется метод createRadialGradient гра­

фического контекста:
createRadialGradient(<xl>, < y l> , <R1>, <х2>, <у2>, <R2>)

[xi, y i ] — координаты центра начальной окружности градиента, r i — ее радиус.

[х2, у2 \ и R2 — координаты центра и радиус его конечной окружности.
Возвращаемый результат— объект класса CanvasGradient, представляющий соз­
данный градиент. Добавить ключевые точки можно вызовами метода addcoiorstop.
Примеры:
const grd5 = ctx5.createRadialGradient(50, 50, 10, 50, 50, 50);
grd5.addColorStop(0, 4white1);
grd5.addColorStop(0.5, 'black');
grd5.addColorStop(1, flightgrey');
ctx5.beginPath();
ctx5.rect(0, 0, 100, 100);
ctx5.fillStyle = grd5;
ctx5.fill ();
236 Часть III. HTML API и компонентное программирование

const grd6 = ctx6.createRadialGradient(0, 0, 20, 0, 0, 200);

grd6.addColorStop(0, ’white’);
grd6.addColorStop(0.5, 'black1);
grd6.addColorStop(1, 'lightgrey1);
ctx6.beginPath();
ctx6.rect(0, 0, 100, 100);
ctx6.fillStyle = grd6;

14.7.3. Графическая закраска

Графическая закраска — заполняет линии контура или заливки графиче­
I ским изображением, повторяющимся или неповторяющимся.

Графическую закраску создает метод createPattern графического контекста:

createPattern {<изображение>, <режим повторения>)

В качестве изображения могут быть указаны собственно изображение (тег <img>),

видеоролик (тег <video>) или другой холст. Режим повторения задается в виде одной
из строк:
♦ repeat — повторять и по горизонтали, и по вертикали;
♦ repeat-x — повторять только по горизонтали;
♦ repeat-y — повторять только по вертикали;
♦ no-repeat — вообще не повторять.

Прим ечание
Веб-обозреватель Mozilla Firefox при указании как значения repeat-x, так и значения
repeat-y повторяет графическую заливку и по горизонтали, и по вертикали (как если
бы было указано значение repeat).

Метод createPattern вернет В качестве результата объект класса CanvasPattern,

представляющий созданную графическую закраску. Ее следует присвоить свойству
strokeStyle ИЛИ fillStyle.

Примеры:
<img src="img.png" id="img">

const img = document.getElementByld('img *);

const ptn7 = ctx7.createPattern(img, ’repeat1);
ctx7.beginPath();
ctx7.rect(0, 0, 100, 100);
ctx7.fillStyle = ptn7;
ctx7.fill();
Урок 14. Программная графика 237

const ptn8 = ctx8.createPattern(img, ’no-repeat1);

ctx8.beginPath();
ctx8.rect(0, 0, 100, 100);
ctx8.fillStyle = ptn8;
ctx8.fill ();

С о зд а в а т ь г р а ф и ч е с к у ю за к р а с к у м о ж н о л и ш ь п о с л е т о г о , как за к о н ч и т с я з а г р у зк а
ф а й л а с и з о б р а ж е н и е м , и с п о л ь з у е м ы м в к а ч е с т в е за к р а с к и . Д о б и т ь с я э т о г о м о ж н о ,
п о м е с т и в с о з д а ю щ и й за к р а с к у к о д в о б р а б о т ч и к с о б ы т и я load о к н а (и л и т е г а <img>
с н у ж н ы м и з о б р а ж е н и е м ):

<img src="img.png" id="img">

const img = document.getElementByld('img’);

window.addEventListener('load’, () => {
const ptn7 = ctx7.createPattern(img, ’repeat');
ctx7.beginPath();
ctx7.rect(0, 0, 100, 100);
ctx7.fillStyle = ptn7;
ctx7.fill ();

14.8. Преобразования
П р е о б р а зо в а н и е — м а н и п у л я ц и я н а д с и с т е м о й к о о р д и н а т х о л с т а : с м е щ е н и е
ее начала, и зм ен ен и е м асш таба или п ов о р от.

П р еобр азов ан и я за д а ю т с л е д у ю щ и е м ет о д ы гр а ф и ч еск о го к он тек ста:

♦ t r a n s l a t e (<dx>, <dy>) — с м е щ а е т н а ч а л о с и с т е м ы к о о р д и н а т н а в е л и ч и н у dx п о
г о р и зо н т а л и и н а в е л и ч и н у d y п о в е р т и к а л и . П о л о ж и т е л ь н ы е в е л и ч и н ы в ы зы в а ­
ю т с м е щ е н и е в п р а в о и в н и з, о т р и ц а т е л ь н ы е — в л е в о и в в е р х .

П р и м ер :

c t x l . s t r o k e R e c t (0 , 0, 40, 40);
c t x l . t r a n s l a t e (50, 30)
c t x l . f i l l R e c t (0, 0, 40, 40);

♦ s c a i e {<sh>, <sv>) — и зм ен я ет м асш таб си стем ы координат до зн а ч е н и я sh

п о г о р и з о н т а л и и д о зн а ч е н и я s v п о в е р т и к а л и . В е л и ч и н ы м а с ш т а б а з а д а ю т с я
в ви де ч и сл а с п л аваю щ ей точк ой : зн ач ен и я м ен ь ш е 1 у м ен ь ш а ю т м асш таб,
а бол ьш е 1 — увели ч и ваю т.

П р и м ер :

c t x 2 . s t r o k e R e c t (0, 0, 100, 50);

c t x 2 . s c a l e (0 .7, 1.5)
c t x 2 . f i l l R e c t (0, 0, 100, 50);
238 Часть III. HTML API и компонентное программирование

♦ rotate {<угол>) — ПОВОраЧИВаеТ С и с т е м у КООрДИНат На у к а з а н н ы й уго л . Угол

за д а е т с я в р а д и а н а х , п о л о ж и т е л ь н ы е зн а ч ен и я в ы зы в аю т п о в о р о т п о ч асовой
стр ел к е, отри ц ател ьн ы е — против.

Пример:
ctx3.strokeRect(20, 0, 80, 20);
ctx3.rotate(Math.PI / 4)
ctx3.fillRect(20, 0, 80, 20);

14.9. Вывод сторонних изображений

Для вывода сторонних изображений Применяется метод drawlmage графического
контекста. Он может быть вызван в трех форматах:
♦ drawlmage (<изображение> , <х>, <у>) — ВЫВОДИТ заданное изображение , распола­
гая его левый верхний угол в точке с координатами [х, у], без изменения его
размеров. В качестве изображения могут быть указаны собственно изображение
(тег <img>), видеоролик (тег <video>) ИЛИ Другой ХОЛСТ.
Пример:
<img src="img.png" id="imgM>

const img = document.getElementByld('img1);

ctxl.drawlmage(img, 10, 20);

♦ drawlmage {<изображение>, <x>, <y>, <w>, <h>) — TO же Самое, ТОЛЬКО выведен­

ное изображение будет ИМеТЬ Ширину w И ВЫСОТу h.
Пример:

ctx2.drawlmage(img, 10, 20, 90, 80);

♦ drawlmage {<изображение>, <fx>, <fy>, <fw>, <fh>, <x>, <y>, <w>, <h>) — вы­
резает из изображения фрагмент с левым верхним углом в точке с координатами
[fx, fy], шириной fw и высотой fh , после чего выводит его в точке [х, у] холста,
задав ему ширину w и высоту h.
Пример:

сtx3.drawlmage(img, 0, 10, ЗО, 27, 10, 20, 60, 54);

Урок 14. Программная графика 239

14.10. Управление композицией

Для управления композицией применяются два следующих свойства графического
контекста:
♦ giobaiAipha— задает уровень прозрачности рисуемой графики числом с пла­
вающей точкой от о.о (полная прозрачность) до 1.0 (полная непрозрачность,
значение по умолчанию).
Пример:
ctxl.fillStyle = ’black’;
ctxl.fillRect(0, 0, 70, 70);
ctxl.fillStyle = ’lightgrey’;
ctxl.globalAlpha = 0.5;
ctxl.fillRect(30, 30, 70, 70);

♦ giobaiCompositeOperation — указывает, как рисуемые фигуры накладываются на

уже нарисованные. Значение указывается в виде одной из строк:

• source-over— новая фигура рисуется поверх старой, выводятся

обе фигуры (по умолчанию);

• Боигсе-а^р — выводятся лишь старая фигура и та часть новой, что

накладывается на старую;

• source-in — выводится лишь та часть новой фигуры, что наклады­

вается на старую;

• source-out — выводится лишь та часть новой фигуры, что не на­

кладывается на старую;

• destination-over — новая фигура рисуется под старой, выводятся

обе фигуры;

• Ь ез^ п а^ оп -а^ р — выводятся лишь новая фигура и та часть ста­

рой, что накладывается на новую;

• destination-in — выводится лишь та часть старой фигуры, что на­

кладывается на новую;•

• destination-out — выводится лишь та часть старой фигуры, что не

накладывается на новую;
240 Часть III. HTML API и компонентное программирование

нии
• lighter— ТО же, ЧТО И source-over, ТОЛЬКО ЧаСТЬ НОВОЙ фигуры,
накладывающейся на старую, закрашивается цветом, полученным
в результате сложения цветов обеих фигур;

• сору — выводится только новая фигура, старая удаляется;

• хог — выводятся только части новой и старой фигур, не наклады­

вающиеся друг на друга.

Пример:
ctxl2.fillStyle = ’black’;
ctxl2.fillRect(0, 0, 70, 70);
ctxl2.fillStyle = ’lightgrey’;
ctxl2.globalCompositeOperation = 'xor*;
ctxl2.fillRect(30, 30, 70, 70);

14.11. Создание масок

М аска — область, делающая видимой лишь часть холста. За пределами
маски любая рисуемая графика остается невидимой.
Для создания маски нужно нарисовать контур сложной фигуры (как это сделать,
описывалось в разд . 14.6), только в конце вместо метода stroke вызвать не прини­
мающий параметров метод clip.
Пример:
ctxl.beginPath();
ctxl.rect(20, 0, 60, 100);
ctxl.clip();
ctxl.beginPath();
ctxl.arc(50, 50, 50, 0, 2 * Math.PI);
ctxl.fill ();

14.12. Сохранение и восстановление

состояния холста
Состояние холста включает в себя параметры рисуемой графики (цвета
линий и заливок, толщину линий, форму их концов и др.), преобразования
системы координат и все созданные на холсте маски.
Метод save сохраняет состояние холста, а метод restore восстанавливает. Оба
метода не принимают параметров:
// Сохраняем текущее состояние холста
ctx.save()
Урок 14. Программная графика 241

// Задаем параметры для рисования графики

// Рисуем графику
// Восстанавливаем состояние холста
ctx.restore();
/ / И тем самым возвращаемся к изначальным параметрам

Состояние холста можно сохранить неоднократно — последовательными вызовами

метода save. Тогда при первом вызове метода restore будет восстановлено послед­
нее сохраненное состояние холста, при втором — предпоследнее и т. д.

14.13. Упражнение. Рисуем цветок

Нарисуем, применяя полученные ранее навыки, вот такой цветок (рис. 14.12).1

Рис. 14.12. Задание к упражнению из разд. 14.13

1. В папке 14\!sources сопровождающего книгу электронного архива (см. приложе­

ние 3) найдем файл 14.13.html и скопируем его куда-либо на локальный диск.
В файле содержится заготовка для рисования цветка, включающая холст с яко­
рем draw и размерами 300x300 пикселов.
2. Откроем копию файла 14.13.html в текстовом редакторе и добавим в конец HTML-
кода тег <script> с первыми выражениями сценария:
<script type="text/javascript">
const colors = [fredf, *green*, 'blue', ’yellow*];
const draw = document.getElementByld('draw*);
const ctx = draw.getContext(*2d*);
</script>

Они объявят массив с наименованиями цветов, которыми будут закрашены

отдельные лепестки, получат доступ к холсту, а потом к его графическому кон­
тексту.
242 Часть III. HTML API и компонентное программирование

3. Добавим выражение, смещающее центр системы координат в центр холста,—

так удобнее рисовать:
ctx.translate(150, 150);

4. Напишем выражение, сохраняющее состояние холста:

ctx.save();

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

5. Напишем код, рисующий лепестки:
for (let i = 0; i < 4; ++i) {
ctx.beginPath();
ctx.fillStyle = colors[i];
ctx.moveTo(0, 0) ;
ctx.quadraticCurveTo(-50, -75, 0, -150);
ctx.quadraticCurveTo(50, -75, 0, 0);
ctx.fill ();
ctx.rotate(Math.PI /2);
}
Каждый лепесток закрашивается очередным цветом из массива colors, после
чего система координат поворачивается на 90°.
6. Осталось нарисовать центральный кружок, состоящий из двух половинок: чер­
ной и белой. Но сначала восстановим ранее сохраненное состояние и укажем
композицию, при которой новые фигуры рисуются под старыми (поскольку
кружок находится под лепестками).
Теперь напишем код, рисующий кружок:
ctx.restore ();
ctx.globalCompositeOperation = 'destination-over*;
ctx.beginPath();
ctx.arc(0, 0, 30, -Math.PI / 2, Math.PI / 2);
ctx.fill ();
ctx.beginPath();
ctx.arc(0, 0, 29, Math.PI /2, 1.5 * Math.PI);
ctx.stroke();

Откроем страницу 14.13.html в веб-обозревателе и полюбуемся на нарисованный

цветок.

14.14. Самостоятельные упражнения

♦ Создайте у диаграммы из разд. 14.5 (см. рис. 14.5) вертикальную шкалу, програ­
дуированную в процентах, с делениями каждые 10%.
♦ Закрасьте столбцы той же диаграммы линейным градиентом, в котором цвета
изменяются от светло-серого до черного в направлении снизу вверх.
У вас должно получиться так (рис. 14.13).
Урок 14. Программная графика 243

Рис. 14.13. Столбчатая диаграмма из разд. 14.5, дополненная вертикальной шкалой,

проградуированной в процентах, и закрашенная линейным градиентом
 Урок 15
Объявление своих классов
Конструкторы
Создание свойств и методов
Прототипы классов
Динамические свойства
Наследование
Расширение встроенных классов

15.1. Объявление нового класса

В ряде случаев удобно реализовать какую-либо часть функциональности — напри­
мер, сложный элемент страницы, — в виде своего собственного класса. Так мы
сведем все инструменты для управления этой частью функциональности воедино.

15.1.1. Конструктор.
Объявление свойств и методов в конструкторе
Для объявления нового класса достаточно написать для него функцию-кон­
структор.I
I Конструктор — функция, которая будет выполняться при создании каждо-
|| го нового объекта представляемого ей класса.
Конструктор может принимать произвольное количество параметров, но не должен
возвращать результат. Имя конструктора, представляющего вновь объявленный
класс, станет именем этого класса.
Конструктор объявляет у создаваемого объекта необходимые свойства и присваи­
вает им изначальные значения: фиксированные, рассчитанные в результате вычис­
лений или полученные с параметрами. Ссылка на создаваемый объект хранится
в переменной this, доступной в теле конструктора.
В качестве конструктора может быть задействована только именованная
или анонимная функция. Функцию-стрелку использовать нельзя, т. к. в ее
теле переменная this ссылается не на текущий объект, а на объект текущего
окна.
Свойства у создаваемого объекта объявляются простым присваиванием им значе­
ний (как и добавленные свойства, описанные в разд. 4.12).
246 Часть III. HTML API и компонентное программирование

Чтобы объявить метод, следует создать у объекта свойство и присвоить ему функ­
цию — именованную или анонимную (но, опять же, не функцию-стрелку!), которая
и реализует этот метод. В этой функции также будет доступна переменная this,
хранящая ссылку на текущий объект.
В качестве примера объявим класс user со свойствами паше (имя пользователя),
password (пароль), аде (возраст), sendNotification (если true, пользователь хочет
получать оповещения об обновлениях на сайте, если false — не хочет) и методом
isMature, возвращающим true, если возраст пользователя не меньше 18 лет.
// Функция User__isMature(), реализующая метод isMature класса User
function User__isMature() {
return this.age >= 18;
}
// Функция-конструктор класса User
/ / В качестве параметров принимает имя, пароль и возраст пользователя,
// заносит их в свойства создаваемого объекта и объявляет метод
function User(name, password, age) {
this.паше = name;
this.password = password;
this.age = age;
this.sendNotification = true;
this.isMature = User__isMature;
}
Объект объявленного таким образом класса может быть создан с применением опе­
ратора new:
new <имя класса> ([<параметры конструктора ч е р е з запятую>])

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

Вот пример создания и использования объектов класса user:
const userl = new User('ivan_ivanov', '123456789', 45);
const user2 = new User('petr_petrovf, 1987654321', 17);
let userlAge = userl.age;
user2.password = 1sUp3rPa$$WoHdf;
if (userl.isMature()) {
// Если userl взрослый, пускаем его на сайт
}

15.1.2. Прототип.
Объявление свойств и методов в прототипе
Свойства и методы, которые следует объявить в классе, также можно занести в его
прототип.
Прототип — служебный объект класса object, чьи свойства и методы на­
следуются объектом класса, которому принадлежит этот прототип. Насле­
дование свойств и методов из прототипа выполняется еще до исполнения
конструктора.
Урок 15. Объявление своих классов 247

Каждый из классов, как встроенных в JavaScript, DOM, BOM или HTML API, так и
объявленных программистом, содержит свой прототип. Прототип любого объяв­
ленного программистом класса изначально пуст. Ссылка на прототип хранится
в статическом свойстве prototype владеющего им класса.
В прототипе имеет смысл объявлять свойства, чьи значения не будут изменяться
в конструкторе (в противном случае проще объявить их непосредственно в конст­
рукторе).
Вот Пример объявления ТОГО же класса User, В котором СВОЙСТВО sendNotifications
и метод isMature объявлены в прототипе:
function User2(паше, password, age) {
this.name = name;
this.password = password;
this.age = age;
}
// Объявляем в прототипе свойство sendNotifications и метод isMature
User2.prototype.sendNotifications = true;
User2.prototype.isMature = function() {
return this.age >= 18;
};
Где объявлять свойства и методы класса: в конструкторе или прототипе— дело
вкуса. Первый способ несколько нагляднее (поскольку все объявления собраны
в одном месте), но второй дает некоторую прибавку в производительности (т. к.
свойства и методы объявляются в прототипе лишь единожды и потом просто копи­
руются в создаваемые объекты).

15.2. Упражнение. Объявляем класс слайдера

В разд. 6.5 мы написали слайдер. Перепишем его, реализовав в виде класса slider.
Ради упрощения сделаем новый слайдер без вывода миниатюр.
1. В папке 15\!sources сопровождающего книгу электронного архива (см. приложе­
ние 3) найдем файл 15.2.html и папку images и скопируем их куда-либо на локаль­
ный диск. Страница 15.2.html содержит заготовку для создания слайдера. В папке
images хранятся графические файлы с 1.jpg по 7.jpg.

2. Откроем копию страницы 15.2.html в текстовом редакторе и найдем HTML-код,

создающий слайдер:
<section>
<img src="images/l.jpg">
</section>
<nav id="sliderl">
<a href="images/1.jpg" class="active">l</a>
<a href="images/2.jpg">2</a>
<a href="images/3.jpg">3</a>
</nav>
248 Часть III. HTML API и компонентное программирование

Условимся о следующем:
• набор «кнопок» слайдера будем идентифицировать по указанному у него
якорю (вспомним, что название «кнопки» у слайдера взято в кавычки, по­
скольку это не настоящие кнопки, создаваемые тегом <input>). Как можно
видеть, у нашего набора «кнопок» — тега <nav> — задан якорь slideri;
• в наборе «кнопок» должны присутствовать только гиперссылки, создающие
«кнопки»;
• перед набором «кнопок» должен присутствовать элемент, содержащий в ка­
честве первого потомка тег <img> (в нем будет выводиться очередное изобра­
жение).
Следование этим соглашением позволит нам заметно упростить код слайдера.
3. Допишем в конце HTML-кода тег <script>, в который поместим объявление
конструктора класса slider:
<script type="text/javascript">
function Slider(buttonset) {
this.buttonset = buttonset;
this.buttonset.addEventListener('click', Slider__showlmage);
}
</script>

Конструктор в качестве параметра примет ссылку на объект набора «кнопок».

В теле конструктора сохраняем этот элемент в свойстве buttonset и привязыва­
ем К нему обработчик события click— функцию Slider__showlmage, которую
сейчас напишем.
4. Перед конструктором вставим объявление функции Slider__showlmage, которая
станет выводить при щелчках на «кнопках» указанные в них изображения:
function Slider__showlmage(evt) {
if (evt.target != this) {
this.previousElementSibling.firstElementChild.src =
evt.target.href;
let el;
for (let i = 0; i < this.chiIdElementCount; ++i) {
el = this.children[i];
el.className = (el == evt.target) ? ’active* : '
}
evt.preventDefault();
}
}
Если щелчок был выполнен на одной из «кнопок» набора (а не на самом наборе),
выводим относящееся к «кнопке» изображение в теге <img> — первом потомке
предыдущего соседа набора «кнопок». После чего перебираем все «кнопки», де­
лаем активной ту, на которой был выполнен щелчок, а остальные деактивируем.
И не забываем отменить обработку события по умолчанию.
Урок 15. Объявление своих классов 249

5. В целом написанный нами слайдер полностью функционален. Но что-то он

слишком прост... Добавим классу slider два метода:
• g e t c u r r e n t in d e x — не принимает параметров и возвращает номер активной
«кнопки»;
• s e t c u r r e n t in d e x — принимает в качестве единственного параметра номер
«кнопки», выводит соответствующее изображение и делает «кнопку» актив­
ной.
6. Допишем КОД, объявляющий метод g e tc u r r e n tin d e x :
Slider.prototype.getcurrentindex = function () {
for (let i = 0;
i < this.buttonset.chiIdElementCount; ++i) {
if (this.buttonset.children[i].classList.contains('active’))
return i;
}
};
Здесь перебираются все «кнопки» в наборе и возвращается номер первой из них,
К КОТОРОЙ ПрИ ВЯЗаН СТИЛеВОЙ КЛаСС active.

7. Добавим объявление метода s e tc u r r e n tin d e x :

Slider.prototype.setcurrentindex = function (ind) {
if (ind < 0)
ind = 0;
if (ind > this.buttonset.chiIdElementCount - 1)
ind = this.buttonset.chiIdElementCount - 1;
this.buttonset.previousElementSibling.firstElementChild.src =
this.buttonset.children[ind].href;
for (let i = 0; i < this.buttonset.chiIdElementCount; ++i)
this.buttonset.children[i].className =
(i == ind) ? 'active' : '';
};
Если номер меньше о, полагаем его равным о, а если больше номера последней
из «кнопок» — равным номеру последней «кнопки». Далее извлекаем ссылку на
графический файл из «кнопки» с указанным номером и выводим этот файл в те­
ге <img>. Наконец делаем эту «кнопку» активной, привязав к ней стилевой класс
active.
8. Добавим выражение, создающее объект класса Slider на основе набора «кно­
пок» с якорем slideri:
const slideri = new Slider(document.getElementByld('slideri')) ;

9. Откроем страницу 15.2.html в веб-обозревателе, пощелкаем на «кнопках» и убе­

димся, что слайдер работает. То есть, реализовав слайдер в виде класса, мы
сможем управлять им программно, просто обращаясь к его свойствам и вызывая
его методы. Это важное преимущество объектного подхода.
250 Часть III. HTML API и компонентное программирование

10. Для пробы добавим выражение, которое сразу после открытия страницы выве­
дет в слайдере второе по счету изображение, вызвав у объекта слайдера метод
setCurrentIndex!
sliderl.setCurrentlndex(1);

Обновим страницу и убедимся, что метод выполнился успешно.

11. Еще одно преимущество объектного подхода: возможность без проблем соз­
дать на странице сразу нескольких слайдеров.
Проверим, так ли это, для чего вставим сразу после НТМЬ-кода первого слай­
дера фрагмент, создающий второй слайдер:
<р></р>
<section>
<img src=Mimages/7.jpg">
</section>
<nav id="slider2">
<a href="images/4.jpg">l</a>
<a href="images/5.jpg">2</a>
<a href="images/6.jpg">3</a>
<a href="images/7.jpg"
class="active">4</a>
</nav>

Разделим слайдеры пустым абзацем.

А во втором слайдере сделаем изначаль­
но активной последнюю «кнопку».
12. В код сценария добавим выражение, соз­
дающее объект второго слайдера:
const slider2 = new Slider(document.
getElementByld('slider21));

Обновим страницу и проверим, работают ли

слайдеры. Если мы не допустили ошибок,
оба слайдера должны функционировать не­
зависимо друг от друга (рис. 15.1).

Рис. 15.1. На веб-странице размещены два

независимых слайдера
Урок 15. Объявление своих классов 251

15.3. Упражнение.
Создаем динамическое свойство
В классе slider, написанном в разд. 15.2, мы объявили два метода: g e tcur rent index,
возвращающий номер активной «кнопки», и setcurrentindex, активизирующий
«кнопку» с указанным номером. Перепишем этот класс, заменив эти методы дина­
мическим свойством currentindex. Это упростит использование класса.

Динамическое свойство — имитация обычного свойства класса, представ­

Iляющее собой комбинацию из методов геттер и сеттер.

Метод геттер — вызывается при попытке получить значение динамиче­
ского свойства. Не принимает параметров и возвращает результат, который
и становится значением свойства. Возвращаемое значение может как извле­
каться из другого, обычного, свойства, так и получаться в результате каких-
либо вычислений.
Метод сеттер — вызывается при попытке присваивания значения свойст­
ву. Принимает один параметр — новое значение свойства — и не возвраща­
ет результата. Полученное значение может присваиваться другому, обыч­
ному, свойству или использоваться в каких-либо вычислениях.
Динамическое С В О Й С Т В О объявляется ВЫЗОВОМ статического метода defineProperty
класса object в формате:
d e f i n e P r o p e r t y {<объект>, <имя свойст ва>, <объект к о н ф и гур а ц и й ).

В качестве объекта следует указать прототип нужного класса, имя свойства задается
в виде строки, объект конфигурации , относящийся к классу object, должен иметь
свойства get и set, задающие, соответственно, геттер и сеттер.
В нашем коде уже есть готовые геттер И сеттер--- методы getc u r rent Index И
setcurrentindex. Нам остается превратить их в обычные функции и указать в вызо­
ве метода defineProperty.
1. В коде сценария страницы 15.2.html найдем объявления методов g e t c u r r e n t i n d e x
И s et c u r r e n t i n d e x И переделаем И Х В объявления функций Slid e r __
g e t C u r r e n t l n d e x И Slider__ s e t c u r r e n t i n d e x (исправленный К О Д выделен ПОЛу­
жирным шрифтом):
function Slider getCurrentlndex() {

}
function Slider__setcurrentindex(ind) {

>
2. Запишем под объявлениями этих функций код, объявляющий динамическое
С В О Й С Т В О currentindex:
252 Часть III. HTML API и компонентное программирование

Object.defineProperty(Slider.prototype, 'currentlndex1, {
get: Slider__getCurrentIndex,
set: Slider__setCurrentIndex
}>;
3. Исправим выражение, выводящее в первом слайдере второе по счету изображе­
ние:
sliderl.currentlndex = 1;

При присваивании динамическому свойству currentlndex нового значения будет

выполнена функция slider__setcur rent index, которая переключит слайдер на
второе изображение. И наоборот, при попытке извлечь значение из этого свой­
ства ВЫПОЛНИТСЯ функция Slider__getCur rent Index, ВЫЧИСЛЯЮЩаЯ И ВОЗВра­
щающая номер активной «кнопки».
Откроем страницу 15.2.html в веб-обозревателе и убедимся, что оба слайдера рабо­
тают, а первый слайдер изначально выводит второе изображение.
Пользоваться динамическим свойством удобнее, чем аналогичной парой методов,
поскольку запомнить имя одного свойства проще.

15.3.1. Динамические свойства,

доступные только для чтения и только для записи
В объекте конфигурации, передаваемом методу defineProperty в третьем параметре,
необязательно указывать и геттер, и сеттер:
♦ если указать только геттер — свойство будет доступно только для чтения:
Object.defineProperty(SomeClass.prototype, 'readOnlyProperty',
{get : SomeClass__getROP});

let val = someClassObject.readOnlyProperty;

someClassObject.readOnlyProperty = 5; // Ошибка!

♦ если указать только сеттер — свойство станет доступным только для записи:
Object.defineProperty(SomeClass.prototype, 'writeOnlyProperty',
{set : SomeClass__setWOP});
someClassObject.writeOnlyProperty = 5;
let val = someClassObject.writeOnlyProperty; // Ошибка!

15.3.2. Объявление обычных свойств

методом d efin e P ro p erty
Статический метод d e fin e P r o p e r ty класса o b je c t можно применять для объявления
обычных свойств, указав имя создаваемого свойства во втором параметре. При
этом можно задать ряд дополнительных параметров, создав в объекте конфигурации
следующие свойства:
Урок 15. Объявление своих классов____________ 253

♦ value — изначальное значение свойства;

♦ writable — если true, свойство будет доступно для чтения и записи (по умолча­
нию), если false — только для чтения;
♦ enumerable — если true, свойство будет доступно для перебора в цикле по свой­
ствам, описанном в разд. 4.13 (по умолчанию), если false — не будет доступно;
♦ configurable— если true, параметры свойства могут быть изменены последую­
щим вызовом метода defineProperty (по умолчанию), если false — не могут.
Вот Пример объявления свойства selector класса Slider, СО значением '.slider',
доступного только для чтения и с неизменяемыми параметрами:
Object.defineProperty(Slider.prototype, 'selector', {
value: '.slider',
writable: false,
configurable: false

15.4. Упражнение.
Реализуем наследование классов
Напишем класс siider2 — более развитую разновидность слайдера. Его конструк­
тор сможет принимать в качестве параметра, помимо объекта набора «кнопок», еще
И якорь. А сам класс получит поддержку методов goNext И goPrevious, выводящих
в слайдере, соответственно, следующее и предыдущее изображения. Чтобы не
писать заново весь код, унаследуем класс siider2 от класса slider.
Наследование — создание одного класса на основе другого. Унаследован­
ный класс (производный, или подкласс), помимо собственных свойств и ме­
тодов, получает все свойства и методы класса, от которого он наследован
(базового, или суперкласса).12
1. В папке 15\!sources сопровождающего книгу электронного архива (см. приложе­
ние 3) найдем файл 15-4.html и папку images и скопируем их куда-либо на локаль­
ный диск. Страница 15-4.html содержит код класса slider и заготовку для созда­
ния слайдера.
2. Откроем страницу 15.4.html в текстовом редакторе и добавим к коду сценария
объявление функции-конструктора класса siider2:
function Slider2(buttonset) {
if (typeof buttonset == 'string')
buttonset = document.getElementByld(buttonset);
}
Если в качестве параметра получена строка, подразумевается, что был передан
якорь набора «кнопок», по которому следует найти сам набор.
254 Часть III. HTML API и компонентное программирование

3. Чтобы производный класс унаследовал все свойства и методы базового класса,

следует указать в качестве прототипа производного класса копию прототипа
базового класса.
Создать копию любого объекта (не только прототипа) можно вызовом ста­
тического метода create класса object в формате:
create(<копируемый объект>).
Метод возвращает полную копию копируемого объекта.
Итак, добавим выражение, задающее в качестве прототипа класса siider2 копию
прототипа класса siider:
Slider2.prototype = Object.create(Slider.prototype);

4. В полученной таким образом копии прототипа базового класса следует указать

ссылку на конструктор производного класса. Ссылка на конструктор хранится
в свойстве constructor прототипа.
Добавим выражение, задающее правильный конструктор в прототипе производ­
ного класса:
Slider2.prototype.constructor = Slider2;

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

класса, который выполнит инициализацию слайдера и подготовку его к работе.
Конструктор базового класса должен быть вызван в контексте объекта произ­
водного класса, чтобы переменная this в теле вызываемого конструктора указы­
вала на этот объект.
Вызвать какую-либо функцию в контексте указанного объекта с передачей
ей заданных параметров можно с помощью метода appiy, вызываемого не­
посредственно у этой функции в формате:
aPPly{<объект, в контексте которого вызывается функция> [,
<массив с параметрами>] ).

В теле вызываемой этим методом функции переменная this будет ссылаться на

указанный в вызове объект. Вызванной функции будут переданы все параметры
из заданного массива (часто в его качестве указывают объект-коллекцию
arguments, описанную в разд. 4.8).
Добавим в тело конструктора класса siider2 выражение, вызывающее конструк­
тор базового класса slider (выделено полужирным шрифтом):
function Slider2(buttonset) {

Slider.appiy(this, arguments);
} '
6. Добавим объявления методов goNext и goPrevious нового класса:
Slider2.prototype.goNext = function () {
this.currentlndex = this.currentlndex + 1;
Урок 15. Объявление своих классов 255

Slider2.prototype.goPrevious = function () {
this.currentIndex = this.currentlndex - 1;
};
7. Напишем выражение, создающее объект слайдера:
const sliderl = new Slider2('sliderl');

8. Откроем страницу 15.4.html в веб-обозревателе и проверим слайдер в работе.

Затем проверим в работе методы goNext и goPrevious, объявленные в новом
классе.
9. Вставим под HTML-кодом слайдера абзац с кнопками Назад и Вперед:
<p><input type="button" id="previous" уа1ие="Назад">
<input type="button" id="next” value="Bnepefl"x/p>

10. Допишем в код сценария фрагмент, обрабатывающий нажатия на этих кнопках:

const previous = document.getElementByld('previous');
const next = document.getElementByld(*next');
previous.addEventListener('click’, () => {
sliderl.goPrevious();
lb -
next .addEventListener ('click', () => {
sliderl.goNext();
1);
Обновим страницу, пощелкаем на кнопках Назад и Вперед и посмотрим, что про­
изойдет со слайдером.

15.4.1. Переопределение методов

.Переопределение метода — дополнение функциональности метода базово­
I го класса, выполненное в производном классе.
Выполняется переопределение метода в три этапа:
♦ в производном классе объявляется метод с тем же именем, что и у переопреде­
ляемого метода базового класса;
♦ в теле объявленного метода записывается код, реализующий дополнительную
функциональность;
♦ в нужном месте кода метода выполняется вызов одноименного метода базового
класса, для чего применяется описанный ранее метод apply.
Вот пример переопределения метода someMethod баЗОВОГО класса BaseClass в произ­
водном классе Derivedciass:
// Объявление базового класса
function BaseClass(pari, par2) {
256 Часть III. HTML API и компонентное программирование

// Объявление метода
BaseClass.prototype.someMethod = function (argl, arg2) {

};

// Объявление производного класса

function DerivedClass(pari, par2, рагЗ) {

BaseClass.apply(this, [pari, par2]);

>
// Объявление переопределяемого метода
DerivedClass.prototype.someMethod = function (argl, arg2) {

BaseClass.prototype.someMethod.apply(this, arguments);
};

15.4.2. Использование метода c a ll

для вызова методов базового класса
Для вызова метода базового класса при их переопределении можно применять
и метод call:
call{ < о б ъ е к т , в конт екст е ко т о р о го вы зы вает ся ф у н к ц и я >[,

< парам ет ры чер ез запят ую > ])

Единственное его отличие от метода apply — параметры, передаваемые вызывае­

мому методу, записываются непосредственно в вызове метода call.
Пример:
function DerivedClass(pari, раг2, рагЗ) {

BaseClass.call(this, pari, par2);

}
DerivedClass.prototype.someMethod = function (argl, arg2) {

BaseClass.prototype.someMethod.call(this, argl, arg2);

};

15.5. Объявление статических свойств

и методов
Статическое свойство объявляется в виде добавленного свойства у самой

I функции-конструктора.
Урок 15. Объявление своих классов_____________________________________ 257

Пример объявления статического свойства selector класса slider:

function Slider(buttonset) {

}
Slider.selector = '.slider';

Объявление доступного только для чтения статического свойства selector класса

Slider!
Object.defineProperty(Slider, 'selector',
{value: '.slider', writable: false});

Статический метод объявляется в виде метода самой функции-конст­

руктора.
Пример объявления статического метода createsiiders класса slider:
Slider.createSliders = function (selector) {

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

15.6. Упражнение. Расширяем функциональность

встроенных классов
Класс коллекции HTMLCoiiection, описанный в разд. 7.1, не поддерживает исключи­
тельно полезный метод forEach (см. разд. 4.5). Давайте добавим его в класс коллек­
ции.
Новые свойства и методы объявляются в прототипе нужного класса. Таким
образом можно расширить функциональность любого класса, встроенного
в JavaScript, DOM, BOM или в HTML API.
1. Откроем страницу 15.4.html в текстовом редакторе.
2. В самом начале кода сценария, перед объявлением функции Slider_showImage,
вставим КОД, о б ъ я вл я ю щ и й В к л а с се HTMLCoiiection м ето д forEach:
HTMLCoiiection.prototype.forEach = function (func, ths) {
for (let i = 0; i < this.length; ++i)
if (ths)
func.call(ths, this[i], i, this);
else
func(this[i], i, this);
};
3. Исправим КОД функции Slider_Showimage, использовав в нем только что объяв­
ленный метод (исправленный код выделен полужирным шрифтом):
258 Часть III. HTML API и компонентное программирование

function Slider_showlmage(evt) {
if (evt.target != this) {
this.previousElementSibling.firstElementChild.src =
evt.target.href;
this.children.forEach((el) => (
el .classNaxne = (el = evt.target) ? 'active' : '';
>);
evt.preventDefault();
}
}
Как видим, благодаря применению метода forEach для перебора коллекции, код
несколько сократился.
Откроем страницу 15.4.html в веб-обозревателе и проверим работу слайдера.

15.7. Самостоятельные упражнения

♦ В сценарии на странице 15 4.html объявите класс siider3, производный от класса
siider2. Переопределите его методы:

• — чтобы при достижении последнего изображения он выводил первое

goN e x t
изображение;
• goPrevious — чтобы при достижении первого изображения он выводил по­
следнее.
♦ Там же в классе siider3 объявите:
• статическое свойство s e l ector — хранящее строку с CSS-селектором,
с которым должны совпадать наборы «кнопок» (изначальное значение
'nav. slider');

• статический метод create s i i d e r s — не принимающий параметров, преобра­

зующий в слайдеры все наборы «кнопок», что совпадают с заданным в свой­
стве s e l e c t o r CSS-селектором, и возвращающий массив созданных слайде­
ров.
♦ Найдите в папке 15\!sources сопровождающего книгу электронного архива
(см. приложение 3) страницу 15-7.html с фотогалереей, в которой выведены ми­
ниатюры изображений. При щелчке на любой миниатюре откроется лайтбокс
(рис. 15.2) с полной редакцией изображения.
Лайтбокс — панель, обычно полупрозрачная, выводящаяся поверх страни­
цы, занимающая все внутреннее пространство окна веб-обозревателя, пока­
зывающая какой-либо фрагмент содержимого и исчезающая при щелчке
мышью или по нажатию клавиши <Esc>. Часто применяется для вывода
полной редакции изображения при щелчке на его миниатюре.
юк 15. Объявление своих классов 259

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

PhotoGallery. Объявите в этом классе доступное только для чтения динамиче­
ское свойство lightboxOpened, хранящее true, если лайтбокс открыт, И false —
в противном случае.

Фотогалерее ..

0'/Ра*^Док>м^ты/Работа/Книг14/1а;

а б
Рис. 15.2. а — лайтбокс скрыт; б — лайтбокс открыт
 Урок 16
Компоненты
Компоненты и их написание
Замыкания
Изоляция компонентов

16.1. Понятие компонента

Обычный класс слайдера, написанный в уроке 75, требует наличия на странице
готового, созданного вручную набора элементов: тега <section> с тегом <img> внут­
ри, панели навигации <nav> с набором гиперссылок. Если мы допустим ошибку
в HTML-коде, слайдер не заработает.
В случае компонента нам не придется создавать все эти элементы вручную.
Компонент — класс, реализующий сложный элемент страницы и конструи­
I рующий все необходимые элементы самостоятельно.
Конструктор класса-компонента принимает два параметра:
♦ ссылку на элемент страницы, обычно пустой, в котором будут размещены скон­
струированные элементы (iбазовый элемент );
♦ массив или объект с исходными данными для конструирования компонента.
Конструирование всех необходимых элементов, задание их параметров и привязка
обработчиков событий — одним словом, инициализация компонента, — выполня­
ется в его конструкторе.
Применение компонентов вместо обычных классов упрощает программирование
и устраняет множество ошибок, связанных с неправильным набором сложного
HTML-кода. Нужно лишь создать пустой базовый элемент, подготовить исходные
данные и создать объект компонента.
Компоненты часто оформляются в виде библиотек, рассчитанных на применение
сторонними разработчиками в своих проектах. В этом случае компонент настоя­
тельно рекомендуется сделать изолированным (чем мы займемся чуть позже).

16.2. Упражнение. Создаем компонент

Преобразуем слайдер, написанный в разд. 15.3, в компонент, который:
♦ при создании получит (помимо ссылки на базовый элемент) исходные данные —
служебный объект класса object со свойствами images (массив ссылок на графи­
262 Часть III. HTML API и компонентное программирование

ческие файлы) и initial (номер изначально активной «кнопки». Если это свой­
ство не указано, будет активна первая «кнопка»);
♦ привяжет к базовому элементу стилевой класс slider, после чего к нему будут
применены оформляющие CSS-стили;
♦ создаст в базовом элементе «кнопки», а над ними — панель для вывода изобра­
жений.
♦ * *
1. Найдем в папке 16\!sources сопровождающего книгу электронного архива
(см. приложение 3) файл 16.2.html и папку images и скопируем их в какую-либо
папку локального диска. Страница 16.2.html содержит полностью работающий
слайдер, основанный на коде из разд. 15.3. В папке images находятся графи­
ческие файлы.
2. Откроем копию страницы 16.2.html в текстовом редакторе и исправим селекторы
стилей, оформляющие слайдер (здесь и далее добавленный и исправленный код
выделен полужирным шрифтом, а удаленный — зачеркиванием):
section; nav.slider, section.slider-panel {

}
section.slider-panel {

}
section.slider-panel img {

}
.slider {

}
nav.slider a {

}
.slider a .active {

}
Сам набор «кнопок» у нас будет помечаться стилевым классом slider. Панель
для вывода изображений мы сделаем из тега <section> со стилевым классом
slider-panel.

3. Найдем фрагмент HTML-кода, создающий слайдер, удалим имеющийся там тег

<section> и содержимое тега <nav> (все это будет создаваться программно):
<seetion>
----<img- sre-"images/1.jpg”>
</soction>
<nav id="sliderl">
Урок 16. Компоненты 263

----<а hrcf-MimagGs/l .jpg” class-nactive">l</a>

----<а hrGf-"imago&72.jpg”>2</a>
----<a hrof-',Httage&7/3 .jpg">3</a>
</nav>

У нас должен остаться лишь пустой тег <nav>, который станет базовым элемен­
том для слайдера.
Теперь займемся контроллером класса slider. Переделки там будут значитель­
ными, и мы рассмотрим их по частям.
4. Добавим в список параметров конструктора параметр config, которому будет
присвоен объект с исходными данными:
function Slider(buttonset, config) {

}
5. Добавим в конец кода конструктора выражение, задающее номер активной
«кнопки» по умолчанию (о, т. е. первая «кнопка»), если он явно не указан
в свойстве initial объекта с исходными данными:
function Slider(buttonset, config) {

if (!config.initial)
config.initial = 0;
}
6. Добавим выражение, привязывающее к базовому элементу стилевой класс
slider:
function Slider(buttonset, config) {

if (!config.initial)
config.initial = 0;
this.buttonset.classList.add(1slider1);
}
7. Добавим код, который создаст «кнопки» слайдера:
function Slider(buttonset, config) {

let button;
config.images.forEach((el, i) => {
button = document.createElement('a ');
button.href = el;
button.textContent = i + 1;
if (i = config.initial)
button.classList.add('active');
this.buttonset.appendChild (button) ;
>) ;
264 Часть III. HTML API и компонентное программирование

Здесь перебираются все элементы массива из свойства images объекта с исход­

ными данными, и для каждого элемента создается «кнопка». Активная «кнопка»
ВЫ ДеЛЯеТСЯ СТИЛеВЫМ КЛаССОМ active.

8. Добавим код, создающий панель для вывода изображений, вкладывающий в нее

тег <img>, в котором, собственно, и будут выводиться изображения, и помещаю­
щий панель над базовым элементом:
function Slider(buttonset, config) {

const panel = document.créateElament(1section');

panel.classList.add('slider-panel');
const img = document.créateE lesnent ('img ') ;
img.src = config. images [config. initial] ;
panel.appendChild(img) ;
this.buttonset.insertAdj acentElement (1beforebegin ', panel ) ;
}
В теге <img> изначально выводим изображение, соответствующее активной
«кнопке».
На этом написание компонента слайдера закончено. Осталось исправить код,
создающий его объект.
9. Найдем код, создающий объект слайдера, и переделаем его так:
const cnfgl = {
images : ['images/4 .jpg', 'images/5.jpg 1, 'images/6.jpg',
'images/7.jpg']
>;
const sliderl = new Slider(document.getElementByld(’sliderl')/ cnfgl);

Мы создали объект cnfgl, хранящий исходные данные (массив ссылок на файлы

с изображениями), и передали его конструктору класса slider.
Откроем страницу 16.2.html в веб-обозревателе и посмотрим на наш слайдер
(рис. 16.1).
10. Добавим В объявление объекта cnfgl СВОЙСТВО initial со значением 2, чтобы
слайдер сразу же переключился на третью «кнопку»:
const cnfgl = {
images: ['images/4.jpg', 'images/5.jpg', 'images/6.jpg’,
'images/7.jpg'],
initial: 2
};
Обновим страницу и проверим, действительно ли изначально выводится третье по
счету изображение (рис. 16.2).
Ррок 16. Компоненты 265

Р и с . 16.1. С л а й д е р , п р е о б р а з о в а н н ы й в ком п о н е н т

Р и с . 16.2. С л а й д е р -к о м п о н е н т ср а з у п о с л е соз д а н и я п е р е кл ю ч и л ся на 3-ю кнопку

16.3. Замыкания
В составе кода нашего компонента-слайдера есть обычные функции: slider__
showlmage, Slider__getCurrentlndex И Slider__setCurrentlndex. СторОННИЙ разра­
ботчик, применяющий библиотеку с нашим классом, по незнанию может вызвать
одну из них, что приведет к программной ошибке и даже нарушит работу слайдера.
Разработчик может задействовать и другую библиотеку, в которой также объявлены
функции: Slider__showlmage, Slider__getCurrentlndex И Slider__setCurrentlndex.
266 Часть III. HTML API и компонентное программирование

Тогда функции, объявленные в одной библиотеке, переопределят их «тезок» из

другой библиотеки, и последняя перестанет работать.
Поэтому код нашего компонента следует изолировать от остального кода, заклю­
чив в замыкание.
Замыкание — анонимная функция, которая:
♦ объявляется и сразу же вызывается на исполнение;
♦ содержит в своем теле объявления переменных и функций, которые
должны быть изолированы от остального кода (поскольку они являются
ее локальными переменными и вложенными функциями);
♦ обязательно возвращает одну функцию в качестве результата. Тогда воз­
вращенная функция удержит в памяти все локальные переменные и вло­
женные функции, объявленные в теле замыкания.
Замыкание записывается в формате:
(function О {
<тело замыкания>
}) О
Пустые круглые скобки (), поставленные в самом конце, — это оператор вызова
функции, запускающий ее на выполнение. Объявление функции, включая слово
function, заключено в круглые скобки, чтобы веб-обозреватель сначала выполнил
его, а уже потом исполнил оператор вызова.I
I Функцию, возвращенную замыканием, необходимо присвоить какой-либо
|| переменной.
Классический пример простого замыкания, содержащего переменную, возвращаю­
щего функцию и реализующего счетчик:
const counter = (function О {
// Эта переменная будет изолирована от "внешнего" кода
let count = 0;
return function () {
return ++count;
};
}) О;
counter(); // 1
counter(); // 2
counter(); // З
// Пытаемся обратиться к переменной count, объявленной в замыкании
// и хранящей текущее значение счетчика
let cnt = count; // Ошибка!
// Пытаемся присвоить переменной count новое значение
count = 10000;
/ / В результате будет создана глобальная переменная count, а значение
// переменной count из замыкания останется неизменным
counter(); // 4
fpoK 16. Компоненты 267

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

| том должна быть его функция-конструктор.

16.4. Упражнение.
Изолируем компонент в замыкании
Сделаем компонент слайдера slider, написанный в разд. 16.2, полностью изолиро­
ванным от остального кода.
1. Откроем страницу 16.2.html и заключим код компонента slider (объявления кон­
структора Slider, функций Slider__showlmage, Slider__getCurrentlndex, Slider__
setcurrentindex и вызов метода defineProperty) в замыкание (добавленный и
исправленный код здесь и далее выделен полужирным шрифтом):
(function О {
function Slider__showlmage(evt) {

}
function Slider(buttonset, config) {

}
function Slider__getCurrentlndex() {

}
function Slider__setcurrentindex(ind) {

}
Object.defineProperty( . . . );
>) 0 ;
2. Добавим в тело замыкания выражение, возвращающее в качестве результата
функцию-конструктор:
(function () {

function Slider(buttonset, config) {

Object.defineProperty( . . . );
return Slider;
}) () ;
3. Допишем перед замыканием фрагмент, который присвоит возвращенный конст­
руктор глобальной константе slider:
const Slider = (function () {

}) О;
268 Часть III. HTML API и компонентное программирование

Мы дали этой константе имя, совпадающее с именем конструктора. Так нам не

придется переписывать код, создающий объекты этого компонента.
Откроем страницу 16.2.html в веб-обозревателе и посмотрим, как чувствует себя
компонент слайдера, теперь полностью автономный.

16.5. Самостоятельные упражнения

♦ В сценарии страницы 16.2.html объявите изолированный компонент siider2 —
производный от класса компонента slider. Добавьте в класс siider2 поддержку
методов goNext И goPrevious.
♦ Превратите фотогалерею с лайтбоксом, сделанную на странице 157.html, в ком­
понент. В качестве исходных данных пусть он принимает служебный объект
класса object со свойством images, в котором хранится массив ссылок на графи­
ческие файлы.
♦ Вынесите код компонентов slider и siider2 в файл сценария slider.js, а таблицу
стилей, задающую оформление, — в файл slider.css, сделав тем самым эти ком­
поненты готовыми к распространению.
♦ Сделайте то же самое с компонентом PhotoGaiiery, вынеся его код в файлы
photogallery.js и photogallery.css.
 ЧАСТЬ IV
Взаимодействие
с сервером

О Технология AJAX.
Э Серверные веб-приложения.
о Платформа РНР.
О Фронтенды и бэкенды.
Э Веб-службы.
О Серверные сообщения.
 Урок 17
Технология AJAX
Реализация AJAX
Формат JSON

17.1. Реализация AJAX

Существует возможность программно загрузить с веб-сервера произвольный файл
с целью вывести его содержимое на веб-странице или использовать в вычислениях.
Эту возможность обеспечивает технология AJAX.
AJAX (Asynchronous JavaScript и XML, асинхронные JavaScript и XML) —
технология, позволяющая загружать с веб-сервера файлы любого типа. Ин­
струменты для ее реализации входят в состав HTML API.
Загружаемые посредством AJAX файлы могут хранить фрагменты HTML-кода (их
можно непосредственно вывести на веб-странице), данные в формате JSON (этот
формат будет рассмотрен далее), XML-данные, обычный текст и др. Применение
AJAX позволяет быстрее обновлять страницы, не загружая их повторно.

П ояснение
XML (extensible Markup Language, расширяемый язык разметки) — язык для кодиро­
вания произвольных данных. Похож на HTML — XML-данные представляются в виде
набора вложенных друг в друга парных тегов и их атрибутов.
Ранее активно применялся для кодирования пересылаемых по Сети данных, но в се­
редине 2000-х годов был вытеснен более компактным и простым в обработке форма­
том JSON. В этой книге XML не рассматривается.

В целях безопасности посредством AJAX разрешается загружать файлы

только с веб-сервера. С локального диска загрузить файл таким образом не­
возможно.
Для тестирования написанных сценариев мы будем использовать пакет хостинга
ХАМРР, содержащий в своем состава веб-сервер Apache HTTP Server. Установка
этого пакета описывается в приложении 2.
Реализация AJAX включает несколько последовательно выполняемых этапов, опи­
сываемых далее.
272 Часть IV. Взаимодействие с сервером

17.1.1. Подготовка объекта AJAX

Программная загрузка по технологии AJAX выполняется объектом класса
XMLHttpRequest. Этот объект следует создать явно — оператором new без указания
каких-либо параметров:
const ajax = new XMLHttpRequest();

17.1.2. Указание интернет-адреса

загружаемого файла
Интернет-адрес загружаемого файла (и пара других параметров) задается в вызове
метода open созданного ранее объекта AJAX:
open (<метод пересы лки данных>, <интернет-адрес>, <асинхронная за гр узк а ? > )

Наименование метода пересы лки данных указывается в виде строки ' GET1 ИЛИ ' POST'.
Для простой загрузки файла следует указать метод GET.
загружаемого файла также задается в виде строки. Третьим пара­
интернет -адрес
метром передается логическая величина:
♦ false— будет выполнена синхронная загрузка, при которой исполнение кода
приостановится, пока запрошенный файл не будет загружен;
♦ true — будет выполнена асинхронная загрузка, при которой сразу после отправ­
ки веб-серверу запроса на загрузку исполнение кода продолжится.
Применение синхронной загрузки упрощает программирование, однако страница
на момент выполнения загрузки перестает реагировать на действия пользователя.
При использовании асинхронной загрузки страница не «подвисает», но программи­
рование несколько усложняется.
Тем не менее, в последнее время чаще всего применяется асинхронная загрузка. Ее
будем использовать и мы:
ajax.open('GET', */fragments/fr3.htmlf, true);

Синхронную же загрузку и ее реализацию мы рассмотрим позже.

Метод open просто задает параметры загрузки, но не запускает ее. Для запуска
загрузки следует вызвать метод send, речь о котором пойдет далее.

17.1.3. Получение загруженного файла

При асинхронной загрузке момент получения запрошенного файла предугадать
невозможно. Поэтому о его получении и обработке следует подумать заранее, еще
до отправки запроса на загрузку.
Получение загруженного файла реализуется В обработчике события readystatechange
объекта AJAX, выполняющего загрузку. Это событие возникает при каждом изме­
нении состояния загрузки, поэтому при каждом его возникновении необходимо
проверять значения двух свойств того же объекта:
Урок 17. Технология AJAX 273

♦ свойство readystate должно хранить значение 4;

♦ СВОЙСТВО status должно хранить значение 200.

Если оба этих условия выполняются, строковое содержимое загруженного файла

можно извлечь из свойства responseText того же объекта AJAX:
aj ах.addEventListener(’readystatechange', function () {
if (this.readyState == 4 && this.status == 200)
// Выводим содержимое загруженного HTML-файла в элементе output
output.innerHTML = this.responseText;
}) ;
Свойство readystate хранит числовой код состояния объекта AJAX в виде одного
из следующих числовых значений:
♦ о — запрос не инициализирован (еще не был вызван метод open);
♦ 1 — запрос инициализирован, но не отправлен (метод open был вызван, метод
send — еще нет);
♦ 2 — получена начальная часть серверного ответа с запрошенным файлом;
♦ з — идет загрузка запрошенного файла;
♦ 4— запрошенный файл полностью загружен.
Свойство status хранит числовой код состояния обработки запроса, отправленный
веб-сервером. Практически всегда оно принимает следующие значения:
♦ 200 — запрос успешно обработан, и запрошенный файл выслан;
♦ 403 — веб-сервер отклонил запрос, поскольку доступ к запрошенному файлу
запрещен;
♦ 404 — запрошенный файл не существует.

Примечание
Полный список всех возможных кодов статуса можно найти на странице
http://www.re8tapitutorial.ru/httpstatuscodes.html.

Свойство statusText объекта AJAX хранит строку с описанием состояния— на­

пример: ’ОК' ИЛИ ’Not Found1.

17.1.4. Отправка веб-серверу запроса

на получение файла
Отправку запроса на загрузку файла производит метод send объекта AJAX, который
в этом случае вызывается без параметров:
ajax.send();
274 Часть IV. Взаимодействие с сервером

17.2. Упражнение.
Пишем сверхдинамический веб-сайт
Напишем сверхдинамический сайт, представляющий сведения о трех текстовых
редакторах, применяемых программистами.
Сверхдинамический веб-сайт — состоит из одной страницы, на которой вы­
водятся различные фрагменты содержания, хранящиеся в отдельных
HTML-файлах. Загрузка и вывод файлов с фрагментами выполняется про­
граммно при щелчках на гиперссылках.
Сверхдинамические сайты работают быстрее обычных, т. к. относительно неболь­
шие файлы с HTML-фрагментами загружаются быстрее громоздких файлов с пол­
ноценными веб-страницами.
Примечание
Для тестирования этого сайта понадобится установленный и работающий пакет хос­
тинга ХАМРР. Процесс его установки описан в приложении 2.

1. Найдем в папке 17\!sources сопровождающего книгу электронного архива

(см. приложение 3) файл 17.2.html и папку fragments. Скопируем их в корневую
папку веб-сервера Apache из состава пакета ХАМРР, расположенную по пути:
c:\xampp\htdocs.
2. Файл 17 2.html хранит заготовку для создания единственной страницы сайта,
а папка fragments — файлы atom.html, notepadpp.html и vsc.html, в которых хранятся
фрагменты содержимого.
3. Откроем любой файл из папки fragments — например, atom.html:
<h2>Atom</h2>
<р>Текстовый редактор для программистов.</р>
<р>Достоинства:</р>

<р><а href="https://atom.1о/">Официальный сайт</а></р>

Здесь нет ни шапки сайта, ни его поддона, ни панели навигации, ни таблицы

стилей — только уникальное для этого фрагмента содержание. Поэтому файлы
с фрагментами так компактны.
4. Откроем копию страницы 17.2.html и найдем код, создающий панель навигации
с гиперссылками и элемент, в котором будут выводиться фрагменты содер­
жания:
<nav>
<а href="fragments/vsc.html">Visual Studio Code</a>
<а href="fragments/atom.html">Atom</a>
<а href="fragments/notepadpp.html">Notepad++</a>
</nav>
<section id="output"x/section>

Ссылки на файлы с фрагментами записаны непосредственно в тегах <а>. Эле­

менту для вывода фрагментов дан якорь output.
Урок 17. Технология AJAX 275

5. Добавим в конец HTML-кода тег <script> с выражениями, получающими доступ

к гиперссылкам и элементу output:
<script type="text/javascript">
const links = document.querySelectorAll('nav a*);
const output = document.getElementByld('output');
</script>

6. Добавим код, который создаст объект AJAX и привяжет к его событию

readystatechange обработчик, выводящий содержимое загруженного фрагмента
в элементе output:
const ajax = new XMLHttpRequest();
ajax.addEventListener('readystatechange', function () {
if (this.readyState == 4 && this.status == 200)
output.innerHTML = this.responseText;
}) ;
7. Напишем функцию loadHTML, которая будет обрабатывать щелчки мышью на
гиперссылках, и привяжем ее в качестве обработчика события click:
function loadHTML(evt) {
ajax.open('GET1, this.href, true);
ajax.send();
evt.preventDefault();
}
links.forEach((el) => {
el.addEventListener(?click', loadHTML);
}) ;

Рис. 17.1. Был выполнен щелчок на гиперссылке Atom

276 Часть IV. Взаимодействие с сервером

Ссылку на загружаемый файл мы извлекаем из атрибута href тега гиперссылки,

на которой был выполнен щелчок мышью.
Откроем панель управления ХАМРР и запустим веб-сервер. В веб-обозревателе
перейдем по интернет-адресу http://localhost/17.2.html и, когда страница откроется,
щелкнем на любой гиперссылке (рис. 17.1).

17.3. Синхронная загрузка файлов

по технологии AJAX
Если методу ореп объекта AJAX передать третьим параметром значение faise, веб­
обозреватель выполнит синхронную загрузку. В этом случае исполнение сценария
приостановится на вызове метода send, пока запрашиваемый файл не будет полу­
чен. Содержимое загруженного файла станет доступным сразу же после вызова
метода send:
ajax.ореп(1GET', '/fragments/fr3.html', false);
ajax.send();
// Ждем, пока файл не будет загружен
output.innerHTML = ajax.responseText;

Тем не менее, рассмотренный ранее подход — с обработкой события

readystatechanged— будет работать И при СИНХрОННОЙ Загрузке.
Синхронную загрузку рекомендуется использовать, когда время загрузки файла
гарантированно невелико, а посетители сайта готовы немного подождать — напри­
мер, при программировании корпоративных решений.

17.4. Формат JSON

Формат JSON применяется для кодирования данных, которым перед выводом тре­
буется программная обработка. Данные в этом формате компактны, легко кодиру­
ются и декодируются.
JSON (JavaScript Object Notation, объектная нотация JavaScript) — тексто­
вый формат обмена данными, основанный на объектной нотации JavaScript
(см.разд. 4.9).
Данные в формате JSON очень похожи на JavaScript-код, объявляющий служебный
объект класса object. Различия между JSON и JavaScript состоят в следующем:
♦ строки заключаются только в двойные кавычки (одинарные не допускаются);
♦ имена свойств также заключаются в двойные кавычки;
♦ поддерживаются лишь следующие типы данных:
• строки;
• числа;
• логические величины;
Урок 17. Технология AJAX 277

• массивы (заключаются в квадратные скобки);

• служебные объекты класса O bject (заключаются в фигурные скобки);
• null.

Временные отметки в виде объектов класса Date, функции и значение undefined

не поддерживаются.
JSON-данные хранятся в обычных текстовых файлах в кодировке UTF-8 с расши­
рениями json.
Вот пример сведений об уровне популярности различных языков программирова­
ния, записанных в формате JSON:
{
"title": "Уровень популярности различных языков программирования
за указанный год",
"уеаг": 2018,
"data": [
{"паше": "JavaScript", "level": 70},
{"паше": "Java", "level": 45},
{"паше": "Python", "level": 39}
]
}
Декодирование полученных от веб-сервера JSON-данных, которые можно извлечь
ИЗ ТОГО же свойства responseText, выполняется ВЫЗОВОМ СТаТИЧвСКОГО метода parse
класса json :
parse{<данные в формате JSON>)

В качестве результата возвращается служебный объект класса Object, содержащий

декодированные, готовые к обработке данные:
let jsonData;
ajах.addEventListener(1readystatechange *, function () {
if (this.readyState == 4 && this.status == 200)
jsonData = JSON.parse(this.responseText);
}) ;

17.5. Упражнение.
Загрузка и вывод и80Ы-данных
Напишем страницу, которая будет загружать ^(Ж -ф айл с данными о распростра­
ненности различных языков программирования и выводить их в табличном виде.
1. В папке ЧТМвоигсев сопровождающего книгу электронного архива (см. приложе­
ние 3) найдем файлы 17 5.html и 17.5)зоп и скопируем их в корневую папку
веб-сервера из пакета ХАМРР. Файл 17.5.html хранит страницу с необходимым
начальным кодом, а файл 17.5)зоп — непосредственно ЗвОМ-данные.
278 Часть IV. Взаимодействие с сервером

2. Откроем копию файла 17.5.json в текстовом редакторе и посмотрим на структу­

ру хранящихся в нем данных (она понадобится нам для написания обрабаты­
вающего их кода):
{
"year": 2018,
"data": [
{"паше": "JavaScript", "level": 70},
{"паше": "Java", "level": 45},
{"паше": "Python", "level": 39},
{"паше": "C#", "level": 34},
{"паше": "PHP", "level": 31},
{"паше": "C++", "level": 25}
]
}
3. Откроем копию файла 17.5.html в текстовом редакторе и посмотрим на код, соз­
дающий «заготовку» таблицы:
<р>Год: <span id="year"x/span></p>
<table>
<thead>
<tr>
<th>H3biK</th>
<th со1зрап="2">Популярность, %</th>
</tr>
</thead>
<tbody id="output">
</tbody>
</table>

Во встроенном контейнере (теге <span>) с якорем year будет выведен ГОД, К KO-
торому относятся данные. В секции основного содержания таблицы (теге
<tbody>) с якорем output станут выводиться строки со сведениями о языках про­
граммирования. Каждая строка включит три ячейки:
• название языка;
• уровень его популярности, выраженный числом;
• встроенный контейнер (<span>), создающий столбец импровизированной диа­
граммы, ширина которого показывает уровень популярности языка.
4. Добавим в конце HTML-кода тег <script> с выражениями, получающими доступ
к элементам year, output и создающими объект AJAX:
<script type="text/javascript">
const year = document.getElementByld('year');
const output = document.getElementById('output');
const ajax = new XMLHttpRequest();
</script>
Урок 17. Технология AJAX 279

5. Код, конструирующий таблицу со сведениями о языках программирования,

весьма велик, и его удобнее вынести в отдельную функцию.
Добавим объявление функции showData, выводящей эту таблицу:
function showData() {
let tr, td, span;
let languages = JSON.parse(ajax.responseText);
year.textContent = languages.year;
languages.data.forEach((el) => {
tr = document.createElement(1tr');
td = document.createElement(1td');
td.textContent = el.name;
tr.appendChild(td);
td = document.createElement('td');
td.textContent = el.level;
tr.appendChild(td);
td = document.createElement('td');
span = document.createElement('span');
span.style.width = el.level + '%’;
td.appendChild(span);
tr.appendChild(td);
output.appendChild(tr);

}
В свойстве level каждого языка хранится уровень его популярности в процен­
тах. Эту величину мы можем использовать для указания ширины столбца диа­
граммы.

Рис. 17.2. Данные, загруженные из JSON-файла, выведены в табличном виде

280 Часть IV. Взаимодействие с сервером

6. Добавим код, который после загрузки файла 17.5.json вызовет функцию showData:
ajax.addEventListener('readystatechange', function () {
if (this.readyState == 4 && this.status == 200)
showData();
}) ;
7. И напишем код, загружающий этот файл:
ajах.open('GET', '17.5.json’, true);
ajax.send();

Запустим веб-сервер, откроем веб-обозреватель и выполним переход по интернет­

адресу http://localhost/17.5.html (рис. 17.2).

17.6. Упражнение.
Пишем компонент A JA X Lo ader
Чтобы упростить дальнейшую работу, реализуем код, выполняющий загрузку дан­
ных по AJAX, в виде невидимого компонента AJAXLoader (написание компонентов
рассматривалось в уроке 16).
I Невидимый компонент — компонент, не выводящийся на экран.
Компонент AJAXLoader будет поддерживать следующие свойства и методы:
♦ g e t — статическое свойство, доступное только для чтения, хранит обозначение
метода GET;
♦ pos t — статическое свойство, доступное только для чтения, хранит обозначение
метода POST;
♦ load {<инт ернет -адрес>, <функция>) — метод, запускающий загрузку файла
С указанного интернет-адреса И вызывающий заданную функцию после его ус­
пешной загрузки. Функция в качестве единственного параметра получит содер­
жимое загруженного файла.
* * *
1. Создадим в корневой папке веб-сервера из пакета ХАМРР файл ajaxloader.js и за­
пишем в него код, объявляющий замыкание:
const AJAXLoader = (function () {
ПО;
2. Вставим в замыкание объявление функции-конструктора (добавленный код
здесь и далее выделен полужирным шрифтом):
const AJAXLoader = (function () {
function AJAXLoader() {
this.ajax = new XMLHttpRequest() ;
this.ajax.addEventListener('readystatechange', dataLoaded);
>
}) ();
Урок 17. Технология AJAX 281

Конструктор создает объект AJAX, присваивает его свойству ajax и привязывает

К нему В качестве обработчика события readystatechange функцию dataLoaded,
которую мы объявим позже.
3. Добавим в замыкание объявление свойств g e t и post:

const AJAXLoader = (function () {

Object.defineProperty (AJAXLoader, 'GET',

{value: 'GET', writable: false});
Object.defineProperty (AJAXLoader, 'POST',
{value: 'POST', writable: false});
}) 0 ;
4. Добавим в замыкание объявление метода load:
const AJAXLoader = (function () {

AJAXLoader.prototype.load = function (url, success) {

this.ajax.success = success;
this .ajax.open (AJAXLoader .GET, url, true) ;
this.ajax.send () ;
);

Функцию, обрабатывающую загруженный файл и получаемую методом со вто­

рым параметром, мы присвоили добавленному свойству success объекта AJAX.
Эта функция далее будет вызвана В обработчике события readystatechange.
5. Добавим в замыкание выражение, возвращающее конструктор в качестве ре­
зультата:
const AJAXLoader = (function () {

return AJAXLoader;

6. Вставим перед конструктором объявление функции dataLoaded:

const AJAXLoader = (function () {
function dataLoaded() {
if (this.readyState = 4)
if (this.status = 200)
this.success(this.responseText);
}
function AJAXLoader() {

}) () ;
282 Часть IV. Взаимодействие с сервером

В случае успешной загрузки файла вызывается функция, полученная ранее

методом load и сохраненная в добавленном свойстве success объекта AJAX.
Функции будет передано содержимое загруженного файла.
7. Переделаем страницу 17.5.html так, чтобы находящийся в ее коде сценарий
использовал компонент AJAXLoader.
Для этого откроем страницу 17.5.html в текстовом редакторе и добавим в секцию
заголовка (тег <head>) тег <script>, привязывающий файл сценария ajaxloader.js:
<head>

<script type="text/javascript" src="ajaxloader.js"X/script>

</head>

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

year И output, И объявления фуНКЦИИ showData (показан КОД, КОТОрЫЙ ДОЛЖеН
остаться после удаления):
const year = document.getElementByld('year1);
const output = document.getElementByld('output');
function showData() {

}
9. Исправим объявление функции showData следующим образом:
function showData(response) {
let tr, td, span;
let languages = JSON.parse(response);

}
10. Добавим в конец сценария код, создающий объект компонента AJAXLoader и за­
пускающий загрузку файла:
const ajax = new AJAXLoader();
ajax.load(f17.5.json', showData);

Запустим веб-сервер и перейдем в веб-обозревателе по интернет-адресу

http://localhost/17.5.html. Проверим, правильно ли отображается страница.

17.7. Самостоятельные упражнения

♦ Реализуйте в компоненте AJAXLoader обработку ситуации, когда файл не был
успешно загружен. Добавьте в метод load необязательный третий параметр,
с которым будет передаваться функция, вызываемая в этом случае и получающая
в качестве единственного параметра текст состояния (его можно получить из
свойства statusText объекта AJAX). Если же в вызове метода третий параметр
не был указан, пусть на экран выводится окно-сообщение с текстом состояния.
Урок 17. Технология AJAX 283

♦ Добавьте В компонент АаАХЬоас1ег статический метод 1оасШТМЬ, загружающий

НТМЬ-фаЙЛ С указанным интернет-адресом И В Ы В О Д Я Щ И Й его В заданном элем ен­
те. Метод должен вызываться в формате:
1оас!НТМЬ {<интернет-адрес>, Олемент дл я вывода>)

Сделайте так, чтобы элемент можно было указывать либо в виде ссылки на него,
либо в виде якоря.
♦ Переделайте страницу 17.2.Мт1 так, чтобы находящийся в ее составе сценарий
использовал метод 1оас1НТМЬ компонента АаАХЬоас1ег.
♦ Переделайте написанную в уроке 14 страницу 14.5.Ь!т1 таким образом, чтобы
данные для вывода диаграммы загружались из файла 17.5.]8оп.
 Урок 18
Серверные веб-приложения.
__________ Платформа РНР
Серверные веб-приложения
Введение в РНР
Серверные веб-страницы
Разработка РНР-приложений
Отправка данных РНР-приложениям

18.1. Серверные веб-приложения.

Платформа РНР
На этом уроке мы отвлечемся от JavaScript и веб-сценариев и будем изучать сер­
верные веб-приложения и их программирование.
Серверное веб-приложение — программа, хранящаяся и исполняющаяся на
стороне веб-сервера. В качестве результата выполнения генерирует обыч­
ные веб-страницы или данные в формате JSON. Может получать информа­
цию, введенную пользователем в веб-форму, взаимодействовать с базами
данных и другими серверными приложениями.
В самом простом случае серверные приложения генерируют веб-страницы, кото­
рые открываются веб-обозревателем так же, как обычные, хранящиеся в HTML-
файлах. Часто большая часть сайта (а иногда и весь сайт целиком) представляет
собой набор серверных приложений.
Серверное веб-приложение хранится на диске серверного компьютера в обычном
файле— текстовом или двоичном (в зависимости от программной платформы,
на которой оно написано). Обращение к серверному приложению выполняется по
интернет-адресу хранящего его файла (так же, как и к любому файлу, входящему
в состав сайта).
Получив интернет-адрес файла с серверным приложением , веб-сервер
извлекает из него путь к файлу, находит сам файл, но не отправляет его веб­
обозревателю, а запускает на исполнение. Когда приложение закончит
работу, веб-сервер пересылает клиенту сгенерированную приложением
ст раниц.
286 Часть IV. Взаимодействие с сервером

В настройках веб-сервера учтены все возможные типы файлов и записано, какие из

них должны пересылаться клиентам, а какие — запускаться на исполнение.
Серверные веб-приложения пишутся на языках Python, Ruby, Perl, даже JavaScript
(с использованием исполняющей среды Node.js), не говоря уже о разнообразных
компилируемых языках. Но наибольшей популярностью в настоящее время пользу­
ется платформа РНР.
РНР (акроним от РНР: Hypertext Preprocessor, РНР: препроцессор гипертек­
ста) — программная платформа для разработки серверных веб-приложений
на одноименном языке программирования.
Серверные приложения, написанные на РНР, хранятся в обычных текстовых фай­
лах в кодировке UTF-8 с расширением php.
Язык РНР весьма прост, очень похож на JavaScript и включает все необходимые
программные инструменты.
Все серверные веб-приложения, рассматриваемые в этой книге, написаны на плат­
форме РНР.
Для успешной работы серверных приложений, написанных на РНР, на серверном
компьютере должна быть установлена исполняющая среда РНР, а веб-сервер дол­
жен быть соответствующим образом настроен.
В состав пакета хостинга ХАМРР входит исполняющая среда РНР, а комплектный
веб-сервер Apache HTTP Server уже сконфигурирован нужным образом (установка
ХАМРР описывается в приложении 2).

18.2. Упражнение. Изучаем основы РНР

На этом уроке мы напишем на РНР простое серверное приложение, выводящее
страницу с текущей датой, и попутно изучим основы РНР-программирования.I
I Поскольку языки РНР и JavaScript очень похожи, изучая РНР, мы будем
I обращать внимание на его отличия от JavaScript.
1. Создадим в корневой папке веб-сервера из пакета ХАМРР файл 18.2.php и запи­
шем в него следующий код:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<1:И:1е>Вывод текущей AaTH</title>
</head>
<body>
<Ь1>Текущая дата</Ь1>
<р>Сегодня 01.01.2019</p>
</body>
</html>
Урок 18. Серверные веб-приложения. Платформа РНР 287

Пока что это обычная веб-страница, в HTML-код которой мы будем добавлять

фрагменты РНР-кода.
2. Сделаем так, чтобы в абзаце с текстом «Сегодня 01.01.2019» вместо 1 января
2019 года выводилась текущая дата. Для этого сначала следует получить эту
дату.
Вставим перед абзацем с текстом «Сегодня 01.01.2019» фрагмент РНР-кода,
который получит текущую дату (здесь и далее добавленный и исправленный
код выделен полужирным шрифтом):
<Ы>Текущая дата</111>
<?php
$timestamp s time () ;
?>
<р>Сегодня 01.01.2019</p>

Фрагмент РНР-кода, помещенный в HTML-код, должен быть заключен в тег

[ <?php . . . ? > .

I Имена переменных в РНР обязательно должны начинаться с символа дол-

fl лара ($).
Явно объявлять переменные в РНР не нужно. Для создания переменной
| достаточно присвоить ей значение.
Функция time возвращает временную отметку с текущими датой и временем
в виде количества секунд, прошедших с 1 января 1970 года (времешгая отметка
в стиле UNIX). Перед выводом ее следует преобразовать в строку, содержащую
дату в привычном нам формате.
3. Добавим в только что написанный РНР-код выражение, выполняющее это пре­
образование:
<?php
' $timestamp = time();
$data = date ('d.m. Y', $timestamp) ;
?>
Функция date преобразует временную отметку в стиле UNIX из второго пара­
метра в строку формата, указанного первым параметром, и возвращает получен­
ную строку в качестве результата. Заданная в первом параметре строка 'd.m.y1
обозначает формат даты <число> .<№ м еся ц а > .< го д и з четырех цифр>.
В РНР все строковые литералы обрабатываются только в строках, взятых
в двойные кавычки. В строках, что взяты в одинарные кавычки, обрабаты­
ваются лишь литералы V (обозначает одинарную кавычку) и \\ (обратный
слеш).
4. Заменим в абзаце «Сегодня 01.01.2019» дату 1 января 2019 года фрагментом
РНР-кода, выводящим строку с текущей датой из переменной $date:
<р>Сегодня <?php echo $date ?Х/р>
288 Ч аст ь IV. В за и м о д е й с т в и е с сервером

Оператор вывода echo:

echo <выводимое значение>
помещает выводимое зн ачен ие в HTML-код генерируемой страницы (как
говорят РНР-программисты, выполняет вывод) в том месте, в котором он
поставлен.
В последнем выражении РНР-кода, стоящем непосредственно перед закры­
| вающим тегом ?>, ставить завершающую точку с запятой необязательно.
5. Запустим веб-сервер из состава ХАМРР и в веб-обозревателе выполним переход
по интернет-адресу http://localhost/18.2.php. Мы увидим обычную веб-стра­
ницу, на которой выведена текущая дата (рис. 18.1).

Рис. 18.1. Обычная веб-страница, на которой выведена текущая дата

6. Доработаем серверное приложение, чтобы оно выводило еще и название теку­

щего времени года.
7. Вставим после абзаца «Сегодня...» фрагмент РНР-кода, получающий порядко­
вый номер месяца из текущей временной отметки:
<р>Сегодня <?php echo $date ?></р>
<?php
$d * getdate ($timestamp) ;
$month = $d[ 'mon' ] ;
?>
Функция getdate возвращает ассоциативный массив с различными составными
частями переданной ей временной отметки: годом, месяцем, числом и т. д.I
Ассоциативный массив (хеш) — массив РНР, в котором для доступа к эле­
I ментам используются не целочисленные, а строковые индексы (ключи).
Порядковый номер месяца хранится в элементе с ключом шоп возвращенного
ассоциативного массива.
8. Добавим в тот же фрагмент множественное условное выражение, определяющее
время года по номеру месяца:
<?php
$d = getdate($timestamp);
$month = $d[ ’mon* ];
Урок 18. С е р в ер н ы е в еб -пр и ло ж е ни я. П л а т ф о р м а Р Н Р 289

if ($month = 1 || $month = 2 || $month = 12)

$season = 'зима';
else if ($month >= 3 && $month <= 5)
$season = 'весна';
else if ($month >= 6 && $month <= 8)
$season = 'лето';
else
$season = 'осень';
?>
9. Добавим туда же выражение, выводящее название времени года:
<?php

echo '<р>Сейчас ' . $season . '</р>'

?>
Оператор вывода echo может выводить и HTML-код, который также будет
вставлен в то место страницы, где присутствует этот оператор.
I Точка (. ) — это оператор конкатенации строк в РНР.
10. Обновим открытую в веб-обозревателе страницу и посмотрим, какое сейчас
время года (рис. 18.2).
Важная особенность платформы РНР — в серверных приложениях можно смеши­
вать HTML- и РНР-код.
Серверная веб-страница — страница, содержащая, помимо HTML-кода,
еще и фрагменты на языке РНР, исполняемые на стороне сервера.

Рис. 18.2. Обновленная веб-страница, показывающая вместе с текущей датой еще и время года

18.3. Упражнение.
Пишем простейшую фотогалерею на РНР
Напишем на РНР простейшую фотогалерею, выводящую набор всех изображений,
хранящихся в папке. Для простоты сделаем так, чтобы фотогалерея обрабатывала
только файлы с расширением jpg.
290 Ч аст ь IV. В за и м о д е й с т в и е с сервером

Найдем в папке 18\!sources сопровождающего книгу электронного архива (см. при­

ложение 3) файл 18.3.css и папку images. Скопируем их в корневую папку веб­
сервера из состава пакета ХАМРР. Файл 18.3.css содержит таблицу стилей, оформ­
ляющую фотогалерею, а папка images— графические файлы с изображениями,
которые будут выводиться на ее странице.
1. Создадим в корневой папке веб-сервера файл 18.3.php и запишем в него началь­
ный HTML-код:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<1111е>Фотогалерея</^^е>
<link href="18.3.css" rel="stylesheet" type="text/css">
</head>
<body>
<1п1>Фотогалерея</Ы>
<section id="photogallery">
</section>
</body>
</html>

Изображения станем ВЫВОДИТЬ В теге <section> С якорем photogallery. Каждое

изображение будет представлять гиперссылку, указывающую на графический
файл и содержащую тег <img>.
2. Вставим В элемент photogallery пустой тег <?php . . . ?> (добавленный код
здесь и далее выделен полужирным шрифтом):
<section id="photogallery">
<?php
?>
</section>

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

из папки images.
3. Напишем выражения, вычисляющие полный путь к этой папке:
<?php
$images_folder = '/images/';
$current_dir = dimama ($_SEKVER[ 'SCRIPT_FILENAME ']) ;
$path = $currant_dir . $±mages__folder;
?>
Элемент с ключом s c r i p t f i l e n a m e ассоциативного массива $_s e r v e r , созданно­
го самой платформой PHP, хранит полный путь к текущему РНР-файлу. «Про­
пустив» его через функцию dirname, мы получим только сам путь, без имени
файла. А добавив К нему строку ' /images/' ИЗ переменной $images_folder,
сформируем в переменной $path полный путь к нужной папке.
Урок 18. С ер в ер н ы е в е б -п р и л о ж е н и я . П л а т ф о р м а Р Н Р 29 1

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

файлов:
<?php

if ($dh = opendir ($path) ) {

>
?>
Функция opendir открывает папку, чей путь указан в параметре, и возвращает
особый идентификатор или false, если папку открыть не удалась. Мы присваи­
ваем возвращенный ей результат переменной $dh и сразу же проверяем, не равен
ли он false. И в РНР, и в JavaScript оператор присваивания возвращает присво­
енное значение, следовательно, его можно использовать в качестве условия
в условном выражении.
4. Впишем в условное выражение код, перебирающий файлы в открытой папке:
<?php

if ($dh = opendir($path)) {
while (($file = readdir ($dh) ) ! = false) {
if ($file != && $file != {
echo '<a href=,M,>' ;
echo '<img src="' . $image s_folder . $file . ,n>';
echo '</a>';
)
)
}
?>

Функция readdir возвращает имя очередного файла из открытой папки, иденти­

фикатор которой передан с параметром, или false, если файлов больше нет. Мы
перебираем в цикле файл за файлом и формируем HTML-теги, необходимые для
вывода этого файла в фотогалерее.
Следует учесть, что первыми двумя файлами, возвращенными этой функцией,
станут файл с именами . (точка), представляющий текущую папку, и файл ..
(две точки), представляющий папку, в которую вложена текущая. Их выводить
в фотогалерее не следует.
5. Добавим выражение, которое закроет папку images по завершении перебора
файлов:
<?php

if ($dh = opendir($path)) {
while (($file = readdir($dh)) !== false){

}
292 Ч аст ь IV. В заи м о д е й с т в и е с сервером

с1озвс11г ($сЗЬ) ;
}
?>
Функция сЗ-оэесИг закрывает папку с указанным в параметре идентификатором.
6. Запустим встроенный в ХАМРР веб-сервер и перейдем в веб-обозревателе по
интернет-адресу ЬНр://1оса11ю$Ш8.3.р11р. Мы увидим страницу с фотогалереей
(рис. 18.3).

Рис. 18.3. Веб-страница с фотогалереей

Каждый раз, открывая страницу, мы набираем в составе интернет-адреса имя

файла— например, http://localhost/18.3.php (здесь это имя для ясности под­
черкнуто). Это надоедает и часто приводит к ошибкам в наборе. Исключим имя
файла из интернет-адреса, превратив 18.3.php в страницу по умолчанию.
Веб-страница по умолчанию — страница, к которой веб-сервер обращается,
если путь к запрошенному файлу не содержит имени файла и фактически
указывает на папку.
Файл веб-страницы по умолчанию должен иметь имя index и расширение
html (если это обычная страница) или php (если серверная).

7. Переименуем файл 18.3.php в index.php, превратив его в страницу по умолчанию.

В веб-обозревателе выполним переход по более короткому интернет-адресу
http://localhost/ и проверим, открывается ли страница.
У рок 18. С е р в ер н ы е в еб -пр и л о ж е ни я. П л а т ф о р м а Р Н Р 293

18.4. Упражнение.
Передаем данные методом GET
Если щелкнуть на любой картинке из нашей фотогалереи, ничего не произойдет.
Реализуем по щелчку просмотр полных редакций изображений на отдельных стра­
ницах с выводом текстовых описаний (если они есть).
Для вывода страниц с изображениями напишем серверную страницу get.php. Имя
файла с выводимым изображением будет передаваться ей страницей index.php мето­
дом G E T под именем image. Описания будут храниться в папке descriptions в тексто­
вых файлах с теми же именами, что и у файлов с изображениями.
Для передачи методом GET отдельные величины:
♦ кодируются — в частности, пробелы преобразуются в символы + (плюс), а бук­
вы кириллицы и знаки препинания — в их числовые коды;
♦ сводятся в пары вида:
<имя передаваемом велмчмны>=<ее значенме>\
♦ пары объединяются в одну строку и отделяются друг от друга амперсандами (&);
♦ строка добавляется в конец интернет-адреса целевой страницы и отделяется от
него вопросительным знаком (?).
Отдельные величины, передаваемые методом GET, называются GET-napa-
( метрами .
Вот пример передачи странице get.php методом GET параметра image со значением
*20190402114802 1 И параметра mode СОЗначением 'show*:
/get.php?image=20190402114802&mode=show
В РНР-коде все полученные GET-параметры хранятся в ассоциативном
массиве $_g e t , создаваемом самой платформой. Ключи элементов этого
массива совпадают с именами GET-параметров.
Вот пример извлечения значения GET-параметра image:
$fn = $_GET['image1];

1. Итак, чтобы реализовать задуманное, в папке 18\!sources сопровождающего кни­

гу электронного архива (см. приложение 3) найдем папку descriptions и скопиру­
ем в корневую папку встроенного в пакет ХАМРР веб-сервера.
2. Откроем страницу index.php, найдем код, создающий фотогалерею, и внесем
в него следующие правки (добавленный и исправленный код здесь и далее
выделен полужирным шрифтом):
if ($file != ' && $file != {
$n = pathinfo($file, PATHINFO_FILENAME);
echo '<a href="/get.php? images' . $n . '" ic^"' . $n .

}
294 Ч аст ь IV . В за и м о д е й с т в и е с сервером

Чтобы получить имя файла без расширения, мы воспользовались функцией

pathinfo. Она принимает первым параметром путь к файлу и возвращает его
часть, указанную во втором параметре. Константа p a t h i n f o f i l e n a m e обозначает
имя файла без расширения.
В каждой гиперссылке дополнительно формируется якорь, совпадающий со зна­
чением GET-параметра image. Он понадобится нам позже, при реализации воз­
врата.
3. Создадим в корневой папке веб-сервера файл get.php и запишем в него началь­
ный HTML-код:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>H3o6pa3ceHHe</title>
<link href="18.3.css" rel="stylesheet" type="text/cssM>
</head>
<body>
<section id="photo">
</section>
<p><a href="">Ha3afl</a></p>
</body>
</html>

В теге <section> С якорем photo выведем ТвГ <img> С Н у Ж Н Ы М изображением,

а над элементом photo, в виде заголовка первого уровня, — описание к этому
изображению.
4. Вставим перед тегом <section> РНР-код, который вычислит полный путь к тек­
стовому файлу с описанием и подготовит другие нужные данные:
<?php
$images_folder = '/images/•;
$descriptions_folder = '/descriptions/';
$current_dir = dirname ($_SEKVER['SCRIPT_FILENAME']) ;
$fn = $_GET ['image'] ;
$path = $current_dir . $descriptions_folder . $fn . '.txt *;
?>
<section id=,,photo">
</section>

5. Добавим к этому коду фрагмент, считывающий из текстового файла описание

и выводящий его на экран:
<?php

if (filejaxists ($path)) {
$s = file_get_contents($path);
echo '<hl>' . $s . '</hl>*;
У рок 18. С е р в ер н ы е веб -пр и ло ж ени я. П л а т ф о р м а Р Н Р 295

} else
echo '<Ь1>Изображение</Ы>';
?>
Функция file exists возвращает true, если файл с указанным в параметре пу­
тем существует. Функция file get contents считывает содержимое файла и воз­
вращает его в виде строки.
Если текстовый файл с описанием отсутствует, на странице вводится заголовок
«Изображение».
6. Вставим в тег <section> с якорем photo РНР-код, выводящий само изображение:
<section id="photo">
<?php
$path = $images_folder . $fn . '.jpg';
echo '<img src="' . $path .
?>
</section>
7. Вставим в тег гиперссылки Назад РНР-код, задающий целевой интернет-адрес:
<р><а href="/#<?php echo $fn ?>">Назад</а></р>
Это интернет-адрес страницы с фотогалереей, к которому в качестве якоря
добавлено имя просматриваемого изображения. В результате при возврате на
страницу фотогалереи ее содержимое будет прокручено до элемента с указан­
ным в адресе якорем — до гиперссылки с миниатюрой просматриваемого изо­
бражения. Так мы реализуем корректный возврат на то же место страницы, с ко­
торого ушли.
Запустим веб-сервер, откроем страницу фотогалереи, пощелкаем на разных миниа­
тюрах и проверим, выводятся ли изображения и описания к ним (рис. 18.4).

Рис. 18.4. Щелчки на миниатюрах фотогалереи выводят полноразмерные изображения и описания к ним
296 Ч аст ь IV. В з аи м о д е й с т в и е с сервером

18.5. Упражнение.
Передаем данные методом POST
Постоянно любоваться на одни и те же картинки скоро надоест. Поэтому добавим
средства для загрузки в нашу фотогалерею новых изображений.
Этим займется серверная страница app.php, где мы создадим веб-форму с полем вы­
бора графического файла и областью редактирования, куда будет заноситься опи­
сание. РНР-код, сохраняющий выгруженный файл и описание к нему, мы для удоб­
ства поместим в ту же страницу app.php. А пересылать данные из веб-формы станем
методом POST.
Веб-форма пересылает введенные в нее данные самостоятельно — для этого необ­
ходимо лишь нажать кнопку отправки данных. Данные могут быть отправлены как
методом POST, так и методом GET.
B РНР-коде данные, переданные методом POST (POST-параметры), хра­
I нятся в автоматически создаваемом ассоциативном массиве $ p o s t .
Выгруженные файлы в РНР хранятся в ассоциативном массиве $ files .
Каждый его элемент также представляет собой ассоциативный массив, хра­
нящий различные сведения о полученном файле (в частности, «временное»
имя, размер и тип).
1. Создадим в корневой папке веб-сервера файл add.php с таким начальным HTML-
кодом:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<ti11е>Добавление изображения</1itle>
<link href="18.3.css" rel="stylesheet" type="text/css">
</head>
<body>
<Ь1>Добавление изображения</Ы>
<form action="/add.php" method="post"
enctype="multipart/form-data">
<р>Изображение:<br><input type="file"
name="file" accept=" .jpg" requiredx/p>
<р>Описание:<br><textarea
name="description"x/textareax/p>
<pxinput type="submit" name="submit"
уа1ие="Добавить "x/p>
</form>
<p><a href="/">Ha3afl</a></p>
</body>
</html>
Урок 18. С ер в ер н ы е в еб -пр и ло ж ени я. П л а т ф о р м а Р Н Р 297

В форме мы создали:
• поле выбора файла file, принимающее только файлы с расширением jpg и
обязательное к заполнению, — для указания файла с добавляемым изображе­
нием;
• область редактирования description — для занесения описания;
• КНОПКУ ОТПраВКИ ДаН Н Ы Х submit.

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

закодированы методом multipart/form-data (указан В атрибуте enctype тега
<form>).

Данные из формы на странице add.php будут отправлены для обработки и сохра­

нения той же самой странице — add.php (см. значение атрибута action тега
<form>). Это значит, что при добавлении нового изображения эта страница будет
загружена и обработана дважды:
• первый раз — когда пользователь переходит на нее, намереваясь добавить
в галерею изображение;
• второй раз — когда пользователь нажимает кнопку отправки данных, чтобы
сохранить указанное им в форме изображение в галерее.
Определить, в какой раз открывается страница, мы можем, проверив существо­
вание в ассоциативном массиве $_p ost какого-либо POST-параметра— напри­
мер, submit (он соответствует КНОПКе отправки данных submit). Если он в масси­
ве есть, мы сохраняем полученный файл и выполняем перенаправление на стра­
ницу галереи, чтобы пользователь сразу увидел добавленное изображение.
2. Поместим в самом начале HTML-кода фрагмент на языке РНР, который прове­
рит, во второй ли раз была загружена страница (добавленный код здесь и далее
выделен полужирным шрифтом):
<?php
if (isset ($_POST ['submit '])) {
}
?>
<!doctype html>

Функция isset возвращает true, если ей была передана существующая перемен­

ная или элемент массива.
3. Поместим в только что написанное условное выражение код, вычисляющий
пути к папкам images и descriptions:
<?php
if (isset($_POST['submit'])) {
$images_folder = '/images/';
$descriptions_folder = '/descriptions/ ';
$current_dir = dimame ($_SEKVER[ 'SCRIPT_FILENAME ']) ;
298 Ч аст ь IV. В з аи м о д е й с т в и е с сервером

$image s_path = $current_dir . $iroages_folder;

$descriptions_path = $current_dir . $descriptions_folder;
}
?>

В ним ание!
Сохранять выгруженный файл в PHP под его изначальным именем не рекоменду­
ется — если в имени присутствуют символы кириллицы, они будут преобразованы
в нечитаемые последовательности символов. Это происходит из-за ошибки в про­
граммном ядре платформы, не исправленной до сих пор.

4. Мы будем сохранять выгруженные файлы под именами вида:

<год><№ м е с я ц а х ч и с л о х ч а сы хм инут ы хсекунды >

Допишем код, который будет формировать такое имя файла:

<?php
if (isset ($_POST ['submit']) ) {

$d = getdate(time());
$file_base_name = $d['year'] . $d['mon'] . $d['mday'] .
$d['hours'] . $d['minutes'] . $d['seconds'];
}
?>
Вызовом функции time мы получаем текущую временную отметку в стиле
UNIX, а «пропустив» ее через функцию getdate, вызванную без второго пара­
метра, — ассоциативный массив с различными частями даты и времени. Далее
мы извлекаем элементы этого массива и составляем из них имя файла.
РНР временно сохраняет все выгруженные файлы в особой папке под «времен­
ными» именами. «Временное» имя каждого файла хранится в элементе с клю­
чом tmp name ассоциативного массива, содержащего сведения о файле. Все эти
файлы должны быть перемещены на место постоянного хранения.
5. Добавим код, формирующий имя для выгруженного файла с изображением и
сохраняющий его в папке images:
<?php
if (isset ($_POST ['submit']) ) {

$image_file_name = $images_path . $file_base_name . '.jpg ';

move_uploaded_file ($_FILES ['file '] ['tmp_name '] ,
$image_file_name ) ;
}
?>
Функция move uploaded file сохраняет полученный из формы файл, чье «вре­
менное» имя указано в первом параметре, по пути из второго параметра.
6. Теперь следует проверить, занес ли пользователь описание для картинки, и если
это так, сохранить его в текстовом файле с тем же именем в папке descriptions.
У р о к 18. С е р в ер н ы е в еб -пр и ло ж е ни я. П л а т ф о р м а Р Н Р 299

7. Добавим код, сохраняющий описание (если оно есть):

<?php
if (isset ($_POST ['submit']) ) {

if (isset ($_POST ['description ']) £6

!empty ($_POST [1description '])) {
$description_file_name = $descriptions_path .
$file_Jbase_name . '.txt';
$file = fopen ($description_file_name, 'w');
fwrite($file, $_POST['description']);
fclose ($file) ;
}
}
?>
Сначала проверяем, присутствует ли в массиве $_p ost элемент с ключом
description и не содержит ли он пустую строку или строку из одних пробелов
(нам поможет функция empty, возвращающая true, если ей была передана такая
строка). Далее формируем имя файла с описанием, открываем его на запись (вы­
звав функцию fopen со вторым параметром 'w'), записываем в него описание
(вызовом функции fwrite) и закрываем (вызвав функцию fciose).
8. Допишем код, выполняющий перенаправление на страницу с фотогалереей:
<?php
if (isset ($_POST [1submit']) ) {

header('Location: / ') ;
}
?>
Функция header вставляет в отправляемый клиенту ответ заданный заголовок.
Заголовок — находится в начале серверного ответа (или клиентского запро­
са), содержит сведения о передаваемых данных или какое-либо указание
веб-обозревателю (веб-серверу).
Указание выполнить перенаправление по заданному интернет-адресу,, отправ­
ляемое веб-обозревателю, записывается заголовком следующего формата:
Location: <целевой интернет-адрес>
После перенаправления выполнять остальной код серверной страницы ни к чему.
9. Добавим выражение, завершающее работу серверного приложения вызовом
функции exit:
<?php
if (isset($_POST[fsubmit1])) {

exit() ;
}
?>
300 Ч аст ь IV. В за и м о д е й с т в и е с сервером

10. Откроем страницу index.php и вставим между заголовком и элементом

photogallery гиперссылку на страницу добавления изображения:
<Ь1>Фотогалерея</Ь1>
< р Х а href="/add.php">Добавить изображвнив</аХ/р>
<section id="photogallery,,>

</section>

Запустим веб-сервер, откроем страницу фотогалереи, перейдем на страницу добав­

ления изображения и добавим в галерею несколько новых картинок.
По умолчанию РНР позволяет отправлять на сервер файлы размером не бо­
лее 2 Мбайт. Увеличить максимальный допустимый размер пересылаемого
файла можно в настройках РНР (см. пршожение 2).

18.6. Самостоятельные упражнения

♦ Сделайте так, чтобы в качестве названия (задается в теге < titie> ) страницы
get.php выводилось описание просматриваемого изображения, если оно есть.
♦ Реализуйте удаление изображений.
Подсказка :
• поместите на странице get.php веб-форму со скрытым полем паше, хранящим
имя выведенного изображения (то самое, что передается этой странице
с GET-параметром image), и кнопкой отправки данных submit;
• добавьте в начало той же страницы РНР-код, срабатывающий, если в составе
полученных POST-параметров есть параметр submit;
• для удаления файла используйте функцию unlink:
unlink {< п угь к удаляемому файлу>)

• не забудьте, что нужно также удалить файл с описанием, если он есть;

• после удаления выполните перенаправление на страницу с фотогалереей.
 Урок 19
Разработка фронтендов
и бэкендов
Фронтенды и бэкенды
Веб-службы
Отправка данных веб-службам средствами AJAX

19.1. Веб-разработка: старый и новый подходы.

Фронтенды и бэкенды. Веб-службы
В настоящее время в веб-программировании находят применение два подхода: ста­
рый и новый.
♦ Старый подход — серверные приложения генерируют полноценные веб­
страницы, обрабатываемые непосредственно веб-обозревателями. Применяется
при разработке традиционных сайтов (см. урок 18).
♦ Новый подход — серверные приложения генерируют фрагменты HTML-кода
или данные в формате JSON. Загрузка, обработка и вывод таких данных выпол­
няются веб-сценариями (часто— очень сложными) с применением техноло­
гии AJAX. Применяется при программировании сверхдинамических сайтов
(см .разд. 17.2).
Новый подход имеет перед старым ряд преимуществ:
♦ повышение быстродействия — поскольку пересылка по Сети компактных
HTML-фрагментов и JSON-файлов выполняется значительно быстрее, нежели
доставка объемных веб-страниц;
♦ уменьшение нагрузки на серверный компьютер— поскольку генерирование
HTML-фрагментов и JSON-файлов отнимает меньше системных ресурсов;
♦ возможность повторного использования полученных данных— одни и те же
JSON-данные могут быть выведены на странице в разных форматах (например,
в виде краткого списка и подробной таблицы).
Сайт, написанный с применением нового подхода, состоит из двух частей: фрон-
тенда и бэкенда.
Фронтенд — вся совокупность клиентских веб-приложений, работающих
I в веб-обозревателе и взаимодействующих с пользователем.
302 Ч аст ь IV. В заи м о д е й с т в и е с сервером

Бэкенд — вся совокупность серверных веб-служб, работающих совместно

I с веб-сервером и обслуживающих фронтенд.
UВеб-служба — серверное веб-приложение, генерирующее данные в форма-
II те JSON или фрагменты HTML-кода.

19.2. Упражнение. Новая фотогалерея.

Вывод списка миниатюр
Напишем версию фотогалереи, основанную на новом подходе и состоящую из
фронтенда и бэкенда.
1. В папке 19\!sources сопровождающего книгу электронного архива (см. приложе­
ние 3) найдем папки images, descriptions, файлы styles.css и ajaxloader.js и скопируем
их в корневую папку веб-сервера из пакета ХАМРР. В папках images и descriptions
хранятся, соответственно, сами изображения и описания к ним,
в файле styles.css — таблица стилей для оформления фотогалереи, а в файле
ajaxloader.js— код компонента AJAXLoader, который мы написали в разд. 17.6 и
который сейчас используем для загрузки данных.
2. Начнем с написания бэкенда — веб-службы get.php, которая будет искать файлы
в папке images и пересылать фронтенду их перечень в виде JSON-нотации объек­
та СО СВОЙСТВОМ data, ХраНЯЩИМ МаССИВ объектов СО свойствами path (ссылка на
очередной файл) и id (идентификатор файла — его имя без расширения).
Создадим в корневой папке файл get.php и сохраним в нем такой код:
<?php
$images_folder = '/images/f;
$current_dir = dirname($_SERVER[*SCRIPT_FILENAME']);
$output['data'] = [];
$path = $current_dir . $images_folder;
if ($dh = opendir($path)) {
while (($file = readdir($dh)) !== false){
if ($file != && $file != {
$el['path'] = $images_folder . $file;
$el['id *] = pathinfo($file, PATHINFO_FILENAME);
$output['data'][] = $el;
}
}
closedir($dh);
}
$json = json_encode($output);
echo $json;
?>
В переменной $output создаем ассоциативный массив, содержащий элемент
с ключом data, в котором и сохраняем массив с файлами. Аналогичным образом
формируем ассоциативные массивы, хранящие сведения об отдельных файлах.
У ро к 19. Р а з р а б о т к а ф ро н т ен д о в и бэкендов 303

Для добавления элемента в массив применяем поддерживаемую РНР конструк­

цию вида:
<переменная с массивом>[] = <зн ачен ие н о во го элемента>;

Для кодирования готового массива в формат JSON используем функцию

json encode. Она корректно преобразует ассоциативные массивы РНР в JSON-
нотации объектов.
Чтобы отправить закодированные в формат JSON данные клиенту, применяем
знакомый оператор вывода echo.
3. Проверим, как работает готовая веб-служба. Запустим веб-сервер и в веб­
обозревателе перейдем по интернет-адресу http://Iocalhost/get.php. Мы увидим
перечень файлов в формате JSON (рис. 19.1).

<- -> С ® loealhost/getphp * © :

{"data":
[{"path":"VimagesV201904Q2114732jpg","id":"20i90402114732"},
{"path":"VimagesV20190402114802jpg”."id":"20190402114802м},
{"path":"VimagesWO190402141454jpgVid" ;*20190402141454"},
{'"path":"Vmiag«V20i90510170602jpgVuJV'SO190510170602"},
{"pa&":'VimagesV20190510170618.jpgV'id":"20190510170618"},
{'path”:HVnnagesV20190510170647jpgM/,idu:,,20190510170647"},
{"path":"VimagesV20190510170709 jpg","id":"20190510170709"}]}

Рис. 19.1. Перечень файлов в формате JSON

4. Теперь можно приступить к программированию фронтенда.

Напишем компонент PGList, загружающий и выводящий список изображений,
сохранив его код в файле сценария pglist.js. Для загрузки списка изображений
применим компонент AJAXLoader. ЭТОТ И ВСе Последующие КОМПОНеНТЫ, КОТОрые
мы напишем, будут формировать программно все содержимое страницы. Следо­
вательно, в качестве базового элемента для них мы можем использовать секцию
тела страницы (тег <body>).
Создадим в корневой папке файл pglist.js с кодом компонента PGList:
const PGList = (function () {
function show(response) {
const data = JSON.parse(response).data;
document.body.innerHTML =
let hi = document.createElement(fhl');
hi.textContent = fФотогалерея';
document.body.appendChild(hi);
let section = document.createElement('section*);
section.id = 'photogallery';
let a, img;
304 Ч аст ь IV. В з аи м о д е й с т в и е с сервером

data.forEach((el) => {
а = document.createElement('a ');
img = document.createElement(1img');
img.src = el.path;
a .appendChild(img );
section.appendChild(a);
});
document.body.appendChild(section);
document.title = fФотогалерея';
window.scrollTo(0, 0);
}
function PGList() {
this.ajax = new AJAXLoader();
this.ajax.load(*get.php', show);
}
return PGList;
}) () ;
Обычно конструктор компонента принимает в качестве первого параметра базо­
вый элемент. Но в нашем случае это не нужно, поскольку базовым элементом
всегда будет выступать секция тела страницы.
Конструктор сразу же создаст объект компонента AJAXLoader и запустит загрузку
данных, формируемых веб-службой get.php.
Функция show выполнится после получения данных, создаст заголовок страни­
цы, список миниатюр, задаст для страницы название Фотогалерея и прокрутит
ее содержимое в самый верх.
5. Закончив компонент, приступим к работе над одной-единственной страницей
нашего сверхдинамического сайта — index.html — и создадим в корневой папке
файл index.html с таким кодом:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="styles.css" rel="stylesheetM type=,,text/css">
<script src="ajaxloader.js" type="text/javascript"x/script>
<script src="pglist.js" type="text/javascript"x/script>
</head>
<body>
</body>
</html>
<script type="text/javascript">
let component = new PGList();
</script>
У ро к 19. Р а з р а б о т к а ф р о н т ен д ов и б экендов 305

Не забываем привязать таблицу стилей 81у1е8.с88, файлы сценария а]ах1оас*ег.]8

и рдН$ф. Поскольку название и все содержание страницы будут формироваться
программно, оставим теги < ^ 1 е > и <Ьос1у> пустыми.
В веб-обозревателе перейдем по интернет-адресу ЬНр://1оса11ю81/ — и увидим нашу
сверхдинамическую фотогалерею (рис. 19.2).

Р и с . 19.2. С в е р х д и н а м и ч е с к а я ф о т о га л е р е я , о с н о в а н н а я на но вом п о д хо д е
и с о с т о я щ а я из ф р о н т е н д а и б экенд а

19.3. Упражнение. Новая фотогалерея.

Показ изображений
Сделаем так, чтобы при щелчке на миниатюре выводилась полная редакция изо­
бражения с описанием (если таковое есть).
Средства для выдачи сведений о запрашиваемом изображении встроим в написан­
ную ранее веб-службу get.php. При этом:
♦ если эта веб-служба получит GET-параметр image с идентификатором файла, она
вернет сведения об этом файле— JSON-нотацию объекта со свойством data,
хранящим объект со свойствами path (ссылка на файл) и description (описание,
может отсутствовать);
♦ если веб-служба не получит GET-параметр image, она, как и ранее, выдаст
перечень файлов с изображениями.
306 Ч аст ь IV. В з а и м о д е й с т в и е с сервером

1. Откроем веб-службу get.php и допишем необходимый код (выделен полужирным

шрифтом):
<?php
$images_folder = '/images/';
$current_dir = dirname($_SERVER['SCRIPT_FILENAME']);
$output['data'] = [];
if (isset($_GET[ 'image' ]) ) {
$output ['data '] ['path '] = $images_folder . $_GET ['image '] .
' -jp g ' ;
$descriptions_folder = '/descriptions/ ';
$path = $current_dir . $descriptions_folder . $_GET ['image '] .
'.txt';
if (file_exists($path))
$output ['data '] ['description '] = file_get__contents ($path) ;
} else {
$path = $current_dir . $images_folder;
if ($dh = opendir($path)) {

}
>

?>
2. На этом доработки бэкенда закончены. Приступим к написанию фронтенда
и, в частности, компонента, выводящего изображения.
Вывод изображения будет выполняться по щелчку на гиперссылке в списке
миниатюр (он В Ы В О Д И Т С Я компонентом PGList). Компоненту, который выведет
изображение, нужно передать его идентификатор. Будем передавать его через
интернет-адрес гиперссылки, записав в виде якоря такого формата:
get=<идентификатор изображения>

Итак, откроем файл pglist.js и дополним код компонента PGList:

const PGList = (function () {
function show(response) {

data.forEach((el) => {
a = document.createElement('a ');
a. href = '#get= ' + el. id;
img = document.createElement ('img ');

}) ;

}) 0 ;
У р о к 19. Р а з р а б о т к а ф р о н т ен д ов и бэкендов 307

3. Напишем компонент, который будет выводить изображение с идентификатором,

полученным с первым параметром. Дадим ему имя PGitem и сохраним в файле
сценария pgitem.js.
Для этого создадим в корневой папке файл pgitem.js и введем в него код:
const PGitem = (function () {
function show(response) {
const data = JSON.parse(response).data;
const desc = data.description || 'Изображение’;
document.body.innerHTML =
let hi = document.createElement('hi');
hi.textContent = desc;
document.body.appendChild(hi);
let section = document.createElement('section');
section.id = 'photo';
let img = document.createElement('img');
img.src = data.path;
section.appendChild(img);
document.body.appendChild(section); •
let p = document.createElement('p');
let a = document.createElement('a');
a.href = ";
a .textContent = 'Назад';
p .appendChiId(a);
document.body.appendChild(p);
document.title = desc;
window.scrollTo(0, 0);
}
function PGitem(id) {
this.ajax = new AJAXLoader();
this.ajax.load('get.php?image=' + id, show);
}
return PGitem;
}) () ;
В конструкторе сразу же запускается загрузка сведений об изображении с ука­
занным в параметре идентификатором. После загрузки выполнится функция
show — она выведет заголовок страницы, изображение и гиперссылку Назад
с «пустым» интернет-адресом.
4. Откроем файл страницы index.html и добавим в секцию заголовка (тег <head>) тег
<script>, привязывающий файл pgitem.js:
<head>

<script src="pgitem. js" type="text/javascript"X/script>

</head>
308 Ч аст ь IV. В з аи м о д е й с т в и е с сервером

5. При щелчках на гиперссылках фактически будет выполняться переход по яко­

рям. Выяснять, по какому якорю был выполнен переход, и активизировать нуж­
ный компонент удобнее в обработчике события hashchange окна. При этом:
• если якорь записан в формате: gеь=<идентификатор изображения> , нужно соз­
дать объект компонента PGitem, передав ему полученный идентификатор;
• если якорь «пуст»---нужно создать объект компонента PGList.
Удалим весь JavaScript-код, имеющийся в составе страницы index.html, и заменим
его кодом, выполняющим маршрутизацию:
let component;
function route() {
let hash = location.hash;
const getRE = /get=(\d+)/i;
let result;
if (result = getRE.exec(hash))
component = new PGitem(result[1]);
else if (!hash)
component = new PGList();
}
window.addEventListener('hashchange', route);
route();

Декоративная мельница, г. Вс/ X

<r -*> С Ф localhost/#get=20130510170602

Декоративная мельница, г.
Волжский.

Назад

Рис. 19.3. Полная редакция выбранного изображения

Урок 19. Р а з р а б о т к а ф ро н т в нд ов и б эквндов 309

Маршрутизация — вывод на страницу того или иного компонента в зави­

симости от якоря, по которому был выполнен переход.
Обработчик события hashchange окна мы реализовали в виде функции route. Для
проверки факта щелчка на миниатюре и выделения идентификатора из якоря
применили регулярное выражение.
Сразу после открытия страницы событие hashchange не возникает. Поэтому
в конце кода мы вызвали эту функцию явно.
Запустим веб-сервер и перейдем по интернет-адресу http://Iocalhost/. Щелкнем на
какой-либо миниатюре— и увидим полную редакцию соответствующего изобра­
жения (рис. 19.3).

19.4. Отправка веб-службе данных

методом POST
Данные, отправляемые методом POST, указываются в вызове метода send объекта
AJAX:
send (<отправляемые данные>)

При этом в предшествующем вызове метода open в первом параметре следует ука­
зать строку 1POST*.
Отправить данные методом POST можно тремя способами.

19.4.1. Отправка веб-формы целиком

Если нужно отправить веб-службе все данные, занесенные в форму, можно посту­
пить следующим образом:
♦ получить DOM-объект формы;
♦ создать с помощью оператора new объект класса FormData, указав в качестве
параметра полученный ранее объект формы;
♦ передать методу send объекта AJAX только что созданный объект класса
FormData.
Пример:
<form id=,,frm">

</form>

const frm = document.getElementByld( 'frm*);

const fd = new FormData (frm) ;
const ajax = new XMLHttpRequest();
ajax.open( 'POST*, ' add.php', true);
ajax.send(fd);
310 Ч аст ь IV. В з аи м о д е й с т в и е с сервером

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

с применением метода muitipart/fom-data. Благодаря этому становится
возможным отправлять файлы.

19.4.2. Отправка произвольных данных

Для отправки веб-службе методом POST произвольных данных (часть которых,
возможно, взята из веб-формы) нужно:
♦ создать объект класса FomData без указания параметров;
♦ добавить в него все нужные значения, воспользовавшись методом append этого
объекта:
append {<имя POST-napaMeTpa>г <значение>)

Имя POSТ-параметра указывается В ВИДе СТрОКИ, зн ачен ие, еСЛИ Не ЯВЛЯеТСЯ СТрО­
кой, будет преобразовано в строку;
♦ если нужно добавить файлы, применив другой формат вызова метода append:
append (<имя РОБТ-параметра>, <файл>[, <имя файла>])

Файл указывается в виде объекта класса File (см.разд. 13.1), имя файла задается
в виде строки. Если же оно не указано, отправляемый файл получит имя 'ЫоЬ';
♦ передать методу send объекта AJAX объект класса FomData с добавленными
в него данными.
Пример:
const description = document.getElementByld(description1);
const image = document.getElementByld(fimage1);
const fd = new FomData ();
fd.append('description', description.value);
fd.append(fimage1, image.files[0], image.files[0].name);
fd.append('operation', faddimage1);
const ajax = new XMLHttpRequest();
ajax.open(1POSTf, 'add.php', true);
ajax.send(fd);

19.4.3. Отправка данных

в виде строки POST-параметров
Если объем отправляемых методом POST данных невелик и не включает файлы,
можно отправить их в виде строки, для чего:
♦ закодировать отдельные передаваемые значения, применив встроенную в JavaScript
функцию encodeURIComponent:
encodeURIComponent(<кодируемое зн ачен и е> )

Закодированное значение возвращается в качестве результата.

У р о к 19. Р а з р а б о т к а ф ро н т ен д о в и бэкендов 31 1

Кодирование необходимо ТОЛЬКО В ТОМслучае, если зн ачен ие содержит символы,

отличные от букв латиницы и цифр;
♦ свести их в пары вида:
<имя Р05Т-параметра>=<закодированное значение>

♦ объединить пары в одну строку и отделить их друг от друга амперсандами (&);

♦ добавить в отправляемый веб-серверу запрос заголовок вида:
Content-Type: <метод кодирования данных>

Сделать ЭТОМОЖНО ВЫЗОВОМ метода setRequestHeader у объекта AJAX:

setRequestHeader{<имя за го л о вк а > , <значение за го ло вка > )

В качестве имени за го л о вк а Следует указать Строку ' Content-Type', а В качестве

Значения— Строку 'application/x-www-form-urlencoded' ИЛИ 'multipart/form-
data';

♦ передать методу send объекта AJAX получившуюся строку.

Пример:
const imageld = document.getElementByld ('image_id ’)
const comment = document.getElementByld('comment')
// Идентификатор изображения, заданный в поле imageld, содержит
// только цифры, поэтому его кодировать необязательно
let s = 'image=' + imageld.value;
s += '&comment=' + encodeURIComponent(comment.value);
s += '&operation=delete1;
const ajax = new XMLHttpRequest();
ajax.open(?POST1, 'delete.php', true);
aj ax.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
ajax.send(s);

19.5. Упражнение. Новая фотогалерея.

Загрузка изображений в галерею
Реализуем в новой фотогалерее средства для загрузки в нее новых изображений.
Для этого в состав бэкенда добавим веб-службу add.php, которая сохранит загру­
женный на сервер файл и его описание. Данные она получит в тех же POST-
параметрах, что и страница app.php из разд. 18.5.
1. Добавим в корневую папку веб-сервера файл add.php с таким кодом:
<?php
$images_folder = ’/images/';
$descriptions_folder = '/descriptions/';
312 Ч аст ь IV. В з аи м о д е й с т в и е с сервером

$current_dir = dirname($_SERVER['SCRIPT_FILENAME']);
$images_path = $current_dir . $images_folder;
$descriptions_path = $current_dir . $descriptions_folder;
$d = getdate(time ());
$file_base_name = $d[fyear'] . $d['mon'] . $d['mday'] . $d[fhours’] .
$d[’minutes'] . $d['seconds'];
$image_file_name = $images_path . $file_base_name . '.jpg’;
move_uploaded_file ($_FILES ['file '] ['tmp_name ’], $image_file_name) ;
if (isset ($_POST [’description']) && !empty ($_POST ['description']) ) {
$description_file_name = $descriptions_path . $file_base_name .
'.txt';
$file = fopen($description_file_name, 'w');
fwrite($file, $_POST['description']);
fclose($file);
}
$output['data']['status'] = 1;
$json = json_encode($output);
echo $json;
?>
В самом конце мы отсылаем клиенту ответ — JSON-нотацию объекта со свойст­
вом data, которое хранит объект со свойством status, содержащим число 1. Так
мы уведомим клиента, что операция была успешно выполнена.
2. Теперь— фронтенд. Условимся, что компонент, реализующий форму для за­
грузки изображения (мы напишем его совсем скоро), будет выводиться на экран
при переходе ПО якорю add. И Сразу же добавим В КОД компонента PGList, выво­
дящего список миниатюр, фрагмент, который создаст гиперссылку Добавить
изображение.
Откроем файл pglist.js и внесем в него следующие правки:
const PGList = (function () {
function show(response) {

document.body.appendChild(hi);
let p = document.createE lament ('p ') ;
let a = document.créateElement('a ');
a .href = '#add';
a .textContent = 'Добавить изображение';
p.appendChild(a);
document.body.appendChild(p);
let section = document.createElement('section');
section.id = 'photogallery';
let ат— img;
data.forEach((el) => {
У рок 19. Р а з р а б о т к а ф ро н т ен д о в и бэкендов 313

}) () ;
3. Теперь добавим в компонент AJAXLoader метод loadPOST, который отправит
методом POST данные веб-службе и загрузит результат ее работы. Первым
параметром он получит интернет-адрес веб-службы, вторым— отправляемые
данные, третьим — функцию, вызываемую после успешной загрузки, необяза­
тельным четвертым — функцию, вызываемую в случае неудачи.
Итак, откроем файл ajaxloader.js и добавим в него объявление метода loadPOST:
const AJAXLoader = (function () {

AJAXLoader.prototype.load = function (url, success, error) {

AJAXLoader.prototype.loadPOST = function (url,

data, success, error) (
this.ajax.success = success;
this.ajax.error = error || this.defaultErrorHandler;
this, a jsue.open (AJAXLoader. POST, url, true) ;
this.ajax.send (data) ;
);
AJAXLoader.loadHTML = function (url, el) {

};
return AJAXLoader;
}) () ;
4. Напишем компонент PGAdd, который выведет форму для выбора изображения,
загрузит изображение на сервер и в случае успеха выполнит перенаправление на
список миниатюр.
Создадим в корневой папке файл pgadd.js с кодом этого компонента:
const PGAdd = (function () {
let __ajax, __file, __description;
function redirect() {
location.hash =
}
function sendData(evt) {
const fd = new FormData();
fd.append('file’, __file.files[0], __file.files[0].name);
if (__description.value)
fd.append('description', description.value);
__ajax = new AJAXLoader();
__ajax.loadPOST('add.php', fd, redirect);
evt.preventDefault();
}
314 Ч аст ь IV. В з аи м о д е й с т в и е с сервером

function PGAdd() {
document.body.innérHTML = '';
let hi = document.createElement('hi');
hi.textContent = 'Добавление изображения';
document.body.appendChiId(hi);
let form = document.createElement('form');
let p = document.createElement('p');
let txt = document.createTextNode('Изображение');
p .appendChiId(txt);
let br = document.createElement('br*);
p.appendChiId(br);
__file = document.createElement('input');
__file.type = 'file';
__file.id = 'file';
__file.accept = '.jpg';
__file.required = true;
p.appendChiId( file);
form.appendChild(p);
p = document.createElement('p ');
txt = document.createTextNode('Описание');
p .appendChiId(txt);
br = document.createElement('br');
p.appendChiId(br);
__description = document.createElement('textarea');
__description.id = 'description';
p.appendChiId(__description);
form.appendChiId(p);
p = document.createElement('p');
let input = document.createElement('input');
input.type = 'submit';
input.value = 'Добавить';
p .appendChiId(input);
form.appendChiId(p);
document.body.appendChiId(form);
form.addEventListener('submit', sendData);
p = document.createElement('p');
let a = document.createElement('a');
a .href = '';
a .textContent = 'Назад';
p.appendChiId(a);
document.body.appendChiId(p);
document.title = 'Добавление изображения';
window.scrollTo(0, 0);
}
return PGAdd;
}) () ;
Урок 19. Р а з р а б о т к а ф р о н т ен д ов и бэкендов 315

Конструктор класса выводит на экран заголовок, веб-форму для выбора изобра­

жения и гиперссылку Назад. К форме привязывается обработчик события
submit — функция sendData.

Переменные_file и _description, хранящие, соответственно, поле для выбора

файла с изображением и область редактирования для ввода описания, должны
быть доступны не только в конструкторе, но и в функции sendData. Поэтому мы
объявили их непосредственно в замыкании, как и переменную_ajax, в которую
будет занесен объект AJAX.
Функция sendData создает объект AJAX, с его помощью отправляет веб-службе
add.php изображение и описание к нему (если оно введено). Функция redirect,
вызывающаяся после получения результата от веб-службы, выполняет переход
по «пустому» интернет-адресу, что вызовет перенаправление на список ми­
ниатюр.
5. Откроем страницу index.html в текстовом редакторе и дополним ее код следую­
щим образом:
<html>
<head>

<script src="pgadd. js" type="text/javascript"X/script>

</head>
<body>
</body>
</html>
<script type="text/javascript">

function route() {

if (result = getRE.exec(hash))
component = new PGItem(result[1]);
else if (hash = '#add')
component = new PGAddO ;
else if (!hash)
component = new PGList();
}

</script>

Запустим веб-сервер и откроем наш сайт. Перейдем на компонент добавления изо­

бражения и загрузим в галерею новую картинку.
316 Ч аст ь IV . В за и м о д е й с т в и е с сервером

19.6. Самостоятельные упражнения

♦ Сделайте так, чтобы при переходе от просмотра выбранного изображения на
список миниатюр этот список прокручивался к изображению, просматривавше­
муся ранее.
♦ Реализуйте удаление изображений.
♦ Сделайте так, чтобы при указании в интернет-адресе якоря неподдерживаемого
формата выводилось предупреждение о том, что такая страница отсутствует
(«ошибка 404»), и гиперссылка на список миниатюр.
 Урок 20
Серверные сообщения
Серверные сообщения
Поддержание соединения
Объявление своих событий

20.1. Использование серверных сообщений

Если веб-обозревателю понадобится какой-либо файл, хранящийся на веб-сервере
(страница, изображение, внешняя таблица стилей, JSON-данные, загружаемые
посредством AJAX), он отправит клиентский запрос на загрузку этого файла.
Если же веб-службе понадобится переслать что-либо веб-обозревателю, у нее два
выхода из этого положения:
♦ ждать, когда веб-обозреватель проявит инициативу и соизволит отправить
запрос к ней;
♦ использовать технологию серверных сообщений.
Серверное сообщение — текстовое сообщение, пересылаемое веб-службой
веб-обозревателю по своей инициативе (а не по инициативе веб-обозре­
вателя).

20.1.1. Что представляет собой

серверное сообщение?
Серверное сообщение:
♦ формируется в виде обычной строки;
♦ записывается в одну строку в формате:
data: <содержание сообщения>.

Пример:
data: Это серверное сообщение. Всем привет!

Пробел между двоеточием в префиксе data : и содержанием сообщения необязате­

лен;
♦ может иметь в качестве содержания как обычный текст, так и данные в формате
JSON:
data: {"type": "greeting", "content": "Всем привет!"}
318 Ч аст ь IV. В за и м о д е й с т в и е с сервером

♦ отделяется от следующего серверного сообщения двойным разрывом строки:

data: (Сообщение 1) Это ваша веб-служба,

data: (Сообщение 2) Здравствуйте!

data: (Сообщение 3) Не соскучились?

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

префиксами и отправляемые вслед за содержанием. Эти служебные данные мы
рассмотрим позже.

20.1.2. Отправка серверных сообщений

Для отправки серверных сообщений бэкенд должен:
♦ указать в заголовке Content-Type в качестве MIME-типа пересылаемых данных
text/event-stream (для добавления заголовка в РНР можно использовать функ­
цию header);
♦ отключить кеширование сообщений в веб-обозревателе, задав заголовок Cache­
Control СО значением no-cache;
♦ сформировать текст очередного сообщения, завершив его двумя разрывами
строк — двумя строковыми литералами \п\п;
♦ отправить сообщение оператором вывода echo;
♦ инициировать принудительную отправку сообщения веб-обозревателю, вызвав
не принимающую параметров функцию flush (если этого не сделать, сообщения
будут отправлены только после завершения работы веб-службы).
Вот пример веб-службы ssm.php, отправляющей два серверных сообщения:
<?php
header('Content-Type : text/event-stream' );
header('Cache-Control: no-cache');
echo "data: Здравствуйте! Это ваша веб-служба.\n\n";
flush();
echo "data: He соскучились?\n\n";
flush();
?>

20.1.3. Прием серверных сообщений

Для получения серверных сообщений фронтенд должен:
♦ создать оператором new объект класса Eventsourœ:
new ЕventSourсе (<интернет-адрес веб-служ бы, Ь
отправляющей серверны е сообщения>)

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

самым запустив ее на выполнение, и станет ожидать поступления сообщений
от нее;
Урок 20. С е р в ер н ы е со о б щ ен и я 319

♦ привязать к событию message этого объекта, возникающему при получении сер­

верного сообщения, обработчик;
♦ в теле этого обработчика получить содержание сообщения из свойства data объ­
екта события. Если содержание сообщения представляет собой JSON-данные, —
декодировать их {сы.разд. 17.4),
Вот пример соединения с веб-службой ssm.php и обработки отправляемых ей сер­
верных сообщений:
const es = new Еventsourс е ('ssm.php');
es.addEventListener('message', (evt) => {
let messageData = evt.data;
// Обрабатываем полученное сообщение
};
Класс Eventsource поддерживает свойство readystate, хранящее числовое обозна­
чение текущего состояния соединения:
♦ о — соединение с веб-службой устанавливается;
♦ 1 — соединение установлено, идет прием сообщений;
♦ 2 — соединение закрыто.
Помимо события message, класс Eventsource поддерживает следующие события:
♦ open — возникает сразу после установки соединения с веб-службой;
♦ error — возникает при разрыве соединения в результате сетевых неполадок.

20.1.4. Поддержание соединения

и возобновление приема
При внезапном разрыве соединения в результате сетевых неполадок веб-обо­
зреватель будет выполнять попытки восстановить его, пока они не увенчаются
успехом.
Продолжительность паузы между отдельными попытками восстановить соедине­
ние у разных веб-обозревателей различается и может составлять 1-3 сек. Веб­
служба может явно указать продолжительность паузы, отправив в сообщении стро­
ку формата:
retry: <продолжительность паузы в миллисекундах>

Пример:
retry: 60000
data: Нам, веб-службам, торопиться некуда...

Для того чтобы веб-обозреватель смог возобновить получение сообщений с момен­

та его разрыва, нужно, чтобы веб-служба пересылала в составе каждого сообще­
ния — обязательно в самом его конце — строку следующего формата:
id: <уникальный идентификатор сообщения>
320 Ч аст ь IV. В за и м о д е й с т в и е с сервером

Пример:
data: Это ваша веб-служба,
id: 1

data: Здравствуйте!
id: 2

data: Не соскучились ?
id: 3

Получив такой и д е н т и ф и к а т о р , Веб-обозреваТвЛЬ занесет его В СВОЙСТВО lastEventld

объекта класса Eventsource и после возобновления соединения отправит его серве­
ру в заголовке Last-Event-id клиентского запроса. Получив такой заголовок, веб­
служба должна выслать все сообщения, следующие за сообщением с полученным
идентификатором.

20.1.5. Создание своих событий

Есть возможность создать свои события, которые будут возникать в объекте класса
Eventsource и могут быть обработаны наравне со встроенными.
Веб-служба должна отправить в составе сообщения — в самом его начале — стро­
ку формата:
event: < имя со зд а ва ем о го собы т ия>

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

нам переменных JavaScript (см. разд. 1.7).

Пример:
event: newfile
data: {"id": "20190402114732", "паше": "20190402114732.jpg"}

На стороне фронтенда следует привязать к этому событию обработчик:

es.addEventListener('newfile*, (evt) => {
const data = JSON.parse(evt.data);
let filelD = data.id;
let fileName = data.паше;
// Что-либо делаем с полученными данными
}; .

20.1.6. Разрыв соединения

Веб-обозреватель будет постоянно поддерживать соединение с веб-службой, даже
если та уже завершила свою работу. Чтобы явно разорвать соединение, нужно
вызвать не принимающий параметров метод close объекта класса Eventsource:
ex.close();
У р о к 20. С ер в ер н ы е со о б щ ен ия 321

20.2. Упражнение. Новая фотогалерея.

Более отзывчивый список миниатюр
В фотогалерее, написанной в уроке 19, веб-служба деЬрИр формирует перечень ми­
ниатюр в виде массива. Если изображений в фотогалерее много, этот массив ока­
жется очень большим, и фронтенду потребуется много времени, чтобы загрузить
его и вывести на экран. Сделаем так, чтобы бэкенд пересылал этот перечень фрон­
тенду в серверных сообщениях небольшими порциями — по одной миниатюре ка­
ждая.
1. Скопируем в корневую папку веб-сервера из состава пакета ХАМРР все содер­
жимое папки гоМзоигсеэ из сопровождающего книгу электронного архива
(см. приложение 3).
2. Для пересылки перечня миниатюр в серверных сообщениях мы напишем веб­
службу де12.рИр (а веб-службу де^рИр используем, как и ранее, для получения
сведений о выбранном изображении).
Создадим в корневой папке веб-сервера файл де!2.рИр со следующим кодом:
<?php
header('Content-Type: text/event-stream');
header(1Cache-Control: no-cache');
$images_folder = '/images/';
$current_dir = dirname($_SERVER['SCRIPT_FILENAME']);
$path = $current_dir . $images_folder;
$last_id = (isset($_SERVER['LAST_EVENT_ID'])) ?
$_SERVER['LAST_EVENT_ID'] : 0;
$n = 1;
if ($dh = opendir($path)) {
while (($file = readdir($dh)) !== false){
if ($file != ’.' && $file != '..') {
if ($n > $last_id) {
$el['path'] = $images_folder . $file;
$el['id'] = pathinfo($file, PATHINFO_FILENAME);
echo "event: newfile\n";
echo 'data: ' . json_encode($el) . "\n";
echo 'id: ' . $n . "\n\n";
flush();
$n++;
}
}
}
closedir($dh);

echo "event: end\n";

echo "data: \n\n"
?>
322 Ч аст ь IV. В за и м о д е й с т в и е с сервером

Идентификатор последнего полученного фронтендом серверного сообщения,

отправленный в заголовке Last-Event-iD, хранится в ассоциативном массиве
$_server в элементе с ключом LAST EVENT ID. Он понадобится нам, чтобы возоб­
новить передачу миниатюр в случае разрыва соединения.
Мы создали два своих события:
• newfile — для передачи сведений об очередной миниатюре. Сведения пере­
даются в виде JSON-нотации объекта со свойствами i d и p a th ;
• end — для завершения передачи. Передается вместе с «пустым» содержанием.
И не забываем, что в РНР строковые литералы обрабатываются только в стро­
ках, взятых в двойные кавычки.
3. Для вывода нового списка миниатюр напишем компонент P G L is t2 — создадим
в корневой папке файл pglist2.js с кодом этого компонента:
const PGList2 = (function () {
let _section;
function newFile(evt) {
const el = JSON.parse(evt.data);
const a = document.createElement('a ');
a.href = f#get=f + el.id;
const img = document.createElement('img');
img.src = el.path;
a .appendChiId(img);
_section.appendChild(a);
}
function end(evt) {
evt.target.close();
}
function PGList2() {
document.body.innerHTML = '';
let hi = document.createElement('hi');
hi.textContent = 1Фотогалерея *;
document.body.appendChild(hi);
let p = document.createElement('p');
let a = document.createElement('a');
a.href = '#add';
a .textContent = 'Добавить изображениет;
p .appendChiId(a);
document.body.appendChild(p);
_section = document.createElement('section1);
_section.id = 'photogallery';
document.body.appendChild(_section);
document.title = 'Фотогалерея';
window.scrollTo(0, 0);
this.es = new EventSource('get2.php');
this.es.addEventListener('newfile', newFile);
Урок 20. С ер в ер н ы е со о б щ ен ия 323

t h i s .e s .a d d E v e n t L i s t e n e r ('end', e n d ) ;
}
return PGList2;
} ) () ;

В конструкторе на страницу выводятся заголовок, гиперссылка на компонент

ДЛЯзагрузки изображения И «пустой» тег <section>, в котором будут выводиться
миниатюры. После этого устанавливается соединение с веб-службой get2.php и
выполняется привязка обработчиков К событиям n e w file И end.
Обработчик события n e w file создаст гиперссылку с миниатюрой и выведет ее
в созданный ранее тег <section>. Обработчик события e nd просто закроет соеди­
нение с веб-службой.
4. Откроем файл страницы index.html в текстовом редакторе и исправим код таким
образом, чтобы О Н использовал компонент PGList2 (исправления выделены
полужирным шрифтом):
< ! d octype html>
<html>
<head>

<script s r c = " p g l i s t 2 . js" t y p e = " t e x t / j a v a s c r i p t Mx / s c r i p t >

</head>
</html>
<script t y p e = " t e x t / j a v a s c r i p t ”>

function r o u t e () {

else if (lhash)
c o m ponent = n e w PGL±st2();
}

< /script>

Запустим веб-сервер, откроем нашу фотогалерею и убедимся, что список миниатюр

успешно выводится.
 Заключение

На этом книга, посвященная языку программирования JavaScript, закончена. Мы

изучили все наиболее востребованные инструменты самого языка, классов DOM,
ВОМ, HTML API и даже немного познакомились с платформой серверных прило­
жений РНР. Мы запомнили множество новых терминов, языковых конструкций,
классов, свойств и методов. Мы написали десятки учебных веб-страниц, в том
числе пару вполне функциональных интернет-фотогалерей. И теперь с гордостью
можем называть себя веб-программистами.
За рамками рассмотренного в книге осталось не так уж и много:
♦ сп ец и ф и ч еск и е, р ед к о и сп о л ь зу ем ы е и н стр ум ен ты : к л асс с в ед ен и й о в е б -о б о ­
з р е в а т е л е Navigator, КЛаСС ИСТОрИИ В е б -о б о з р е в а т е Л Я History, с р е д с т в а г е о л о к а ­
ц и и , п р о г р а м м н о г о с о з д а н и я о к о н и д р .;

♦ инструменты, недавно введенные в стандарт языка, пока существующие в чер­

новых редакциях и поддерживаемые не всеми веб-обозревателями: HTML-
шаблоны, теневая DOM, «настоящие» компоненты и т. п.;
♦ устаревшие инструменты, оставленные для совместимости и не рекомендуемые
к использованию.
Автор полагает, что если читатель этим заинтересуется, то без особых проблем
сможет найти нужную информацию в Сети. Благо он, после прочтения этой книги,
уже имеет знания, необходимые дня знакомства с упомянутыми инструментами.
Книга, которую вы, уважаемые читатели, только что закончили, описывает про­
граммирование на JavaScript только клиентских веб-сценариев. На самом деле
в настоящее время этот замечательный язык применяется гораздо шире, в том чис­
ле для разработки серверных веб-приложений, бэкендов и обычных оконных про­
грамм. Это стало возможным после появления программной платформы Node.js,
исполняющей JavaScript-код вне веб-обозревателя.
На языке JavaScript написан ряд библиотек, упрощающих выполнение типичных
задач веб-программирования, наподобие привязки обработчиков к событиям
(jQuery, Prototype, rxjs и многие другие), сложные библиотеки (фреймворка) для
написания фронтендов (Angular, React, Vue) и бэкендов (Express, Meteor и др.).
Существуют даже производные языки, призванные устранить некоторые недостат­
ки JavaScript (в частности, неудобный синтаксис объявления классов): TypeScript,
CoffeeScript и Dart. Программы, написанные на этих языках, преобразуются
в обычный JavaScript-код, исполняемый веб-обозревателем (или платформой
Node.js).
326 Заклю чение

Так что у JavaScript— бурное настоящее и многообещающее будущее. И изучать

его, безусловно, стоит!
А чтобы изучение проходило эффективно и увлекательно — воспользуйтесь сле­
дующими полезными интернет-ресурсами по теме книги:
♦ https://developer.mozilla.org/ru/docs/Web/JavaScript — исчерпывающее руко­
водство и справочник по JavaScript, включающий вновь введенные в стандарт
инструменты, пока еще не поддерживаемые всеми веб-обозревателями. Часть
материалов написана на английском языке;
♦ https://www.w3schools.com/— крупный англоязычный сайт, посвященный все­
возможным интернет-технологиям: HTML, CSS, JavaScript, PHP и пр.;
♦ https://vk.com/we_use_js — сообщество JavaScript-программистов в социальной
сети «ВКонтакте»;
♦ https://vk.com/nisnom — другое сообщество социальной сети «ВКонтакте», по­
священное, помимо того, HTML, CSS и PHP.
На этом автор прощается с вами, уважаемые читатели! До свидания и успехов на
ниве JavaScript-программирования!
Владимир Дронов
 Приложение 1
Приоритет операторов

Приоритет Оператор Описание Пример

13 (...) Круглые скобки (10 + 2) / 3

. (точка) Доступ к элементу объекта arr.length

[] Доступ к элементу массива ar r [1]

12
0 Вызов функции func(l, 2)

new Создание объекта new Date ()

++ Инкремент, поставленный i++

после переменной
11
Декремент, поставленный
— count—
после переменной

++ Инкремент, поставленный ++i

перед переменной
Декремент, поставленный
— — count
10 перед переменной
! Логическое НЕ !flag
typeof Получение типа typeof s

9 ★★ Возведение в степень 5**3

★ Умножение 4*3

8 / Деление 10/3

% Остаток от деления 10 % 3

+ Сложение 1 + 2
7
- Вычитание 2-1

< Меньше X < у

<= Меньше или равно X <= у

> Больше X > у

6 >= Больше или равно X >= у

in
Проверка существования 'prop ' in obj
свойства
instanceof Принадлежность классу d instanceof Date
328 Прилож ение 1

(окончание)

Приоритет Оператор Описание Пример

== Равно X == у

=== Строго равно X === у

5
!= Не равно х != у

!== Строго не равно х != = у

4 && Логическое И £1ад1 && £1ад2

3 II Логическое ИЛИ Пад1 | | Пад2

2 9 • Условный (£ 1 а д ) ? х : у

1 =, +=, -=, *=, /=, %= Присваивание х = У

 Приложение 2
Пакет хостинга ХАМРР
Установка ХАМРР
Запуск и остановка комплектного веб-сервера
Использование комплектного веб-сервера
Решение проблем

П2.1. Установка пакета хостинга ХАМРР

Для тестирования страниц, разрабатываемых в уроках 17-20, нам понадобится
работающий веб-сервер и платформа РНР. И то, и другое входит в пакет хостинга
ХАМРР, который мы сейчас установим.
ХАМРР — программный пакет интернет-хостинга, включающий в свой со­
став все необходимое для запуска веб-сайта: веб-сервер Apache HTTP
Server, программную платформу РНР, серверную СУБД MariaDB и ряд дру­
гих программ. Все эти программы полностью работоспособны и не требуют
ни специального сопряжения, ни дополнительной настройки.
1. Перейдем в веб-обозревателе по интернет-адресу
https://www.apachefriends.org/ru/index.btml.
2. На открывшейся странице найдем большую гиперссылку ХАМРР для Windows
и щелкнем на ней (рис. П2.1).
3. Сохраним загруженный файл с дистрибутивом ХАМРР где-либо на локальном
диске. Запустим его, положительно ответим на запрос подсистемы контроля
доступа UAC (текст в этом окне-сообщении предостерегает от установки
ХАМРР в папку C:\Program Files\ или в любую другую папку, защищенную UAC)
и закроем это окно-сообщение, нажав кнопку ОК.
4. Нажмем в открывшемся диалоговом окне Setup ХАМРР кнопку Next (рис. П2.2).
5. В следующем диалоговом окне Select Components (рис. П2.3) выберем Apache
и РНР, установив в иерархическом списке компонентов флажки Server | Apache
и Program Languages | РНР, и нажмем кнопку Next.
Изменим при необходимости путь установки (по умолчанию — C:\xampp), введя
его в поле Select a folder следующего диалогового окна Installation folder
(рис. П2.4), и нажмем кнопку Next. Вы также можете щелкнуть на расположен­
ной правее этого поля кнопке и выбрать в открывшемся диалоговом окне дру­
гую папку для установки. Впрочем, путь, предлагаемый по умолчанию, подой­
дет в большинстве случаев.
330 П р и л о ж ен и е 2

Apache f riends

EJ ХАМРР Apache + MariaDB + PHP + Perl

introduction to X a m p p

ХАМРР является самой популярной средой

разработки P H P
ХАМРР полностью бесплатны* и простей в установко
дистрибутив Apadte, содер*лдий MariaDB, PHP и Роті
ХАМРР создан t открытым исходным кодом, чтобы Выть
новвроягчо простым в установке и и использовании

г ; ХАМРР для W hhJOwtT $ ХАМРР д ли U fn a 4 ХАМРР для О вХ

— 73.5 (PHP 7 ЭЫ 7 35 (РНР 7 3 5) 7.3.5 (РИР 7.35)

Щелкните /
на этой гиперссылке

Рис. П2.1. Гиперссылка ХАМРР для Windows

Рис. П2.2. Стартовое диалоговое окно Setup ХАМРР

П а к е т хо ст и н га Х А М Р Р 33 1

Apache,
MySQL
FiieZilla FTP Server
Mercury Mail Server
Tomcat
Установите эти
9 0 Program languages флажки

□ Pert
S 0 Program languages
□ p h p M y A d m in
Webalner
Fake S endm aii

ХАМРР Instater
Next>

Рис. П2.3. Диалоговое окно Select Components

Рис. П2.4. Диалоговое окно Installation folder

6. Сбросим в следующем диалоговом окне Bitnami for ХАМРР (рис. П2.5) флажок
Learn more about Bitnami for ХАМРР, чтобы установщик не вывел веб­
страницу с дополнительными сведениями (сейчас они нам не нужны), и нажмем
кнопку Next.
332 Прилож ение 2

Рис. П2.5. Диалоговое окно Bitnami fo r ХАМРР

7. В следующем диалоговом окне Ready to Install (рис. П2.6) нажмем кнопку Next,
чтобы непосредственно начать установку пакета.
8. Подождем, пока установка завершится (рис. П2.7).

Рис. П2.6. Диалоговое окно Ready to Install

П а к е т хо ст и н га Х А М Р Р 333

Рис. П2.7. Окно, отображающее ход процесса установки пакета

В завершающем установку диалоговом окне Completing the ХАМРР Setup

Wizard (рис. П2.8) нажмем кнопку Finish, чтобы закрыть установщик. Если
флажок Do you want to start the Control Panel now? не был сброшен, запустит­
ся панель управления ХАМРР (см. далее).

Рис. П2.8. Диалоговое окно Completing the ХАМРР Setup Wizard

334 Прилож ение 2

П2.2. Панель управления ХАМРР.

Запуск и остановка веб-сервера
Панель управления ХАМРР — утилита для управления компонентами пакета

IХАМРР: запуска, остановки и настройки.

Открывается панель управления ХАМРР непосредственным запуском исполняе­
мого файла xampp-control.exe, находящегося в папке, где установлен пакет. К сожа­
лению, запустить ее из меню Пуск невозможно.

П2.2.1. Указание языка

при первом запуске
В открывшемся при первом запуске панели управ­
ления ХАМРР диалоговом окне выбора языка
Language (рис. П2.9) установим переключатель
под флагом США и нажмем кнопку Save. При по­
следующих запусках эту процедуру выполнять уже Рис. П2.9. Диалоговое окно
не придется. выбора языка Language

П2.2.2. Окно панели управления ХАМРР

Окно панели управления ХАМРР по горизонтали делится на две части (рис. П2.10):
♦ вверху — таблица с перечнем всех установленных компонентов и наборы кнопок
для управления ими (запуска, остановки и др.);

Рис. П2.10. Окно панели управления ХАМРР

П а к е т хо ст и н га Х А М Р Р 335

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

выводимые его компонентами.

П2.2.3. Запуск веб-сервера

Найдем в строке Apache (самой верхней) перечня компонентов панели управления
ХАМРР кнопку Start (рис. П2.11) и нажмем ее. После этого надпись на кнопке
сменится на Stop.

Рис. П2.11. Кнопка Start в строке Apache перечня компонентов в панели управления ХАМРР

П2.2.4. Проверка работоспособности веб-сервера

В веб-обозревателе перейдем по интернет-адресу ЬКр://1оса11і08І/ — на экране по­
явится начальная страница небольшого тестового сайта, поставляемого в составе
ХАМРР (рис. П2.12).

Рис. П2.12. Начальная страница тестового сайта, поставляемого в составе ХАМРР

336 Прилож ение 2

П2.2.5. Остановка веб-сервера

Найдем в строке Apache (самой верхней) перечня компонентов панели управления
ХАМРР кнопку Stop (рис. П2.13) и нажмем ее. После этого надпись на кнопке сме­
нится на Start.

Modules
S ervice M odule и о д Portes) A ctions
3560
Apache 80, 443 1 Stop 1 Admin Con fig Logs
100

Рис. П2.13. Кнопка Stop в строке Apache перечня компонентов в панели управления ХАМРР

П2.3. Использование веб-сервера

П2.3.1. Тестирование веб-сайта с применением ХАМРР
1. Откроем папку по пути <путь установки XAMPP>\h\6ocs. Это корневая папка веб­
сервера Apache HTTP Server из комплекта ХАМРР.
Изначально там хранится тестовый сайт, позволяющий проверить работоспо­
собность пакета. Рекомендуется сохранить этот сайт на всякой случай.
2. Если в корневой папке хранятся файлы тестового сайта, переименуем ее, напри­
мер, в _htdocs, и создадим в папке <путь установки ХАМРР> новую корневую пап­
ку htdocs.
3. Скопируем файлы сайта, который хотим протестировать, в папку <путь установ­
ки XAMPP>M6ocs.
Не забываем запускать веб-сервер перед тестированием сайта и останавливать
перед крупными правками.

П2.3.2. Просмотр журналов работы веб-сервера и РНР

Журнал (лог) — файл для сохранения сведений о работе программы-
сервера: выполненных ею действиях, нештатных ситуациях и пр. Практиче­
ски всегда имеет текстовый формат и расширение log.
1. Найдем в строке Apache (самой верхней) перечня компонентов панели управле­
ния ХАМРР кнопку Logs (см. рис. П2.11) и нажмем ее.
2. Выберем в появившемся на экране меню (рис. П2.14) пункт:
• Apache (access.log) — для просмотра журнала веб-сервера, содержащего све­
дения об отправленных им файлах;
• Apache (error.log) — для просмотра журнала ошибок, возникших в работе
веб-сервера (в частности, отсутствующих файлах). Также включает сообще­
ния об ошибках в РНР-коде.
Соответствующий журнал будет открыт в текстовом редакторе Блокнот.
П а к е т хо ст и н га Х А М Р Р 337

Рис. П2.14. Меню журналов работы веб-сервера и РНР

Прим ечание
В меню также присутствует пункт PHP (php_error_log), но при его выборе выводится
сообщение о том, что файл с таким журналом отсутствует. Судя по всему, это про­
граммная ошибка в пакете ХАМРР.

П2.4. Решение проблем

П2.4.1. Увеличение максимального размера
выгружаемых файлов
По умолчанию РНР позволяет загружать на сервер файлы объемом не более
2 Мбайт (если загружаются сразу несколько файлов, учитывается их совокупный
объем). Чтобы избавиться от этого ограничения:
1. Запустим панель управления ХАМРР.
2. Остановим веб-сервер, если он запущен.
3. Найдем в строке Apache (самой верхней) перечня компонентов кнопку Config
(см. рис. П2.11) и нажмем ее.
4. Выберем в появившемся на экране меню (рис. П2.15) пункт РНР (php.ini) —
конфигурационный файл php.ini, хранящий настройки РНР, будет открыт в Блок­
ноте.

Actions ----------- ~ ■ — у : Г Г " '. - ; ■J

Start АФш [с »
Apache (httpdconf)
stm So Apache (httpd-ssUonf)

SUn Ä$ran Со Apache (httpd-xampp.conf)

PHP (php.ini)
Шп Adam Ço
phpMyAdmin (conffg.inc.php)

. ; <8rowse> {Apache}
<РЮ: 14560) <Browse> [PHP]
(PID- 2580)
<Brow*e> [phpMyAdmin]
opped

Рис. П2.15. Меню кнопки Config веб-сервера Apache — выбираем пункт РНР (php.ini)
338 Прилож ение 2

5. Найдем в файле php.ini строку формата:

up 1oad_max_f i1еsizе=<максимальный р а зм ер выгружаемого файла>

6. Укажем после символа = нужный размер в одном из следующих форматов:

• <разм ер в байтах>

• <разм ер в килобайта х>К

• <разм ер в мегабайтах>М

• <разм ер в гигабайт ах>G

7. Сохраним и закроем файл php.ini.
После этого можно запустить веб-сервер и проверить, как работает загрузка файлов
на сервер.

П2.4.2. Отключение кеширования файлов

веб-обозревателем
В процессе разработки сайта может возникнуть ситуация, когда изменив в корне­
вой папке веб-сервера какой-либо файл и перезагрузив открытую в веб-обо­
зревателе страницу, мы увидим, что веб-обозреватель все еще использует устарев­
шую копию файла, взятую из кеша.
Кеш — хранилище, находящееся на локальном диске и используемое веб­
обозревателем для сохранения копий всех загруженных им файлов для ус­
корения последующего доступа к ним.
По идее, веб-обозреватель должен хранить в кеше наиболее актуальные версии
файлов, загружая их повторно, если они изменятся. Но иногда устаревшие копии
файлов «застревают» в кеше и не перезаписываются более новыми.
Проще всего решить проблему «застревания» файлов в кеше, отключив кеширова­
ние файлов веб-обозревателем.
1. Выведем панель с инструментами разработчика, встроенными в веб­
обозреватель, нажав клавишу <F12>.
2. Переключимся на вкладку Network, щелкнув на ее корешке в панели с инстру­
ментами разработчика (рис. П2.16).

Elements Console Sources Network Performance Memory Application Security Audits

Рис. П2.16. Корешок вкладки Network на панели с отладочными инструментами веб-обозревателя

На открывшейся вкладке Network (рис. П2.17) выводятся список файлов, загру­

женных по Сети при открытии текущей страницы, и график их загрузки.
3. Установим в панели инструментов вкладки Network, находящейся над графи­
ком, флажок Disable cache (рис. П2.18).
П а к е т хо ст и н га Х А М Р Р 339

Рис. П2.17. Вкладка Network панели с инструментами разработчика

View. SS % . E3 Group by frame j □ Preserve log f£] Disable cache □ Offline No throttling

Рис. П2.18. Панель инструментов вкладки Network — устанавливаем флажок Disable cache

Рис. П2.19. Контекстное меню списка файлов вкладки Network —

выбираем пункт Clear browser cache
340 П рилож ение 2

В ним ание!
Кеширование будет отключено, пока панель с инструментами разработчика присутст­
вует на экране. Если закрыть ее, кеширование вновь активизируется, независимо от
состояния флажка Disable cache.

4. Напоследок необходимо очистить кеш веб-обозревателя, чтобы тот использовал

самые актуальные версии файлов.
Щелкнем для этого на списке файлов правой кнопкой мыши, выберем в по­
явившемся на экране меню пункт Clear browser cache (рис. П2.19) и нажмем
кнопку ОК в появившемся окне-предупреждении.
 Приложение З
Описание электронного архива

Электронный архив, сопровождающий книгу, размещен на РТР-сервере издатель­

ства «БХВ-Петербург» по интернет-адресу: ftp://ftp.bhv.ru/9785977565899.zip.
Ссылка на него доступна и со страницы книги на сайте http://www.bhv.ru/.
Список папок и файлов, имеющихся в архиве (вложенность папок и файлов показа­
на отступами):
♦ <номер урока> — папка с материалами урока с указанным номером. Состав папки:
• ІБоигсев — папка с и с х о д н ы м и материалами, необходимыми для выполнения
упражнений в текущем уроке;
• ех<номер раздела> — результаты выполнения упражнения, приведенного
в разделе с указанным номером;
• $<номер раздела>— результаты выполнения самостоятельных упражнений,
приведенных в разделе с указанным номером;
♦ readme.txt — текстовый файл с описанием электронного архива.
 Предметный указатель

$ B
$_FILES 296 beforeprint 110, 187
$_GET 293 beforeunload 110, 187
$_POST 296 beginPath 227
$_SERVER 290 bezierCurveTo 232
blur 156, 157, 186, 187
body 123
BOM 185
A Boolean 67
abort 151, 209 bottom 130
abs 80 break 42, 47
acos 81 bubbles 118
acosh 81 button 114
activeElement 124
add 136,156
addColorStop 233
c
addEventListener 106, 116 call 256
afterprint 110, 187 cancellable 121
AJAX 271 canplay 150
alert 192 canplaythrough 150
altKey 114, 115 CanvasGradient 233
animationend 110, 115 CanvasPattem 236
AnimationEvent 115 CanvasRenderingContext2D 221
animationiteration 110,115 cbrt 80
animationName 115 ceil 80
animationstart 110, 115 change 157
append 310 characterSet 144
appendChild 142 charAt 70
apply 254 charCode 114
arc 230 charCodeAt 71
arcTo 230 checked 156
Arguments 82 checkValidity 166
Array 71 childElementCount 126
asin 81 children 126
asinh 81 classList 136
assign 191 className 136
atan 81 clear 212
atan2 81 clearData 214
atanh 81 clearlnterval 200
autocomplete 155, 164 clearRect 222
availHeight 192 clearTimeout 202
avail Width 192 click 109
344 П р е д м е т н ы й ука за т е л ь

clientHeight 128 delete 85

clientWidth 128 deltaMode 114
clientX 114 deltaX 114
clientY 114 deltaY 114
clip 240 dimame 290
ClipboardEvent 115 document 123
close 320 DOM 104
closedir 292 domain 144
closePath 228 DOMRect 130
colorDepth 192 DOMTokenList 136
complete 147 drag 213
concat 76 Drag’n’drop 213
confirm 192 dragend 216
Console 89, 90 dragenter 215
const 27,41 DragEvent 213
constructor 254 dragleave 215
contains 126, 137 dragover 215
contextmenu 109 dragstart 213
continue 47 drawlmage 238
copy 109 drop 216
cos 81 dropEffect 215
cosh 81 duration 148
create 254 durationchange 150
createElement 141
createLinearGradient 233
createPattem 236
E
createRadialGradient 235 E 80
createTextNode 141 echo 288
CSSStyleDeclaration 137 effectAllowed 214
ctrlKey 114, 115 elapsedTime 115
currentSrc 149 elements 164
currentTarget 113 empty 299
currentTime 148 encodeURIComponent 310
customError 168 ended 149, 150
cut 157 endsWith 69
error 147, 209,210,319
D eval 61
EvalError 98
data 319 Event 113
Data URL 210 eventPhase 118
dataTransfer 213 EventSource 318
DataTransfer 213 every 74
date 287 exec 178, 179
Date 78 exit 299
dblclick 109 exp 81
defaultChecked 156
defaultMuted 149 F
defaultPlaybackRate 149
defaultPrevented 121 fclose 299
defaultSelected 156 File 207
defaultValue 155 file exists 295
defineProperty 251, 252 file get contents 295
П р ед м ет н ы й у к а за т е л ь 345

FileList 207 H
FileReader 208, 210
files 156, 207,219 hash 191
fill 76, 227, 228 hashchange 110, 115, 187
fillRect 222 HashChangeEvent 115
fillStyle 223, 234 head 123
fillText 224 header 299
filter 74 height 130, 192, 221
find 74 host 190
findlndex 74 hostname 191
firstElementChild 126 href 190
floor 80 HTML API 199, 200
flush 318 HTMLAudioElement 148
focus 156, 157, 186, 187 HTMLBodyElement 123
FocusEvent 157 HTMLCanvasElement 221
focusin 157 HTMLCollection 124
focusout 157 HTMLDocument 123
font 224 HTMLElement 125
fopen 299 HTMLFormElement 164
forEach 74 HTMLHeadElement 123
form 155 HTMLImageElement 147
FormData 309 HTMLInputElement 166, 167
forms 124 HTMLVideoElement 148
fromCharCode 71
Function 67
l
fwrite 299
ignoreCase 181
G images 123
in 86
getBoundingClientRect 130 includes 69, 73
getContext 221 index 156
getData216 indexOf 70, 73
getdate 288 Infinity 22
getDate 79 innerHeight 185
getDay 79 innerHTML 137
getElementByld 124 innerText 129, 138
getElementsByClassName 124 innerWidth 185
getElementsByName 124 input 157
getElementsByTagName 124 insertAdjacentElement 142
getFullYear 79 insertAdjacentHTML 138
getHours 79 insertAdjacentText 139
getltem 212 insertBefore 142
getLineDash 230 instanceof 86
getMilliseconds 79 invalid 157 '
getMinutes 79 isArray 72
getMonth 79 isEqualNode 130
getSeconds 79 isFinite 61
GET-napaMeTp 293 islnteger 67
global 181 isNaN 61
globalAlpha 239 isSameNode 130
globalCompositeOperation 239 isset 297
346 П р е д м е т н ы й у ка за т е л ь

j message 98, 203, 319

min 80
join 76 MIN VALUE 68
JSON 276, 277 mousedown 109
json encode 303 mouseenter 109
MouseEvent 113
K mouseleave 109
mousemove 109
key 115 mouseout 109
KeyboardEvent 114 mouseover 109
keydown 109 mouseup 109
keypress 109 moveuploadedfile 298
keyup 109 moveTo 227
multiline 181
L muted 148

lastElementChild 126
lastEventld 320
N
lastlndex 179 name 97, 207
lastlndexOf 70, 73 NaN 22
lastModified 144 naturalHeight 147
lastModifiedDate 207 natural Width 147
left 130 networkState 149
length 69,71,82, 156, 164 new 78
lengthComputable 209 newURL 115
let 25,27,41 nextElementSibling 126
lineCap 229 NodeList 124
lineJoin 229 null 83
lineTo 228 Number 67
lineWidth 229
links 124
LN10 80 o
LN2 80
load 110, 147, 149, 186, 208, 209 Object 82
loaded 209 offsetHeight 129
loadeddata 150 ofFsetLeft 128
loadedmetadata 150 offsetParent 128
loadend 209 ofFsetTop 128
loadstart 150, 209 ofFsetWidth 128
localeCompare 77 ofFsetX 114
localStorage 212 ofFsetY 114
Location 190 oldURL 115
log 81, 89 open 272, 319
LOG2E 80 opendir 291
options 156
origin 190
M outerHeight 185
map 75 outerWidth 185
match 179,180
Math 80
max 80
p
MAX VALUE 68 pagehide 110,115, 187
measureText 224 pageshow 110, 115, 186
П р ед м ет н ы й у к а за т е л ь 347

PageTransitionEvent 115 readdir 291

pageX 113 readyState 149, 209, 273, 319
pageXOffset 186 readystatechange 272
pageY 114 rect 232
pageYOffset 186 reduce 75
parentElement 126 reduceRight 75
parse 277 ReferenceError 97
parseFloat 61 referrer 144
parselnt 61 RegExp 171
paste 157 relatedRatget 114
pathinfo 294 relatedTarget 157
pathname 191 reload 191
pattemMismatch 168 remove 136, 156
pause 150 removeChild 143
paused 149 removeEventListener 108, 117
persisted 115 removeltem 212
PHP 286 replace 71, 180,191
PI 80 replaceChild 143
play 150 reset 164
playbackRate 148 resize 110,187
playing 150 responseText 273
pop 72 restore 240
port 191 result 208, 209,210
postMessage 203 return 52
POST-napaMeTp 296 reverse 77
pow 81 right 130
preventDefault 120 rotate 238
previousElementSibling 126 round 80
print 186
progress 150,209, 210
ProgressEvent 209, 210 s
prompt 192 save 240
propertyName 115 scale 237
protocol 190 screen 191
prototype 247 Screen 191
push 72 screenLeft 185
screenTop 186
Q screenX 114, 186
screenY 114,186
quadraticCurveTo 231 scripts 124
querySelector 125 scroll 110, 187
querySelectorAll 125 scrollBy 186
scrollHeight 129
R scrollIntoView 130
scrollLeft 129
random 81 scrollTo 186
RangeError 98 scrollTop 129
rangeOverflow 168 scroll Width 129
rangeUnderflow 167 scrollX 186
ratechange 150 scrollY 186
readAsDataURL 210 search 173,191
readAsText 208 seeked 150
348 П р е д м е т н ы й ука за т е л ь

seeking 149, 150 strokeStyle 223, 234

select 156,157 strokeText 224
selected 156 style 137
selectedlndex 156 submit 164
selectionEnd 155 substr 70
selectionStart 155 substring 70
send 273, 309 suspend 150
sessionStorage 212 SyntaxError 97
setCustomValidity 165
setData213
setDate 79
T
setFullYear 79 tagName 129
setHours 79 tan 81
setlnterval 200 tanh 81
setltem 212 target 113
setLineDash 229 terminate 204
setMilliseconds 79 test 173
setMinutes 79 Text 141, 156
setMonth 79 textAlign 224
setRequestHeader 311 textBaseline 224
setSeconds 79 textContent 129, 138
setTimeout 201 TextMetrics 224
shadowBlur 223 this 106, 107, 245
shadowColor 223 throw 98
shadowOffsetX 223 time 287
shadowOffsetY 223 timeupdate 150
shift 72 title 144
shiftKey 114, 115 toExponential 68
sin 80 toFixed 68
sinh 81 toggle 136
size 207 toLocaleDateString 79
slice 76 toLocaleLowerCase 69
some 74 toLocaleString 79
sort 76 toLocaleTimeString 79
source 181 toLocaleUpperCase 69
splice 72 toLowerCase 69
split 71, 181 tooLong 167
sqrt 80 top 130
SQRT12 80 toPrecision 68
SQRT2 80 toString 67
stalled 151 total 209
startsWith 69 toUpperCase 69
status 273 transitionend 109, 115
statusText 273 TransitionEvent 115
stepDown 156 translate 237
stepMismatch 168 trim 69
stepUp 156 trunc 80
stopPropagation 118 type 113,207
Storage 212 TypeError 97
String 69 typeMismatch 167
stroke 227 typeof 29
strokeRect 222
П р ед м ет н ы й у к а за т е л ь 349

и w
undefined 29 waiting 150
unlink 300 wheel 109, 114
unshift 72 WheelEvent 114
URIError 98 which 114, 115
URL 144 width 130, 192, 221,224
willValidate 167
v Window 123, 185
Worker 202
valid 167 write 139
validationMessage 166 writeln 139
validity 167
ValidityState 167
value 155
X
valueMissing 167 X130
var 27, 41 XAMPP 329
videoHeight 148 0 панель управления 334
videoWidth 148 XML 271
volume 148 XMLHttpRequest 272
volumechange 150
Y
у 130

A Веб-приложение
О клиентское 160
Атрибут тега О серверное 160, 285
0 draggable 213 Веб-сайт: сверхдинамический 274
0 height 221 Веб-служба 302
0 id 104 Веб-страница
0 pattern 182 О по умолчанию 292
0 script 35 О серверная 289
Веб-сценарий 35
0 src 60
О внешний 60
0 width 221
О внутренний 35
Возврат результата 20
Б Возобновление 95
Временная отметка 78
Библиотека 60 О в стиле ЦМХ 287
Блок 40 Выражение 35
Бэкенд 302 О блочное 40
О выбора 41
в О условное 38
О условное в сокращенной форме 39
Валидация 165 0 условное множественное 39
Вариант 175 Выход из функции 94
350 П р е д м е т н ы й у ка за т е л ь

г Конкатенация 23
Консоль 17, 89
Геттер 251 Константа 27
Градиент 233 Конструктор 245
О линейный 233 Контекст исполнения 127
О радиальный 235 Кривая Безье 231
Графическая закраска 236 О квадратическая 231
Графический контекст 221 О кубическая 231
Группа 177
л
Д Лайтбокс 258
Декремент 28 Литерал
О регулярного выражения 171
ж О строковый 22, 287
Лог 336
Журнал 336 Логическое
0 И 24
0 ИЛИ 24, 56
3 0 НЕ 24
Заголовок 299 0 отрицание 24
Замыкание 266 0 сложение 24, 56
Застревание в кеше 338 0 умножение 24

и м
Имя Маршрутизация 309
О класса 66 Маска 240
О переменной 24, 287 Массив 61
О события 105 0 ассоциативный 288
0 функции 51 0 вложенный 63
Индекс 61 0 внешний 63
Инициализация 261 0 размер 61
Инкремент 28 0 элемент 61
Инспектор ООМ 95 Межпоточное сообщение 203
Исключение 96 Метасимвол 173
0 обработка 97 Метод 66
0 обработчик 97 0 переопределение 255
0 статический 67, 257
к Модификатор 171

Квантификатор 175
Кеш 338
Н
Класс 66 Наследование 83, 253
0 базовый 83 Нулевая ссылка 83
0 производный 83
Ключ 288 о
Ключевая точка 233
Коллекция 82 Обработчик события 105, 107, 139
Комментарий 48 0 по умолчанию 119
Компонент 261 0 привязка 106, 108
0 невидимый 280 0 удаление 108
П р ед м ет н ы й у к а за т е л ь 351

Обратная ссылка 177 Поиск

Объект 65 0 без учета регистра 172
О служебный 82 0 глобальный 179
О текущий 66 0 жадный режим 176
Объектная нотация 82 0 многострочный 180
Окружность 0 обычный 178
О конечная 235 0 щедрый режим 177
О начальная 235 Поток 202
Операнд 20
0 основной 202
Оператор 20
0 арифметический 21,28 0 фоновый 202
Преобразование 237
0 бинарный 21
0 возврата результата 52 0 типов 30
0 вывода 288 Приоритет оператора 21
Присваивание 25
0 вызова функции 53
Прототип 246
0 генерирования исключения 98
Прохождение 116
0 доступа к элементу массива 62, 66, 70, 82
0 доступа к элементу объекта 65
0 комбинированного присваивания 26 р
0 конкатенации строк 23, 289
Регулярное выражение 171
0 логический 24
Рекурсия 57
0 объявления переменных 25, 27
0 бесконечная 58
0 получения типа 29
0 прерывания 42, 47
° прохода 47 с
0 принадлежности классу 86
0 присваивания 25 Свойство 65, 252
0 проверки существования свойства 86 0 динамическое 251, 252
0 создания объекта 78 0 добавленное 85
0 сравнения 23 0 статическое 68, 256
0 тернарный 28 Серверное сообщение 317
0 удаления свойства 85 Сеттер 251
0 унарный 21, 28 Слайдер 103
Событие 105
0 условный 28
Отладчик 90 0 всплывающее 116
0 источник ИЗ
0 невсплывающее 117
п Состояние холста 240
Параметр функции 51 Стек вызовов 58
0 необязательный 55 Строгий режим 48
Переменная 24 Строка 20, 22
0 глобальная 54 Суперкласс 83
0 локальная 54
0 обращение 26 т
0 объявление 25, 27,41, 287
Перетаскивание 213 Таймер
0 источник 213 0 однократный 201
0 приемник 213 0 периодический 199
Перо 227 Тег
Подквантификатор 177 0 ?php 287
Подкласс 83 0 canvas 221
Поднабор 174 0 script 35
352 Предметный указатель

Тип данных 20 Хранилище 212

0 значащий 84 0 постоянное 212
0 логический 20 0 сессионное 212
0 неопределенный 29
0 объектный 63, 83
0 ссылочный 84
Ц
0 строковый 20 Цикл 43
0 функциональный 60 0 итерация 43
0 числовой 20 0 по свойствам 87
Точка останова 90, 92, 95 0 проход 43
Трассировка 90 0 с постусловием 47
0 с предусловием 46
У 0 со счетчиком 43
0 счетчик 43, 46
Унарный минус 28 0 условный 43
Условие 23
Ч
Ф Число 20
Фаза 116 0 вещественное 20
0 всплытия 116 0 с плавающей точкой 20
0 источника 115, 116
0 погружения 116
Файл веб-сценария 60
Ш
0 привязка 60 Шаг
Фреймворк 325 0 с заходом 93
Фронтенд 301 0 с обходом 94
Функция 51
0 анонимная 58
0 вложенная 54 э
0 встроенная 61 Элемент веб-страницы: базовый 261
0 вызов 52, 53
0 именованная 58
0 объявление 51
Я
0 стрелка 59, 107 Якорь 104

х
Хеш 288
Холст 221
J a v a S c rip t
/ûjfokoirjjAfl ЦаЩйн^МК
Дронов Владимир Александрович, профессиональный про­
граммист, писатель и журналист, работает с компьютерами
с 1987 года. Автор более 30 популярных компьютерных книг, в том
числе «HTML и CSS: 25 уроков для начинающих», «Django 2.1.
Практика создания веб-сайтов на Python», «HTML, JavaScript,
PHP и MySQL. Джентльменский набор Web-мастера», «Python 3.
Самое необходимое», «Python 3 и PyQt 5. Разработка прило­
жений», «Laravel. Быстрая разработка современных динамиче­
ских Web-сайтов на РНР, MySQL, HTML и CSS», книг по продуктам Adobe Flash
и Adobe Dreamweaver различных версий. Его статьи публикуются в журналах
«Мир ПК» и «Интерфейс» (Израиль) и интернет-порталах «IZ City» и «TheVista.ru».
Простым языком, кратко, наглядно, в картинках рассказано о программировании
веб-сценариев на языке JavaScript. В книге 20 иллюстрированных уроков,
40 практических упражнений и более 70 заданий для самостоятельной работы.

Вы узнаете, как
JavaScript
в картинках и упражнениях
• обрабатывать события;
• добавлять элементы на веб-страницу;
• создать свой видеопроигрыватель;
• проверить правильность введения данных
в веб-форму;
• выполнять длительные вычисления в фоновом çbhv®
потоке;
• нарисовать график на веб-странице;
191036, Санкт-Петербург,
• объявить свой класс; Гончарная ул„ 20
• написать компонент; Тел.: (812) 717-10-50,
339-54-17, 339-54-28
• загрузить данные с сервера;
E-mail: [email protected]
• программировать фронтенды и бэкенды; Internet: www.bhv.ru
• отлаживать веб-сценарии. ISBN 978-5-9775-6589-9

Все необходимые для работы файлы и результаты

выполнения упражнений можно скачать по ссылке
ftp://ftp.bhv.ru/9785977565899.zip, а также со страницы
книги на сайте www.bhv.ru. 9