Метка: JavaScript

Опубликовано

“Изучаем Vue: основные концепции и практические паттерны для современных и масштабируемых пользовательских интерфейсов”

Изучаем Vue

Книга посвящена созданию с нуля пользовательских интерфейсов и фронтенд-приложений с помощью Vue.js — современной платформы JavaScript. На практических примерах разработчики поэтапно познакомятся с инструментами и библиотеками экосистемы Vue.js и научатся создавать полноценные веб-приложения. Рассматриваются ключевые аспекты работы с Vue.js: создание компонентов, добавление реактивности, управление состоянием с помощью Pinia, настройка системы маршрутизации с использованием Vue Router, а также создание базовых анимационных эффектов. Подробно описана настройка фронтенда с помощью инструмента сборки для управления кодом Vite.js, создание повторно используемых компонентов, передача приложению данных с внешнего сервера, тестирование с использованием Vitest и Playwright. Показано, как управлять потоком приложения, реализовывать статическую и динамическую маршрутизацию, а также интегрировать Vue.js в существующие проекты.

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

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

В книге показано, как:

  • создавать повторно используемые системы компонентов с помощью Vue.js;
  • добавлять реактивность в существующее статическое приложение;
  • настраивать фронтенд с помощью Vite.js — инструмента сборки для управления кодом проекта;
  • создавать интерактивную систему управления состоянием фронтенда с помощью Pinia;
  • подключать к приложению Vue данные с внешнего сервера;
  • управлять потоком приложения с помощью статической и динамической маршрутизации посредством Vue Router;
  • тестировать приложение с помощью Vitest и Playwright.

Книгу “Изучаем Vue: основные концепции и практические паттерны для современных и масштабируемых пользовательских интерфейсов“.

Предисловие…………………………………………………………………………………………… 11

Условные обозначения……………………………………………………………………………………………………………… 11

Использование примеров кода…………………………………………………………………………………………………. 12

Благодарности…………………………………………………………………………………………………………………………… 13

Глава 1. Добро пожаловать в мир Vue.js!……………………………………………….. 15

Что такое Vue.js?………………………………………………………………………………………………………………………… 15

Преимущества Vue в современной веб-разработке………………………………………………………………… 16

Установка Node.js………………………………………………………………………………………………………………………. 16

NPM………………………………………………………………………………………………………………………………….. 17

Yarn………………………………………………………………………………………………………………………………….. 19

Инструменты разработчика Vue………………………………………………………………………………………………. 20

Инструмент управления сборкой Vite.js………………………………………………………………………………….. 21

Создание нового приложения Vue……………………………………………………………………………………………. 22

Файловая структура проекта……………………………………………………………………………………………………. 23

Резюме…………………………………………………………………………………………………………………………………………. 24

Глава 2. Как работает Vue: основы………………………………………………………… 25

Виртуальный DOM “под капотом”…………………………………………………………………………………………… 25

Проблема обновления компоновки……………………………………………………………………………….. 26

Что такое виртуальный DOM?………………………………………………………………………………………. 27

Как виртуальный DOM работает вместе с Vue……………………………………………………………. 27

Экземпляр приложения Vue и Options API………………………………………………………………………………. 29

Изучаем Options API………………………………………………………………………………………………………………….. 30

Синтаксис шаблонов…………………………………………………………………………………………………………………. 32

Создание локального состояния в свойстве data()…………………………………………………………………. 33

Как работает реактивность в фреймворке Vue……………………………………………………………………….. 36

Двустороннее связывание с помощью v-model……………………………………………………………………….. 38

Использование модификатора v-model.lazy…………………………………………………………………………….. 41

Связывание реактивных данных и передача свойств с помощью v-bind……………………………… 42

Привязка к классу и атрибутам стиля……………………………………………………………………………………… 44

Перебор коллекции с помощью v-for……………………………………………………………………………………….. 47

Перебор свойств объекта……………………………………………………………………………………………….. 50

Уникальная привязка элемента с помощью атрибута key………………………………………….. 51

Обработка событий v-on…………………………………………………………………………………………………………… 52

Использование модификаторов v-on…………………………………………………………………………….. 53

События клавиатуры с помощью модификаторов клавиш………………………………………… 56

Условный рендеринг элементов с помощью v-if, v-else и v-else-if………………………………………….. 57

Условная видимость элементов с помощью v-show………………………………………………………………… 60

Динамическая отрисовка HTML-кода с помощью v-html………………………………………………………. 61

Отображение текста с помощью v-text…………………………………………………………………………………….. 62

Оптимизация рендеринга с помощью v-once и v-memo…………………………………………………………… 62

Глобальная регистрация компонентов……………………………………………………………………………………. 65

Резюме…………………………………………………………………………………………………………………………………………. 66

Глава 3. Создание более сложных компонентов…………………………………….. 67

Структура однофайлового компонента…………………………………………………………………………………… 67

Использование defineComponent() для поддержки TypeScript………………………………………………. 70

Хуки жизненного цикла компонента………………………………………………………………………………………… 71

setup…………………………………………………………………………………………………………………………………. 73

beforeCreate…………………………………………………………………………………………………………………….. 75

created……………………………………………………………………………………………………………………………… 75

beforeMount…………………………………………………………………………………………………………………….. 75

mounted……………………………………………………………………………………………………………………………. 75

beforeUpdate……………………………………………………………………………………………………………………. 76

updated…………………………………………………………………………………………………………………………….. 76

beforeUnmount…………………………………………………………………………………………………………………. 76

unmounted………………………………………………………………………………………………………………………… 76

Методы……………………………………………………………………………………………………………………………………….. 80

Вычисляемые свойства……………………………………………………………………………………………………………… 82

Наблюдатели……………………………………………………………………………………………………………………………… 84

Наблюдение за изменениями вложенных свойств………………………………………………………. 87

Использование метода this.$watch()……………………………………………………………………………… 89

Возможности слотов………………………………………………………………………………………………………………….. 91

Именованные слоты в теге template с директивой v-slot………………………………………………………… 95

Использование ссылок ref…………………………………………………………………………………………………………. 98

Общая конфигурация компонентов с помощью миксинов…………………………………………………… 100

Локальные стили в компонентах……………………………………………………………………………………………. 104

Применение локальных CSS-стилей к дочернему компоненту………………………………… 107

Применение локальных стилей к содержимому слота……………………………………………… 108

Использование данных компонента в стиле с помощью псевдокласса v-bind()…….. 108

Определение стилей компонентов с помощью CSS-модулей………………………………………………. 110

Резюме………………………………………………………………………………………………………………………………………. 112

Глава 4. Взаимодействие компонентов…………………………………………………. 113

Вложенные компоненты и поток данных в Vue……………………………………………………………………. 113

Использование props для передачи данных в дочерние компоненты……………………… 114

Объявление входных параметров с валидацией и значениями по умолчанию……… 117

Объявление входных параметров с проверкой пользовательских типов……………….. 119

Объявление входных параметров с помощью defineProps()и withDefaults()………….. 122

Взаимодействие компонентов через пользовательские события………………………………………… 123

Определение пользовательских событий с помощью defineEmits()……………………………………. 127

Взаимодействие компонентов с помощью provide/inject…………………………………………………….. 129

Использование provide для передачи данных…………………………………………………………… 129

Использование inject для получения данных…………………………………………………………….. 130

Teleport API………………………………………………………………………………………………………………………………. 131

Реализация модального окна с помощью Teleport и элемента <dialog>……………….. 133

Проблема рендеринга при использовании Teleport………………………………………………….. 140

Резюме………………………………………………………………………………………………………………………………………. 141

Глава 5. Composition API………………………………………………………………………. 143

Создание компонентов в Composition API…………………………………………………………………………….. 143

Управление данными с помощью ref() и reactive()……………………………………………………………….. 144

Использование ref()………………………………………………………………………………………………………. 144

Использование reactive()……………………………………………………………………………………………… 149

Хуки жизненного цикла в Composition API……………………………………………………………………………. 151

Наблюдатели в Composition API……………………………………………………………………………………………. 154

Использование computed()………………………………………………………………………………………………………. 157

Создание многократно используемых компосаблов……………………………………………………………. 159

Резюме………………………………………………………………………………………………………………………………………. 163

Глава 6. Загрузка внешних данных……………………………………………………… 165

Что такое Axios?………………………………………………………………………………………………………………………. 165

Установка Axios……………………………………………………………………………………………………………………….. 166

Загрузка данных с помощью хуков жизненного цикла и Axios…………………………………………… 166

Проблема асинхронных запросов в режиме выполнения……………………………………………………. 170

Создание повторно используемого компонента для выполнения запросов………………………. 173

Хранение данных на стороне браузера………………………………………………………………………………… 176

Резюме………………………………………………………………………………………………………………………………………. 177

Глава 7. Продвинутый рендеринг, динамические компоненты
и плагины…………………………………………………………………………………………….. 179

Функция рендеринга и JSX……………………………………………………………………………………………………… 179

Использование функции рендеринга………………………………………………………………………….. 179

Использование функции h для создания VNode………………………………………………………… 180

JavaScript XML в функции рендеринга……………………………………………………………………….. 182

Функциональный компонент………………………………………………………………………………………………….. 183

Определение props и emits для функционального компонента……………………………………………. 185

Пользовательская функциональность глобального уровня с помощью плагинов Vue…….. 185

Динамический рендеринг с помощью тега <component>……………………………………………………. 188

Кеширование экземпляра неактивного компонента с помощью <keep-alive>…………………… 189

