Оглавление
Благодарности
....................................................................................................
15
Введение
..................................................................................................................
16
Разработка веб-приложений клиентской части
......................................................
16
Необходимые знания
.............................................................................................
17
Структура книги
....................................................................................................
17
Как пользоваться книгой
.......................................................................................
18
Упражнения
...........................................................................................................
19
Для самых любознательных
...................................................................................
19
Условные обозначения
..........................................................................................
20
Часть I. Основы программирования
приложений для браузеров
Глава
1
.
Настройка среды разработки
.......................................................
22
Установка Google Chrome
......................................................................................
22
Установка и настройка Atom
..................................................................................
23
Где найти документацию и справочную информацию
............................................
27
Ускоренный курс по использованию командной строки
.........................................
29
Установка Node.js и browser-sync
...........................................................................
36
Для самых любознательных: альтернативы редактору Atom
..................................
37
Глава
2
.
Настраиваем наш первый проект
................................................
39
Настройка Ottergram
..............................................................................................
40
Просмотр веб-страницы в браузере
.......................................................................
49
Инструменты разработчика Chrome
.......................................................................
52
Оглавление
7
Для самых любознательных: версии CSS
...............................................................
53
Для самых любознательных: favicon.ico
.................................................................
54
Серебряное упражнение: добавить favicon.ico
.......................................................
55
Глава
3
.
Стили
....................................................................................................
56
Создание фундамента для стилей
..........................................................................
56
Подготовка HTML для стилизации
..........................................................................
60
Внутреннее устройство стиля
................................................................................
61
Наше первое правило оформления
........................................................................
62
Наследование стилей
............................................................................................
66
Подгоняем изображения под размер окна
.............................................................
74
Цвет
......................................................................................................................
76
Выравнивание расстояний между элементами
.......................................................
78
Добавление шрифта
..............................................................................................
84
Бронзовое упражнение: изменение цвета
..............................................................
87
Для самых любознательных: приоритетность! Конфликты селекторов
..................
87
Глава
4
.
Создание адаптивных макетов
с помощью флекс-блоков
...............................................................................
91
Расширяем интерфейс
...........................................................................................
92
Флекс-блок
...........................................................................................................
98
Абсолютное и относительное позиционирование
.................................................
113
Глава
5
.
Создание адаптивных макетов
с помощью медиазапросов
..........................................................................
119
Переопределяем размер экрана
..........................................................................
120
Добавление медиазапроса
...................................................................................
124
Бронзовое упражнение: книжная ориентация
......................................................
127
Для самых любознательных: известные решения (и ошибки)
при создании макетов с помощью флекс-блоков
.................................................
128
Золотое упражнение: макет Holy Grail
.................................................................
128
Глава
6
.
Обработка событий с помощью JavaScript
.............................
129
Готовим теги-якоря к работе
...............................................................................
131
Наш первый сценарий
.........................................................................................
135
8
Оглавление
Обзор JavaScript для Ottergram
............................................................................
136
Объявляем строковые переменные
......................................................................
136
Работаем в консоли
.............................................................................................
139
Обращение к элементам DOM
..............................................................................
141
Написание функции setDetails
.............................................................................
146
Возврат значений из функций
.............................................................................
151
Добавляем прослушиватель событий
...................................................................
154
Доступ ко всем миниатюрам
................................................................................
160
Организация цикла по массиву миниатюр
...........................................................
162
Серебряное упражнение: взлом ссылок
...............................................................
164
Золотое упражнение: случайные выдры
..............................................................
164
Для самых любознательных: строгий режим
........................................................
164
Для самых любознательных: замыкания
..............................................................
165
Для самых любознательных: NodeList and HTMLCollection
....................................
166
Для самых любознательных: типы данных JavaScript
...........................................
166
Глава
7
.
CSS и визуальные эффекты
........................................................
169
Скрытие и отображение увеличенного изображения
...........................................
170
Изменение состояния с помощью CSS-переходов
.................................................
180
Пользовательские временные функции
...............................................................
191
Для наиболее любознательных: правила приведения типов
................................
193
Часть II. Модули, объекты и формы
Глава
8
.
Модули, объекты и методы
.........................................................
196
Модули
................................................................................................................
197
Настройка приложения CoffeeRun
........................................................................
202
Создание модуля DataStore
..................................................................................
203
Добавляем модули в пространство имен
.............................................................
204
Конструкторы
......................................................................................................
206
Создание модуля Truck
........................................................................................
211
Отладка
...............................................................................................................
217
Инициализация CoffeeRun при загрузке страницы
...............................................
224
Оглавление
9
Бронзовое упражнение: идентификатор автокафе
для не фанатов сериала «Звездный путь»
...........................................................
228
Для самых любознательных: закрытые данные модулей
......................................
228
Серебряное упражнение: делаем данные закрытыми
..........................................
229
Для самых любознательных: делаем то же самое
в обратном вызове метода forEach
......................................................................
229
Глава
9
.
Введение в фреймворк Bootstrap
..............................................
230
Добавляем фреймворк Bootstrap в приложение
...................................................
230
Создание формы заказа
.......................................................................................
233
Глава
10
.
Обработка форм с помощью JavaScript
................................
245
Создаем модуль FormHandler
...............................................................................
247
Добавляем обработчик события submit
................................................................
252
Использование экземпляра FormHandler
..............................................................
256
Расширения UI
....................................................................................................
259
Бронзовое упражнение: порции огромного размера
............................................
260
Серебряное упражнение: отображение значения при изменении слайдера
.........
260
Золотое упражнение: добавляем достижения
......................................................
260
Глава
11
.
От данных к DOM
..........................................................................
262
Настраиваем перечень заказов
............................................................................
262
Создание модуля CheckList
..................................................................................
264
Создание конструктора Row
................................................................................
266
Создание строк CheckList при подтверждении отправки формы
...........................
272
Выдача заказа с помощью щелчка на строке
.......................................................
275
Бронзовое упражнение: добавление крепости кофе в описание
..........................
281
Серебряное упражнение: цветовая маркировка в зависимости
от ароматизатора
................................................................................................
281
Золотое упражнение: предоставление возможности
редактирования заказов
......................................................................................
282
Глава
12
.
Проверка данных форм
.............................................................
283
Атрибут required
..................................................................................................
283
Проверка с помощью регулярных выражений
......................................................
286
10
Оглавление
API проверки ограничений
..................................................................................
286
Стилизация элементов с допустимым и недопустимым значением
.......................
292
Серебряное упражнение: пользовательская проверка допустимости
для Decaf
.............................................................................................................
294
Для наиболее любознательных: библиотека Webshims
........................................
295
Глава
13
.
Ajax
...................................................................................................
297
Объекты XMLHttpRequest
.....................................................................................
298
Воплощающие REST веб-сервисы
........................................................................
299
Модуль RemoteDataStore
.....................................................................................
300
Отправка данных на сервер
.................................................................................
301
Извлечение данных с сервера
.............................................................................
306
Удаление данных с сервера
.................................................................................
309
Заменяем DataStore на RemoteDataStore
..............................................................
312
Серебряное упражнение: сверка с удаленным сервером
.....................................
314
Для самых любознательных: Postman
..................................................................
314
Глава
14
.
Объекты Deferred и Promise
......................................................
315
Объекты Promise и Deferred
.................................................................................
316
Возвращаем Deferred
...........................................................................................
317
Регистрация обратных вызовов с помощью then
..................................................
319
Обработка сбоев с помощью then
........................................................................
320
Использование объектов Deferred с API, основанными на использовании
обратных вызовов
...............................................................................................
322
Объекты Promise в DataStore
...............................................................................
326
Серебряное упражнение: автоматическое переключение на DataStore
................
332
Часть III. Данные, поступающие
в режиме реального времени
Глава
15
.
Введение в Node.js
.......................................................................
334
Утилиты node и npm
............................................................................................
336
Hello, World
..........................................................................................................
338
Добавление сценария npm
..................................................................................
340
Оглавление
11
Выдача контента из файлов
................................................................................
342
Обработка ошибок
...............................................................................................
348
Для самых любознательных: реестр модулей npm
...............................................
349
Бронзовое упражнение: создание пользовательской страницы ошибки
...............
350
Для самых любознательных: типы MIME
..............................................................
350
Серебряное упражнение: динамическое задание типа MIME
...............................
352
Золотое упражнение: перенесите обработку ошибок в отдельный модуль
...........
352
Глава
16
.
Обмен данными в режиме реального времени
с помощью протокола WebSockets
............................................................
353
Настройка WebSockets
.........................................................................................
355
Тестирование нашего сервера WebSockets
..........................................................
357
Создаем функциональность сервера чата
............................................................
358
Наш первый чат!
.................................................................................................
360
Для самых любознательных: библиотека socket.io для WebSockets
......................
360
Для самых любознательных: WebSockets как сервис
..........................................
361
Бронзовое упражнение: не повторяюсь ли я?
......................................................
362
Серебряное упражнение: «тихий» бар
.................................................................
362
Золотое упражнение: чат-бот
..............................................................................
362
Глава
17
.
Используем ES6 с помощью компилятора Babel
................
364
Инструменты для компиляции JavaScript
..............................................................
366
Клиентское приложение Chattrbox
.......................................................................
368
Начинаем работу с Babel
.....................................................................................
369
Используем Browserify для компоновки модулей
..................................................
371
Добавление класса ChatMessage
..........................................................................
375
Создание модуля ws-client
...................................................................................
379
Для самых любознательных: компиляция в JavaScript
из других языков программирования
...................................................................
385
Бронзовое упражнение: имя по умолчанию для импорта
.....................................
386
Серебряное упражнение: предупреждение о закрытии соединения
.....................
386
Для самых любознательных: поднятие переменных
............................................
386
Для самых любознательных: стрелочные функции
..............................................
388