Jаvascript с нуля – Чиннатхамби К.

КРАТКОЕ СОДЕРЖАНИЕ
Введение ……………………………………………………………………………………………………………20
Глава 1. Hello, world! ………………………………………………………………………………………23
ЧАСТЬ I. Элементарно, Ватсон
Глава 2. Значения и переменные …………………………………………………………………….31
Глава 3. Функции ……………………………………………………………………………………………37
Глава 4. Условные обозначения: if…else и switch……………………………………………..51
Глава 5. Циклы for, while и do…while ………………………………………………………………68
Глава 6. Комментирование кода… Что за?!……………………………………………………..80
Глава 7. Таймеры …………………………………………………………………………………………..87
Глава 8. Область видимости переменных ……………………………………………………….93
Глава 9. Замыкания……………………………………………………………………………………….103
Глава 10. Где можно размещать код?…………………………………………………………….115
ЧАСТЬ II. Это объектно ориентированный мир, приятель!
Глава 11. Вывод сообщений в консоль ………………………………………………………….126
Глава 12. О пицце, типах, примитивах и объектах…………………………………………..138
Глава 13. Массивы………………………………………………………………………………………..147
Глава 14. Строки ………………………………………………………………………………………….162
Глава 15. Когда примитивы ведут себя как объекты ………………………………………172
Глава 16. Числа ……………………………………………………………………………………………177
Глава 17. Методы получения и изменения данных………………………………………….189
Глава 18. Об объектах подробнее………………………………………………………………….196
https://t.me/it_boooks
6   Краткое содержание
Глава 19. Расширение встроенных объектов …………………………………………………214
Глава 20. Использование классов …………………………………………………………………222
Глава 21. Логические типы и строгие операторы === и !== …………………………..236
Глава 22. null и undefined ……………………………………………………………………………..242
ЧАСТЬ III. DOM, милый DOM
Глава 23. Все о JSON (объектная нотация JavaScript) …………………………………….246
Глава 24. JS, браузер и DOM…………………………………………………………………………258
Глава 25. Поиск элементов в DOM ……………………………………………………………….268
Глава 26. Модифицирование элементов DOM ………………………………………………274
Глава 27. Cтиль контента ……………………………………………………………………………..284
Глава 28. Перемещение по DOM ………………………………………………………………….291
Глава 29. Создание и удаление элементов DOM…………………………………………….298
Глава 30. Браузерные инструменты разработчика …………………………………………313
ЧАСТЬ IV. Полны событиями
Глава 31. События ………………………………………………………………………………………..331
Глава 32. Всплытие и погружение событий…………………………………………………….342
Глава 33. События мыши……………………………………………………………………………….353
Глава 34. События клавиатуры ……………………………………………………………………..366
Глава 35. События загрузки страницы и прочее …………………………………………….375
Глава 36. Обработка событий для нескольких элементов ………………………………387
Глава 37. Заключение……………………………………………………………………………………396
Глоссарий …………………………………………………………………………………………………………398
ОГЛАВЛЕНИЕ
Благодарности………………………………………………………………………………………….. 18
Об авторе…………………………………………………………………………………………………. 18
От издательства ……………………………………………………………………………………….. 19
Введение …………………………………………………………………………………………..20
Парле ву JavaScript?………………………………………………………………………………….. 21
Связь со мной ………………………………………………………………………………………….. 22
Глава 1. Hello, world! …………………………………………………………………………..23
Что такое JavaScript? ………………………………………………………………………………… 24
Hello, world! ……………………………………………………………………………………………… 25
HTML-документ ………………………………………………………………………………………….26
Обзор кода: инструкции и функции ……………………………………………………………. 28
ЧАСТЬ I. Элементарно, Ватсон
Глава 2. Значения и переменные …………………………………………………………31
Использование переменных ……………………………………………………………………… 32
Еще кое-что о переменных ………………………………………………………………………… 33
Именование переменных ……………………………………………………………………………33
Что еще нужно знать об объявлении и инициализации переменных ……………..34
Глава 3. Функции ………………………………………………………………………………..37
Что такое функция?…………………………………………………………………………………… 39
Простая функция ………………………………………………………………………………………. 40
Создание функции, принимающей аргументы…………………………………………….. 44
Создание функции, возвращающей результат ……………………………………………. 48
Ключевое слово return ………………………………………………………………………………..48
Ранний выход из функции …………………………………………………………………………..49
8   Оглавление
Глава 4. Условные обозначения: if…else и switch …………………………………51
Инструкция if…else ………………………………………………………………………………….. 53
Встречайте: условные операторы! ………………………………………………………………55
Создание более сложных выражений ………………………………………………………….57
Варианты инструкций if…else ……………………………………………………………………..58
Фух ……………………………………………………………………………………………………………60
Инструкция switch ……………………………………………………………………………………. 60
Использование инструкции switch……………………………………………………………….60
Сходство с инструкцией if…else ………………………………………………………………….64
Что же использовать ………………………………………………………………………………… 66
Глава 5. Циклы for, while и do…while……………………………………………………68
Цикл for ……………………………………………………………………………………………………. 70
Стартовое значение ……………………………………………………………………………………72
Шаг……………………………………………………………………………………………………………73
Условие, или продолжительность цикла ……………………………………………………..73
Собирая все вместе ……………………………………………………………………………………74
Некоторые примеры цикла for……………………………………………………………………. 75
Прерывание цикла ……………………………………………………………………………………..75
Пропуск итерации ………………………………………………………………………………………76
Возврат назад ……………………………………………………………………………………………76
Числа использовать необязательно …………………………………………………………….77
О нет! Он не сделал этого!…………………………………………………………………………77
Другие циклы……………………………………………………………………………………………. 77
Цикл while …………………………………………………………………………………………………78
Цикл do…while……………………………………………………………………………………………78
Глава 6. Комментирование кода… Что за?! ………………………………………….80
Что такое комментарии?……………………………………………………………………………. 81
Однострочные комментарии ……………………………………………………………………….82
Многострочные комментарии……………………………………………………………………..83
Лучшие способы комментирования ……………………………………………………………. 84
ОГЛАВЛЕНИЕ   9
Глава 7. Таймеры ………………………………………………………………………………..87
Задержка с помощью setTimeout ………………………………………………………………. 87
Выполнение циклов с помощью setInterval …………………………………………………..89
Плавная анимация с помощью requestAnimationFrame …………………………………90
Глава 8. Область видимости переменных …………………………………………….93
Глобальная область видимости …………………………………………………………………. 94
Локальная область видимости …………………………………………………………………… 95
Особенности областей видимости …………………………………………………………….. 97
Области блоков ………………………………………………………………………………………… 97
Как JavaScript обрабатывает переменные…………………………………………………..100
Замыкания………………………………………………………………………………………………..102
Глава 9. Замыкания……………………………………………………………………………103
Функции внутри функций…………………………………………………………………………. 104
Когда внутренние функции независимы …………………………………………………… 108
Глава 10. Где можно размещать код?…………………………………………………115
Подход № 1: весь код в HTML‑документе …………………………………………………. 118
Подход № 2: код существует в отдельном файле ……………………………………… 119
JS-файл ……………………………………………………………………………………………………119
Ссылка на JavaScript-файл …………………………………………………………………………120
Итак, какой подход использовать?……………………………………………………………. 121
Да, мой код будет использоваться в нескольких документах!……………………..123
Нет, мой код используется только в одном HTML‑документе ……………………..124
ЧАСТЬ II. Это объектно ориентированный мир, приятель!
Глава 11. Вывод сообщений в консоль ……………………………………………….126
Знакомство с консолью …………………………………………………………………………… 127
Отображение консоли …………………………………………………………………………….. 128
Для тех, кому важны детали ……………………………………………………………………. 131
10   Оглавление
Журналирование в консоли ……………………………………………………………………… 132
Знакомство с методом log …………………………………………………………………………132
Предопределенный текст — не предел ……………………………………………………..134
Отображение предупреждений и ошибок…………………………………………………..135
Глава 12. О пицце, типах, примитивах и объектах ………………………………138
Сначала поговорим о пицце……………………………………………………………………… 139
От пиццы к JavaScript………………………………………………………………………………. 141
Что такое объект? …………………………………………………………………………………… 143
Предопределенные объекты в JavaScript …………………………………………………. 145
Глава 13. Массивы…………………………………………………………………………….147
Создание массива …………………………………………………………………………………… 148
Обращение к значениям массива …………………………………………………………….. 148
Добавление элементов …………………………………………………………………………… 150
Удаление элементов ……………………………………………………………………………….. 151
Поиск элементов в массиве …………………………………………………………………….. 152
Слияние массивов …………………………………………………………………………………… 153
Отображение, фильтрация и сокращение массивов ………………………………….. 154
Консервативный способ…………………………………………………………………………… 154
Изменение каждого элемента с помощью map ………………………………………… 155
Фильтрация элементов ……………………………………………………………………………..157
Получение одного значения из массива элементов ………………………………….. 158
Экскурс в функциональное программирование…………………………………………. 161
Глава 14. Строки ……………………………………………………………………………….162
Основы …………………………………………………………………………………………………… 162
Свойства и методы строк ………………………………………………………………………… 164
Обращение к отдельным символам …………………………………………………………..164
Совмещение (конкатенация) строк …………………………………………………………….166
ОГЛАВЛЕНИЕ   11
Получение подстрок из строк ……………………………………………………………………167
Разделение строки с помощью split …………………………………………………………..168
Поиск по строке ……………………………………………………………………………………….169
Строки в нижнем и верхнем регистрах ………………………………………………………170
Глава 15. Когда примитивы ведут себя как объекты ……………………………172
Строки — это не единственная проблема ………………………………………………… 173
Давайте все-таки выберем строки ……………………………………………………………. 173
Почему это важно …………………………………………………………………………………… 175
Глава 16. Числа …………………………………………………………………………………177
Использование чисел………………………………………………………………………………. 177
Операторы ……………………………………………………………………………………………… 178
Простые математические действия……………………………………………………………179
Увеличение и уменьшение ………………………………………………………………………. 180
Шестнадцатеричные и восьмеричные значения ……………………………………….. 181
Особые значения — Infinity и NaN ……………………………………………………………. 182
Infinity ………………………………………………………………………………………………………182
NaN ………………………………………………………………………………………………………….183
Объект Math …………………………………………………………………………………………… 183
Константы ………………………………………………………………………………………………..184
Округление чисел …………………………………………………………………………………….185
Тригонометрические функции …………………………………………………………………..186
Степени и квадратные корни …………………………………………………………………….186
Получение абсолютного значения……………………………………………………………..187
Случайные числа …………………………………………………………………………………….. 187
Глава 17. Методы получения и изменения данных………………………………189
История двух свойств ……………………………………………………………………………… 190
Знакомство с геттерами и сеттерами ………………………………………………………. 192
Генератор крика ……………………………………………………………………………………….193
12   Оглавление
Регистрирование действий ……………………………………………………………………….193
Проверка значения свойства……………………………………………………………………..194
Глава 18. Об объектах подробнее………………………………………………………196
Знакомство с объектом …………………………………………………………………………… 196
Создание объектов …………………………………………………………………………………..197
Добавление свойств …………………………………………………………………………………198
Удаление свойств……………………………………………………………………………………..201
Что же происходит под капотом? ………………………………………………………………202
Создание пользовательских объектов ……………………………………………………… 206
Ключевое слово this ………………………………………………………………………………… 210
Глава 19. Расширение встроенных объектов ………………………………………214
И снова приветствуем прототип!……………………………………………………………… 215
Спорность расширения встроенных объектов…………………………………………… 220
Вы не контролируете будущее встроенного объекта ………………………………….220
Некоторую функциональность не следует расширять или переопределять……220
Глава 20. Использование классов ………………………………………………………222
Синтаксис классов и создание объектов ………………………………………………….. 223
Создание объекта …………………………………………………………………………………….223
Знакомьтесь с конструктором …………………………………………………………………..225
Что помещается в класс ……………………………………………………………………………227
Расширение объектов……………………………………………………………………………… 230
Глава 21. Логические типы и строгие операторы === и !==………………..236
Объект Boolean ………………………………………………………………………………………. 237
Логическая функция………………………………………………………………………………… 237
Операторы строгого равенства и неравенства………………………………………….. 239
Глава 22. null и undefined …………………………………………………………………..242
Null…………………………………………………………………………………………………………. 242
Undefined ……………………………………………………………………………………………….. 243
ОГЛАВЛЕНИЕ   13
ЧАСТЬ III. DOM, милый DOM
Глава 23. Все о JSON (объектная нотация JavaScript) ………………………….246
Что такое JSON? …………………………………………………………………………………….. 246
Объект JSON изнутри……………………………………………………………………………… 250
Имена свойств ………………………………………………………………………………………….250
Значения …………………………………………………………………………………………………250
Чтение данных JSON ………………………………………………………………………………. 254
Парсинг JSON-подобных данных в действительный JSON …………………………..256
Запись данных JSON? ……………………………………………………………………………… 257
Глава 24. JS, браузер и DOM …………………………………………………………….258
Что делают HTML, CSS и JavaScript …………………………………………………………. 258
HTML определяет структуру ……………………………………………………………………. 259
Приукрась мой мир, CSS! ………………………………………………………………………… 261
Настало время JavaScript! ……………………………………………………………………….. 262
Знакомьтесь с объектной моделью документа …………………………………………. 263
Объект window…………………………………………………………………………………………265
Объект document …………………………………………………………………………………….266
Глава 25. Поиск элементов в DOM …………………………………………………….268
Знакомьтесь с семейством querySelector …………………………………………………. 269
querySelector…………………………………………………………………………………………….270
querySelectorAll…………………………………………………………………………………………270
Таков синтаксис селектора CSS ………………………………………………………………. 271
Глава 26. Модифицирование элементов DOM ……………………………………274
Элементы DOM — они как объекты …………………………………………………………. 275
Пора модифицировать элементы DOM …………………………………………………….. 277
Изменение значения текста элемента ……………………………………………………….279
Значения атрибутов ………………………………………………………………………………….281
14   Оглавление
Глава 27. Cтиль контента …………………………………………………………………..284
Зачем устанавливать стили с помощью JavaScript? …………………………………… 285
Два подхода стилизации ………………………………………………………………………….. 286
Установка стиля напрямую………………………………………………………………………..286
Добавление и удаление классов с помощью JavaScript……………………………….287
Проверка наличия значения класса ………………………………………………………….. 290
Углубление ………………………………………………………………………………………………290
Глава 28. Перемещение по DOM ……………………………………………………….291
Поиск пути ……………………………………………………………………………………………… 292
Работа с братьями и родителями……………………………………………………………….294
Давай заведем детей!……………………………………………………………………………….295
Складываем все воедино …………………………………………………………………………. 296
Проверка наличия потомка ……………………………………………………………………….296
Обращение ко всем потомкам …………………………………………………………………..296
Прогулка по DOM …………………………………………………………………………………….297
Глава 29. Создание и удаление элементов DOM ………………………………..298
Создание элементов ……………………………………………………………………………….. 299
Удаление элементов ……………………………………………………………………………….. 306
Клонирование элементов ………………………………………………………………………… 307
Глава 30. Браузерные инструменты разработчика ………………………………313
Знакомство с инструментами разработчика ……………………………………………… 314
Просмотр DOM ………………………………………………………………………………………..316
Отладка JavaScript ……………………………………………………………………………………321
Знакомство с консолью …………………………………………………………………………….326
Инспектирование объектов ………………………………………………………………………327
Журналирование сообщений …………………………………………………………………….328
ОГЛАВЛЕНИЕ   15
ЧАСТЬ IV. Полны событиями
Глава 31. События …………………………………………………………………………….331
Что такое события? …………………………………………………………………………………. 332
События и JavaScript ……………………………………………………………………………….. 334
1. Прослушивание событий ……………………………………………………………………….334
2. Реагирование на события ………………………………………………………………………336
Простой пример ……………………………………………………………………………………… 337
Аргументы и типы событий ……………………………………………………………………… 339
Глава 32. Всплытие и погружение событий…………………………………………342
Событие опускается. Событие поднимается……………………………………………… 343
Знакомьтесь с фазами …………………………………………………………………………….. 346
Кому это важно? ……………………………………………………………………………………… 349
Прерывание события ………………………………………………………………………………. 349
Глава 33. События мыши …………………………………………………………………..353
Знакомьтесь с событиями мыши ……………………………………………………………… 354
Одинарный или двойной клик ……………………………………………………………………354
Наведение и отведение курсора ………………………………………………………………..356
События mousedown и mouseup ……………………………………………………………….357
Событие услышано снова… и снова… и снова! ………………………………………….359
Контекстное меню ……………………………………………………………………………………359
Свойства MouseEvent ……………………………………………………………………………… 361
Глобальная позиция мыши ………………………………………………………………………..361
Позиция курсора мыши в браузере ……………………………………………………………362
Определение нажатой кнопки …………………………………………………………………..362
Работа с колесиком мыши …………………………………………………………………………364
Глава 34. События клавиатуры …………………………………………………………..366
Знакомьтесь с событиями клавиатуры ……………………………………………………… 367
Использование событий ………………………………………………………………………….. 368
16   Оглавление
Свойства события Keyboard……………………………………………………………………… 369
Примеры ………………………………………………………………………………………………… 370
Проверка нажатия конкретной клавиши …………………………………………………….370
Совершение действий при нажатии клавиш стрелок ………………………………….371
Определение нажатия нескольких клавиш…………………………………………………371
Глава 35. События загрузки страницы и прочее ………………………………….375
Что происходит в процессе загрузки страницы…………………………………………. 376
Стадия первая…………………………………………………………………………………………..377
Стадия вторая…………………………………………………………………………………………..377
Стадия третья …………………………………………………………………………………………..378
DOMContentLoaded и load Events …………………………………………………………….. 379
Сценарии и их расположение в DOM ……………………………………………………….. 380
Элементы сценария async и defer…………………………………………………………….. 383
async ……………………………………………………………………………………………………….384
defer…………………………………………………………………………………………………………384
Глава 36. Обработка событий для нескольких элементов ……………………387
Как все это делается? ……………………………………………………………………………… 389
Плохое решение ………………………………………………………………………………………390
Хорошее решение …………………………………………………………………………………….391
Объединяя все сказанное …………………………………………………………………………394
Глава 37. Заключение………………………………………………………………………..396
Глоссарий …………………………………………………………………………………………398