Резюме………………………………………………………………………………………………………………………………………. 191

Глава 8. Маршрутизация……………………………………………………………………… 193

Что такое маршрутизация?…………………………………………………………………………………………………….. 193

Использование Vue Router………………………………………………………………………………………………………. 194

Установка Vue Router…………………………………………………………………………………………………… 194

Определение маршрутов……………………………………………………………………………………………… 196

Создание экземпляра маршрутизатора……………………………………………………………………… 199

Подключение экземпляра маршрутизатора к приложению Vue……………………………… 200

Рендеринг текущей страницы с помощью RouterView………………………………………………. 201

Панель навигации с помощью компонента RouterLink…………………………………………….. 202

Передача данных между маршрутами………………………………………………………………………………….. 204

Передача параметров маршрута с помощью props……………………………………………………………… 208

Навигационные хуки……………………………………………………………………………………………………………….. 209

Глобальные навигационные хуки………………………………………………………………………………. 209

Навигационные хуки уровня маршрута…………………………………………………………………….. 210

Навигационные хуки уровня компонента………………………………………………………………….. 211

Создание вложенных маршрутов…………………………………………………………………………………………… 213

Создание динамических маршрутов……………………………………………………………………………………… 215

Переход назад и вперед с помощью экземпляра маршрутизатора…………………………………….. 218

Обработка неопределенных маршрутов……………………………………………………………………………….. 219

Резюме………………………………………………………………………………………………………………………………………. 221

Глава 9. Управление состояниями с помощью Pinia…………………………….. 223

Что такое управление состояниями в Vue?……………………………………………………………………………. 223

Что такое Pinia………………………………………………………………………………………………………………………….. 225

Создание хранилища pizzas для Pizza House………………………………………………………………………… 226

Создание хранилища cart для Pizza House……………………………………………………………………………. 230

Использование хранилища cart в компоненте………………………………………………………………………. 231

Добавление элементов в корзину из галереи………………………………………………………………………… 232

Отображение элементов корзины с помощью действий………………………………………………………. 235

Удаление товаров из хранилища cart……………………………………………………………………………………. 239

Модульное тестирование хранилищ Pinia…………………………………………………………………………….. 241

Подписка на изменения хранилища и добавление побочных эффектов…………………………….. 241

Резюме………………………………………………………………………………………………………………………………………. 244

Глава 10. Переходы и анимация в Vue…………………………………………………. 245

Что такое CSS-переходы и CSS-анимация?…………………………………………………………………………… 245

Компонент transition в Vue……………………………………………………………………………………………………… 246

Использование атрибутов с пользовательскими классами переходов……………………. 249

Эффект перехода при первом рендеринге с помощью appear………………………………….. 250

Создание перехода для группы элементов……………………………………………………………………………. 251

Создание переходов для маршрутов……………………………………………………………………………………… 252

Использование событий перехода для управления анимацией………………………………………….. 253

Резюме………………………………………………………………………………………………………………………………………. 255

Глава 11. Тестирование в Vue………………………………………………………………. 257

Общие сведения о модульном и сквозном тестировании……………………………………………………… 257

Vitest как инструмент для модульного тестирования…………………………………………………………… 259

Настройка Vitest с помощью параметров и файла конфигурации……………………………………… 259

Создание вашего первого теста……………………………………………………………………………………………… 261

Тестирование компосаблов, не использующих хуки жизненного цикла……………………………. 266

Тестирование компосаблов с хуками жизненного цикла…………………………………………………….. 269

Тестирование компонентов с помощью Vue Test Utils………………………………………………………….. 274

Тестирование событий компонента……………………………………………………………………………………….. 277

Пользовательский интерфейс Vitest……………………………………………………………………………………….. 279

Использование Vitest с инструментами для оценки покрытия кода……………………………………. 280

Сквозное тестирование с помощью PlaywrightJS………………………………………………………………….. 284

Отладка сквозных тестов с помощью расширения Playwright Test для VSCode………………… 291

Резюме………………………………………………………………………………………………………………………………………. 293

Глава 12. Непрерывная интеграция и непрерывное развертывание
Vue-приложений…………………………………………………………………………………… 295

CI/CD в разработке программного обеспечения………………………………………………………………….. 295

Непрерывная интеграция…………………………………………………………………………………………….. 296

Непрерывная доставка………………………………………………………………………………………………… 296

Непрерывное развертывание………………………………………………………………………………………. 296

Конвейер CI/CD с помощью GitHub Actions………………………………………………………………………….. 297

Непрерывное развертывание с помощью Netlify………………………………………………………………….. 301

Развертывание с помощью Netlify CLI…………………………………………………………………………………… 303

Резюме………………………………………………………………………………………………………………………………………. 304

Глава 13. Рендеринг на стороне сервера в фреймворке Vue………………….. 305

Рендеринг на стороне клиента в Vue……………………………………………………………………………………… 305

Рендеринг на стороне сервера (SSR)……………………………………………………………………………………… 306

Рендеринг на стороне сервера с помощью Nuxt.js……………………………………………………………….. 311

Генератор статических сайтов (SSG)…………………………………………………………………………………….. 319

Напоследок………………………………………………………………………………………………………………………………. 320

Предметный указатель…………………………………………………………………………. 323

Об авторе……………………………………………………………………………………………… 331

Об изображении на обложке………………………………………………………………… 333

Опубликовано

Изучаем паттерны проектирования JavaScript: руководство для разработчиков JavaScript и React, 2-е издание

Изучаем паттерны проектирования JavaScript: руководство для разработчиков JavaScript и React

Основополагающая книга по паттернам архитектуры и проектирования приложений на языке JavaScript. Рассмотрены порождающие, поведенческие, структурные паттерны, модули, примеси, наблюдатели и медиаторы, применяемые в веб-разработке, архитектурные подходы MVC, MVP и MVVM, островная архитектура веб-приложений, серверные паттерны, в частности паттерны рендеринга, а также специфические темы и паттерны, важные при работе в React — де-факто главном фреймворке для клиентской веб-разработки на JavaScript.

Для веб-разработчиков

Руководство для разработчиков JavaScript и React

Желаете писать красивый, хорошо структурированный и удобный в поддержке код JavaScript, применяя все современные паттерны проектирования? Хотите, чтобы код получался чистым, эффективным и легко управлялся? Держите руку на пульсе непрерывно обновляющихся лучших практик? В таком случае вам идеально подойдёт обновлённое второе издание данной книги.

В ней подробно разобрано, как применять в JavaScript и React современные паттерны проектирования, а также модули, примеси, наблюдатели и медиаторы. Вы узнаете о паттернах, действующих на стороне сервера, в частности о способах рендеринга, изучите островную архитектуру. Также подробно исследованы известные архитектурные паттерны (MVC, MVP и MVVM) с точки зрения разработчика современных веб-приложений.

Кроме того, вы исследуете современный синтаксис JavaScript, а также специфические паттерны React — в частности хуки, компоненты высшего порядка (HOC) и многие другие, что поможет успевать за вечно изменчивым миром веб-разработки.

В этой книге:

  • Архитектурные паттерны для структурирования компонентов и приложений
  • Более 20 паттернов проектирования, применимых в JavaScript и React, которые полезны разработчику независимо от его опыта
  • Различные категории классических паттернов проектирования, в том числе порождающие, структурные и поведенческие
  • Важнейшие приемы повышения производительности, в том числе динамический импорт и разделение кода
  • Паттерны рендеринга, в том числе рендеринг на стороне сервера, гидратация, островная архитектура и многие другие приёмы

Книгу “Изучаем паттерны проектирования JavaScript: руководство для разработчиков JavaScript и React, 2-е издание“ можно купить со скидкой в интернет-магазине издательства “БХВ“.

Предисловие…………………………………………………………………………………………… 13

Структура книги………………………………………………………………………………………………………………………… 14

Условные обозначения, используемые в этой книге………………………………………………………………. 15

Использование примеров кода…………………………………………………………………………………………………. 16

Онлайн-обучение O’Reilly…………………………………………………………………………………………………………. 16

Как с нами связаться………………………………………………………………………………………………………………….. 17

Благодарности…………………………………………………………………………………………………………………………… 17

Глава 1. Введение в паттерны проектирования……………………………………… 19

История создания паттернов проектирования………………………………………………………………………… 20

Что такое паттерн?…………………………………………………………………………………………………………………….. 21

Обычный вариант использования паттернов проектирования……………………………………………… 22

Итог……………………………………………………………………………………………………………………………………………… 23

Глава 2. Тестирование паттернов, протопаттерны и правило трех…………. 24

Что такое протопаттерны?……………………………………………………………………………………………………….. 24

“Паттерные” тесты…………………………………………………………………………………………………………………….. 24

Правило трех……………………………………………………………………………………………………………………………… 26

Итог……………………………………………………………………………………………………………………………………………… 26

Глава 3. Структурирование и написание паттернов………………………………. 27

Структура паттерна проектирования……………………………………………………………………………………… 27

Хорошо написанные паттерны………………………………………………………………………………………………… 28

Написание паттерна………………………………………………………………………………………………………………….. 29

Итог……………………………………………………………………………………………………………………………………………… 30

Глава 4. Антипаттерны………………………………………………………………………….. 31

Что такое антипаттерны?………………………………………………………………………………………………………….. 31

Антипаттерны в JavaScript………………………………………………………………………………………………………… 32

Итог……………………………………………………………………………………………………………………………………………… 33

Глава 5. Современный синтаксис и функции JavaScript………………………… 34

Важность разделения приложений………………………………………………………………………………………….. 34

