Вышла книга “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