Пьюривал Сэмми - Основы разработки веб-приложений (Бестселлеры O'Reilly) - 2015

С.
Пьюривал
Основы разработки веб-приложений
Серия «Бестселлеры O’Reilly»
Перевел c английского О. Сивченко
Заведующий редакцией Д. Виницкий

Ведущий редактор Н. Гринчик
Литературный редактор Н. Рощина
Художник В. Шимкевич
Корректоры Т. Курьянович, Е. Павлович
Верстка А. Засулевич
ББК 32.988.02
УДК 004.738.5
Пьюривал С.
П96 Основы разработки веб-приложений. — СПб.: Питер, 2015. — 272 с.: ил. — (Се-
рия «Бестселлеры O’Reilly»).
ISBN 978-5-496-01226-3
Благодаря этой книге вы усвоите основы создания веб-приложений, построив простое приложение
с нуля с помощью HTML, JavaScript и других свободно предоставляемых инструментов. Это практи-
ческое руководство на реальных примерах обучает неопытных веб-разработчиков тому, как создавать
пользовательский интерфейс, строить серверную часть, организовывать связь клиента и сервера,
а также применять облачные сервисы для развертывания приложения.
Каждая глава содержит практические задачи, полноценные примеры, а также ментальные модели
процесса разработки. Эта книга поможет вам сделать первые шаги в создании веб-приложений, обес
печив глубокие знания по теме.
12+ (В соответствии с Федеральным законом от 29 декабря 2010 г. № 436-ФЗ)
ISBN 978-1449370190 англ. Authorized Russian translation of the English edition Learning Web App Development
(ISBN 9781449370190) © 2014 Semmy Purewal. This translation is published and sold
by permission of O’Reilly Media, Inc., the owner of all rights to publish and sell the same.
ISBN 978-5-496-01226-3 © Перевод на русский язык ООО Издательство «Питер», 2015
© Издание на русском языке, оформление ООО Издательство «Питер», 2015
Права на издание получены по соглашению с O’Reilly. Все права защищены. Никакая часть данной книги не
может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских
прав.
Информация, содержащаяся в данной книге, получена из источников, рассматриваемых издательством как на-
дежные. Тем не менее, имея в виду возможные человеческие или технические ошибки, издательство не может
гарантировать абсолютную точность и полноту приводимых сведений и не несет ответственности за возможные
ошибки, связанные с использованием книги.
ООО «Питер Пресс», 192102, Санкт-Петербург, ул. Андреевская (д. Волкова), д. 3, литер А, пом. 7Н.
Налоговая льгота — общероссийский классификатор продукции ОК 034-2014, 58.11.12 — Книги печатные
профессиональные, технические и научные.
Подписано в печать 19.09.14. Формат 70×100/16. Усл. п. л. 21,930. Тираж 1000. Заказ 0000.
Отпечатано в полном соответствии с качеством предоставленных издательством материалов
в ГППО «Псковская областная типография». 180004, Псков, ул. Ротная, 34.
$ ............................................................................................12
........................................................................................................12
..................................................................................................12
º Рабочий процесс.................................................................................20
º Структура............................................................................................43
º Стиль..................................................................................................68
º Интерактивность............................................................................... 108
º Мост.................................................................................................. 155
º Сервер.............................................................................................. 185
º Хранение данных.............................................................................. 217
º Платформа........................................................................................ 234
º Приложение...................................................................................... 248
$ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Выбор технологии. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Поможет ли вам эта книга. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Занятия с книгой. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Преподавание с этой книгой. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Куда обратиться в случае затруднений . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Общие комментарии к коду. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Условные обозначения . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Использование примеров кода. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Safari® Books Online. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Как с нами связаться. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Выражения признательности. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
º Рабочий процесс . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Текстовые редакторы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Установка Sublime Text. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Основы Sublime Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Контроль версий. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Установка Git. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Основы работы с командной строкой в UNIX . . . . . . . . . . . . . . . . . . . . 26
Основы Git. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Браузеры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Подведем итоги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Больше теории и практики . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Заучивание. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Sublime Text. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Emacs и Vim. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Командная строка UNIX. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Узнайте больше о Git. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
GitHub. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Оглавление
º Структура . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Привет, HTML!. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Теги и содержание . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Тег <p>: aбзацы. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Комментарии. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Заголовки, ссылки и списки... ох!. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Подведем итоги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Объектная модель документа и древовидная модель. . . . . . . . . . . . . . . . . . . . 50
Использование валидации HTML для выявления проблем . . . . . . . . . . . . . . . . 51
Amazeriffic. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Определение структуры. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Визуализация структуры с помощью древовидной диаграммы . . . . . . . 57
Реализация структуры в ходе рабочего процесса. . . . . . . . . . . . . . . . . 58
Структурирование основной части. . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Структурирование подвала . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Подведем итоги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Больше теории и практики . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Заучивание. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Древовидные диаграммы. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Составление страницы ВиО (FAQ) для Amazeriffic. . . . . . . . . . . . . . . . . 67
Больше об HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
º Стиль. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Привет, CSS!. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Наборы правил . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Комментарии. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Отступы, границы и поля. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Селекторы. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Классы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Псевдокласс . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Более сложные селекторы. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Каскадные правила. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Наследование. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Плавающая компоновка. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Свойство clear. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Работа со шрифтами. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Устранение браузерной несовместимости . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Использование CSS Lint для выявления возможных проблем . . . . . . . . . . . . . . 91
Взаимодействие и решение проблем с Chrome Developer Tools. . . . . . . . . . . . . 93
Стилизуем Amazeriffic!. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Сетка. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Создание колонок. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Добавление шрифтов и управление ими . . . . . . . . . . . . . . . . . . . . . . 104
Еще несколько изменений. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Подведем итоги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

Больше теории и практики . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Заучивание. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Упражнения в CSS-селекторах. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Задайте стили для страницы ВиО для Amazeriffic. . . . . . . . . . . . . . . . 106
Каскадные правила. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Адаптивность и библиотеки адаптивности. . . . . . . . . . . . . . . . . . . . . 107
º Интерактивность. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Привет, JavaScript!. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .108
Первое интерактивное приложение. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Структура . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Стиль . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Интерактивность. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Общие сведения о jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Создание проекта . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Комментарии. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Селекторы. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Управление элементами DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Общие характеристики JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .129
Работа с JavaScript в Chrome JavaScript Console . . . . . . . . . . . . . . . . . 129
Переменные и типы. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Функции . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Условия. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Повторение. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Массивы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Использование JSLint для выявления возможных проблем. . . . . . . . . . . . . . . 137
Добавление интерактивности Amazeriffic. . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Приступим. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Структура и стиль. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Интерактивность. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Подведем итоги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Заучивание. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Плагины jQuery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Селекторы jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Задача FizzBuzz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Упражнения в работе с массивами. . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Проект Эйлера (Project Euler). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Другие материалы по JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
º Мост . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Привет, объекты JavaScript!. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Представление карточной игры. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

Подведем итоги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Обмен информацией между компьютерами. . . . . . . . . . . . . . . . . . . . . . . . . . 159
JSON. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Доступ к внешнему файлу JSON. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Ограничения браузера по безопасности. . . . . . . . . . . . . . . . . . . . . . . 161
Функция getJSON. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Массив JSON. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Что же дальше?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Получение изображений с Flickr. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Добавление теговой функциональности в Amazeriffic. . . . . . . . . . . . . . . . . . . 168
Функция map. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
Добавление вкладки Теги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Создание пользовательского интерфейса. . . . . . . . . . . . . . . . . . . . . . 171
Создание промежуточной структуры данных о тегах . . . . . . . . . . . . . 174
Теги как часть входных данных. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Подведем итоги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
Слайд-шоу Flickr . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Упражняемся в работе с объектами. . . . . . . . . . . . . . . . . . . . . . . . . . 181
Другие API. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
º Сервер. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Настройка рабочего окружения. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Установка Virtual Box и Vagrant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Создание виртуальной машины. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Подключение к виртуальной машине с помощью SSH. . . . . . . . . . . . . 188
Привет, Node.js!. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .189
Ментальные модели . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Клиенты и серверы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Хосты и гости . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Практические вопросы. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Привет, HTTP!. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Модули и Express. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Установка Express с помощью NPM. . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Первый сервер Express . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Отправка клиентского приложения . . . . . . . . . . . . . . . . . . . . . . . . . . 196
Общие принципы. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Считаем твиты . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Получение данных для входа в Twitter. . . . . . . . . . . . . . . . . . . . . . . . 199
Подключение к Twitter API. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Как это получилось? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Хранение счетчиков. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201

Разделение счетчиков Twitter на модули . . . . . . . . . . . . . . . . . . . . . . 203
Импорт модуля в Express. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Настройка клиента . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Создание сервера для Amazeriffic. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Настройка папок. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Создание хранилища Git . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Создание сервера . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Запуск сервера . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Размещение информации на сервере. . . . . . . . . . . . . . . . . . . . . . . . . 208
Подведем итоги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Локальная установка Node.js. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
JSHint и CSS Lint через NPM. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Обсудим код счетчика твитов. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .212
API покерного приложения . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
º Хранение данных. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217

SQL и не-SQL. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Redis. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Взаимодействие с Redis через клиентскую командную строку. . . . . . . 219
Установка модуля Redis через файл package.json . . . . . . . . . . . . . . . 220
Взаимодействие с Redis в коде. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Установление начального значения счетчиков из хранилища Redis . . 222
Использование mget для получения нескольких величин. . . . . . . . . . 224
MongoDB. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Взаимодействие с MongoDB из клиента с интерфейсом
командной строки. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Моделирование данных с Mongoose. . . . . . . . . . . . . . . . . . . . . . . . . . 228
Хранение списка задач для Amazeriffic. . . . . . . . . . . . . . . . . . . . . . . . 231
Подведем итоги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
Покерное API. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
Другие источники информации о базах данных . . . . . . . . . . . . . . . . . 233
º Платформа . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Cloud Foundry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Регистрация . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Подготовка приложений к развертыванию в Сети . . . . . . . . . . . . . . . . . . . . . 235
Развертывание приложения. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .236
Получение информации о приложениях. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Обновление приложения. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Удаление приложений из Cloud Foundry. . . . . . . . . . . . . . . . . . . . . . . 240
Взаимозависимости и package.json. . . . . . . . . . . . . . . . . . . . . . . . . . . 241

Привязка Redis к приложению. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Привязка MongoDB к приложению. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Подведем итоги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Покерное API. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Другие платформы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
º Приложение. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .248
Переработка клиента . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Обобщение основных принципов действия . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Введение AJAX для работы с вкладками. . . . . . . . . . . . . . . . . . . . . . . 251
Избавление от костылей совместимости. . . . . . . . . . . . . . . . . . . . . . . 253
Обработка ошибок AJAX. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Переработка серверного кода. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
Организация кода. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
Выражения HTTP, CRUD и REST . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
Настройка маршрутов через ID . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Использование jQuery для прокладки и удаления маршрутов. . . . . . . 260
Коды ответов HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
Шаблон «модель — представление — контроллер». . . . . . . . . . . . . . 262
Добавление пользователей в Amazeriffic . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Построение модели пользователей . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Построение контроллера пользователей . . . . . . . . . . . . . . . . . . . . . . 264
Настройка маршрутов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Совершенствуем действия контроллера ToDo. . . . . . . . . . . . . . . . . . . 267
Подведем итоги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Больше теории и практики . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Удаление элементов списка задач. . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Добавление пользовательской панели администратора. . . . . . . . . . . 271
Представления с использованием EJS и Jade. . . . . . . . . . . . . . . . . . . 272
Создание нового приложения . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Ruby on Rails. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
$
Ваши замечания, предложения и вопросы отправляйте по адресу электронной
почты vinitski@minsk.piter.com (издательство «Питер», компьютерная редакция).
Мы будем рады узнать ваше мнение!
На сайте издательства http://www.piter.com вы найдете подробную информацию
о наших книгах.
Сэмми Пьюривал около 10 лет преподавал компьютерные дисциплины и работал

фрилансером-консультантом по JavaScript. За это время он успел поработать с раз-
нообразными группами клиентов, включая стартапы, некоммерческие организации
и исследовательские центры. Сейчас его основная работа — инженер-программист
в Сан-Хосе, Калифорния.
В начале 2008 года, через шесть лет после окончания школы и работы учителем на
полставки, мне очень хотелось стать преподавателем компьютерных дисциплин на
полный день. Очень быстро выяснилось, что место преподавателя найти нелегко,
а получение хорошей работы зависит от удачи в большей степени, чем от чего-либо
еще. Ну что ж, я поступил так, как поступает любой уважающий себя академик,
столкнувшись с удручающим положением на академическом рынке труда, а имен-
но: решил повысить свою конкурентоспособность с помощью изучения разработки
веб-приложений.
Это, конечно, звучит странно. Кроме всего прочего, к тому моменту я уже около
девяти лет изучал компьютерные дисциплины и, более того, свыше шести лет учил
студентов разрабатывать программное обеспечение (ПО). Разве я не должен был
хорошо знать, как создавать веб-приложения? Похоже, что нет, так как существу-
ет определенный разрыв между практической ежедневной работой по разработке
ПО и программированием как учебной дисциплиной, изучаемой в колледжах и уни-
верситетах. Фактически мои знания по веб-разработке были ограничены HTML
и в некоторой степени CSS, который я в то время изучал самостоятельно.
Предисловие
К счастью, у меня было несколько друзей, которые активно работали в компью-

терном мире, и большинство из них в то время обсуждало (относительно) новый
фреймворк1, который назывался Ruby on Rails. Мне показалось, что это весьма под-
ходящая область для развития, так что я купил несколько книг по этой теме и при-
нялся читать обучающие материалы в Интернете, чтобы побыстрее освоиться.
А через несколько месяцев, пытаясь хоть чего-нибудь добиться на практике,
я чуть было не сдался.
Почему? Да потому, что большинство книг и учебных статей начиналось с пред-
положения, что я уже умею создавать веб-приложения и делаю это на протяжении
нескольких лет! А между тем, несмотря на мой солидный теоретический багаж по
компьютерному программированию, оказалось, что все эти материалы слишком
лаконичны и очень сложны для понимания. Например, выяснилось, что можно
пройти несколько классов по компьютерным дисциплинам, ни разу не столкну
вшись с шаблоном проектирования Model — View — Controller, а в некоторых
книгах уже в первой главе предполагается, что вы прекрасно с ним знакомы.
Тем не менее мне удалось изучить веб-разработку на уровне, достаточном для
того, чтобы несколько раз провести консультации, которые оказались весьма кста-
ти, пока я не получил должность преподавателя. Благодаря этому я заметил, что
меня настолько увлекают практические стороны данной области, что я продолжил
заниматься консультированием, одновременно работая учителем.
Через несколько лет занятий тем и другим мне предложили вести мой первый
класс по разработке веб-приложений в Университете Северной Каролины в Эшвил-
ле. Изначально я планировал начать с Ruby on Rails, но, взявшись за новейшие
книги и обучающие материалы по ней, выяснил, что они никак не улучшились за все
эти годы. Нет, они были хорошим подспорьем для людей, которые отлично знают
основы, но для студентов, которые у меня учились, они определенно не годились.
Грустно, но неудивительно — академические книги по веб-разработке оказались
еще хуже. Большинство из них содержали устаревшие концепции и не раскрывали
важнейших тем, нужных для понимания платформ наподобие Ruby on Rails. Мне
даже случилось выступить рецензентом одной книги, переизданной в 2011 году
и до сих пор описывающей верстку с помощью таблиц и тег <font>!
Что ж, у меня не было другого выхода, кроме как создавать свой курс с нуля и пи-
сать все материалы самостоятельно. В то время я проводил небольшую консульта-
ционную работу по Node.js (адаптация JavaScript для стороны сервера) и подумал,
что было бы интересно попробовать создать курс, обучающий одному и тому же
языку и для клиента, и для сервера. Более того, я поставил себе цель дать моим
студентам достаточно знаний для самостоятельного изучения Ruby on Rails, если
они решат продолжить.
Эта книга содержит большую часть материалов, созданных мной во время пре-
подавания этого курса в Университете Северной Каролины в Эшвилле. В ней
1
Фреймворк — структура программной системы, а также специальное ПО, с помощью
которого можно разрабатывать и объединять компоненты программного проекта. —
Примеч. пер.
описано, как создать простое веб-приложение на основе базы данных с нуля, исполь-
зуя JavaScript. Сюда включены описание простейшего рабочего процесса (с исполь-
зованием текстового редактора и системы контроля версий), основы технологий
клиентской стороны (HTML, CSS, jQuery, Javascript), основы серверных технологий
(Node.js, HTTP, базы данных), основы облачного развертывания (Cloud Foundry)
и несколько примеров правильной практики написания кода (функции, MVC, DRY).
Во время нашего пути мы исследуем фундаментальные основы языка JavaScript,
научимся программировать, используя объекты и массивы, а также рассмотрим
ментальные модели, которые соответствуют этому типу разработки ПО.
Œ#
Для контроля версий я выбрал Git, потому что… ну хорошо, это Git, и он прекрасен.
Кроме того, он дал моим студентам возможность изучить GitHub, который наби-
рает все большую популярность. Хотя я не рассматриваю GitHub в этой книге,
разобраться с ним совсем несложно, как только вы освоитесь с Git.
Я решил использовать для клиента jQuery, потому что он все еще остается по-
пулярным и мне очень нравится с ним работать. Я сам не использую никаких других
фреймворков для клиента, хотя и упоминаю Twitter Bootstrap и Zurb Foundation
в главе 3. Я решил не касаться современных клиентских фреймворков вроде Backbone
или Ember, потому что считаю их слишком сложными для начинающих. А вот с Rails
вы легко сможете начать работать после прочтения этой книги.
Для серверной стороны я выбрал Express, так как он (относительно) упрощенный
и не догматический. Я решил также не рассматривать шаблоны клиентской и сервер-
ной стороны, поскольку считаю, что вначале важно научиться делать это вручную.
Я не рассматриваю и реляционные базы данных, так как вряд ли возможно пол-
ноценно раскрыть эту тему в течение времени, выделенного на нее в рамках курса.
Реляционным базам данных я предпочел MongoDB из-за того, что они широко ис-
пользуются в сообществе Node.js и применяются JavaScript в качестве языка запро-
сов. Кроме того, мне очень нравится Redis, поэтому его мы также изучим.
Я выбрал Cloud Foundry в качестве платформы для развертывания, потому что,
как я выяснил (вместе с Heroku и Nodejitsu), она была одной из трех, предлагающих
бесплатное использование и не требующих кредитной карты для настройки вне-
шних сервисов. В любом случае различия между платформами незначительны и пе-
реход с одной на другую не потребует больших усилий.
%
Эта книга не предназначена для того, чтобы сделать вас «ниндзя», или «суперзвез-
дой», или даже хорошим компьютерным программистом. Она не подготовит вас
к немедленному трудоустройству, и я даже не обещаю показать вам «правильный
путь» в работе.
Преподавание с этой книгой
В то же время книга даст вам глубокое знание основ, которые необходимы для
понимания того, как отдельные части современного веб-приложения взаимодей
ствуют друг с другом, и дадут вам стартовую точку для дальнейшего изучения темы.
Если вы как следует проработаете материал книги, то будете знать все, что в свое
время нужно было мне для начала изучения Rails.
Вы извлечете больше всего пользы из этой книги, если у вас есть небольшой
опыт программирования и нет никакого опыта в веб-разработке. Как минимум вы
должны быть знакомы с основными программными конструкциями, такими как
схемы if-else, циклы, переменные и типы данных. Впрочем, я не жду, что у вас есть
какой-то опыт в объектно-ориентированном программировании или каком-то
конкретном языке программмирования. Вы можете получить необходимые знания,
изучив материалы в Khan Academy или Code Academy или пройдя курс програм-
мирования в ближайшем колледже.
Я надеюсь, что эта книга может быть использована не только для самостоятель-
ного изучения, но и в качестве учебного материала в общественных классах по
разработке веб-приложений или, возможно, как курс для одного семестра (14 не-
дель) в колледже.
’’ 
Разработка веб-приложений — очень нужный вам навык. Держа это в уме, я писал
книгу, рассчитывая, что ее будут читать активно. Это значит, что самого лучшего
результата вы достигнете, читая ее около компьютера и по-настоящему набирая все
примеры. Конечно, такой подход связан с некоторым риском — всегда есть опасность,
что примеры кода не будут работать, если вы не наберете их точно так, как они на-
писаны в книге. Чтобы снизить риск, я создал хранилище GitHub со всеми приме-
рами из этой книги в рабочем состоянии. Вы можете посмотреть их в Интернете,
перейдя по ссылке http://www.github.com/semmypurewal/LearningWebAppDev. Посколь-
ку все полные примеры находятся там, я постараюсь избегать вставки на страницы
книги избыточного кода.
Кроме того, значительную часть примеров я оставил незаконченными. По моему
мнению, вам полезно будет закончить их самостоятельно. Я советую сделать это
прежде, чем смотреть на законченные примеры, размещенные в Интернете. В каж-
дой главе находится также некоторое количество практических задач и указателей
на источники информации, так что рекомендую вам поработать и над ними.
 %
Преподавая этот материал в 14-недельном курсе, я обычно уделял 2–3 недели
материалу первых трех глав и 3–4 недели — материалу последних трех. Это значит,
что больше всего времени я тратил на средние три главы, которые охватывают
программирование на JavaScript, jQuery, AJAX и Node.js. Студенты, которых я учу,
испытывают больше всего трудностей с массивами и объектами, поэтому я уделяю

дополнительное время этой теме, так как она очень важна для компьютерного
программирования в целом.
Определенно, я объясняю свой предмет более компьютерно-научным способом,
чем большинство книг на эти темы, поэтому данное издание хорошо подходит для
курса компьютерного программирования. В частности, я уделяю внимание мен-
тальным моделям, таким как дерево или иерархическая система, а также стараюсь
выделить функциональные подходы к программированию, если это имеет смысл
(хотя и стараюсь не подчеркивать этого в лекции). Если вы преподаете информа-
тику, то можете уделить этим аспектам материала больше внимания.
Я не собираюсь публиковать решения практических задач (хотя, возможно,
сделаю это, если получу очень много запросов), поэтому вы легко можете назначать
их в качестве домашнего задания и внеклассной работы.
$’ 
Как я уже говорил, у нас есть хранилище GitHub, которое содержит все примеры
кода, приведенные в этой книге. Кроме того, вы можете узнавать о найденных
опечатках и необходимых обновлениях на http://learningwebappdev.com.
Я также попытаюсь быть доступным для контакта и буду очень рад оказать
вам необходимую помощь. Пожалуйста, не стесняйтесь обращаться в мой Twitter
(@semmypurewal) с короткими вопросами или комментариями, а также писать в любое
время на электронный адрес me@semmy.me, если у вас более обширный вопрос. Я так-
же предлагаю вам пользоваться функциональностью issues в нашем хранилище GitHub,
чтобы задавать вопросы. Я приложу все усилия, чтобы отвечать как можно быстрее.
! 
Я старался писать код одновременно идиоматическим способом и настолько ясно,
насколько это возможно. Так что у меня были две противоречащие друг другу цели,
в результате чего в некоторых случаях мои решения в коде неидеальны — по педа-
гогическим причинам. Надеюсь, что эти примеры очевидны для опытных разра-
ботчиков и не причинят каких-либо трудностей начинающим в долгосрочной
перспективе.
Весь код работает корректно в современных браузерах, я протестировал его
полностью в Google Chrome. Однако не могу гарантировать, что все будет работать
хорошо в старых версиях Internet Explorer. Пожалуйста, дайте мне знать, если
найдете дефекты браузерной совместимости в Internet Explorer 10+ или современ-
ной версии любого другого браузера.
В большинстве случаев я следовал идиомам JavaScript, однако в некоторых
случаях пришлось отклониться. Например, для текстовых строк я предпочитаю
двойные, а не одинарные кавычки в первую очередь потому, что предполагаю
Условные обозначения
наличие у моих студентов знания теоретических основ Java/C++. Я использую

кавычки для названий свойств объектных констант, в результате чего JSON не
очень отличается от объектов JavaScript. Кроме того, я ставлю $ первым символом
в переменных, которые указывают на объекты jQuery. Мне кажется, это делает код
более ясным и легкочитаемым для новичков.
ß#’
В книге применяются следующие условные обозначения.
Курсивный шрифт
Им обозначаются новые термины и понятия.
Шрифт для названий
Используется для обозначения URL, адресов электронной почты, а также соче-
таний клавиш и названий элементов интерфейса.
Шрифт для команд
Применяется для обозначения программных элементов — переменных и названий
функций, типов данных, переменных окружения, операторов, ключевых слов и т. д.
Шрифт для листингов
Используется в листингах программного кода.

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

пользователем или определенными из контекста.
Этот элемент означает совет или рекомендацию.
Такой элемент означает общее замечание.
Этот элемент означает предупреждение или предостережение.

$
Дополнительный материал (примеры кода, упражнения и т. д.) доступен для за-
грузки по адресу http://www.github.com/semmypurewal/LearningWebAppDev.
Эта книга создана, чтобы помочь вам выполнить свою работу. Если пример кода
предлагается в книге, можете использовать его в своих программах и документации.
Вам не нужно спрашивать разрешения на использование, если только вы не соби-
раетесь скопировать значительный фрагмент кода. Например, написание програм-
мы с использованием нескольких фрагментов кода из этой книги не требует раз-
решения. Ответ на чей-либо вопрос с упоминанием этой книги и цитированием
примера кода не требует разрешения. Для вставки же значительного количества
кода из этой книги в документацию вашего продукта разрешение нужно. Мы не
требуем указания ссылки на источник, но будем очень благодарны за это.
Если вы считаете, что использование примеров кода требует разрешения, так как
отличается от приведенных ранее случаев, пожалуйста, напишите нам по адресу
permissions@oreilly.com.
Safari®%RRNV2QOLQH
Safari® Books Online — цифровая библиотека, работающая по запросу и предостав-
ляющая экспертное собрание книг и видео ведущих авторов мира по технологиям
и бизнесу.
Технологические специалисты, разработчики ПО, веб-дизайнеры и другие
профессионалы в области бизнеса и творчества используют Safari® Books Online
в качестве основного ресурса для исследований, решения проблем, обучения и сер-
тификационных тренировок.
Safari® Books Online предлагает ряд наборов продуктов и программ оплаты для
коммерческих организаций, государственных учреждений и частных лиц. Подпис-
чики в одной удобной для поиска базе данных получают доступ к тысячам книг,
обучающих видео и предпечатных рукописей от таких издателей, как O’Reilly Media,
Prentice Hall Professional, Addison-Wesley Professional, Microsoft Press, Sams, Que,
Peachpit Press, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann,
IBM Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, New Riders, McGraw-
Hill, Jones & Bartlett, Course Technology и десятков других. Для получения более
подробной информации о Safari® Books Online вы можете посетить сайт.
 ’$’
Пожалуйста, адресуйте комментарии и вопросы, касающиеся этой книги, издателю:
O’Reilly Media, Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
Выражения признательности
800-998-9938 (in the United States or Canada)

707-829-0515 (international or local)
707-829-0104 (fax)
У книги есть собственная веб-страница, где мы размещаем информацию о най-
денных опечатках, примеры и другую информацию. Она находится на http://oreil.ly/
learning-web-app.
Чтобы прокомментировать или задать технический вопрос об этой книге, по-
жалуйста, пишите на bookquestions@oreilly.com.
Более подробная информация об этой книге, курсах, конференциях и новостях
находится на нашем сайте по адресу http://www.oreilly.com.
Присоединяйтесь к нам на Facebook: http://facebook.com/oreilly.
Подписывайтесь на наш Twitter: http://twitter.com/oreillymedia.
Смотрите наш канал на YouTube: http://www.youtube.com/oreillymedia.
Œ#’$
Огромное спасибо ребятам из департамента информатики в Университете Се-
верной Каролины в Эшвилле за возможность провести этот курс дважды. И, ко-
нечно, спасибо студентам за терпение, поскольку материал постепенно эволюци-
онировал.
Спасибо редактору Мег Бланшетт за огромные усилия по удержанию меня
в нужном русле и, конечно, за бесконечное терпение из-за нарушения сроков. Я буду
скучать по нашей еженедельной электронной переписке!
Спасибо Саймону Сент-Лорену за множество советов в самом начале работы
и подсказки о том, что может подойти издательству O’Reilly.
Сильван Кавано и Марк Филипс внимательно прочитали каждую главу и вы-
сказывали множество очень полезных замечаний на протяжении всей работы.
Эмили Уотсон прочитала первые четыре главы и внесла очень много дельных
предложений. Майк Уилсон прочел последние четыре главы и дал бесценные тех-
нические советы. Я бесконечно благодарен всем вам и надеюсь когда-нибудь от-
платить вам тем же.
Боб Бенитс, Уилл Бласко, Дэвид Браун, Ребекка Дэвид, Андреа Фей, Эрик Хоуи,
Брюс Хауман, Джон Максвелл, Сюзан Рейсер, Бен Роузен и Вэл Скарлата прочи-
тали множество версий материала и дали много полезных рекомендаций. Я искрен-
не благодарен за потраченные вами время и усилия. Вы молодцы!
Несмотря на множество опытных рецензентов и друзей, которые просматрива-
ли материал, практически невозможно написать подобную книгу без каких-то
технических ошибок, опечаток и неверных решений. Я принимаю на себя полную
ответственность за все это.
ł
Создание веб-приложений — сложный процесс, включающий использование мно-

жества подвижных частей и интерактивных компонентов. Чтобы изучить, как это
делается, мы должны разобрать эти части на отдельные элементы и постараться
понять, как все они взаимодействуют друг с другом. А самое удивительное, что ком-
понент, с которым мы будем сталкиваться чаще всего, не содержит ни строчки кода!
В этой главе мы исследуем рабочий процесс разработки веб-приложений — по
следовательность действий, которые выполняем для того, чтобы создать прило-
жение. При этом мы изучим основы работы с некоторыми инструментами, которые
делают этот процесс легко контролируемым и (в основном) безболезненным.
Эти инструменты — текстовый редактор, система контроля версий и браузер.
Мы не будем изучать все это глубоко, но исследуем достаточно для того, чтобы
оказаться готовыми начать веб-программирование на клиентской стороне. В главе 2
мы увидим рабочий процесс в действии, изучая HTML.
Если вы уже знакомы с этими инструментами, возможно, вам будет лучше просмот-
реть краткое изложение и примеры в конце этой главы, а затем двигаться дальше.
œ##
Инструмент, с которым вы будете сталкиваться чаще всего, — текстовый редактор.
Об этом необходимом элементе технологии порой незаслуженно забывают, но на
самом деле это самый важный инструмент в вашем рабочем чемоданчике, посколь-
ку это программа, с помощью которой вы взаимодействуете со своим кодом. По
скольку код формирует конкретные элементы конструкции приложения, очень
важно, чтобы было как можно проще его создавать и редактировать. К тому же вы,
как правило, будете редактировать несколько файлов одновременно, так что очень
важно, чтобы текстовый редактор предоставлял возможность быстро и просто
перемещаться по файловой системе.
В прошлом вы, вероятно, тратили много времени на написание документов
и редактирование текста в программах наподобие Microsoft Word или Google
Docs. Это не лучшие примеры редакторов, о которых мы говорим. Эти редакторы
концентрируются скорее на возможностях форматирования текста, чем на мак-
симальной простоте его редактирования. Редактор, который будем использовать
Текстовые редакторы
мы, обладает очень скромными возможностями форматирования, но зато имеет

множество функций, позволяющих эффективно манипулировать текстом.
На другом конце спектра находятся интегрированные среды разработки
(Integrated Development Environments, IDE), такие как Eclipse, Visual Studio и XCode.
Эти продукты, как правило, включают в себя функции простого управления кодом,
но у них есть также очень много инструментов, важных при промышленной разра-
ботке ПО. Мы не будем рассматривать такие инструменты в этой книге, так как
стремимся к простоте.
Так какие же текстовые редакторы будем рассматривать? В современной раз-
работке веб-приложений обычно используются две основные категории. Пер-
вая — редакторы с графическим пользовательским интерфейсом (Graphical User
Interface, GUI). Поскольку я предполагаю, что вы знакомы с основами программи-
рования и информатики, то, скорее всего, у вас есть опыт работы с настольными
приложениями с графическим пользовательским интерфейсом. Следовательно,
эти редакторы будут для вас относительно удобными. Они отлично подходят для
работы с мышью в качестве устройства ввода и имеют понятные меню, которые
позволяют взаимодействовать с файловой системой как с любой другой програм-
мой. Примерами текстовых редакторов с графическим пользовательским интер-
фейсом могут послужить TextMate, Sublime Text и Coda.
Другая категория текстовых редакторов — терминальные редакторы (текстовые
редакторы, работающие из командной строки). Эти редакторы разработаны еще до
того, как были изобретены графический пользовательский интерфейс или мыши,
поэтому их изучение — весьма нетривиальная задача для людей, привыкших к вза-
имодействию с компьютером посредством интерфейса и мыши. Однако эти редак-
торы могут быть весьма эффективными, если вы уделите их изучению достаточно
времени. Наиболее популярные редакторы из этой категории — Emacs (рис. 1.1)
и Vim (рис. 1.2).
Рис. 1.1. Документ HTML, открытый в Emacs

Глава 1. Рабочий процесс
Рис. 1.2. Документ HTML, открытый в Vim
В этой книге мы будем пользоваться редактором с графическим интерфейсом,

который называется Sublime Text, но я все же очень рекомендую вам поработать
с Emacs или Vim. Если вы продолжите деятельность в сфере разработки веб-при-
ложений, весьма возможно, что будете сталкиваться с их использованием очень
часто.
ß6XEOLPH7H[W
Sublime Text (или для краткости Sublime) — популярный многофункциональный
текстовый редактор, идеально подходящий для веб-разработки. Кроме этого, у него
есть преимущество кросс-платформенности, то есть он работает одинаково эффек-
тивно с Windows, Mac OS и Linux. Это платная программа, но вы можете скачать
бесплатную версию и использовать ее сколько захотите. Если этот редактор вам
понравится и вы будете пользоваться им постоянно, рекомендую оплатить лицен-
зию.
Чтобы установить Sublime, зайдите на http://www.sublimetext.com и щелкните на
ссылке Download вверху страницы. Там вы найдете программы установки для всех
основных платформ. Хотя (на момент написания книги) Sublime Text 3 находится
на бета-тестировании, я рекомендую попробовать именно его. Я использовал его
для всех примеров и скриншотов из этой книги.
#6XEOLPH7H[W
После установки и запуска Sublime Text вы увидите экран примерно такого вида,
как показано на рис. 1.3.
Текстовые редакторы
Рис. 1.3. Sublime Text, запущенный в первый раз
Вероятно, в первую очередь вы захотите создать новый файл. Это можно сделать
с помощью меню FileNew. Вы можете также нажать Ctrl+N в Windows и Linux либо
использовать Command+N в Mac OS. А сейчас наберите в редакторе Hello, World!
Редактор будет выглядеть так, как показано на рис. 1.4.
Вы можете изменить внешний вид окружения Sublime, зайдя в меню Preferences
Color Scheme. Попробуйте разные цветовые схемы и найдите ту, которая будет самой
подходящей для ваших глаз. На самом деле будет полезно потратить какое-то вре-
мя на исследование цветовых вариантов, поскольку вы будете проводить за работой
с редактором много часов. Можете также изменить размер шрифта через подменю
Font на вкладке Preferences, чтобы читать текст было еще удобнее.
Рис. 1.4. Sublime после открытия нового файла и введения Hello, world!
Вы, наверное, заметили, что Sublime изменил название вкладки с untitled на Hello,
world!, как вы набрали. Когда будете сохранять файл, в качестве имени по умолча-
нию будет предложено название вкладки, но вы, возможно, захотите изменить его
так, чтобы он не содержал пробелов. После сохранения под другим именем назва-
ние вкладки изменится на действительное имя файла. Отмечу, что после того как
вы затем проделаете с содержимым файла что-то еще, вы увидите, что знак «×»
справа от названия вкладки изменился на кружочек — это значит, что здесь есть
несохраненные изменения.
После того как вы измените цветовую схему и сохраните файл под именем hello,
редактор будет выглядеть так, как показано на рис. 1.5.
Рис. 1.5. Sublime после изменения цветовой схемы на Solarized (light) и сохранения файла
под именем hello
Поскольку мы будем работать с командной строкой, лучше всего избегать пробелов

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

тельно иметь уверенность в том, что вы время от времени сохраняете свои измене-
ния. Поскольку я ожидаю, что у вас есть небольшой опыт кодирования, думаю, вы
уже знакомы с процессом edit — save — edit. Существует и необходимый смежный
процесс, с которым начинающие программисты могли не сталкиваться. Он назы-
вается контролем версий.
$
Представьте, что вы написали с помощью текстового редактора большой фрагмент
художественной повести. Вы периодически сохраняете работу, чтобы случайно не
Контроль версий
потерять ее. И вот однажды, достигнув важного момента в повествовании, вы по-

нимаете, что значительной части истории главного героя не хватает. И решаете
дополнить ее некоторыми деталями, вернувшись куда-нибудь в начало истории.
Вы возвращаетесь к началу и понимаете, что существует два варианта развития
событий для этого персонажа. Поскольку повествование еще не закончено, реша-
ете написать черновики каждого из вариантов и посмотреть, к чему они приведут.
Поэтому вы копируете файл в два различных места, один из вариантов называете
«История А», другой — «История Б», а затем записываете в каждый из файлов
различные варианты развития событий.
Можете мне не верить, но компьютерные программы создаются похожим образом
гораздо чаще, чем романы. Фактически, как вы убедитесь, значительная часть времени
тратится на что-то вроде исследовательского кодирования. Это значит, что вы разбира-
етесь, что нужно сделать, и пытаетесь заставить функциональность как-то работать,
прежде чем действительно приступите к ее кодированию. Иногда фаза исследователь-
ского кодирования может привести к необходимости внесения изменений, затрагива-
ющих множество строк в различных кодовых файлах приложения. Даже начинающие
программисты поймут это скорее рано, чем поздно и в конце концов придут к решению,
подобному описанному. Например, начинающие могут скопировать рабочую папку
с кодом в другую, немного изменить имя и продолжить работу. Если окажется, что
допущена ошибка, они всегда могут вернуться к предыдущей копии.
Это весьма приблизительный подход к контролю версий. Контроль версий — это
процесс, который позволяет вам создавать в коде помеченные контрольные точки,
к которым вы всегда можете обратиться (или даже вернуться), если будет необхо-
димо. Кроме того, контроль версий — незаменимый инструмент для взаимодей
ствия с другими разработчиками. Мы не будем уделять данному аспекту много
внимания в этой книге, но постарайтесь запомнить это.
Существует много профессиональных инструментов для контроля версий, и все
они имеют собственный набор функций и особенностей. В качестве общих приме-
ров можно привести Subversion, Mercurial, Perforce, CVS. В сообществе веб-разра-
ботчиков наибольшую популярность приобрела система контроля версий под на-
званием Git.
ß*LW
У Git есть очень простые инсталляторы как для Windows, так и для Mac OS.
Для Windows мы будем использовать проект msysgit, который доступен на GitHub
(рис. 1.6). Инсталляторы доступны также на Google Code и связаны ссылками со
страницей GitHub. Как только вы скачаете инсталлятор, щелкните на нем и сле-
дуйте инструкциям, чтобы установить Git в свою систему.
Для Mac OS я предпочитаю использовать инсталлятор Git for OS X Istaller
(рис. 1.7). Вы просто скачиваете образ диска в архиве, монтируете его, а затем де-
лаете двойной щелчок на инсталляторе. На момент написания книги инсталлятор
сообщал, что версия предназначена для Mac OS Snow Leopard (10.5), но она впол-
не корректно работала и на моей системе Mountain Lion (10.8).
Рис. 1.6. Домашняя страница msysgit
Рис. 1.7. Домашняя страница Git for OS X
Если вы пользуетесь Linux, то можете установить Git через систему управления

пакетами.
## 81,;
Для Git есть графические интерфейсы, но гораздо более эффективно научиться
работать с ним с помощью командной строки. Перед тем как вы начнете учиться
этому, придется разобраться, как работать с файловой системой, используя неко-

торые основные команды UNIX.
Как я уже упоминал, я предполагаю, что вы немного знакомы с информатикой
и программированием, но в основном взаимодействовали с окружением с графи-
ческим пользовательским интерфейсом. Это значит, что вы привыкли использовать
настольное окружение для работы с файлами и папками, находящимися на вашем
компьютере. Скорее всего, вы делаете это через менеджер файловой системы, на-
пример Finder в Mac OS или проводник в Windows.
Навигация в файловой системе с использованием командной строки очень
похожа на аналогичный процес, осуществляемый с помощью системного файло-
вого менеджера. Мы так же работаем с файлами, которые организованы в папки
(каталоги). Вы можете выполнять те же самые операции, которые делаете с помо-
щью файлового менеджера: перемещать файлы в каталоги или извлекать их отту-
да, просматривать список файлов, находящихся в папке, и даже открывать и редак-
тировать файлы, если знакомы с Emacs или Vim. Отличия состоят в том, что вы не
получаете постоянной обратной связи с помощью графического пользовательско-
го интерфейса и не можете взаимодействовать с мышью.
Если вы работаете в Windows, то будете использовать командную строку Git
Bash, которую установили вместе с msysgit project, как описано в предыдущем
разделе. Git Bash — это программа, симулирующая командную строку UNIX в Windows
и дающая вам доступ к командам Git. Запустить командную строку Git Bash мож-
но через меню Пуск. Если вы работаете с Mac OS, то будете использовать програм-
му Terminal, которую можете найти в папке Utilities внутри каталога Applications. Если
вы используете Linux, все может зависеть от конкретной конфигурации, которую
вы предпочитаете, но, как правило, вполне успешно можно применять легкодо-
ступную программу Terminal, которая находится в ваших приложениях. Терми-
нальное окно по умолчанию в Mac OS показано на рис. 1.8.
Рис. 1.8. Терминальное окно по умолчанию в Mac OS

Открыв командную строку, вы видите приветственное сообщение. Оно может

выглядеть по-разному в зависимости от того, работаете вы в Mac OS или Windows,
но, как правило, содержит какую-либо информацию о вашем рабочем окружении.
В частности, оно может включать текущую папку или ваше пользовательское имя.
Мое сообщение в Mac OS выглядит вот так:
Last login: Tue May 14 15:23:59 on ttys002
hostname $ _
º’"
Очень важно помнить, что, работая в командной строке, вы всегда выполняете
команды из какой-либо папки. Первый вопрос, который вы должны задать себе,
попав в интерфейс командной строки: «В какой папке я нахожусь?» Получить
ответ можно двумя способами. Первый — использовать команду pwd, что означает
print working directory («вывести рабочую директорию» (то есть папку)). Вывод
будет выглядеть примерно так:
hostname $ pwd
/Users/semmy
Хотя иногда я и использую pwd, но обычно предпочитаю команду ls, которую

можно расшифровать как list the content of the current directory («перечисли со-
держимое текущей директории»). Это дает мне больше визуальных подсказок о том,
где я нахожусь. В Mac OS вывод будет выглядеть примерно так:
hostname $ ls
Desktop Downloads Movies Pictures
Documents Library Music
Таким образом, команда ls аналогична открытию папки в Finder или Проводни-

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

из той, где вы находитесь в настоящий момент. Если вы работаете с файловым
менеджером с графическим пользовательским интерфейсом, переход осуществля-
ется двойным щелчком на нужной папке.
Выполнить его из командной строки ничуть не сложнее: просто запомните на-
звание команды — cd, что значит change directory («изменить директорию»). Если,
например, вы хотите перейти в вашу папку Documents, просто введите:
hostname $ cd Documents
Сейчас, если вы хотите получить визуальную обратную связь, можете исполь-

зовать ls:
hostname $ ls
Projects
Мы видим один подкаталог в каталоге Documents, и этот подкаталог называется

Projects (Проекты). Понятно, что если вы его предварительно не создали, то каталог
Projects не отобразится. Вы также можете увидеть другие файлы или папки, создан-
ные ранее в папке Documents. А сейчас, после перехода в новую папку, выполним
команду pwd, чтобы уточнить наше текущее положение:
hostname $ pwd
/Users/semmy/Documents
Что произойдет, если вы хотите вернуться обратно в домашнюю папку? В фай-

ловом менеджере с графическим интерфейсом обычно есть кнопка Назад (Back),
с помощью которой вы можете вернуться в предыдущую папку. В консоли, конеч-
но, такой кнопки нет. Но вы можете снова использовать команду cd с небольшим
изменением — двумя точками (..) вместо названия каталога, чтобы вернуться в пре-
дыдущее место расположения:
hostname $ cd ..
hostname $ pwd
/Users/semmy
hostname $ ls
ø
И наконец, вам может понадобиться создать новую папку для хранения своих
проектов, которые вы будете создавать с помощью этой книги. Для этого исполь-
зуйте команду mkdir, которая означает make directory («сделать директорию»):
hostname $ ls
hostname $ mkdir Projects
hostname $ ls
Documents Library Music Projects
hostname $ cd Projects
hostname $ ls
hostname $ pwd
/Users/semmy/Projects
При этом взаимодействии с командной строкой вы сначала смотрите содержи-

мое текущей папки, чтобы удостовериться, где находитесь, с помощью команды
ls. После этого используете команду mkdir для создания каталога Projects. Затем
используете ls, чтобы убедиться, что каталог создан. После этого вводите cd, что-
бы попасть в папку Projects, а потом — ls, чтобы вывести ее содержимое. Только
что созданная папка, разумеется, пуста, поэтому в результате выполнения коман-
ды ls ничего выведено не будет. И наконец, последнее по очереди, но не по важ-

ности — вы используете pwd, чтобы убедиться, что находитесь именно в папке
Projects.
Этих четырех основных команд UNIX вам будет вполне достаточно для начала,
но вы изучите больше по мере нашего продвижения вперед. В конце главы я раз-
местил удобную таблицу с перечнем и описанием этих команд. Будет очень хорошо,
если вы постараетесь их запомнить.
## ##
Веб-разработка (и программирование в целом) — очень абстрактная форма твор-
чества. В целом это означает, что для эффективного и рационального труда вы
должны развивать абстрактное мышление. Во многом эта способность требуется
для быстрого создания ментальных моделей новых идей и структур. Одна из луч-
ших ментальных моделей, которая применяется во множестве разных ситуаций, —
древовидная диаграмма.
Древовидная диаграмма — это простой способ визуализации любого типа
иерархической структуры. Поскольку файловая система в UNIX является иерар-
хической структурой, будет естественно начать упражнения в ментальной визуа-
лизации с нее. Например, представьте себе, что папка Home (Домашняя) содержит
три другие папки: Documents (Мои документы), Pictures (Мои рисунки) и Music (Моя
музыка). Внутри папки Pictures находятся пять картинок. Внутри каталога Documents
содержится другой каталог — Projects (Проекты) (рис. 1.9).
Рис. 1.9. Древовидная диаграмма, представляющая файловую иерархию

Постарайтесь держать эту ментальную модель в голове, перемещаясь по фай-

ловой системе. На самом деле я рекомендовал бы вам добавить звездочку (или
аналогичный символ), которая означает текущую папку, и перемещать ее одновре-
менно с движением по файловой системе.
Вообще говоря, если вы примените древовидную диаграмму к любой иерархи-
ческой структуре, то, скорее всего, вам будет гораздо легче понять и анализировать
ее. Поскольку способность стать хорошим программистом в значительной степени
зависит от умения быстро строить ментальные модели, старайтесь практиковаться
в применении древовидной диаграммы к иерархическим системам реального мира
почаще — всегда, когда это имеет смысл. Мы вернемся к ним еще несколько раз
в тексте книги.
#*LW
Сейчас, когда мы умеем передвигаться по файловой системе с помощью командной
строки, пора научиться управлять версиями нашего проекта с помощью Git.
ı*LW
Как я уже говорил, Git был разработан в первую очередь для масштабного взаимо-
действия между большим количеством программистов. Хотя мы собираемся ис-
пользовать его только для собственных проектов, нужно настроить его так, чтобы
можно было отслеживать изменения с помощью некоторой дополнительной инфор-
мации, например имени и адреса электронной почты. Откройте командную строку
и наберите следующие команды (изменив, разумеется, мои имя и адрес на свои):
hostname $ git config --global user.name "Semmy Purewal"
hostname $ git config --global user.email semmy@semmy.me
Для нашей системы придется сделать это всего один раз! Другими словами, вам
не нужно повторять эти действия каждый раз, когда вы хотите создать проект,
используя Git.
А сейчас мы готовы начать отслеживание проекта с использованием Git. Начнем
с перехода в наш каталог Projects, если еще не находимся там:
hostname $ pwd
/Users/semmy
hostname $ pwd
Затем создадим каталог под названием Chapter1 (Глава 1)1 и просмотрим содер-
жимое, чтобы убедиться, что он тут. Затем перейдем в новую папку:
1
При работе с Git возможны трудности с выводом кириллических символов в именах
файлов и папок. Все сообщения, где есть русские символы, преобразуются в кодировку
UTF-8 по latin1. Решение проблемы описано на http://habrahabr.ru/post/74839/, но на
начальном этапе можно просто без крайней необходимости не использовать кириллические
и другие специальные символы в названиях файлов и папок. — Примеч. пер.
hostname $ mkdir Chapter1

hostname $ ls
Chapter1
hostname $ cd Chapter1
hostname $ pwd
/Users/semmy/Projects/Chapter1
ø!*LW
Сейчас мы можем установить контроль версий над папкой Chapter1, создав храни-
лище в Git с помощью команды git init. Git ответит нам, что создано новое пустое
хранилище:
hostname $ pwd
hostname $ git init
Initialized empty Git repository in /Users/semmy/Projects/Chapter1/.git/1
А сейчас снова введите команду ls, чтобы увидеть файлы, которые Git создал
в папке, и вы увидите, что там ничего нет! Это не совсем верно — здесь находится
папка .git, но мы не можем ее увидеть, так как файлы, помеченные впереди точкой
(.), считаются скрытыми. Чтобы решить эту проблему, можно использовать коман-
ду ls c включенным флагом –а (all — «все»), набрав следующее:
hostname $ ls -a
. .. .git
Таким образом выводится все содержимое папки, включая файлы, помеченные

впереди точкой. Вы даже видите вывод своей текущей папки (это одинарная точка)
и ее родительской папки (две точки).
Если вам интересно, вы можете вывести и содержимое каталога .git, увидев таким
образом файловую систему, которую Git подготовил для вас:
hostname $ ls .git
HEAD config hooks objects
branches description info refs
Нам не придется ничего делать в этой папке, так что сейчас мы можем смело ее
проигнорировать. Но со скрытыми файлами еще встретимся, так что постарайтесь
запомнить полезный флаг –a для команды ls.
!
Откроем Sublime Text (если он все еще открыт со времени чтения предыдущего
раздела, закройте его и откройте снова). Затем откройте папку, версии в которой
мы будем контролировать. Чтобы сделать это, просто выбираем папку в диалоговом
окне Open программы Sublime вместо конкретного файла. Когда вы открываете
1
Системное сообщение: «Создано пустое хранилище Git в /Users/semmy/Projects/Chap-
ter1/.git». — Примеч. пер.
целую папку, файловая навигационная панель появляется с левой стороны окна

редактора — это выглядит примерно как на рис. 1.10.
Рис. 1.10. Sublime с открытой папкой Chapter1
Чтобы создать новый файл в папке Chapter1, щелкните правой кнопкой (или
выполните Command-щелчок в Mac OS) на названии Chapter1 в файловой навига-
ционной панели, а затем выберите New File из контекстного меню. Как и ранее,
будет создан новый файл, но, когда вы сохраните его, по умолчанию будет исполь-
зована папка Chapter1. Назовем файл index.html.
После того как файл получил имя, сделайте на нем двойной щелчок и добавьте
строку Hello, World! в верхнюю часть файла (рис. 1.11).
Рис. 1.11. Sublime после редактирования и сохранения файла index.html

Посмотрим, что произошло с хранилищем Git. Вернитесь к командной строке

и убедитесь, что находитесь в нужном каталоге:
hostname $ pwd
hostname $ ls
index.html
А сейчас наберите git status и посмотрите на примерно такой ответ:

hostname $ git status
# On branch master
#
# Initial commit
#
# Untracked files:
# (use "git add <file>..." to include in what will be committed)
#
# index.html1
Здесь довольно много информации! Больше всего нас интересует блок, поме-
ченный Untracked files (Неотслеживаемые файлы). Здесь перечислены файлы,
которые находятся в рабочей папке, но пока не включены в контроль версий.
Мы видим, что файл index.html здесь и он может быть зафиксирован (committed)
в хранилище Git.
ı ##
Мы заинтересованы в отслеживании изменений в файле index.html. Чтобы иметь
возможность делать это, последуем инструкциям, которые выдал Git, и добавим
файл в хранилище, используя команду git add:
hostname $ git add index.html
Обратите внимание на то, что в этом случае мы не получаем никакого ответа.

Так и должно быть. Можем убедиться, что команда сработала, набрав git status
еще раз:
# On branch master
#
1
Системное сообщение: «От бранч-мастера. Начальный коммит. Неотслеживаемые
файлы (используйте "git add <file>..." для добавления их в список для фиксирования
изменений): index.html». — Примеч. пер.
2
Коммит (commit) — очередная версия отслеживаемого файла или нескольких файлов,
отправленная в систему контроля версий. Само по себе изменение файла с кодом,
например, коммитом не является, а становится таковым только после загрузки в систему
контроля версий. Один или несколько коммитов могут составлять билд (сборку) —
очередное обновление версии программы. Например, в новый билд могут входить три
коммита: один с добавлением новой функциональности, другой — с изменением внешнего
вида интерфейса, а третий — с исправлением дефекта. — Примеч. пер.
# Initial commit
#
# Changes to be committed:
# (use "git rm --cached <file>..." to unstage)
#
# new file: index.html1
#
Это и есть нужная нам обратная связь. Обратите внимание на то, что index.html
теперь указан после заголовка Changes to be commited (Изменения, которые должны
быть зафиксированы).
После добавления новых файлов в хранилище мы хотим зафиксировать его
начальное состояние. Для этого используем команду git commit с флагом –m и смыс-
ловым сообщением о том, что изменилось со времени последнего коммита. Чаще
всего начальный коммит будет выглядеть так:
hostname $ git commit -m "Initial commit"
[master (root-commit) 147deb5] Initial commit
1 file changed, 1 insertion(+)
create mode 100644 index.html2
Таким образом мы получаем мгновенный снимок состояния нашего проекта

в определенный момент. Мы всегда можем откатить состояние системы к нему
позднее, если решим, что где-то пошли неверным путем. Сейчас команда git status
не покажет нам файла index.html, так как он уже отслеживается, а никаких измене-
ний внесено не было. Если мы ничего не изменяли со времени последнего комми-
та, у нас сейчас, как говорят, актуальный рабочий каталог:
# On branch master
nothing to commit (working directory clean)3
Легко забыть включить флаг –m и сообщение для коммита в процессе заливки измене-
ний в систему контроля версий. Если это произойдет, вы, скорее всего, обнаружите себя
внутри текстового редактора Vim (который обычно по умолчанию является системным
редактором). Если это так, вы можете покинуть его нажатием двоеточия (:), а затем
ввести q! и нажать Enter, чтобы выйти.
Затем внесем в index.html небольшие изменения. Добавим вторую строку, ко-

торая говорит: Goodbye, World! («Прощай, мир!»). Сделайте это и сохраните файл,
1
Системное сообщение: «От бранч-мастера. Начальный коммит. Изменения для коммита:
(используйте "git rm --cached <file>..." для отката). Новый файл: index.html». — Примеч. пер.
2
Системное сообщение: «[master (root-commit) 147deb5] Начальный коммит. 1 файл
изменен, 1 добавлен (+). Создан модуль 100644 index.html». — Примеч. пер.
3
Системное сообщение: «От бранч-мастера: нет изменений для коммита (рабочая
директория актуальна)». — Примеч. пер.
использовав соответствующее клавиатурное сокращение. А сейчас посмотрим, как

git status отреагирует на наши действия:
# On branch master
# Changes not staged for commit:
# (use "git add <file>..." to update what will be committed)
# (use "git checkout -- <file>..." to discard changes in working directory)
#
# modified: index.html1
#
no changes added to commit (use "git add" and/or "git commit -a")
Обратите внимание: Git предупреждает нас, что index.html был изменен, но не

добавлен в следующий коммит. Чтобы добавить наши изменения в хранилище, мы
должны выполнить команду git add для измененного файла, а затем — git commit,
чтобы зафиксировать изменения в системе контроля версий. Мы можем убедиться
в том, что добавление прошло успешно, набрав git status перед тем, как выполнять
фиксацию изменений в системе контроля версий. Наши действия будут выглядеть
примерно так:
# On branch master
# (use "git reset HEAD <file>..." to unstage)
#
# modified: index.html
#
hostname $ git commit -m "Add second line to index.html"
[master 1c808e2] Add second line to index.html
1 file changed, 1 insertion(+)2
$&!
Мы сделали целых два коммита проекта и можем откатить систему к их состояни-
ям в любое время. В разделе «Больше теории и практики» далее я привожу ссылку,
которая покажет вам, как откатить предыдущий коммит обратно и начать кодиро-
вание из этой точки. А сейчас изучим еще одну очень полезную команду. Мы можем
посмотреть историю коммитов, используя git log:
1
Системное сообщение: «От бранч-мастера: Изменения не зафиксированы в коммит.
(используйте git add <file> для обновления списка файлов для коммита) (используйте
"git checkout -- <file>..." для отмены изменений в рабочей директории) Изменен: index.
html». — Примеч. пер.
2
Системное сообщение: «От бранч-мастера: Изменения для коммита: (используйте
"git rm --cached <file>..." для отката). Изменен: index.html. hostname $ git commit
–m Добавлена вторая строка в index.html. 1 файл изменен, 1 добавление (+)». —
hostname $ git log

commit 1c808e2752d824d815929cb7c170a04267416c04
Author: Semmy Purewal <semmy@semmy.me>
Date: Thu May 23 10:36:47 2013 -0400
Add second line to index.html
commit 147deb5dbb3c935525f351a1154b35cb5b2af824
Author: Semmy Purewal <semmy@semmy.me>
Date: Thu May 23 10:35:43 2013 -0400
Initial commit
Очень полезно запомнить эти четыре команды Git, как и четыре команды UNIX,
рассмотренные в предыдущем разделе. Удобная диаграмма в разделе «Подведем
итоги» иллюстрирует эти команды.
ø#
На всякий случай, чтобы избежать неясностей, я хотел бы подробно остановиться
на разнице между сохранением файла в текстовом редакторе и фиксированием
изменений в системе контроля версий. Когда вы сохраняете файл, по сути, вы пе-
реписываете его на диск компьютера. Это значит, что вы больше не получите до-
ступа к старой версии файла, если только редактор не предоставляет возможности
построения истории ревизий.
Фиксирование же в хранилище Git позволяет вам отслеживать все изменения,
которые вы сделали с последнего раза, когда добавляли новую версию файла. Это
значит, что вы всегда можете вернуться к предыдущей версии, если обнаружили,
что сделали трудноисправимую ошибку в текущей версии файла.
В данный момент у вас, вероятно, сложилось впечатление, что Git сохраняет код
как линейную последовательность коммитов. Сейчас это действительно так: мы
изучили ту часть Git, которая позволяет создать такое хранилище, где один коммит
следует строго за другим коммитом. Мы можем назвать первый коммит родитель-
ским, а второй — дочерним. Хранилище Git с четырьмя коммитами показано на
рис. 1.12.
Следует отметить, однако, что коммит, по сути, — это серия инструкций по
обновлению вашего проекта до следующей версии. Другими словами, Git на самом
деле вовсе не сохраняет каждый раз содержимое каталога полностью, как если бы
вы скопировали одну папку на компьютере в другую. Вместо этого он просто фик-
сирует, что именно должно быть изменено: например, коммит может хранить ин-
формацию вроде «добавь строку с текстом Goodbye, World!» вместо сохранения
всего файла. Так что лучше представлять себе хранилище Git как серию инструк-
ций. Вот почему мы пишем сообщения для коммитов в форме императива — вы
можете представлять себе коммит как последовательность указаний для перевода
проекта из одного состояния в другое.
Почему все это так важно? Дело в том, что хранилище Git может иметь гораздо
более сложную структуру. Коммит может иметь более одного «ребенка» и факти-
чески более одного «родителя». На рис. 1.13 показан пример более сложного
хранилища Git, где иллюстрируются оба этих случая.
Рис. 1.12. Хранилище Git с четырьмя коммитами
Рис. 1.13. Более сложное хранилище Git
Хотя мы еще не изучили команд Git для создания структуры наподобие этой,
вам придется поближе познакомиться с ними, если вы захотите продолжить путе-
шествие по миру веб-разработки. Я уверен, вы сделали вывод о необходимости
составления визуальной схемы хранилища Git, чтобы не запутаться при возраста-
нии сложности.
Ø#
Последний инструмент, с которым мы будем регулярно сталкиваться, — браузер.
Прежде чем изучать создание веб-приложений, которые будут запускаться в браузере,
Подведем итоги
следует узнать, как эффективно использовать его в качестве инструмента разра-

ботки, а не только как окно в Интернет.
Несколько лучших браузеров — Firefox, Safari и Chrome. Я бы рекомендовал
вам приобретать опыт использования инструментов для разработки, доступных во
всех трех. Но поначалу в целях простоты и синхронизации остановимся на Google
Chrome.
Установка Chrome. Работаете ли вы в Windows, Mac OS или Linux, вы можете
установить Google Chrome, просто зайдя на его веб-страницу. Процесс установки,
конечно же, будет различаться, но инструкции очень просты. Как только вы уста-
новите Chrome и запустите его в первый раз, он будет выглядеть так, как показано
на рис. 1.14.
Рис. 1.14. Окно Chrome по умолчанию
Один из самых важных аспектов разработки веб-приложения — освоение рацио-

нального и эффективного рабочего процесса. Современный рабочий процесс вклю-
чает в себя три важных инструмента: текстовый редактор, систему контроля версий
и браузер. Sublime Text — популярный мультиплатформенный текстовый редактор,
который отлично подходит для редактирования исходного кода. Git — широко
используемая система контроля версий с управлением из командной строки.
Chrome — прекрасный браузер для веб-разработки.
Прежде чем двигаться дальше, вы должны установить все эти инструменты на
свой компьютер. Вы должны также запомнить команды из табл. 1.1 и 1.2, которые
позволят вам передвигаться по файловой системе и взаимодействовать с Git из
командной строки.
Таблица 1.1. Команды UNIX
pwd Вывод на экран текущей папки

ls Вывод на экран содержимого текущей папки
ls -a Вывод на экран содержимого текущей папки, включая скрытые файлы
cd [dir] Перейти в каталог [dir]
mkdir [dir] Создать каталог [dir]
Таблица 1.2. Команды Git
git init Инициализация хранилища

git status Вывод на экран статуса хранилища
git add [file(s)] Добавить файл(-ы) [file(s)] для фиксации в следующем коммите
git commit –m [msg] Зафиксировать в системе контроля версий добавленные файлы с со-
общением [msg — текст сообщения]
git log Показать историю коммитов
Ø$  
В сфере обучения слово «заучивание» обычно имеет негативную окраску. Я бы

сказал, что это несправедливо, особенно в отношении компьютерного программи-
рования. Если вы настраиваетесь так: «Ага, буду знать, где искать это, если пона-
добится», то проведете больше времени в поисках базовых инструментов, чем
концентрируясь на интересных задачах. Представьте, например, насколько труднее
были бы задачки на деление, если бы вы не помнили таблицу умножения на-
изусть!
Именно поэтому я собираюсь включить в конец первых нескольких глав раздел
«Заучивание», который будет содержать основные понятия, которые вы должны
хорошенько заучить, прежде чем двигаться дальше. Для этой главы все важное
относится к командным строкам Git и UNIX. Просто повторяйте снова и снова
следующие действия, пока не сможете выполнить их, не подглядывая в докумен-
тацию.
1. Создайте новую папку с помощью командной строки.
2. Войдите в эту папку с помощью командной строки.
3. Создайте текстовый файл в текстовом редакторе и сохраните его как index.html
в новой папке.
4. Инициализируйте хранилище Git из командной строки.
5. Добавьте и зафиксируйте этот файл в хранилище с помощью командной строки.
Каков же лучший способ запомнить эту последовательность задач? Все очень
просто: делайте их снова и снова. На этих действиях основано много материала
Больше теории и практики
следующих нескольких глав, поэтому очень важно хорошенько выучить их

сейчас.
6XEOLPH7H[W
Как я уже упоминал ранее, вы будете проводить много времени, работая с текстовым
редактором, так что весьма неплохо будет как следует изучить его. На веб-сайте
Sublime есть отличная страница поддержки, где находятся ссылки на документацию
и видео, демонстрирующие продвинутые возможности редактора. Я рекомендую вам
исследовать эту страницу и немного улучшить свои навыки работы с Sublime.
(PDFV9LP
Почти каждый веб-разработчик хоть раз да столкнется с необходимостью редакти-
ровать файл прямо на удаленном сервере. Это значит, что вы должны уметь исполь-
зовать текстовый редактор, в котором отсутствует графический пользовательский
интерфейс. Emacs и Vim — невероятно мощные редакторы, поднимающие эффек-
тивность процесса разработки до невиданных высот, но обучение работе с ними
может быть крутовато для новичков. Если вы найдете время, постарайтесь изучить
основы работы в обоих редакторах, хотя, кажется, популярность Vim у веб-разра-
ботчиков в последнее время возрастает (ладно, признаюсь: я пользуюсь Emacs).
На домашней странице GNU есть отличнейший обзор Emacs, включающий
учебный материал для новичков. Издательство O’Reilly выпустило несколько книг
по Emacs и Vim, включая Learning the vi and Vim Editors («Изучение vi и редакторов
Vim») авторов Арнольда Роббинса, Эльберта Ханная и Линды Лэмб, а также
Learning GNU Emacs («Изучение GNU Emacs») авторов Дебры Камерон, Джеймса
Элиотта, Марка Лойя, Эрика Рэймонда и Билла Розенблатта.
Вам будет очень полезно изучить, как выполняются в каждом из редакторов
следующие действия:
открытие редактора и выход из него;
открытие, редактирование и сохранение существующего файла;
открытие нескольких файлов одновременно;
создание нового файла и его сохранение;
поиск файла по заданному слову или фразе;
вырезание фрагментов текста из одного файла и вставка в другой.
Если вы уделите этому время, то постепенно определитесь, с каким редактором
хотите продолжать работу и обучение.
’81,;
Чтобы стать мастером работы с командной строкой UNIX, понадобятся долгие
годы, но вы уже узнали достаточно, чтобы начать. По моему опыту, эффективным
становится изучение нового по мере надобности, при решении специальных задач,

но существует еще несколько базовых команд, которые я применяю регулярно.
Используя поиск в Google, изучите материал о следующих общих командах: cp, mv,
rm, rmdir, cat и less. Все они пригодятся вам в разное время.
ß$ *LW
Git — невероятно мощный инструмент. Мы только слегка коснулись его возмож-
ностей. К счастью, Скотт Чейкон написал Pro Git (Apress, 2009) — прекрасную
книгу, где подробно рассматривается множество аспектов Git. В первых двух гла-
вах описывается несколько функций, которые помогут вам более эффективно
продвигаться в изучении материала этой книги, включая откат к версиям, предва-
рительно зафиксированным в хранилище.
В третьей главе книги Чейкона детально описана концепция бранчей. Бранчи
несколько выходят за рамки моей книги, но я упоминал о них ранее. Рекомендую
как следует изучить эту тему, так как возможность быстро и просто разветвить
хранилище — одна из лучших функций Git.
*LW+XE
GitHub — это онлайн-сервис, в котором находится ваше хранилище Git. Если вы
храните код открыто (open source), оно бесплатно. Если же хотите создать защи-
щенное хранилище Git, самый дешевый тарифный план — $7 в месяц. Я рекомен-
дую начать с бесплатного плана и исследовать хранилище Git на GitHub.
Страница помощи GitHub поможет вам настроить аккаунт GitHub и связать
его с вашим хранилищем Git. Там также находятся тонны полезной информации
и о Git, и о GitHub. Пользуйтесь ею, чтобы начать действовать.
ø
В следующих двух главах мы рассмотрим две важные для разработки клиентской

стороны темы: HTML и CSS. Поскольку рассмотреть их подробно в данной книге
вряд ли возможно, эти главы представляют собой скорее сборник конспектов, ко-
торые позволят вам изучить HTML и CSS в достаточной степени для того, чтобы
работать с примерами кода из книги. Раздел «Больше теории и практики» данной
главы поможет вам найти информацию для дальнейшего изучения.
Если вы уже знакомы с HTML и CSS, вполне возможно, свободно можете пе-
рейти к главе 4, которая начинается с изучения JavaScript на клиентской стороне.
Вы можете просмотреть главы и прочитать краткое содержание в конце, прежде
чем решить.
+70/
HTML, что значит Hyper Text Markup Language (язык гипертекстовой размет-
ки), — это технология, которая позволяет задавать структуру расположения визу-
альных элементов (иногда ее называют пользовательским интерфейсом) веб-при-
ложения. Что я подразумеваю под словом «структура»? Рассмотрим простой
пример.
Для начала с помощью командной строки создадим папку Chapter2 (Глава 2)
в папке Projects. Напомню, что для этого следует использовать команду mkdir. Затем
откроем эту папку в Sublime Text с помощью меню File или клавиш быстрого до-
ступа. Создайте новый файл под названием hello.html внутри этой папки. Набери-
те его содержимое точно так же, как показано далее:
<!doctype html>
<html>
<head>
<title>Мое первое веб-приложение</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
Глава 2. Структура
œ
Во время набора вы, наверное, заметили, что в документе содержатся два типа
элементов. Один из них — обычный текст вроде «Мое первое веб-приложение» или
традиционное сообщение «Hello, World!». Другие элементы, например <html> или
<head>, заключенные в угловые скобки, называются тегами. Теги являются формой
метаданных, которые используются для применения нашей структуры к содержи-
мому страницы.
Запустите браузер и откройте в нем созданный файл, используя пункт Open File
(Открыть файл) в меню File (Файл). Вы увидите нечто похожее на рис. 2.1.
Рис. 2.1. Файл hello.html, открытый в Chrome
Очень полезно постараться выучить клавиатурные сокращения, так как это поможет
работать быстрее и рациональнее. Для открытия файла в Chrome вам нужна команда
Command+O, если вы работаете в Mac. В Windows эта же команда — Ctrl+O.
Как видите, теги не отображаются на странице, в отличие от остального текста.

Заголовок «Мое первое веб-приложение» отображается как название вкладки,
а содержимое «Hello, World!» появляется в основном пространстве окна.
œS!D#
А сейчас внесем небольшие изменения, добавив абзац текста Lorem ipsum — это
простой текстовый наполнитель, который мы можем заменить нужным нам
Привет, HTML!
текстом позднее. Вы можете скопировать и вставить его с вики-страницы Lorem

ipsum1:
<!doctype html>
<html>
<head>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.</p>
</body>
</html>
Сделав изменения в документе, мы должны их сохранить. Сейчас мы можем

вернуться в браузер и переоткрыть страницу, щелкнув на круглой стрелке рядом
с адресной строкой в Chrome. Вы увидите, что основное пространство браузера
обновилось (рис. 2.2).
Рис. 2.2. Модифицированный файл hello.html, открытый в Chrome
1
В Интернете много сервисов для генераторов текста lorem ipsum, в том числе на русском
языке. Используя кириллицу, при сохранении файла выставляйте кодировку UTF-8,
иначе символы могут отображаться некорректно. — Примеч. пер.
Вы можете обновлять страницы, используя сочетания клавиш Ctrl+R в Windows или

Command+R в Mac OS.
Так и будет выглядеть обычный рабочий процесс при редактировании веб-стра-

ниц. Мы открываем файл в текстовом редакторе, вносим небольшие изменения,
а затем обновляем браузер, чтобы увидеть их.
Комментарии — очень удобный способ делать пометки в HTML. Мы начинаем

комментарий с . Вот простой пример, созданный на ос-
нове материала предыдущего раздела:
<!doctype html>
<html>
<head>
<title>Пример комментария</title>
</head>
<body>


<p>Я — главный абзац, скорее всего, я как-то связан с тегом h1, ведь я так
близко к нему расположен!</p>
</body>
</html>
Поскольку компьютерные программы пишут в расчете на то, что их будут читать

люди, всегда полезно делать пометки в сложном коде. Вы будете встречать ком-
ментарии в HTML на протяжении этой книги и, скорее всего, столкнетесь с ком-
ментированным HTML в Интернете.
#
Мы познакомились с некоторыми примерами основных тегов и комментариев, что
же еще мы можем включить в разметку?
Сначала можем расширить тег <h1>, создав теги <h1>, <h2>, <h3>, <h4>, <h5> и <h6>.
Они представляют собой различные уровни заголовков и обычно сохраняются для
важных элементов содержимого страницы. Самый важный заголовок должен на-
ходиться в тегах <h1>, а менее значительные пусть появляются на нижних уров-
нях:
<!doctype html>
<html>
<head>
<title>Примеры тегов заголовков</title>
Привет, HTML!
</head>
<body>

<h1>Самое важное!</h1>

<p>Важный абзац</p>
<h2>Менее важный заголовок</h2>
<p>А это какое-то менее важное сообщение</p>
</body>
</html>
Другой очень важный тег в HTML-документе — <a>, что означает anchor («якорь»)
и используется для создания ссылок. Теги ссылок — уникальная характеристика
гипертекста, так как они могут связывать информацию на текущей странице
и другой веб-странице. Чтобы использовать теги ссылок, нужно включить в HTML
атрибут href, который скажет браузеру, что именно нужно открыть в случае щел-
чка на ссылке. Атрибут href помещается внутрь открывающего тега:
<!doctype html>
<html>
<head>
<title>Примеры ссылок</title>
</head>
<body>

<p>Это <a href="http://www.google.com">ссылка</a> на Google!</p>
<p>
<a href="http://www.example.com">
Эта ссылка немного длиннее
</a>
</p>
<p>
А это ссылка на
<a href="http://www.facebook.com">www.facebook.com</a>
</p>
</body>
</html>
Когда мы откроем веб-страницу в браузере, то увидим нечто похожее на рис. 2.3.

Подчеркнутый текст означает, что на нем можно щелкнуть и перейти таким
образом на страницу, указанную в атрибуте href.
В этом примере есть только одна проблема — использование элементов абза-
ца для содержания, которое лучше выглядело бы в виде списка. Нет ли специ-
альных тегов для создания списка? Есть, и не один, а целых два! Теги <ol> и <ul>
служат для создания нумерованных (ordered) и маркированных (unordered) спис-
ков:
Рис. 2.3. Страница со ссылками с использованием тегов <a>
<!doctype html>
<html>
<head>
<title>Примеры списков</title>
</head>
<body>
<h1>Примеры списков!</h1>

<ul>
<li>
Это <a href="http://www.google.com">ссылка</a> на Google!
</li>
<li>
<a href="http://www.example.com">
Эта ссылка немного длиннее
</a>
</li>
<li>
А это ссылка на
<a href="http://www.facebook.com">
www.facebook.com
</a>
</li>
</ul>

<h3>Как сделать нумерованный список</h3>
<ol>
<li>Начните с открывающего тега ol</li>
Привет, HTML!
<li>Затем добавьте несколько элементов в тегах li</li>

<li>Добавьте закрывающий тег ol</li>
</ol>
</body>
</html>
А затем обновите страницу в браузере — и вы увидите нечто похожее на

рис. 2.4.
Рис. 2.4. Страница с маркированным и нумерованным списками
Подытожим информацию, полученную из первых увиденных вами примеров. Во-

первых, все текстовое содержание помещается в HTML-теги.
Во-вторых, вы, наверное, заметили, что теги, заключенные в другие теги, смеще-
ны вправо с помощью отступов. Это делается потому, что HTML — иерархический
метод структурирования документов. Мы используем отступы как визуальную
пометку, напоминающую, что мы находимся на какой-либо ступени этой иерархии.
Это означает, что теги <head> и <body> заключены внутрь тега <html>, а теги <h1> и <p>,
в свою очередь, находятся внутри тега <body>. Случайным образом иногда мы поме-
щали ссылки на той же строке, что и их содержимое, а в других случаях — разбива-
ли строку. В HTML в большинстве случаев пробел не имеет значения.
И последнее по очереди, но не по важности: вы увидите, что в процессе создания
HTML-документа мы будем понемногу добавлять или изменять содержимое стра-
ницы, сохранять файл, а затем переходить к окну браузера и обновлять страницу.
Поскольку вы будете делать это очень часто, неплохо было бы попрактиковаться
несколько раз. Для начала добавьте несколько абзацев текста Lorem ipsum в тело
документа, а затем перейдите в браузер и перезагрузите страницу.
Вы будете проделывать эту операцию довольно часто, поэтому очень полезно выучить
клавиатурные сокращения для обновления страницы и переключения между активными
окнами в рабочей среде. В Windows и большинстве оболочек Linux вы можете исполь-
зовать Ctrl+Tab для переключения между активными окнами, а также Ctrl+R для обнов-
ления страницы. В Mac OS используйте Command+Tab и Command+R.
"’$ ’
$
Теги HTML образуют иерархическую структуру, называемую объектной моделью
документа (Document Object Model (DOM)). DOM — это способ представления
объектов, которые определяются через HTML, а затем взаимодействуют интерак-
тивно с помощью сценарного языка, например JavaScript. Теги HTML опреде-
ляют элементы DOM — сущности, находящиеся в модели.
Мы уже написали HTML способом, позволяющим визуализировать структуру
DOM. Вот почему мы отделяли отступами теги, находящиеся внутри других те-
гов, — это создает ощущение иерархии. Но хотя это и полезно для кода, не всегда
работает так ясно, как бы нам хотелось. Посмотрите вот на такой HTML:
<!doctype html>
<html>
<head>
<title>Привет!</title>
</head>
<body>
<h1>Привет!</h1>
<div>
<ol>
<li>Элемент списка</li>
<li> Элемент списка </li>
<li> Элемент списка </li>
</ol>
<p>Это абзац</p>
<p>Это <span>второй</span> абзац.</p>
</div>
<ul>
<li>Элемент списка<span>1</span></li>
</ul>
</body>
</html>
Использование валидации HTML для выявления проблем
В этом коде есть несколько тегов, с которыми вы еще не сталкивались, но пусть

это вас не беспокоит: понимать их назначение пока не обязательно. Важно, чтобы
вы обратили внимание: хотя этот код правильно разделен отступами, некоторые
теги все равно не выделены в отдельные строки. Например, элементы span нахо-
дятся на той же строке, что и элементы li. На самом деле это правильно, так как
тег <span> содержит всего один символ, но эта структура не иллюстрирует взаимо-
отношения между элементами так же хорошо, как отступы. Следовательно, нужен
другой способ визуализации этого примера.
В предыдущей главе мы обсуждали использование древовидной диаграммы для
создания ментальной модели файловой системы компьютера. Что ж, нам ничего
не мешает использовать ментальные модели для DOM! Эта ментальная модель
очень пригодится позднее, когда мы будем взаимодействовать с DOM с помощью
JavaScript. В качестве примера попробуем проиллюстрировать посредством дре-
вовидной диаграммы приведенный ранее код (рис. 2.5).
Эта диаграмма создает ясное представление о содержимом DOM. Кроме того,
она упрощает представление некоторых взаимоотношений: мы рассматриваем
элементы DOM, находящиеся в нижней части дерева, как потомки тех элементов,
что находятся выше, если существует путь, связывающий их. Непосредственные
потомки называются дочерними элементами, а элементы, находящиеся над дочер-
ними, являются по отношению к последним родительскими элементами.
В этом примере все элементы являются потомками элемента html, а элемент ul
является потомком элемента body. Элемент ul не является потомком элемента head,
так как не существует пути, начинающегося от элемента head и заканчивающегося
у элемента ul без продвижения вверх по иерархии. Элемент ul имеет три дочерних
элемента (это пункты списка — элементы li), а каждый элемент li имеет дочерний
span.
Мы изучим эти отношения подробнее по мере продвижения вперед, а пока
постарайтесь потренироваться в восприятии DOM именно таким образом.
$+70/
’#’’
Как я уже сказал в предыдущем разделе, текстовое содержание HTML-документа
обычно заключено в пару тегов. Открывающий тег выглядит как <html>, а закрыва-
ющий — как </html>. Точное имя тега означает тип элемента DOM, который он
собой представляет.
Если ваш документ становится слишком длинным, могут возникнуть некото-
рые проблемы. Например, представьте следующий HTML-документ, являющий-
ся определенным обобщением предыдущего примера, с несколькими новыми
тегами:
<!doctype html>
<html>
<head>
Рис. 2.5. Дерево, представляющее схему DOM

</head>
<body>
<nav>
<div>Войти</div>
<div>ВиО</div>
<div>О нас</div>
</nav>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <span>quis
nostrud exercitation</span> ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim <span>ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate <span>velit esse cillum dolore eu
fugiat</span> nulla pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</body>
</html>
Этот HTML-документ содержит ошибку, но если вы откроете его в браузере, то

не заметите ее. Попробуйте понять, где она, прежде чем читать дальше.
Нашли? Поздравляю — вы просто орлиный глаз! Если не нашли, ничего страш-
ного. Дело в том, что во втором предложении есть открывающий тег <span>, но нет
закрывающего. Большинство людей проводят много времени, пытаясь обнаружить
такие ошибки в начале работы. К счастью, существует автоматизированный способ
поиска ошибок в HTML-документах.
Программа валидации — это программа, которая автоматически проверяет, со-
ответствует ли код определенным базовым стандартам. Если вы изучали когда-то
язык программирования вроде Java или C++, вам, вероятно, приходилось работать
с компилятором. Если в коде есть ошибки, компилятор сообщит о них, пропустив
код через обработку. Языки вроде HTML немного «глупее» в том смысле, что брау
зер позволит вам допустить некоторое количество ошибок, но валидационная
программа обнаружит то, что он пропустил.
Но почему мы вообще должны думать об ошибках, если браузер отображает
страницу абсолютно одинаково, есть закрывающий тег <span> или его нет? Дело
в том, что единственный путь гарантировать, что страница будет всегда выглядеть
корректно в любом браузере, — соблюдение правил HTML. Вот почему HTML-
валидатор является очень полезным инструментом.
Нам не нужно устанавливать никакого программного обеспечения для исполь-
зования валидатора. Начнем с визита на домашнюю страницу W3C’s Markup
Validation Service validator.w3.org. На момент написания книги она выглядит так,
как показано на рис. 2.6.
Рис. 2.6. Домашняя страница W3C’s Markup Validation Service
Вы, наверное, заметили вкладку Validate by Direct Input. Щелкнув на ней, мы мо-
жем вырезать и вставить наш HTML-код в появившееся текстовое поле. После
вставки кода нужно нажать большую кнопку Check.
Начнем с примера с Lorem ipsum, приведенного ранее. Если он не содержит
никаких ошибок, мы увидим что-то похожее на рис. 2.7.
Рис. 2.7. Валидатор W3C HTML после проверки примера с Lorem ipsum
Валидируя HTML, вы, скорее всего, получите три предупреждения, даже если ошибок
нет. Первое из них сообщает, что валидатор использует правила для проверки HTML5.
Несмотря на то что стандарт HTML5 относительно стабилен, в нем все же могут быть
изменения, о чем и уведомляет это сообщение.
Другие два относятся к кодировке символов и в данный момент могут быть проигнори-
рованы. Если вам интересно, одно из предупреждений содержит ссылку на обучающий
материал по кодировке символов, который научит вас изменять кодировку HTML-доку-
мента.
Если код не проходит валидацию, то мы увидим список найденных ошибок.

Например, если запустим на проверку код с пропущенным закрывающим тегом
элемента span во втором абзаце, то увидим нечто похожее на рис. 2.8.
Рис. 2.8. Валидатор W3C HTML после проверки примера с ошибкой
Если мы прокрутим экран ниже, то увидим список найденных ошибок. Вали-

датор не способен точно указать, где проблемы, но если мы понимаем свой код, то
и сами их найдем. На рис. 2.9 показано, как валидатор описывает ошибки.
Всегда полезно периодически прогонять через программу-валидатор HTML-код,
чтобы убедиться в корректности последнего. Двигаясь к концу этой главы, я буду
периодически напоминать вам еще разок проверить HTML с помощью валидатора.
Пожалуйста, не забывайте делать это.
Рис. 2.9. Валидатор W3C HTML описывает допущенные ошибки
$PD]HULI¿F
В оставшейся части главы мы с вами создадим HTML для учебного веб-приложе-
ния. Таким образом мы убьем сразу двух зайцев: опробуем на настоящем проекте
рабочий процесс, изученный в предыдущей главе, а также рассмотрим еще несколь-
ко важных тегов HTML и отображаемых ими элементов.
#
Учебное приложение называется Amazeriffic, от слов amazing — «изумительный»
и terrific — «невероятный». Это название, конечно, немного глуповато, но не хуже
названия любой другой компании, размещающейся в наши дни в Кремниевой до-
лине. Предназначение продукта Amazeriffic состоит в отслеживании и категоризации
набора задач (по сути, это список необходимых дел). Далее в этой книге мы и в самом
деле поработаем над реализацией проекта, похожего на этот, но пока не освоимся
достаточно с HTML, сконцентрируемся на главной странице продукта. Страница,
которую мы создадим, будет похожа на рис. 2.10.
Помните, что HTML задает структуру документа. Это значит, что, даже если
мы видим здесь множество стилистических элементов (разные шрифты, цвета
и даже верстка элементов), по большей части их следует игнорировать, так как
к HTML они не имеют никакого отношения. Пока мы с вами концентрируемся
исключительно на структуре документа.
Amazeriffic
Рис. 2.10. Страница Amazeriffic, которую мы создадим в течение этой и последующих глав
Пока не перешли непосредственно к кодированию, даайте посмотрим, удастся

ли выделить различные части структуры. Попробуйте нарисовать эскиз этой стра-
ницы на листке бумаги карандашом, а затем пометить все структурные элементы
так тщательно, как только получится. Если вы не можете сообразить, что от вас
требуется, просто обведите все большие и маленькие элементы на странице, а затем
присвойте им описательные имена, которые показывают их роль в документе.
На рис. 2.11 вы можете посмотреть на версию предыдущего макета, где элемен-
ты обведены пунктирными линиями. Без труда можно заметить, что некоторые
элементы находятся внутри других. Таким образом мы видим взаимоотношения,
определяющие, какие элементы будут потомками других элементов в DOM, и это
поможет нам примерно прикинуть, каким будет HTML-код.
Нетрудно и подписать обведенные элементы. Например, вполне очевидно, где
находятся заголовок, логотип, навигационные ссылки, подвал, контактная инфор-
мация, карта сайта, основное содержание, второстепенное содержание и изображе-
ние. Все они представляют собой какие-то структурные элементы страницы.
Œ’#!$&
#
После идентификации всех структурных элементов нужно продумать, как они
будут сочетаться друг с другом. Чтобы сделать это, построим древовидную диа-
грамму для структуры, которая определит содержимое разных элементов. На рис. 2.12
показано древовидное представление возможной структуры.
Рис. 2.11. Макет Amazerrific, размеченный для представления структуры
ł’# 
Теперь, когда у нас есть древовидное представление страницы (как в голове, так
и на бумаге), очень легко написать код HTML, если мы знаем теги, необходимые
для всех элементов на странице. Поскольку вы еще не видели некоторые теги,
которые здесь упомянуты, я буду объяснять их назначение по ходу дела.
Прежде чем что-либо делать, создадим каталог для хранения проекта. Если вы
следовали инструкциям, приведенным в главе 1, у вас уже есть папка Projects в до-
машней папке (если вы в Mac OS или Linux) либо в каталоге Documents (если ра-
ботаете в Windows). Перейдем в эту папку из командной строки Tеrminal application
в Mac OS или из Git Bash в Windows. Используем команду cd:
Находясь в этой папке, создадим каталог для хранения проекта Amazeriffic.

Какую команду нужно использовать? Правильно! Команду mkdir:
hostname $ pwd
hostname $ mkdir Amazeriffic
Затем мы можем получить некоторую визуальную обратную связь, говорящую

о том, что папка была успешно создана, и наконец перейти в нее с помощью коман-
ды cd:
Amazeriffic
Рис. 2.12. Структура Amazeriffic в виде древовидной диаграммы

hostname $ ls
Amazeriffic
hostname $ cd Amazeriffic
Таким образом, сейчас мы находимся в новой папке проекта (в чем можем убе-
диться с помощью команды pwd). Следующая очень важная задача — поместить эту
папку в систему контроля версий. Создадим проект Git с помощью команды git
init:
hostname $ git init
Initialized empty Git repository in /Users/semmy/Projects/Amazeriffic/.git/
Теперь, когда мы создали рабочую папку и поместили ее в систему контроля

версий, наконец-то можно приступить к кодированию! Запустите Sublime, а затем
откройте папку Amazeriffic, используя клавиатурное сокращение, описанное в пре-
дыдущей главе.
Затем мы можем создать новый HTML-документ, щелкнув правой кнопкой
мыши на навигационной панели и выбрав New File. В результате будет создан бе-
зымянный файл, который мы тут же переименуем, просто набрав index.html. После
того как файл создан и переименован, можем открыть его двойным щелчком. До-
бавим «Hello, World!», чтобы в документе было какое-то видимое в браузере со-
держимое.
Убедившись, что у нас есть рабочая основа, можно запустить Chrome и открыть
страницу. Если все идет хорошо, мы увидим в браузере «Hello, World!».
Теперь можно начать с построения HTML-скелета нашего документа. Замени-
те «Hello, World!» в файле index.html следующим содержимым:
<!doctype html>
<html>
<head>
<title>Amazeriffic</title>
</head>
<body>
<h1>Amazeriffic</h1>
</body>
</html>
Сохраните файл и еще раз откройте страницу в браузере. Сделав это, увидите
нечто похожее на рис. 2.13.
Проделав все это, можем выполнить наш первый коммит. Перейдите к команд
ной строке. Сначала проверьте статус рабочей папки, а затем добавьте и зафикси-
руйте в системе контроля версий файл index.html:
# On branch master
#
# Initial commit
#
# Untracked files:
# (use "git add <file>..." to include in what will be committed)
Amazeriffic
Рис. 2.13. Страница Amazeriffic после добавления нескольких базовых элементов
#
# index.html1
# On branch master
#
# Initial commit
#
# (use "git rm --cached <file>..." to unstage)
#
# new file: index.html2
hostname $ git commit -m "Add default index.html to repository."
[master (root-commit) fd60796] Add default index.html to the repository.
1 file changed, 10 insertions(+)
create mode 100644 index.html3
Вы видите, что начали мы с проверки статуса. Это очень хорошая привычка — ви-
зуальная обратная связь всегда полезна. Кроме всего прочего, если мы случайно
изменим файл, который не собирались менять, то получим подсказку об этом.
Сейчас, однако, мы видим здесь только один файл — index.html.
1
Системное сообщение: «От бранч-мастера. Начальный коммит. Неотслеживаемые
файлы (используйте "git add <file>..." для добавления их в список для фиксирования
изменений): новый файл index.html». — Примеч. пер.
2
Системное сообщение: «От бранч-мастера. Начальный коммит. Будут зафиксированы
изменения (используйте "git rm –cached <file>…" для отмены фиксации): новый файл
index.html». —  Примеч. пер.
3
Системное сообщение: «1 файл изменен, 10 вставок (+). Создан модуль 100644 in
dex.html». — Примеч. пер.
Добавляем index.html и смотрим, что получилось, с помощью еще одного вызо-

ва git status. Это покажет нам, какие файлы войдут в коммит с командой git commit.
И наконец, выполним git commit, добавив соответствующее сообщение.
Теперь мы готовы по-настоящему приступить к построению структуры страни-
цы. Вернувшись к древовидной диаграмме, можем заметить, что у нас есть заголо-
вок, секция с основным контентом и подвал — нижняя часть страницы. Каждый из
них является потомком элемента body. В HTML есть специальные теги для каждой
из этих трех секций документа. Теги <header> и <footer> служат для элементов,
находящихся в самом верху и в самом низу страницы, а тег <main> представляет
секцию, где находится основное содержимое документа:
<!doctype html>
<html>
<head>
</head>
<body>
<header>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>
Обратите внимание: мы передвинули тег <h1>, содержащий название Amazeriffic,
внутрь тега заголовка. Это вызвано тем, что в нашей древовидной диаграмме на-
звание является потомком заголовка.
Затем обратимся к верхнему правому углу страницы, где находится небольшой
навигационный блок со ссылками на страницы Регистрация, ВиО, Техподдержка.
Очень удобно: в HTML есть специальный тег для создания навигационных эле-
ментов, который так и называется — nav. Добавим эту секцию в тег <header>:
<header>
<nav>
<a href="#">Регистрация</a> |
<a href="#">ВиО</a> |
<a href="#">Техподдержка</a>
</nav>
</header>
Обратите внимание: элемент nav содержит несколько ссылок, разделенных символом |.

Этот символ находится на вашей клавиатуре справа, над клавишей Enter, он совмещен
с обратным слэшем. Нужно удерживать клавишу Shift, чтобы набрать его.
Amazeriffic
Ссылки в элементе nav заключены в теги <a>. Как уже упоминалось, теги <a>
содержат атрибуты href, в которых обычно находится адрес страницы, куда мы
должны перейти, щелкнув по ссылке. Поскольку пока что наш пример не будет
содержать никаких настоящих ссылок, мы используем значок # как временную
заглушку для места, куда нужно потом вставить ссылку.
Завершив работу над секцией <header>, будет весьма неплохо зафиксировать ее
в хранилище Git. Сначала будет полезно выполнить команду git status, чтобы
увидеть измененные файлы в хранилище. Затем мы выполняем git add и git commit
с каким-то поясняющим сообщением об изменениях, содержащихся в коммите.
ø
После окончания работы над секцией <header> можем перейти к <main>. Из диаграм-
мы видно, что эта секция разделена на две основные части, как и заголовок. Там
есть содержимое, находящееся слева, и изображение справа. Текст слева разделен
на две отдельные секции, и нам придется принять это во внимание.
Чтобы структурировать текст на странице слева, понадобятся четыре новых
тега. Мы используем два заголовочных тега (<h2> и <h3>), которые представляют
собой заголовки менее важные, чем <h1>. Появится и тег <p>, который означает
содержимое абзаца. Кроме того, мы используем тег <ul>, чтобы создать маркиро-
ванный список, внутри которого теги <li> будут содержать элементы списка.
И последнее по порядку, но не по важности: нам понадобится тег <img>, чтобы
вставить изображение лампочки. Обратите внимание на то, что у тега <img> нет
соответствующего закрывающего элемента. Это потому, что HTML5 включает
набор элементов, относящихся к пустым (void). Пустые элементы обычно не под-
разумевают какого-либо содержимого внутри и, соответственно, не требуют закры-
вающего тега.
Зато, как вы сейчас увидите, у тега <img> есть необходимый атрибут alt. Он
содержит текстовое описание изображения. Это сделано для обеспечения доступ-
ности нашей страницы для слабовидящих пользователей, которые часто применя-
ют программы для чтения содержимого экрана при пользовании Интернетом.
Вы можете скачать изображение лампочки с сайта http://www.learningwebappdev.com/

lightbulb.png. Чтобы оно появилось на вашей странице, необходимо сохранить его в ту
же самую папку, где находится файл index.html.
После добавления структурированного содержания в тег <main> мы получим

примерно такой код:
<h2>Amazeriffic изменит вашу жизнь!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h3>Почему вам нужен Amazeriffic?</h3>
<ul>
<li>Он легко впишется в вашу жизнь</li>

<li>Он классный</li>
<li>Он перевернет ваш мир</li>
</ul>
<img src="lightbulb.png" alt="Изображение лампочки">
На этом этапе неплохо будет прогнать код через валидатор и убедиться, что вы
ничего случайно не пропустили. Если все хорошо, сделайте еще один коммит в наше
хранилище Git, а затем перейдем к подвалу.
ø
Подвал, как и два предыдущих блока, содержит две основные логические части. Одна
из них включает информацию о компании, а другая — набор ссылок, которые можно
назвать картой сайта. Более того, сама карта сайта поделена на две колонки.
В первую очередь следует отметить, что элемента HTML специально для кон-
тактной информации не существует. Это нормально, так как HTML предоставля-
ет два тега общего назначения, <div> и <span>, которые позволяют создавать разно-
образные элементы, структуру которых мы определяем самостоятельно. Разницу
между div и span рассмотрим в следующей главе.
В данном случае в подвале есть две разные структуры: контактная информация
и карта сайта. Таким образом, нам понадобятся два элемента <div>, у каждого из
которых есть свой атрибут class, с помощью которого указывается тип элемента.
Пока запомните, что атрибут class — это свойство, с помощью которого вы указы-
ваете назначение элементов <div> и <span>.
Кроме того, мы используем еще один тег <ul> для создания маркированного
списка элементов карты сайта. В результате у нас получится вот такой HTML для
структуры подвала:
<footer>
<div class="contact">
<h5>Свяжитесь с нами</h5>
<p>Amazeriffic!</p>
<p>555 50-я улица</p>
<p>Эшвилл, Северная Каролина 28801</p>
</div>
<div class="sitemap">
<h5>Карта сайта</h5>
<ul>
<li><a href="#">Домой</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Право</a></li>
<li><a href="#">Техподдержка</a></li>
<li><a href="#">ВиО</a></li>
<li><a href="#">Вакансии</a></li>
</ul>
</div>
</footer>
Добавьте содержание подвала в HTML-документ, проверьте его в HTML-вали-

даторе, чтобы убедиться в отсутствии ошибок, а затем отправьте в хранилище Git
очередной коммит.
Мы вернемся к этому примеру в главе 3, когда займемся его стилевым оформ-
лением.
В этой главе мы научились создавать структуру пользовательского интерфейса

приложения с помощью HTML. HTML — это язык разметки, который позволяет
нам использовать теги для определения структуры, называемой объектной моделью
документа (Document Object Model (DOM)). Браузер использует DOM для созда-
ния визуального представления страницы.
DOM является иерархической структурой и легко может быть представлена
в виде древовидной диаграммы. Иногда полезно представлять себе DOM в виде
дерева, так как это более ясно показывает отношения между элементами: предками,
потомками и родительскими.
Валидатор — полезный инструмент, помогающий нам избежать простых ошибок
и просчетов при построении HTML.
В этой главе мы также изучили несколько тегов, которые перечислены в табл. 2.1.
Они представляют собой специфические элементы структуры, за исключением
тега <div>. К тегу <div> обычно добавляется атрибут class, с помощью которого
указывается значение этого элемента.
Таблица 2.1. Теги HTML
œ
<html> Основной контейнер HTML-документа
<head> Содержит метаинформацию о документе
<body> Содержит то, что будет отображаться в браузере
<header> Заголовочная часть страницы
<h1> Самый важный заголовок (в документе обычно только один)
<h2> Второй по важности заголовок
<h3> Третий по важности заголовок
<main> Область основного содержания документа
<footer> Подвал (нижняя часть) документа
<a> Ссылка на другой документ или страницу, куда переходят по щелчку
<ul> Список элементов, для которых порядок перечисления неважен (маркированный)
<ol> Список элементов, для которых порядок перечисления важен (нумерованный)
<li> Элемент списка (любого)
<div> Контейнер для подструктуры
Ø$  
В коде Amazeriffic я оставил несколько ошибок. Рекомендую вам исправить их
и заставить код работать настолько хорошо, насколько вы сможете. Помните: если
возникнут какие-то проблемы, вы всегда можете обратиться к финальному вари-

анту HTML на нашей странице GitHub.
Выучив основы HTML, мы можем добавить несколько новых элементов к задачам

на заучивание. В дополнение к пяти шагам, упомянутым в предыдущей главе, вы
можете выполнять следующие дополнительные упражнения.
1. Откройте файл в Chrome, используя клавиатурные сокращения.
2. Измените файл index.html , включив в него теги <!doctype> , <html> , <head>
и <body>.
3. Добавьте тег <p>, содержащий просто слова «Hello, World!».
4. Обновите файл в Chrome и убедитесь, что он отображается корректно (если это
не так, исправьте ошибки).
5. Отправьте новый коммит в хранилище в Git из командной строки.
6. Добавьте в тег <body> теги <header>, <main> и <footer>.
7. Убедитесь, что все корректно отображается в Chrome.
8. Проверьте файл с помощью HTML-валидатора.
9. Отправьте изменения файла index.html в хранилище Git.
##
Нарисуйте древовидную диаграмму для следующего HTML-документа. Мы еще
раз используем этот документ в качестве практической задачи в конце глав 4 и 5:
<!doctype html>
<html>
<head>
</head>
<body>
<h2 class="important">Hi again</h2>
<p class="a">Абзац любого текста</p>
<div class="relevant">
<p class="a">Первый</p>
<p class="a">Второй</p>
<p>Третий</p>
<p>Четвертый</p>
<p class="a">Пятый</p>
<p class="a">Шестой</p>
<p>Седьмой</p>
</div>
</body>
</html>
ø#Œ)$4’$PD]HULI¿F
В навигационной панели Amazeriffic находится ссылка на страницу ВиО (Вопросы
и ответы), закрытая заглушкой. Создайте страницу с точно такими же заголовком
и подвалом, как на главной, но содержащую список вопросов и ответов в основной
части. Используйте текст Lorem ipsum (если, конечно, не хотите придумать текст
вопросов и ответов сами).
Сохраните этот файл как faq.html. Можете связать наши две страницы с помо-
щью атрибута href в теге <a>, установив его значение faq.html. Если вы поместите
оба файла в одну и ту же папку, то можете щелкнуть на ссылке, находящейся на
главной странице, и оказаться на странице ВиО. Можете установить и ссылку об-
ратно на страницу index.html с faq.html.
Ø$ +70/
На протяжении всей книги я буду рекомендовать вам Mozilla Developer Network
documentation для дальнейшего изучения определенных тем. Этот сайт содержит
замечательное описание HTML. Я рекомендую углубленно изучить документацию
и расширенные возможности.
ø$
В предыдущей главе мы изучили создание структуры HTML-документа и некото-

рые соответствующие ментальные модели. Но созданные нами страницы оставля-
ют желать лучшего с точки зрения стиля и дизайна.
В этой главе мы постараемся решить некоторые из этих проблем, изучив, как
можно изменить отображение HTML-документов с помощью каскадных таблиц
стилей (Cascading Style Sheets (CSS)). Как упоминалось в предыдущей главе, это
даст вам достаточно информации для начала работы с CSS, а из раздела «Больше
теории и практики» данной главы вы узнаете, как эксплуатировать эти ресурсы.
&66
Чтобы сделать первые шаги, начнем с простого HTML-примера, похожего на на-
чальные упражнения в предыдущей главе. Откройте командную строку и создайте
каталог под названием Сhapter3 (Глава 3) в папке Projects.
А сейчас запустите Sublime Text и откройте папку Chapter3 так, как мы это де-
лали в предыдущей главе. Создайте следующий HTML-файл и сохраните его в этой
папке как index.html:
<!doctype html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Всем привет!</h1>
<p>Это абзац.</p>
</body>
</html>
В этом файле составлена очень простая страница HTML с элементами h1 и p,

содержащимися в элементе body. Вы, конечно, обратили внимание на новый тег,
находящийся внутри тега <head>. Тег <link> связывает наш файл с другим, в котором
показан стиль отображения документа.
Привет, CSS!
Вы можете создать файл style.css с помощью Sublime из навигационного фай-

лового окна в редакторе. Содержание файла пусть будет следующим:
body {
background: lightcyan;
width: 800px;
margin: auto;
}
h1 {
color: maroon;
text-align: center;
}
p {
color: gray;
border: 1px solid gray;
padding: 10px;
}
Это простой пример файла CSS. В этом конкретном файле мы устанавливаем

для элемента body светло-голубой фон (lightcyan) и указываем браузеру, что текст,
содержащийся в элементе h1, должен быть светло-коричневым (maroon). Кроме того,
мы задаем ширину области body 800 пикселов и устанавливаем ширину полей auto,
благодаря чему область body будет выровнена по центру страницы. И наконец, мы
задаем для текста, находящегося в элементе p, серый цвет и создаем вокруг него
тонкую границу.
По сути дела, файл CSS описывает, как определенные элементы HTML будут
отображаться в браузере. Например, на рис. 3.1 показано, как предыдущий HTML
взаимодействует с файлом CSS.
Рис. 3.1. Файл index.html, связанный с таблицей стилей и открытый в Chrome
Если бы мы не включили CSS, файл выглядел бы так, как продемонстрировано

на рис. 3.2.
Глава 3. Стиль
Рис. 3.2. Файл index.html, не связанный с таблицей стилей и открытый в Chrome
Если файлы index.html и style.css находятся в одной и той же папке, то вы

можете открыть первый из них в браузере и увидеть, что он похож на рис. 3.1.
Фактически если вы создадите еще одну страницу HTML с другим содержанием
и свяжете ее с тем же самым файлом CSS, то обе страницы будут отображаться
так, как указано в этой таблице стилей. Это одно из главных преимуществ CSS —
он позволяет стилизовать сразу несколько страниц с помощью всего одного
файла!
ı#
Файл CSS — это коллекция наборов правил, а набор правил — это просто ряд ука-
заний относительно стилевого оформления, которые применяются к какому-либо
виду элементов в DOM (как вы помните, это иерархическая система объектов
в HTML-документе). Набор правил состоит из селектора — это может быть, на-
пример, название тега, открывающей фигурной скобки, списка правил и закрыва-
ющей фигурной скобки. Каждое правило состоит из определенного свойства,
после которого следуют двоеточие, значение этого свойства (или список значений,
разделенных пробелами), после чего ставится точка с запятой, например:
body {
width: 800px;
background: lightcyan;
color: #ff0000;
}
Это пример набора правил, применяемых в DOM к элементу body. В данном

случае селектор — это body, то есть просто название элемента HTML, к которому
мы хотим применить стиль. Эти правила будут применяться ко всему содержимо-
му элемента body, то есть ко всем элементам, находящимся внутри него. В набор
Привет, CSS!
входят три правила: первое определяет значение свойства width (ширина), вто-
рое — свойства background (фон), а третье — свойства color (цвет).
В CSS существует два способа указания цвета. Первый — названия наиболее часто
употребляемых в CSS цветов. Второй — указание шестнадцатеричного цветового кода.
Этот код состоит из шести цифр шестнадцатеричной системы счисления (0–9 или A–F).
Первая пара определяет количество в цвете красного, вторая — зеленого, а третья — си-
него. Эти три цвета являются основными в цветовой модели RGB.
Опытный разработчик CSS хорошо знает типы свойств, которые могут быть
установлены для какого-либо элемента, а также разбирается во всем разнообразии
их значений. Большинство свойств, например цвет фона или шрифта, могут при-
меняться к очень многим элементам HTML.
В наш файл CSS можно также добавлять комментарии. Как и в HTML, коммента-
рии в CSS являются просто пометками к коду, которые браузер полностью игно-
рирует. Например, мы можем добавить комментарии к предыдущему набору правил
следующим образом:
/* Здесь находится стиль для элемента body */
body {
width: 800px; /* Устанавливаем ширину body 800 пикселов */
background: lightcyan; /* Устанавливаем светло-голубой цвет фона */
color: #ff0000; /* Устанавливаем красный цвет для элементов*/
}
Некоторые советуют свободно писать в программах комментарии. Но я все-таки

склоняюсь к мысли, что лучше позволить коду говорить самому за себя, насколько
это возможно, и минимизировать необходимость комментариев. На самом деле
опытные разработчики CSS, скорее всего, сочтут приведенные ранее комментарии
избыточными, да и вы, когда узнаете обо всех этих элементах несколько больше,
перестанете в них нуждаться. В то же время бывают ситуации, когда неочевидно,
что должен делать код, тогда сделать некоторые пометки весьма полезно.
Если вы только начинаете работать с CSS, я бы рекомендовал вам писать ком-
ментарии чаще и подробнее. В оставшейся части главы я использую комментарии
в свободной форме, чтобы сделать материал более понятным.
##’
В большинстве своем элементы HTML отображаются двумя способами. Пер-
вый — внутристрочный, который применяется, например, к элементам span. Это
значит, кроме всего прочего, что содержимое тега будет появляться на той же стро-
ке, что и окружающие его элементы:
<div>
Этот абзац и это <span>слово</span> отображаются внутри строки. Эта
<a href="http://www.example.com">ссылка</a> тоже отображается внутри строки.
</div>
Если мы добавим этот элемент в тег body в нашем index.html, то страница будет
отображаться, как показано на рис. 3.3.
Рис. 3.3. Пример внутристрочного отображения элемента внутри блочного элемента
Но чаще элементы являются блочными, а не внутристрочными. Это значит, что

содержимое, находящееся внутри элемента, будет отображаться с новой строки по
отношению ко всему тексту. К блочным элементам, с которыми мы уже знакомы,
относятся p, nav, main и div:
<div>
Этот абзац и это <div>слово</div> отображаются внутри строки. Эта
<a href="http://www.example.com">ссылка</a> тоже отображается внутри строки.
</div>
Этот код будет выглядеть несколько иначе (рис. 3.4).
Рис. 3.4. Пример блочного элемента, находящегося внутри другого блочного элемента
Привет, CSS!
Стили как блочных, так и внутристрочных элементов имеют свойства цветов

фона и элемента. Но в стиле блочных элементов содержатся еще три важных свой
ства, которые очень полезны при настройке компоновки страницы: отступы
(padding), границы (border) и поля (margin).
Отступ представляет собой пространство между содержанием элемента и его
границей, а поля — пространство между самим элементом и его контейнером. Гра-
ницей же является пространство между отступом и полями. Эта схема показана на
рис. 3.5.
Рис. 3.5. Поля, граница и отступы блочного элемента DOM
Рассмотрим простой пример, который поможет изучить манипулирование

размерами полей, отступов и границы для различных элементов. Создадим файл
margin_border_padding.html:
<!doctype html>
<html>
<head>
<title>Глава 3 — Пример границ, отступов и полей</title>
<link href="margin_border_padding.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<p>ЭТО АБЗАЦ, НАХОДЯЩИЙСЯ ВНУТРИ ЭЛЕМЕНТА DIV</p>
</div>
</body>
</html>
Еще нам понадобится файл margin_border_padding.css, на который мы ссылались

в файле HTML ранее. Вы можете создать эти файлы в одной папке в Sublime, а за-
тем открыть файл margin_border_padding.html в Chrome:
body {
background: linen;
width: 500px;
margin: 200px auto;
}
div {
border: 5px solid maroon;
text-align: center;
padding: 5px;
}
p {
border: 2px dashed blue;
}
Если вы все набрали правильно, то страница будет выглядеть так, как показано
на рис. 3.6.
Рис. 3.6. Пример для изучения полей, отступов и границы
Вы можете видеть, что все элементы (и div, и p) являются блочными и имеют

собственные границу, поля и отступы. Если вы этого еще не добились, попробуйте
повторить HTML и CSS, показанные здесь. Затем поупражняйтесь немного в из-
менении свойств padding, border и margin каждого элемента, чтобы разобраться, как
они влияют на отображение страницы.
ø#
Самый важный аспект в CSS — эффективное использование селекторов. Мы уже
видели базовый тип селекторов, в качестве которых используется название тега —
для применения стиля выбираются все теги с таким именем. Например, рассмотрим
следующий HTML:
Селекторы
<body>
<p>Это абзац.</p>
<p>Это второй абзац.</p>
</body>
Предположим, что для применения к нему стиля используется следующий

CSS:
h1 {
background: black;
color: white;
}
p {
color: red;
margin: 10px;
padding: 20px;
}
Первый набор правил оформляет элемент h1, а второй — оба элемента p. Во мно-
гих случаях нам будет требоваться именно это. Однако в других мы можем захотеть
применить к первому и второму абзацам разные стили.
#
В главе 2 мы уже видели, что можно добавить атрибут class к тегам <div>, чтобы
отличать один от другого. На самом деле мы можем добавить класс к любому эле-
менту DOM. Например, можем переписать предыдущий HTML следующим обра-
зом:
<body>
<p class="first">Это абзац.</p>
<p class="second">Это второй абзац.</p>
</body>
Теперь мы можем применить стиль к определенному абзацу в соответствии с его

классом:
h1 {
background: black;
color: white;
}
p.first {
color: red;
margin: 10px;
padding: 20px;
}
В этом примере набор правил p.ruleset будет применяться только к первому

элементу p, то есть к первому абзацу. Если класс появляется только у определенного
типа элементов (как обычно и происходит), то мы можем опустить имя тега и прос-
то использовать класс:
.first {
color: red;
margin: 10px;
padding: 20px;
}
В главе 2 мы убедились, что можем создавать кликабельные элементы DOM с по-

мощью тега <a>:
<body>
<a href="http://www.example.com">Click Me!</a>
</body>
Элементу а может быть присвоен стиль точно так же, как любому другому эле-
менту DOM, — с помощью CSS. Например, мы можем создать файл CSS, который
изменяет цвета всех ссылок:
a {
color: cornflowerblue;
}
Часто бывает полезно менять цвет ссылки в зависимости от того, нажимал на

нее пользователь или еще нет. CSS позволяет изменить цвет однажды нажатых
ссылок добавлением нового набора правил:
a {
}
a:visited {
color: tomato;
}
В этом коде visited — пример псевдокласса CSS для элемента a. Он ведет себя
почти так же, как и обычный класс, и мы можем присвоить элементам стили с его
помощью, как будто он является обычным классом. Главное отличие состоит в том,
что браузер самостоятельно добавляет этот класс.
Основной случай использования псевдоклассов CSS — изменение способа
отображения ссылки после того, как пользователь наводит на нее указатель мыши.
Этого можно достичь с помощью псевдокласса hover для элемента a. В следующем
примере мы изменяем предыдущий пример так, чтобы ссылка становилась подчерк
нутой, только когда пользователь наводит на нее указатель мыши:
a {
text-decoration: none; /* убираем подчеркивание по умолчанию */
}
Селекторы
a:visited {
color: tomato;
}
a:hover {
text-decoration: underline;
}
Ø##
По мере разрастания древовидной диаграммы DOM появляется необходимость
в более сложных селекторах. Рассмотрим, например, такой HTML:
<body>
<div class="content">
<ol>
<li>Элемент списка <span class="number">первый</span></li>
<li>Элемент списка <span class="number">второй</span></li>
<li>Элемент списка <span class="number">третий</span></li>
</ol>
<p>Это <span>первый</span> абзац.</p>
<p>Это <span> первый</span> абзац.</p>
</div>
<ul>
<li>Элемент списка <span class="number">1</span></li>
</ul>
</body>
В этом HTML-коде два списка, несколько абзацев, несколько элементов списка.

Мы можем выбрать основные элементы и присвоить им стили, как обсуждалось
ранее. Например, если нужна закругленная граница вокруг нумерованного списка
(ol), можем использовать следующий набор правил:
ol {
border: 5px solid darksalmon;
border-radius: 10px;
}
А теперь допустим, что мы хотим сделать элементы нумерованного списка ко-

ричневыми. Для этого можно было бы прибегнуть к следующему:
li {
color: brown;
}
Но таким образом мы изменим все элементы во всех списках — и в маркирован-

ном, и в нумерованном. Можно поступить более конкретно и указать селектор
только для элементов li в нумерованном списке:
ol li {
color: brown;
}
Если на странице несколько нумерованных списков, может понадобиться еще
больше конкретики. Тогда мы укажем, что стиль относится только к тем элементам
li, которые являются потомками элемента div класса content:
.content li {
color: brown;
}
А теперь допустим, что надо сделать фон первого элемента всех списков жел-
того цвета. Для этого существует псевдокласс first-child, указывающий на первый
дочерний элемент каждого родителя:
li:first-child {
background: yellow;
}
Аналогично для второго, третьего и четвертого потомков мы можем использо-
вать псевдокласс ntn-child:
li:nth-child(2) {
background: orange;
}
#
Что если два разных набора правил используют селекторы, указывающие на один
и тот же элемент в HTML? Например, представим, что у нас есть элемент p с клас-
сом greeting:
<p class="greeting">Приветствуем каскадные правила!</p>
А затем напишем два правила, которые применяют к этому элементу разные
стили:
p {
color: yellow;
}
p.selected {
color: green;
}
Какое же из правил будет применено к указанному ранее элементу? Оказыва-
ется, мы получили набор каскадных правил, который браузер будет применять в слу-
чае конфликта. В данном случае более конкретное правило (класс) получает пре-
имущество. Но что произойдет, если мы напишем что-то подобное:
p {
color: yellow;
}
Селекторы
p {
color: green;
}
В этом случае будет применяться набор правил, указанный в списке CSS позд-
нее. Следовательно, абзац или абзацы окажутся зеленого цвета. Если мы поменяем
правила местами, абзац станет желтым.
ı
Если вы еще не заметили, потомки наследуют свойства своих родителей. Что это
значит в отношении применения стилей к элементам? Если мы устанавливаем для
элемента какой-либо стиль, все его потомки в DOM будут оформлены точно так
же, если только для них специально не указан какой-либо другой стиль. Так, на-
пример, если мы изменяем свойство color для элемента body, все элементы, явля-
ющиеся потомками body (то есть все элементы, отображающиеся на странице),
будут наследовать этот цвет. Это самая суть CSS — вот почему очень полезно
визуализировать DOM и держать в голове иерархию во время присвоения стилей
элементам:
body {
background: yellow;
}
/**
* Поскольку h1 является потомком тега body,
* у него будет желтый фон
*/
h1 {
color: red;
}
/**
* h2 тоже потомок элемента body, но мы
* перекрываем правило для его фона,
* он не будет желтым
*/
h2 {
background: green;
}
Большая часть CSS-свойств работает именно таким способом. Надо отметить,

что не все свойства наследуются по умолчанию. Основная часть ненаследуемых
свойств относится к блочным элементам (правила для полей, отступов, границ
элементы не наследуют от своих родителей):
body {
margin: 0;
padding: 0;
}
/**
* h1 не унаследует правила для полей и отступов от body,

* даже если мы не укажем иного
*/
h1 {
}
&!’
Мы познакомились с элементами, влияющими на базовый стиль элементов DOM.
Но существуют и другие, более общие свойства, которые влияют на всю компонов-
ку страницы относительно единичного элемента. Эти свойства значительно рас-
ширяют возможности разработчика в части управления расположением элементов
на странице. Одно из самых часто используемых свойств — float. Это свойство
может помочь нам создать более гибкие компоновки, чем статичная разметка, ко-
торую HTML создает автоматически.
Свойство элементов DOM под названием float может иметь значения left
и right. Оно устанавливает элемент вне рабочего потока (согласно которому, как
правило, элементы располагаются сверху вниз один за другим) и выравнивает его
по левой или правой стороне элемента-контейнера при условии, что есть достаточ-
но места, чтобы это сделать. Например, рассмотрим такой фрагмент HTML:
<body>
<main>
<nav>
<p><a href="link1">Ссылка 1</a></p>
</nav>
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur.
</p>
</main>
</body>
В этом примере элементы nav и p находятся внутри элемента main. Мы также со-
здали отдельный элемент p для каждой ссылки, потому что хотим, чтобы элементы
отображались как блочные (каждая на отдельной строке). Без присвоения им стилей
эти элементы будут располагаться друг за другом вертикально (рис. 3.7).
А сейчас попробуем применить к этому HTML следующий CSS:
main {
width: 500px;
margin: auto;
Селекторы
Рис. 3.7. Отображение страницы перед применением CSS
background: gray;
}
nav {
/* Уберите пометку комментария со следующей строки, если хотите иметь черную гра-
ницу */
/* border: 3px solid black; */
width: 200px;
float: right;
}
p {
margin: 0; /* Ноль от границы по умолчанию */
}
Результат будет похож на рис. 3.8.
Рис. 3.8. Пример размещения элементов справа

Отметим, что мы задали ширину навигационного элемента равной 200 пикселам

и разместили его справа, чтобы создать боковую панель. Обратите внимание, каким
образом элемент nav был извлечен из стандартной вертикальной разметки и раз-
мещен справа. Содержание элемента p обтекает элемент div, содержащий в себе nav.
Я также включил сюда линию — вы можете раскомментировать ее, чтобы вокруг
плавающего элемента появилась визуальная граница. Попробуйте сделать это!
Хотя установка элемента плавающим справа отлично работает для изображений
и других внутренних элементов, которые может обтекать текст, часто нужно создать
компоновку, подобную сетке и состоящую из двух колонок. Эта задачка немного
интереснее. В этом случае нужно сдвинуть элемент p влево и убедиться, что сум-
марный размер двух элементов не превышает размер контейнера. Вот как можно
этого достичь с помощью CSS:
main {
width: 500px;
margin: auto;
background: gray;
}
nav {
width: 100px;
float: right;
}
/* убираем значения по умолчанию для p, наследуемые от элемента nav */
nav p {
margin: 0;
padding: 0;
}
p {
margin: 0; /* убираем значения полей для р по умолчанию */
float: left;
width: 400px;
}
Сейчас, если мы откроем страницу в браузере, то увидим, что у нас отлично
вышли две колонки, но исчез серый фон. Это потому, что, когда все элементы, со-
держащиеся в контейнере, становятся плавающими, высота контейнера равняется
нулю. Исправить это очень просто — устанавливаем для контейнера div свойство
overflow со значением auto:
main {
width: 500px;
margin: auto;
background: gray;
overflow: auto;
}
Таким образом мы получили разметку, аналогичную показанной на рис. 3.9.
Отметим, что в этом примере мы установили суммарную ширину левого и пра-
вого элементов, равную 500 пикселам, что точно соответствует ширине контейне-
ра div. Поэтому, если мы добавим какие-то отступы, поля, границы или другие
Селекторы
элементы, у нас возникнут проблемы. Например, мы можем захотеть слегка ото

двинуть текст в элементе p от края. Это потребует применения отступов, но если мы
добавим к элементу отступ 20 пикселов, то получим что-то похожее на рис. 3.10.
Рис. 3.9. Простая разметка в две колонки с использованием плавающих элементов
Рис. 3.10. Добавление отступов разбивает нашу разметку
Так произошло потому, что сумма пикселов в элементе main больше его ширины.
Мы можем исправить это, уменьшив ширину с учетом двойной величины отступа
(так как правый и левый отступы равны 10 пикселам). В результате CSS будет
выглядеть так:
main {
width: 500px;
margin: auto;
background: gray;
overflow: auto;
}
nav {
width: 100px;
float: right;
}
p {
margin: 0; /* убираем поля по умолчанию для элемента p */
padding: 10px;
float: left;
width: 380px; /* 400 — 2*10 = 380 */
}
Тот же прием можно использовать при добавлении к элементам границы или

полей ненулевой ширины.
øFOHDU
При создании разметки с помощью плавающих элементов можно столкнуться
с интересной проблемой. Рассмотрим немного другой документ HTML. Сейчас
наша цель — установить навигацию с левой стороны, а подвал оставить охватыва-
ющим обе колонки.
<body>
<nav>
</nav>
<main>
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur.
</p>
</main>
<footer>
<p>Это подвал</p>
</footer>
</body>
Следующий CSS-код отправляет элемент nav в правую часть страницы и обну-

ляет поля и отступы по умолчанию с помощью универсального селектора, который
Селекторы
выбирает все элементы DOM. Он также устанавливает для фона элемента разные
оттенки серого цвета (рис. 3.11):
* {
margin: 0;
padding: 0;
}
nav {
float: left;
background:darkgray;
}
main {
background:lightgray;
}
footer {
background:gray;
}
Рис. 3.11. Обратите внимание: подвал находится под секцией main, вместо того чтобы
располагаться снизу всего содержимого страницы
По сути, подвал находится с правой стороны разметки, под главной секцией.

А мы бы хотели, чтобы подвал был под обоими элементами. Вот для чего нужно
свойство clear. Мы можем указать элементу footer расположение под плавающим
элементом слева, справа или под обоими, левым и правым, элементами на страни-
це, указав соответствующее значение свойства clear. Вот как можно изменить CSS
для подвала:
footer {
background:gray;
clear: both; /* в данном случае можем использовать и 'clear: left'*/
}
Отображение получится похожим на рис. 3.12 — теперь подвал находится под

обоими плавающими элементами, как мы и хотели.
Для начинающих плавающие элементы обычно являются самым трудным ас-
пектом в CSS, поэтому я рекомендую вам потратить немного времени на экспери-
менты с созданием разметки.
Рис. 3.12. Мы зафиксировали компоновку, установив свойство clear для подвала
ł
В прошлом работа с нестандартными шрифтами на сайтах была очень проблема-
тичной, потому что вы были ограничены теми из них, которые имелись на компью-
терах ваших пользователей. Веб-шрифты значительно упростили эту задачу, так
как вы можете запрашивать их прямо из Интернета, когда в них возникает необхо-
димость. В Google сейчас хранится множество нестандартных шрифтов, использо-
вать которые очень просто.
Вы можете начать с домашней страницы Google Fonts (рис. 3.13). Здесь мы
видим длинный список шрифтов и сразу можем просмотреть их отображение.
В этом примере мы используем шрифт, который называется Denk One. Когда
я зашел на домашнюю страницу Google Fonts, это был самый первый шрифт в спис-
ке. Чтобы использовать этот шрифт, нажмите кнопку Quick-use (Быстрое исполь-
зование) — это одна из кнопок, расположенных слева от большой синей кнопки
Add to Collection.
Нажав ее, мы увидим инструкции по использованию шрифта на нашей страни-
це. Нужно добавить тег <link> в секцию head HTML. Если мы используем более
ранний пример, то можем просто скопировать и вставить тег <link> со страницы
быстрого использования или самостоятельно написать следующее:
<head>

<link href="http://fonts.googleapis.com/css?family=Denk+One"
rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
Работа со шрифтами
Рис. 3.13. Домашняя страница Google Fonts1
HTML допускает применение как одинарных ('), так и двойных (") кавычек для ограни-
чения строк и значений. В примерах в этой книге я старался придерживаться использо-
вания двойных кавычек, но в скопированном и вставленном коде Google видим одинар-
ные. Поскольку они эквивалентны друг другу, можете исправить их на двойные или
оставить одинарными, значения это не имеет.
Таким образом этот веб-шрифт стал доступным на нашей странице. Теперь мы

можем использовать его в файле CSS. Например, чтобы установить шрифт Denk
One для элемента h1, надо добавить в набор правил свойство font-family:
h1 {
font-family: 'Denk One', sans-serif;
}
Первая часть записи указывает желаемый шрифт (который стал доступным

для применения с помощью тега <link>), а вторая — тот шрифт, который будет
использоваться, если заданный нами окажется недоступным. То есть, по сути, эта
запись говорит: «Применяй Denk One, если он доступен, а если нет, используй
шрифт по умолчанию из семейства sans-serif, установленный в системе пользо-
вателя».
1
На рисунке показаны шрифты, выбранные с применением фильтра Script:Cyrillic
(находится на панели слева, значение по умолчанию — Latin). Большинство кириллических
шрифтов, разумеется, поддерживают латинский алфавит, но, к сожалению, не наоборот. —
Но если отображать шрифты и изменять их цвет (с помощью свойства color

соответствующего элемента) очень просто, то как быть с их размером? В прошлом
существовало несколько способов это сделать, но в итоге остался один способ,
признанный всеми лучшим.
В первую очередь нужно учесть, что пользователь может изменять шрифт по
умолчанию в браузере и наши страницы должны позволять это сделать. Таким
образом, мы можем установить основной размер шрифта в наборе правил для эле-
мента body документа, а затем масштабировать все шрифты относительно его.
К счастью, с помощью CSS сделать это очень просто. Для указания длины нужно
использовать единицы em:
body {
font-size: 100%; /* устанавливаем базовый размер шрифта для всего документа */
}
h1 {
font-size: xx-large; /* установлен относительно базового размера шрифта */
}
h2 {
font-size: x-large;
}
.important {
font-size: larger; /* делает шрифт несколько больше, чем в родительском элементе
*/
}
.onePointTwo {
font-size: 1.2em; /* устанавливает его в 1,2 раза больше базового размера */
}
В этом примере мы устанавливаем базовый размер шрифта равным 100 % раз-

мера, установленного в браузере пользователя, а затем масштабируем относитель-
но его остальные шрифты. Можно использовать абсолютные величины CSS хх-large
или x-large (а также аналогично x-small или xx-small), которые соответственно
будут изменять масштаб. Аналогично можем использовать относительные размеры,
larger или smaller, чтобы сделать размер шрифта больше или меньше для данного
содержания.
Если требуется более точно определенное управление размерами шрифтов, мы
используем величины em (что значит метаединицы) — множитель, на который
умножается текущий размер шрифта. Например, если базовый размер шрифта
элемента body равен, скажем, 12 пунктов, то установление для какого-то другого
элемента размера шрифта 1,5 em обеспечит точный размер 18 пунктов. Это очень
полезно, так как шрифты масштабируются соответственно базовому размеру шриф-
та. Благодаря этому мы можем поменять размер всех шрифтов на странице, изме-
няя размер одного только базового шрифта. Это значительно упрощает работу
с сайтом для слабовидящих людей: они часто устанавливают больший размер ба-
зового шрифта в браузере, используя таким образом em вместо абсолютных вели-
чин, что может нарушить разметку страницы.
Устранение браузерной несовместимости
В предыдущем примере мы установили размер шрифта в абзаце в 1,2 раза боль-

ше базового шрифта. На рис. 3.14 показано, как данный набор правил определяет
стили в документе.
Рис. 3.14. Примеры шрифтов на основе упомянутой ранее таблицы стилей
ß
С одним спорным инструментом, который называется сбросом CSS, вы будете
сталкиваться довольно часто.
Вспомните «плавающий» пример, когда мы убирали поля по умолчанию и отсту-
пы в тегах абзацев? Оказывается, разные браузеры имеют разные базовые настройки
CSS, в результате чего отображение стиля в этих браузерах может несколько разли-
чаться. Сброс CSS (CSS reset) был разработан для удаления всех браузерных настро-
ек по умолчанию. Самый известный инструмент создал Эрик Мейер.
Почему я назвал сброс CSS спорным? По нескольким причинам. Одна из них —
веб-доступность. Сброс настроек может, к примеру, вызывать проблемы у людей,
которые управляют навигацией с помощью клавиатуры. Еще одна причина — про-
изводительность. Поскольку в инструментах часто используется универсальный
селектор (*), они могут серьезно перегружать сайт. И наконец, эти инструменты
означают огромное количество лишней работы, потому что на деле довольно часто
браузерные настройки полностью соответствуют вашим нуждам.
В то же время я думаю, что сброс — отличный инструмент с точки зрения педа-
гогики, вот почему я рассказываю о нем здесь. Он заставляет новичков в точности
указывать, какими они хотят видеть отдельные аспекты страницы, а не полагаться
на значения в браузере по умолчанию. Поскольку я предполагаю, что вы являетесь
новичком в CSS, так как читаете сейчас эту книгу, то рекомендую вам поупраж-
няться со сбросами.
Чтобы сделать объяснение более понятным, я включу инструмент сброса в от-
дельную таблицу стилей и добавлю дополнительный элемент link в мой HTML.
Мы можем скопировать сброс Эрика Мейера в отдельный файл reset.css и связать
его с нашим HTML:
<head>
<title>Пример 8 — Использование сброса CSS</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Увидеть, к чему это приведет, очень просто. Рассмотрим следующий HTML:

<body>
<h1>Это заголовок</h1>
<h3>Это менее важный заголовок</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</p>
</body>
На рис. 3.15 показано, как страница отображается в Chrome при применении

только стилей браузера.
Рис. 3.15. Простая страница со стилем по умолчанию
Обратите внимание на то, что шрифт и поля элементов h1 и h3 уже заданы.

У элемента p тоже изменены поля.
А сейчас сделаем сброс. Я скопировал свой файл сброса со страницы Эрика
Мейера и сохранил его в файле reset.css в той же самой папке, что и мой HTML.
Я также изменил тег <head> в HTML следующим образом:
Использование CSS Lint для выявления возможных проблем
<head>
<title>Пример 8 — Использование сброса CSS</title>
<link href="reset.css" rel="stylesheet" type="text/css">
</head>
Сейчас, перезагрузив страницу, мы увидим нечто похожее на рис. 3.16.
Рис. 3.16. Простая страница, где с помощью сброса удалены все стили по умолчанию
Поля, отступы и настройки шрифта по умолчанию были полностью удалены со

страницы. Конечно, мы не собираемся оставлять сайт в таком виде, но запомните
главное: включение сброса CSS полностью удаляет стили, использованные в брау
зере по умолчанию. Благодаря этому те правила, которые мы разрабатываем и со-
храняем в своих CSS-файлах, всегда будут приводить к одному и тому же резуль-
тату, независимо от того, какие настройки (и, следовательно, соответствующий
набор правил по умолчанию) сделаны в браузере пользователя.
$&66/LQW’#’’
#
Как и в случае HTML, очень неплохо иметь инструмент, который поможет нам
выявлять потенциальные проблемы с CSS. Например, можете ли вы заметить
ошибку в этом примере?
body {
background: lightblue;
width: 855px;
margin: auto;
h1 {
background: black;
color: white;
}
p {
color: red;
margin: 10px
padding: 20px;
}
Если вы нашли ее, получите тройку с плюсом, потому что в этом примере целых
две ошибки! Думаю, отсутствие закрывающей скобки после набора правил для body
бросается в глаза сразу. Но есть и еще одна.
Вы, наверное, нашли ее, посмотрев внимательно еще раз. Но если нет, обратите
внимание на набор правил для элемента p. После свойства margin пропущена точка
с запятой.
Как и HTML-валидатор, CSS Lint — это инструмент, который может помочь
выявить потенциальные проблемы с кодом. Как и онлайн-валидатор W3C HTML,
он не требует установки на компьютер какого-либо программного обеспечения.
Просто зайдите на страницу http://csslint.net (она показана на рис. 3.17), а затем
скопируйте и вставьте туда CSS.
Рис. 3.17. Домашняя страница CSS Lint
CSS Lint дает несколько больше предупреждений, чем инструмент для HTML,
изученный нами в главе 2, но здесь есть опции, позволяющие настроить уровень
предупреждений. Вы можете увидеть эти опции, щелкнув на стрелке вниз справа
на большой кнопке LINT! на главной странице. Опции разбиты на категории соглас-
но причинам предупреждений. Например, опция Disallow universal selector (Запрещать
универсальные селекторы) находится в категории Performance (Производитель-
ность). Это значит, что если вы готовы допустить чуть более медленную загрузку
вашей страницы ради какой-то особенной функциональности CSS, то отключаете
эту опцию и предупреждаете Lint об этом.
Обычно я оставляю все опции в CSS Lint выбранными, но вы можете настроить
и свои варианты. Я бы рекомендовал не выключать ни одну из них, а, получив
предупреждение, уделить немного времени поиску в Google, чтобы разобраться
Взаимодействие и решение проблем с Chrome Developer Tools
в причине. Ведь это почти то же самое, что получить консультацию у настоящего

эксперта по CSS!
Œ
&KURPH’HYHORSHU
7RROV
В абсолютно любом программном обеспечении очень часто наблюдается ситуация,
когда все идет совсем не так, как надо. При использовании CSS это чаще всего
означает, что страница выглядит в браузере совершенно иначе, чем вы ожидали,
а в чем проблема — непонятно. К счастью, браузер Chrome включает в себя отлич-
ный набор инструментов, которые помогут решить проблемы как с CSS, так
и с HTML.
Начнем с открытия файла margin_border_padding.html в Chrome. Затем откройте
меню View, выберите подменю Developer и щелкните на опции Developer Tools1. В ре-
зультате внизу страницы откроются Инструменты разработчика Chrome. Если вклад-
ка Elements вверху панели неактивна, щелкните на ней — таким образом вы увиди-
те нечто похожее на рис. 3.18.
Рис. 3.18. Инструменты разработчика Chrome, открытые для примера

margin_border_padding.html
1
На сегодняшний момент: кнопка панели Chrome в правом верхнем углуTools (Инст
рументы)Developer Tools (Инструменты разработчика) или сочетание клавиш
Ctrl+Shift+I. — Примеч. пер.
С левой стороны вы видите какой-то фрагмент HTML-кода со стрелочками,

которые могут сворачивать или разворачивать дочерние элементы. Если стрелка
направлена вправо, это значит, что вы можете щелкнуть на ней, чтобы показать
находящийся внутри нее HTML. Аналогично, если она направлена вниз, можете
щелкнуть на ней, чтобы его скрыть.
Наводя мышь на HTML-теги, вы увидите, что соответствующие им отобража-
емые элементы подсвечиваются на странице. Можете выбрать определенный эле-
мент HTML, щелкнув на его открывающем теге, и соответствующая ему строка
подсветится голубым.
HTML, который вы видите на вкладке Elements, может точно или не совсем
точно соответствовать HTML, который находится в вашем файле, но, если даже
совпадение неполное, это именно тот HTML-код, который отображает браузер. Как
я уже упоминал в главе 2, в некоторых случаях браузер совершенствует ваш код
самостоятельно (например, закрывая теги), и HTML, отображаемый на вкладке
Elements, содержит все предположения, сделанные Chrome. Например, если вы
создадите HTML-документ, содержащий только тег <p> без <html>, <header> и <body>,
Chrome допишет последние самостоятельно и покажет их вам на вкладке Elements
(рис. 3.19). Помните об этом, если когда-нибудь вас озадачит разница между тем,
что вы имели в виду по мнению Chrome, и тем, чего хотели на самом деле.
Рис. 3.19. Главный элемент div выделен, и вы можете видеть соответствующий ему набор правил
С правой стороны окна вы можете видеть CSS, связанный с выделенным HTML-

элементом. Попробуйте выделить элемент div, в котором находится абзац. Справа
на вкладке Styles вы увидите набор правил, связанный с этим элементом, а наведя
на него указатель мыши, можно отобразить флажки, появляющиеся слева от
Стилизуем Amazeriffic!
каждого из правил. Вы можете снять их, отменив таким образом какое-либо пра-
вило. Если возникли какие-то проблемы с вашим CSS, очень часто полезно по
смотреть на эту вкладку, чтобы убедиться, что ожидаемые вами правила действи-
тельно применяются. Вы можете посмотреть, как правила отображаются на панели
разработчика Chrome, на рис. 3.19.
Но это еще не все! Вы можете напрямую манипулировать правилами, щелкнув
на каком-то из них и введя для него новое значение. Вы можете даже добавить
новые правила прямо здесь, но помните, что изменения не отразятся на вашем
CSS-файле. Так что, если вы найдете решение для применения стиля с помощью
этого окна, вам нужно вернуться в Sublime и включить этот стиль в CSS.
Вы, наверное, уже пробовали манипулировать с отступами, границами и поля-
ми, изменяя код. Попробуйте проделать аналогичные действия на вкладке Elements
на панели разработчика. Вы увидите, что намного проще попробовать что-то и тут
же наблюдать визуальный эффект. Но помните, что после обновления страницы
все изменения будут потеряны и Chrome снова будет отображать страницу, соот-
ветствующую вашим HTML- и CSS-файлам.
ø$PD]HULI¿F
А сейчас изучим все это на примере. В предыдущей главе мы составили структуру
для домашней страницы приложения, которое называлось Amazeriffic. Финальный
вариант HTML, определяющего структуру страницы, выглядел так:
<!doctype html>
<html>
<head>
</head>
<body>
<header>
<nav>
<a href="#">Войти</a> |
<a href="#">ВиО</a> |
<a href="#">Техподдержка</a>
</nav>
</header>
<main>
<h2>Amazeriffic изменит вашу жизнь!</h2>
eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Язык

Пьюривал Сэмми - Основы разработки веб-приложений (Бестселлеры O'Reilly) - 2015

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Пьюривал Сэмми - Основы разработки веб-приложений (Бестселлеры O'Reilly) - 2015

Загружено:

Авторское право:

С.

Заведующий редакцией Д. Виницкий

º Хранение данных.............................................................................. 217

Подведем итоги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

Представление карточной игры. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

Хранение счетчиков. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201

º Хранение данных. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217

Взаимозависимости и package.json. . . . . . . . . . . . . . . . . . . . . . . . . . . 241

Сэмми Пьюривал около 10 лет преподавал компьютерные дисциплины и работал

К счастью, у меня было несколько друзей, которые активно работали в компью-

испытывают больше всего трудностей с массивами и объектами, поэтому я уделяю

наличие у моих студентов знания теоретических основ Java/C++. Я использую

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

Обозначает текст, который должен быть заменен величинами, введенными

Этот элемент означает совет или рекомендацию.

Такой элемент означает общее замечание.

Этот элемент означает предупреждение или предостережение.

800-998-9938 (in the United States or Canada)

Создание веб-приложений — сложный процесс, включающий использование мно-

мы, обладает очень скромными возможностями форматирования, но зато имеет

Рис. 1.1. Документ HTML, открытый в Emacs

Рис. 1.2. Документ HTML, открытый в Vim

В этой книге мы будем пользоваться редактором с графическим интерфейсом,

Рис. 1.3. Sublime Text, запущенный в первый раз

Поскольку мы будем работать с командной строкой, лучше всего избегать пробелов

Мы будем проводить много времени, редактируя код в Sublime, поэтому жела-

потерять ее. И вот однажды, достигнув важного момента в повествовании, вы по-

Рис. 1.6. Домашняя страница msysgit

Рис. 1.7. Домашняя страница Git for OS X

Если вы пользуетесь Linux, то можете установить Git через систему управления

этому, придется разобраться, как работать с файловой системой, используя неко-

Рис. 1.8. Терминальное окно по умолчанию в Mac OS

Открыв командную строку, вы видите приветственное сообщение. Оно может

Хотя иногда я и использую pwd, но обычно предпочитаю команду ls, которую

Таким образом, команда ls аналогична открытию папки в Finder или Проводни-

Следующее действие, которое вам понадобится, — это переход в следующую папку

Сейчас, если вы хотите получить визуальную обратную связь, можете исполь-

Мы видим один подкаталог в каталоге Documents, и этот подкаталог называется

Что произойдет, если вы хотите вернуться обратно в домашнюю папку? В фай-

При этом взаимодействии с командной строкой вы сначала смотрите содержи-

ды ls ничего выведено не будет. И наконец, последнее по очереди, но не по важ-

Рис. 1.9. Древовидная диаграмма, представляющая файловую иерархию

Постарайтесь держать эту ментальную модель в голове, перемещаясь по фай-

hostname $ mkdir Chapter1

Таким образом выводится все содержимое папки, включая файлы, помеченные

целую папку, файловая навигационная панель появляется с левой стороны окна

Рис. 1.10. Sublime с открытой папкой Chapter1

Рис. 1.11. Sublime после редактирования и сохранения файла index.html

Посмотрим, что произошло с хранилищем Git. Вернитесь к командной строке

А сейчас наберите git status и посмотрите на примерно такой ответ:

Обратите внимание на то, что в этом случае мы не получаем никакого ответа.

Таким образом мы получаем мгновенный снимок состояния нашего проекта

Затем внесем в index.html небольшие изменения. Добавим вторую строку, ко-

использовав соответствующее клавиатурное сокращение. А сейчас посмотрим, как

Обратите внимание: Git предупреждает нас, что index.html был изменен, но не

hostname $ git log

Рис. 1.12. Хранилище Git с четырьмя коммитами

Рис. 1.13. Более сложное хранилище Git

следует узнать, как эффективно использовать его в качестве инструмента разра-

Рис. 1.14. Окно Chrome по умолчанию

Один из самых важных аспектов разработки веб-приложения — освоение рацио-

Таблица 1.1. Команды UNIX

pwd Вывод на экран текущей папки

Таблица 1.2. Команды Git

git init Инициализация хранилища

Создание веб-приложений — сложный процесс, включающий использование мно-

Следующее действие, которое вам понадобится, — это переход в следующую папку

Что произойдет, если вы хотите вернуться обратно в домашнюю папку? В фай-

Один из самых важных аспектов разработки веб-приложения — освоение рацио-

Комментарии — очень удобный способ делать пометки в HTML. Мы начинаем

Когда мы откроем веб-страницу в браузере, то увидим нечто похожее на рис. 2.3.

А затем обновите страницу в браузере — и вы увидите нечто похожее на

Этот код будет выглядеть несколько иначе (рис. 3.4).

В главе 2 мы убедились, что можем создавать кликабельные элементы DOM с по-

Но таким образом мы изменим все элементы во всех списках — и в маркирован-