Модули с импортом и экспортом……………………………………………………………………………………………… 35

Объекты модуля…………………………………………………………………………………………………………………………. 37

Модули, загружаемые из удаленных источников………………………………………………………………….. 37

Статический импорт………………………………………………………………………………………………………………….. 38

Динамический импорт……………………………………………………………………………………………………………….. 38

Импорт при взаимодействии…………………………………………………………………………………………………….. 39

Импорт при видимости………………………………………………………………………………………………………………. 39

Модули для сервера………………………………………………………………………………………………………………….. 39

Преимущества использования модулей…………………………………………………………………………………… 40

Классы с конструкторами, геттерами и сеттерами………………………………………………………………… 41

Классы в JavaScript Frameworks……………………………………………………………………………………………….. 43

Итог……………………………………………………………………………………………………………………………………………… 44

Дополнительные материалы…………………………………………………………………………………………………….. 44

Глава 6. Категории паттернов проектирования……………………………………… 45

Предпосылки создания паттернов проектирования……………………………………………………………….. 45

Порождающие паттерны проектирования………………………………………………………………………………. 46

Структурные паттерны проектирования…………………………………………………………………………………. 46

Поведенческие паттерны проектирования………………………………………………………………………………. 46

Классы паттернов проектирования…………………………………………………………………………………………. 46

Итог……………………………………………………………………………………………………………………………………………… 48

Глава 7. Паттерны проектирования JavaScript………………………………………. 49

Порождающие паттерны…………………………………………………………………………………………………………… 49

Паттерн Конструктор………………………………………………………………………………………………………………… 50

Создание объекта…………………………………………………………………………………………………………………. 50

Базовые паттерны Конструктор…………………………………………………………………………………………. 52

Конструкторы с Прототипами……………………………………………………………………………………………. 53

Паттерны Модуль……………………………………………………………………………………………………………………… 53

Объектные литералы……………………………………………………………………………………………………………. 54

Паттерн Модуль…………………………………………………………………………………………………………………… 55

Приватность………………………………………………………………………………………………………………. 55

История………………………………………………………………………………………………………………………. 56

Примеры…………………………………………………………………………………………………………………….. 56

Варианты паттерна Модуль……………………………………………………………………………………………….. 59

Импорт примесей………………………………………………………………………………………………………. 59

Экспорт………………………………………………………………………………………………………………………. 60

Преимущества паттерна Модуль……………………………………………………………………………………….. 60

Недостатки……………………………………………………………………………………………………………………………. 61

Паттерн Модуль с WeakMap……………………………………………………………………………………………….. 61

Модули с современными библиотеками……………………………………………………………………………. 64

Паттерн Раскрывающийся модуль…………………………………………………………………………………………… 64

Преимущества паттерна Раскрывающийся модуль………………………………………………………….. 66

Недостатки паттерна…………………………………………………………………………………………………………… 66

Паттерн Одиночка……………………………………………………………………………………………………………………… 66

Управление состоянием в React………………………………………………………………………………………….. 70

Паттерн Прототип……………………………………………………………………………………………………………………… 71

Паттерн Фабрика……………………………………………………………………………………………………………………….. 74

Когда использовать паттерн Фабрика……………………………………………………………………………….. 76

Когда не следует применять паттерн Фабрика…………………………………………………………………. 77

Абстрактные фабрики………………………………………………………………………………………………………….. 77

Структурные паттерны……………………………………………………………………………………………………………… 78

Паттерн Фасад…………………………………………………………………………………………………………………………… 78

Паттерн Примесь……………………………………………………………………………………………………………………….. 81

Подклассы………………………………………………………………………………………………………………………………….. 81

Примеси………………………………………………………………………………………………………………………………………. 82

Преимущества и недостатки примесей………………………………………………………………………………. 85

Паттерн Декоратор……………………………………………………………………………………………………………………. 85

Псевдоклассические декораторы…………………………………………………………………………………………….. 89

Интерфейсы…………………………………………………………………………………………………………………………… 89

Абстрактные Декораторы…………………………………………………………………………………………………… 90

Преимущества и недостатки Декоратора………………………………………………………………………….. 93

Приспособленец…………………………………………………………………………………………………………………………. 94

Использование Приспособленцев………………………………………………………………………………………. 95

Приспособленцы и обмен данными……………………………………………………………………………………. 95

Реализация классических приспособленцев……………………………………………………………………… 95

Проявление “реализаций”………………………………………………………………………………………… 96

Преобразование кода для использования паттерна Приспособленец……………………………. 98

Простая Фабрика……………………………………………………………………………………………………………….. 100

Управление внешними состояниями………………………………………………………………………………… 101

Паттерн Приспособленец и DOM……………………………………………………………………………………… 102

Пример: централизованная обработка событий…………………………………………………………….. 103

Поведенческие паттерны………………………………………………………………………………………………………… 104

Паттерн Наблюдатель…………………………………………………………………………………………………………….. 105

Разница между паттернами Наблюдатель и Издатель/Подписчик………………………………. 109

Преимущества паттернов Наблюдатель и Издатель/Подписчик………………………………….. 111

Недостатки паттернов Наблюдатель, Издатель/Подписчик…………………………………………. 111

Реализация Издателя/Подписчика……………………………………………………………………………………. 112

Пример реализации Издателя/Подписчика………………………………………………………….. 112

Использование нашей реализации………………………………………………………………………… 113

Уведомления пользовательского интерфейса (UI)………………………………………………. 114

Разделение приложений с помощью реализации Pub/Sub Бена Алмана…………… 115

Разделение приложения jQuery на основе Ajax…………………………………………………… 117

Паттерн Наблюдатель в экосистеме React…………………………………………………………… 120

Паттерн Посредник………………………………………………………………………………………………………………….. 120

Простой Посредник……………………………………………………………………………………………………………. 122

Сходства и различия………………………………………………………………………………………………………….. 123

События…………………………………………………………………………………………………………………… 123

Сторонние объекты………………………………………………………………………………………………… 123

Выбор паттерна: когда какой использовать………………………………………………………… 124

Использование агрегатора событий………………………………………………………………………………… 124

Использование Посредника………………………………………………………………………………………………. 125

Агрегатор событий (Pub/Sub) и посредник, работающие вместе………………………………….. 125

Медиатор/промежуточное ПО в современном JavaScript………………………………………………. 126

Сравнение паттернов Медиатор и Фасад……………………………………………………………………….. 127

Паттерн Команда…………………………………………………………………………………………………………………….. 127

Итог…………………………………………………………………………………………………………………………………………… 129

Глава 8. Паттерны JavaScript MV*………………………………………………………. 130

MVC………………………………………………………………………………………………………………………………………….. 130

MVC из Smalltalk-80…………………………………………………………………………………………………………… 130

MVC для разработчиков JavaScript……………………………………………………………………………………….. 131

Модели………………………………………………………………………………………………………………………………… 132

Представления……………………………………………………………………………………………………………………. 133

Шаблонизация……………………………………………………………………………………………………………………. 135

Контроллеры………………………………………………………………………………………………………………………. 137

Что дает нам MVC?…………………………………………………………………………………………………………………. 137

MVC из Smalltalk-80 на JavaScript…………………………………………………………………………………………. 138

Кратко о MVC………………………………………………………………………………………………………………………….. 138

MVP…………………………………………………………………………………………………………………………………………… 139

Модели, Представления и Presenter’ы………………………………………………………………………………. 139

MVP или MVC?…………………………………………………………………………………………………………………… 140

MVVM………………………………………………………………………………………………………………………………………. 141

История MVVM………………………………………………………………………………………………………………….. 141

Модель………………………………………………………………………………………………………………………………… 142

Представление……………………………………………………………………………………………………………………. 143

ПредставлениеМодель………………………………………………………………………………………………………. 143

Коротко об элементах Представление и ПредставлениеМодель………………………………….. 144

Сравнение компонента ПредставлениеМодель с Моделью………………………………………….. 144

Плюсы и минусы MVVM…………………………………………………………………………………………………………. 144

Преимущества MVVM……………………………………………………………………………………………………….. 144

Недостатки MVVM……………………………………………………………………………………………………………. 145

MVC, MVP или MVVM?………………………………………………………………………………………………………….. 145

Современные паттерны семейства MV*……………………………………………………………………………….. 146

МV* и React.js…………………………………………………………………………………………………………………….. 146

Итог…………………………………………………………………………………………………………………………………………… 147

Глава 9. Паттерны асинхронного программирования………………………….. 148

Асинхронное программирование…………………………………………………………………………………………… 148

Предпосылки……………………………………………………………………………………………………………………………. 150

Паттерны с использованием промисов………………………………………………………………………………….. 151

Сцепление промисов………………………………………………………………………………………………………….. 152

Обработка ошибок с использованием промисов…………………………………………………………….. 152

Промисы и параллелизм……………………………………………………………………………………………………. 153

Последовательное выполнение промисов……………………………………………………………………….. 153

Мемоизация промисов……………………………………………………………………………………………………….. 153

Конвейер промисов……………………………………………………………………………………………………………. 154

Повторное выполнение промисов…………………………………………………………………………………….. 154

Декоратор для промисов…………………………………………………………………………………………………… 155

Гонка промисов………………………………………………………………………………………………………………….. 155

Паттерны async/await……………………………………………………………………………………………………………… 155

Объединение функций async……………………………………………………………………………………………… 156

Итерация async…………………………………………………………………………………………………………………… 156

Обработка ошибок с использованием async……………………………………………………………………. 157

