Книга посвящена разработке современных веб-приложений с использованием JavaScript и встроенных возможностей браузера на основе Web API. Приведены практические примеры реализации функций, которые ранее требовали сторонних плагинов: диалоговые окна, работа с геолокацией и другими возможностями, предоставляемыми браузером. Освещаются как устоявшиеся, так и находящиеся в стадии разработки API-интерфейсы, позволяющие создавать мощные и интерактивные веб-приложения, глубоко интегрированные с устройствами пользователей. Рассматривается, как браузеры реализуют модель разрешений для предоставления доступа к таким функциям, как геолокация и push-уведомления. Каждая задача в книге сопровождается готовыми рецептами, содержащими описание проблемы, решение с пояснениями и расширенное обсуждение. Книга ориентирована на программистов с опытом работы на JavaScript, знакомых с программным интерфейсом DOM (Document Object Model).
Для программистов
Повысьте уровень JavaScript-приложений
JavaScript предоставляет веб-разработчикам богатый арсенал средств для создания динамичных и интерактивных пользовательских интерфейсов прямо в браузере. Сегодня большую часть этой функциональности обеспечивают сами браузеры.
Современные Web API позволяют веб-приложениям реализовать то, что ранее требовало установки внешних плагинов. Некоторые из этих интерфейсов еще находятся на стадии разработки и тестирования, но многие из них уже полностью готовы к использованию.
Это практическое руководство предлагает коллекцию прикладных примеров использования новейших возможностей браузерных API. Автор помогает разобраться, какие задачи можно решить с их помощью и как применять эти инструменты на практике. Поскольку речь идет о стандартизированных технологиях, вы всегда можете обратиться к надежной документации, например, на MDN Web Docs.
Полученные знания пригодятся вам в проектах любой сложности — от личных до корпоративных.
- Добавьте веб-приложениям функции, схожие с возможностями современных браузеров
- Познакомьтесь с широким набором инструментов, предлагаемых актуальными браузерными API
• Изучите перспективные API-интерфейсы, находящиеся в стадии разработки - Используйте новые элементы интерфейса, такие как диалоговые окна, без подключения сторонних библиотек
• Создавайте мощные и интерактивные приложения с глубокой интеграцией в возможности пользовательских устройств - Изучите реализуемую браузерами модель разрешений для предоставления доступа к таким функциям, как геолокация и push-уведомления
Книгу “Web API. Сборник рецептов: Повысьте уровень JavaScript-приложений” можно купить в нашем интенет-магазине.
Предисловие. 13
Возможности современных браузеров. 14
Недостатки сторонних библиотек. 14
Для кого предназначена эта книга. 14
Что содержится в этой книге. 15
Дополнительные ресурсы.. 15
Соглашения об используемых обозначениях. 16
Использование примеров кода. 17
Платформа онлайн-обучения O’Reilly. 18
Как с нами связаться. 18
Благодарности. 18
ГЛАВА 1. Асинхронные API. 21
1.0. Введение. 21
1.1. Работа с промисами. 22
1.2. Загрузка изображения с помощью использования резервного изображения (fallback) 24
1.3. Связывание промисов. 26
1.4. Использование ключевых слов async и await 28
1.5. Параллельное использование промисов. 29
1.6. Анимация элемента с помощью requestAnimationFrame. 30
1.7. Обертывание событий API в промис. 33
ГЛАВА 2. Простое сохранение данных с помощью Web Storage API. 36
2.0. Введение. 36
2.1. Проверка поддержки Web Storage. 38
2.2. Сохранение строковых данных. 39
2.3. Сохранение простых объектов. 40
2.4. Сохранение сложных объектов. 41
2.5. Отслеживание изменений в хранилище. 46
2.6. Поиск всех известных ключей. 47
2.7. Удаление данных. 49
ГЛАВА 3. URL-адреса и маршрутизация. 51
3.0. Введение. 51
3.1. Определение относительного URL-адреса. 52
3.2. Удаление параметров запроса из URL-адреса. 54
3.3. Добавление параметров запроса к URL-адресу. 56
3.4. Чтение параметров запроса. 58
3.5. Создание простого маршрутизатора на стороне клиента. 60
3.6. Сопоставление URL-адресов с шаблонами. 62
ГЛАВА 4. Сетевые запросы.. 65
4.0. Введение. 65
4.1. Отправка запроса с помощью XMLHttpRequest 66
4.2. Отправка GET-запроса с помощью Fetch API 67
4.3. Отправка POST-запроса с помощью Fetch API 69
4.4. Загрузка файла с помощью Fetch API 70
4.5. Отправка Beacon. 71
4.6. Прослушивание удаленных событий с помощью server-sent events. 72
4.7. Обмен данными с WebSockets в режиме реального времени. 74
ГЛАВА 5. База данных IndexedDB.. 77
5.0. Введение. 77
5.1. Создание, чтение и удаление объектов в базе данных. 79
5.2. Обновление существующей базы данных. 85
5.3. Выполнение запросов с использованием индексов. 87
5.4. Поиск строковых значений с помощью курсора. 90
5.5. Разбивка большого набора данных на страницы.. 92
5.6. Использование промисов с IndexedDB API 94
ГЛАВА 6. Наблюдение за элементами DOM… 97
6.0. Введение. 97
6.1. Отложенная загрузка изображения при прокрутке. 99
6.2. Обертывание IntersectionObserver промисом.. 101
6.3. Автоматическая пауза при воспроизведении видео. 102
6.4. Анимация изменений высоты.. 103
6.5. Изменение содержимого элемента в зависимости от размера. 105
6.6. Применение перехода в момент появления элемента в поле зрения. 107
6.7. Использование режима бесконечной прокрутки. 108
ГЛАВА 7. Формы.. 110
7.0. Введение. 110
7.1. Заполнение поля формы из локального хранилища. 111
7.2. Отправка формы с помощью Fetch и FormData API 112
7.3. Отправка формы в формате JSON.. 114
7.4. Создание обязательного поля формы.. 116
7.5. Ограничения при вводе числа. 117
7.6. Определение шаблона валидации. 118
7.7. Валидация формы.. 119
7.8. Применение пользовательской логики валидации. 122
7.9. Проверка группы флажков. 124
7.10. Асинхронная проверка поля формы.. 127
ГЛАВА 8. API веб-анимации. 130
8.0. Введение. 130
8.1. Применение эффекта “пульсации” при нажатии кнопки. 132
8.2. Запуск и остановка анимации. 135
8.3. Анимация вставки и удаления элементов DOM.. 136
8.4. Реверсирование анимации. 137
8.5. Отображение индикатора прокрутки. 141
8.6. Создание подпрыгивающего элемента. 143
8.7. Одновременный запуск нескольких анимаций. 144
8.8. Отображение анимации загрузки. 146
8.9. Соблюдение в анимации предпочтений пользователя. 148
ГЛАВА 9. Web Speach API. 150
9.0. Введение. 150
9.1. Добавление продиктованного текста в текстовое поле. 152
9.2. Создание Promise-помощника для распознавания речи. 155
9.3. Получение доступных голосов. 156
9.4. Синтез речи. 157
9.5. Настройка параметров синтеза речи. 159
9.6. Автоматическая приостановка речи. 160
ГЛАВА 10. Работа с файлами. 161
10.0. Введение. 161
10.1. Загрузка текста из файла. 161
10.2. Загрузка изображения из URL-адреса данных. 164
10.3. Загрузка видео в качестве URL-адреса объекта. 166
10.4. Загрузка изображения с помощью перетаскивания. 167
10.5. Проверка и запрос разрешений. 170
10.6. Экспорт данных API в файл. 171
10.7. Экспорт данных API со ссылкой для скачивания. 173
10.8. Загрузка файла с помощью перетаскивания. 175
ГЛАВА 11. Интернационализация. 177
11.0. Введение. 177
11.1. Форматирование даты.. 178
11.2. Получение частей отформатированной даты.. 178
11.3. Форматирование относительной даты.. 179
11.4. Форматирование чисел. 181
11.5. Округление знаков после точки. 182
11.6. Форматирование ценового диапазона. 183
11.7. Форматирование единиц измерения. 184
11.8. Применение правил плюрализации. 184
11.9. Подсчет символов, слов и предложений. 186
11.10. Форматирование списков. 187
11.11. Сортировка массива имен. 188
ГЛАВА 12. Веб-компоненты.. 190
12.0. Введение. 190
12.1. Создание компонента для отображения сегодняшней даты.. 193
12.2. Создание компонента для форматирования пользовательской даты.. 194
12.3. Создание компонента обратной связи. 196
12.4. Создание компонента профильной карточки. 200
12.5. Создание компонента изображения с отложенной загрузкой. 202
12.6. Создание компонента раскрытия информации. 204
12.7. Создание стилизованного компонента кнопки. 207
ГЛАВА 13. Элементы интерфейса пользователя. 211
13.0. Введение. 211
13.1. Создание диалогового окна предупреждения. 212
13.2. Создание диалогового окна подтверждения. 215
13.3. Создание веб-компонента диалогового окна подтверждения. 218
13.4. Использование элемента раскрытия информации. 220
13.5. Отображение всплывающего окна. 222
13.6. Ручное управление всплывающим окном.. 223
13.7. Позиционирование всплывающего окна относительно элемента. 224
13.8. Отображение всплывающей подсказки. 227
13.9. Отображение уведомления. 229
ГЛАВА 14. Интеграция устройств. 231
14.0. Введение. 231
14.1. Считывание состояния батареи. 231
14.2. Считывание состояния сети. 234
14.3. Определение местоположения устройства. 235
14.4. Отображение местоположения устройства на карте. 237
14.5. Копирование и вставка текста. 238
14.6. Совместное использование контента с помощью Web Share API 241
14.7. Создание вибрации устройства. 242
14.8. Настройка ориентации устройства. 243
ГЛАВА 15. Измерение производительности. 245
15.0. Введение. 245
15.1. Измерение производительности загрузки страниц. 246
15.2. Измерение эффективности использования ресурсов. 247
15.3. Поиск самых медленных ресурсов. 247
15.4. Определение тайминга для конкретного ресурса. 248
15.5. Профилирование производительности рендеринга. 249
15.6. Профилирование многоэтапных задач. 251
15.7. Прослушивание показателей производительности. 253
ГЛАВА 16. Работа с консолью… 255
16.0. Введение. 255
16.1. Стилизации вывода консоли. 255
16.2. Использование уровней в журналах сообщений. 256
16.3. Создание именованных регистраторов. 257
16.4. Отображение массива объектов в таблице. 258
16.5. Использование консольных таймеров. 260
16.6. Использование консольных групп. 261
16.7. Использование счетчиков. 263
16.8. Регистрация переменной и ее значения. 264
16.9. Протоколирование трассировки стека. 265
16.10. Проверка ожидаемых значений. 266
16.11. Изучение свойств объекта. 267
ГЛАВА 17. CSS. 269
17.0. Введение. 269
17.1. Выделение текстовых областей. 269
17.2. Предотвращение появления текста без стилизации. 272
17.3. Анимация переходов DOM.. 274
17.4. Изменение таблиц стилей во время выполнения. 276
17.5. Условная установка CSS-класса. 277
17.6. Соответствие медиазапросам.. 277
17.7. Получение вычисленного стиля элемента. 278
ГЛАВА 18. Медиа. 281
18.0. Введение. 281
18.1. Запись экрана. 281
18.2. Захват изображения с камеры пользователя. 284
18.3. Захват видео с камеры пользователя. 286
18.4. Определение возможностей системной поддержки медиа. 288
18.5. Применение видеофильтров. 290
ГЛАВА 19. Заключительные замечания. 292
19.0. Введение. 292
19.1. В защиту сторонних библиотек. 292
19.2. Определяйте функции, а не версии браузера. 292
19.3. Полифилы.. 293
19.4. Заглядывая в будущее. 293
Предметный указатель. 296
Об авторе. 302
Об изображении на обложке. 303