async и параллелизм………………………………………………………………………………………………………….. 157

Последовательное выполнение async………………………………………………………………………………. 157

Мемоизация async………………………………………………………………………………………………………………. 158

Обработка событий с использованием async………………………………………………………………….. 158

Конвейер async/await…………………………………………………………………………………………………………. 158

Повторное выполнение async……………………………………………………………………………………………. 159

Декоратор для async/await………………………………………………………………………………………………… 159

Еще несколько практических примеров………………………………………………………………………………… 159

Отправка HTTP-запроса……………………………………………………………………………………………………. 160

Чтение файла из файловой системы…………………………………………………………………………………. 160

Запись в файл, находящийся в файловой системе…………………………………………………………… 160

Выполнение нескольких операций async…………………………………………………………………………. 160

Последовательное выполнение нескольких операций async…………………………………………. 161

Кеширование результата операции async……………………………………………………………………….. 161

Обработка событий с помощью async/await…………………………………………………………………… 161

Повторное выполнение операции async при сбое…………………………………………………………… 161

Создание декоратора для async/await……………………………………………………………………………… 162

Итоги…………………………………………………………………………………………………………………………………………. 163

Глава 10. Модульные паттерны разработки в JavaScript……………………… 164

Примечание о загрузчиках скриптов……………………………………………………………………………………… 164

Формат AMD……………………………………………………………………………………………………………………………. 164

Начало работы с Модулями…………………………………………………………………………………………….. 165

Модули AMD с jQuery……………………………………………………………………………………………………….. 169

Регистрация jQuery в качестве async-совместимого модуля……………………………….. 169

Почему AMD лучше всего подходит для написания модульного кода на JavaScript?         170

Что еще почитать об AMD……………………………………………………………………………………… 170

Загрузчики скриптов и фреймворки, поддерживающие AMD…………………………….. 171

Формат AMD: итоги…………………………………………………………………………………………………………… 171

CommonJS………………………………………………………………………………………………………………………………… 171

Начало работы с CommonJS……………………………………………………………………………………………. 172

Потребление нескольких зависимостей…………………………………………………………………………… 173

CommonJS в Node.js…………………………………………………………………………………………………………… 173

Подходит ли CommonJS для работы с браузером?………………………………………………………… 174

Что еще почитать о CommonJS………………………………………………………………………………………… 175

AMD и CommonJS: разные, но равные стандарты………………………………………………………………. 175

UMD: формат подключаемых модулей, совместимый с AMD и CommonJS………………… 175

Использование CommonJS, AMD или глобальных параметров браузера для создания модуля      176

Подключаемые модули jQuery, которые работают во всех средах…………………… 177

Что почитать об UMD и AMD………………………………………………………………………………… 180

Итоги…………………………………………………………………………………………………………………………………………. 180

Глава 11. Паттерны пространства имен……………………………………………….. 181

Главное об организации пространств имен………………………………………………………………………….. 181

Одиночные глобальные переменные……………………………………………………………………………………… 182

Пространство имен с префиксом……………………………………………………………………………………………. 182

Литеральная нотация объекта……………………………………………………………………………………………….. 183

Вложенное пространство имен………………………………………………………………………………………………. 186

Выражения с немедленно вызываемой функцией…………………………………………………………………. 187

Внедрение пространства имен……………………………………………………………………………………………….. 189

Более сложные паттерны для организации пространства имен…………………………………………. 191

Автоматизация вложенного пространства имен…………………………………………………………….. 191

Паттерн объявления зависимостей…………………………………………………………………………………… 193

Глубокое расширение объекта…………………………………………………………………………………………. 194

Рекомендации…………………………………………………………………………………………………………………………… 196

Итоги…………………………………………………………………………………………………………………………………………. 196

Глава 12. Паттерны разработки React.js………………………………………………. 197

React: введение………………………………………………………………………………………………………………………… 197

Используемая терминология…………………………………………………………………………………………….. 198

Основные понятия………………………………………………………………………………………………………………. 198

Компоненты более высокого порядка……………………………………………………………………………………. 200

Объединение……………………………………………………………………………………………………………………….. 203

Преимущества паттерна HOC…………………………………………………………………………………………… 203

Недостатки HOC………………………………………………………………………………………………………………… 203

Рендер-пропсы…………………………………………………………………………………………………………………………. 204

Подъем состояния………………………………………………………………………………………………………………. 206

Дочерние элементы в качестве функции………………………………………………………………………….. 208

Преимущества рендер-пропсов………………………………………………………………………………………… 209

Недостатки рендер-пропсов……………………………………………………………………………………………… 209

Паттерн Хуки……………………………………………………………………………………………………………………………. 209

Компоненты классов………………………………………………………………………………………………………….. 210

Реструктуризация………………………………………………………………………………………………………………. 211

Сложность…………………………………………………………………………………………………………………………… 212

Хуки…………………………………………………………………………………………………………………………………….. 212

Хук useState………………………………………………………………………………………………………………………………. 212

Хук useEffect……………………………………………………………………………………………………………………….. 214

Пользовательские Хуки……………………………………………………………………………………………………… 214

Дополнительные рекомендации по использованию Хуков……………………………………………. 216

Преимущества и недостатки Хуков………………………………………………………………………………….. 217

Сравнение Хуков React с классами………………………………………………………………………………….. 219

Статический импорт………………………………………………………………………………………………………………… 220

Динамический импорт…………………………………………………………………………………………………………….. 221

Загружаемые компоненты…………………………………………………………………………………………………. 222

Импорт при взаимодействии……………………………………………………………………………………………… 224

Импорт при появлении в поле видимости………………………………………………………………………… 224

Расщепление кода……………………………………………………………………………………………………………………. 225

Расщепление кода на основе маршрутов………………………………………………………………………… 225

Расщепление кода на основе бандлов……………………………………………………………………………… 226

Паттерн PRPL…………………………………………………………………………………………………………………………… 227

Определение приоритетов загрузки……………………………………………………………………………………….. 230

Предварительная загрузка в одностраничных приложениях………………………………………… 231

Хитрость: предварительная загрузка + async………………………………………………………………….. 232

Предварительная загрузка в Chrome 95+………………………………………………………………………… 232

Виртуализация списков…………………………………………………………………………………………………………… 232

Как работает организация окон/виртуализация?…………………………………………………………… 233

Списки…………………………………………………………………………………………………………………………………. 233

Сетка……………………………………………………………………………………………………………………………………. 235

Улучшения в веб-платформе…………………………………………………………………………………………….. 236

Выводы……………………………………………………………………………………………………………………………………… 236

Итоги…………………………………………………………………………………………………………………………………………. 236

Глава 13. Паттерны рендеринга…………………………………………………………… 237

Паттерны рендеринга — это важно……………………………………………………………………………………….. 238

Рендеринг на стороне клиента (CSR)…………………………………………………………………………………….. 240

Рендеринг на стороне сервера (SSR)……………………………………………………………………………………… 240

Статический рендеринг…………………………………………………………………………………………………………… 241

Инкрементная статическая регенерация (ISR)………………………………………………………………… 243

ISR по требованию…………………………………………………………………………………………………………….. 243

Статический рендеринг: заключение……………………………………………………………………………….. 244

Потоковый SSR………………………………………………………………………………………………………………………… 244

Пограничный SSR……………………………………………………………………………………………………………………. 245

Гибридный рендеринг……………………………………………………………………………………………………………… 246

Постепенная гидратация…………………………………………………………………………………………………………. 246

“Островная” архитектура……………………………………………………………………………………………………….. 247

Реализация островов………………………………………………………………………………………………………….. 248

Преимущества и недостатки островной архитектуры……………………………………………………. 249

React Server Components…………………………………………………………………………………………………………. 250

Гибридный рендеринг с RSC и Маршрутизатор приложений Next.js…………………………… 251

Итоги…………………………………………………………………………………………………………………………………………. 251

Глава 14. Структура приложения для React.js………………………………………. 254

Введение…………………………………………………………………………………………………………………………………… 254

Группировка по модулям, функциям или маршрутам……………………………………………………. 254

Группировка по типу файла……………………………………………………………………………………………… 255

Гибридная группировка на основе домена и общих компонентов……………………………….. 256

Структура приложения для современных функций React…………………………………………………… 257

Redux…………………………………………………………………………………………………………………………………… 258

Контейнеры………………………………………………………………………………………………………………………… 258

Хуки…………………………………………………………………………………………………………………………………….. 258

Стилизованные компоненты……………………………………………………………………………………………… 259

Другие рекомендации……………………………………………………………………………………………………………… 259

Структура для приложений Next.js………………………………………………………………………………………… 261

Итог…………………………………………………………………………………………………………………………………………… 262

Глава 15. Выводы………………………………………………………………………………… 263

Предметный указатель…………………………………………………………………………. 265

Об авторе……………………………………………………………………………………………… 269

Об изображении на обложке………………………………………………………………… 270

Османи Эдди

Эдди Османи – ведущий инженер компании Google, руководитель разработчиков браузера Chrome.

Опубликовано

Вышла книга “JavaScript. 32 урока для начинающих”

JavaScript. 32 урока для начинающих

В книге 32 иллюстрированных урока, 40 практических упражнений на тему программирования веб-сценариев и более 20 заданий для самостоятельной работы. Изложены основы JavaScript: типы данных, переменные, управляющие конструкции, функции, массивы, объекты, классы, регулярные выражения, модули, средства для обработки исключений и отладки. Раскрыты события и их обработка, генерирование содержимого страниц, работа с графикой и мультимедиа, веб-формами и элементами управления, взаимодействие с веб-обозревателем, детекторы видимости и изменения размеров. Рассмотрены таймеры, фоновые потоки, использование промисов и асинхронных функций, работа с файлами, программная графика и загрузка данных с веб-сервера. Рассказано о программировании фронтенд- и бэкенд-приложений в среде Node.js, а также об обработке межхостовых запросов.
Электронный архив на сайте издательства содержит коды всех примеров и результаты выполнения упражнений.

Для начинающих веб-разработчиков

JavaScript в картинках и упражнениях

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

Вы узнаете, как

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

Книгу “JavaScript. 32 урока для начинающих” можно купить со скидкой в интернет-магазине издательства “БХВ“.

Предисловие…………………………………………………………………………………………… 15

Почему JavaScript?…………………………………………………………………………………………………………………….. 15

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

Что нового?…………………………………………………………………………………………………………………………………. 16

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

Типографские соглашения………………………………………………………………………………………………………… 17

Часть I. Начала JavaScript и веб-программирования……… 21

Урок 1. Введение в язык JavaScript………………………………………………………… 23

1.1. Упражнение. Консоль веб-обозревателя………………………………………………………………………….. 23

1.2. Упражнение. Типы данных и операторы………………………………………………………………………….. 28

1.3. Упражнение. Переменные и константы…………………………………………………………………………….. 31

1.4. Упражнение. Управляющие выражения…………………………………………………………………………… 33

1.5. Упражнение. Функции………………………………………………………………………………………………………… 36

1.6. Упражнение. Объекты, свойства, методы и классы…………………………………………………………. 37

1.7. Упражнение. Массивы……………………………………………………………………………………………………….. 42

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

Урок 2. Введение в веб-программирование…………………………………………….. 45

2.1. Упражнение. Программное формирование содержимого веб-страницы………………………. 45

2.2. Упражнение. Доступ к элементам веб-страницы…………………………………………………………….. 48

2.3. Упражнение. Обработка событий……………………………………………………………………………………… 51

2.4. Упражнение. Взаимодействие с элементами управления……………………………………………….. 54

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

Часть II. Язык JavaScript……………………………………………………………… 57

Урок 3. Основные понятия JavaScript……………………………………………………. 59

3.1. Выражения, программы и веб-сценарии…………………………………………………………………………… 59

3.1.1. Правила написания выражений………………………………………………………………………………. 59

3.1.2. Встраивание веб-сценариев в веб-страницы………………………………………………………….. 62

3.1.3. Выполнение веб-сценариев……………………………………………………………………………………… 64

3.2. Ключевые слова JavaScript………………………………………………………………………………………………… 65

3.3. Комментарии……………………………………………………………………………………………………………………….. 65

3.4. Строгий режим…………………………………………………………………………………………………………………….. 66

3.5. Блоки……………………………………………………………………………………………………………………………………. 67

3.6. Операторы, их приоритет и последовательность выполнения. Круглые скобки………….. 68

3.7. Типы данных……………………………………………………………………………………………………………………….. 69

3.7.1. Получение типа данных, к которому принадлежит значение………………………………. 70

3.7.2. Неопределенный тип (undefined)…………………………………………………………………………….. 71

3.7.3. Значащие и ссылочные типы данных…………………………………………………………………….. 71

3.8. Присваивание………………………………………………………………………………………………………………………. 72

3.8.1. Простое присваивание……………………………………………………………………………………………… 72

3.8.2. Комбинированное присваивание…………………………………………………………………………….. 73

3.8.3. Условное присваивание……………………………………………………………………………………………. 74

3.9. Оператор выбора………………………………………………………………………………………………………………… 74

3.10. Переменные и константы…………………………………………………………………………………………………. 75

3.10.1. Объявление переменных. Область видимости……………………………………………………. 75

3.10.2. Обращение к переменным…………………………………………………………………………………….. 78

3.10.3. Проверка существования переменной………………………………………………………………… 78

3.10.4. Присваивание значения несуществующей переменной…………………………………….. 79

3.11. Глобальный объект, контекст выполнения и переменная this………………………………………. 79

Урок 4. Логические величины и управляющие выражения……………………. 81

4.1. Логические величины…………………………………………………………………………………………………………. 81

4.1.1. Введение в логический тип данных…………………………………………………………………………. 81

4.1.2. Операторы сравнения………………………………………………………………………………………………. 81

4.1.3. Логические операторы……………………………………………………………………………………………… 83

4.1.4. Преобразование нелогических значений в логические…………………………………………. 84

4.1.4.1. Неявное преобразование……………………………………………………………………………. 84

4.1.4.2. Явное преобразование………………………………………………………………………………… 85

4.1.4.3. Еще раз о проверке существования переменной………………………………………. 85

4.2. Управляющие выражения………………………………………………………………………………………………….. 86

4.2.1. Условные выражения……………………………………………………………………………………………….. 86

4.2.1.1. Множественные условные выражения……………………………………………………… 87

4.2.2. Условный оператор………………………………………………………………………………………………….. 87

4.2.3. Выражение выбора…………………………………………………………………………………………………… 88

4.2.4. Циклы…………………………………………………………………………………………………………………………. 90

4.2.4.1. Цикл со счетчиком………………………………………………………………………………………. 90

4.2.4.2. Цикл с предусловием…………………………………………………………………………………… 92

4.2.4.3. Цикл с постусловием…………………………………………………………………………………… 92

4.2.4.4. Цикл перебора последовательности…………………………………………………………. 93

4.2.4.5. Цикл по свойствам объекта………………………………………………………………………… 93

4.2.4.6. Прерывание цикла………………………………………………………………………………………. 94

4.2.4.7. Прерывание итерации цикла……………………………………………………………………… 94

4.2.4.8. Бесконечный цикл……………………………………………………………………………………….. 94

Урок 5. Числа…………………………………………………………………………………………. 96

5.1. Обычные числа……………………………………………………………………………………………………………………. 96

5.1.1. Запись обычных чисел……………………………………………………………………………………………… 96

5.1.2. Арифметические операторы…………………………………………………………………………………….. 98

5.1.3. Методы и свойства класса Number…………………………………………………………………………. 99

5.1.3.1. Форматированный вывод чисел………………………………………………………………. 102

5.1.4. Класс Math………………………………………………………………………………………………………………. 106

5.1.5. Двоичные операторы……………………………………………………………………………………………… 108

5.1.6. Преобразование значений других типов в числовые………………………………………….. 111

5.1.6.1. Неявное преобразование………………………………………………………………………….. 111

5.1.6.2. Явное преобразование……………………………………………………………………………… 111

5.1.7. Точность представления обычных чисел. Потеря точности………………………………. 113

5.2. Упражнение. Реализуем форматированный вывод чисел…………………………………………….. 114

5.3. Большие целые числа……………………………………………………………………………………………………….. 115

5.4. Самостоятельное упражнение…………………………………………………………………………………………. 117

Урок 6. Строки…………………………………………………………………………………….. 118

6.1. Запись строк………………………………………………………………………………………………………………………. 118

6.1.1. Шаблонные строки…………………………………………………………………………………………………. 120

6.1.1.1. Помеченные строки…………………………………………………………………………………… 120

6.2. Простейшие операции со строками………………………………………………………………………………… 122

6.3. Свойства и методы класса String…………………………………………………………………………………….. 124

6.3.1. Сравнение строк с учетом текущей локали………………………………………………………….. 128

6.4. Преобразование значений других типов в строки…………………………………………………………. 128

6.4.1. Неявное преобразование……………………………………………………………………………………….. 128

6.4.2. Явное преобразование……………………………………………………………………………………………. 129

6.5. Упражнение. Использование средств для обработки строк при программном генерировании содержимого веб-страницы…………………………………………………………………………………………………………………………………………… 129

6.6. Самостоятельное упражнение…………………………………………………………………………………………. 133

Урок 7. Временне отметки…………………………………………………………………. 134

7.1. Создание временнх отметок………………………………………………………………………………………….. 134

7.2. Методы класса Date…………………………………………………………………………………………………………. 135

7.2.1. Форматированный вывод временнх отметок…………………………………………………….. 137

Урок 8. Функции………………………………………………………………………………….. 140

8.1. Вызов функций………………………………………………………………………………………………………………….. 140

8.2. Объявление функций…………………………………………………………………………………………………………. 141

8.2.1. Объявление локальных переменных…………………………………………………………………….. 145

8.2.2. Необязательные параметры функций…………………………………………………………………… 145

8.2.3. Функции с произвольным количеством параметров……………………………………………. 146

8.2.4. Вложенные функции……………………………………………………………………………………………….. 147

8.3. Функция как значение. Функциональный тип данных………………………………………………….. 147

8.3.1. Присваивание функций…………………………………………………………………………………………… 148

8.3.2. Проверка существования функции………………………………………………………………………… 148

8.4. Упражнение. Спойлер, часть 1………………………………………………………………………………………… 149

8.5. Специальные разновидности функций……………………………………………………………………………. 153

8.5.1. Анонимные функции……………………………………………………………………………………………….. 153

8.5.2. Стрелочные функции……………………………………………………………………………………………… 154

8.5.3. Функции однократного вызова……………………………………………………………………………… 155

8.5.4. Замыкания……………………………………………………………………………………………………………….. 156

8.5.4.1. Фабрики функций………………………………………………………………………………………. 157

8.5.4.2. Замыкания однократного вызова…………………………………………………………….. 158

8.6. Упражнение. Спойлер, часть 2………………………………………………………………………………………… 158

8.7. Упражнение. Рекурсия и ее использование…………………………………………………………………….. 160

8.8. Контекст выполнения функции и его указание………………………………………………………………. 162

8.8.1. Контекст выполнения обычных и стрелочных функций…………………………………….. 162

8.8.2. Явное указание контекста выполнения………………………………………………………………… 163

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

Урок 9. Массивы, множества и словари……………………………………………….. 165

9.1. Массивы…………………………………………………………………………………………………………………………….. 165

9.1.1. Обычные массивы…………………………………………………………………………………………………… 165

9.1.1.1. Создание обычных массивов…………………………………………………………………… 165

9.1.1.2. Простейшие операции с обычными массивами……………………………………… 167

9.1.1.3. Вложенные массивы…………………………………………………………………………………. 168

9.1.1.4. Свойство и методы класса Array……………………………………………………………… 169

9.1.1.5. Сортировка массивов……………………………………………………………………………….. 176

9.1.1.6. Деструктурирование массивов………………………………………………………………… 177

9.1.1.7. Копирование массивов……………………………………………………………………………… 180

9.1.2. Типизированные массивы………………………………………………………………………………………. 181

9.2. Множества…………………………………………………………………………………………………………………………. 182

9.2.1. Создание множеств…………………………………………………………………………………………………. 182

9.2.2. Простейшие операции со множествами……………………………………………………………….. 183

9.2.3. Свойство и методы класса Set……………………………………………………………………………….. 184

9.3. Словари……………………………………………………………………………………………………………………………… 185

9.3.1. Создание словарей…………………………………………………………………………………………………. 185

9.3.2. Простейшие операции со словарями…………………………………………………………………….. 186

9.3.3. Свойство и методы класса Map…………………………………………………………………………….. 187

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

Урок 10. Объекты………………………………………………………………………………… 190

10.1. Создание объектов………………………………………………………………………………………………………….. 191

10.2. Работа с объектными свойствами и методами…………………………………………………………….. 191

10.2.1. Доступ к объектным свойствам и методам……………………………………………………….. 192

10.2.1.1. Вложенные объекты. Цепочки операторов доступа………………………… 192

10.2.1.2. Условный доступ…………………………………………………………………………………. 193

10.2.1.3. Альтернативный формат доступа к объектным свойствам и методам 194

10.2.2. Проверка существования свойства или метода……………………………………………….. 194

10.2.3. Добавление свойств к объектам. Добавленные свойства……………………………….. 196

10.2.4. Удаление свойств………………………………………………………………………………………………… 197

10.3. Простые объекты…………………………………………………………………………………………………………….. 197

10.3.1. Методы в простых объектах……………………………………………………………………………… 199

10.3.2. Копирование простых объектов………………………………………………………………………… 200

10.3.3. Фабрики объектов……………………………………………………………………………………………….. 201

10.4. Простейшие действия с объектами……………………………………………………………………………….. 201

10.5. Деструктурирование объектов………………………………………………………………………………………. 204

10.6. Нулевая ссылка………………………………………………………………………………………………………………. 206

10.7. Объектная природа значащих типов…………………………………………………………………………….. 207

10.8. Работа со статическими свойствами и методами………………………………………………………… 208

10.9. Эмблемы………………………………………………………………………………………………………………………….. 208

Урок 11. Классы…………………………………………………………………………………… 211

11.1. Объявление классов………………………………………………………………………………………………………… 211

11.1.1. Объявление объектных свойств класса…………………………………………………………….. 212

11.1.2. Объявление объектных методов класса……………………………………………………………. 213

11.1.3. Объявление конструктора………………………………………………………………………………….. 214

11.1.4. Объявление объектных динамических свойств………………………………………………… 215

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

11.1.6. Закрытые свойства и методы…………………………………………………………………………….. 219

11.2. Упражнение. Спойлер, часть 3………………………………………………………………………………………. 220

11.3. Наследование классов……………………………………………………………………………………………………. 224

11.3.1. Перекрытие свойств и методов………………………………………………………………………….. 225

11.3.2. Переопределение методов………………………………………………………………………………….. 226

11.3.3. Переопределение динамических свойств…………………………………………………………. 228

11.3.4. Неявное наследование от класса Object…………………………………………………………… 229

11.4. Классы как значения………………………………………………………………………………………………………. 229

11.4.1. Присваивание классов………………………………………………………………………………………… 229

11.4.2. Проверка существования класса, его свойств и методов………………………………… 229

11.5. Анонимные классы…………………………………………………………………………………………………………. 230

11.6. Фабрики классов…………………………………………………………………………………………………………….. 231

11.7. Упражнение. Усовершенствованный спойлер……………………………………………………………… 231

11.8. Управление преобразованием объектов в значения значащих типов……………………….. 234

11.9. Пространства имен…………………………………………………………………………………………………………. 236

11.10. Расширение функциональности встроенных классов. Полифиллы…………………………. 237

11.11. Самостоятельное упражнение…………………………………………………………………………………….. 238

Урок 12. Итераторы и генераторы………………………………………………………… 239

12.1. Итераторы……………………………………………………………………………………………………………………….. 239

12.1.1. Итерируемые функции и методы……………………………………………………………………….. 240

12.1.2. Итерируемые объекты и классы………………………………………………………………………… 241

12.2. Упражнение. Числа Фибоначчи…………………………………………………………………………………….. 242

12.3. Генераторы……………………………………………………………………………………………………………………… 245

12.3.1. Генераторы-функции и генераторы-методы…………………………………………………….. 245

12.3.2. Генераторы-объекты и генераторы-классы……………………………………………………… 247

12.4. Самостоятельное упражнение………………………………………………………………………………………. 247

Урок 13. Регулярные выражения………………………………………………………….. 248

13.1. Введение в регулярные выражения……………………………………………………………………………….. 248

13.1.1. Создание регулярных выражений…………………………………………………………………….. 248

13.1.2. Использование регулярных выражений: простые случаи………………………………. 250

13.2. Специальные символы, применяемые в регулярных выражениях……………………………… 250

13.2.1. Метасимволы………………………………………………………………………………………………………. 250

13.2.2. Поднаборы…………………………………………………………………………………………………………… 251

13.2.3. Вариант……………………………………………………………………………………………………………….. 252

13.2.4. Квантификаторы…………………………………………………………………………………………………. 252

13.2.5. Подквантификатор……………………………………………………………………………………………… 254

13.2.6. Группы и обратные ссылки……………………………………………………………………………….. 254

13.2.7. Обычные символы………………………………………………………………………………………………. 256

13.3. Поиск и замена с помощью регулярных выражений…………………………………………………… 256

13.3.1. Обычный режим поиска……………………………………………………………………………………… 256

13.3.2. Глобальный поиск………………………………………………………………………………………………. 257

13.3.3. Многострочный поиск………………………………………………………………………………………… 259

13.3.4. Замена совпавших фрагментов………………………………………………………………………….. 259

13.3.5. Прочие полезные инструменты…………………………………………………………………………. 260

13.4. Упражнение. Использование регулярных выражений для обработки строк……………. 260

13.5. Самостоятельное упражнение………………………………………………………………………………………. 262

Урок 14. Модули…………………………………………………………………………………… 263

14.1. Введение в модули………………………………………………………………………………………………………….. 263

14.2. Экспорт……………………………………………………………………………………………………………………………. 265

14.2.1. Экспорт по умолчанию………………………………………………………………………………………. 265

14.2.2. Множественный экспорт……………………………………………………………………………………. 265

14.2.2.1. Синтаксис № 1……………………………………………………………………………………… 266

14.2.2.2. Синтаксис № 2……………………………………………………………………………………… 266

14.2.3. Гибридный экспорт…………………………………………………………………………………………….. 267

14.3. Импорт……………………………………………………………………………………………………………………………… 267

14.3.1. Импорт по умолчанию……………………………………………………………………………………….. 267

14.3.2. Множественный импорт…………………………………………………………………………………….. 268

14.3.2.1. Синтаксис № 1……………………………………………………………………………………… 268

14.3.2.2. Синтаксис № 2……………………………………………………………………………………… 269

14.3.3. Гибридный импорт……………………………………………………………………………………………… 269

14.3.4. Написание интернет-адресов импортируемых модулей………………………………… 270

14.3.5. Как выполняется импорт?………………………………………………………………………………….. 270

14.4. Прогон модулей………………………………………………………………………………………………………………. 271

14.5. Упражнение. Реорганизация кода с применением модулей……………………………………….. 271

14.6. Самостоятельное упражнение………………………………………………………………………………………. 272

Урок 15. Обработка программных ошибок. Исключения…………………….. 273

15.1. Исключения……………………………………………………………………………………………………………………… 273

15.2. Обработка исключений………………………………………………………………………………………………….. 274

15.3. Принудительное возбуждение исключений…………………………………………………………………. 276

15.3.1. Объявление своих классов исключений……………………………………………………………. 277

15.4. Упражнение. Спойлер, часть 4………………………………………………………………………………………. 277

15.5. Самостоятельное упражнение………………………………………………………………………………………. 278

Урок 16. Средства отладки…………………………………………………………………… 279

16.1. Консоль веб-обозревателя……………………………………………………………………………………………… 279

16.1.1. Сообщения об ошибках, выводимые в консоли……………………………………………….. 279

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

16.2. Отладчик………………………………………………………………………………………………………………………….. 282

16.2.1. Открытие файлов с программным кодом………………………………………………………….. 283

16.2.2. Создание и удаление точек останова……………………………………………………………….. 283

16.2.3. Пошаговое выполнение кода……………………………………………………………………………… 285

16.2.4. Просмотр значений переменных……………………………………………………………………….. 287

16.3. Инспектор DOM………………………………………………………………………………………………………………. 288

16.4. Самостоятельное упражнение………………………………………………………………………………………. 289

Часть III. Управление веб-страницей
и веб-обозревателем…………………………………………………………………… 291

Урок 17. События и их обработка………………………………………………………… 293

17.1. Обработчики событий……………………………………………………………………………………………………. 293

17.1.1. Привязка обработчиков к событиям………………………………………………………………….. 293

17.1.2. Реализация обработчиков событий…………………………………………………………………… 294

17.1.2.1. Реализация обработчиков событий в виде функций………………………… 294

17.1.2.2. Реализация обработчиков событий в виде методов…………………………. 295

17.1.3. Удаление привязки обработчика к событию……………………………………………………. 297

17.1.3.1. Удаление вызовом метода removeEventListener()……………………………… 297

17.1.3.2. Удаление с помощью прерывателя……………………………………………………. 297

17.1.4. Альтернативные способы привязки обработчиков к событиям……………………… 298

17.1.4.1. Привязка в атрибутах тегов………………………………………………………………… 298

17.1.4.2. Обработка щелчков на гиперссылках……………………………………………….. 298

17.2. События, поддерживаемые элементами веб-страниц…………………………………………………. 299

17.3. Объект события. Классы событий и их свойства…………………………………………………………. 300

17.4. Упражнение. Слайдер, часть 1………………………………………………………………………………………. 303

17.5. Распространение события. Фазы события……………………………………………………………………. 308

17.6. Упражнение. Слайдер, часть 2………………………………………………………………………………………. 310

17.7. Обработка событий по умолчанию и ее отмена………………………………………………………….. 312

17.8. Упражнение. Слайдер, часть 3………………………………………………………………………………………. 313

17.9. Самостоятельное упражнение………………………………………………………………………………………. 314

Урок 18. Управление элементами веб-страниц……………………………………… 315

18.1. Получение доступа к элементам страницы………………………………………………………………….. 315

18.1.1. Доступ к элементам определенного типа…………………………………………………………. 315

18.1.2. Доступ к любому элементу страницы………………………………………………………………. 316

18.1.3. Доступ к родителю, соседям и потомкам………………………………………………………….. 318

18.2. Управление элементами веб-страницы………………………………………………………………………… 319

18.2.1. Работа с атрибутами тегов………………………………………………………………………………… 319

18.2.1.1. data-атрибуты и работа с ними………………………………………………………….. 320

18.2.2. Получение местоположения и размеров элементов веб-страниц…………………… 320

18.2.3. Прочие инструменты для управления элементами веб-страниц……………………. 321

18.3. Упражнение. Стильная полоса прокрутки…………………………………………………………………… 324

18.4. Управление стилями CSS……………………………………………………………………………………………….. 326

18.4.1. Управление стилевыми классами……………………………………………………………………… 326

18.4.2. Управление встроенными стилями……………………………………………………………………. 327

18.5. Изменение содержимого элементов………………………………………………………………………………. 328

18.5.1. Методы write() и writeln()…………………………………………………………………………………… 329

18.6. Создание элементов веб-страниц путем конструирования………………………………………… 330

18.7. Упражнение. Фотогалерея с лайтбоксом……………………………………………………………………… 334

18.8. Получение сведений о веб-странице…………………………………………………………………………….. 337

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

Урок 19. Графика и мультимедиа…………………………………………………………. 339

19.1. Получение сведений о графических изображениях…………………………………………………….. 339

19.2. Управление мультимедийными элементами………………………………………………………………… 340

19.2.1. Свойства………………………………………………………………………………………………………………. 340

19.2.2. Методы………………………………………………………………………………………………………………… 342

19.2.3. События……………………………………………………………………………………………………………….. 342

19.3. Упражнение. Стильный видеопроигрыватель……………………………………………………………… 343

19.4. Самостоятельное упражнение………………………………………………………………………………………. 346

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

20.1. Работа с элементами управления………………………………………………………………………………….. 347

20.1.1. Свойства, методы и события элементов управления………………………………………. 347

20.1.2. Получение и обработка введенного в элемент значения………………………………… 350

20.1.3. Программное создание и удаление пунктов списка………………………………………… 352

20.1.4. Индикатор процесса…………………………………………………………………………………………… 352

20.2. Свойства, методы и события веб-формы………………………………………………………………………. 353

20.3. Упражнение. Клиентское веб-приложение, формирующее CSS-код рамки, часть 1… 354

20.4. Валидация……………………………………………………………………………………………………………………….. 356

20.4.1. Валидация средствами HTML…………………………………………………………………………… 357

20.4.1.1. Вывод собственных сообщений об ошибках……………………………………. 357

20.4.2. Программная валидация…………………………………………………………………………………….. 359

20.4.3. Дополнительные инструменты валидации………………………………………………………. 360

20.5. Упражнение. Клиентское веб-приложение, формирующее CSS-код рамки, часть 2… 361

20.6. Диалоги……………………………………………………………………………………………………………………………. 362

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

Урок 21. Взаимодействие с веб-обозревателем……………………………………… 366

21.1. Работа с окном веб-обозревателя………………………………………………………………………………….. 366

21.1.1. Еще один способ записи веб-сценариев, манипулирующих элементами страницы         368

21.1.2. Предотвращение ухода с веб-страницы…………………………………………………………… 369

21.2. Работа с текущим интернет-адресом……………………………………………………………………………. 369

21.3. Получение сведений о клиентском компьютере и веб-обозревателе…………………………. 371

21.4. Вывод стандартных диалоговых окон…………………………………………………………………………. 371

21.5. Детектор видимости……………………………………………………………………………………………………….. 373

21.5.1. Область видимости и детектор видимости……………………………………………………….. 373

21.5.2. Создание детектора видимости…………………………………………………………………………. 374

21.5.3. Указание отслеживаемых элементов………………………………………………………………… 376

21.5.4. Отслеживание попадания элементов в область видимости……………………………. 376

21.6. Упражнение. Отложенная загрузка изображений……………………………………………………….. 377

21.7. Детектор изменения размеров……………………………………………………………………………………….. 379

21.7.1. Создание детектора изменения размеров…………………………………………………………. 379

21.7.2. Указание отслеживаемых элементов………………………………………………………………… 379

21.7.3. Отслеживание изменения размеров элементов………………………………………………… 380

21.8. Самостоятельное упражнение………………………………………………………………………………………. 382

Часть IV. Асинхронное и параллельное программирование      383

Урок 22. Таймеры и фоновые потоки…………………………………………………… 385

22.1. Таймеры, периодические и однократные……………………………………………………………………… 385

22.2. Упражнение. Отзывчивое веб-приложение, вариант 1………………………………………………… 386

22.3. Фоновые потоки………………………………………………………………………………………………………………. 390

22.3.1. Создание фонового потока………………………………………………………………………………… 390

22.3.2. Передача данных между потоками…………………………………………………………………… 390

22.3.3. Завершение фонового потока…………………………………………………………………………….. 391

22.4. Упражнение. Отзывчивое веб-приложение, вариант 2………………………………………………… 391

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

Урок 23. Промисы и асинхронные функции………………………………………… 394

23.1. Промисы…………………………………………………………………………………………………………………………… 394

23.1.1. Создание промисов…………………………………………………………………………………………….. 394

23.1.2. Обработка промисов…………………………………………………………………………………………… 395

23.1.3. Массовая обработка промисов…………………………………………………………………………. 397

23.1.4. Дополнительные инструменты для работы с промисами……………………………….. 398

23.2. Асинхронные функции……………………………………………………………………………………………………. 399

23.2.1. Асинхронные методы в классах………………………………………………………………………… 400

23.3. Оператор ожидания………………………………………………………………………………………………………… 401

23.4. Упражнение. Отзывчивое веб-приложение, вариант 3………………………………………………… 402

23.5. Самостоятельное упражнение………………………………………………………………………………………. 404

Урок 24. Асинхронные итераторы и генераторы………………………………….. 405

24.1. Асинхронные итераторы……………………………………………………………………………………………….. 405

24.2. Цикл перебора последовательности с ожиданием………………………………………………………. 406

24.3. Асинхронные генераторы………………………………………………………………………………………………. 407

24.4. Упражнение. Отзывчивое веб-приложение, вариант 4………………………………………………… 408

Часть V. Web API……………………………………………………………………………… 411

Урок 25. Работа с локальными файлами и перетаскивание………………….. 413

25.1. Работа с локальными файлами……………………………………………………………………………………… 413

25.1.1. Получение сведений о файлах…………………………………………………………………………… 413

25.1.2. Считывание текстовых файлов………………………………………………………………………….. 414

25.1.3. Считывание графических, аудио- и видеофайлов……………………………………………. 415

25.2. Упражнение. Предварительный просмотр выбранного графического файла………….. 416

25.3. Перетаскивание………………………………………………………………………………………………………………. 417

25.3.1. Превращение элемента-источника в перетаскиваемый………………………………….. 417

25.3.2. Задание перемещаемых данных в источнике…………………………………………………… 417

25.3.3. Указание допустимых операций……………………………………………………………………….. 418

25.3.4. Подготовка элемента-приемника………………………………………………………………………. 419

25.3.5. Завершение перетаскивания………………………………………………………………………………. 420

25.4. Упражнение. Экзаменатор…………………………………………………………………………………………….. 421

25.5. Перетаскивание файлов в поле выбора файлов…………………………………………………………… 423

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

Урок 26. Долговременное хранение данных…………………………………………. 426

26.1. Хранилища: локальное и сессионное…………………………………………………………………………… 426

26.2. Упражнение. Передача данных между веб-страницами…………………………………………….. 427

26.3. Cookie………………………………………………………………………………………………………………………………. 428

26.4. Самостоятельное упражнение………………………………………………………………………………………. 431

Урок 27. Программная графика……………………………………………………………. 432

27.1. Холст………………………………………………………………………………………………………………………………… 432

27.2. Рисование прямоугольников………………………………………………………………………………………….. 433

27.3. Указание основных параметров графики…………………………………………………………………….. 433

27.3.1. Цвета линий и заливок………………………………………………………………………………………… 433

27.3.2. Параметры тени………………………………………………………………………………………………….. 434

27.4. Вывод текста…………………………………………………………………………………………………………………… 435

27.5. Упражнение. Столбчатая диаграмма…………………………………………………………………………… 437

27.6. Рисование сложных фигур……………………………………………………………………………………………… 439

27.6.1. Начало и завершение рисования………………………………………………………………………. 439

27.6.2. Перемещение пера………………………………………………………………………………………………. 440

27.6.3. Рисование прямых линий……………………………………………………………………………………. 440

27.6.4. Замыкание контура…………………………………………………………………………………………….. 441

27.6.5. Указание параметров линий………………………………………………………………………………. 441

27.6.6. Рисование дуг………………………………………………………………………………………………………. 443

27.6.7. Рисование кривых Безье……………………………………………………………………………………… 444

27.6.8. Рисование прямоугольников………………………………………………………………………………. 446

27.6.9. Альтернативный способ рисования сложных фигур……………………………………….. 447

27.7. Градиенты и графические закраски………………………………………………………………………………. 448

27.7.1. Линейные градиенты………………………………………………………………………………………….. 448

27.7.2. Радиальные градиенты………………………………………………………………………………………. 450

27.7.3. Угловые градиенты…………………………………………………………………………………………….. 451

27.7.4. Графическая закраска………………………………………………………………………………………… 452

27.8. Преобразования………………………………………………………………………………………………………………. 453

27.9. Вывод сторонних изображений…………………………………………………………………………………….. 454

27.10. Управление композицией…………………………………………………………………………………………….. 455

27.11. Создание масок…………………………………………………………………………………………………………….. 457

27.12. Сохранение и восстановление состояния холста……………………………………………………… 458

27.13. Упражнение. Рисование цветка…………………………………………………………………………………… 458

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

Урок 28. Загрузка данных с веб-сервера………………………………………………. 461

28.1. Отправка клиентского запроса на загрузку данных……………………………………………………. 461

28.1.1. Параметры клиентского запроса………………………………………………………………………. 461

28.1.1.1. Задание заголовков клиентского запроса…………………………………………. 464

28.1.2. Передача данных веб-серверу…………………………………………………………………………… 465

28.1.2.1. Передача данных HTTP-методом GET……………………………………………… 465

28.1.2.2. Передача данных HTTP-методом POST……………………………………………. 468

Кодирование данных методом application/x-www-form-urlencoded………… 468

Кодирование данных методом multipart/form-data……………………………………. 468

28.1.3. Использование объектов запросов……………………………………………………………………. 470

28.2. Обработка серверных ответов………………………………………………………………………………………. 471

28.2.1. Получение сведений о серверном ответе………………………………………………………….. 471

28.2.2. Получение данных, отправленных веб-сервером……………………………………………. 472

28.3. Упражнение. Сборка веб-страницы из отдельных частей………………………………………….. 473

28.4. Формат JSON…………………………………………………………………………………………………………………… 474

28.5. Упражнение. Программное создание веб-страницы на основе
загруженных JSON-данных……………………………………………………………………………………………. 476

28.6. Работа с интернет-адресами………………………………………………………………………………………….. 477

28.7. Самостоятельное упражнение………………………………………………………………………………………. 478

Часть VI. Разработка веб-приложений…………………………………. 479

Урок 29. Разработка традиционных веб-приложений. Платформа Node.js 481

29.1. Упражнение. Проект и манифест Node-приложения……………………………………………………. 482

29.2. Упражнение. Простейшее веб-приложение, выдающее приветствие.
Сценарии проекта…………………………………………………………………………………………………………… 483

29.3. Упражнение. Маршрутизатор и контроллеры…………………………………………………………….. 486

29.3.1. Теория………………………………………………………………………………………………………………….. 487

29.3.2. Практика………………………………………………………………………………………………………………. 487

29.4. Упражнение. Обработка GET-параметров…………………………………………………………………… 496

29.5. Упражнение. Обработка POST-параметров…………………………………………………………………. 499

29.6. Самостоятельное упражнение………………………………………………………………………………………. 505

Урок 30. Двухзвенные веб-приложения. Разработка бэкендов……………… 506

30.1. Введение в двухзвенные веб-приложения и REST……………………………………………………….. 506

30.1.1. Двухзвенные веб-приложения……………………………………………………………………………. 506

30.1.2. REST…………………………………………………………………………………………………………………….. 507

30.2. Упражнение. Разработка бэкенда…………………………………………………………………………………. 507

30.3. Поддержка межхостовых запросов………………………………………………………………………………. 512

30.3.1. Простые межхостовые запросы…………………………………………………………………………. 512

30.3.2. Расширенные межхостовые запросы………………………………………………………………… 513

30.4. Упражнение. Реализация поддержки межхостовых запросов……………………………………. 514

Урок 31. Разработка фронтендов, часть 1. Компоненты……………………….. 516

31.1. Принципы разработки фронтендов……………………………………………………………………………….. 516

31.2. Упражнение. Базовый класс компонента……………………………………………………………………… 517

31.3. Упражнение. Компонент перечня изображений………………………………………………………….. 518

31.4. Упражнение. Компонент отдельной позиции перечня изображений…………………………. 521

Урок 32. Разработка фронтендов, часть 2. Маршрутизация………………….. 524

32.1. Маршрутизация на стороне клиента……………………………………………………………………………. 524

32.2. Упражнение. Маршрутизация и компонент выбранного изображения…………………….. 525

32.3. Упражнение. Добавление изображений……………………………………………………………………….. 528

Заключение………………………………………………………………………………………….. 531

Приложения…………………………………………………………………………………… 533

Приложение 1. Приоритет операторов………………………………………………….. 535

Приложение 2. Node.js: подготовка к работе………………………………………… 537

П2.1. Установка Node.js…………………………………………………………………………………………………………… 537

П2.2. Проверка работоспособности Node.js………………………………………………………………………….. 543

Приложение 3. Веб-сервер http-server: установка и использование………. 544

П3.1. Установка http-server……………………………………………………………………………………………………… 544

П3.2. Запуск веб-сайта с помощью http-server………………………………………………………………………. 544

П3.3. Останов http-server…………………………………………………………………………………………………………. 545

Приложение 4. Устаревшие программные инструменты JavaScript, применяющиеся до сих пор…………………………………………………………………………………………………………….. 546

П4.1. Условное присваивание и выбор………………………………………………………………………………….. 546

П4.2. Необязательные параметры функций………………………………………………………………………….. 547

П4.3. Функции с произвольным количеством параметров…………………………………………………… 547

П4.4. Объявление классов……………………………………………………………………………………………………….. 548

П4.4.1. Объявление функции-конструктора………………………………………………………………… 548

П4.4.2. Создание свойств и методов…………………………………………………………………………….. 549

П4.4.2.1. Объявление свойств и методов в функции-конструкторе………………… 549

П4.4.2.2. Объявление свойств и методов в прототипе……………………………………… 550

П4.4.3. Создание динамических свойств……………………………………………………………………… 551

П4.4.4. Создание статических свойств и методов………………………………………………………. 551

П4.4.5. Наследование классов……………………………………………………………………………………… 552

П4.5. Загрузка данных с веб-сервера…………………………………………………………………………………….. 553

П4.5.1. Подготовка объекта AJAX………………………………………………………………………………… 554

П4.5.2. Указание интернет-адреса загружаемого файла…………………………………………… 554

П4.5.3. Получение загруженного файла………………………………………………………………………. 554

П4.5.4. Отправка веб-серверу запроса на получение файла……………………………………… 555

П4.5.5. Отправка данных веб-серверу в POST-параметрах……………………………………….. 555

П4.5.6. Синхронная загрузка файлов по технологии AJAX……………………………………….. 556

П4.6. Работа с GET-параметрами…………………………………………………………………………………………… 556

Приложение 5. Описание файлового архива………………………………………… 558

Предметный указатель…………………………………………………………………………. 559

Дронов Владимир Александрович, профессиональный программист, писатель и журналист, работает с компьютерами с 1987 года. Автор более 30 популярных компьютерных книг, в том числе «Django 2.1. Практика создания веб-сайтов на Python», “HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера“, «Python 3. Самое необходимое», «Python 3 и PyQt 5. Разработка приложений», “Laravel. Быстрая разработка современных динамических Web-сайтов на PHP, MySQL, HTML и CSS“, “Angular 4. Быстрая разработка сверхдинамических Web-сайтов на TypeScript и PHP” и книг по продуктам Adobe Flash и Adobe Dreamweaver различных версий. Его статьи публикуются в журналах “Мир ПК” и “ИнтерФейс” (Израиль) и интернет-порталах “IZ City” и “TheVista.ru”.